Utilizador:Ocean voice
(→Estudo para a estrutura da aplicação) |
(→Diário de Bordo) |
||
| (23 edições intermédias de 4 utilizadores não apresentadas) | |||
| Linha 23: | Linha 23: | ||
'''1.Apresentação Projeto''' | '''1.Apresentação Projeto''' | ||
| − | No âmbito das unidades curriculares de Laboratório Multimédia 1 e Imagem Digital Estática, | + | No âmbito das unidades curriculares de Laboratório Multimédia 1 e Imagem Digital Estática, realizou-se um projeto, onde o nosso tema de enfoque é o Oceanário, e através do qual desenvolvemos um Quiosque Multimédia. |
| − | Esta aplicação é destinada a crianças | + | Esta aplicação é destinada a crianças de uma faixa étaria dos 3 aos 8 anos, como tal todo o nosso projeto foi pensado e estruturado tendo em conta as necessidades, as limitações e os interesses deste mesmo público. |
| − | + | Desenvolveu-se uma aplicação baseada na cor e na sobriedade acompanhada de sons e narrações. | |
'''2.Análise e Planeamento''' | '''2.Análise e Planeamento''' | ||
| − | A aplicação foi desenvolvida | + | A aplicação foi desenvolvida enquanto quiosque interativo a ser integrado no 'Oceanário' de forma a permitir uma exploração interativa aos visitantes, sendo o público infantil de faixa etária compreendida entre os 3 e os 8 anos de idade o nosso público alvo. Esta aplicação tem como objectivo permitir aos utilizadores adquirirem conhecimentos sobre os seres que habitam o fundo do mar, focando-se nas águas temperadas do pacífico. |
Aqui apresentamos alguns dos sites e aplicações que nos serviram de base para a elaboração e estruturação do quiosque de multimédia: | Aqui apresentamos alguns dos sites e aplicações que nos serviram de base para a elaboração e estruturação do quiosque de multimédia: | ||
| Linha 91: | Linha 91: | ||
[[Ficheiro:Jogo.PNG]][[Ficheiro:Jogo_1.PNG]] | [[Ficheiro:Jogo.PNG]][[Ficheiro:Jogo_1.PNG]] | ||
| − | Desta forma e tendo em conta a investigação por nós efetuada, foram escolhidas cores que despertassem a atenção do público alvo, tal como uma linguagem adequada à faixa etária que pretendemos atingir | + | Desta forma e tendo em conta a investigação por nós efetuada, foram escolhidas cores que despertassem a atenção do público alvo, tal como uma linguagem adequada à faixa etária que pretendemos atingir. |
| − | A criação de figuras dinâmicas e expressivas foi o nosso principal objetivo, de forma a despertar a curiosidade e o interesse visual das crianças, | + | A criação de figuras dinâmicas e expressivas foi o nosso principal objetivo, de forma a despertar a curiosidade e o interesse visual das crianças, conduzindo-as à interacção. |
| − | + | Para isto, foi criada uma personagem de seu nome Matias que interpreta o papel de guia que acompanha o visitante na viagem ao 'Oceanário'. A personagem fornece informações sobre os seres vivos presentes nos diferentes habitats criados nos aquários do oceanário. | |
| − | Apesar de todos os animais presentes no stage serem | + | Apesar de todos os animais presentes no stage serem selecionáveis, apenas o cavalo-marinho (Gugas) é susceptível de ser explorado e dissecado. Já todos os outros seres vivos apresentarão apenas a sua imagem quando selecionados. Esta decisão foi tomada em conjunto com o professor Mário Vairinhos responsável pela disciplina de Imagem Digital Estática, que sugeriu que se explorasse apenas um ser vivo. |
| Linha 100: | Linha 100: | ||
<br> | <br> | ||
<br> | <br> | ||
| − | *Mostrar aos mais novos que aprender pode | + | *Mostrar aos mais novos que aprender pode ter um carácter lúdico; |
| − | *Dar a conhecer as características do cavalo marinho | + | *Dar a conhecer as características do cavalo marinho; |
| − | *Despertar interesse sobre os oceanos | + | *Despertar interesse sobre os oceanos; |
| − | *Dinamizar o espaço onde a aplicação estaria inserida | + | *Dinamizar o espaço onde a aplicação estaria inserida; |
| − | *Instruir os mais novos acerca da cultura dos oceanos | + | *Instruir os mais novos acerca da cultura dos oceanos; |
| − | + | ||
| − | + | ||
== Estudo para a estrutura da aplicação == | == Estudo para a estrutura da aplicação == | ||
| − | Estes esquemas são uma planificação da | + | Estes esquemas são uma planificação da nossa aplicação, de forma a nos organizarmos, e elaborarmos uma aplicação funcional. |
Assim utilizamos os três paradigmas de interação que foram estudados, o index nos cenários principal e secundário, na medida em que existe informação indexada. Já no Quiz podemos considerar que existe tutorial pois quando nos encontramos na primeira questão não conseguimos avançar para a última sem ter que passar obrigatoriamente por todas as outras questões que se encontram entre a primeira e a última. | Assim utilizamos os três paradigmas de interação que foram estudados, o index nos cenários principal e secundário, na medida em que existe informação indexada. Já no Quiz podemos considerar que existe tutorial pois quando nos encontramos na primeira questão não conseguimos avançar para a última sem ter que passar obrigatoriamente por todas as outras questões que se encontram entre a primeira e a última. | ||
No que diz respeito ao paradigma de interação ambiente também se encontra presente na medida em que existem botões e ícones embebidos/esondidos na interface. | No que diz respeito ao paradigma de interação ambiente também se encontra presente na medida em que existem botões e ícones embebidos/esondidos na interface. | ||
| Linha 125: | Linha 123: | ||
'''a. Requisitos Funcionais:''' | '''a. Requisitos Funcionais:''' | ||
| − | Neste ponto | + | Neste ponto tentámos ao máximo ter em conta o público alvo e o objetivo para o qual a aplicação foi concebida, tentando torná-la o mais funcional e prática possivel. |
| − | O primeiro contacto com a aplicação é | + | O primeiro contacto com a aplicação é feito através de um genérico que procura despertar o interesse dos mais novos, aparecendo assim dois pequenos peixes que trazem com eles as boas vindas ao oceanário. Com estes peixes procuramos utilizar cores alegres, que despertassem o interesse por parte dos mais novos. |
| − | Assim, neste cenário não temos disponivel nenhum botão, é importante | + | Assim, neste cenário não temos disponivel nenhum botão específico. Porém, é importante referir que todo o cenário é selecionável, possibilitando assim o avanço para o cenário seguinte. |
| − | Em seguida, | + | Em seguida, surge uma breve apresentação do guia desta pequena viagem pelo Oceanário, que estará presente em toda a aplicação, guiando assim as crianças, auxiliando-as assim com narrações das informações/indicações que vão surgindo escritas, pois todos os textos estão acompanhados pela sua voz. Neste cenário existe apenas um botão de "saltar intro" representado por uma seta. |
| − | Já no terceiro cenário, e cena de repouso | + | Já no terceiro cenário, e cena de repouso existe uma barra oculta. Esta barra contém diversas palavras selecionáveis, que nos direcionam para páginas associadas aos seres vivos presentes no stage. |
| − | Contudo estão ainda presentes no ecrã no canto superior direito três botões | + | Contudo estão ainda presentes no ecrã no canto superior direito três botões (de cima para baixo): o botão de "sair" representado com um botão de desligar e que permite sair da aplicação; o botão de "ligar/desligar" o som, representado por um altifalante; e o botão de "ajuda" representado por um ponto de interrogação. |
No ultimo cenário, continuamos a ter "presente" a barra oculta, que funciona como no cenário anterior, aqui conforme as escolhas tomadas no cenário antecedente teremos no caso do cavalo marinho, seis botões selecionaveis, sendo eles "Alimentação", "Família", "Anatomia", "Habitat", "Jogos", e "Videos". | No ultimo cenário, continuamos a ter "presente" a barra oculta, que funciona como no cenário anterior, aqui conforme as escolhas tomadas no cenário antecedente teremos no caso do cavalo marinho, seis botões selecionaveis, sendo eles "Alimentação", "Família", "Anatomia", "Habitat", "Jogos", e "Videos". | ||
| − | |||
Temos ainda presentes no lado superior direito o botão de "sair", o botão de "ligar/desligar" o som, o botão de "voltar" ao cenário anterior e ainda o botão de "ajuda". | Temos ainda presentes no lado superior direito o botão de "sair", o botão de "ligar/desligar" o som, o botão de "voltar" ao cenário anterior e ainda o botão de "ajuda". | ||
| + | |||
| + | |||
| + | [[Ficheiro:Ligações.PNG|800px]] | ||
| + | |||
| Linha 145: | Linha 146: | ||
| − | Apartir do primeiro cenário após a introdução temos a possibilidade de selecionar qual o ser vivo que pretendemos explorar, depois aberta a página do animal selecionada, podemos regressar ao cenário de repouso. | + | Apartir do primeiro cenário após a introdução temos a possibilidade de selecionar qual o ser vivo que pretendemos explorar, depois de aberta a página do animal selecionada, podemos regressar ao cenário de repouso. |
Se escolhermos o cavalo marinho podemos então selecionar os botões ja especificados, ou então regressar ao cenário de repouso. | Se escolhermos o cavalo marinho podemos então selecionar os botões ja especificados, ou então regressar ao cenário de repouso. | ||
| Linha 151: | Linha 152: | ||
'''c.Desenho de interação e usabilidade''' | '''c.Desenho de interação e usabilidade''' | ||
| − | Antes procedermos | + | Antes de procedermos à elaboração do projeto passámos por diversas etapas, entre as quais a discussão e analise das melhores soluções gráficas, estéticas, e funcionais para esta aplicação. |
| − | Assim, após a escolha de um tema | + | Assim, após a escolha de um tema foi-nos possível perceber os parâmetros a ter em conta. Fatores como o público alvo, problemas que podem existir pelo facto de esta aplicação ser destinada a crianças, e ainda a facilidade de interação, e interpretação dos elementos constituintes da aplicação. |
| − | Fatores como o público alvo,problemas que podem existir pelo facto de esta aplicação ser destinada a crianças, e ainda a facilidade de interação, e interpretação dos elementos constituintes da aplicação. | + | |
| − | Numa fase inicial do desenho funcional, revelou-se pertinente a existência de botões, janelas, caixas de diálogo, e menus, | + | Numa fase inicial do desenho funcional, revelou-se pertinente a existência de botões, janelas, caixas de diálogo, e menus, de forma a facilitar a interação, e a navegação ao longo de toda a aplicação. |
| − | + | O facto de o nosso publico alvo serem crianças, sugeriu-nos que utilizassemos linguagem acessível para a parte do público capaz de ler e implementou-se, ainda, audio para os que não são ainda capazes de o fazer. | |
| + | Procurámos assim criar um ambiente rico em cores, utilizando ilustrações expressivas, que despertassem nas crianças o desejo de lhes 'tocar' e de interagir. | ||
| + | Para este efeito tentámos pereceber quais seriam as necessidades não só das crianças mas também dos acompanhantes destas na visita ao 'Oceanário', disponobilizando assim botões como o "saltar intro" que possibilita isso mesmo, e que se destina a esses mesmos acompanhantes que, hipoteticamente, poderiam já ter utilizado a aplicação anteriormente não tendo então a necessidade de ver a introdução novamente. | ||
| + | Outro botão criado foi ainda o de "ajuda" pronto a esclarecer dúvidas que podem surgir. | ||
| + | Procuramos ainda criar uma dinâmica no cenário, através de elementos como uma moreia que surge de entre as rochas, e uma concha que se abre com auxílio de um 'rollover'. | ||
| − | + | Posto isto e tendo em conta os factores psicológicos, emocionais e cognitivos do público alvo em questão e os princípios básicos do desenho de interacção e interfaces para a promoção e avaliação da usabilidade, foi possível o desenvolvimento de adequadas concepções, desenhos, implementações e avaliações da estrutura, os percursos, as formas e os meios de navegação ou de interacção. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| Linha 186: | Linha 186: | ||
'''a. Estrutura e meios de navegação/Interacção''' | '''a. Estrutura e meios de navegação/Interacção''' | ||
| − | A navegação e | + | A navegação e interação na nossa aplicação é realizada através botões, caixas de diálogo,janelas, e icones selecionaveis, desta forma o utilizador pode selecionar o percurso que quer realizar. |
'''b.Integração e controlo de som''' | '''b.Integração e controlo de som''' | ||
| Linha 194: | Linha 194: | ||
'''c.Integração de vídeo''' | '''c.Integração de vídeo''' | ||
| − | Para a integração de vídeo utilizamos o Adobe | + | Para a integração de vídeo utilizamos o Adobe Premiere CS5, editando assim o único vídeo presente em toda a aplicação, por forma a ter o audio que pretendiamos, e ainda o nome do nosso grupo, o ficheiro foi exportado em .flv, e assim importado para o flash sem problemas. |
| Linha 204: | Linha 204: | ||
| − | - A nível de organização do projeto tivemos algumas dificuldades na organização da library | + | - A nível de organização do projeto tivemos algumas dificuldades na organização da library devido à grande quantidade de pastas existentes; |
| − | + | - O que suscitou mais dificuldade foram os jogos, na medida em que não temos formação suficiente em AS2 para os desenvolvermos da forma que seria desejada. Contudo conseguimos contornar este problema através da consulta de informação à disposição em fórums, páginas web genéricas ou no youtube. O principal objectivo deste jogo 'pergunta-resposta' com contabilização de pontos é de carácter formativo, avaliando os conhecimentos adquiridos ao longo da exploração da aplicação. As perguntas debruçam-se um pouco por todos as áreas abordadas acerca do Cavalo Marinho. Ao utilizador é dirigida uma pergunta e 3 opções de resposta (com apenas uma opção correcta). Por cada resposta correcta, o utilizador ganha 1 ponto. A pontuação máxima será de 4 pontos (uma vez que existem 4 perguntas ao longo do Quiz). Consoante a pontuação é atribuído no final (a juntar à pontuação um comentário sobre a prestação do utilizador. | |
| − | + | ||
| − | + | ||
| − | - O que suscitou mais dificuldade foram os jogos, na medida em que não temos formação suficiente em AS2 para | + | |
Para o desenvolvimento deste jogo em particular, e no que diz respeito ao emprego de código AS2 foi necessário declarar uma variável que permitisse contabilizar os pontos; utilizar «goto's» para que o utilizador progrida dentro do Quiz e ainda a associação de uma segunda variável ao texto para que as mensagens surjam de acordo com os pontos adquiridos (bem como a utilização de if's para que se associe a uma determinada pontuação, uma mensagem específica). | Para o desenvolvimento deste jogo em particular, e no que diz respeito ao emprego de código AS2 foi necessário declarar uma variável que permitisse contabilizar os pontos; utilizar «goto's» para que o utilizador progrida dentro do Quiz e ainda a associação de uma segunda variável ao texto para que as mensagens surjam de acordo com os pontos adquiridos (bem como a utilização de if's para que se associe a uma determinada pontuação, uma mensagem específica). | ||
- Após uma pesquisa a fundo conseguimos reunir, compilar e compreender o código necessário para desenvolver um jogo do género 'drag'n'drop'. O jogo foi desenvolvido com o objectivo de consolidar os conhecimentos transmitidos acerca da alimentação dos cavalos marinhos. É sugerido aos utilizadores que selecionem dentro dum conjunto de opções, os alimentos que fazem parte do regime alimentar dos cavalos marinhos. Existirão 3 opções incorrectas e 2 correctas. Ao arrastar as 2 opções correctas (seguidas!) o utilizador vence o jogo. Caso arraste (em qualquer altura) uma das opções incorrectas terá de recomeçar o jogo. No que concerne ao código (as2) foi necessário recorrer a informação disponível na web visto que o que foi lecionado durante as aulas de Laboratório Multimédia I não abordavam o necessário para o desenvolvimento do jogo em questão. | - Após uma pesquisa a fundo conseguimos reunir, compilar e compreender o código necessário para desenvolver um jogo do género 'drag'n'drop'. O jogo foi desenvolvido com o objectivo de consolidar os conhecimentos transmitidos acerca da alimentação dos cavalos marinhos. É sugerido aos utilizadores que selecionem dentro dum conjunto de opções, os alimentos que fazem parte do regime alimentar dos cavalos marinhos. Existirão 3 opções incorrectas e 2 correctas. Ao arrastar as 2 opções correctas (seguidas!) o utilizador vence o jogo. Caso arraste (em qualquer altura) uma das opções incorrectas terá de recomeçar o jogo. No que concerne ao código (as2) foi necessário recorrer a informação disponível na web visto que o que foi lecionado durante as aulas de Laboratório Multimédia I não abordavam o necessário para o desenvolvimento do jogo em questão. | ||
| − | + | Foram aplicados linhas de código relacionadas com 'rollovers' (para aumentas a escala dos objectos aquando da sua selecção); if's (para: 'caso' o utilizador larga o objecto aqui surtirá o seguinte efeito...) e else's (ao 'dropar' o objecto em outro local que não o permitido acontecerá o seguinte; neste caso regressará ao local inical de selecção). Foram definidas ainda variáveis para que seja possível fazer a contabilização dos pontos (que se relaciona directamente com o local onde o utilizador larga o objecto). | |
| − | - O inico da aplicação é apresentado por um modo de repouso desenvolvido em movieclip que apresenta através uma frase de boas vindas (“Bem-vindos ao Oceanário”) que é introduzida no ecrã pela entrada de dois peixes, ambos os seus movimentos foram criados através de | + | - O inico da aplicação é apresentado por um modo de repouso desenvolvido em movieclip que apresenta através uma frase de boas vindas (“Bem-vindos ao Oceanário”) que é introduzida no ecrã pela entrada de dois peixes, ambos os seus movimentos foram criados através de guide-layers que determinam o percurso das mesmas no ecrã até ao ponto final onde param e permanecem no mesmo sítio, permitindo uma melhor leitura ao utilizador. Este movimento de entrada da nota de boas-vindas irá repetir-se até que o utilizador interaja com a aplicação. |
| − | + | Para a personagem Matias foram criados Motion Tweens que permitiram aproximar a sua cara no momento da sua apresentação e a criação do movimento dos lábios correspondentes aos sons que reproduz na explicação das informações. Para além de explicar as diferentes informações do cavalo-marinho, Matias, ajuda o visitante a explorar a plataforma de multimédia, como por exemplo, a navegar nas diferentes opções disponíveis para o utilizador. | |
O habitat correspondente ao cenário 2, onde estão presentes as enumeras espécies, que corresponde a um ambiente de um aquário do oceanário. Este ambiente foi preenchido e animado por diferentes movimentos associados aos elementos presentes no habitat. Como por exemplo, o movimento de deslocamento dos peixes, produzido através de motiontweens, o movimento das barbatanas, criado nos respectivos movieclips associados ao peixe em questão e o rollover associado à pérola e à moreia a sair da gruta. | O habitat correspondente ao cenário 2, onde estão presentes as enumeras espécies, que corresponde a um ambiente de um aquário do oceanário. Este ambiente foi preenchido e animado por diferentes movimentos associados aos elementos presentes no habitat. Como por exemplo, o movimento de deslocamento dos peixes, produzido através de motiontweens, o movimento das barbatanas, criado nos respectivos movieclips associados ao peixe em questão e o rollover associado à pérola e à moreia a sair da gruta. | ||
| + | |||
| + | |||
| + | |||
| + | - Para uma mais fácil e cómoda navegação entre as partes do nosso movie, pensámos em criar uma barra que estaria oculta e que poderíamos utilizada a todo o momento com um simples rollOver num puxador que estaria disposto no topo do stage. | ||
| + | Como era uma tarefa que ainda não dominávamos, procurámos informação sobre esse tema em diversas fontes, no caso Youtube e Google. Também consultámos o professor Hélder Caixinha para que nos orientasse. O professor indicou-nos dois sites com diferentes formas de fazer essa barra oculta. | ||
| + | Depois de avaliadas as formas de execução e experimentadas, concluiu-se que poderia ser feito de uma forma mais fácil sem termos de recorrer a acções de script que ainda não dominávamos. Foi então que pensámos em realizar essa barra através das funcionalidades do Adobe Flash: buttons e movieclips. | ||
| + | Efectuámos diversas operações de testes de actividade, mas foi mesmo com recurso a movieclips que surgiu a nossa barra oculta. | ||
| + | Através do rollOver num botão, a que chamámos 'Puxador', ativávamos a funcionalidade de fazer descer uma barra com a integração de motion tweens. Quando aberta, esta barra teria à disponibilidade do utilizador onze diferentes botões, cada um corresponderia a um dos seres vivos que escolhemos para a aplicação. | ||
| + | Foi então que começaram a surgir os primeiros erros nesta actividade, entre eles os rollOvers ou os rollOuts que não estavam sincronizados ou então a existência indevida dos mesmos. Um exemplo disto, era fazermos rollOut de um botão, a barra deveria fechar se o ponteiro do rato, saísse de cima da barra. Isto por vezes não acontecia e portanto, sentimos a necessidade de criar como que um botão invisível que obrigasse a barra a fechar quando o utilizador saísse das opções da mesma e se decidisse por navegar de outra forma. | ||
| + | Com o primeiro problema resolvido, surgem outros como é recorrente em qualquer trabalho. Neste momento, tínhamos o movimento da barra bem construído e foi então que detectámos que os botões quando seleccionados deveriam perder a sua funcionalidade para não causar complicações ao nível da navegação. Foi então que decidimos criar uma barra para cada uma das espécies transformando os botões em símbolos, fazendo com que estes não sejam clicáveis, mantendo o utilizador no local onde pretende estar. | ||
| + | Com estes erros aprendemos que não devemos dar imensa liberdade ao utilizador pois poderá levar a que este se perca entre funcionalidades. | ||
| + | |||
| + | Programação de barras e menus | ||
| + | |||
| + | - http://www.youtube.com/watch?v=GtTV-yhTFDg | ||
| + | |||
| + | - http://www.developingwebs.net/flash/invisiblebuttons.php | ||
| + | |||
| + | - http://www.free-webmaster-resource.com/tutorials/flash/basics/tutorial003/index.php?tutorial_id=463&tPage=1 | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | '''6.Conclusões''' | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | '''a.Reflexão Critica''' | ||
| + | |||
| + | Após a finalização do projeto, procedeu-se à análise critica da aplicação que criámos. | ||
| + | Assim podemos concluir que apesar de terem surgido algumas dificuldades ao longo do desenvolvimento da criação da aplicação, especialmente com a programação dos jogos, foi possível solucionar esses problemas e obter um resultado que vá de encontro ao que inicialmente se estipulou como o pretendido. | ||
| + | |||
| + | A entre-ajuda e o espirito de companheirismo foi essencial no desenvolvimento do nosso trabalho, pois assim se esclareceram dúvidas, foram feitas críticas e se contornaram dificuldades. | ||
| + | |||
| + | Crêmos que apesar das divergências incontornáveis de qualquer grupo de trabalho, funcionámos de forma coesa e equilibrada o que facilitou o desenrolar do projeto. | ||
| + | |||
| + | '''b.Sugestões para o aperfeiçõamento e/ou desenvolvimento do futuro projeto''' | ||
| + | |||
| + | - O aperfeiçoamento que julgamos necessário prende-se com jogo drag'and'drop que se mostra limitado em alguns aspectos devido ao nosso conhecimento algo escasso para a sua concretização. | ||
| + | |||
| + | - No que toca ao resto da aplicação, efetuámos diversas alterações ao longo do seu desenvolvimento, nomeadamente na substituição de diversos motion tweens por movie clips para a criar a sensação de movimento e, também, de guide-layers para a definição do percurso que os seres vivos iriam tomar. | ||
== Diário de Bordo == | == Diário de Bordo == | ||
| + | '''13Janeiro''' | ||
| + | |||
| + | De forma a concluir o projecto foi organizada a biblioteca do ficheiro .fla; criaram-se os créditos; fizeram-se testes à aplicação em si (alterando-se ainda alguns erros que pressistiam); gravou-se o ficheiro .exe em cd e criou-se a capa (procedendo-se, também, à sua impressão). | ||
| + | |||
| + | '''12Janeiro''' | ||
| + | |||
| + | Foram terminados os 'últimos retoques' ao ficheiro .fla final: correcção de alguns pequenos bugs ocasionais; correcção de coordenadas dos alimentos de um dos jogos; correcção de guide layers e de algumas imperfeições do 'ambiente dos peixes' da aplicação e foram ainda gravadas novamente (desta vez em estúdio) algumas das vozes que narram os textos presentes na aplicação, e integração da mesma do documento fla. | ||
'''11Janeiro''' | '''11Janeiro''' | ||
| Linha 294: | Linha 340: | ||
Neste dia, o grupo juntou-se para discutir o tema a tratar no projeto final. | Neste dia, o grupo juntou-se para discutir o tema a tratar no projeto final. | ||
Em conjunto decidimos elaborar o projeto sobre o “Oceanário” por ser um tema que agrada a todos os elementos e por ser apelativo á facha etária com que queremos trabalhar | Em conjunto decidimos elaborar o projeto sobre o “Oceanário” por ser um tema que agrada a todos os elementos e por ser apelativo á facha etária com que queremos trabalhar | ||
| − | |||
| − | |||
==Divisão de tarefas/Questões gráficas/visuais== | ==Divisão de tarefas/Questões gráficas/visuais== | ||
| Linha 305: | Linha 349: | ||
- Organização e estruturação do projecto. | - Organização e estruturação do projecto. | ||
| − | - Vectorização | + | - Vectorização de elementos visuais |
| − | - | + | - Pesquisa Visual. |
- Desenvolvimento do relatório. | - Desenvolvimento do relatório. | ||
| − | - Animação. | + | - Animação do cenário de repouso e plataforma_matias. |
| + | |||
| + | - Atualização da wiki. | ||
| Linha 317: | Linha 363: | ||
| − | - | + | - Estruturação do layout; |
| + | |||
| + | - Vectorização dos fundos e vários elementos que compõe o mesmo e a restante aplicação; | ||
| + | |||
| + | - Pesquisa Visual; | ||
| − | - | + | - Contributo na animação; |
| − | - | + | - Escolha sonora; |
| − | - | + | - Tratamento de vídeo; |
| − | - | + | - Actualização da wiki. |
'''Maria Beatriz''' | '''Maria Beatriz''' | ||
| − | - Organização e estruturação do projecto | + | - Organização e estruturação do projecto; |
| − | - Vectorização de algumas personagens | + | - Vectorização de algumas personagens; |
| − | - | + | - Programação e incorporação do video; |
| − | - | + | - Animação do genérico e de outras partes do ambiente do aquário; |
| − | - Desenvolvimento do relatório. | + | - Desenvolvimento do relatório; |
| + | |||
| + | - Tratamento do som gravado em estúdio; | ||
| + | |||
| + | - Actualização da wiki. | ||
'''Rafael Guedes''' | '''Rafael Guedes''' | ||
| − | - Elaboração do relatório | + | - Elaboração do relatório; |
| − | - | + | - Pesquisa Visual; |
| − | - Vectorização de | + | - Vectorização de elementos dos jogos; |
| − | - Programação dos jogos | + | - Programação dos jogos; |
| − | - Desenvolvimento do relatório. | + | - Desenvolvimento do relatório; |
| + | |||
| + | - Actualização da wiki; | ||
| + | |||
| + | - Tratamento do som gravado em estúdio. | ||
'''Simão Cruz''' | '''Simão Cruz''' | ||
| − | - Estruturação do layout | + | - Estruturação do layout; |
| − | - Pesquisa Visual | + | - Pesquisa Visual; |
| − | - Vectorização de algumas | + | - Vectorização de algumas personagens; |
| − | - | + | - Tratamento do som gravado em estúdio; |
| − | + | - Implementação dos jogos na aplicação; | |
| + | - Programação geral da aplicação. | ||
| + | |||
| + | |||
| + | Nota:A estrutura do relatório foi discutida por todos, dando cada um a sua opinião, contribuindo todos para a sua concretização. | ||
== Evolução Visual do Projeto == | == Evolução Visual do Projeto == | ||
Edição actual desde as 03h42min de 14 de Janeiro de 2012
Índice |
O grupo
O Projecto
Neste projeto de desenvolvimento de uma aplicação multimédia interactiva iremos conjugar as temáticas estudadas em Labmm1 e ID-E, direccionando-as para o tema "Oceanário". Pretendemos criar uma aplicação tipo "Quiosque Multimédia" direccionado para crianças. Desta forma, os usuários poderão obter informações acerca da espécie peixe palhaço. Para isto, contam também com a ajuda da personagem Mergulhador Matias, desenvolvida a pensar numa forma de ajudar as crianças na navegação pelos conteúdos.
Alteração de personagem principal
Após uma troca de ideias com o professor de Imagem Digital Estática, chegamos a conclusão que seria benefico para o grupo não utilizarmos uma personagem que ja existia previamente, optando então por não utilizar o "Nemo" como personagem principal, passando a ser o cavalo marinho "Guga" a personagem de maior enfoque neste quiosque - interactivo.
Relatório Final
1.Apresentação Projeto
No âmbito das unidades curriculares de Laboratório Multimédia 1 e Imagem Digital Estática, realizou-se um projeto, onde o nosso tema de enfoque é o Oceanário, e através do qual desenvolvemos um Quiosque Multimédia. Esta aplicação é destinada a crianças de uma faixa étaria dos 3 aos 8 anos, como tal todo o nosso projeto foi pensado e estruturado tendo em conta as necessidades, as limitações e os interesses deste mesmo público.
Desenvolveu-se uma aplicação baseada na cor e na sobriedade acompanhada de sons e narrações.
2.Análise e Planeamento
A aplicação foi desenvolvida enquanto quiosque interativo a ser integrado no 'Oceanário' de forma a permitir uma exploração interativa aos visitantes, sendo o público infantil de faixa etária compreendida entre os 3 e os 8 anos de idade o nosso público alvo. Esta aplicação tem como objectivo permitir aos utilizadores adquirirem conhecimentos sobre os seres que habitam o fundo do mar, focando-se nas águas temperadas do pacífico.
Aqui apresentamos alguns dos sites e aplicações que nos serviram de base para a elaboração e estruturação do quiosque de multimédia:
Link’s :
Oceanários
- http://www.partteams.com/store/index_2010_v2.php
- http://http://www.visitsealife.com/
Quiosques Multimédia
- http://www.youtube.com/watch?v=a_ZDYCrlIhk
- http://www.youtube.com/watch?v=EBzt4s4GfzE&feature=related
Jogo Quiz
- http://stackoverflow.com/questions/1748711/flash-as2-quiz-with- individual-points-for-each-answer
- http://www.actionscript.org/forums/showthread.php3?t=200118
- http://www.actionscript.org/forums/showthread.php3?t=262691
- http://www.youtube.com/watch?v=FTo5ol78jmg
- http://www.youtube.com/watch?v=0v8PIawLCNc
- http://www.youtube.com/watch?v=fSDSa7oCdhs
- http://www.youtube.com/watch?v=nOJDIjsRyZc
Jogo Drag’n’Drop
- http://www.swinburne.edu.au/design/tutorials/P-flash/T-How-to-drag-and-drop-in-Flash/ID-37/
- http://www.flashvalley.com/fv_tutorials/advanced_drag_and_drop_in_Flash/
- http://fcontheweb.com/articles/drag_and_drop/
- http://www.actionscript.org/forums/showthread.php3?t=262489
- http://www.ozzu.com/flash-forum/as2-flash-game-drag-and-drop-t106752.html
- http://www.youtube.com/watch?v=ALqGYMsRWxw
- http://www.youtube.com/watch?v=n1d49YWNzvM
- http://www.youtube.com/watch?v=roGubzaSl8s
Jogos
Desta forma e tendo em conta a investigação por nós efetuada, foram escolhidas cores que despertassem a atenção do público alvo, tal como uma linguagem adequada à faixa etária que pretendemos atingir. A criação de figuras dinâmicas e expressivas foi o nosso principal objetivo, de forma a despertar a curiosidade e o interesse visual das crianças, conduzindo-as à interacção. Para isto, foi criada uma personagem de seu nome Matias que interpreta o papel de guia que acompanha o visitante na viagem ao 'Oceanário'. A personagem fornece informações sobre os seres vivos presentes nos diferentes habitats criados nos aquários do oceanário. Apesar de todos os animais presentes no stage serem selecionáveis, apenas o cavalo-marinho (Gugas) é susceptível de ser explorado e dissecado. Já todos os outros seres vivos apresentarão apenas a sua imagem quando selecionados. Esta decisão foi tomada em conjunto com o professor Mário Vairinhos responsável pela disciplina de Imagem Digital Estática, que sugeriu que se explorasse apenas um ser vivo.
Os objectivos específicos do projecto são:
- Mostrar aos mais novos que aprender pode ter um carácter lúdico;
- Dar a conhecer as características do cavalo marinho;
- Despertar interesse sobre os oceanos;
- Dinamizar o espaço onde a aplicação estaria inserida;
- Instruir os mais novos acerca da cultura dos oceanos;
Estudo para a estrutura da aplicação
Estes esquemas são uma planificação da nossa aplicação, de forma a nos organizarmos, e elaborarmos uma aplicação funcional. Assim utilizamos os três paradigmas de interação que foram estudados, o index nos cenários principal e secundário, na medida em que existe informação indexada. Já no Quiz podemos considerar que existe tutorial pois quando nos encontramos na primeira questão não conseguimos avançar para a última sem ter que passar obrigatoriamente por todas as outras questões que se encontram entre a primeira e a última. No que diz respeito ao paradigma de interação ambiente também se encontra presente na medida em que existem botões e ícones embebidos/esondidos na interface.
3.Desenho Funcional
a. Requisitos Funcionais:
Neste ponto tentámos ao máximo ter em conta o público alvo e o objetivo para o qual a aplicação foi concebida, tentando torná-la o mais funcional e prática possivel. O primeiro contacto com a aplicação é feito através de um genérico que procura despertar o interesse dos mais novos, aparecendo assim dois pequenos peixes que trazem com eles as boas vindas ao oceanário. Com estes peixes procuramos utilizar cores alegres, que despertassem o interesse por parte dos mais novos. Assim, neste cenário não temos disponivel nenhum botão específico. Porém, é importante referir que todo o cenário é selecionável, possibilitando assim o avanço para o cenário seguinte.
Em seguida, surge uma breve apresentação do guia desta pequena viagem pelo Oceanário, que estará presente em toda a aplicação, guiando assim as crianças, auxiliando-as assim com narrações das informações/indicações que vão surgindo escritas, pois todos os textos estão acompanhados pela sua voz. Neste cenário existe apenas um botão de "saltar intro" representado por uma seta.
Já no terceiro cenário, e cena de repouso existe uma barra oculta. Esta barra contém diversas palavras selecionáveis, que nos direcionam para páginas associadas aos seres vivos presentes no stage. Contudo estão ainda presentes no ecrã no canto superior direito três botões (de cima para baixo): o botão de "sair" representado com um botão de desligar e que permite sair da aplicação; o botão de "ligar/desligar" o som, representado por um altifalante; e o botão de "ajuda" representado por um ponto de interrogação.
No ultimo cenário, continuamos a ter "presente" a barra oculta, que funciona como no cenário anterior, aqui conforme as escolhas tomadas no cenário antecedente teremos no caso do cavalo marinho, seis botões selecionaveis, sendo eles "Alimentação", "Família", "Anatomia", "Habitat", "Jogos", e "Videos". Temos ainda presentes no lado superior direito o botão de "sair", o botão de "ligar/desligar" o som, o botão de "voltar" ao cenário anterior e ainda o botão de "ajuda".
b.Estrutura Arborescente
Apartir do primeiro cenário após a introdução temos a possibilidade de selecionar qual o ser vivo que pretendemos explorar, depois de aberta a página do animal selecionada, podemos regressar ao cenário de repouso.
Se escolhermos o cavalo marinho podemos então selecionar os botões ja especificados, ou então regressar ao cenário de repouso.
c.Desenho de interação e usabilidade
Antes de procedermos à elaboração do projeto passámos por diversas etapas, entre as quais a discussão e analise das melhores soluções gráficas, estéticas, e funcionais para esta aplicação. Assim, após a escolha de um tema foi-nos possível perceber os parâmetros a ter em conta. Fatores como o público alvo, problemas que podem existir pelo facto de esta aplicação ser destinada a crianças, e ainda a facilidade de interação, e interpretação dos elementos constituintes da aplicação.
Numa fase inicial do desenho funcional, revelou-se pertinente a existência de botões, janelas, caixas de diálogo, e menus, de forma a facilitar a interação, e a navegação ao longo de toda a aplicação. O facto de o nosso publico alvo serem crianças, sugeriu-nos que utilizassemos linguagem acessível para a parte do público capaz de ler e implementou-se, ainda, audio para os que não são ainda capazes de o fazer. Procurámos assim criar um ambiente rico em cores, utilizando ilustrações expressivas, que despertassem nas crianças o desejo de lhes 'tocar' e de interagir. Para este efeito tentámos pereceber quais seriam as necessidades não só das crianças mas também dos acompanhantes destas na visita ao 'Oceanário', disponobilizando assim botões como o "saltar intro" que possibilita isso mesmo, e que se destina a esses mesmos acompanhantes que, hipoteticamente, poderiam já ter utilizado a aplicação anteriormente não tendo então a necessidade de ver a introdução novamente. Outro botão criado foi ainda o de "ajuda" pronto a esclarecer dúvidas que podem surgir. Procuramos ainda criar uma dinâmica no cenário, através de elementos como uma moreia que surge de entre as rochas, e uma concha que se abre com auxílio de um 'rollover'.
Posto isto e tendo em conta os factores psicológicos, emocionais e cognitivos do público alvo em questão e os princípios básicos do desenho de interacção e interfaces para a promoção e avaliação da usabilidade, foi possível o desenvolvimento de adequadas concepções, desenhos, implementações e avaliações da estrutura, os percursos, as formas e os meios de navegação ou de interacção.
4.Desenho Técnico
Nesta fase, foi utilizado o Adobe Illustrator CS3, CS4 e CS5, como ferramenta para a elaboração de todos os elementos visuais, todos os cenários, personagens, animais, algas e rochas foram illustrados pelo grupo. Recorremos ainda ao tratamento de fotografias através do Adobe Photoshop CS3, CS4 e CS5, fotografias estas que estão integradas na aplicação. Usamos ainda o Audacity 2.0 para tratamento audio, e o Adobe Premiere para tratamento de vídeo.
5.Produção do Projeto
a. Estrutura e meios de navegação/Interacção
A navegação e interação na nossa aplicação é realizada através botões, caixas de diálogo,janelas, e icones selecionaveis, desta forma o utilizador pode selecionar o percurso que quer realizar.
b.Integração e controlo de som
Para a integração e controlo de som utilizamos essencialmente o Audacity 2.0, a nossa aplicação incopora som de fundo, e essencialmente falas, que tiveram de ter o devido tratamento para que ficassem com a melhor qualidade possivel.
c.Integração de vídeo
Para a integração de vídeo utilizamos o Adobe Premiere CS5, editando assim o único vídeo presente em toda a aplicação, por forma a ter o audio que pretendiamos, e ainda o nome do nosso grupo, o ficheiro foi exportado em .flv, e assim importado para o flash sem problemas.
e. Soluções técnicas adoptadas para a resolução de problemas.
- A nível de organização do projeto tivemos algumas dificuldades na organização da library devido à grande quantidade de pastas existentes;
- O que suscitou mais dificuldade foram os jogos, na medida em que não temos formação suficiente em AS2 para os desenvolvermos da forma que seria desejada. Contudo conseguimos contornar este problema através da consulta de informação à disposição em fórums, páginas web genéricas ou no youtube. O principal objectivo deste jogo 'pergunta-resposta' com contabilização de pontos é de carácter formativo, avaliando os conhecimentos adquiridos ao longo da exploração da aplicação. As perguntas debruçam-se um pouco por todos as áreas abordadas acerca do Cavalo Marinho. Ao utilizador é dirigida uma pergunta e 3 opções de resposta (com apenas uma opção correcta). Por cada resposta correcta, o utilizador ganha 1 ponto. A pontuação máxima será de 4 pontos (uma vez que existem 4 perguntas ao longo do Quiz). Consoante a pontuação é atribuído no final (a juntar à pontuação um comentário sobre a prestação do utilizador. Para o desenvolvimento deste jogo em particular, e no que diz respeito ao emprego de código AS2 foi necessário declarar uma variável que permitisse contabilizar os pontos; utilizar «goto's» para que o utilizador progrida dentro do Quiz e ainda a associação de uma segunda variável ao texto para que as mensagens surjam de acordo com os pontos adquiridos (bem como a utilização de if's para que se associe a uma determinada pontuação, uma mensagem específica).
- Após uma pesquisa a fundo conseguimos reunir, compilar e compreender o código necessário para desenvolver um jogo do género 'drag'n'drop'. O jogo foi desenvolvido com o objectivo de consolidar os conhecimentos transmitidos acerca da alimentação dos cavalos marinhos. É sugerido aos utilizadores que selecionem dentro dum conjunto de opções, os alimentos que fazem parte do regime alimentar dos cavalos marinhos. Existirão 3 opções incorrectas e 2 correctas. Ao arrastar as 2 opções correctas (seguidas!) o utilizador vence o jogo. Caso arraste (em qualquer altura) uma das opções incorrectas terá de recomeçar o jogo. No que concerne ao código (as2) foi necessário recorrer a informação disponível na web visto que o que foi lecionado durante as aulas de Laboratório Multimédia I não abordavam o necessário para o desenvolvimento do jogo em questão. Foram aplicados linhas de código relacionadas com 'rollovers' (para aumentas a escala dos objectos aquando da sua selecção); if's (para: 'caso' o utilizador larga o objecto aqui surtirá o seguinte efeito...) e else's (ao 'dropar' o objecto em outro local que não o permitido acontecerá o seguinte; neste caso regressará ao local inical de selecção). Foram definidas ainda variáveis para que seja possível fazer a contabilização dos pontos (que se relaciona directamente com o local onde o utilizador larga o objecto).
- O inico da aplicação é apresentado por um modo de repouso desenvolvido em movieclip que apresenta através uma frase de boas vindas (“Bem-vindos ao Oceanário”) que é introduzida no ecrã pela entrada de dois peixes, ambos os seus movimentos foram criados através de guide-layers que determinam o percurso das mesmas no ecrã até ao ponto final onde param e permanecem no mesmo sítio, permitindo uma melhor leitura ao utilizador. Este movimento de entrada da nota de boas-vindas irá repetir-se até que o utilizador interaja com a aplicação.
Para a personagem Matias foram criados Motion Tweens que permitiram aproximar a sua cara no momento da sua apresentação e a criação do movimento dos lábios correspondentes aos sons que reproduz na explicação das informações. Para além de explicar as diferentes informações do cavalo-marinho, Matias, ajuda o visitante a explorar a plataforma de multimédia, como por exemplo, a navegar nas diferentes opções disponíveis para o utilizador.
O habitat correspondente ao cenário 2, onde estão presentes as enumeras espécies, que corresponde a um ambiente de um aquário do oceanário. Este ambiente foi preenchido e animado por diferentes movimentos associados aos elementos presentes no habitat. Como por exemplo, o movimento de deslocamento dos peixes, produzido através de motiontweens, o movimento das barbatanas, criado nos respectivos movieclips associados ao peixe em questão e o rollover associado à pérola e à moreia a sair da gruta.
- Para uma mais fácil e cómoda navegação entre as partes do nosso movie, pensámos em criar uma barra que estaria oculta e que poderíamos utilizada a todo o momento com um simples rollOver num puxador que estaria disposto no topo do stage. Como era uma tarefa que ainda não dominávamos, procurámos informação sobre esse tema em diversas fontes, no caso Youtube e Google. Também consultámos o professor Hélder Caixinha para que nos orientasse. O professor indicou-nos dois sites com diferentes formas de fazer essa barra oculta. Depois de avaliadas as formas de execução e experimentadas, concluiu-se que poderia ser feito de uma forma mais fácil sem termos de recorrer a acções de script que ainda não dominávamos. Foi então que pensámos em realizar essa barra através das funcionalidades do Adobe Flash: buttons e movieclips. Efectuámos diversas operações de testes de actividade, mas foi mesmo com recurso a movieclips que surgiu a nossa barra oculta. Através do rollOver num botão, a que chamámos 'Puxador', ativávamos a funcionalidade de fazer descer uma barra com a integração de motion tweens. Quando aberta, esta barra teria à disponibilidade do utilizador onze diferentes botões, cada um corresponderia a um dos seres vivos que escolhemos para a aplicação. Foi então que começaram a surgir os primeiros erros nesta actividade, entre eles os rollOvers ou os rollOuts que não estavam sincronizados ou então a existência indevida dos mesmos. Um exemplo disto, era fazermos rollOut de um botão, a barra deveria fechar se o ponteiro do rato, saísse de cima da barra. Isto por vezes não acontecia e portanto, sentimos a necessidade de criar como que um botão invisível que obrigasse a barra a fechar quando o utilizador saísse das opções da mesma e se decidisse por navegar de outra forma. Com o primeiro problema resolvido, surgem outros como é recorrente em qualquer trabalho. Neste momento, tínhamos o movimento da barra bem construído e foi então que detectámos que os botões quando seleccionados deveriam perder a sua funcionalidade para não causar complicações ao nível da navegação. Foi então que decidimos criar uma barra para cada uma das espécies transformando os botões em símbolos, fazendo com que estes não sejam clicáveis, mantendo o utilizador no local onde pretende estar. Com estes erros aprendemos que não devemos dar imensa liberdade ao utilizador pois poderá levar a que este se perca entre funcionalidades.
Programação de barras e menus
- http://www.youtube.com/watch?v=GtTV-yhTFDg
- http://www.developingwebs.net/flash/invisiblebuttons.php
6.Conclusões
a.Reflexão Critica
Após a finalização do projeto, procedeu-se à análise critica da aplicação que criámos. Assim podemos concluir que apesar de terem surgido algumas dificuldades ao longo do desenvolvimento da criação da aplicação, especialmente com a programação dos jogos, foi possível solucionar esses problemas e obter um resultado que vá de encontro ao que inicialmente se estipulou como o pretendido.
A entre-ajuda e o espirito de companheirismo foi essencial no desenvolvimento do nosso trabalho, pois assim se esclareceram dúvidas, foram feitas críticas e se contornaram dificuldades.
Crêmos que apesar das divergências incontornáveis de qualquer grupo de trabalho, funcionámos de forma coesa e equilibrada o que facilitou o desenrolar do projeto.
b.Sugestões para o aperfeiçõamento e/ou desenvolvimento do futuro projeto
- O aperfeiçoamento que julgamos necessário prende-se com jogo drag'and'drop que se mostra limitado em alguns aspectos devido ao nosso conhecimento algo escasso para a sua concretização.
- No que toca ao resto da aplicação, efetuámos diversas alterações ao longo do seu desenvolvimento, nomeadamente na substituição de diversos motion tweens por movie clips para a criar a sensação de movimento e, também, de guide-layers para a definição do percurso que os seres vivos iriam tomar.
Diário de Bordo
13Janeiro
De forma a concluir o projecto foi organizada a biblioteca do ficheiro .fla; criaram-se os créditos; fizeram-se testes à aplicação em si (alterando-se ainda alguns erros que pressistiam); gravou-se o ficheiro .exe em cd e criou-se a capa (procedendo-se, também, à sua impressão).
12Janeiro
Foram terminados os 'últimos retoques' ao ficheiro .fla final: correcção de alguns pequenos bugs ocasionais; correcção de coordenadas dos alimentos de um dos jogos; correcção de guide layers e de algumas imperfeições do 'ambiente dos peixes' da aplicação e foram ainda gravadas novamente (desta vez em estúdio) algumas das vozes que narram os textos presentes na aplicação, e integração da mesma do documento fla.
11Janeiro
Finalizou-se o jogo do Drag n' Drop e foi introduzido no projecto final. Editou-se também , o vídeo do cavalo-marinho e o seu habitat, para ser também posteriormente introduzido. Continuou-se a progredir de uma forma positiva a elaboração do projecto.
10Janeiro
Elaborámos as gravações dos textos da aplicação. Mais concretamente dos textos de boas vindas, das informações referentes ao Guga e dos jogos. Deu-se , posteriormente continuidade ao desenvolvimento da programação do quiosque multimédia. Continuou-se com o desenvolvimento do jogo para posteriormente ser introduzido.Terminou-se o Quiz, introduzindo o audio que irá acompanhar o utilizador.
09Janeiro
Desenvolvimento da animação, nomeadamente dos componentes da personagem principal do quiosque multimédia. Desta forma as diferentes informações sobre o Guga tornaram-se operacionais e prontas a serem navegadas. Iniciou-se a distribuição dos textos para mais tarde serem gravados em estúdio. Começou-se a programação do jogo Drag n' Drop.
06Janeiro
Iniciou-se a estrutura do relatório final bem como a selecção/compilação da webliografia. Foram também ainda registados avanços ao nível da programação dos diferentes separadores e de alguns movie_clips específicos. Iniciou-se a pesquisa para o jogo Drag n' Drop para se introduzir no quiosque.
04Janeiro
O grupo juntou-se no Departamento de Comunicação e Arte onde, desta feita, presencialmente, se reorganizaram tarefas e se resolveram pequenos obstáculos que foram surgindo nas tarefas individuais de cada um. O dia revelou-se proveitoso visto que se discutiu e criticou construtivamente o trabalho do grupo.
02Janeiro
Mais uma vez, virtualmente, o grupo reuniu-se para reunir os avanços individuais de cada. Foi feito um ponto de situação bem como uma nova atribuição de tarefas. Entrámos neste novo ano com o projecto encaminhado; os avanços são notórios e o grupo revela-se coeso. Já existem duas versões betas de dois jogos ('Guga's drag'n'drop' e 'quiz') e a animação dos menus principais. Fomos ainda forçados a elaborar novas vectorizações devido a ligeiras reformulações feitas a um dos jogos.
26Dezembro
Os elementos do grupo reuniram-se virtualmente para a produção da animação do genérico, do aquário dos peixes e do ambiente de repouso, dando-se inicio ao desenvolvimento do fla relativamente às animações. Iniciou-se a programação do Quiz sobre os cavalos marinhos.
23Dezembro
A programação tem sofrido evoluções: um versão alfa de um jogo tipo 'drag'n'drop' e uma versão beta de um quiz.
22Dezembro
Agora que visualmente o projecto se encontra encaminhado, o grupo avança na estruturação do código que definirá a interactividade da aplicação.
20Dezembro
Embora à distância, o grupo organizou-se de forma a reformular os pontos discutidos com o professor, adaptando o trabalho anteriormente realizado aos comentários feitos na apresentação visual do projecto no passado dia 15 de Dezembro.
15Dezembro
O grupo reuniu-se com o intuito de dar continuidade e terminar a criação dos ambientes da aplicação e respectivos elementos constituintes, dando maior importância aos botões de navegação. Desta forma, foi possível planificar a apresentação para IDE: dos ficheiros de produção, cenários e conteúdos implementados em Illustrator ou Photoshop; organização da apresentação oral, desenvolvimento do ppt.
13Dezembro
A fim de organizar a apresentação para IDE, para o próximo dia 15, o grupo reuniu-se e discutiu assuntos relativos à forma de apresentação. Foram também estruturados e decididos alguns pormenores importantes para a aplicação, como a forma dos menus, os botões e a organização da informação pelo stage no decorrer na animação.
12Dezembro
Durante a aula de Laboratório Multimédia, o grupo desenvolveu a arborescência da aplicação, bem como aspectos relativos ao seu layout. Para além disto, foi ainda dado seguimento à vectorização de elementos para posteriormente serem inseridos na aplicação. Nomeadamente de figuras relativas ao jogo interactivo da aplicação.
09Dezembro
O grupo reuniu-se para a avançar na ilustração/vectorização dos elementos visuais que futuramente serão animados. O balanço a fazer é positivo uma vez que foi possível ilustrar por completo quase todas as 'personagens' bem como o estudo (e a respectiva ilustração) dos cenários. Foram ainda discutidas as grelhas que irão orientar o layout da aplicação.
05Dezembro
No decorrer da aula de IDE, discutimos com o professor da unidade curricular a nossa ideia principal do projeto. Em discussão, decidimos mudar um pouco a vertente do nosso projeto, baseando-se assim apenas num único peixe para que nos possamos focar em mais opções interativas.
02Dezembro
O grupo juntou-se para decidir o subtema do projeto. Em conversa, decidimos fazer um “quiosque virtual” direcionado para as crianças. Assim, concordamos, realizar um mostruário que continha diversos elementos interativos em forma de peixes que permitiria assim, saber informações á cerca de cada espécie. Tivemos ainda a ideia de acrescentar um “guia”. Será um mergulhador, chamado Matias, que vai guiar e acompanhar-nos nesta visita virtual.
30Novembro
Neste dia, o grupo juntou-se para discutir o tema a tratar no projeto final. Em conjunto decidimos elaborar o projeto sobre o “Oceanário” por ser um tema que agrada a todos os elementos e por ser apelativo á facha etária com que queremos trabalhar
Divisão de tarefas/Questões gráficas/visuais
Ana Rita
- Organização e estruturação do projecto.
- Vectorização de elementos visuais
- Pesquisa Visual.
- Desenvolvimento do relatório.
- Animação do cenário de repouso e plataforma_matias.
- Atualização da wiki.
Joana Pais
- Estruturação do layout;
- Vectorização dos fundos e vários elementos que compõe o mesmo e a restante aplicação;
- Pesquisa Visual;
- Contributo na animação;
- Escolha sonora;
- Tratamento de vídeo;
- Actualização da wiki.
Maria Beatriz
- Organização e estruturação do projecto;
- Vectorização de algumas personagens;
- Programação e incorporação do video;
- Animação do genérico e de outras partes do ambiente do aquário;
- Desenvolvimento do relatório;
- Tratamento do som gravado em estúdio;
- Actualização da wiki.
Rafael Guedes
- Elaboração do relatório;
- Pesquisa Visual;
- Vectorização de elementos dos jogos;
- Programação dos jogos;
- Desenvolvimento do relatório;
- Actualização da wiki;
- Tratamento do som gravado em estúdio.
Simão Cruz
- Estruturação do layout;
- Pesquisa Visual;
- Vectorização de algumas personagens;
- Tratamento do som gravado em estúdio;
- Implementação dos jogos na aplicação;
- Programação geral da aplicação.
Nota:A estrutura do relatório foi discutida por todos, dando cada um a sua opinião, contribuindo todos para a sua concretização.
Evolução Visual do Projeto
Janela e Menu interactivo

