Utilizador:Ocean voice

Revisão das 23h43min de 11 de Janeiro de 2012

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, realizamos 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 especiais deste público alvo.

Desenvolvemos uma aplicação que possibilita uma fácil interação, que incorpora sons, elemento que é um factor extremamente importante para a orientação das crianças mais novas.

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.

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, tendo em conta as suas necessidades. 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. Para isto, 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. Apesar de todos os animais presentes no stage serem selecionaveis, apenas o cavalo-marinho é portador de diversas informações, que serão explicitadas mais á 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.

Os objectivos específicos do projecto são:

• Mostrar aos mais novos que aprender pode ser divertido
• 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 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. 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. Assim, neste cenário não temos disponivel nenhum botão específico. Porém, é importante referir o facto de todo o cenário ser 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.

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

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

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

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

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çãi 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, pois chegou a um ponto em que era demasiada informação existente, contudo conseguimos solucionar esse problema ao organizarmos tudo por pastas.

- O facto de termos optado por trabalharmos todos num único .fla para uma utilização correta, e uma organização necessária dificultou o trabalho na medida em que assim apenas poderia estar a trabalhar um membro do grupo de cada vez, caso contrário perderiamos informação se trabalhassemos todos ao mesmo tempo.

- O que suscitou mais dificuldade foram os jogos, na medida em que não temos formação suficiente em AS2 para criarmos um jogo, contudo conseguimos resolver o 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 guides 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.

Diário de Bordo

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

- Pequisa Visual.

- Desenvolvimento do relatório.

- Animação.

Joana Pais

- Organização e estruturação do projecto.

- Vectorização.

- Pequisa Visual.

- Animação.

- Escolha sonora, e tratamento de vídeo.

Maria Beatriz

- Organização e estruturação do projecto.

- Vectorização de algumas personagens.

- Pequisa Visual.

- Programação e animação.

- Desenvolvimento do relatório.

Rafael Guedes

- Elaboração do relatório.

- Pequisa Visual.

- Vectorização de algumas personagens.

- Programação dos jogos.

- Desenvolvimento do relatório.

Simão Cruz

- Estruturação do layout.

- Pesquisa Visual.

- Vectorização de algumas imagens.

- Programação geral da aplicação e implementação dos jogos na 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