Saudeebemestar

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
 
(43 intermediate revisions not shown)
Line 1: Line 1:
-
'''Elementos do Grupo'''
+
<center>[[File:Health4alllogo.jpg]]
-
Fábio Rocha 59735
 
-
Gil Filipe 59505
 
 +
'''Realizado por:'''
-
Luís Almeida 59736
 
-
Tiago Andrade 59738
+
Gil Filipe, nº 59505
-
'''
+
Fábio Rocha, nº 59735
-
Conceito
+
-
'''
+
-
Construção de uma plataforma Web em flash.
+
-
A aplicação tem como objectivo ajudar o público a tratar pequenos problemas de saúde através dos seus sintomas.
+
-
'''Nome'''
+
Luís Almeida, nº 59736
-
O nome ainda nao foi decidido, contudo já surgiram ideias como: health4all, 
+
Tiago Andrade, nº 59738
 +
</center>
-
'''Memória Descritiva
+
----
-
'''
+
-
O utilizador vai ser confrontado com um corpo de um humano, no qual vai clicar na parte onde sente dor. Depois vão surgir questões relacionadas com a dor que vão levar o utilizador a vários métodos de tratamento. 
+
-
'''Referências visuais
+
== Diário de Bordo ==
-
'''
+
 
-
Visualização do livro ''Viva Melhor'' e "Guia familiar de saúde"
+
===Dia 25 de Novembro===
-
Visualização da secção saúde do www.sapo.pt
+
Tivemos alguns problemas na escolha do tema, pois num universo infinito de escolhas queria-mos algo que fosse
 +
diferente e inovador.
 +
A poucos minutos do fim da aula chega-mos a um consenso e apresenta-mos o tema "health4all" ao professor Ivo
 +
 
 +
===Dia 29 de Novembro===
 +
Elaboramos a memoria descritiva e a estrutura gráfica do projecto
 +
Escolhemos o tipo de letra utilizado e os botões básicos que iram existir na nossa aplicação
 +
 
 +
===Dia 3 de Dezembro===
 +
Publicamos na wiki todos as escolhas relativas ao projecto
 +
Organizamos a wiki de forma a ficar mais acessível aos interessados.
 +
 
 +
===Dia 6 de Dezembro===
 +
Criamos algumas partes chave da aplicação
 +
-Intro
 +
-Botões principais
 +
-Imagem vectorial do corpo humano.
 +
 
 +
===Dia 9 de Dezembro===
 +
- Conclusão do corpo humano (vectorizado)
 +
- Conclusão da vectorização dos botões secundários
 +
 
 +
===Dia 19 de Dezembro===
 +
- Inicio do trabalho em flash.
 +
 
 +
===Dia 8 de Janeiro===
 +
- Finalização dos ecrâs principais em .fla.
 +
 
 +
===Dia 9 de Janeiro===
 +
- Conclusão do acordeão horizontal
 +
- Conclusão do efeito alpha do corpo humano no ecrã principal
 +
 
 +
===Dia 11 de Janeiro===
 +
- Conclusão da sonorização
 +
 
 +
===Dia 12 de Janeiro===
 +
- Conclusão da programação do flash.
 +
 
 +
===Dia 13 de Janeiro===
 +
- Conclusão do flash.
 +
 
 +
 
 +
----
 +
 
 +
 
 +
 
 +
== Relatório Final ==
 +
 
 +
 
 +
=== 1. Apresentação do Projecto: ===
 +
O projecto tem como tema a Saúde e o Bem estar, intitulado de “Health4All”.
 +
É uma aplicação multimédia interactiva que tem como público alvo pessoas em busca de mais informação sobre saúde, como preservar e melhorar esta, e também sobre os diversos sistemas de orgãos do corpo humano.
 +
 
 +
 
 +
=== 2. Análise e Planeamento: ===
 +
Para ter uma noção de como seria o design da aplicação procedeu-se à procura na internet de websites sobre saúde. Todos tinham um estilo bastante simples, cores leves, e um tipo de letra igualmente sem grande complexidade. Isso leva a que os sites pareçam todos bastante “limpos” e transmitem confiança e segurança ao utilizador, daí a razão da escolha do design da aplicação e da palete de cores.
 +
A escolha de como seria a interação do utilizador com a aplicação foi dificil. Depois de uma investigação na internet de websites como os anteriormente referidos, decidiu-se que o cerne da aplicação seria a interacção do utilizador com um corpo humano e com a sua fisiologia anatómica. Inicialmente foi pensado em algo muito concreto em apenas algumas partes do corpo humano, em que o utilizador iria ser confrontado com determinadas partes do corpo humano, não todas porque iriam ser muitas, e de seguida o utilizador escolhia qual a parte na qual tinha problemas de saúde ou apenas alguma dor, e iriam ser providenciadas soluções e maneiras de a manter em forma.
 +
Este conceito era muito restricto a apenas algumas partes do corpo e muito dificil de aplicar no corpo todo. Tinha então de ser establecido um novo conceito.
 +
Num segundo conceito decidiu-se que ao invés de, como no primeiro, expor o corpo humano e dar soluções para determinados problemas em determinadas partes do corpo, dividia-se o corpo em 3 grandes partes: cabeça, tronco e membros. O utilizador teria de seleccionar a parte sobre a qual queria obter mais informação e dentro dessa parte teria os orgãos correspondentes.
 +
Mais uma vez chegou-se à conclusão que poderia estar ainda melhor, uma vez que continuava a ser um método muito pouco preciso e iriam surgir problemas principalmente na parte dos membros, que não têm qualquer orgão do corpo humano associado.
 +
 
 +
 
 +
Por último, chegou-se então ao conceito final:
 +
A aplicação multimédia faz o utilizador ser confrontado com o corpo humano em duas imagens diferentes: o exterior e o interior (orgãos dos diferentes sistemas). Ao ver o corpo humano com todos os seus orgãos, o utilizador é capaz de escolher o sistema de orgãos sobre o qual quer obter mais informação e também dicas para o manter saudavel e em boa forma, sendo esses sistemas o reprodutor, respiratório, circulatório, sensorial , digestivo e nervoso.
 +
Este foi o conceito final colocado em prática, e o mais bem sucedido uma vez que é o melhor organizado e que tem mais capacidade de responder às exigências do utilizador, e isso é o mais importante.
 +
 
 +
 
 +
1º Estado da Arte: 
 +
 
 +
[[File:Ecra.jpg]]
 +
 
 +
No primeiro estado da arte, obtido aquando do primeiro conceito referido acima, o layout ficou um pouco pesado demais para o pretendido. O pretendido era um layout que levasse o utilizador a ter confiança e segurança na informação dada, pois trata-se de saúde e a confiança na aplicação seria crucial. Neste estado também foram designados 4 menus principais nos quais o utilizador poderia navegar, sendo eles o Inicio, onde teria o corpo humano e a informação relativa a este; Links onde teria links úteis sobre saúde, desde farmácias a hospitais, entre outros; Quem somos onde teria informação sobre os elementos do grupo e o porquê da realização da aplicação; Contactos, com contactos úteis.
 +
Chegou-se à conclusão que teria de ser feita uma reformulação dos menus. O menu Contactos iria ter muito pouco conteúdo e pensou-se em unir este menú com o menú Quem Somos, onde colocamos o contacto de cada elemento do grupo. Assim ficou decidido de forma unânime entre todos os elementos do grupo.
 +
 
 +
 
 +
2º Estado da Arte: 
 +
 
 +
[[File:Inicio.png]]
 +
 
 +
Neste estado da arte foram então utilizadas cores mais claras e layouts mais simples para transmitir mais segurança e orientação de certa forma ao utilizador. Tal como concordado, há agora três menus, e também uma melhor organização do conteúdo, seguindo uma grelha de 3 colunas no centro da aplicação, onde aparece o conteúdo de cada menu.
 +
 
 +
 
 +
3º Estado da Arte:
 +
 
 +
[[File:Ecra_final.png]]
 +
 
 +
 
 +
Não há diferenças a nível de cores para com o segundo estado da arte, contudo, decidiu-se que o conteúdo dos menus seria impossível de organizar em três colunas, em todos os menus.
 +
Menus esses que passaram a ser 4 neste estado, com a junção de Conceitos. Este menu terá conceitos básicos sobre saúde e bem estar, bem como defenições gerais sobre estes 2 conceitos.
 +
Este é o estado da arte final, o mais organizado e que transmite mais confiança e sentido de orientação ao público.
 +
 
 +
 
 +
 
 +
=== 3. Desenho Funcional===
 +
 
 +
 
 +
'''3.1. Requisitos Funcionais'''
 +
 
 +
 
 +
A aplicação em si tem 4 menus principais: Conceitos, Corpo Humano, Quem Somos e Links.
 +
O menu onde é maior o controlo do conteúdo e a interacção é o menu Corpo Humano, onde está concentrada a maior parte do trabalho.
 +
Nesse menu tem um menu estilo “Acordeão”, onde o utilizador pode navegar para ter mais informação sobre os seis diferentes sistemas do corpo humano. É um menu com uma programação mais avançada e que permite total controlo por parte do utilizador através do rollOver em cima de cada parte desse acordeão.
 +
Junto com este, o utilizador é confrontado com o corpo humano nas suas 2 formas: exterior e interior, sendo que no segundo é possível ver os orgãos do corpo humano agrupados nos seis sistemas. O utilizador é também capaz de escolher qual das formas quer visualizar através do clique num botão.
 +
No corpo humano interior, o utilizador é capaz de interagir com qualquer dos 6 sistemas, escolhendo a informação sobre como manter esse sistema em forma e saudável. Para tal só tem de proceder ao clique no sistema que desejar.
 +
Para além deste menu do Corpo Humano, o utilizador pode navegar ainda no Conceitos, onde não tem qualquer interacção dentro deste, tem apenas informação textual sobre o tema; o menu Links tem links uteis em forma de botão, onde o utilizadador pode clicar para ser redireccionado para o sitio web correspondente, ou fazer na própria aplicação um preview da página, vendo assim uma imagem do website; no menu Quem somos o utilizador tem a oportunidade de saber mais sobre este trabalho e sobre os elementos que o fizeram, de que curso somos e também onde estudamos, e ver fotos desse sitio.
 +
O som é algo sempre presente na aplicação durante a navegação do utilizador. Tem uma suave música de fundo e sons no rollOver dos 4 botões principais dos 4 menus. Este som é controlável através do botão de play, stop, e um slider que permite controlar o volume com grande precisão através de arraste de um controlo numa barra.
 +
 
 +
 
 +
'''3.2. Estrutura Arborescente'''
 +
 
 +
[[File:Estruturaarborescente.png]]
 +
 
 +
 
 +
'''3.3. Desenho de interacção e usabilidade'''
 +
 
 +
 
 +
O desenho da estrutura foi feito tendo em concideração o tema da aplicação e o público alvo.
 +
Foi considerado sobretudo o tema de cores utilizado e o tipo de letra no desenho da interacção. Foram utilizadas cores claras, dentro do azul e cor de cosa, incluindo o branco e o texto utilizado em algum texto. Estas cores foram escolhidas por um propósito: dar um estilo leve, simples, e um ambiente de confiança ao utilizador, pois o público alvo é sem dúvida alguém à procura de informação sobre a saúde e o bem estar, e é necessário que o utilizador confie no trabalho que vizualisa para continuar na aplicação. O tipo de letra e o Myriad Pro , este tipo de letra é um simples, e contribui para aquele estilo leve e simples desejado da aplicação.
 +
Para manter a navegação simples, decidiu-se que teria os quatro menus principais bem evidenciados no topo do ecrã, e o utilizador poderia navegar entre estes menus livremente sem qualquer restrição. É feita uma espécie de hieraraquia entre cada menu, sendo que no menu do Corpo Humano é sem dúvida a hierarquia maior e onde existe maior possibildades de navegação do utilizador.
 +
Como ajuda ao utilizador, colocaram-se dicas de utilização no ecrã principal, logo depois do loading, a explicar o fundamento da aplicação e como começar a navegar, e também se colocou outra dica no menu do corpo humano, a explicar como ceder à informação de cada sistema.
 +
 
 +
 
 +
===Tipo de Letra:===
 +
 
 +
'''Myriad'''
 +
 
 +
Escolhemos esta tipografia pois é um tipo de letra simples, fresco e limpo, que facilmente se enquadra
 +
na área de saude e bem estar, oferencendo aos utilizadores uma leitura simples e rápida.
 +
 
 +
[[File:Myriadfont.jpg]]
 +
 
 +
 
 +
===Esquema de Cores===
 +
 
 +
 
 +
Para a escolha de cores baseamo-nos nas cores básicas de saude, azul e rosa, com as suas vertentes mais claras
 +
e mais escuras.
 +
 
 +
As cores básicas a ser utilizadas, para além do branco, são:
 +
 
 +
[[File:coressaude.jpg]]
 +
 
 +
 
 +
===Logotipo===
 +
 
 +
 
 +
[[File:Health4alllogo.jpg]]
 +
 
 +
 
 +
 
 +
===Corpo Humano===
 +
 
 +
[[File:Corpo humano2.jpg]]
 +
 
 +
===Corpo Humano===
 +
(Separado nos diversos sistemas)
 +
 
 +
[[File:Corpo humano orgaos.jpg]]
 +
 
 +
 
 +
=== 4. Desenho Técnico ===
 +
 
 +
 
 +
Na elaboração da nossa estrutura para a aplicação utilizamos técnicas simples no illustrator. Escolhemos 4 cores principais, e seguimos essas cores para toda a aplicação. Seguiram-se grelhas predefinidas, com 3 partes principais: o cabeçalho, onde tem o logotipo e os 4 menus principais, o centro onde aparecerá o conteúdo de cada menu, e também o rodapé, que contém algumas curiusidades e o controlo de som.
 +
Tudo isto está alinhado ao centro acompanhado com duas barras laterais, de cor mais escura.
 +
 
 +
 
 +
 
 +
=== 5. Produção do Projecto ===
 +
 
 +
 
 +
'''5.1. Estrutura e meios de navegação/interacção'''
 +
Decidiu-se que o projecto teria uma única cena, e dentro dessa cena iria ocorrer toda a interacção do utilizador com a aplicação.
 +
Criou-se então a estrutura principal da aplicação, aquela que nunca iria ser alterada ao longo da aplicação. Essa estrutura é constituida por um logotipo, uma barra imaginária na sua direita onde estão alinhados os 4 botões dos 4 menus principais, 2 margens laterais, e o rodapé onde tem também algum conteúdo. Toda esta estrutura permanece inalterável ao longo da aplicação.
 +
 +
 
 +
O único conteúdo que se altera é o que aparece no centro do movie, que neste caso são 4 movie clips, um para cada um dos 4 menus principais.
 +
Através da criação de 4 movie clips (1 para cada menu principal), criaram-se 4 keyframes na timeline principal, bem como as respectivas labels nessas keyframes e noutra layer os 4 movie clips em cada uma das labels, devidamente ordenados e alinhados no stage.
 +
Com uma layer para as Actions, começamos desde logo a programar a aplicação para que a cabeça de leitura parasse em cada uma das keyframes correspondentes a cada um dos 4 menus. Para tal, criamos keyframes nas mesmas frames que criamos na labels e de seguida, em cada uma, abrimos o painel das actions e escreveu-se stop();  em cada uma delas.
 +
 +
Desta feita, a cabeça de leitura para em cada um dos movie clips de cada um dos 4 menus, quando clicamos nos respectivos botões.
 +
(A action na frame 21 é um stop(); e serve para que o utilizador não seja confrontado com nenhum dos menus inicialmente, e tenha de escolher por ele mesmo qual quer aceder primeiro, caso contrário, iria ser confrontado, neste caso, com o menu conceitos que é a primeira keyframe da timeline – frame 22)
 +
Para a cabeça de leitura se dirigir para cada uma das respectivas keyframes aquando do clique em cada um dos menus, era necessário criar botões para esses menus.
 +
Criaram-se 4 simbolos do tipo button, um para cada menu, onde a frame UP era o texto escrito normal, a cor azul e na frame OVER o texto passa a cor rosa e activa-se um movie clip.
 +
Esse movie clip é constituido por uma shape que, aquando do rollOver no botão começa numa simples linha que vai ganhando largura e termina num rectângulo. Sendo assim, dentro do movie clip fez-se um shape tween entre as 2 formas desejadas, e uma layer de actions com um stop(); no final desse movie clip. Esse stop era necessário pois era pretendido que o rectângulo permanecesse sempre visivel aquando do rato em cima do botão (rollOver).
 +
 +
A programação utilizada em cada botão foi simples:
 +
 
 +
 
 +
on (release){
 +
 
 +
gotoAndPlay("conceitos")
 +
 
 +
}
 +
 
 +
 
 +
Desta maneira, aquando do clique no botão do menu conceitos, a cabeça de leitura será redireccionada para a frame cuja label é “conceitos”.
 +
Contudo surge um problema na escolha do menu: aquando da escolha de um menu, qualquer seja ele, pode-se seleccionar de novo, e isso é indesejável pela parte do utilizador.
 +
Sendo assim criaram-se 4 simbolos do tipo movie clip para aparecer na frente do respectivo botão de menu, aquando do clique neste.
 +
Assim, a programação em cada botão do menu passou a ser:
 +
 
 +
 
 +
on (release){
 +
 
 +
gotoAndPlay("LABEL")
 +
 
 +
conceitos_select._visible=true;
 +
 
 +
conceitos_btn._visible=false;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
Onde LABEL é substituido pelo nome da label correspondente na timeline principal.
 +
O que a programação faz é que aquando do clique em qualquer botão do menu, primeiramente a timeline segue para a frame da label indicada, esse mesmo botão fica invisivel, e o movie clip criado para impedir que seja possível entrar 2 vezes no mesmo menu consecutivamente  fique visivel. Para que este processo aconteça em qualquer transição entre qualquer menu, é necessário que se aplique programação em cada botão também correspondente a outros botões.
 +
Exemplo:
 +
Ao clique no botão conceitos, este tem de levar a cabeça de leitura para a frame de label conceitos, tem de tornar o botão (conceitos_btn) invisivel, e tornar o movie clip que resolve o problema exposto anteriormente visivel. Para além de tornar visivel e invisivel apenas estes 2 simbolos, tem de fazet tudo isso com os anteriores, pois é muito provável que o utlizador já tenha estado num menu qualquer anteriormente, então fica:
 +
 
 +
 
 +
on (release){
 +
 
 +
gotoAndPlay("conceitos")
 +
 
 +
conceitos_select._visible=true;
 +
 
 +
conceitos_btn._visible=false;
 +
 
 +
corpo_humano_select._visible=false;
 +
 
 +
corpo_humano_btn._visible=true;
 +
 
 +
quem_somos_select._visible=false;
 +
 
 +
quem_somos_btn._visible=true;
 +
 
 +
links_select._visible=false;
 +
 
 +
links_btn._visible=true;
 +
 
 +
}
 +
 
 +
 
 +
Depois da escolha do menu, o utilizador vai encontrar interacção no menu “Corpo Humano”.
 +
Neste menu está uma caixa de informações diferente de qualquer coisa que foi feita anteriormente nas aulas.
 +
 +
Neste estado, a caixa está fechada e pronta para a interacção do utilizador.
 +
 
 +
Quando o utilizador colocar o rato em cima da barra mais escura na parte superior, este abre na parte correspondente.
 +
 +
Todo este movimento de fecho e abertura é assegurado por programação de maneira a que seja tudo muito suave e não expontâneo.
 +
A programação utilizada é a seguinte:
 +
 
 +
 
 +
speed = 5;
 +
 
 +
initial_width = 75;
 +
 
 +
target_width = 450;
 +
 
 +
sp = rect1._x;
 +
 
 +
this.createEmptyMovieClip("emptymc", 0);
 +
 
 +
emptymc.onEnterFrame = function() {
 +
 
 +
for (i=1; i<=6; i++) {
 +
 
 +
if (_root.inicio_MC.hit.hitTest(_root._xmouse, _root._ymouse, true)) {
 +
 
 +
if (_root.inicio_MC["rect"+i].hitTest(_root._xmouse, _root._ymouse, true)) {
 +
 
 +
new_x = (_root.inicio_MC.sp-(75*(i-1)))-rect1._x;
 +
 
 +
rect1._x += new_x/speed;
 +
 
 +
n_width = target_width-_root.inicio_MC["rect"+i]._width;
 +
 
 +
_root.inicio_MC["rect"+i]._width += n_width/speed;
 +
 
 +
} else {
 +
 
 +
n_width2 = initial_width-_root.inicio_MC["rect"+i]._width;
 +
 
 +
_root.inicio_MC["rect"+i]._width += n_width2/speed;
 +
 
 +
}
 +
 
 +
} else {
 +
 
 +
new_x = _root.inicio_MC.sp-rect1._x;
 +
 
 +
rect1._x += new_x/(speed+50);
 +
 
 +
n_width2 = initial_width-_root.inicio_MC["rect"+i]._width;
 +
 
 +
_root.inicio_MC["rect"+i]._width += n_width2/(speed-1);
 +
 
 +
}
 +
 
 +
_root.inicio_MC["rect"+(i+1)]._x= _root.inicio_MC["rect"+i]._x+_root.inicio_MC["rect"+i]._width;
 +
 
 +
_root.inicio_MC["movie"+i]._x = _root.inicio_MC["rect"+i]._x-1;
 +
 
 +
}
 +
 
 +
};
 +
 
 +
 
 +
Esta programação, bem como o menu onde ela está inserida, foram pesquisados na internet. É um menu do tipo acordeão que abre e fecha quando o utilizador bem pretender, vendo assim o conteúdo escondido entre as diversas escolhas. É útil pois ocupa menos espaço na estrutura e também porque dá sensação de controlo e liberdade ao utilizador.
 +
A programação faz um hit Test entre movie clips, um movie clip para cada parte do acordeão, neste caso, para cada sistema de orgãos. Sendo assim, a speed é a velocidade com que ele vai abrir e fechar, e as initial e target width são, correspondentemente, a largura inicial e a final aquando da abertura do acordeão em determinado menu.
 +
Também dentro do menu Conceitos, o utilizador pode interagir com o corpo humano, podendo trocar entre a sua forma exterior e a interior para poder visualizar os seus orgãos.
 +
Para isso foram feitos dois botões onde se pode clicar para alternar entre estas duas formas. Um para poder ver a forma interior e outro para ver a forma exterior. Esses dois botões foram colocados na mesma coordenada x e y e programados de maneira a que o clique num tornasse invisível esse mesmo e visivel o outro.
 +
A programação é a seguinte para o botão de ver o interior (orgãos) é a seguinte:
 +
 
 +
 
 +
on (release){
 +
 
 +
sistema_circulatorio._visible=true;
 +
 
 +
sistema_digestivo._visible=true;
 +
 
 +
sistema_nervoso._visible=true;
 +
 
 +
sistema_respiratorio._visible=true;
 +
 
 +
sistema_sensorial._visible=true;
 +
 
 +
sistema_reprodutor._visible=true;
 +
 
 +
ver_orgaos._visible=false;
 +
 
 +
ver_exterior._visible=true;
 +
 
 +
}
 +
 
 +
 
 +
Desta maneira, aquando do clique no botão de ver os orgãos, todos eles ficam visiveis (._visible=true) e torna invisivel esse mesmo botão, tornando o outro visivel (2 últimas linhas).
 +
Como todos os sistemas do corpo humano iriam ficar visiveis quando se entrasse no movie clip do menu Conceitos, teve de se colocar uma action na primeira frame desse movie clip:
 +
 
 +
 
 +
sistema_circulatorio._visible=false;
 +
 
 +
sistema_digestivo._visible=false;
 +
 
 +
sistema_nervoso._visible=false;
 +
 
 +
sistema_respiratorio._visible=false;
 +
 
 +
sistema_sensorial._visible=false;
 +
 
 +
sistema_reprodutor._visible=false;
 +
 
 +
 
 +
Desta feita, os orgãos estão invisiveis e só são visiveis ao comando do utilizador, aumentando assim a interactividade.
 +
Outra interactividade possível do utilizador é, quando vê os diversos orgãos dos diversos sistemas (os orgãos estão agrupados por sistemas e transformados em botões, um por cada sistema), pode interagir com eles através do rollOver: quando passa o rato em cima de um dos sistemas, os restantes ficam com certa opacidade. Isso foi criado através de programação.
 +
Cada sistema (botão) tem a seguinte programação:
 +
 
 +
 
 +
on (rollOver){
 +
 
 +
sistema_digestivo._alpha=40;
 +
 
 +
sistema_nervoso._alpha=40;
 +
 
 +
sistema_sensorial._alpha=40;
 +
 
 +
sistema_circulatorio._alpha=40;
 +
 
 +
sistema_reprodutor._alpha=40;
 +
 
 +
}
 +
 
 +
 
 +
Assim, ao rollOver em cima, por exemplo, do sistema respiratorio, os restantes ficam com alpha a 40, ficando com opacidade e dando a entender ao utilizador que tem possibilidade de interagir com esse sistema, ficando evidenciado.
 +
Para possibilitar ao utilizador um nivel ainda mais aprofundado de interactividade, ciraram-se simbolos movie clip para cada sistema, com dicas para manter esse sistema saudavel. Esse simbolo é uma caixa com texto, sendo que em 2 desses sistemas, o texto era demasiado extenso para caber na caixa. Para resolver o problema procedos à utilização de um dos componentes do Flash CS3, o UIScrollBar. Este componente permite que um texto permaceça com largura constante e que seja possivel utilizar o scroll para ler o que está mais abaixo e o que está mais acima.
 +
Assim, em todos os movie clips com os cuidados, fizeram-se textos dinâmicos, e em multiline. Assim, foi só arrastar e largar o componente para esse texto, e fica operacional. Outro factor importante deste componente é que possibilita a interacção da mouse wheel.
 +
 +
 +
Era pretendido que esta caixa de texto fosse visível apenas ao clique do utilizador no sistema de orgãos correspondente.
 +
Então, em cada sistema, adicionou-se a seguinte programação:
 +
 
 +
 
 +
on (release){
 +
 
 +
respiratorio_cuidados._visible=true;
 +
 
 +
nervoso_cuidados._visible=false;
 +
 
 +
reprodutor_cuidados._visible=false;
 +
 
 +
circulatorio_cuidados._visible=false;
 +
 
 +
digestivo_cuidados._visible=false;
 +
 
 +
sensorial_cuidados._visible=false;
 +
 
 +
}
 +
 
 +
 
 +
Neste caso, esta é a programação para o sistema respiratório.
 +
Desta feita, quando se clica nos pulmões, aparece a caixa com texto sobre o sistema respiratorio, e, como não se sabe se o utilizador tenha estado noutro sistema anterior, tem de se colcocar ._visible=false acerca dos restantes sistemas.
 +
Para ajudar o utilizador neste menu, a aplicação fornece um botão onde o utilizador pode clicar para ver uma dica.
 +
Essa dica está visivel logo quando o utilizador entra no menu. Contudo, depois de proceder à interacção que a dica sugere, a caixa de diálogo desaparece e aparece no canto superior esquerdo um icon com um “?” (um botão), para que quando o utilizador clicar nesse icon, a dica surgir de novo. Para tal apenas se aplicou programação já conhecida, seguindo _visible=true e _visible=false na programação do botão.
 +
Dentro do menu Corpo Humano tem toda esta interactividade anteriormente mencionada.
 +
Só no menu conceitos é que não existe qualquer interacção.
 +
No menu Quem Somos tem 2 interacções possíveis: existem 2 botões onde o utilizador pode clicar e ser redireccionado para 2 sitios web (1 para cada botão). Assim foi utilizada a seguinte programação para cada botão:
 +
 
 +
on (release){
 +
 
 +
getURL("http://www.ua.pt/", "_blank");
 +
 
 +
}
 +
 
 +
 
 +
Neste caso o utilizador é redireccionado para o sitio web da universidade de aveiro.
 +
Este tipo de programação está também presente no menu dos Links. Junto com esta programação tem também um movie clip por cada link que permite ver o preview da respectiva página (uma pequena imagem da página web) através do rollOver do utilizador numa lupa.
 +
 
 +
 
 +
'''5.2. Integração e Controlo de Som'''
 +
A aplicação tem um som de fundo e som na passagem do rato em cima dos 4 botões dos 4 principais menus.
 +
Para tal teve de se editar no audacity os 2 sons de maneira a que não fossem muito pesados mas a qualidade perdida fosse minima.
 +
Depois disso, importaram-se esses 2 sons para a library, fazendo-se linkage to actionscript, na primeira frame.
 +
A programação para criar as 2 novas variáveis (1 para cada som) foi a seguinte:
 +
 
 +
 
 +
var som_fundo:Sound = new Sound();
 +
 
 +
som_fundo.attachSound("som_fundo");
 +
 
 +
som_fundo.start();
 +
 
 +
som_fundo.onSoundComplete = function() {
 +
 
 +
som_fundo.start();
 +
 
 +
};
 +
 
 +
var som_botao:Sound = new Sound();
 +
 
 +
som_botao.attachSound("som_botao");
 +
 
 +
 
 +
Assim, cria-se a variável para o som de fundo, com o mesmo nome do linkage, e coloca-se este a começar em loop, para que o utilizador ouça sempre o som durante a navegação.
 +
O som dos botões dos menus foram integrados através da criação da variável, mas apenas integrados no botão. Para tal, editou-se o simblo de cada botão do menu, e na frame OVER, arrastou-se o som da library para o stage, para que o som fosse activado apenas no roll over do botão correespondente.
 +
Para o controlo do som, adicionou-se na parte inferior do ecrã da aplicação dois botoes para controlar a paragem ou o re-começar do som, e também um “slider” para controlar o volume.
 +
A programação utilizada no botão de play foi:
 +
 
 +
 
 +
on (release){
 +
 
 +
som_fundo.stop();
 +
 
 +
som_fundo.start();
 +
 
 +
}
 +
 
 +
 
 +
A programação foi esta porque o som tem de parar antes que comece de novo, pois se o utilizador clicar várias vezes no botão de play, não ouve o som repetido, um por cima do outro.
 +
No botão do stop tem:
 +
 
 +
on (release){
 +
 
 +
som_fundo.stop();
 +
 
 +
}
 +
 
 +
 
 +
Assim o som designado pela variável para ao comando do utilizador.
 +
O controlo do volume foi mais complicado de realizar, uma vez que teve de se pesquisar a programação necessária.
 +
O controlo do volume é constituido por 2 movie clips: um é a linha onde vai deslizar um outro mc que é o “slider”. Esse slider tem a função de deslizar na linha, para a esquerda e para a direita, com o clique do utilizador. O utilizador ao arrastar o slider para a direita coloca o volume da música de fundo no seu máximo volume, e na direita no mínimo volume.
 +
A programação utilizada foi colocada na primeira action na layer das actions na timeline principal, e é a seguinte:
 +
 
 +
 
 +
slider.onPress = function() {
 +
 
 +
this.startDrag(true,_root.volume_barra._x,_root.volume_barra._y,_root.volume_barra._x+50,_root.volume_barra._y);
 +
 
 +
};
 +
 
 +
slider.onRelease = function() {
 +
 
 +
this.stopDrag();
 +
 
 +
};
 +
 
 +
slider.onReleaseOutside = function() {
 +
 
 +
this.stopDrag();
 +
 
 +
};
 +
 
 +
slider.onMouseMove = function() {
 +
 
 +
newPoint = new Object();
 +
 
 +
newPoint.x = this._x;
 +
 
 +
newPoint.y = this._y;
 +
 
 +
_root.volume_barra.globalToLocal(newPoint);
 +
 
 +
_root.som_fundo.setVolume(-1*newPoint.x);
 +
 
 +
 
 +
};
 +
 
 +
 
 +
A programação faz com que, quando o utilizador mantém o clique pressionado no slider (onPress) comece a deslizar para a esquerda ou para a direita (startDrag(true …)) onde apenas pode deslizar num espaço de 50, espaço esse que é exactamente o tamanho do movie clip da linha onde pode deslizar. Quando o utilizador encontra a medida pretendida de volume, larga o clique do rato (onRelease), o clique deixa de estar associado ao slider, sendo assim para de deslizar (stopDrag). Contudo, se o utilizador não largar o clique dentro do espaço de 50 predefinido, a programaçãpo não detecta e continua a associar o clique ao slider, então o utilizador fica incapacitado de parar o slider. Para resolver este problema, adiciona-se a programação que define o largar do clique fora do espaço predifinido (onReleaseOutside).
 +
Para tudo isto funcionar no controlo do volume, atribui-se ao movimento do rato um novo ponto, em que para a esquerda e para a direita desse ponto vai alterar o volume. Quando o slider está completamente na esquerda, o volume é nulo, e quando está completamente na direita, fica a 100%.
 +
 
 +
 
 +
 
 +
'''5.3. Animação'''
 +
Toda a aplicação está isenta de grande animação. Optamos por não entrar muito na área da animação uma vez que se trata de uma aplicação sobre saúde, o utilizador quer algo em concreto, rápido, e claro. É isso que um utilizador que procura informação sobre saúde e bem estar procura e tenta-mos seguir isso mesmo, não optando por por animação a mais.
 +
A animação da aplicação foca-se em motion tweens entre variações de alpha e de posição, na entrada dos diferentes menus. Estes motion tweens dão a sensação de fluidez necessária para que, no geral, tenha um melhor aspecto.
 +
Por exemplo, na entrada no menu do quem somos, todos os elementos entram por ordem e não expontaneamente, com uma certa fluidez devido à alternância das coordenadas e do alpha durante o motion.
 +
 
 +
 
 +
 
 +
'''5.4. Soluções técnicas adapatadas para a resolução de problemas'''
 +
 
 +
Durante a aplicação surgiram 2 grandes problemas: um no slider e outro no menu estilo acordeão.
 +
O primeiro foi simples de resolver, pois faltava ua função programada. Quando o utilizador clicava no slider para o arrastar, e não largava dentro do espaço predifinido, ou seja, largava fora, o flash não detectava o largar do clique e o slider acompanhava o rato para onde o utilizador o levasse, sem estar a premir o clique. Esse problema foi resolvido com alguma pesquisa na internet, uma vez que a programação conseguida tinha algumas lacúnias: faltava a função – onReleaseOutside. Essa função foi encontrada na internet e aplicada na já existente, resolvendo assim o probmela.
 +
O outro problema, ainda maior, foi o facto do nosso menu acordeão ter sido achado na internet, num ficheiro .fla, já preparado para que funcionasse. Depois de o alterar, de copiar todos os elementos da library do.fla achado para o principal, e todas as frames também, este continuou sem funcionar.
 +
Depois de muito tempo à volta deste problema, descobriu-se que era muito provável que fosse um problma de targeting uma vez que o acordeão é composto por movie clips, e este estão dentro de um movie clip (o do meno do corpo humano). Estudando bem a programação, e com alguma pesquisa para perceber algo mais complexo, concluimos que a palavra _root levava à raiz, e depois disso tinha de estar o nome da instância dada ao nosso movie clip do corpo humano, neste caso, inicio_MC.
 +
Depois de colocar, na programação, á frente de _root, o nome da instância, tudo ficou a funcionar muito bem.
 +
Era então um problema de targeting e o flash não sabia o caminho a seguir para que o utilizador conseguisse interagir com o “acordeão”.
 +
 
 +
 
 +
 
 +
=== 6. Conclusões===
 +
 
 +
 
 +
'''6.1. Reflexões Críticas'''
 +
Fazendo um último balanço sobre o projecto realizado, pode-se concluir por parte do grupo que foi um trabalho positivo, trabalhoso mas que trouxe bastante conhecimento a todos os elemtos do grupo.
 +
O projecto não teve uma grande componente visual, no sentido em que não tem muitos gráficos, e o design é muito simples. Tudo isso não foi para poupar trabalho mas sim porque tivemos em atenção a causa e o público alvo. É pretendido, mais uma vez, que a aplicação seja bastante simples em grafismo e que tenha tudo o que o utilizador procura. Fizemos então uma aplicação seguindo as teorias da usabilidade e acessibilidade, com uma interacção perto de total por parte do utilizador enquanto navega, bem como simples. Para tal foi muito baseado no rollOver e no clique para obter informação, mas toda ou quase toda controlável pelo utilizador.
 +
Por último, a aplicação foi desenvolvida no flash com um stage da resolução mais utilizada hoje em dia globalmente: 1024 por 768.
 +
Contudo, essa resolução é de ecrã inteiro e não a disponivel para viasualizar algo no browser, então, o utilizador tem de utilizar o scroll da página para visualizar algumas partes. Podia ter sido alterada no código HTML para 800x600 mas fica melhor na resolução de 1024x768.
 +
 
 +
 
 +
'''6.2. Sugestões para o aprefeiçoamento e/ou desenvolvimento futuro do projecto'''
 +
Para o desenvolvimento futuro do projecto, era sugerido que o utilizador fosse confrontado com um nívem mais aprofundado de navegação para além dos sistemas de orgãos. Por exemplo, o utilizador podia ser capaz de, dentro de cada sistema, escolher o orgão que quisesse. Isso seria mais interacção possível do utilizador e mais informação disponível, e é um ponto posítivo a acrescentar para a aplicação.
 +
Como aprefeiçoamento, ao invés do corpo humano ser apresentado num pequeno espaço na aplicação, este poderia ser visto num espaço maior, e o utilizador poderia “arrastar” este para baixo ou para cima para pver a parte pretendida, sendo assim o corpo humano mais interactivo e detalhado.
 +
 
 +
 
 +
 
 +
===7. Referências Web e Bibliográficas:===
 +
http://saude.sapo.pt/
 +
 
 +
http://www.actionscript.org/
 +
 
 +
http://www.blog.noponies.com/2008/01/actionscript-2-accordion-menu/
 +
 
 +
http://freedownloadscenter.com/terms/accordion-flash-menu-actionscript-2/2.html
 +
 
 +
http://mrsteel.wordpress.com/2008/01/16/simple-accordion-example-in-flash-8-actionscript-2/
 +
http://www.blog.noponies.com/2008/01/actionscript-2-accordion-menu/
 +
 
 +
http://www.lemlinh.com/flash-source-menu-accordion-version-8-as20/
 +
 
 +
http://www.actionscript.org/resources/articles/109/1/Scrolling-a-text-box/Page1.html
 +
 
 +
http://www.actionscript.org/resources/articles/151/1/Dynamic-text-with-scrollbar/Page1.html
 +
 
 +
http://www.actionscript.org/resources/articles/93/1/Continuously-Scrolling-Text-Field--Graphic-Objects/Page1.html
 +
 
 +
http://www.actionscript.org/resources/articles/77/1/Relative-Scrolling-Content-and-Navigation/Page1.html
 +
 
 +
http://www.actionscript.org/resources/articles/151/1/Dynamic-text-with-scrollbar/Page1.html
 +
 
 +
http://www.actionscript.org/resources/articles/151/1/Dynamic-text-with-scrollbar/Page1.html
 +
 
 +
http://www.smartwebby.com/Flash/text_scrollers.asp
 +
 
 +
http://www.youtube.com/watch?v=b6FmgrhLp3s

Latest revision as of 22:46, 14 January 2011

Health4alllogo.jpg


Realizado por:


Gil Filipe, nº 59505

Fábio Rocha, nº 59735

Luís Almeida, nº 59736

Tiago Andrade, nº 59738

Contents

Diário de Bordo

Dia 25 de Novembro

Tivemos alguns problemas na escolha do tema, pois num universo infinito de escolhas queria-mos algo que fosse diferente e inovador. A poucos minutos do fim da aula chega-mos a um consenso e apresenta-mos o tema "health4all" ao professor Ivo

Dia 29 de Novembro

Elaboramos a memoria descritiva e a estrutura gráfica do projecto Escolhemos o tipo de letra utilizado e os botões básicos que iram existir na nossa aplicação

Dia 3 de Dezembro

Publicamos na wiki todos as escolhas relativas ao projecto Organizamos a wiki de forma a ficar mais acessível aos interessados.

Dia 6 de Dezembro

Criamos algumas partes chave da aplicação -Intro -Botões principais -Imagem vectorial do corpo humano.

Dia 9 de Dezembro

- Conclusão do corpo humano (vectorizado) - Conclusão da vectorização dos botões secundários

Dia 19 de Dezembro

- Inicio do trabalho em flash.

Dia 8 de Janeiro

- Finalização dos ecrâs principais em .fla.

Dia 9 de Janeiro

- Conclusão do acordeão horizontal - Conclusão do efeito alpha do corpo humano no ecrã principal

Dia 11 de Janeiro

- Conclusão da sonorização

Dia 12 de Janeiro

- Conclusão da programação do flash.

Dia 13 de Janeiro

- Conclusão do flash.



Relatório Final

1. Apresentação do Projecto:

O projecto tem como tema a Saúde e o Bem estar, intitulado de “Health4All”. É uma aplicação multimédia interactiva que tem como público alvo pessoas em busca de mais informação sobre saúde, como preservar e melhorar esta, e também sobre os diversos sistemas de orgãos do corpo humano.


2. Análise e Planeamento:

Para ter uma noção de como seria o design da aplicação procedeu-se à procura na internet de websites sobre saúde. Todos tinham um estilo bastante simples, cores leves, e um tipo de letra igualmente sem grande complexidade. Isso leva a que os sites pareçam todos bastante “limpos” e transmitem confiança e segurança ao utilizador, daí a razão da escolha do design da aplicação e da palete de cores. A escolha de como seria a interação do utilizador com a aplicação foi dificil. Depois de uma investigação na internet de websites como os anteriormente referidos, decidiu-se que o cerne da aplicação seria a interacção do utilizador com um corpo humano e com a sua fisiologia anatómica. Inicialmente foi pensado em algo muito concreto em apenas algumas partes do corpo humano, em que o utilizador iria ser confrontado com determinadas partes do corpo humano, não todas porque iriam ser muitas, e de seguida o utilizador escolhia qual a parte na qual tinha problemas de saúde ou apenas alguma dor, e iriam ser providenciadas soluções e maneiras de a manter em forma. Este conceito era muito restricto a apenas algumas partes do corpo e muito dificil de aplicar no corpo todo. Tinha então de ser establecido um novo conceito. Num segundo conceito decidiu-se que ao invés de, como no primeiro, expor o corpo humano e dar soluções para determinados problemas em determinadas partes do corpo, dividia-se o corpo em 3 grandes partes: cabeça, tronco e membros. O utilizador teria de seleccionar a parte sobre a qual queria obter mais informação e dentro dessa parte teria os orgãos correspondentes. Mais uma vez chegou-se à conclusão que poderia estar ainda melhor, uma vez que continuava a ser um método muito pouco preciso e iriam surgir problemas principalmente na parte dos membros, que não têm qualquer orgão do corpo humano associado.


Por último, chegou-se então ao conceito final: A aplicação multimédia faz o utilizador ser confrontado com o corpo humano em duas imagens diferentes: o exterior e o interior (orgãos dos diferentes sistemas). Ao ver o corpo humano com todos os seus orgãos, o utilizador é capaz de escolher o sistema de orgãos sobre o qual quer obter mais informação e também dicas para o manter saudavel e em boa forma, sendo esses sistemas o reprodutor, respiratório, circulatório, sensorial , digestivo e nervoso. Este foi o conceito final colocado em prática, e o mais bem sucedido uma vez que é o melhor organizado e que tem mais capacidade de responder às exigências do utilizador, e isso é o mais importante.


1º Estado da Arte:

Ecra.jpg

No primeiro estado da arte, obtido aquando do primeiro conceito referido acima, o layout ficou um pouco pesado demais para o pretendido. O pretendido era um layout que levasse o utilizador a ter confiança e segurança na informação dada, pois trata-se de saúde e a confiança na aplicação seria crucial. Neste estado também foram designados 4 menus principais nos quais o utilizador poderia navegar, sendo eles o Inicio, onde teria o corpo humano e a informação relativa a este; Links onde teria links úteis sobre saúde, desde farmácias a hospitais, entre outros; Quem somos onde teria informação sobre os elementos do grupo e o porquê da realização da aplicação; Contactos, com contactos úteis. Chegou-se à conclusão que teria de ser feita uma reformulação dos menus. O menu Contactos iria ter muito pouco conteúdo e pensou-se em unir este menú com o menú Quem Somos, onde colocamos o contacto de cada elemento do grupo. Assim ficou decidido de forma unânime entre todos os elementos do grupo.


2º Estado da Arte:

Inicio.png

Neste estado da arte foram então utilizadas cores mais claras e layouts mais simples para transmitir mais segurança e orientação de certa forma ao utilizador. Tal como concordado, há agora três menus, e também uma melhor organização do conteúdo, seguindo uma grelha de 3 colunas no centro da aplicação, onde aparece o conteúdo de cada menu.


3º Estado da Arte:

Ecra final.png


Não há diferenças a nível de cores para com o segundo estado da arte, contudo, decidiu-se que o conteúdo dos menus seria impossível de organizar em três colunas, em todos os menus. Menus esses que passaram a ser 4 neste estado, com a junção de Conceitos. Este menu terá conceitos básicos sobre saúde e bem estar, bem como defenições gerais sobre estes 2 conceitos. Este é o estado da arte final, o mais organizado e que transmite mais confiança e sentido de orientação ao público.


3. Desenho Funcional

3.1. Requisitos Funcionais


A aplicação em si tem 4 menus principais: Conceitos, Corpo Humano, Quem Somos e Links. O menu onde é maior o controlo do conteúdo e a interacção é o menu Corpo Humano, onde está concentrada a maior parte do trabalho. Nesse menu tem um menu estilo “Acordeão”, onde o utilizador pode navegar para ter mais informação sobre os seis diferentes sistemas do corpo humano. É um menu com uma programação mais avançada e que permite total controlo por parte do utilizador através do rollOver em cima de cada parte desse acordeão. Junto com este, o utilizador é confrontado com o corpo humano nas suas 2 formas: exterior e interior, sendo que no segundo é possível ver os orgãos do corpo humano agrupados nos seis sistemas. O utilizador é também capaz de escolher qual das formas quer visualizar através do clique num botão. No corpo humano interior, o utilizador é capaz de interagir com qualquer dos 6 sistemas, escolhendo a informação sobre como manter esse sistema em forma e saudável. Para tal só tem de proceder ao clique no sistema que desejar. Para além deste menu do Corpo Humano, o utilizador pode navegar ainda no Conceitos, onde não tem qualquer interacção dentro deste, tem apenas informação textual sobre o tema; o menu Links tem links uteis em forma de botão, onde o utilizadador pode clicar para ser redireccionado para o sitio web correspondente, ou fazer na própria aplicação um preview da página, vendo assim uma imagem do website; no menu Quem somos o utilizador tem a oportunidade de saber mais sobre este trabalho e sobre os elementos que o fizeram, de que curso somos e também onde estudamos, e ver fotos desse sitio. O som é algo sempre presente na aplicação durante a navegação do utilizador. Tem uma suave música de fundo e sons no rollOver dos 4 botões principais dos 4 menus. Este som é controlável através do botão de play, stop, e um slider que permite controlar o volume com grande precisão através de arraste de um controlo numa barra.


3.2. Estrutura Arborescente

Estruturaarborescente.png


3.3. Desenho de interacção e usabilidade


O desenho da estrutura foi feito tendo em concideração o tema da aplicação e o público alvo. Foi considerado sobretudo o tema de cores utilizado e o tipo de letra no desenho da interacção. Foram utilizadas cores claras, dentro do azul e cor de cosa, incluindo o branco e o texto utilizado em algum texto. Estas cores foram escolhidas por um propósito: dar um estilo leve, simples, e um ambiente de confiança ao utilizador, pois o público alvo é sem dúvida alguém à procura de informação sobre a saúde e o bem estar, e é necessário que o utilizador confie no trabalho que vizualisa para continuar na aplicação. O tipo de letra e o Myriad Pro , este tipo de letra é um simples, e contribui para aquele estilo leve e simples desejado da aplicação. Para manter a navegação simples, decidiu-se que teria os quatro menus principais bem evidenciados no topo do ecrã, e o utilizador poderia navegar entre estes menus livremente sem qualquer restrição. É feita uma espécie de hieraraquia entre cada menu, sendo que no menu do Corpo Humano é sem dúvida a hierarquia maior e onde existe maior possibildades de navegação do utilizador. Como ajuda ao utilizador, colocaram-se dicas de utilização no ecrã principal, logo depois do loading, a explicar o fundamento da aplicação e como começar a navegar, e também se colocou outra dica no menu do corpo humano, a explicar como ceder à informação de cada sistema.


Tipo de Letra:

Myriad

Escolhemos esta tipografia pois é um tipo de letra simples, fresco e limpo, que facilmente se enquadra na área de saude e bem estar, oferencendo aos utilizadores uma leitura simples e rápida.

Myriadfont.jpg


Esquema de Cores

Para a escolha de cores baseamo-nos nas cores básicas de saude, azul e rosa, com as suas vertentes mais claras e mais escuras.

As cores básicas a ser utilizadas, para além do branco, são:

Coressaude.jpg


Logotipo

Health4alllogo.jpg


Corpo Humano

Corpo humano2.jpg

Corpo Humano

(Separado nos diversos sistemas)

Corpo humano orgaos.jpg


4. Desenho Técnico

Na elaboração da nossa estrutura para a aplicação utilizamos técnicas simples no illustrator. Escolhemos 4 cores principais, e seguimos essas cores para toda a aplicação. Seguiram-se grelhas predefinidas, com 3 partes principais: o cabeçalho, onde tem o logotipo e os 4 menus principais, o centro onde aparecerá o conteúdo de cada menu, e também o rodapé, que contém algumas curiusidades e o controlo de som. Tudo isto está alinhado ao centro acompanhado com duas barras laterais, de cor mais escura.


5. Produção do Projecto

5.1. Estrutura e meios de navegação/interacção Decidiu-se que o projecto teria uma única cena, e dentro dessa cena iria ocorrer toda a interacção do utilizador com a aplicação. Criou-se então a estrutura principal da aplicação, aquela que nunca iria ser alterada ao longo da aplicação. Essa estrutura é constituida por um logotipo, uma barra imaginária na sua direita onde estão alinhados os 4 botões dos 4 menus principais, 2 margens laterais, e o rodapé onde tem também algum conteúdo. Toda esta estrutura permanece inalterável ao longo da aplicação.


O único conteúdo que se altera é o que aparece no centro do movie, que neste caso são 4 movie clips, um para cada um dos 4 menus principais. Através da criação de 4 movie clips (1 para cada menu principal), criaram-se 4 keyframes na timeline principal, bem como as respectivas labels nessas keyframes e noutra layer os 4 movie clips em cada uma das labels, devidamente ordenados e alinhados no stage. Com uma layer para as Actions, começamos desde logo a programar a aplicação para que a cabeça de leitura parasse em cada uma das keyframes correspondentes a cada um dos 4 menus. Para tal, criamos keyframes nas mesmas frames que criamos na labels e de seguida, em cada uma, abrimos o painel das actions e escreveu-se stop(); em cada uma delas.

Desta feita, a cabeça de leitura para em cada um dos movie clips de cada um dos 4 menus, quando clicamos nos respectivos botões. (A action na frame 21 é um stop(); e serve para que o utilizador não seja confrontado com nenhum dos menus inicialmente, e tenha de escolher por ele mesmo qual quer aceder primeiro, caso contrário, iria ser confrontado, neste caso, com o menu conceitos que é a primeira keyframe da timeline – frame 22) Para a cabeça de leitura se dirigir para cada uma das respectivas keyframes aquando do clique em cada um dos menus, era necessário criar botões para esses menus. Criaram-se 4 simbolos do tipo button, um para cada menu, onde a frame UP era o texto escrito normal, a cor azul e na frame OVER o texto passa a cor rosa e activa-se um movie clip. Esse movie clip é constituido por uma shape que, aquando do rollOver no botão começa numa simples linha que vai ganhando largura e termina num rectângulo. Sendo assim, dentro do movie clip fez-se um shape tween entre as 2 formas desejadas, e uma layer de actions com um stop(); no final desse movie clip. Esse stop era necessário pois era pretendido que o rectângulo permanecesse sempre visivel aquando do rato em cima do botão (rollOver).

A programação utilizada em cada botão foi simples:


on (release){

gotoAndPlay("conceitos")

}


Desta maneira, aquando do clique no botão do menu conceitos, a cabeça de leitura será redireccionada para a frame cuja label é “conceitos”. Contudo surge um problema na escolha do menu: aquando da escolha de um menu, qualquer seja ele, pode-se seleccionar de novo, e isso é indesejável pela parte do utilizador. Sendo assim criaram-se 4 simbolos do tipo movie clip para aparecer na frente do respectivo botão de menu, aquando do clique neste. Assim, a programação em cada botão do menu passou a ser:


on (release){

gotoAndPlay("LABEL")

conceitos_select._visible=true;

conceitos_btn._visible=false;

}


Onde LABEL é substituido pelo nome da label correspondente na timeline principal. O que a programação faz é que aquando do clique em qualquer botão do menu, primeiramente a timeline segue para a frame da label indicada, esse mesmo botão fica invisivel, e o movie clip criado para impedir que seja possível entrar 2 vezes no mesmo menu consecutivamente fique visivel. Para que este processo aconteça em qualquer transição entre qualquer menu, é necessário que se aplique programação em cada botão também correspondente a outros botões. Exemplo: Ao clique no botão conceitos, este tem de levar a cabeça de leitura para a frame de label conceitos, tem de tornar o botão (conceitos_btn) invisivel, e tornar o movie clip que resolve o problema exposto anteriormente visivel. Para além de tornar visivel e invisivel apenas estes 2 simbolos, tem de fazet tudo isso com os anteriores, pois é muito provável que o utlizador já tenha estado num menu qualquer anteriormente, então fica:


on (release){

gotoAndPlay("conceitos")

conceitos_select._visible=true;

conceitos_btn._visible=false;

corpo_humano_select._visible=false;

corpo_humano_btn._visible=true;

quem_somos_select._visible=false;

quem_somos_btn._visible=true;

links_select._visible=false;

links_btn._visible=true;

}


Depois da escolha do menu, o utilizador vai encontrar interacção no menu “Corpo Humano”. Neste menu está uma caixa de informações diferente de qualquer coisa que foi feita anteriormente nas aulas.

Neste estado, a caixa está fechada e pronta para a interacção do utilizador.

Quando o utilizador colocar o rato em cima da barra mais escura na parte superior, este abre na parte correspondente.

Todo este movimento de fecho e abertura é assegurado por programação de maneira a que seja tudo muito suave e não expontâneo. A programação utilizada é a seguinte:


speed = 5;

initial_width = 75;

target_width = 450;

sp = rect1._x;

this.createEmptyMovieClip("emptymc", 0);

emptymc.onEnterFrame = function() {

for (i=1; i<=6; i++) {

if (_root.inicio_MC.hit.hitTest(_root._xmouse, _root._ymouse, true)) {

if (_root.inicio_MC["rect"+i].hitTest(_root._xmouse, _root._ymouse, true)) {

new_x = (_root.inicio_MC.sp-(75*(i-1)))-rect1._x;

rect1._x += new_x/speed;

n_width = target_width-_root.inicio_MC["rect"+i]._width;

_root.inicio_MC["rect"+i]._width += n_width/speed;

} else {

n_width2 = initial_width-_root.inicio_MC["rect"+i]._width;

_root.inicio_MC["rect"+i]._width += n_width2/speed;

}

} else {

new_x = _root.inicio_MC.sp-rect1._x;

rect1._x += new_x/(speed+50);

n_width2 = initial_width-_root.inicio_MC["rect"+i]._width;

_root.inicio_MC["rect"+i]._width += n_width2/(speed-1);

}

_root.inicio_MC["rect"+(i+1)]._x= _root.inicio_MC["rect"+i]._x+_root.inicio_MC["rect"+i]._width;

_root.inicio_MC["movie"+i]._x = _root.inicio_MC["rect"+i]._x-1;

}

};


Esta programação, bem como o menu onde ela está inserida, foram pesquisados na internet. É um menu do tipo acordeão que abre e fecha quando o utilizador bem pretender, vendo assim o conteúdo escondido entre as diversas escolhas. É útil pois ocupa menos espaço na estrutura e também porque dá sensação de controlo e liberdade ao utilizador. A programação faz um hit Test entre movie clips, um movie clip para cada parte do acordeão, neste caso, para cada sistema de orgãos. Sendo assim, a speed é a velocidade com que ele vai abrir e fechar, e as initial e target width são, correspondentemente, a largura inicial e a final aquando da abertura do acordeão em determinado menu. Também dentro do menu Conceitos, o utilizador pode interagir com o corpo humano, podendo trocar entre a sua forma exterior e a interior para poder visualizar os seus orgãos. Para isso foram feitos dois botões onde se pode clicar para alternar entre estas duas formas. Um para poder ver a forma interior e outro para ver a forma exterior. Esses dois botões foram colocados na mesma coordenada x e y e programados de maneira a que o clique num tornasse invisível esse mesmo e visivel o outro. A programação é a seguinte para o botão de ver o interior (orgãos) é a seguinte:


on (release){

sistema_circulatorio._visible=true;

sistema_digestivo._visible=true;

sistema_nervoso._visible=true;

sistema_respiratorio._visible=true;

sistema_sensorial._visible=true;

sistema_reprodutor._visible=true;

ver_orgaos._visible=false;

ver_exterior._visible=true;

}


Desta maneira, aquando do clique no botão de ver os orgãos, todos eles ficam visiveis (._visible=true) e torna invisivel esse mesmo botão, tornando o outro visivel (2 últimas linhas). Como todos os sistemas do corpo humano iriam ficar visiveis quando se entrasse no movie clip do menu Conceitos, teve de se colocar uma action na primeira frame desse movie clip:


sistema_circulatorio._visible=false;

sistema_digestivo._visible=false;

sistema_nervoso._visible=false;

sistema_respiratorio._visible=false;

sistema_sensorial._visible=false;

sistema_reprodutor._visible=false;


Desta feita, os orgãos estão invisiveis e só são visiveis ao comando do utilizador, aumentando assim a interactividade. Outra interactividade possível do utilizador é, quando vê os diversos orgãos dos diversos sistemas (os orgãos estão agrupados por sistemas e transformados em botões, um por cada sistema), pode interagir com eles através do rollOver: quando passa o rato em cima de um dos sistemas, os restantes ficam com certa opacidade. Isso foi criado através de programação. Cada sistema (botão) tem a seguinte programação:


on (rollOver){

sistema_digestivo._alpha=40;

sistema_nervoso._alpha=40;

sistema_sensorial._alpha=40;

sistema_circulatorio._alpha=40;

sistema_reprodutor._alpha=40;

}


Assim, ao rollOver em cima, por exemplo, do sistema respiratorio, os restantes ficam com alpha a 40, ficando com opacidade e dando a entender ao utilizador que tem possibilidade de interagir com esse sistema, ficando evidenciado. Para possibilitar ao utilizador um nivel ainda mais aprofundado de interactividade, ciraram-se simbolos movie clip para cada sistema, com dicas para manter esse sistema saudavel. Esse simbolo é uma caixa com texto, sendo que em 2 desses sistemas, o texto era demasiado extenso para caber na caixa. Para resolver o problema procedos à utilização de um dos componentes do Flash CS3, o UIScrollBar. Este componente permite que um texto permaceça com largura constante e que seja possivel utilizar o scroll para ler o que está mais abaixo e o que está mais acima. Assim, em todos os movie clips com os cuidados, fizeram-se textos dinâmicos, e em multiline. Assim, foi só arrastar e largar o componente para esse texto, e fica operacional. Outro factor importante deste componente é que possibilita a interacção da mouse wheel.


Era pretendido que esta caixa de texto fosse visível apenas ao clique do utilizador no sistema de orgãos correspondente. Então, em cada sistema, adicionou-se a seguinte programação:


on (release){

respiratorio_cuidados._visible=true;

nervoso_cuidados._visible=false;

reprodutor_cuidados._visible=false;

circulatorio_cuidados._visible=false;

digestivo_cuidados._visible=false;

sensorial_cuidados._visible=false;

}


Neste caso, esta é a programação para o sistema respiratório. Desta feita, quando se clica nos pulmões, aparece a caixa com texto sobre o sistema respiratorio, e, como não se sabe se o utilizador tenha estado noutro sistema anterior, tem de se colcocar ._visible=false acerca dos restantes sistemas. Para ajudar o utilizador neste menu, a aplicação fornece um botão onde o utilizador pode clicar para ver uma dica. Essa dica está visivel logo quando o utilizador entra no menu. Contudo, depois de proceder à interacção que a dica sugere, a caixa de diálogo desaparece e aparece no canto superior esquerdo um icon com um “?” (um botão), para que quando o utilizador clicar nesse icon, a dica surgir de novo. Para tal apenas se aplicou programação já conhecida, seguindo _visible=true e _visible=false na programação do botão. Dentro do menu Corpo Humano tem toda esta interactividade anteriormente mencionada. Só no menu conceitos é que não existe qualquer interacção. No menu Quem Somos tem 2 interacções possíveis: existem 2 botões onde o utilizador pode clicar e ser redireccionado para 2 sitios web (1 para cada botão). Assim foi utilizada a seguinte programação para cada botão:

on (release){

getURL("http://www.ua.pt/", "_blank");

}


Neste caso o utilizador é redireccionado para o sitio web da universidade de aveiro. Este tipo de programação está também presente no menu dos Links. Junto com esta programação tem também um movie clip por cada link que permite ver o preview da respectiva página (uma pequena imagem da página web) através do rollOver do utilizador numa lupa.


5.2. Integração e Controlo de Som A aplicação tem um som de fundo e som na passagem do rato em cima dos 4 botões dos 4 principais menus. Para tal teve de se editar no audacity os 2 sons de maneira a que não fossem muito pesados mas a qualidade perdida fosse minima. Depois disso, importaram-se esses 2 sons para a library, fazendo-se linkage to actionscript, na primeira frame. A programação para criar as 2 novas variáveis (1 para cada som) foi a seguinte:


var som_fundo:Sound = new Sound();

som_fundo.attachSound("som_fundo");

som_fundo.start();

som_fundo.onSoundComplete = function() {

som_fundo.start();

};

var som_botao:Sound = new Sound();

som_botao.attachSound("som_botao");


Assim, cria-se a variável para o som de fundo, com o mesmo nome do linkage, e coloca-se este a começar em loop, para que o utilizador ouça sempre o som durante a navegação. O som dos botões dos menus foram integrados através da criação da variável, mas apenas integrados no botão. Para tal, editou-se o simblo de cada botão do menu, e na frame OVER, arrastou-se o som da library para o stage, para que o som fosse activado apenas no roll over do botão correespondente. Para o controlo do som, adicionou-se na parte inferior do ecrã da aplicação dois botoes para controlar a paragem ou o re-começar do som, e também um “slider” para controlar o volume. A programação utilizada no botão de play foi:


on (release){

som_fundo.stop();

som_fundo.start();

}


A programação foi esta porque o som tem de parar antes que comece de novo, pois se o utilizador clicar várias vezes no botão de play, não ouve o som repetido, um por cima do outro. No botão do stop tem:

on (release){

som_fundo.stop();

}


Assim o som designado pela variável para ao comando do utilizador. O controlo do volume foi mais complicado de realizar, uma vez que teve de se pesquisar a programação necessária. O controlo do volume é constituido por 2 movie clips: um é a linha onde vai deslizar um outro mc que é o “slider”. Esse slider tem a função de deslizar na linha, para a esquerda e para a direita, com o clique do utilizador. O utilizador ao arrastar o slider para a direita coloca o volume da música de fundo no seu máximo volume, e na direita no mínimo volume. A programação utilizada foi colocada na primeira action na layer das actions na timeline principal, e é a seguinte:


slider.onPress = function() {

this.startDrag(true,_root.volume_barra._x,_root.volume_barra._y,_root.volume_barra._x+50,_root.volume_barra._y);

};

slider.onRelease = function() {

this.stopDrag();

};

slider.onReleaseOutside = function() {

this.stopDrag();

};

slider.onMouseMove = function() {

newPoint = new Object();

newPoint.x = this._x;

newPoint.y = this._y;

_root.volume_barra.globalToLocal(newPoint);

_root.som_fundo.setVolume(-1*newPoint.x);


};


A programação faz com que, quando o utilizador mantém o clique pressionado no slider (onPress) comece a deslizar para a esquerda ou para a direita (startDrag(true …)) onde apenas pode deslizar num espaço de 50, espaço esse que é exactamente o tamanho do movie clip da linha onde pode deslizar. Quando o utilizador encontra a medida pretendida de volume, larga o clique do rato (onRelease), o clique deixa de estar associado ao slider, sendo assim para de deslizar (stopDrag). Contudo, se o utilizador não largar o clique dentro do espaço de 50 predefinido, a programaçãpo não detecta e continua a associar o clique ao slider, então o utilizador fica incapacitado de parar o slider. Para resolver este problema, adiciona-se a programação que define o largar do clique fora do espaço predifinido (onReleaseOutside). Para tudo isto funcionar no controlo do volume, atribui-se ao movimento do rato um novo ponto, em que para a esquerda e para a direita desse ponto vai alterar o volume. Quando o slider está completamente na esquerda, o volume é nulo, e quando está completamente na direita, fica a 100%.


5.3. Animação Toda a aplicação está isenta de grande animação. Optamos por não entrar muito na área da animação uma vez que se trata de uma aplicação sobre saúde, o utilizador quer algo em concreto, rápido, e claro. É isso que um utilizador que procura informação sobre saúde e bem estar procura e tenta-mos seguir isso mesmo, não optando por por animação a mais. A animação da aplicação foca-se em motion tweens entre variações de alpha e de posição, na entrada dos diferentes menus. Estes motion tweens dão a sensação de fluidez necessária para que, no geral, tenha um melhor aspecto. Por exemplo, na entrada no menu do quem somos, todos os elementos entram por ordem e não expontaneamente, com uma certa fluidez devido à alternância das coordenadas e do alpha durante o motion.


5.4. Soluções técnicas adapatadas para a resolução de problemas

Durante a aplicação surgiram 2 grandes problemas: um no slider e outro no menu estilo acordeão. O primeiro foi simples de resolver, pois faltava ua função programada. Quando o utilizador clicava no slider para o arrastar, e não largava dentro do espaço predifinido, ou seja, largava fora, o flash não detectava o largar do clique e o slider acompanhava o rato para onde o utilizador o levasse, sem estar a premir o clique. Esse problema foi resolvido com alguma pesquisa na internet, uma vez que a programação conseguida tinha algumas lacúnias: faltava a função – onReleaseOutside. Essa função foi encontrada na internet e aplicada na já existente, resolvendo assim o probmela. O outro problema, ainda maior, foi o facto do nosso menu acordeão ter sido achado na internet, num ficheiro .fla, já preparado para que funcionasse. Depois de o alterar, de copiar todos os elementos da library do.fla achado para o principal, e todas as frames também, este continuou sem funcionar. Depois de muito tempo à volta deste problema, descobriu-se que era muito provável que fosse um problma de targeting uma vez que o acordeão é composto por movie clips, e este estão dentro de um movie clip (o do meno do corpo humano). Estudando bem a programação, e com alguma pesquisa para perceber algo mais complexo, concluimos que a palavra _root levava à raiz, e depois disso tinha de estar o nome da instância dada ao nosso movie clip do corpo humano, neste caso, inicio_MC. Depois de colocar, na programação, á frente de _root, o nome da instância, tudo ficou a funcionar muito bem. Era então um problema de targeting e o flash não sabia o caminho a seguir para que o utilizador conseguisse interagir com o “acordeão”.


6. Conclusões

6.1. Reflexões Críticas Fazendo um último balanço sobre o projecto realizado, pode-se concluir por parte do grupo que foi um trabalho positivo, trabalhoso mas que trouxe bastante conhecimento a todos os elemtos do grupo. O projecto não teve uma grande componente visual, no sentido em que não tem muitos gráficos, e o design é muito simples. Tudo isso não foi para poupar trabalho mas sim porque tivemos em atenção a causa e o público alvo. É pretendido, mais uma vez, que a aplicação seja bastante simples em grafismo e que tenha tudo o que o utilizador procura. Fizemos então uma aplicação seguindo as teorias da usabilidade e acessibilidade, com uma interacção perto de total por parte do utilizador enquanto navega, bem como simples. Para tal foi muito baseado no rollOver e no clique para obter informação, mas toda ou quase toda controlável pelo utilizador. Por último, a aplicação foi desenvolvida no flash com um stage da resolução mais utilizada hoje em dia globalmente: 1024 por 768. Contudo, essa resolução é de ecrã inteiro e não a disponivel para viasualizar algo no browser, então, o utilizador tem de utilizar o scroll da página para visualizar algumas partes. Podia ter sido alterada no código HTML para 800x600 mas fica melhor na resolução de 1024x768.


6.2. Sugestões para o aprefeiçoamento e/ou desenvolvimento futuro do projecto Para o desenvolvimento futuro do projecto, era sugerido que o utilizador fosse confrontado com um nívem mais aprofundado de navegação para além dos sistemas de orgãos. Por exemplo, o utilizador podia ser capaz de, dentro de cada sistema, escolher o orgão que quisesse. Isso seria mais interacção possível do utilizador e mais informação disponível, e é um ponto posítivo a acrescentar para a aplicação. Como aprefeiçoamento, ao invés do corpo humano ser apresentado num pequeno espaço na aplicação, este poderia ser visto num espaço maior, e o utilizador poderia “arrastar” este para baixo ou para cima para pver a parte pretendida, sendo assim o corpo humano mais interactivo e detalhado.


7. Referências Web e Bibliográficas:

http://saude.sapo.pt/

http://www.actionscript.org/

http://www.blog.noponies.com/2008/01/actionscript-2-accordion-menu/

http://freedownloadscenter.com/terms/accordion-flash-menu-actionscript-2/2.html

http://mrsteel.wordpress.com/2008/01/16/simple-accordion-example-in-flash-8-actionscript-2/ http://www.blog.noponies.com/2008/01/actionscript-2-accordion-menu/

http://www.lemlinh.com/flash-source-menu-accordion-version-8-as20/

http://www.actionscript.org/resources/articles/109/1/Scrolling-a-text-box/Page1.html

http://www.actionscript.org/resources/articles/151/1/Dynamic-text-with-scrollbar/Page1.html

http://www.actionscript.org/resources/articles/93/1/Continuously-Scrolling-Text-Field--Graphic-Objects/Page1.html

http://www.actionscript.org/resources/articles/77/1/Relative-Scrolling-Content-and-Navigation/Page1.html

http://www.actionscript.org/resources/articles/151/1/Dynamic-text-with-scrollbar/Page1.html

http://www.actionscript.org/resources/articles/151/1/Dynamic-text-with-scrollbar/Page1.html

http://www.smartwebby.com/Flash/text_scrollers.asp

http://www.youtube.com/watch?v=b6FmgrhLp3s

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