Projecto IDE-LAB Aprender Inglês

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
 
(48 intermediate revisions not shown)
Line 1: Line 1:
=Projecto Final IDE/LabMM1=
=Projecto Final IDE/LabMM1=
-
Projecto de fim de semestre no âmbito das cadeiras de I.D.E. e Lab.Multimédia
+
O projecto "Aprender Inglês com a Bia" foi realizado no âmbito das Unidades Curriculares de Imagem Digital Estática e de Laboratório Multimédia I. <Br>
-
 
+
Esta aplicação multimédia foi desenvolvida, inicialmente, a pensar em crianças entre os 6 e os 10 anos, mas as idade tiveram de ser alteradas para entre os 5 e os 7. Tal alteração justifica-se com o facto de as crianças dos 6 aos 10 anos estarem em diferentes estádios de desenvolvimento cognitivo, pelo que não se iria adequar a todas as crianças nos seus diferentes estádios. <Br>
-
*Aprender inglês com a Bia
+
-
 
+
-
Será uma aplicação multimédia para crianças na faixa etária dos 6 aos 10 anos, para aprender inglês de nível básico.
+
-
A forma de distribuição será off-line (pen usb).
+
-
 
+
-
*'''Alteração''' da faixa etária da aplicação multimédia-irá ser dos 5 aos 7; e a forma de distribuição será através de um CD devidamente identificado com o logotipo-mascote.
+
 +
'''Meio de distribuição''': offline (CD) <Br>
=Elementos do Grupo=
=Elementos do Grupo=
Line 71: Line 66:
-
==Divisão de tarefas/desenhos no Illustrator==
+
==Divisão de tarefas==
-
Ana R.Regatão-cidade/rua e interior da escola;
+
'''Imagem Digital Estática''' <Br>
-
 
+
Ana Rita - Cidade (menu principal), sala de aula, template das caixas de diálogo, caixas de diálogo da sala de aulas e de ajuda <Br>
-
Alexandra Guedes-interior da casa de família;
+
Alexandra - Casa de família, menu, caixa de diálogo da família e de sair <Br>
-
 
+
Isabel -Criação da pagina da wiki, estado da arte, arborescência(retificada pela Mónica Azevedo), Loja de animais, caixas de diálogo animais <Br>
-
Mónica Azevedo-mascote/logotipo;
+
Mónica - Mascote, logótipos<Br>
-
 
+
Template, tema visual e requisitos funcionais- Mónica, com revisão final em grupo <Br>
-
Isabel Matos-interior da loja de animais.
+
-
 
+
 +
'''Laboratório Multimédia I''' <Br>
 +
Ana Rita - Animação e programação da cidade (portas) e sala de aula <Br>
 +
Alexandra - Animação e programação da casa de família, menu (presente em todos os cenários) e junção de todos os ficheiros Flash <Br>
 +
Isabel - Animação e programação da loja de animais <Br>
 +
Mónica - Animação inicial e arborescência <Br>
 +
Relatório - Elaborado em conjunto <Br>
==Arborescência==
==Arborescência==
-
 
-
[[Media:Arborescencia.pdf]]
 
 +
[[File:Arborescencia.jpg]]
==Elementos de Identidade==
==Elementos de Identidade==
-
'''Mascote_frente, lateral e voar'''
+
'''Mascote_frente, lateral,  voar e a  chorar'''
<gallery widts=100px heights=100px perrow=4>
<gallery widts=100px heights=100px perrow=4>
Line 99: Line 97:
File:Bia_lateral.jpg
File:Bia_lateral.jpg
File:Bia_voar.jpg‎
File:Bia_voar.jpg‎
 +
File:Bia_sair_da_aplicação.jpg
</gallery><br>
</gallery><br>
Line 115: Line 114:
<gallery widts=100px heights=100px perrow=4>
<gallery widts=100px heights=100px perrow=4>
File:Logotipo_Bia_Final.jpg
File:Logotipo_Bia_Final.jpg
 +
</gallery><br>
 +
 +
'''Logótipo com margem de segurança'''
 +
 +
<gallery widts=100px heights=100px perrow=4>
File:Logotipo margem.jpg
File:Logotipo margem.jpg
 +
</gallery><br>
 +
 +
'''Logótipo a preto-e-branco'''
 +
 +
<gallery widts=100px heights=100px perrow=4>
File:Logotipo pretobranco.jpg
File:Logotipo pretobranco.jpg
</gallery><br>
</gallery><br>
 +
 +
 +
'''Caixas de diálogo'''
'''Caixas de diálogo'''
Line 124: Line 136:
File:Balao.jpg
File:Balao.jpg
File:Balao sair.jpg
File:Balao sair.jpg
 +
File:Balão ajuda.jpg
</gallery><br>
</gallery><br>
Line 131: Line 144:
File:Menu.jpg
File:Menu.jpg
</gallery><br>
</gallery><br>
-
 
==Opções Tipográficas==
==Opções Tipográficas==
Line 153: Line 165:
File:LojaAnimais3.jpg
File:LojaAnimais3.jpg
</gallery><br>
</gallery><br>
 +
 +
'''Som''' <Br>
 +
- Música de fundo (controlo on/off) <Br>
 +
- Som em português de cada objecto, pessoa ou animal <Br>
 +
- Som em inglês de cada objecto, pessoa ou animal <Br>
 +
- Som na caixa de diálogo de ajuda - explicação da aplicação <Br>
 +
 +
== Diários de Bordo ==
 +
 +
'''22 de Novembro''' <Br>
 +
- Escolha do grupo <Br>
 +
- Brainstorming acerca do tema/tipo de aplicação <Br>
 +
 +
'''25 de Novembro''' <Br>
 +
- Desenvolvimento do conceito da aplicação: escolha do layout, da mascote, título, escolha da faixa etária do público-alvo <Br>
 +
- Definição do meio de distribuição <Br>
 +
 +
'''26 de Novembro''' <Br>
 +
- Memória descritiva <Br>
 +
- Pesquisa de aplicações semelhantes - Estado da arte <Br>
 +
- Criação da página da wiki <Br>
 +
- Tema visual <Br>
 +
 +
'''29 de Novembro''' <Br>
 +
- Divisão de tarefas <Br>
 +
 +
'''30 de Novembro''' <Br>
 +
- Início da ilustração dos cenários, mascote e possíveis logótipos <Br>
 +
 +
'''2 de Dezembro''' <Br>
 +
- Identidade visual <Br>
 +
 +
'''6 de Dezembro''' <Br>
 +
- Arborescência <Br>
 +
 +
'''8 de Dezembro''' <Br>
 +
- Decisão de todas as posições da Bia (mascote) <Br>
 +
 +
'''10 a 13 de Dezembro''' <Br>
 +
- Ilustração dos cenários, mascote e logótipos <Br>
 +
 +
'''13 de Dezembro''' <Br>
 +
- Apresentação Final - Imagem Digital Estática <Br>
 +
- Três edifícios da cidade <Br>
 +
- Tentiva da sala de aula <Br>
 +
- Interior casa de família <Br>
 +
- Parte da loja de animais <Br>
 +
- Logótipos <Br>
 +
- Bia de frente e na lateral <Br>
 +
 +
'''16 de Dezembro''' <Br>
 +
- Início da ilustração das caixas de diálogo <Br>
 +
- Escolha logótipo <Br>
 +
 +
'''17 a 27 de Dezembro''' <Br>
 +
- Conclusão de todos os ecrãs e posições da mascote (frente, lateral, voar e chorar) em Illustrator <Br>
 +
 +
'''3 de Janeiro''' <Br>
 +
- O grupo reúne-se pela primeira vez depois de dia 17 de Dezembro para trocar ideias e apresentar o trabalho feito durante as férias.
 +
 +
'''4 e 5 de Janeiro''' <Br>
 +
- Animação em Flash <Br>
 +
 +
'''6 de Janeiro''' <Br>
 +
- Gravação de todos os sons ditos pela Bia <Br>
 +
- Início do controlo por ActioScript 2.0 <Br>
 +
 +
'''7 de Janeiro''' <Br>
 +
- Manipulação dos sons <Br>
 +
- Escolha da música de fundo <Br>
 +
 +
'''8 a 10 de Janeiro''' <Br>
 +
- Animação e programação em ActionScript 2.0 <Br>
 +
- Packaging <Br>
 +
- Fim do Tema visual e requisitos funcionais<Br>
 +
 +
 +
'''11 de Janeiro''' <Br>
 +
- Fim da animação e programação da sala de aula, portas da cidade e casa de família (interior) <Br>
 +
- Colocação dos ecrãs no template, imagens base, continuação do mesmo e alteração da arborescência<Br>
 +
 +
 +
'''12 de Janeiro''' <Br>
 +
- Continuação do Flash <Br>
 +
- Revisão e entrega do template final, tema visual e requisitos funcionais<Br>
 +
- Início do relatório <Br>
 +
 +
 +
'''13 de Janeiro''' <Br>
 +
- Continuação da programação em Flash (Loja de animais e junção de todos os cenários) <Br>
 +
- Continuação do relatório <Br>
 +
 +
 +
'''14 de Janeiro'''<Br>
 +
- Fim de todo o processo em Flash <Br>
 +
- Finalização do relatório <Br>
 +
 +
 +
==Relatório==
 +
 +
'''Resumo'''
 +
 +
Este relatório surge no decorrer da realização do projecto de Laboratório Multimédia I, do 1º ano do curso de Novas Tecnologias da Comunicação, da Universidade de Aveiro e pretende ser um relatório fidedigno de todo o processo de desenvolvimento da aplicação multimédia.
 +
 +
O relatório está dividido em cinco partes principais: apresentação do projecto, análise e planeamento, desenho funcional (requisitos funcionais, estrutura arborescente, desenho de interacção e usabilidade), desenho técnico, produção do projecto (estrutura e meios de navegação, integração e controlo de som, animações, soluções técnicas adoptadas para a resolução de problemas).
 +
 +
Por fim, faremos uma reflexão crítica de todo o projecto, juntamente com as conclusões e sugestões de melhoria.
 +
 +
 +
'''1. Apresentação do projecto '''
 +
 +
O projecto final resultou na construção de uma aplicação multimédia interactiva, desenvolvida para ambiente off-line (CD-ROM), utilizando a ferramenta Adobe Flash CS3 e Ilustrator CS3 leccionadas nas Unidades Curriculares de Laboratório Multimédia II e Imagem Digital Estática.
 +
 +
A aplicação multimédia interactiva destina-se a ensinar inglês a crianças entre os 5 e os 7 anos; é constituída por um cenário principal (cidade) e três secundários (escola, casa e loja de animais), tendo como objectivo a exploração da cidade e dos respectivos edifícios. Optamos por utilizar um ambiente de uma cidade, onde o utilizador pode entrar nos diferentes edifícios e interagir com os objectos, pessoas ou animais que irá encontrar, estes reagem ao rollover com uma pequena animação e, no caso dos animai, com os respectivos sons; cada objecto, ao ser clicado, faz surgir uma caixa de diálogo que contêm as palavras (em português e inglês) e sons associados ao objecto, pessoa ou animal.
 +
 +
Para esta aplicação multimédia interactiva, elegemos o paradigma de interacção Ambiente. O utilizador não sabe à partida quais os objectos clicáveis, sendo necessária a exploração de todo o cenário para os descobrir. Escolhemos este paradigma de interacção para a nossa aplicação, pois este paradigma cativa mais o utilizador. Quando a criança clicar em cada objecto, pessoa ou animal irá surgir uma caixa de diálogo com a palavra escrita em português e inglês e respectivos botões de som; cada caixa de diálogo tem, também, uma imagem do elemento clicado e um botão para a fechar, visto que, quando uma caixa de diálogo está aberta, não é possível passar directamente para outro elemento.
 +
 +
 +
'''2. Análise e planeamento'''
 +
 +
Para realizar este projecto, começamos por pensar como seria o layout da aplicação, a mascote, título e a faixa etária do público-alvo.
 +
 +
Começamos por decidir o nome da mascote: Bia. Como a fonética das palavras ‘Bia’ e ‘Bee’ é idêntica, optamos por uma abelha. Para manter a coerência visual, elegemos como cor principal da aplicação o amarelo e a forma de um hexágono para os botões e caixa de diálogo de saída, pois são semelhantes aos favos de mel. Para fazer esta aplicação multimédia interactiva pesquisamos algumas aplicações do mesmo género.
 +
 +
O layout da aplicação não é muito elaborado devido à faixa etária do utilizador.
 +
 +
 +
'''3. Desenho funcional'''
 +
 +
 +
*3.1 Requisitos funcionais
 +
 +
Mascote – está presente no início, quando surge o título e no final quando a criança clicar no botão de saída da aplicação, a mascote (Bia), aparece a chorar e pergunta à criança se quer realmente sair da aplicação.
 +
 +
Cidade - é o ecrã principal, nela está contida uma loja de animais, uma casa de família, e uma escola. Este ecrã serve como menu de acesso aos outros cenários.
 +
 +
Escola – é um ecrã secundário, dentro desta estão objectos relacionados com a sala de aula.
 +
 +
Loja de animais – é um ecrã secundário onde estão alguns animais domésticos, como o cão, gato e papagaio.
 +
 +
Casa de família – é um ecrã secundário, dentro deste estão os seguintes elementos da família: pai, avó, avô, irmão, irmã e mãe.
 +
 +
Caixas de diálogo – estão presentes quando a criança clica nos objectos, pessoas ou animais, surgindo a palavra em português e inglês, com a opção de as poder ouvir. Também aparece quando a
 +
criança clica na opção de fechar a aplicação, tendo a opção de confirmar a saída (botão sim) ou de continuar na aplicação e no botão de ajuda que contém texto e som.
 +
 +
Menu – está sempre presente e é constituído por três botões: saída da aplicação, ajuda e parar e reproduzir a música de fundo.
 +
 +
Saída da aplicação – ao ser clicado, aparece a opção de continuar ou sair definitivamente da aplicação.
 +
 +
Ajuda – ao ser clicado, surge uma caixa de diálogo que tem texto explicativo de como funciona a aplicação e tem, também, a opção de ouvir este mesmo texto. Assim, facilita a utilização da aplicação por parte do público-alvo (crianças entre os 5 e os 7 anos).
 +
 +
Parar/reproduzir som – a este botão está associada a música de fundo.
 +
 +
Botão de sair das caixas de diálogo – este botão tem como função sair das caixas de diálogo.
 +
 +
Portas – este botão está sempre presente nos ecrãs, servindo de entrada e saída dos mesmos. Ao passar o rato sobre cada uma das portas, estas abrem-se, reforçando a ideia da sua função.
 +
 +
 +
*3.2 Estrutura arborescente
 +
 +
A estrutura arborescente escolhida pelo grupo foi a hierárquica linear. O utilizador navega, em profundidade, entre os níveis da estrutura, não é permitido ao utilizador navegar entre itens do mesmo nível, apesar de ter a sensação de liberdade. Apesar disso, o utilizador só poderá navegar entre dois elementos do mesmo nível se regressar ao nível anterior, por exemplo, na loja de animais, quando se clica no cão e a respectiva caixa de diálogo está aberta, é necessário fechar a caixa (voltar ao cenário da loja) para poder navegar para o gato.
 +
 +
 +
*3.3 Desenho de interacção e usabilidade
 +
 +
Para o desenho de interacção, tivemos em conta alguns factores cognitivos/psicológicos, tais como a limitação da capacidade humana de recordar a informação – a capacidade de reconhecer a informação é superior.
 +
 +
Implementamos uma estratégia consistente de discriminação cromática e espacial, existem cores dominantes e cada uma com uma função associada. O castanho está relacionado com botão de entrada/saída dos ecrãs (portas); o amarelo está associado à cor da mascote, esta cor está presente em toda a aplicação: no menu localizado no canto superior direito em forma de hexágono e em todas as caixas de diálogo que a criança vai encontrar ao longo da sua aprendizagem. Através da estruturação da aplicação, a estratégia cromática é de fácil reconhecimento e compreensão.
 +
 +
A usabilidade é um atributo qualitativo que se relaciona com a facilidade de utilização da aplicação. Tendo em conta o perfil do utilizador - crianças entre os 5 e os 7 anos – a aplicação está estruturada de forma lógica, a informação está disponível, no máximo, em três cliques, é baseada no paradigma de interacção ambiente - dispondo de formas rápidas e directas de acesso aos objectos, pessoas e animais, embora apele à descoberta -, o utilizador tem aos seu dispor um botão de ajuda, para o orientar na navegação: surge uma caixa de diálogo com a Bia e um botão de som, que orienta o utilizador de forma a perceber o que tem de fazer para ter acesso a toda a informação disponível.
 +
 +
A aplicação é simples, tendo em conta a máxima KISS “Keep it simple, stupid”, não sobrecarregando a criança com informação desnecessária; a linguagem é clara e familiar.
 +
 +
 +
'''4. Desenho técnico'''
 +
 +
 +
O movimento é uma constante do nosso dia-a-dia. Desde os primórdios que o ser humano em evolução sente necessidade de desenhar/representar cenas do quotidiano e transmitir aos outros uma ideia, um sentimento ou simplesmente entreter usando a imagem e o movimento.
 +
 +
A ferramenta Flash e a linguagem de programação AS2.0 são ferramentas versáteis, fiáveis e permitem grande liberdade na criação de animações e conteúdos.
 +
 +
Para que a interacção ambiente funcionasse, foi necessário desenhar tendo sempre em mente a faixa etária para a qual esta aplicação foi desenvolvida.
 +
 +
Nos botões dentro dos ecrãs secundários (loja de animais, casa de familia e escola) foi necessário desenhar pelo menos duas versões das imagens que iriam funcionar como botões de aprendizagem do inglês para suscitar interesse juntando um pouco de diversão a todo o processo.
 +
 +
Vamos exemplificar com imagens de cada ecrã, de que forma o desenho técnico foi desenvolvido para que as animações funcionassem e para tornar mais rica a experiência por parte do utilizador.
 +
 +
[[File:Print23.jpg]]
 +
 +
Em cima está exemplificado, de que forma o desenho técnico foi usado. As portas de entrada das casas foram transformadas em botões de acesso aos menus secundários e produzem um movimento á passagem do rato (rollover), chamando a atenção do utilizador, o que foi conseguido com dois desenhos de cada porta; nas posições aberta e fechada.                   
 +
 +
Em todos os ecrãs estão presentes os 3 botões: de ajuda, tirar/colocar som e sair da aplicação. Para além de serem funções essenciais a qualquer aplicação, foram desenhadas com um formato (favo) que associa e interliga todos os ecrãs e a mascote, a abelha Bia. Mais uma vez o desenho técnico é essencial para definir identidade visual.
 +
 +
[[File:Print21.jpg]]
 +
 +
No menu principal o botão de ajuda faz despoletar esta mensagem escrita e falada.
 +
 +
Mais uma vez aparece um dos desenhos da mascote, de frente.
 +
 +
[[File:Print19.jpg]]
 +
 +
 +
Ao longo da aplicação, as várias imagens desenhadas da Mascote são usadas, tornando a aplicação mais cativante; sendo que a terceira imagem está inserida no movie clip inicial de abertura da aplicação, onde aparece a voar.
 +
 +
Para esta animação acontecer o desenho das asas foi importado numa layer á parte para produzir a animação.
 +
 +
 +
Mais exemplos da Mascote, Bia:
 +
 +
[[File:Print20.jpg]]
 +
 +
 +
Na loja dos animais e na casa da familia, são usados métodos semelhantes de animação. Usando o rollover com movie clips ou simplesmente criando movimento, ao colocar na frame over do botão, uma imagem semelhante mas com pequenas alterações para que a ideia de animação resultasse.
 +
 +
Apresentamos abaixo alguns exemplos de imagens, onde o desenho técnico foi essencial:
 +
 +
[[File:Print22.jpg]]
 +
 +
Neste exemplo, com dois desenhos do papagaio conseguimos recriar o esvoaçar da ave ao fazer rollover, usando a frame up (onde fica o botão de acesso á informação) e over com a segunda versão do desenho do papagaio.
 +
 +
[[File:Print25.jpg]]
 +
 +
As imagens acima representadas fazem parte de um movie clip construído na frame over do botão respectivo. Foi necessário desenhar três versões do rato para construir a animação do rato para recriar movimento.
 +
 +
[[File:Print18.jpg]]
 +
 +
Na casa da familia, a avó “adormece” ao fazer rollover no botão. Para isso acontecer foram usados dois desenhos, usando a frame up (onde fica o botão de acesso á informação) e over com a segunda versão do desenho da avó.
 +
 +
Na escola as animações/botões funcionam com o aumento da imagem, ao fazer rollover, chamando a atenção de que existe conteúdo no objecto. Temos em baixo o exemplo do quadro preto onde para além do botão que tem o conteúdo do quadro, também contém o botão dos números que passam a amarelo executando o rollover.
 +
 +
[[File:Print24.jpg]]
 +
 +
 +
'''5. Produção do projecto '''
 +
 +
 +
*5.1 Estrutura e meios de navegação/interacção
 +
 +
A aplicação está estruturada de forma simples e lógica: o utilizador tem de recorrer ao rato para a explorar.
 +
 +
Esta aplicação começa com Bia a voar, trazendo consigo o título do projecto, mostrando, de seguida, o ecrã principal da cidade, no canto superior direito o menu com três botões (que vão estar presentes em todos os ecrãs da aplicação e que permitem sair da aplicação, o acesso à ajuda e para/reproduzir som).
 +
 +
As portas de cada edifício estão sempre presentes nos ecrãs, servindo de entrada e saída dos mesmos. Ao passar o rato sobre cada uma das portas, estas abrem-se.
 +
 +
Ecrãs
 +
<gallery widts=100px heights=100px perrow=4>
 +
File:Aplicação family.jpg
 +
File:Cidade final.jpg
 +
File:Sala aula final.jpg
 +
File:LojaAnimais3.jpg
 +
</gallery><br>
 +
 +
Caixa de Diálogos
 +
<gallery widts=100px heights=100px perrow=4>
 +
File:Balao.jpg
 +
File:Balao sair.jpg
 +
File:Balão ajuda.jpg
 +
</gallery><br>
 +
 +
 +
*5.2 Integração e controlo de som
 +
 +
Música de fundo:
 +
 +
Visto que existem várias cenas, a música de fundo teve que ser integrada através de uma variável global. Este tipo de programação ActionScript 2.0 não foi leccionada nas aulas, pelo que o grupo teve de recorrer a outros meios.
 +
 +
A existência da variável global justifica-se pelo facto de a música à saída de qualquer um dos cenários se sobrepor, e de cada cena ter um menu diferente, o que dificultava a programação dos botões.
 +
 +
Assim, se a música estiver a reproduzir, o botão para coloca-lo off está visível, pelo contrário, quando o som está parado, o botão visível é para colocá-lo on.
 +
 +
[[File:Print1.png]]
 +
 +
 +
Botões som on/off
 +
 +
On
 +
 +
[[File:Print2.png]]
 +
 +
Off
 +
 +
[[File:Print2.png]]
 +
 +
Caixas de diálogo
 +
 +
Todos os sons, à excepção dos sons ‘números’, ‘numbers’  na sala de aula e som do botão de ajuda, foram introduzidos por arraste da library para a frame de botão down. Decidimos introduzir os sons por arraste, por serem sons curtos, o que não justificava a criação de variáveis.
 +
 +
Os sons ‘números’ e ‘numbers’ foram introduzidos através de variáveis, devido à sua extensão.
 +
 +
Sons curtos
 +
 +
[[File:Print3.png]]
 +
 +
Som ‘numbers’ start
 +
 +
[[File:Print4.png]]
 +
 +
Sons ‘números’ e’ numbers’ variável
 +
 +
[[File:Print5.png]]
 +
 +
Som ajuda variável
 +
 +
[[File:Print6.png]]
 +
 +
O botão de fechar as caixas de diálogo tem também o código referente ao som de fundo, visto que quando abrimos uma dessas caixas a música pára, para o utilizador conseguir ouvir perfeitamente as palavras referentes ao elemento. Assim, quando fechamos uma caixa de diálogo, a música de fundo recomeça, caso o botão de som esteja programado para reproduzir, caso contrário, esta mantêm-se off.
 +
 +
Parar som ao abrir caixa de diálogo
 +
 +
[[File:Print7.png]]
 +
 +
Programação para reproduzir ou não a música de fundo ao fechar a caixa de diálogo
 +
 +
[[File:Print8.png]]
 +
 +
Sons rollover
 +
 +
Na loja de animais, alguns destes ao fazer rollover produzem um som, estes foram introduzidos da mesma forma que os sons curtos das caixas de diálogo (arraste). Desta vez, os sons foram arrastados para a frame over e não down.
 +
 +
[[File:Print9.png]]
 +
 +
 +
*5.3 Animação
 +
 +
Animação inicial
 +
 +
A aplicação inicia com um movie clip, usando a imagem da nossa mascote, a abelha Bia.
 +
 +
No movie clip inicial usamos, motion tweens de posição e de alpha, para que a mascote voe pelo cenário, seguindo, logo atrás de si, o nome da aplicação.
 +
 +
Decidimos colocar todas as variáveis de som na primeira frame, desta cena, visto que é uma frame a que não retomamos, e, por isso, não causará problemas com o som de fundo. Colocámos, também, o código de fullscreen. No que diz respeito ao código de fullscreen, tivemos de fazer uma alteração nas layers na animação inicial, transformando-as em mask.
 +
 +
 +
Exemplo
 +
 +
[[File:Print10.png]]
 +
 +
Variáveis
 +
 +
[[File:Print11.png]]
 +
 +
 +
Ecrã principal – cidade
 +
 +
Este ecrã funciona como menu principal que dá acesso aos ecrãs secundários.
 +
 +
Cada porta dos edifícios serve como botão de acesso aos outros cenários e, ao rollover nas portas, estas ficam abertas, para reforçar a sua função.
 +
 +
 +
Acesso à sala de aula
 +
 +
[[File:Print12.png]]
 +
 +
 +
Ecrãs secundários – sala de aula, casa e loja de animais
 +
 +
Cada ecrã secundário é constituído por diversos botões, todos eles com reacção ao rollover. Quando clicados abrem uma caixa de diálogo que disponibiliza a apalavra correspondente em português e inglês e os respectivos sons.
 +
 +
 +
Exemplo de programação para abrir caixa de diálogo
 +
 +
[[File:Print13.png]]
 +
 +
 +
Portas
 +
 +
Em todos os cenários, há uma porta que serve para nos levar de volta ao ecrã principal.
 +
 +
Na sua programação, tem também um stop da música de fundo, para evitar a sobreposição da mesma.
 +
 +
[[File:Print14.png]]
 +
 +
 +
*5.4 Soluções técnicas adoptadas para a resolução de problemas
 +
 +
 +
Movie clips
 +
 +
De forma a evitar que, quando uma caixa de diálogo está aberta os botões sejam clicáveis, criamos um movie clip de cada botão, que colocamos numa layer diferente, com o alpha a 0% que se torna visível ao abrir a caixa de diálogo. Quando fechamos essa caixa de diálogo, esta volta à forma inicial.
 +
 +
 +
Exemplo de programação ao clique num botão
 +
 +
[[File:Print15.png]]
 +
 +
 +
Exemplo de programação ao clique no botão de saída de uma caixa de diálogo
 +
 +
[[File:Print16.png]]
 +
 +
 +
Exemplo da distribuição de layers botão/movie clip (selec)
 +
 +
[[File:Print17.png]]
 +
 +
 +
==6. Conclusões==
 +
 +
 +
Elaborado o projecto, concluímos os objectivos a que nos propusemos inicialmente. Em Action Script 2.0 aplicamos conhecimentos adquiridos nas aulas, recorremos a ajuda na Web, dos professores Ana Carla Amaro e Hélder Caixinha bem como dos colegas de outras turmas.
 +
 +
 +
*6.1 Reflexão crítica
 +
 +
Sentimo-nos limitados aos conhecimentos de programação, daí termos pedido ajuda extra a professores, colegas e pesquisa na Web, isto também foi importante, para permitir conhecer outro tipo de programação.
 +
 +
A falta de diálogo entre os elementos, atrasou todo o trabalho, apesar de ter havido trabalho durante as férias de natal, pelo menos do logótipo e mascote, a aplicação e as ideias deveriam ter continuado durante as férias, uma vez que dois elementos do grupo são trabalhadores-estudantes.
 +
 +
 +
Ana Rita Regatão
 +
 +
Depois de desenvolver todo este projecto, irei redigir uma hetero-avaliação.
 +
 +
Alexandra Guedes: A Alexandra ficou encarregue da animação e programação da casa de família, do menu (três botões; presente em todos os cenários) e de juntar todos os ficheiros Flash.
 +
 +
Considero que a Alexandra foi um elemento fundamental na realização desta parte do projecto.
 +
 +
Isabel Matos: A Isabel ficou responsável de animar e programar a loja de animais. Apesar de finalizar o seu trabalho a tempo da entrega, foi o membro que trabalhou a um ritmo mais lento. Essa demora fez com que todo o projecto, na fase final, andasse de forma mais lenta. Por vezes a sua atitude não era a melhor para com as colegas, embora ela não concorde com tal opinião.
 +
 +
Mónica Azevedo: A Mónica ficou encarregue de fazer a animação inicial e arborescência. Acabou todas as suas tarefas a tempo, pelo que iniciou o relatório antes de todos os elementos.
 +
 +
Assim, este projecto serviu para nos habituarmos aos diferentes ritmos de trabalho dos membros do grupo, visto que duas de nós são trabalhadoras-estudantes o horário para estarmos reunidas era dependente do horário de trabalho.
 +
 +
 +
Alexandra Guedes
 +
 +
Nesta reflexão vou introduzir uma auto e hetero avaliação do grupo visto que nem sempre funcionou da melhor forma.
 +
 +
Desde inicio que houve uma certa dificuldade em termos de comunicação entre o grupo, os elementos não se conheciam, têm idades diferentes, dois deles são trabalhadores estudantes e tudo isto afectou de certo modo o funcionamento do grupo.
 +
 +
Os diferentes elementos do grupo tiveram tarefas diferentes e foram cumpridas de formas diferentes. Enquanto que eu, a Rita e a Isabel ficamos encarregues de animar cenários, a Mónica fez a animação inicial e o relatório.
 +
 +
Quanto a mim e à Rita considero que conseguimos cumprir os prazos com sucesso e apesar de todas as dificuldades que tivemos com a programação conseguimos supera-las através de pesquisa.
 +
 +
A Isabel animou o seu cenário, concluiu antes do prazo de entrega, contudo foi concebido a um ritmo mais lento o que de certa forma atrasou o projecto. A sua atitude também não foi a melhor o que não facilitou ajuda-la com as suas dificuldades. A Mónica, apesar de não ter feito programação, fez a arborescência e a animação inicial e adiantou o relatório final o que foi uma grande ajuda.
 +
 +
Considero que não foi fácil lidar com as dificuldades encontradas, nomeadamente os diferentes horários e ritmos de trabalho. Cada elemento deveria ter a noção das suas capacidades e das suas limitações e tirar proveito disso, o que nem sempre aconteceu.
 +
 +
 +
Mónica Azevedo e Isabel Matos
 +
 +
Durante a realização deste projecto, surgiram alguns conflitos, devido a não terem sido definidos, logo de início, estratégias para que todo o trabalho fosse uniforme, e a falta de diálogo no início, foi o culminar de alguns desentendimentos com elementos do grupo, o que não deveria acontecer, uma vez que se somos um grupo, devíamos ser unidos, ajudarmo-nos mutuamente e não ser individualistas, apesar de tudo, foi uma experiência gratificante na medida em que com isto aprendemos a lidar com outras pessoas, com idades diferentes e ideias.

Latest revision as of 22:59, 14 January 2011

Contents

Projecto Final IDE/LabMM1

O projecto "Aprender Inglês com a Bia" foi realizado no âmbito das Unidades Curriculares de Imagem Digital Estática e de Laboratório Multimédia I.
Esta aplicação multimédia foi desenvolvida, inicialmente, a pensar em crianças entre os 6 e os 10 anos, mas as idade tiveram de ser alteradas para entre os 5 e os 7. Tal alteração justifica-se com o facto de as crianças dos 6 aos 10 anos estarem em diferentes estádios de desenvolvimento cognitivo, pelo que não se iria adequar a todas as crianças nos seus diferentes estádios.

Meio de distribuição: offline (CD)

Elementos do Grupo

Grupo nº3

Alexandra Guedes nº mec.60387

Ana Rita Regatão nº mec.59664

Mónica Azevedo nº mec.61373

Isabel Matos nº mec.61215


Imagens Base

Bee.jpg
City.jpg
Classroom.jpg
Petshop.jpg
School.jpg
Store.jpg
House.jpg


http://www.tiburcio.locaweb.com.br/colorir.htm desenhos

http://www.shutterstock.com/pic-52921033/stock-vector-suburb-vector-background.html Cenários, mascotes, ideias de cores e identidade visual

TiburcioIlustrador.png
FotoSiteShutterstock.png


Estado da arte

O nosso projecto visa a aprendizagem do vocabulário básico em inglês. Uma vez que se destina a crianças deve ser rico em cor e animação para desta forma conseguir captar a atenção do público alvo. Aqui estão algumas aplicações do mesmo género:

http://www.mingoville.com/pt.html

http://www.storyplace.org/eel/activities/littleredhightops.asp

http://learnenglishkids.britishcouncil.org/en/make-your-own/animal-maker

http://learnenglishkids.britishcouncil.org/en/short-stories/the-princess-and-the-dragon

http://www.canalkids.com.br/portal/canal/index.htm


Divisão de tarefas

Imagem Digital Estática
Ana Rita - Cidade (menu principal), sala de aula, template das caixas de diálogo, caixas de diálogo da sala de aulas e de ajuda
Alexandra - Casa de família, menu, caixa de diálogo da família e de sair
Isabel -Criação da pagina da wiki, estado da arte, arborescência(retificada pela Mónica Azevedo), Loja de animais, caixas de diálogo animais
Mónica - Mascote, logótipos
Template, tema visual e requisitos funcionais- Mónica, com revisão final em grupo

Laboratório Multimédia I
Ana Rita - Animação e programação da cidade (portas) e sala de aula
Alexandra - Animação e programação da casa de família, menu (presente em todos os cenários) e junção de todos os ficheiros Flash
Isabel - Animação e programação da loja de animais
Mónica - Animação inicial e arborescência
Relatório - Elaborado em conjunto

Arborescência

Arborescencia.jpg

Elementos de Identidade

Mascote_frente, lateral, voar e a chorar

Bia frente.jpg
Bia lateral.jpg
Bia voar.jpg
Bia sair da aplicação.jpg

Protótipos para logotipo

Protótipo logotipo bia01.jpg
Protótipo logotipo bia02.jpg
Protótipo logotipo bia03.jpg
Protótipo logotipo bia04.jpg
Protótipo logotipo bia06.jpg

Logótipo final

Logotipo Bia Final.jpg

Logótipo com margem de segurança

Logotipo margem.jpg

Logótipo a preto-e-branco

Logotipo pretobranco.jpg



Caixas de diálogo

Balao.jpg
Balao sair.jpg
Balão ajuda.jpg

Menu

Menu.jpg

Opções Tipográficas

Tipografia Principal Título - Cooper Std

Tipografia Secundária Caixas de diálogo - Arial


Cenários

Aplicação family.jpg
Cidade final.jpg
Sala aula final.jpg
LojaAnimais3.jpg

Som
- Música de fundo (controlo on/off)
- Som em português de cada objecto, pessoa ou animal
- Som em inglês de cada objecto, pessoa ou animal
- Som na caixa de diálogo de ajuda - explicação da aplicação

Diários de Bordo

22 de Novembro
- Escolha do grupo
- Brainstorming acerca do tema/tipo de aplicação

25 de Novembro
- Desenvolvimento do conceito da aplicação: escolha do layout, da mascote, título, escolha da faixa etária do público-alvo
- Definição do meio de distribuição

26 de Novembro
- Memória descritiva
- Pesquisa de aplicações semelhantes - Estado da arte
- Criação da página da wiki
- Tema visual

29 de Novembro
- Divisão de tarefas

30 de Novembro
- Início da ilustração dos cenários, mascote e possíveis logótipos

2 de Dezembro
- Identidade visual

6 de Dezembro
- Arborescência

8 de Dezembro
- Decisão de todas as posições da Bia (mascote)

10 a 13 de Dezembro
- Ilustração dos cenários, mascote e logótipos

13 de Dezembro
- Apresentação Final - Imagem Digital Estática
- Três edifícios da cidade
- Tentiva da sala de aula
- Interior casa de família
- Parte da loja de animais
- Logótipos
- Bia de frente e na lateral

16 de Dezembro
- Início da ilustração das caixas de diálogo
- Escolha logótipo

17 a 27 de Dezembro
- Conclusão de todos os ecrãs e posições da mascote (frente, lateral, voar e chorar) em Illustrator

3 de Janeiro
- O grupo reúne-se pela primeira vez depois de dia 17 de Dezembro para trocar ideias e apresentar o trabalho feito durante as férias.

4 e 5 de Janeiro
- Animação em Flash

6 de Janeiro
- Gravação de todos os sons ditos pela Bia
- Início do controlo por ActioScript 2.0

7 de Janeiro
- Manipulação dos sons
- Escolha da música de fundo

8 a 10 de Janeiro
- Animação e programação em ActionScript 2.0
- Packaging
- Fim do Tema visual e requisitos funcionais


11 de Janeiro
- Fim da animação e programação da sala de aula, portas da cidade e casa de família (interior)
- Colocação dos ecrãs no template, imagens base, continuação do mesmo e alteração da arborescência


12 de Janeiro
- Continuação do Flash
- Revisão e entrega do template final, tema visual e requisitos funcionais
- Início do relatório


13 de Janeiro
- Continuação da programação em Flash (Loja de animais e junção de todos os cenários)
- Continuação do relatório


14 de Janeiro
- Fim de todo o processo em Flash
- Finalização do relatório


Relatório

Resumo

Este relatório surge no decorrer da realização do projecto de Laboratório Multimédia I, do 1º ano do curso de Novas Tecnologias da Comunicação, da Universidade de Aveiro e pretende ser um relatório fidedigno de todo o processo de desenvolvimento da aplicação multimédia.

O relatório está dividido em cinco partes principais: apresentação do projecto, análise e planeamento, desenho funcional (requisitos funcionais, estrutura arborescente, desenho de interacção e usabilidade), desenho técnico, produção do projecto (estrutura e meios de navegação, integração e controlo de som, animações, soluções técnicas adoptadas para a resolução de problemas).

Por fim, faremos uma reflexão crítica de todo o projecto, juntamente com as conclusões e sugestões de melhoria.


1. Apresentação do projecto

O projecto final resultou na construção de uma aplicação multimédia interactiva, desenvolvida para ambiente off-line (CD-ROM), utilizando a ferramenta Adobe Flash CS3 e Ilustrator CS3 leccionadas nas Unidades Curriculares de Laboratório Multimédia II e Imagem Digital Estática.

A aplicação multimédia interactiva destina-se a ensinar inglês a crianças entre os 5 e os 7 anos; é constituída por um cenário principal (cidade) e três secundários (escola, casa e loja de animais), tendo como objectivo a exploração da cidade e dos respectivos edifícios. Optamos por utilizar um ambiente de uma cidade, onde o utilizador pode entrar nos diferentes edifícios e interagir com os objectos, pessoas ou animais que irá encontrar, estes reagem ao rollover com uma pequena animação e, no caso dos animai, com os respectivos sons; cada objecto, ao ser clicado, faz surgir uma caixa de diálogo que contêm as palavras (em português e inglês) e sons associados ao objecto, pessoa ou animal.

Para esta aplicação multimédia interactiva, elegemos o paradigma de interacção Ambiente. O utilizador não sabe à partida quais os objectos clicáveis, sendo necessária a exploração de todo o cenário para os descobrir. Escolhemos este paradigma de interacção para a nossa aplicação, pois este paradigma cativa mais o utilizador. Quando a criança clicar em cada objecto, pessoa ou animal irá surgir uma caixa de diálogo com a palavra escrita em português e inglês e respectivos botões de som; cada caixa de diálogo tem, também, uma imagem do elemento clicado e um botão para a fechar, visto que, quando uma caixa de diálogo está aberta, não é possível passar directamente para outro elemento.


2. Análise e planeamento

Para realizar este projecto, começamos por pensar como seria o layout da aplicação, a mascote, título e a faixa etária do público-alvo.

Começamos por decidir o nome da mascote: Bia. Como a fonética das palavras ‘Bia’ e ‘Bee’ é idêntica, optamos por uma abelha. Para manter a coerência visual, elegemos como cor principal da aplicação o amarelo e a forma de um hexágono para os botões e caixa de diálogo de saída, pois são semelhantes aos favos de mel. Para fazer esta aplicação multimédia interactiva pesquisamos algumas aplicações do mesmo género.

O layout da aplicação não é muito elaborado devido à faixa etária do utilizador.


3. Desenho funcional


Mascote – está presente no início, quando surge o título e no final quando a criança clicar no botão de saída da aplicação, a mascote (Bia), aparece a chorar e pergunta à criança se quer realmente sair da aplicação.

Cidade - é o ecrã principal, nela está contida uma loja de animais, uma casa de família, e uma escola. Este ecrã serve como menu de acesso aos outros cenários.

Escola – é um ecrã secundário, dentro desta estão objectos relacionados com a sala de aula.

Loja de animais – é um ecrã secundário onde estão alguns animais domésticos, como o cão, gato e papagaio.

Casa de família – é um ecrã secundário, dentro deste estão os seguintes elementos da família: pai, avó, avô, irmão, irmã e mãe.

Caixas de diálogo – estão presentes quando a criança clica nos objectos, pessoas ou animais, surgindo a palavra em português e inglês, com a opção de as poder ouvir. Também aparece quando a criança clica na opção de fechar a aplicação, tendo a opção de confirmar a saída (botão sim) ou de continuar na aplicação e no botão de ajuda que contém texto e som.

Menu – está sempre presente e é constituído por três botões: saída da aplicação, ajuda e parar e reproduzir a música de fundo.

Saída da aplicação – ao ser clicado, aparece a opção de continuar ou sair definitivamente da aplicação.

Ajuda – ao ser clicado, surge uma caixa de diálogo que tem texto explicativo de como funciona a aplicação e tem, também, a opção de ouvir este mesmo texto. Assim, facilita a utilização da aplicação por parte do público-alvo (crianças entre os 5 e os 7 anos).

Parar/reproduzir som – a este botão está associada a música de fundo.

Botão de sair das caixas de diálogo – este botão tem como função sair das caixas de diálogo.

Portas – este botão está sempre presente nos ecrãs, servindo de entrada e saída dos mesmos. Ao passar o rato sobre cada uma das portas, estas abrem-se, reforçando a ideia da sua função.


A estrutura arborescente escolhida pelo grupo foi a hierárquica linear. O utilizador navega, em profundidade, entre os níveis da estrutura, não é permitido ao utilizador navegar entre itens do mesmo nível, apesar de ter a sensação de liberdade. Apesar disso, o utilizador só poderá navegar entre dois elementos do mesmo nível se regressar ao nível anterior, por exemplo, na loja de animais, quando se clica no cão e a respectiva caixa de diálogo está aberta, é necessário fechar a caixa (voltar ao cenário da loja) para poder navegar para o gato.


Para o desenho de interacção, tivemos em conta alguns factores cognitivos/psicológicos, tais como a limitação da capacidade humana de recordar a informação – a capacidade de reconhecer a informação é superior.

Implementamos uma estratégia consistente de discriminação cromática e espacial, existem cores dominantes e cada uma com uma função associada. O castanho está relacionado com botão de entrada/saída dos ecrãs (portas); o amarelo está associado à cor da mascote, esta cor está presente em toda a aplicação: no menu localizado no canto superior direito em forma de hexágono e em todas as caixas de diálogo que a criança vai encontrar ao longo da sua aprendizagem. Através da estruturação da aplicação, a estratégia cromática é de fácil reconhecimento e compreensão.

A usabilidade é um atributo qualitativo que se relaciona com a facilidade de utilização da aplicação. Tendo em conta o perfil do utilizador - crianças entre os 5 e os 7 anos – a aplicação está estruturada de forma lógica, a informação está disponível, no máximo, em três cliques, é baseada no paradigma de interacção ambiente - dispondo de formas rápidas e directas de acesso aos objectos, pessoas e animais, embora apele à descoberta -, o utilizador tem aos seu dispor um botão de ajuda, para o orientar na navegação: surge uma caixa de diálogo com a Bia e um botão de som, que orienta o utilizador de forma a perceber o que tem de fazer para ter acesso a toda a informação disponível.

A aplicação é simples, tendo em conta a máxima KISS “Keep it simple, stupid”, não sobrecarregando a criança com informação desnecessária; a linguagem é clara e familiar.


4. Desenho técnico


O movimento é uma constante do nosso dia-a-dia. Desde os primórdios que o ser humano em evolução sente necessidade de desenhar/representar cenas do quotidiano e transmitir aos outros uma ideia, um sentimento ou simplesmente entreter usando a imagem e o movimento.

A ferramenta Flash e a linguagem de programação AS2.0 são ferramentas versáteis, fiáveis e permitem grande liberdade na criação de animações e conteúdos.

Para que a interacção ambiente funcionasse, foi necessário desenhar tendo sempre em mente a faixa etária para a qual esta aplicação foi desenvolvida.

Nos botões dentro dos ecrãs secundários (loja de animais, casa de familia e escola) foi necessário desenhar pelo menos duas versões das imagens que iriam funcionar como botões de aprendizagem do inglês para suscitar interesse juntando um pouco de diversão a todo o processo.

Vamos exemplificar com imagens de cada ecrã, de que forma o desenho técnico foi desenvolvido para que as animações funcionassem e para tornar mais rica a experiência por parte do utilizador.

Print23.jpg

Em cima está exemplificado, de que forma o desenho técnico foi usado. As portas de entrada das casas foram transformadas em botões de acesso aos menus secundários e produzem um movimento á passagem do rato (rollover), chamando a atenção do utilizador, o que foi conseguido com dois desenhos de cada porta; nas posições aberta e fechada.

Em todos os ecrãs estão presentes os 3 botões: de ajuda, tirar/colocar som e sair da aplicação. Para além de serem funções essenciais a qualquer aplicação, foram desenhadas com um formato (favo) que associa e interliga todos os ecrãs e a mascote, a abelha Bia. Mais uma vez o desenho técnico é essencial para definir identidade visual.

Print21.jpg

No menu principal o botão de ajuda faz despoletar esta mensagem escrita e falada.

Mais uma vez aparece um dos desenhos da mascote, de frente.

Print19.jpg


Ao longo da aplicação, as várias imagens desenhadas da Mascote são usadas, tornando a aplicação mais cativante; sendo que a terceira imagem está inserida no movie clip inicial de abertura da aplicação, onde aparece a voar.

Para esta animação acontecer o desenho das asas foi importado numa layer á parte para produzir a animação.


Mais exemplos da Mascote, Bia:

Print20.jpg


Na loja dos animais e na casa da familia, são usados métodos semelhantes de animação. Usando o rollover com movie clips ou simplesmente criando movimento, ao colocar na frame over do botão, uma imagem semelhante mas com pequenas alterações para que a ideia de animação resultasse.

Apresentamos abaixo alguns exemplos de imagens, onde o desenho técnico foi essencial:

Print22.jpg

Neste exemplo, com dois desenhos do papagaio conseguimos recriar o esvoaçar da ave ao fazer rollover, usando a frame up (onde fica o botão de acesso á informação) e over com a segunda versão do desenho do papagaio.

Print25.jpg

As imagens acima representadas fazem parte de um movie clip construído na frame over do botão respectivo. Foi necessário desenhar três versões do rato para construir a animação do rato para recriar movimento.

Print18.jpg

Na casa da familia, a avó “adormece” ao fazer rollover no botão. Para isso acontecer foram usados dois desenhos, usando a frame up (onde fica o botão de acesso á informação) e over com a segunda versão do desenho da avó.

Na escola as animações/botões funcionam com o aumento da imagem, ao fazer rollover, chamando a atenção de que existe conteúdo no objecto. Temos em baixo o exemplo do quadro preto onde para além do botão que tem o conteúdo do quadro, também contém o botão dos números que passam a amarelo executando o rollover.

Print24.jpg


5. Produção do projecto


A aplicação está estruturada de forma simples e lógica: o utilizador tem de recorrer ao rato para a explorar.

Esta aplicação começa com Bia a voar, trazendo consigo o título do projecto, mostrando, de seguida, o ecrã principal da cidade, no canto superior direito o menu com três botões (que vão estar presentes em todos os ecrãs da aplicação e que permitem sair da aplicação, o acesso à ajuda e para/reproduzir som).

As portas de cada edifício estão sempre presentes nos ecrãs, servindo de entrada e saída dos mesmos. Ao passar o rato sobre cada uma das portas, estas abrem-se.

Ecrãs

Aplicação family.jpg
Cidade final.jpg
Sala aula final.jpg
LojaAnimais3.jpg

Caixa de Diálogos

Balao.jpg
Balao sair.jpg
Balão ajuda.jpg


Música de fundo:

Visto que existem várias cenas, a música de fundo teve que ser integrada através de uma variável global. Este tipo de programação ActionScript 2.0 não foi leccionada nas aulas, pelo que o grupo teve de recorrer a outros meios.

A existência da variável global justifica-se pelo facto de a música à saída de qualquer um dos cenários se sobrepor, e de cada cena ter um menu diferente, o que dificultava a programação dos botões.

Assim, se a música estiver a reproduzir, o botão para coloca-lo off está visível, pelo contrário, quando o som está parado, o botão visível é para colocá-lo on.

Print1.png


Botões som on/off

On

Print2.png

Off

Print2.png

Caixas de diálogo

Todos os sons, à excepção dos sons ‘números’, ‘numbers’ na sala de aula e som do botão de ajuda, foram introduzidos por arraste da library para a frame de botão down. Decidimos introduzir os sons por arraste, por serem sons curtos, o que não justificava a criação de variáveis.

Os sons ‘números’ e ‘numbers’ foram introduzidos através de variáveis, devido à sua extensão.

Sons curtos

Print3.png

Som ‘numbers’ start

Print4.png

Sons ‘números’ e’ numbers’ variável

Print5.png

Som ajuda variável

Print6.png

O botão de fechar as caixas de diálogo tem também o código referente ao som de fundo, visto que quando abrimos uma dessas caixas a música pára, para o utilizador conseguir ouvir perfeitamente as palavras referentes ao elemento. Assim, quando fechamos uma caixa de diálogo, a música de fundo recomeça, caso o botão de som esteja programado para reproduzir, caso contrário, esta mantêm-se off.

Parar som ao abrir caixa de diálogo

Print7.png

Programação para reproduzir ou não a música de fundo ao fechar a caixa de diálogo

Print8.png

Sons rollover

Na loja de animais, alguns destes ao fazer rollover produzem um som, estes foram introduzidos da mesma forma que os sons curtos das caixas de diálogo (arraste). Desta vez, os sons foram arrastados para a frame over e não down.

Print9.png


Animação inicial

A aplicação inicia com um movie clip, usando a imagem da nossa mascote, a abelha Bia.

No movie clip inicial usamos, motion tweens de posição e de alpha, para que a mascote voe pelo cenário, seguindo, logo atrás de si, o nome da aplicação.

Decidimos colocar todas as variáveis de som na primeira frame, desta cena, visto que é uma frame a que não retomamos, e, por isso, não causará problemas com o som de fundo. Colocámos, também, o código de fullscreen. No que diz respeito ao código de fullscreen, tivemos de fazer uma alteração nas layers na animação inicial, transformando-as em mask.


Exemplo

Print10.png

Variáveis

Print11.png


Ecrã principal – cidade

Este ecrã funciona como menu principal que dá acesso aos ecrãs secundários.

Cada porta dos edifícios serve como botão de acesso aos outros cenários e, ao rollover nas portas, estas ficam abertas, para reforçar a sua função.


Acesso à sala de aula

Print12.png


Ecrãs secundários – sala de aula, casa e loja de animais

Cada ecrã secundário é constituído por diversos botões, todos eles com reacção ao rollover. Quando clicados abrem uma caixa de diálogo que disponibiliza a apalavra correspondente em português e inglês e os respectivos sons.


Exemplo de programação para abrir caixa de diálogo

Print13.png


Portas

Em todos os cenários, há uma porta que serve para nos levar de volta ao ecrã principal.

Na sua programação, tem também um stop da música de fundo, para evitar a sobreposição da mesma.

Print14.png



Movie clips

De forma a evitar que, quando uma caixa de diálogo está aberta os botões sejam clicáveis, criamos um movie clip de cada botão, que colocamos numa layer diferente, com o alpha a 0% que se torna visível ao abrir a caixa de diálogo. Quando fechamos essa caixa de diálogo, esta volta à forma inicial.


Exemplo de programação ao clique num botão

Print15.png


Exemplo de programação ao clique no botão de saída de uma caixa de diálogo

Print16.png


Exemplo da distribuição de layers botão/movie clip (selec)

Print17.png


6. Conclusões

Elaborado o projecto, concluímos os objectivos a que nos propusemos inicialmente. Em Action Script 2.0 aplicamos conhecimentos adquiridos nas aulas, recorremos a ajuda na Web, dos professores Ana Carla Amaro e Hélder Caixinha bem como dos colegas de outras turmas.


Sentimo-nos limitados aos conhecimentos de programação, daí termos pedido ajuda extra a professores, colegas e pesquisa na Web, isto também foi importante, para permitir conhecer outro tipo de programação.

A falta de diálogo entre os elementos, atrasou todo o trabalho, apesar de ter havido trabalho durante as férias de natal, pelo menos do logótipo e mascote, a aplicação e as ideias deveriam ter continuado durante as férias, uma vez que dois elementos do grupo são trabalhadores-estudantes.


Ana Rita Regatão

Depois de desenvolver todo este projecto, irei redigir uma hetero-avaliação.

Alexandra Guedes: A Alexandra ficou encarregue da animação e programação da casa de família, do menu (três botões; presente em todos os cenários) e de juntar todos os ficheiros Flash.

Considero que a Alexandra foi um elemento fundamental na realização desta parte do projecto.

Isabel Matos: A Isabel ficou responsável de animar e programar a loja de animais. Apesar de finalizar o seu trabalho a tempo da entrega, foi o membro que trabalhou a um ritmo mais lento. Essa demora fez com que todo o projecto, na fase final, andasse de forma mais lenta. Por vezes a sua atitude não era a melhor para com as colegas, embora ela não concorde com tal opinião.

Mónica Azevedo: A Mónica ficou encarregue de fazer a animação inicial e arborescência. Acabou todas as suas tarefas a tempo, pelo que iniciou o relatório antes de todos os elementos.

Assim, este projecto serviu para nos habituarmos aos diferentes ritmos de trabalho dos membros do grupo, visto que duas de nós são trabalhadoras-estudantes o horário para estarmos reunidas era dependente do horário de trabalho.


Alexandra Guedes

Nesta reflexão vou introduzir uma auto e hetero avaliação do grupo visto que nem sempre funcionou da melhor forma.

Desde inicio que houve uma certa dificuldade em termos de comunicação entre o grupo, os elementos não se conheciam, têm idades diferentes, dois deles são trabalhadores estudantes e tudo isto afectou de certo modo o funcionamento do grupo.

Os diferentes elementos do grupo tiveram tarefas diferentes e foram cumpridas de formas diferentes. Enquanto que eu, a Rita e a Isabel ficamos encarregues de animar cenários, a Mónica fez a animação inicial e o relatório.

Quanto a mim e à Rita considero que conseguimos cumprir os prazos com sucesso e apesar de todas as dificuldades que tivemos com a programação conseguimos supera-las através de pesquisa.

A Isabel animou o seu cenário, concluiu antes do prazo de entrega, contudo foi concebido a um ritmo mais lento o que de certa forma atrasou o projecto. A sua atitude também não foi a melhor o que não facilitou ajuda-la com as suas dificuldades. A Mónica, apesar de não ter feito programação, fez a arborescência e a animação inicial e adiantou o relatório final o que foi uma grande ajuda.

Considero que não foi fácil lidar com as dificuldades encontradas, nomeadamente os diferentes horários e ritmos de trabalho. Cada elemento deveria ter a noção das suas capacidades e das suas limitações e tirar proveito disso, o que nem sempre aconteceu.


Mónica Azevedo e Isabel Matos

Durante a realização deste projecto, surgiram alguns conflitos, devido a não terem sido definidos, logo de início, estratégias para que todo o trabalho fosse uniforme, e a falta de diálogo no início, foi o culminar de alguns desentendimentos com elementos do grupo, o que não deveria acontecer, uma vez que se somos um grupo, devíamos ser unidos, ajudarmo-nos mutuamente e não ser individualistas, apesar de tudo, foi uma experiência gratificante na medida em que com isto aprendemos a lidar com outras pessoas, com idades diferentes e ideias.

Retrieved from "http://wikis.ua.pt/lab1ide/index.php?title=Projecto_IDE-LAB_Aprender_Ingl%C3%AAs"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox