Projecto IDE-LAB Aprender Inglês
From LABMM1_IDE
| Line 410: | Line 410: | ||
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. | 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. | ||
| + | |||
| + | |||
| + | *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]] | ||
Revision as of 22:27, 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
 |
 |
 |
 |
 |
 |
 |
- Fontes e inspirações para desenhar
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
 |
 |
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
Elementos de Identidade
Mascote_frente, lateral, voar e a chorar
 |
 |
 |
 |
Protótipos para logotipo
 |
 |
 |
 |
 |
Logótipo final
 |
Logótipo com margem de segurança
 |
Logótipo a preto-e-branco
 |
Caixas de diálogo
 |
 |
 |
Menu
 |
Opções Tipográficas
Tipografia Principal Título - Cooper Std
Tipografia Secundária Caixas de diálogo - Arial
Cenários
 |
 |
 |
 |
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
- 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.
---
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.
|
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.
---
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:
---
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:
---
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.
---
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.
---
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.
---
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.
- 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.
