Utilizador:Ocean voice

Da Lab. Multimédia 1
(Diferença entre edições)
Ir para: navegação, pesquisa
(Estudo para a estrutura da aplicação)
(Diário de Bordo)
 
(36 edições intermédias de 5 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, realizamos um projeto, onde o nosso tema de enfoque é o Oceanário, e através do qual desenvolvemos um Quiosque Multimédia.
+
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 com de uma faixa étaria dos 3 aos 8 anos,como tal todo o nosso projeto foi pensado e estruturado tendo em conta as necessidades deste público alvo.
+
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.
  
Desenvolvemos uma aplicação que possibilita uma fácil interação, incorpora sempre som, elemento que é factor extremamente importante para orientação das crianças mais novas.
+
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 como sendo um quiosque interativo a ser integrado num 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, sendo assim esta uma aplicação lúdica e divertida.  
+
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, tendo em conta as suas necessidades.
+
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, levando a que as mesmas interagissem.
+
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.
Desta forma foi criada a personagem Matias que interpreta o papel de um 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.  
+
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 selecionaveis, apenas o cavalo-marinho é portador de diversas informações, que serão explicitadas mas á frente. Já todos os outros seres vivos apresentarão apenas uma imagem sua real quando selecionados. Esta decisão foi tomada em conjunto com o professor Mário Vairinhos responsável pela disciplina de Imagem Digital Estática, pois após uma análise percebemos que seria mais viável focarmo-nos apenas num ser vivo.
+
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 ser divertido
+
*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 nosso aplicação, por forma a nos organizarmos, e elaborarmos uma aplicação funcional.
+
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 116: Linha 114:
  
  
[[Ficheiro:Generico.png|400px]]  [[Ficheiro:Esquema1.jpg|400px]][[Ficheiro:Esquema2.jpg|400px]] [[Ficheiro:Esquema3.jpg|400px]][[Ficheiro:Esquema4.jpg|400px]]
+
[[Ficheiro:Generico.png|400px]]  [[Ficheiro:Esquema1.jpg|400px]] [[Ficheiro:Matias.PNG|400px]][[Ficheiro:Esquema3.jpg|400px]][[Ficheiro:Esquema4.jpg|400px]]
  
  
Linha 123: Linha 121:
 
'''3.Desenho Funcional'''
 
'''3.Desenho Funcional'''
  
a. Requisitos Funcionais:  
+
'''a. Requisitos Funcionais:'''
  
Neste ponto tentamos ao máximo ter em conta o público alvo e o objetivo para o qual a aplicação foi concebida, tentando torna-la o mais funcional e prática possivel.
+
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 é proporcionado através de um genérico que procura despertar de imediato o interesse dos mais novos, aparecendo assim dois pequenos peixes que trazem com eles as boas vindas ao oceanário.Nestes peixes iniciais procuramos utilizar cores alegres, que despertassem o interesse por parte dos mais novos.
+
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 o facto de todo o cenário ser selecionável possibilitando assim o avanço para o cenário seguinte.
+
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, somos presenteados com uma breve apresentação do guia desta pequena viagem pelo Oceanário, guia este que se chama Matias  que estara presente em toda a aplicação, guiando assim as crianças, auxiliando assim nos casos em que as crianças não sabem ler, 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.
+
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 temos uma barra oculta, que apenas se torna selecionavel quando se toca na setinha que esta sempre visivel ao centro do ecrã em cima,esta barra contem diversas palavras selecionavais, que nos direcionam para páginas que associadas aos seres vivos presentes no stage.
+
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 segundo a ordem 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,em seguida encontra-se o botão de "ajuda" representado por um ponto de interrogação.
+
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".
Já no caso de todos os outros seres vivos terão apenas associado ao seu botão uma página com a sua imagem real.
 
 
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".
  
  
b.Estrutura Arborescente
+
[[Ficheiro:Ligações.PNG|800px]]
 +
 
 +
 
 +
 
 +
'''b.Estrutura Arborescente'''
  
 
[[Ficheiro:Árvore.jpg]]
 
[[Ficheiro:Árvore.jpg]]
  
  
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.
  
  
c.Desenho de interação e usabilidade
+
'''c.Desenho de interação e usabilidade'''
  
Antes procedermos a elaboração do projeto passamos 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.
+
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 podémos então perceber quais seriam os parâmetros a ter em consideração, desta forma a usabilidade e funcionalidade deste projeto.
+
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, por forma a facilitar a interação, e a navegação ao longo de toda a 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.
Foram muitos os pontos que tivemos de ter em consideração, e o facto de o nosso publico alvo ser crianças, isso significa que estão na fase mais propicia para aprenderem, e interiorizarem aquilo que lhes é transmitido, desta forma tentamos utilizar linguagem facil de perceber para as crianças com ideade acima dos 7 anos, e implementou-se audio com o objetivo de possibilitar a mesma compreensão daquilo que é apresentado a crinças com idade abaixo dos 6 anos.  
+
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'.
  
Procuramos assim criar um ambiente rico em cores, utilizando seres vivos muito desenhados, e com expressões amigaveis, que despertassem nas crianças um certo desejo de lhes "tocar", de interagir, de brincar.
+
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.
Para este efeito tentamos pereceber quais seriam as necessidades não só das crianças mas também dos pais, disponobilizando assim botões como o "saltar intro" que possibilita isso mesmo, e que se destina aos pais que já viram a aplicação diversas vezes ao se deslocarem ao Oceanário, e já não tem necessidade de ver a introdução novamente.
+
Outro botão pensado para auxiliar os pais nesta viagem com os seus filhos é 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 a moreia que sai das rochas, e a concha que se abre ao ser clicada.
+
  
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 170: Linha 170:
 
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.
 
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.
 
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 para tratamento audio, e o Adobe Premiere para tratamento de vídeo.
+
Usamos ainda o Audacity 2.0 para tratamento audio, e o Adobe Premiere para tratamento de vídeo.
  
  
[[Ficheiro:Exemplo.jpg]]
+
 
 +
'''5.Produção do Projeto'''
 +
 
 +
[[Ficheiro:Codigo_botoes_flash.jpg|600px]]
 +
 
 +
[[Ficheiro:Codigo_flash_dragndrop.jpg|600px]]
 +
 
 +
[[Ficheiro:Codigo_quiz.jpg|600px]]
 +
 
 +
 
 +
 
 +
'''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.
 +
 
 +
 
 +
[[Ficheiro:Premiere.jpg|600px]]
 +
 
 +
 
 +
 
 +
'''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
 +
 
 +
- 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 249: 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 260: Linha 349:
 
- Organização e estruturação do projecto.
 
- Organização e estruturação do projecto.
  
- Vectorização
+
- Vectorização de elementos visuais
  
- Pequisa Visual.
+
- 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 272: Linha 363:
  
  
- Organização e estruturação do projecto.
+
- Estruturação do layout;
  
- Vectorização.
+
- Vectorização dos fundos e vários elementos que compõe o mesmo e a restante aplicação;
  
- Pequisa Visual.
+
- Pesquisa Visual;
  
- Animação.
+
- Contributo na animação;
  
- Escolha sonora, e tratamento de vídeo.
+
- 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;
  
- Pequisa Visual.
+
- Programação e incorporação do video; 
  
- Programação e animação.
+
- 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;
  
- Pequisa Visual.
+
- Pesquisa Visual;
  
- Vectorização de algumas personagens.
+
- 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 imagens.
+
- Vectorização de algumas personagens;
  
- Programação geral da aplicação e implementação dos jogos na aplicação.
+
- Tratamento do som gravado em estúdio;
  
Nota:A estrutura do relatório foi discutida por todos, dando cada um a sua opinião, contribuindo todos para a sua concretização.
+
- 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


Untitled-7.png
Logotipo.jpg




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

Jogo.PNGJogo 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. 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:

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.


Generico.png Esquema1.jpg Matias.PNGEsquema3.jpgEsquema4.jpg



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".


Ligações.PNG


b.Estrutura Arborescente

Árvore.jpg


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

Codigo botoes flash.jpg

Codigo flash dragndrop.jpg

Codigo quiz.jpg


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.


Premiere.jpg


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

- 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

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

Fundo2.png Movimento algas.png Coral.PNG Capturar.PNG


Janela e Menu interactivo

Balao.PNG Esquema menu.jpg

Ferramentas pessoais
Espaços nominais
Variantes
Acções
Navegação
Ferramentas