My Mini

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
 
(19 intermediate revisions not shown)
Line 103: Line 103:
<gallery widts=600px heights=100px perrow=4>  
<gallery widts=600px heights=100px perrow=4>  
File:FundoIcones_MyMini.jpg | Ecrã Principal
File:FundoIcones_MyMini.jpg | Ecrã Principal
 +
File:Fundo_Mutilmedia_MyMini.jpg | Ecrã Multimédia
File:Fundo_txt_MyMini.jpg | Ecrã História
File:Fundo_txt_MyMini.jpg | Ecrã História
 +
File:Fundo_dados_técnicos.jpg | Ecrã Dados Técnicos
File:Fundo_My_Mini.jpg | Ecrã My Mini
File:Fundo_My_Mini.jpg | Ecrã My Mini
-
File:Fundo_Mutilmedia_MyMini.jpg | Ecrã Multimédia
 
</gallery><br>
</gallery><br>
Line 111: Line 112:
<gallery widts=600px heights=100px perrow=4>  
<gallery widts=600px heights=100px perrow=4>  
-
File:Guias_Posicionais.png | Guias do ecrã principal
+
File:Guias_Posicionais.png | Ecrã Principal
 +
File:Guias_Posicionais_Multimedia.png
 +
File:Guias_Posicionais_Historia.png
 +
File:Guias_Posicionais_Dados_Tecnicos.png
 +
File:Guias_Posicionais_My_Mini.png
</gallery><br>
</gallery><br>
 +
 +
== Relatório ==
 +
 +
=== Apresentação do projecto ===
 +
<br> O projecto “My Mini” surge na perspectiva de dar a um possível comprador de um Mini, a possibilidade de depois de se dirigir a um stand, personalizar e saber um pouco mais acerca da marca. Assim através da aplicação, o utilizador pode visitar 5 ecrãs principais onde pode consultar toda a história do carro, saber as diferenças entre os respectivos modelos e consultar as especificações técnicas, ver vídeos e imagens e personalizar o seu carro.
 +
A aplicação inicia-se com um ecrã onde o utilizador terá de colocar a chave num sítio específico, carregando em seguida no botão de start, fazendo assim uma metáfora com o arranque de um carro. De seguida, o utilizador chega ao menu, onde para além da possibilidade de ver um vídeo, tem ainda 6 botões que se mantêm durante toda a aplicação e que possibilitam visitar o ecrã História, Dados Técnicos, MyMini, Multimédia, visitar o website oficial da Mini e saber mais sobre a aplicação no botão About. Escolhendo o botão História, o utilizador faz uma viagem ao longo dos anos pela história do Mini, desde os tempos do modelo mais antigo até aos modelos mais recentes. Ao seleccionar Dados Técnicos, o utilizador poderá para além de visionar imagens dos diversos modelos, consultar as respectivas informações técnicas dos mesmos. Preferindo o botão MyMini, o utilizador vai então para o ecrã fundamental da aplicação onde pode personalizar tudo o que é relacionado com o carro, começando na cor base e acabando na cor do tejadilho, espelhos, riscas do capot e tipo de jantes. Por fim no ecrã Multimédia para além de imagens seleccionadas do Mini, podemos ainda ver dois wallpapers idealizados para a aplicação e visualizar 3 vídeos promocionais da marca.
 +
 +
===Analise e planeamento ===
 +
<br>Actualmente o papel da personalização apresenta cada vez mais relevo quando um cliente/utilizador procura um produto. Tendo em conta que cada pessoa gosta de ter um estilo próprio e marcar a diferença, criámos então o conceito da aplicação: personalização. Como forma de melhor sabermos o que fazer e para tirarmos algumas ideias, foram visitados alguns sites em que a vertente principal era a personalização. Assim, tendo em conta este princípio consultamos o site da Fiat 500, da Porsche, da Nike e da Vespa Retro Colors e foi precisamente com o site da Porsche que decidimos orientar o nosso produto para a indústria automóvel. Para tal, pensámos num carro ou marca icónica que aliasse a personalização que pretendíamos a uma identidade visual que a ela correspondesse e assim surgiu o Mini, pois para além de toda a história que apresenta, é também um carro que marcou gerações e estilos.
 +
Todo estas referências podem ser melhor visualizadas nos separadores "Memória Descritiva e Tema Visual" e "Estado de Arte", mais acima nesta página
 +
 +
=== Desenho Funcional ===
 +
 +
====Requisitos funcionais====
 +
 +
•Introdução com drag da chave para target e botão start
 +
•Menu Principal com 6 botões, dos quais 4 se mantêm ao longo da aplicação e que definem os menus para os quais se pode navegar e os outros 2 permitem visitar o site oficial da Mini e visualizar o “about” da aplicação, 4 ícones (2 ícones de som visíveis, sair da aplicação e logótipo/home), um vídeo com botão Play/Pause e slider de controlo
 +
•Menu História com texto expositivo com botões de troca de imagens e de ano(seta) sendo este ultimo baseado no paradigma de interacção tutorial
 +
•Menu Dados Técnicos com 5 botões correspondentes aos vários modelos do carro com a descrição técnica e duas imagens em cada ecrã que alternam com a ajuda de um botão/seta
 +
•Menu MyMini com 5 botões que disponibilizam itens de personalização onde encontramos um picker que muda a cor base, ícones de mudança de cor das riscas, ícones de mudança de cor do tejadilho e ícones de mudança de cor/padrão do espelho e onde existe em todo o ambiente gráfico a possibilidade de ajustar a posição das janelas anteriores
 +
•Menu Multimédia com a existência de imagens e vídeos (botões de play,pause, stop e slider de controlo) e sendo cada um deles seleccionado por intermédio de um botão respectivo.
 +
 +
 +
====Estrutura Arborescente====
 +
 +
[[File:Arborescencia final mymini.jpg]]
 +
 +
A aplicação começa então com uma intro que passa então para o Menu, sem possibilidade de retorno, onde podemos navegar para 4 ecrâs diferentes (nós) e carregar em dois ícones (links) que só existem neste ecrã. De seguida no ecrã história podemos então viajar ao longo dos vários anos (nós) e em cada um deles temos imagens seleccionáveis (links). Nos dados técnicos temos como nós os vários modelos do carro em que cada um tem dois links que correspondem ás imagens respectivas. No ecrã MyMini temos os vários botões de personalização aos quais estão associados outros links com opções de personalização. No ecrã Multimédia temos os diverso links associados ás imagens e vídeos.
 +
 +
====Desenho de interacção e usabilidade====
 +
 +
Princípios de interacção:
 +
 +
•Conhecer o utilizador: o utilizador desta aplicação é uma apreciador de carros que procura adquirir um novo veiculo e ao mesmo tempo ter algo á sua imagem. Com a aplicação distribuída nos stands, o utilizador utilizara a aplicação em casa como forma de estímulo á compra.
 +
•Estrutura e orientação: através da arborescência podemos observar que esta não é demasiada profunda, logo a informação está a 3 ou 4 cliques de distância e o utilizador percebe facilmente para onde vai pois os botões são claros, a interface fácil de utilizar com mecanismos de retorno claros, estando os elementos relacionados agrupados em ecrãs lógicos.
 +
•Simplicidade: toda a aplicação parece-nos fácil de utilizar e sem complexidades desnecessárias.
 +
•Visibilidade: o utilizador sabe sempre para onde pode ir através de pistas visuais que não sendo exageradas, diminuem a necessidade de memorização.
 +
•Feedback: todo o texto/linguagem é básica, sendo a mais técnica (dados técnicos) adequada ao perfil do utilizador. Os períodos de latência estão diminuídos com o slider nos vídeos e animações em vários botões
 +
•Tolerância: em todas as opções do utilizador é possível voltar atrás, opções inapropriadas estão desactivadas (botões desactivados em questões de zoom, valores não possíveis na escolha de cores, …)
 +
•Consistência: o ambiente gráfico utiliza sensivelmente o mesmo conceito de escolha de itens no mesmo ecrã.
 +
<br>
 +
<br>Estilo de navegação/interacção: manipulação e navegação
 +
<br>
 +
<br>Meios de navegação / interacção - tipologias usadas: botões e menus pop-up
 +
 +
 +
===Desenho Técnico===
 +
<br>Para o desenvolvimento de todos os atributos foi necessário utilizar o Photoshop, Illustrator, Flash, MediaEncoder e Audacity. Quanto às linguagens de programação investigadas, e tendo em conta que alguns elementos do grupo têm conhecimentos de Java, C++ e Assembly, usamos alguns desses conhecimentos, aliados a pesquisas na internet sobre situações mais especificas de AS2. Neste aspecto, o que mais procurámos foram funções específicas que sabíamos existir noutras linguagens, bem como situações pontuais de variáveis.
 +
 +
<br>'''Ecra Inicial:'''
 +
 +
No primeiro ecrã o utilizador encontra a chave e um local para a colocar, podendo assim ir para o ecrã principal da aplicação ao carregar no start.
 +
Este ecrã possui dois botões (a chave e o botão start, que faz lembrar a tecnologia "Startand Stop" presente no Mini actual) e um movie clip que serve de target á chave.
 +
<br>'''Ecrã Principal:'''
 +
 +
Este ecrã é composto por vários botões e som de fundo que se mantém ao longo de todos os outros ecrãs.
 +
Neste ecrã podemos encontrar botões para sair da aplicação, controlo de som, ligação ao site Mini.com, "about" (que reage ao fazer rollover) e botão de play (que direciona o utilizador para um video em fullscreen).
 +
Os botões das principais funcionalidades da aplicação (história, dados técnicos, mymini e multimédia) estão transformados em movie clips ,para a implementação do rollover, e ao longo dos ecrãs principais, história , dados técnicos, mymini e multimédia.
 +
 +
<br>'''Ecrã História:'''
 +
 +
Neste ecrã podemos encontrar botões em forma de seta,que indicam o ano seguinte e o ano anterior para que possa navegar facilmente entre datas, e botões que permitem alterar as imagens correspondentes ao ano em que o utilizador se encontra.
 +
Como não é possível passar da primeira para a última data sem passar pelas restantes, estamos perante um paradigma de interacção tutorial.
 +
Este ecrã permite conhecer facilmente a história da marca e as alterações que o Mini foi sofrendo ao longo dos anos.
 +
 +
<br>'''Ecrã Dados Técnicos:'''
 +
 +
No ecrã dos dados técnicos podemos encontrar botões que permitem escolher qual a motorização pretendida e mostrar os respectivos dados técnicos e duas fotografias do modelo. Estas fotografias possuem zoom e o utilizador pode alterar entre as duas por meio de setas.
 +
Neste ecrã a vertente comercial é facilitada visto, que, possui vários dados importantes para o futuro cliente como o pvp e consumos.
 +
 +
<br>'''Ecrã My Mini:'''
 +
 +
No ecrã my Mini o utilizador pode alterar o Mini apresentado recorrendo aos botões presentes no fundo do ecrã. Decidimos recorrer a imagens para informar qual a função de cada botão. Nestes podemos alterar a cor base do mini, a cor das riscas, as jantes, a cor ou padrão dos espelhos e a cor do tejadilho. Ao carregar nestes botões, o utilizador altera um dos parâmetros referidos, podendo ter várias janelas em simultâneo no ecrã.
 +
 +
 +
<br>'''Ecrã Multimédia:'''
 +
 +
É neste ecrã que se encontra a base de dados de fotografias e vídeos promocionais da Mini. Possui um pequeno menu composto por botões com a miniatura da imagem, que permite escolher a imagem ou o vídeo correspondente, que irá surgir ampliado no caso das imagens ou começando a reprodução no caso dos vídeos. No caso de ser escolhido um elemento audiovisual o utilizador pode controlar alguns dos seus aspectos, tais como controlá-lo recorrendo ao slider, para-lo ou apenas colocar em pausa.
 +
 +
 +
===Produção do projecto===
 +
====Estrutura e meios de navegação/interacção====
 +
<br>Ao longo de toda a aplicação estão disponíveis botões de som(on/off) e o botão de sair; é ainda apresentado um movie clip relativo ao som.
 +
No ecrã de menu são apresentados ainda dois botões , um de about( que contextualiza e identifica as disciplinas , os autores e a universidade) e um botão que leva os utilizadores para o site oficial da Mini.com.
 +
Todos estes botões são icons com uma usabilidade fácil para o utilizador uma vez que pretendem auxilia-lo ao longo de toda a aplicação. O botão de som é realizado através de dois botões diferentes (botão on e off)em que o utilizador ao clicar num dos estados activa o contrario. O botão de sair apenas tem uma diferenciação no que diz respeito a frame “over” do botão, identificando ao utilizador de que está activo. O movie clip do som funciona não como botão, mas sim como indicador do estado do som.
 +
No que diz respeito ao menu principal (que se mantém ao longo de todos os ecrãs ) este é composto por quarto movie clips, onde a função de rollover e rollout fazem play de uma animação , que mais uma vez serve para alertar o utilizador do estado do item do menu.
 +
Meios de navegação / interacção - tipologias usadas: botões e menus pop-up
 +
 +
====Integração e controlo do som====
 +
<br>Tendo em conta que na nossa aplicação o utilizador poderá escolher se quer o som on ou off começamos por criar dois botões de som , tendo em conta que um o activa e o outro o desactiva. Assim , o utilizador ao clicar no som on , por exemplo , o outro botão de som (som off) ficaria visível. Uma vez que a nossa aplicação teve uma organização por cenas , foi nos necessário criar em AS2 um ciclo que nos permitisse no inicio de cada cena , testar o estado do som . Para tal desenvolvemos o seguinte código:
 +
<br>
 +
<br>''if(_global.som_play==true) {
 +
<br> som_on_btn._visible=true;
 +
<br> som_mc_off._visible=false;
 +
<br> som_off_btn._visible=false;
 +
<br> som_mc_on._visible=true;
 +
<br>}else {
 +
<br> som_on_btn._visible=false;
 +
<br> som_mc_off._visible=true;
 +
<br> som_off_btn._visible=true;
 +
<br> som_mc_on._visible=false;
 +
<br>}
 +
 +
Este código permite-nos então identificar o estado do som , e consoante essa identificação mostrar o botão correcto assim como a sua respectiva barra de detecção de som.
 +
A fonte dos nossos sons foi o site SoundSnap, sendo estes limitados a uma música ambiente que se adequa á aplicação e os efeitos sonoros que se ouvem quando clicamos nos botões.
 +
 +
====Animação====
 +
<br>Entre os vários ecrãs usamos as seguintes animações:
 +
O ecrã de intro , tem género de puzzle para o utilizador completar que é a colocação da chave do mini na sua área de Target e consequentemente por o carro a trabalhar. Para tal função produzi-mos o seguinte código:
 +
<br>
 +
<br>''on (press){
 +
<br> startDrag("chave");
 +
<br> target_on._visible=true;
 +
<br>}
 +
<br>
 +
<br>on (release){
 +
<br> stopDrag();
 +
<br> target_on._visible=false;
 +
<br>}''
 +
<br>
 +
Neste código o utilizador ao carregar na chave começa a acção de drag do objecto , e é activo um target ,ou seja, onde se pretende que o utilizador a coloque.
 +
Uma vez que quisemos atribuir ao ecrã de intro o aspecto da zona de arranque do Mini , desenhamos um botão de start que so activaria o menu se a chave estivesse no local correcto. Para isso criamos o seguinte código:
 +
<br>''on (release) {
 +
<br> if(chave._x < 463 & chave._x > 389 & chave._y > 339 & chave._y < 361) {
 +
<br> motor.start();
 +
<br> play();
 +
<br> }else {
 +
<br> error.start();
 +
<br> }
 +
<br>}''
 +
 +
Este código testava se a chave estaria colocada no local pretendido , e caso estivesse levaria-nos para o menu principal da aplicação. Este avanço para o menu principal fazia se acompanhar de um som de arranque do motor. Caso a chave nao estivesse no sitio certo a aplicação não avança e ouvir se á um som de negação da acção de start.
 +
A maior parte das animações da aplicação foram implementadas por movie clips , que se activavam com o rollover do rato, uma vez que nos permitiu uma maior programação e uma mais fácil integração dos mesmos.
 +
A utilização dos Motion tweens foi realizada essencialmente no aparecimento dos botões no ecrã principal(recurso também a alguns filters e color effects), na animação de rollOver dos botões, na transição de ecrãs como do intro para o menu principal e no ecrã de saida(fade in/out), e na ferramenta de zoom criada no menu dados técnicos (aumento de escala da imagem e fade out do ecrã).
 +
Animação frame a frame nas barras detectoras do som, que vão alterando a sua posição e quantidade.
 +
E ainda animação keyframing  implementada nas mudanças de imagens, vídeos e troca de ecrãs.
 +
 +
 +
====Soluções técnicas adoptadas para a resolução de problemas====
 +
<br>
 +
Os maiores problemas que tivemos na implentação de software foram principalmente no ecrã MyMini, dado a complexidade deste. Para isso desenvolvemos um anexo onde explicamos de forma mais adequada o código que procurámos e adaptámos para cada caso. No resto da aplicação tivemos alguns problemas com algumas variáveis, aos quais fomos respondendo com o _parent, _root e _global. No ecrã de dados técnicos tivemos mais problemas no ecrã de zoom e no “desactivar” dos botões de fundo, que foi resolvido com troca de instâncias. Por fim, tivemos também alguns problemas com o slider, que foram resolvidos também com o código e explicação presentes no anexo
 +
 +
===Conclusão===
 +
 +
====Reflexão crítica====
 +
Na opinião do grupo o aspecto que ficou por desenvolver ao longo do trabalho foi o aspecto da animação, uma vez que dedicamos mais o nosso tempo à interactividade e à disponibilidade/variedade de conteúdos multimédia.
 +
Ainda em relação ao trabalho de grupo e divisão de tarefas, pensamos que resultamos bem enquanto grupo de trabalho, uma vez que todos cumpriram as tarefas destinadas.
 +
Aquando da concepção do projecto e já quando nos encontramos a desenvolver, foi-nos mostrada uma aplicação com o mesmo intuito. No entanto, com a certeza que poderia desenvolver algo diferente continuamos com a ideia e pensamos que no fim o conseguimos.
 +
 +
====Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto====
 +
Ao nível das animações teríamos investido mais do nosso tempo em fades e rollovers de botões, acrescentaríamos ainda uma função de gravar as personalizações no ecrã MyMini, permitindo assim aos utilizadores guardarem as suas preferências.
 +
 +
 +
===Referências Web e Bibliográficas===
 +
====Motor de busca====
 +
<br>-www.google.com
 +
<br>-www.youtube.com
 +
====Aplicações idênticas====
 +
<br>- Nike ID (http://store.nike.com/PT/en_GB/?cp=EUNS_KW_NS09_PT_Google_B&#l=shop,pdp,ctr-nikeid/pn-mog1010--LTITEM232014--/bv-2/bv-2/pbid-INSPI_227337_v9_0_201010070003/piid-18438/pid-384551/cid-103203)
 +
<br>- Porsche 911 GT2 RS (http://www.porsche.com/microsite/911gt2rs/flash/default.aspx?language=prt&market=PIB&pool=portugal&instance=574&variant=&section=&showintro=true&bandwidth=dsl&width=1366&height=768&deeplink=&model=&from_dvd=&dvd_data=&specialguest=0&startWithLogin=false)
 +
<br>- Fiat 500 (http://www.fiat.pt/cgi-bin/pbrand.dll/FIAT_PORTUGAL/home.jsp)
 +
<br>- Vespa Retro Colors (http://www.retrovespa.com/colors.html)
 +
 +
====Informações sobre o mini====
 +
<br>- Mini (http://www.mini.pt)
 +
 +
====Programação====
 +
<br>- Adobe.com (http://forums.adobe.com/index.jspa)
 +
<br>- gotoAndLearn (http://www.gotoandlearn.com/)
 +
<br>- Actionscript.org (http://www.actionscript.org/)
 +
<br>- Kirupa.com (http://www.kirupa.com/)
 +
<br>- Flash Kit (http://board.flashkit.com/board/)
 +
 +
===Anexo===
 +
 +
Este anexo surge com o intuito de explicar mais a programação que sai dos conteúdos dados nas aulas.
 +
 +
====Ecrã My Mini====
 +
 +
'''Arrastar janelas:'''
 +
<br>O interface recriar um ambiente de “software” de edição, com a possibilidade de ajustar a área de trabalho, com recurso a funções Drag, como mostra o código seguinte:
 +
 +
 +
<br>''//Janela de alteração de cor
 +
<br>varcolorWindowPlayed:Boolean = false;
 +
<br>barraColorWindow._visible = false;
 +
<br>fecharColorWindow._visible = false;
 +
 +
 +
<br>barraColorWindow.onPress = function() {
 +
<br> startDrag(colorWindow,false,83,263,942,388);
 +
<br> fecharColorWindow._visible = false;
 +
<br> barraColorWindow._alpha = 0;
 +
<br> barraColorWindow.onMouseMove = function() {
 +
<br> fecharColorWindow._x = colorWindow._x + 74.25;
 +
<br> fecharColorWindow._y = colorWindow._y - 72.75;
 +
<br> barraColorWindow._x = colorWindow._x - 83.75;
 +
<br> barraColorWindow._y = colorWindow._y - 80.25;
 +
<br>
 +
<br> }
 +
<br>
 +
<br>}
 +
<br>
 +
<br>barraColorWindow.onRelease = function() {
 +
<br> colorWindow.stopDrag();
 +
<br> barraColorWindow._alpha = 100;
 +
<br> fecharColorWindow._x = colorWindow._x + 74.25;
 +
<br> fecharColorWindow._y = colorWindow._y - 72.75;
 +
<br> barraColorWindow._x = colorWindow._x - 83.75;
 +
<br> barraColorWindow._y = colorWindow._y - 80.25;
 +
<br> fecharColorWindow._visible = true;
 +
<br>}''
 +
 +
 +
 +
No cabeçalho são programadas instruções para ocultar a janela ao aceder pela primeira vez ao ecrã e a criação de uma variável booleana para poder ser usada para abertura/fecho da janela através do botão fechar ou no botão para abrir a janela.
 +
 +
 +
Por seguinte, o código é dividido por duas partes, a primeira permite que ao premir o botão do rato possamos arrastar a janela. Isto é possível através da função:
 +
 +
<br>''startDrag(target,lock,left,top,right,bottom);''
 +
 +
 +
O resto do código, na primeira parte, permite arrastar o resto dos elementos.
 +
 +
 +
Na segunda parte, permite, ao largar o botão, fixar a janela onde o utilizador deseja. A função usada para o efeito é:
 +
 +
<br>''colorWindow.stopDrag();''
 +
 +
Para poder abrir as janelas de personalização, nomeadamente, a alteração da cor, das riscas, das jantes, dos espelhos e do tejadilho, é usado o seguinte código:
 +
 +
<br>''on(release) {
 +
<br> barraColorWindow._visible = true;
 +
<br> fecharColorWindow._visible = true;
 +
<br> if (colorWindowPlayed == false) {
 +
<br> colorWindow.gotoAndPlay(2);
 +
<br> colorWindowPlayed = true;
 +
<br> barraColorWindow._visible = true;
 +
<br> } else {
 +
<br> colorWindow.gotoAndPlay(5);
 +
<br> colorWindowPlayed = false;
 +
<br> barraColorWindow._visible = false;
 +
<br> fecharColorWindow._visible = false;
 +
<br> }
 +
<br>}''
 +
 +
 +
 +
O código faz um teste, usando a variável criada no inicio na condição if, para que o mesmo botão permita abrir e fechar a janela. Também é permitido fechar a janela através do botão presente no canto superior da janela.
 +
 +
'''Picker'''
 +
<br>O menu “Cores” altera a cor base do carro através de dois meios: selecção através de um picker  ou por inserção de código RGB ou Hexadecimal.
 +
 +
O picker utiliza uma imagem com o espectro de cores e através do cursor podemos percorrer as cores até á cor desejada, esta acção é acompanhada de uma pré-visualização no carro assim como num rectângulo de preview e dos códigos da cor, RGB e Hexadecimal. Passemos ao código:
 +
 +
Antes de mais, temos de criar uma função que possa mudar a cor a vários elementos, sem que tenhamos de escrever o código sempre que queremos alterar a cor.
 +
 +
<br>''functionsetColor(myObj,color) {
 +
<br>varcolor_ch = new Color(myObj)
 +
<br>color_ch.setRGB(color);''
 +
 +
<br>myObj: Objecto(movieclip) que queremos alterar a cor.
 +
<br>Color: Código hexadecimal da cor emString.
 +
 +
A função nativa para transformar o objecto é:
 +
<br>''setRGB(color);''
 +
 +
Como referido o parâmetro color tem de ser introduzido em Hexadecimal, pelo que sempre que desejarmos alterar a cor teremos que converter para Hexadecimal caso a cor esteja em outro código. Mais abaixo explicamos como se faz esse conversão.
 +
 +
No menu, o objecto visível é um botão, para que seja clicável para a selecção da cor, mas que quando o cursor do rato se encontra sobre o objecto, rollover, temos acesso ao movieclip onde se encontra o código para a “captação” da cor.
 +
 +
<br>''varbmp:BitmapData = newBitmapData(this._width, this._height, false);
 +
<br>bmp.draw(this);
 +
 +
<br>this.onMouseMove = function(){
 +
<br>varpColor:Number = bmp.getPixel(_xmouse, _ymouse);
 +
<br>varhexColor:String = pColor.toString(16).toUpperCase();
 +
<br>
 +
<br> while(hexColor.length< 6){
 +
<br>hexColor = "0" + hexColor;''
 +
 +
No cabeçalho é criado uma imagem bitmap de dados, onde se encontra informação de cada pixel para que o código seguinte, quando o cursor do rato se move, consiga “extrair” esse pixel,
 +
 +
<br>''getPixel(_xmouse, _ymouse);''
 +
 +
Esta informação, é convertida posteriormente em código hexadecimal, não sendo o código anteriormente referido para a conversão,
 +
 +
<br>''varhexColor:String = pColor.toString(16).toUpperCase();
 +
<br>
 +
<br> while(hexColor.length< 6){
 +
<br>hexColor = "0" + hexColor;''
 +
 +
 +
Como referido, na janela vão ser visualizado os códigos da cor em caixas de texto, para tal usamos uma conversão HEXtoRGB, mais tarde iremos ver a conversão RGBtoHEX,
 +
 +
<br>''hexColor = RRGGBB
 +
 +
<br>var r = Number("0x" + hexColor.substr(0,2));
 +
<br>var g = Number("0x" + hexColor.substr(2,2));
 +
<br>var b = Number("0x" + hexColor.substr(4,2));''
 +
 +
Acedendo á String do código cor extraimos a substring correspondente a cada gama de cor, como exemplo,
 +
 +
<br>''R = Number(0xFF) = 255''
 +
 +
Após esta conversão temos disponível variáveis que podemos “imprimir” em caixas de texto. Como exemplos,
 +
 +
<br>''_parent._parent.R_1.text = r;'' , para “imprimir” na caixa de texto R_1 o conteúdo da variável r.
 +
 +
 +
<br>''_parent._parent.HexCode_1.text = "#" + hexColor;'', para “imprimir” na caixa de texto correspondente ao código hexadecimal no formato #RRGGBB.
 +
 +
 +
Após já ter disponível o código da cor procedemos á pré-visualização da cor no carro e no rectângulo preview, para tal precisamos de transformar o código de maneira que seja visível pela função nativa setRGB().
 +
 +
<br>''color_base = String("0x"+hexColor);''
 +
 +
Assim, criamos uma String com o código para definir como parâmetro de entrada da função setColor() criada no inicio.
 +
 +
 +
<br>''//Preview da cor no carro
 +
<br>setColor(_root.baseColor_preview,color_base);''
 +
 +
Onde _root.baseColor é o movieclip onde queremos mudar a cor.
 +
 +
Como referido, o objecto com as cores é um botão para selecionar a cor com o click do rato.
 +
 +
Antes de mais, criamos um cursorpicker e substituímos pelo curso do rato, usando a função nativa anteriormente usada startDrag(),
 +
 +
<br>''on(rollOver){
 +
<br> Mouse.hide();
 +
<br> picker_cursor._x = _xmouse;
 +
<br> picker_cursor._y = _ymouse;
 +
<br> startDrag(picker_cursor,true);
 +
<br> picker_cursor._visible = true;''
 +
 +
Para voltar a ao cursor normal,
 +
 +
<br>''on(rollOut){
 +
<br> Mouse.show();
 +
<br> picker_cursor._visible = false;''
 +
 +
 +
Ao clicar selecionamos a cor, que foi guardada numa variável neste movieclip com recurso a instrução _parente à função criada setColor().
 +
 +
Passemos agora a outro método de escolha de cor.
 +
 +
'''Inserção manual de código'''
 +
<br>Antes de tudo, temos que formatar e preparar as caixas de input para a inserção do código.
 +
 +
<br>''myTextBox.maxChars = 3;''    para inserir apenas 3 caracteres.
 +
<br>''myTextBox.restrict = "0-9";''    para apenas ser permitido inserir números.
 +
<br>''myTextBox.textColor = "0xCCCCCC";''    para definir a cor de texto.
 +
<br>''HexCode_1.indexOf(0).restrict = "#";''      para que o primeiro carácter a ser introduzido na caixa do código hexadecimal seja #.
 +
 +
Embora tenho sido restritas as caixas de texto, é preciso validar a cor introduzida, pois a cor RGB está definida entre 0 e 255. Para tal criamos uma função para a verificação.
 +
 +
<br>''functioncolorVal(myTxt,xErrorTxt,yErrorTxt) {
 +
<br> aux = parseInt(myTxt.text);
 +
<br> if ((aux< 0) || (aux> 255)) {
 +
<br> myTxt.textColor = "0xFF0000";
 +
<br> errorColor_box._x = xErrorTxt;
 +
<br> errorColor_box._y = yErrorTxt;
 +
<br> errorColor_box ._visible = true;
 +
<br> aplicar_btn._visible = false;
 +
<br> allCorrect = false;
 +
<br> } elseif ((aux>= 0) || (aux<= 255)) {
 +
<br> myTxt.textColor = "0xCCCCCC";
 +
<br> errorColor_box._visible = false;
 +
<br> aplicar_btn._visible = true;
 +
<br> }
 +
<br>}''
 +
 +
 +
Este código, em primeiro transforma o conteúdo da caixa de texto num número inteiro com a função nativa parseInt() e depois testada na condição if.
 +
Após este teste, e se a cor não for válida, a cor do texto torna-se vermelho e é apresentada uma caixa de erro.
 +
 +
Esta função pode então ser usada para quando a caixa de texto seja alterada pera inserção de caracteres,
 +
 +
<br>''R_1.onChanged = function() {
 +
<br> colorVal(R_1,-60,115);
 +
<br> hex = RGBtoHex(R_1.text,G_1.text,B_1.text);
 +
<br> HexCode_1.text = "#" + hex;''
 +
 +
Após a validação, a caixa de texto do código hexadecimal vai apresentar a cor em código Hexadecimal, aqui usamos a outra função de conversão de código,
 +
 +
<br>''functionRGBtoHex(R,G,B) {returntoHex(R)+toHex(G)+toHex(B)}
 +
<br>functiontoHex(N) {
 +
<br>if (N==null) return "00";
 +
<br> N=parseInt(N);
 +
<br> if (N==0 || isNaN(N)) return "00";
 +
<br> N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
 +
<br> return "0123456789ABCDEF".charAt((N-N%16)/16)
 +
<br> + "0123456789ABCDEF".charAt(N%16);
 +
<br>}''
 +
 +
Outra opção é a inserção do código hexadecimal. Não usamos validação de inserção pois restringimos a inserção, começando pelo carácter #,
 +
 +
<br>''if (HexCode_1.text.charAt(0)!="#") {(HexCode_1.text = "#")}''
 +
 +
Esta linha de código vai incluir o carácter # no inicio do código. A restrição de inserção,
 +
 +
<br>''HexCode_1.restrict = "0-9,A-F";''
 +
 +
'''Riscas/Tejadilho'''
 +
<br>O menu riscas, semelhante ao do tejadilho, vai permitir a pré-visualização das riscas ao passar do rato, para tal antes de mais precisamos criar duas variáveis booleanas a indicar a cor pré-definida pela aplicação, neste caso, a cor branca.
 +
 +
<br>''varselectPreto:Boolean = false;''
 +
<br>''varselectBranco:Boolean = true;''
 +
 +
 +
No menu tem dois botões para selecção, riscas pretas e riscas brancas, ambas com pré-visualização. Para tal usamos instruções com recurso a condições if , variáveis booleanas e a visibilidade dos movieclips.
 +
 +
Como exemplo, o botão das riscas pretas,
 +
 +
<br>''on(rollOver) {
 +
<br> if(selectPreto == true) {
 +
<br> _root.riscas_brancas._visible = true;
 +
<br> _root.riscas_pretas._visible = false;
 +
<br> }
 +
<br>}
 +
<br>
 +
<br>on(rollOut) {
 +
<br> if((selectBranco == false) && (selectPreto == true)) {
 +
<br> _root.riscas_brancas._visible = false;
 +
<br> _root.riscas_pretas._visible = true;
 +
<br> }
 +
<br>}
 +
<br>
 +
<br>on(release) {
 +
<br> _root.riscas_brancas._visible = true;
 +
<br> _root.riscas_pretas._visible = false;
 +
<br> selectBranco = true;
 +
<br> selectPreto = false;
 +
<br>}''
 +
 +
'''Jantes'''
 +
<br>Neste menu escolhes um interface com auto-scroll á passagem do rato para fazer deslocar o movieclip com os botões das jantes. O auto-scroll é dado calculando o deslocamento através do seguinte calculo matemático,
 +
 +
<br>''Math.cos((-_root._ymouse/(Stage.height+110))*Math.PI)*15;''
 +
 +
Com condições e atribuição de novas coordenadas ao movieclip fazer este mover-se.
 +
 +
Neste menu desactivou-se a pré-visualização devido ao grande número de elementos, mas não seria impossível de construir. Neste caso, a função do botão é tornar visível ou invisível as jantes que estão no stage principal.
 +
 +
'''Espelhos'''
 +
<br>A interacção deste menu é única diferença para o do menu das jantes, separou-se apenas por categorias, cores e padrões. O algoritmo é mesmo, sem pré-visualização.
 +
 +
====Slider Videos====
 +
<br>Para o desenvolvimento de raiz do objecto de slider de vídeo usamos, essencialmente, recurso á função nativa seek() do flash. Mas antes demais, desenvolvemos o movieclip que vai funcionar com o botão de deslocação e programamos como um objecto Drag.
 +
 +
<br>''startDrag(bar,false,inicio,bar._y,fim,bar._y);''
 +
 +
<br>Passemos então à construção da função.
 +
Temos que conseguir saber sempre saber em que posição de tempo o vídeo se encontra, isto porque a função seek() tem como parâmetro o tempo, e usar esse mesmo tempo para converter para a posição do botão no Stage. Passemos ao código,
 +
 +
<br>''this.onEnterFrame = function() {
 +
<br>posBar = (fim*_parent.v1.playheadTime/_parent.v1.totalTime)
 +
<br>if(scrolling)
 +
<br>bar._x = posBar;
 +
<br>}''
 +
 +
A variável posBar utiliza uma expressão matemática para calcular a posição da barra para depois ser usada para dar a coordenada x da mesma, isto se a condição if(scrolling)for verdadeira, que indica se a barra está em movimento com o rato ou automático.
 +
 +
Ao largar o botão do rato calculamos a posição a “saltar” no vídeo com o código,
 +
 +
<br>''pos = (_parent.v1.totalTime*bar._x)/fim;
 +
<br> _parent.v1.seek(pos);
 +
<br> _parent.v1.play();
 +
 +
Depois de calculado o tempo, fazemos seek() desse mesmo tempo e play para voltar a reproduzir.

Latest revision as of 23:59, 14 January 2011

Contents

My Mini

Grupo


Memória Descritiva e Tema Visual

A aplicação "My Mini" tem como principal objectivo promover e cativar o público mais jovem, e assim baseia-se numa imagem mais versátil, inovadora e dinâmica. Esta linguagem reflete-se no slogan adoptado: "A MINI car for big stuffs".


Nesta aplicação multimédia interactiva vamos dar ao utilizador a hipotese de personalizar o seu veiculo através do conceito Do it for yourself, consultar a história da marca, visualizar um modelo 3D, ver imagens e videos promocionais. Combinando cores e padroes na personalização e na edição de toda a aplicação vamos então trasmitir a mensagem que pretendemos sem com isso tirar liberdade ao utilizador.

Estado de arte


Nike id.jpg
Nike ID


Porche.jpg
Porche 911 GT2 RS


Fiat.jpg
Fiat 500


Vespa.jpg
Vespa Retro Colors


Tendo em conta o objectivo da nossa aplicação , em que o processo de personalização está destacado, analisamos estas aplicações de forma a retirar ideias, conceitos e bases que nos permitam criar ferramentas necessárias ao desenvolvimento do projecto.

Identidade Visual



Na definição da identidade visual e como tínhamos de perceber o que era necessário realizar criamos um pequeno rascunho onde definimos o esquema geral da página com os principais botões e ideia base para a aplicação.

My Mini Rascunho.jpg


Para perceber o que teria cada botão decidimos fazer uma pequena arborescência, que embora básica e sem grande rigor nos ajudará a definir melhor a aplicação.

My Mini Esquema.jpg


Como qualquer identidade visual funciona muito melhor com um logótipo que a "defina" criamos um que juntasse a imagem já existente do Mini com algo que tivesse a ver com imagem da aplicação:

My Mini logo.jpg

Este foi posteriormente alterado pois achamos que não se enquadrava bem na aplicação, do qual resultou este logotipo:

Logo my mini.jpg

Tendo em conta que o foco da aplicação é o carro e a informação deste criamos este esquema de cores no kuller onde com os cinzas pretendemos dar esse protagonismo ao carro sem no entanto a tornar aborrecida e daí o vermelho utilizado.

My Mini Cores.jpg


Por fim escolhemos uma letra para os botões da aplicação e um para o texto propriamente dito, utilizando para tal a letra "London_Between" em duas das suas versoes:

"London Between" para o texto:
Letra texto My Mini.jpg

"London Two" para os botões:
Letra Butoes My Mini.jpg

Arborescência



Arborescencia2 My Mini.jpg

Ecrãs Tipo / Assets

Ícones


Botão Tipo

Botão História

Botão Dados Técnicos

Botão My Mini

Botão Multimédia



Botão About

Botão Site Oficial Mini



Botão Som

Botão Fechar


Ecrãs

Pricipais Ecrãs da aplicação:

Ecrã Principal

Ecrã Multimédia

Ecrã História

Ecrã Dados Técnicos

Ecrã My Mini


Guias Posicionais

Ecrã Principal

Guias Posicionais Multimedia.png
Guias Posicionais Historia.png
Guias Posicionais Dados Tecnicos.png
Guias Posicionais My Mini.png

Relatório

Apresentação do projecto


O projecto “My Mini” surge na perspectiva de dar a um possível comprador de um Mini, a possibilidade de depois de se dirigir a um stand, personalizar e saber um pouco mais acerca da marca. Assim através da aplicação, o utilizador pode visitar 5 ecrãs principais onde pode consultar toda a história do carro, saber as diferenças entre os respectivos modelos e consultar as especificações técnicas, ver vídeos e imagens e personalizar o seu carro. A aplicação inicia-se com um ecrã onde o utilizador terá de colocar a chave num sítio específico, carregando em seguida no botão de start, fazendo assim uma metáfora com o arranque de um carro. De seguida, o utilizador chega ao menu, onde para além da possibilidade de ver um vídeo, tem ainda 6 botões que se mantêm durante toda a aplicação e que possibilitam visitar o ecrã História, Dados Técnicos, MyMini, Multimédia, visitar o website oficial da Mini e saber mais sobre a aplicação no botão About. Escolhendo o botão História, o utilizador faz uma viagem ao longo dos anos pela história do Mini, desde os tempos do modelo mais antigo até aos modelos mais recentes. Ao seleccionar Dados Técnicos, o utilizador poderá para além de visionar imagens dos diversos modelos, consultar as respectivas informações técnicas dos mesmos. Preferindo o botão MyMini, o utilizador vai então para o ecrã fundamental da aplicação onde pode personalizar tudo o que é relacionado com o carro, começando na cor base e acabando na cor do tejadilho, espelhos, riscas do capot e tipo de jantes. Por fim no ecrã Multimédia para além de imagens seleccionadas do Mini, podemos ainda ver dois wallpapers idealizados para a aplicação e visualizar 3 vídeos promocionais da marca.

Analise e planeamento


Actualmente o papel da personalização apresenta cada vez mais relevo quando um cliente/utilizador procura um produto. Tendo em conta que cada pessoa gosta de ter um estilo próprio e marcar a diferença, criámos então o conceito da aplicação: personalização. Como forma de melhor sabermos o que fazer e para tirarmos algumas ideias, foram visitados alguns sites em que a vertente principal era a personalização. Assim, tendo em conta este princípio consultamos o site da Fiat 500, da Porsche, da Nike e da Vespa Retro Colors e foi precisamente com o site da Porsche que decidimos orientar o nosso produto para a indústria automóvel. Para tal, pensámos num carro ou marca icónica que aliasse a personalização que pretendíamos a uma identidade visual que a ela correspondesse e assim surgiu o Mini, pois para além de toda a história que apresenta, é também um carro que marcou gerações e estilos. Todo estas referências podem ser melhor visualizadas nos separadores "Memória Descritiva e Tema Visual" e "Estado de Arte", mais acima nesta página

Desenho Funcional

Requisitos funcionais

•Introdução com drag da chave para target e botão start •Menu Principal com 6 botões, dos quais 4 se mantêm ao longo da aplicação e que definem os menus para os quais se pode navegar e os outros 2 permitem visitar o site oficial da Mini e visualizar o “about” da aplicação, 4 ícones (2 ícones de som visíveis, sair da aplicação e logótipo/home), um vídeo com botão Play/Pause e slider de controlo •Menu História com texto expositivo com botões de troca de imagens e de ano(seta) sendo este ultimo baseado no paradigma de interacção tutorial •Menu Dados Técnicos com 5 botões correspondentes aos vários modelos do carro com a descrição técnica e duas imagens em cada ecrã que alternam com a ajuda de um botão/seta •Menu MyMini com 5 botões que disponibilizam itens de personalização onde encontramos um picker que muda a cor base, ícones de mudança de cor das riscas, ícones de mudança de cor do tejadilho e ícones de mudança de cor/padrão do espelho e onde existe em todo o ambiente gráfico a possibilidade de ajustar a posição das janelas anteriores •Menu Multimédia com a existência de imagens e vídeos (botões de play,pause, stop e slider de controlo) e sendo cada um deles seleccionado por intermédio de um botão respectivo.


Estrutura Arborescente

Arborescencia final mymini.jpg

A aplicação começa então com uma intro que passa então para o Menu, sem possibilidade de retorno, onde podemos navegar para 4 ecrâs diferentes (nós) e carregar em dois ícones (links) que só existem neste ecrã. De seguida no ecrã história podemos então viajar ao longo dos vários anos (nós) e em cada um deles temos imagens seleccionáveis (links). Nos dados técnicos temos como nós os vários modelos do carro em que cada um tem dois links que correspondem ás imagens respectivas. No ecrã MyMini temos os vários botões de personalização aos quais estão associados outros links com opções de personalização. No ecrã Multimédia temos os diverso links associados ás imagens e vídeos.

Desenho de interacção e usabilidade

Princípios de interacção:

•Conhecer o utilizador: o utilizador desta aplicação é uma apreciador de carros que procura adquirir um novo veiculo e ao mesmo tempo ter algo á sua imagem. Com a aplicação distribuída nos stands, o utilizador utilizara a aplicação em casa como forma de estímulo á compra. •Estrutura e orientação: através da arborescência podemos observar que esta não é demasiada profunda, logo a informação está a 3 ou 4 cliques de distância e o utilizador percebe facilmente para onde vai pois os botões são claros, a interface fácil de utilizar com mecanismos de retorno claros, estando os elementos relacionados agrupados em ecrãs lógicos. •Simplicidade: toda a aplicação parece-nos fácil de utilizar e sem complexidades desnecessárias. •Visibilidade: o utilizador sabe sempre para onde pode ir através de pistas visuais que não sendo exageradas, diminuem a necessidade de memorização. •Feedback: todo o texto/linguagem é básica, sendo a mais técnica (dados técnicos) adequada ao perfil do utilizador. Os períodos de latência estão diminuídos com o slider nos vídeos e animações em vários botões •Tolerância: em todas as opções do utilizador é possível voltar atrás, opções inapropriadas estão desactivadas (botões desactivados em questões de zoom, valores não possíveis na escolha de cores, …) •Consistência: o ambiente gráfico utiliza sensivelmente o mesmo conceito de escolha de itens no mesmo ecrã.

Estilo de navegação/interacção: manipulação e navegação

Meios de navegação / interacção - tipologias usadas: botões e menus pop-up


Desenho Técnico


Para o desenvolvimento de todos os atributos foi necessário utilizar o Photoshop, Illustrator, Flash, MediaEncoder e Audacity. Quanto às linguagens de programação investigadas, e tendo em conta que alguns elementos do grupo têm conhecimentos de Java, C++ e Assembly, usamos alguns desses conhecimentos, aliados a pesquisas na internet sobre situações mais especificas de AS2. Neste aspecto, o que mais procurámos foram funções específicas que sabíamos existir noutras linguagens, bem como situações pontuais de variáveis.


Ecra Inicial:

No primeiro ecrã o utilizador encontra a chave e um local para a colocar, podendo assim ir para o ecrã principal da aplicação ao carregar no start. Este ecrã possui dois botões (a chave e o botão start, que faz lembrar a tecnologia "Startand Stop" presente no Mini actual) e um movie clip que serve de target á chave.
Ecrã Principal:

Este ecrã é composto por vários botões e som de fundo que se mantém ao longo de todos os outros ecrãs. Neste ecrã podemos encontrar botões para sair da aplicação, controlo de som, ligação ao site Mini.com, "about" (que reage ao fazer rollover) e botão de play (que direciona o utilizador para um video em fullscreen). Os botões das principais funcionalidades da aplicação (história, dados técnicos, mymini e multimédia) estão transformados em movie clips ,para a implementação do rollover, e ao longo dos ecrãs principais, história , dados técnicos, mymini e multimédia.


Ecrã História:

Neste ecrã podemos encontrar botões em forma de seta,que indicam o ano seguinte e o ano anterior para que possa navegar facilmente entre datas, e botões que permitem alterar as imagens correspondentes ao ano em que o utilizador se encontra. Como não é possível passar da primeira para a última data sem passar pelas restantes, estamos perante um paradigma de interacção tutorial. Este ecrã permite conhecer facilmente a história da marca e as alterações que o Mini foi sofrendo ao longo dos anos.


Ecrã Dados Técnicos:

No ecrã dos dados técnicos podemos encontrar botões que permitem escolher qual a motorização pretendida e mostrar os respectivos dados técnicos e duas fotografias do modelo. Estas fotografias possuem zoom e o utilizador pode alterar entre as duas por meio de setas. Neste ecrã a vertente comercial é facilitada visto, que, possui vários dados importantes para o futuro cliente como o pvp e consumos.


Ecrã My Mini:

No ecrã my Mini o utilizador pode alterar o Mini apresentado recorrendo aos botões presentes no fundo do ecrã. Decidimos recorrer a imagens para informar qual a função de cada botão. Nestes podemos alterar a cor base do mini, a cor das riscas, as jantes, a cor ou padrão dos espelhos e a cor do tejadilho. Ao carregar nestes botões, o utilizador altera um dos parâmetros referidos, podendo ter várias janelas em simultâneo no ecrã.



Ecrã Multimédia:

É neste ecrã que se encontra a base de dados de fotografias e vídeos promocionais da Mini. Possui um pequeno menu composto por botões com a miniatura da imagem, que permite escolher a imagem ou o vídeo correspondente, que irá surgir ampliado no caso das imagens ou começando a reprodução no caso dos vídeos. No caso de ser escolhido um elemento audiovisual o utilizador pode controlar alguns dos seus aspectos, tais como controlá-lo recorrendo ao slider, para-lo ou apenas colocar em pausa.


Produção do projecto

Estrutura e meios de navegação/interacção


Ao longo de toda a aplicação estão disponíveis botões de som(on/off) e o botão de sair; é ainda apresentado um movie clip relativo ao som. No ecrã de menu são apresentados ainda dois botões , um de about( que contextualiza e identifica as disciplinas , os autores e a universidade) e um botão que leva os utilizadores para o site oficial da Mini.com. Todos estes botões são icons com uma usabilidade fácil para o utilizador uma vez que pretendem auxilia-lo ao longo de toda a aplicação. O botão de som é realizado através de dois botões diferentes (botão on e off)em que o utilizador ao clicar num dos estados activa o contrario. O botão de sair apenas tem uma diferenciação no que diz respeito a frame “over” do botão, identificando ao utilizador de que está activo. O movie clip do som funciona não como botão, mas sim como indicador do estado do som. No que diz respeito ao menu principal (que se mantém ao longo de todos os ecrãs ) este é composto por quarto movie clips, onde a função de rollover e rollout fazem play de uma animação , que mais uma vez serve para alertar o utilizador do estado do item do menu. Meios de navegação / interacção - tipologias usadas: botões e menus pop-up

Integração e controlo do som


Tendo em conta que na nossa aplicação o utilizador poderá escolher se quer o som on ou off começamos por criar dois botões de som , tendo em conta que um o activa e o outro o desactiva. Assim , o utilizador ao clicar no som on , por exemplo , o outro botão de som (som off) ficaria visível. Uma vez que a nossa aplicação teve uma organização por cenas , foi nos necessário criar em AS2 um ciclo que nos permitisse no inicio de cada cena , testar o estado do som . Para tal desenvolvemos o seguinte código:

if(_global.som_play==true) {
som_on_btn._visible=true;
som_mc_off._visible=false;
som_off_btn._visible=false;
som_mc_on._visible=true;
}else {
som_on_btn._visible=false;
som_mc_off._visible=true;
som_off_btn._visible=true;
som_mc_on._visible=false;
}

Este código permite-nos então identificar o estado do som , e consoante essa identificação mostrar o botão correcto assim como a sua respectiva barra de detecção de som. A fonte dos nossos sons foi o site SoundSnap, sendo estes limitados a uma música ambiente que se adequa á aplicação e os efeitos sonoros que se ouvem quando clicamos nos botões.

Animação


Entre os vários ecrãs usamos as seguintes animações: O ecrã de intro , tem género de puzzle para o utilizador completar que é a colocação da chave do mini na sua área de Target e consequentemente por o carro a trabalhar. Para tal função produzi-mos o seguinte código:

on (press){
startDrag("chave");
target_on._visible=true;
}

on (release){
stopDrag();
target_on._visible=false;
}
Neste código o utilizador ao carregar na chave começa a acção de drag do objecto , e é activo um target ,ou seja, onde se pretende que o utilizador a coloque. Uma vez que quisemos atribuir ao ecrã de intro o aspecto da zona de arranque do Mini , desenhamos um botão de start que so activaria o menu se a chave estivesse no local correcto. Para isso criamos o seguinte código:
on (release) {
if(chave._x < 463 & chave._x > 389 & chave._y > 339 & chave._y < 361) {
motor.start();
play();
}else {
error.start();
}
}

Este código testava se a chave estaria colocada no local pretendido , e caso estivesse levaria-nos para o menu principal da aplicação. Este avanço para o menu principal fazia se acompanhar de um som de arranque do motor. Caso a chave nao estivesse no sitio certo a aplicação não avança e ouvir se á um som de negação da acção de start. A maior parte das animações da aplicação foram implementadas por movie clips , que se activavam com o rollover do rato, uma vez que nos permitiu uma maior programação e uma mais fácil integração dos mesmos. A utilização dos Motion tweens foi realizada essencialmente no aparecimento dos botões no ecrã principal(recurso também a alguns filters e color effects), na animação de rollOver dos botões, na transição de ecrãs como do intro para o menu principal e no ecrã de saida(fade in/out), e na ferramenta de zoom criada no menu dados técnicos (aumento de escala da imagem e fade out do ecrã). Animação frame a frame nas barras detectoras do som, que vão alterando a sua posição e quantidade. E ainda animação keyframing implementada nas mudanças de imagens, vídeos e troca de ecrãs.


Soluções técnicas adoptadas para a resolução de problemas


Os maiores problemas que tivemos na implentação de software foram principalmente no ecrã MyMini, dado a complexidade deste. Para isso desenvolvemos um anexo onde explicamos de forma mais adequada o código que procurámos e adaptámos para cada caso. No resto da aplicação tivemos alguns problemas com algumas variáveis, aos quais fomos respondendo com o _parent, _root e _global. No ecrã de dados técnicos tivemos mais problemas no ecrã de zoom e no “desactivar” dos botões de fundo, que foi resolvido com troca de instâncias. Por fim, tivemos também alguns problemas com o slider, que foram resolvidos também com o código e explicação presentes no anexo

Conclusão

Reflexão crítica

Na opinião do grupo o aspecto que ficou por desenvolver ao longo do trabalho foi o aspecto da animação, uma vez que dedicamos mais o nosso tempo à interactividade e à disponibilidade/variedade de conteúdos multimédia. Ainda em relação ao trabalho de grupo e divisão de tarefas, pensamos que resultamos bem enquanto grupo de trabalho, uma vez que todos cumpriram as tarefas destinadas. Aquando da concepção do projecto e já quando nos encontramos a desenvolver, foi-nos mostrada uma aplicação com o mesmo intuito. No entanto, com a certeza que poderia desenvolver algo diferente continuamos com a ideia e pensamos que no fim o conseguimos.

Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto

Ao nível das animações teríamos investido mais do nosso tempo em fades e rollovers de botões, acrescentaríamos ainda uma função de gravar as personalizações no ecrã MyMini, permitindo assim aos utilizadores guardarem as suas preferências.


Referências Web e Bibliográficas

Motor de busca


-www.google.com
-www.youtube.com

Aplicações idênticas


- Nike ID (http://store.nike.com/PT/en_GB/?cp=EUNS_KW_NS09_PT_Google_B&#l=shop,pdp,ctr-nikeid/pn-mog1010--LTITEM232014--/bv-2/bv-2/pbid-INSPI_227337_v9_0_201010070003/piid-18438/pid-384551/cid-103203)
- Porsche 911 GT2 RS (http://www.porsche.com/microsite/911gt2rs/flash/default.aspx?language=prt&market=PIB&pool=portugal&instance=574&variant=&section=&showintro=true&bandwidth=dsl&width=1366&height=768&deeplink=&model=&from_dvd=&dvd_data=&specialguest=0&startWithLogin=false)
- Fiat 500 (http://www.fiat.pt/cgi-bin/pbrand.dll/FIAT_PORTUGAL/home.jsp)
- Vespa Retro Colors (http://www.retrovespa.com/colors.html)

Informações sobre o mini


- Mini (http://www.mini.pt)

Programação


- Adobe.com (http://forums.adobe.com/index.jspa)
- gotoAndLearn (http://www.gotoandlearn.com/)
- Actionscript.org (http://www.actionscript.org/)
- Kirupa.com (http://www.kirupa.com/)
- Flash Kit (http://board.flashkit.com/board/)

Anexo

Este anexo surge com o intuito de explicar mais a programação que sai dos conteúdos dados nas aulas.

Ecrã My Mini

Arrastar janelas:
O interface recriar um ambiente de “software” de edição, com a possibilidade de ajustar a área de trabalho, com recurso a funções Drag, como mostra o código seguinte:



//Janela de alteração de cor
varcolorWindowPlayed:Boolean = false;
barraColorWindow._visible = false;
fecharColorWindow._visible = false;



barraColorWindow.onPress = function() {
startDrag(colorWindow,false,83,263,942,388);
fecharColorWindow._visible = false;
barraColorWindow._alpha = 0;
barraColorWindow.onMouseMove = function() {
fecharColorWindow._x = colorWindow._x + 74.25;
fecharColorWindow._y = colorWindow._y - 72.75;
barraColorWindow._x = colorWindow._x - 83.75;
barraColorWindow._y = colorWindow._y - 80.25;

}

}

barraColorWindow.onRelease = function() {
colorWindow.stopDrag();
barraColorWindow._alpha = 100;
fecharColorWindow._x = colorWindow._x + 74.25;
fecharColorWindow._y = colorWindow._y - 72.75;
barraColorWindow._x = colorWindow._x - 83.75;
barraColorWindow._y = colorWindow._y - 80.25;
fecharColorWindow._visible = true;
}


No cabeçalho são programadas instruções para ocultar a janela ao aceder pela primeira vez ao ecrã e a criação de uma variável booleana para poder ser usada para abertura/fecho da janela através do botão fechar ou no botão para abrir a janela.


Por seguinte, o código é dividido por duas partes, a primeira permite que ao premir o botão do rato possamos arrastar a janela. Isto é possível através da função:


startDrag(target,lock,left,top,right,bottom);


O resto do código, na primeira parte, permite arrastar o resto dos elementos.


Na segunda parte, permite, ao largar o botão, fixar a janela onde o utilizador deseja. A função usada para o efeito é:


colorWindow.stopDrag();

Para poder abrir as janelas de personalização, nomeadamente, a alteração da cor, das riscas, das jantes, dos espelhos e do tejadilho, é usado o seguinte código:


on(release) {
barraColorWindow._visible = true;
fecharColorWindow._visible = true;
if (colorWindowPlayed == false) {
colorWindow.gotoAndPlay(2);
colorWindowPlayed = true;
barraColorWindow._visible = true;
} else {
colorWindow.gotoAndPlay(5);
colorWindowPlayed = false;
barraColorWindow._visible = false;
fecharColorWindow._visible = false;
}
}


O código faz um teste, usando a variável criada no inicio na condição if, para que o mesmo botão permita abrir e fechar a janela. Também é permitido fechar a janela através do botão presente no canto superior da janela.

Picker
O menu “Cores” altera a cor base do carro através de dois meios: selecção através de um picker ou por inserção de código RGB ou Hexadecimal.

O picker utiliza uma imagem com o espectro de cores e através do cursor podemos percorrer as cores até á cor desejada, esta acção é acompanhada de uma pré-visualização no carro assim como num rectângulo de preview e dos códigos da cor, RGB e Hexadecimal. Passemos ao código:

Antes de mais, temos de criar uma função que possa mudar a cor a vários elementos, sem que tenhamos de escrever o código sempre que queremos alterar a cor.


functionsetColor(myObj,color) {
varcolor_ch = new Color(myObj)
color_ch.setRGB(color);


myObj: Objecto(movieclip) que queremos alterar a cor.
Color: Código hexadecimal da cor emString.

A função nativa para transformar o objecto é:
setRGB(color);

Como referido o parâmetro color tem de ser introduzido em Hexadecimal, pelo que sempre que desejarmos alterar a cor teremos que converter para Hexadecimal caso a cor esteja em outro código. Mais abaixo explicamos como se faz esse conversão.

No menu, o objecto visível é um botão, para que seja clicável para a selecção da cor, mas que quando o cursor do rato se encontra sobre o objecto, rollover, temos acesso ao movieclip onde se encontra o código para a “captação” da cor.


varbmp:BitmapData = newBitmapData(this._width, this._height, false);
bmp.draw(this);


this.onMouseMove = function(){
varpColor:Number = bmp.getPixel(_xmouse, _ymouse);
varhexColor:String = pColor.toString(16).toUpperCase();

while(hexColor.length< 6){
hexColor = "0" + hexColor;

No cabeçalho é criado uma imagem bitmap de dados, onde se encontra informação de cada pixel para que o código seguinte, quando o cursor do rato se move, consiga “extrair” esse pixel,


getPixel(_xmouse, _ymouse);

Esta informação, é convertida posteriormente em código hexadecimal, não sendo o código anteriormente referido para a conversão,


varhexColor:String = pColor.toString(16).toUpperCase();

while(hexColor.length< 6){
hexColor = "0" + hexColor;


Como referido, na janela vão ser visualizado os códigos da cor em caixas de texto, para tal usamos uma conversão HEXtoRGB, mais tarde iremos ver a conversão RGBtoHEX,


hexColor = RRGGBB


var r = Number("0x" + hexColor.substr(0,2));
var g = Number("0x" + hexColor.substr(2,2));
var b = Number("0x" + hexColor.substr(4,2));

Acedendo á String do código cor extraimos a substring correspondente a cada gama de cor, como exemplo,


R = Number(0xFF) = 255

Após esta conversão temos disponível variáveis que podemos “imprimir” em caixas de texto. Como exemplos,


_parent._parent.R_1.text = r; , para “imprimir” na caixa de texto R_1 o conteúdo da variável r.



_parent._parent.HexCode_1.text = "#" + hexColor;, para “imprimir” na caixa de texto correspondente ao código hexadecimal no formato #RRGGBB.


Após já ter disponível o código da cor procedemos á pré-visualização da cor no carro e no rectângulo preview, para tal precisamos de transformar o código de maneira que seja visível pela função nativa setRGB().


color_base = String("0x"+hexColor);

Assim, criamos uma String com o código para definir como parâmetro de entrada da função setColor() criada no inicio.



//Preview da cor no carro
setColor(_root.baseColor_preview,color_base);

Onde _root.baseColor é o movieclip onde queremos mudar a cor.

Como referido, o objecto com as cores é um botão para selecionar a cor com o click do rato.

Antes de mais, criamos um cursorpicker e substituímos pelo curso do rato, usando a função nativa anteriormente usada startDrag(),


on(rollOver){
Mouse.hide();
picker_cursor._x = _xmouse;
picker_cursor._y = _ymouse;
startDrag(picker_cursor,true);
picker_cursor._visible = true;

Para voltar a ao cursor normal,


on(rollOut){
Mouse.show();
picker_cursor._visible = false;


Ao clicar selecionamos a cor, que foi guardada numa variável neste movieclip com recurso a instrução _parente à função criada setColor().

Passemos agora a outro método de escolha de cor.

Inserção manual de código
Antes de tudo, temos que formatar e preparar as caixas de input para a inserção do código.


myTextBox.maxChars = 3; para inserir apenas 3 caracteres.
myTextBox.restrict = "0-9"; para apenas ser permitido inserir números.
myTextBox.textColor = "0xCCCCCC"; para definir a cor de texto.
HexCode_1.indexOf(0).restrict = "#"; para que o primeiro carácter a ser introduzido na caixa do código hexadecimal seja #.

Embora tenho sido restritas as caixas de texto, é preciso validar a cor introduzida, pois a cor RGB está definida entre 0 e 255. Para tal criamos uma função para a verificação.


functioncolorVal(myTxt,xErrorTxt,yErrorTxt) {
aux = parseInt(myTxt.text);
if ((aux< 0) || (aux> 255)) {
myTxt.textColor = "0xFF0000";
errorColor_box._x = xErrorTxt;
errorColor_box._y = yErrorTxt;
errorColor_box ._visible = true;
aplicar_btn._visible = false;
allCorrect = false;
} elseif ((aux>= 0) || (aux<= 255)) {
myTxt.textColor = "0xCCCCCC";
errorColor_box._visible = false;
aplicar_btn._visible = true;
}
}


Este código, em primeiro transforma o conteúdo da caixa de texto num número inteiro com a função nativa parseInt() e depois testada na condição if. Após este teste, e se a cor não for válida, a cor do texto torna-se vermelho e é apresentada uma caixa de erro.

Esta função pode então ser usada para quando a caixa de texto seja alterada pera inserção de caracteres,


R_1.onChanged = function() {
colorVal(R_1,-60,115);
hex = RGBtoHex(R_1.text,G_1.text,B_1.text);
HexCode_1.text = "#" + hex;

Após a validação, a caixa de texto do código hexadecimal vai apresentar a cor em código Hexadecimal, aqui usamos a outra função de conversão de código,


functionRGBtoHex(R,G,B) {returntoHex(R)+toHex(G)+toHex(B)}
functiontoHex(N) {
if (N==null) return "00";
N=parseInt(N);
if (N==0 || isNaN(N)) return "00";
N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
return "0123456789ABCDEF".charAt((N-N%16)/16)
+ "0123456789ABCDEF".charAt(N%16);
}

Outra opção é a inserção do código hexadecimal. Não usamos validação de inserção pois restringimos a inserção, começando pelo carácter #,


if (HexCode_1.text.charAt(0)!="#") {(HexCode_1.text = "#")}

Esta linha de código vai incluir o carácter # no inicio do código. A restrição de inserção,


HexCode_1.restrict = "0-9,A-F";

Riscas/Tejadilho
O menu riscas, semelhante ao do tejadilho, vai permitir a pré-visualização das riscas ao passar do rato, para tal antes de mais precisamos criar duas variáveis booleanas a indicar a cor pré-definida pela aplicação, neste caso, a cor branca.


varselectPreto:Boolean = false;
varselectBranco:Boolean = true;


No menu tem dois botões para selecção, riscas pretas e riscas brancas, ambas com pré-visualização. Para tal usamos instruções com recurso a condições if , variáveis booleanas e a visibilidade dos movieclips.

Como exemplo, o botão das riscas pretas,


on(rollOver) {
if(selectPreto == true) {
_root.riscas_brancas._visible = true;
_root.riscas_pretas._visible = false;
}
}

on(rollOut) {
if((selectBranco == false) && (selectPreto == true)) {
_root.riscas_brancas._visible = false;
_root.riscas_pretas._visible = true;
}
}

on(release) {
_root.riscas_brancas._visible = true;
_root.riscas_pretas._visible = false;
selectBranco = true;
selectPreto = false;
}

Jantes
Neste menu escolhes um interface com auto-scroll á passagem do rato para fazer deslocar o movieclip com os botões das jantes. O auto-scroll é dado calculando o deslocamento através do seguinte calculo matemático,


Math.cos((-_root._ymouse/(Stage.height+110))*Math.PI)*15;

Com condições e atribuição de novas coordenadas ao movieclip fazer este mover-se.

Neste menu desactivou-se a pré-visualização devido ao grande número de elementos, mas não seria impossível de construir. Neste caso, a função do botão é tornar visível ou invisível as jantes que estão no stage principal.

Espelhos
A interacção deste menu é única diferença para o do menu das jantes, separou-se apenas por categorias, cores e padrões. O algoritmo é mesmo, sem pré-visualização.

Slider Videos


Para o desenvolvimento de raiz do objecto de slider de vídeo usamos, essencialmente, recurso á função nativa seek() do flash. Mas antes demais, desenvolvemos o movieclip que vai funcionar com o botão de deslocação e programamos como um objecto Drag.


startDrag(bar,false,inicio,bar._y,fim,bar._y);


Passemos então à construção da função. Temos que conseguir saber sempre saber em que posição de tempo o vídeo se encontra, isto porque a função seek() tem como parâmetro o tempo, e usar esse mesmo tempo para converter para a posição do botão no Stage. Passemos ao código,


this.onEnterFrame = function() {
posBar = (fim*_parent.v1.playheadTime/_parent.v1.totalTime)
if(scrolling)
bar._x = posBar;
}

A variável posBar utiliza uma expressão matemática para calcular a posição da barra para depois ser usada para dar a coordenada x da mesma, isto se a condição if(scrolling)for verdadeira, que indica se a barra está em movimento com o rato ou automático.

Ao largar o botão do rato calculamos a posição a “saltar” no vídeo com o código,


pos = (_parent.v1.totalTime*bar._x)/fim;
_parent.v1.seek(pos);
_parent.v1.play();

Depois de calculado o tempo, fazemos seek() desse mesmo tempo e play para voltar a reproduzir.

Retrieved from "http://wikis.ua.pt/lab1ide/index.php?title=My_Mini"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox