Natal Para Todos

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
(→Personagens e adereços)
(→Ecrãs Tipo)
 
(16 intermediate revisions not shown)
Line 28: Line 28:
= Identidade Visual da Aplicação =
= Identidade Visual da Aplicação =
-
<center>[[File:Colour pallette reduzido.jpg]]
+
Abaixo, está representado o esquema de cores que usamos na elaboração do logótipo, nos botões do menu e nas suas respectivas legendas. Em seguida, está representado o logótipo - 'Natal para Todos'. O tipo de letra que usamos e vamos usar em todo o lettering da aplicação é o Cartwheel.<br>
-
[[File:Logo reduzido.jpg]]</center><br>
+
-
Acima, está representado o esquema de cores a usar no esquema de Menus, opções, e mais texto que possamos usar. Em seguida, está representado o logótipo da aplicação - 'Natal para Todos'-. O tipo de letra que usamos e vamos usar em todo o lettering da aplicação é o Cartwheel.<br>
+
Os códigos das cores são (da esquerda para a direita):<br>
Os códigos das cores são (da esquerda para a direita):<br>
-
* #001800<br>
+
* #001800 ; #780000 ; #607848 ; #90A878 ; #F0F0C0
-
* #780000<br>
+
 
-
* #607848<br>
+
<gallery widts=120px heights=120px perrow=4>
-
* #90A878<br>
+
File:Colour pallette reduzido.jpg
-
* #F0F0C0
+
File:NatalParaTodos.PNG
 +
</gallery><br>
= Estrutura Arborescente =
= Estrutura Arborescente =
 +
 +
Neste separador, apresentamos a estrutura arborescente do nosso trabalho.
 +
 +
<gallery widts=120px heights=120px perrow=4>
 +
File:Arborescencia.png
 +
</gallery>
= Ecrãs Tipo =
= Ecrãs Tipo =
 +
 +
Neste separador, apresentamos os ecrãs tipo da aplicação.
 +
 +
<gallery widts=120px heights=120px perrow=4>
 +
File:Natal.PNG
 +
File:Evolucao.PNG
 +
File:Grupo.PNG
 +
File:Contexto.PNG
 +
File:Objectivo.PNG
 +
File:Ajuda.PNG
 +
File:Sair.PNG
 +
File:Arvore natal.PNG
 +
File:Copo.PNG
 +
File:Prenda1.PNG
 +
File:Prenda2.PNG
 +
File:Prenda3.PNG
 +
File:Prenda4.png
 +
</gallery>
= Personagens e adereços =
= Personagens e adereços =
Line 46: Line 69:
Aqui deixamos dois exemplos de posições das personagens.  
Aqui deixamos dois exemplos de posições das personagens.  
-
[[File:Menina2.jpg|left|100px|alt=Menina2.jpg alt text|Menina2.jpg caption]]
+
<gallery widts=120px heights=120px perrow=4>
-
[[File:Pai natal saco chao3.jpg|left|200px|alt=Pai natal saco chao3.jpg alt text|Pai natal saco chao3.jpg caption]]<br>
+
File:Menina2.jpg
-
<br>
+
File:Pai natal saco chao3.jpg
-
<br>
+
</gallery>
-
<br>
+
-
<br>
+
-
<br>
+
-
<br>
+
-
<br>
+
-
<br>
+
-
<br>
+
-
<br>
+
-
<br>
+
<br>
<br>
Line 127: Line 141:
*Continuação da segunda personagem<br>
*Continuação da segunda personagem<br>
'''28/12/2010:'''
'''28/12/2010:'''
 +
*Programação e Animação<br>
*Criação dos menus da animação<br>
*Criação dos menus da animação<br>
*Aplicação das funções aos respectivos botões<br>
*Aplicação das funções aos respectivos botões<br>
'''29/12/2010:'''
'''29/12/2010:'''
 +
*Programação e Animação<br>
*Continuação da animação e da personagem<br>
*Continuação da animação e da personagem<br>
'''4/1/2011 e 8/1/2011:'''
'''4/1/2011 e 8/1/2011:'''
 +
*Programação e Animação<br>
*Continuação da elaboração da animação e das personagens<br>
*Continuação da elaboração da animação e das personagens<br>
'''11/1/2011:'''
'''11/1/2011:'''
*Conclusão da parte de IDE do projecto<br>
*Conclusão da parte de IDE do projecto<br>
*Continuação da animação<br>
*Continuação da animação<br>
 +
*Programação e Animação <br>
 +
'''12/1/2011:'''
 +
*Programação e Animação<br>
 +
*Sonorização<br>
 +
'''13/1/2011:'''
 +
*Continuação da Sonorização<br>
 +
*Continuação da Programação e da Animação<br>
 +
*Continuação e Revisão do Relatório <br>
 +
'''14/1/2011'''
 +
*Conclusão do Projecto Final<br>
 +
*Conclusão do Relatório<br>
 +
*Publicação<br>
 +
 +
= Relatório do Projecto Final =
 +
<center>'''Agradecimentos'''</center>
 +
O Projecto foi realizado com um enorme esforço de todo o grupo, mas durante o seu desenvolvimento houve pessoas às quais gostaríamos de agradecer pela ajuda e apoio prestados.
 +
Os nossos agradecimentos à Universidade de Aveiro, ao Departamento de Comunicação e Arte, aos docentes Hélder Caixinha e Ana Carla Amaro, da Unidade Curricular de Laboratório Multimédia I e dos professores Pedro Amado, Catarina Lélis e Ivo Daniel da Unidade Curricular de Imagem Digital Estática. Agradecemos ainda aos colegas tanto do 1º ano, do 2º ou do 3º da Licenciatura em Novas Tecnologias da Comunicação, que sempre se disponibilizaram a esclarecer dúvidas e a dar sugestões.
 +
A todos o nosso reconhecimento pelo acompanhamento e apoio dado.
 +
 +
<center>'''1. Apresentação do Projecto'''</center>
 +
No âmbito da disciplina Laboratório Multimédia1, foi-nos proposto que realizássemos como projecto final uma aplicação multimédia interactiva dirigida aos interesses do utilizador e que fosse resultado do que foi leccionado nas aulas. Desta forma, desde cedo se começaram a realizar os documentos que suportam a produção em Flash, necessários para desenvolver a aplicação.
 +
 +
Relativamente á escolha do tema a abordar no produto multimédia, o grupo optou por escolher um que, embora seja do senso comum por ser tão conhecido, nos fornecia boas condições para fazer algo um pouco diferente. Assim, a ideia passa por mostrar às crianças e aos pais outras formas de ver a época natalícia, de um modo mais atractivo que o habitual.
 +
 +
A escolha da interface gráfica foi pensada para o utilizador usufruir da informação de uma forma mais fácil e dinâmica, mas também interactiva para não o maçar e para criar, também uma forma de interacção mais próxima com o utilizador. Para complementar este facto, escolhemos utilizar como acção imagens correspondentes ao mundo real que aprimorasse ainda mais a experiência do utilizador.
 +
 +
No seguimento do guião disponibilizado pelos docentes para a realização do projecto, o presente relatório divide-se em várias secções em que na primeira é feita uma apresentação geral do projecto, e seguida da descrição das fases de análise e planeamento, dos processos do desenho funcional, nomeadamente os requisitos técnicos, a estrutura arborescente e das informações relativas ao desenho de interacção e usabilidade; depois dessa fase, descrevemos em pormenor como é a aplicação multimédia. De seguida é descrito o processo de produção do projecto, nomeadamente dos processos de produção das animações, das estruturas interactivas, da integração e controlo do som, dos problemas encontrados durante o desenvolvimento do projecto e as soluções técnicas adoptadas na sua resolução. Posto isto, serão apresentadas conclusões do projecto, onde faremos uma reflexão crítica e do desenvolvimento futuro do projecto, no âmbito dos conteúdos.
 +
 +
No final deste relatório, está uma área reservada à bibliografia e aos anexos.
 +
Num resumo breve, a nossa aplicação foi realizada no âmbito de fazer com que as pessoas gastassem menos dinheiro na época natalícia e que aprendessem novas formas de poupar. É um trabalho em que o público-alvo é o público em geral, mas principalmente destinado às crianças.
 +
Apresentamos, inicialmente uma animação de abertura que mostra o Pai Natal a entrar numa casa, a deixar os presentes e a admiração de uma criança que acorda com o barulho. Os menus permitem ao utilizador a navegação por submenus que mostram a definição de Natal e a evolução que houve ao longo do tempo; permite ainda conhecer os elementos que formam o nosso grupo e qual o contexto e o objectivo do trabalho. Como não poderia deixar de ser, existe ainda na aplicação um botão que fornece ajuda ao utilizador sobre a forma como navegar e interagir com a aplicação.
 +
Concretamente, os objectivos da nossa aplicação são: <br>
 +
•Desenvolver, nas crianças, atitudes de respeito pela Natureza;<br>
 +
•Promover a poupança nos adultos;<br>
 +
•Fomentar o diálogo sobre a importância de economizar os meios através da reutilização de vários materiais;<br>
 +
•Alertar os pais para a necessidade de educar os filhos na reutilização de materiais e na ideia de que não só os materiais físicos é que são importantes; <br>
 +
•Desenvolver nas crianças uma atitude cívica.<br>
 +
 +
<center>'''2. Análise e Planeamento'''</center>
 +
Este projecto, devido à sua complexidade, desenvolveu-se durante todo um processo de análise e planeamento bem estruturados.
 +
Primeiramente, e após a primeira reunião de grupo, ficou decidido e aprovado pelos professores também, que o nosso tema seria o Natal e toda a efervescência provocada, pela própria época, nas pessoas e os resultados consequentes a isso. O grupo começou por distribuir tarefas, igualmente repartidas a cada elemento do grupo, nomeadamente a distribuição das pesquisas acerca do tema do Natal, do seu significado, das evoluções contínuas ao longo dos tempos, e de, como não poderia deixar de ser, sugestões sobre como ter um melhor proveito da época natalícia, reduzindo os gastos. Começamos por trocas umas primeiras impressões e a fazer rascunhos da aplicação (o que queríamos fazer, objectos a usar, personagens a criar, tipografia, menu, aplicações interactivas a realizar, etc.)
 +
Durante o processo de pesquisa, que se realizou antes de todas as fases seguintes, o grupo decidiu usar cores vivas e alegres para ter uma maior atracção dado o facto de ser uma aplicação destinada ao público em geral, mas principalmente, destinada às crianças.
 +
A partir da pesquisa efectuada, concluímos que foi difícil encontrar aplicações semelhantes àquela que queríamos construir. Ao longo da pesquisa encontramos uma aplicação interactiva online - ‘xixi no banho’ ( http://www.xixinobanho.org.br/ ) -, onde o objectivo era, tal como o nosso projecto, persuadir o utilizador a consumir menos.
 +
As tarefas foram, então, assim distribuídas:<br>
 +
• António Alves: vectorização de cenários e personagens, pesquisa e textos sobre o Natal e transformações ao longo dos tempos, animação em flash e aplicação interactiva.<br>
 +
• João Soares: fontes e logótipos, esquemas de cores, grafismo dos botões e menus, animação em flash e aplicação interactiva.<br>
 +
• Patrícia Oliveira: tratamento e pesquisa da informação contida no site, edição e vectorização das personagens e dos cenários e aplicação interactiva.<br>
 +
• Telma Ferreira: vectorização de cenários e personagens; pesquisa de informações acerca de como obter um Natal mais sustentável, estrutura arborescente, reedição do logótipo, e aplicação interactiva.<br>
 +
(NOTA IMPORTANTE: Os cenários, as personagens, adereços, e tudo o resto utilizado na componente gráfica, encontram-se na parte dos Anexos.)
 +
Depois de todas os ambientes gráficos, e da vectorização de botões, menus e objectos, o grupo passou para a criação da estrutura arborescente da aplicação, partindo depois para a elaboração de uma tabela com todos os requisitos funcionais da aplicação, nomeadamente todas as funções desempenhadas por cada menu e botão.
 +
Concluídas estas fases, deu-se por iniciada a fase de criação da animação, da sonorização e da implementação interactiva. Nesta fase foi fundamental a ajuda de todos os elementos do grupo, quer na implementação e incrementação de códigos ActionScript, como também na pesquisa, na análise dos conteúdos e na viabilidade da usabilidade e da interacção do nosso projecto.
 +
 +
<center>'''3. Desenho Funcional'''</center>
 +
<center>'''3.1 Requisitos Funcionais'''</center>
 +
<center>[[File:Requisitos funcionais1.png]]</center><br>
 +
<center>'''3.2 Estrutura Arborescente'''</center>
 +
As estruturas arborescentes são estruturas explicitamente hierarquizadas de informação em blocos e de ligações entre eles. Nesta representação, todos os conteúdos estão devidamente identificados e hierarquizados por níveis de conteúdo, respectivamente interligados por nós, que são os pontos-chave da estrutura e pelos links, que mostram as ramificações da arborescências. É importante referia a relação de direccionalidade do fluxo entre todos os nós e links.
 +
Para o presente trabalho foi especificamente pedido para que a nossa aplicação interactiva multimédia tivesse uma estrutura arborescente do tipo hierárquica não linear por permitir ao utilizador navegar entre todos os níveis da estrutura e entre os itens do mesmo nível, sem qualquer tipo de restrições; é, também, a tipologia associada ao paradigma de interacção índex onde se verifica que os menus e submenus se encontram sempre presentes; oferece, ainda, total liberdade na selecção de percursos.
 +
Na figura abaixo está a estrutura arborescente do nosso projecto.
 +
Nela consistem quatro menus, cada um com ramificações de informação relativa a cada botão. No menu Natal, o utilizador tem hipótese de descobrir mais informações sobre o tema abordado em si e sobre as evoluções dadas. É necessário referir que como estrutura arborescente hierárquica não linear, o utilizador tem hipótese de viajar entre todos os níveis da estrutura de forma independente e que tanto no próprio menu ‘Natal’ como no menu ‘Projecto’, é possível o utilizador escolher quais as informações que pretende visualizar. No último referido, o menu ‘Projecto’, permite ao utilizador conhecer os autores da aplicação, bem como todo o contexto e objectivo por trás deste projecto.
 +
Ainda no menu ‘Ajuda’, facilitamos a visita do utilizador fornecendo-lhe as devidas informações acerca da forma de navegação na aplicação.
 +
No menu ‘Sair’ o utilizador tem o poder de escolha se pretende abandonar ou não a aplicação.
 +
Como é importante, deve-se sempre ajudar à leitura da arborescência, e como tal encontra-se ainda a legenda da imagem, que explicita cada menu/botão.
 +
<center>[[File:Arborescencia.png]]</center><br>
 +
Fig. 1 - Estrutura Arborescente
 +
 +
<center>'''3.3 Desenho de Interacção e Usabilidade'''</center>
 +
 +
Tal como no dia-a-dia, é necessário pensar na usabilidade e na funcionalidade de todos os objectos, matérias e materiais. Para tal, todos os objectos são criados de forma a fornecerem um melhor conforto ao utilizador do produto. Estes conceitos de usabilidade, funcionalidade e fiabilidade são elementos sempre a ter em conta em qualquer produção multimédia que se destine a um público quer geral quer mais particular.
 +
É fundamental pensarmos, não só na usabilidade da estrutura, dos percursos e dos meios de navegação sem pensarmos também na interacção e do seu efeito no utilizador. O autor deve sempre considerar factores cognitivos, psicológicos, emocionais, comunicacionais, e a experiência do público, mediante a mensagem que queira transmitir.
 +
Na nossa aplicação, todos os princípios da usabilidade foram tomados em consideração, pois o reconhecimento e a compreensão são facilitados pela estruturação do layout.
 +
A nossa aplicação é bastante simples, de fácil aprendizagem, fácil memorização e, após testada por outros colegas, chegamos à conclusão que o utilizador se encontrou satisfeito com a aplicação e que o resultado final foi eficaz porque conseguiu passar a mensagem essencial. Relativamente à minimização do erro e facilidade na sua correcção o utilizador não tem qualquer problema pois com simples passos o autor da aplicação facilmente consegue identificar o erro através do código html, fazendo trace.
 +
 +
 +
<center>'''4. Desenho Técnico'''</center>
 +
 +
'''Especificidades Técnicas'''
 +
Neste ecrã, a interacção com o utilizador resume-se a um botão apenas: o botão 'entrar' na animação/aplicação e a animação do título 'Natal Para Todos'
 +
No ecrã seguinte encontramos a animação principal do Pai Natal e da Menina.
 +
No menu principal, encontramos quatro botões que direccionam o utilizador para diferentes submenus com diversas informações relativas a cada tema.
 +
Fora do Menu Principal, existem diversos botões espalhados e escondidos que são clicáveis e que dão informação ao utilizador sobre diversas formas de poupar.
 +
Uma outra especificidade é o player de música que  é constituído por diversos botões, nomeadamente o de Play e Pausa, e os de Avançar e retroceder na música.
 +
 +
 +
<center>'''5. Produção do Projecto'''</center>
 +
 +
<center>'''5.1 Estrutura e meios de navegação/interacção'''</center>
 +
 +
A aplicação é constituída toda ela por elementos que ajudam à navegação, nomeadamente todos os botões que constituem os menus e botões que originam animações. Neste projecto, tivemos bastante em conta os meios de navegação/interacção e da sua função relativamente aos mecanismos de retorno (backs, retorno ao nó mãe/principal) – o utilizador tem simplesmente que clicar no botão fechar para sair de onde está e voltar ao ponto inicial do menu -; tivemos também em conta os mecanismos de identificação do ponto da estrutura (títulos, destaque do item no menu, etc.) – que são todos os botões devidamente identificados no menu vertical.
 +
No resto da aplicação, são visíveis inúmeras animações escondidas no cenário que se desenvolvem com o clicar do rato ou com um simples roll over.
 +
 +
 +
<center>'''5.2 Integração e controlo de som'''</center>
 +
 +
A aplicação contém dois tipos de som: um som de fundo no ecrã principal e, um som que reagem à passagem e/ou clique do cursor dentro dos ecrãs informativos bem como em toda o conjunto de botões.
 +
O utilizador, ao navegar pelo menu tem a possibilidade de, caso queira parar ou reproduzir esse mesmo som, tem de recorrer a um dos dois botões situados no canto superior esquerdo da aplicação.
 +
Relativamente a este item, que é um dos componentes mais importantes na avaliação do projecto, é visível durante toda a parte da aplicação, um reprodutor de música, que vem com opções de pausa e Play da música, bem como de avançar ou retroceder para a música seguinte/anterior. Este está situado no canto superior direito da aplicação.
 +
 +
 +
<center>[[File:Player.png]]</center>
 +
 +
Fig. 2 – Reprodutor de Música - Projecto ‘Natal pata Todos’ <br><br>
 +
Todo o projecto foi realizado com a linguagem de programação ActionScript 2.0.<br>
 +
Para conseguirmos pôr o reprodutor de música a funcionar utilizamos o seguinte código:<br>
 +
mNumber = 0;<br>
 +
trilha = new Sound();<br>
 +
listaMP3 = new XML();<br>
 +
listaMP3.ignoreWhite = true;<br>
 +
listaMP3.load("musicas.xml");<br>
 +
listaMP3.onLoad = function ()<br>
 +
{<br>
 +
playlist = listaMP3.childNodes;<br>
 +
musica = playlist[(random(playlist.length))].attributes.url<br>
 +
trilha.loadSound(musica, true);<br>
 +
trilha.start(0, 0);<br>
 +
carregou = true;<br>
 +
dur = trilha.duration;<br>
 +
pos = trilha.position;<br>
 +
}<br>
 +
;<br>
 +
trilha.onID3 = function ()<br>
 +
{<br>
 +
artista = trilha.id3.artist;<br>
 +
titulo = trilha.id3.songname;<br>
 +
info = "<font color=\'#475848\'>" + artista + " </font>. " + titulo;<br>
 +
label_.leg.info = info;<br>
 +
}<br>
 +
;<br>
 +
trilha.onSoundComplete = function ()<br>
 +
{<br>
 +
mute = true;<br>
 +
if (mNumber < playlist.length) <br>
 +
{<br>
 +
++mNumber;<br>
 +
musica = playlist[mNumber].attributes.url;<br>
 +
trilha.loadSound(musica, true);<br>
 +
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);<br>
 +
label.leg.info = info;<br>
 +
stopado.gotoAndStop(1);<br>
 +
trilha.start();<br>
 +
display.mute = false;<br>
 +
}<br>
 +
}<br>
 +
;<br>
 +
 +
Para os seguintes botões para fazer avançar a música, usamos o seguinte script:<br>
 +
on (release)<br>
 +
{<br>
 +
if (mNumber > 0) <br>
 +
{<br>
 +
--mNumber;<br>
 +
musica = playlist[mNumber].attributes.url;<br>
 +
trilha.loadSound(musica, true);<br>
 +
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);<br>
 +
label.leg.info = info;<br>
 +
stopado.gotoAndStop(1);<br>
 +
trilha.start();<br>
 +
display.mute = false;<br>
 +
}<br>
 +
else <br>
 +
{<br>
 +
mNumber = playlist.length - 1;<br>
 +
musica = playlist[mNumber].attributes.url;<br>
 +
trilha.loadSound(musica, true);<br>
 +
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);<br>
 +
label.leg.info = info;<br>
 +
stopado.gotoAndStop(1);<br>
 +
trilha.start();<br>
 +
display.mute = false;<br>
 +
}<br>
 +
}<br>
 +
O outro script usado no reprodutor de música é o seguinte:<br>
 +
on (release)<br>
 +
{<br>
 +
if (mNumber < playlist.length - 1) <br>
 +
{<br>
 +
++mNumber;<br>
 +
musica = playlist[mNumber].attributes.url;<br>
 +
trilha.loadSound(musica, true);<br>
 +
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);<br>
 +
label.leg.info = info;<br>
 +
stopado.gotoAndStop(1);<br>
 +
trilha.start();<br>
 +
display.mute = false;<br>
 +
}<br>
 +
else <br>
 +
{<br>
 +
mNumber = 0;<br>
 +
musica = playlist[mNumber].attributes.url;<br>
 +
trilha.loadSound(musica, true);<br>
 +
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);<br>
 +
label.leg.info = info;<br>
 +
stopado.gotoAndStop(1);<br>
 +
trilha.start();<br>
 +
display.mute = false;<br>
 +
}<br>
 +
}<br>
 +
 +
 +
<center>'''5.3 Animação'''</center>
 +
A nossa aplicação inicia-se com uma animação muito simples, com um cenário de fundo, à noite, no dia da véspera de Natal. Entretanto o plano de visão é mudado e vê-se o Pai Natal a entrar numa casa pela chaminé da lareira, a deixar os presentes na sala e a admiração de uma criança que acorda com o barulho.
 +
Concluída esta pequena animação inicial, existe em toda a aplicação pequenos botões animados que equivalem aos menus, mas também outros botões animados nomeadamente as prendas a abrirem, a chávena do café a deitar fumo, e a personagem do pai natal e da menina emitirem sons ao serem clicados, etc., tudo pequenas animações que ajudam a validar a interactividade com o utilizador.
 +
 +
 +
 +
<center>'''5.4 Soluções técnicas adoptadas para a resolução de problemas'''</center>
 +
 +
Devido ao facto de não terem sido adquiridos, em aula, os conhecimentos necessários para produzir a animação/aplicação desejada, foi necessário efectuar uma pesquisa, por via a encontrar o código pretendido e para estudo do mesmo.
 +
Recorrendo á Internet, a livros e, também, a colegas com mais conhecimentos em linguagem ActionScript 2.0, conseguimos obter a base do código que necessitávamos ao qual posteriormente usámos.
 +
Após muitas horas de estudo dos scripts e do consequente entendimento da sua estrutura lógica, foram implementados no projecto em Adobe Flash CS3.
 +
 +
Principais problemas:
 +
 +
1. Problemas relativos à introdução de um reprodutor de música que tivesse as funções de começar e pausar a música, mas também de avançar e retroceder na livraria de músicas disponíveis. Com esforço, o grupo conseguiu intercalar o código obtido de acordo com as necessidades e requisitos especificados. <br>
 +
2. Falhas dos botões do menu principal que se tornavam não clicáveis depois de abertos que dariam acesso a outros submenus secundários. Para este problema, o grupo não conseguiu encontrar solução, pois simplesmente já de todas as possíveis soluções experimentadas, nenhuma deu resultado.<br>
 +
3. Outro problema parecido com o anterior era relativo aos botões ‘fechar’ das dicas escondidas no stage. A resolução foi voltar a colocar esses botões na livraria da cena, recoloca-los na stage e atribuir-lhes de novo o código dependente da sua função.<br>
 +
4. Problema de que o utilizador não teria como distinguir os botões do menu dos elementos decorativos. Resolvemos da seguinte forma: ao invés de descriminarmos os botões do menu no seu estado up, dos restantes elementos, optámos por distinguir os elementos clicáveis dos não clicáveis, assim, à passagem rato, no estado over dos botões, ou seja, à passagem do cursor por cima de um botão, este ficará com outra imagem, dentro do mesmo tema e há, ainda, uma caixa de texto estática especificando o nome do botão e ainda um som ao clique do cursor no próprio.<br>
 +
 +
Todos os problemas foram superados com sucesso à excepção mesmo do ponto número 2.
 +
 +
<center>'''6. Conclusões'''</center>
 +
O desenvolvimento deste projecto permitiu-nos ter uma percepção maior relativamente ao software Adobe Flash CS3 e Adobe Illustrator CS3, na medida em que nos possibilitou aplicar os conhecimentos leccionados nas aulas, assim como a pesquisa de mais material para a realização da aplicação multimédia.
 +
O objectivo deste projecto era criar uma aplicação multimédia interactiva distinta e original sobre o Natal e sobre formas de poupar tempo, dinheiro e energia, destinado ao público em geral, mas também às crianças como forma de alerta.
 +
Embora seja um tema já do senso comum procurámos desenvolver uma aplicação com um interface gráfica apelativa e dinâmica, bem como torná-la acessível na sua navegação. Assim, esta aplicação tornou-se diferente das aplicações comuns sobre o tema, apresentando cenário criados a partir do real, fornecendo menus com botões e animações apelativas. 
 +
Ao longo do trabalho, foram surgindo algumas dificuldades a nível técnico, como é o exemplo das falhas dos botões do menu, que se tornavam não clicáveis após abertos; a falha dos botões fechar que não obedeciam ao que era programado com ActionScript; a decisão de alguns aspectos gráficos, como por exemplo a forma de interacção da informação nos submenus. Contudo todas essas dificuldades foram superadas com sucesso.
 +
Assim, todos estes objectivos inicialmente definidos foram cumpridos e conclui-se que este projecto serviu como o culminar das aprendizagens adquiridas no módulo de autoria multimédia da Unidade Curricular de Laboratório Multimédia 1, mas também das técnicas e trabalhos realizados em Imagem Digital Estática, nomeadamente nos módulos de Imagem Bitmap, Imagem Vectorial e Tipografia.
 +
 +
<center>'''6.1 Reflexão crítica''' </center>
 +
 +
Conscientes de que este projecto envolve todo um conjunto de processos complexos como a recolha de ideias, justificação de escolhas, planificação de documentos e fundamentação de ideias alteradas, tentámos realizar da melhor forma uma aplicação que melhor satisfaça o utilizador bem como que enriqueça os nossos conhecimentos para projectos futuros.
 +
No geral, o que foi planificado nesta aplicação multimédia foi cumprido, obtendo um resultado satisfatório. A informação gráfica e a interface são mostradas de forma dinâmica, de fácil acesso, tornando a aplicação mais interessante e com vontade de a explorar. É de realçar ainda que esta é acompanhada por um botão de ajuda que indicam ao utilizador a forma de interacção, como por exemplo, e de um reprodutor de música. Para o caso de existir utilizadores que não se sintam à vontade com a interactividade da aplicação e que queiram navegar de uma forma mais rápida existe um menu lateral com botões que permitem aceder à informação principal. No entanto, houve alguns impedimentos que contiveram que a aplicação ficasse exactamente como o pretendido, como é o caso da falta de coordenação entre o grupo, e um outro erro num botão já referido acima.
 +
Existem ainda alguns problemas a nível de escala, uma vez que alguns elementos têm tamanhos muito diminutos em relação a outros.
 +
Assim sendo, a escala dos elementos não correspondem muito bem à realidade dando, no entanto, coerência ao nosso ambiente gráfico.
 +
 +
 +
 +
<center>'''6.2 Sugestões para aperfeiçoamento e/ou desenvolvimento futuro do projecto'''</center>
 +
 +
Após a realização deste projecto, podemos constatar que poderia haver alguns pontos de aperfeiçoamento, tais como: <br>
 +
• Uma melhor coordenação de grupo;<br>
 +
• Melhoria na Interacção;<br>
 +
• Recurso a mais elementos animados<br>
 +
 +
<center>'''7. Referências Web e Bibliográficas'''</center>
 +
'''Referências Web''' <br>
 +
 +
•Preloader:<br>
 +
http://www.actionscript.org/resources/articles/54/1/Smooth-PreLoader/Page1.html<br>
 +
http://www.actionscript.org/resources/articles/165/1/Yet-Another-Flash-MX-Loader/Page1.html<br>
 +
http://www.smartwebby.com/Flash/Flash_simple_preloader.asp<br>
 +
•Controlo de música:<br>
 +
http://flashspeaksactionscript.com/flash-xml-music-player/<br>
 +
http://www.dreamincode.net/forums/topic/24626-mp3-music-player/<br>
 +
http://www.swfspot.com/swfspot/samples/flash8/Music_Player<br>
 +
http://www.bydust.com/playr-the-best-actionscript-music-player-out-there/<br>
 +
http://www.actionscript.org/forums/showthread.php3?t=85550<br>
 +
http://www.thegoldenmean.com/technique/mp3player01.html<br>
 +
 +
http://www.freesound.org<br>
 +
 +
'''Referências Bibliográficas'''
 +
 +
•‘Essential Actionscript 2.0’, de Colin Moock.<br>
 +
Editora: O’Reilly<br>
 +
Data de Publicação: Junho de 2004<br>
 +
ISBN – 0-596-00652-7<br>
 +
Páginas: 544 <br>
 +
•‘Learning ActionScript 2.0 in Adobe Flash’, de © 2007 Adobe Systems Incorporated<br>
 +
 +
<center>'''8. Anexos'''</center>
 +
<center>[[File:Menina natalparatodos.png]]</center>
 +
Fig.3 - Outros Objectos <br>
 +
<center>[[File:Templatefinal.png]]</center>
 +
Fig. 4 - Template de Entrega de ID-E

Latest revision as of 21:12, 16 January 2011

Contents

Grupo

António Alves, nº 60352
João Soares, 61925
Patrícia Oliveira, nº 60358
Telma Ferreira, nº 60360

Divisão de Tarefas

Memória descritiva

Título: 'Natal Para Todos'
O nosso grupo escolheu como tema o Natal. É uma aplicação online, onde os utilizadores podem aceder a várias informações, tais como, a definição de Natal, as suas transformações, quais os elementos do grupo e qual o objectivo e o contexto do trabalho. É uma aplicação destinada ao público em geral, mas principalmente, destinada às crianças. Para isso, usamos cores vivas e alegres para ter uma maior atracção. Com a aplicação, pretendemos ajudar os utilizadores a gastar menos dinheiro nesta época.

Lista de Requisitos Funcionais a desenvolver

Inicialmente quando a aplicação é aberta pelo utilizador aparecerá a animação, nomeadamente o Pai Natal a chegar a casa de uma família através da chaminé da lareira. Entretanto, quando ele já está dentro, larga o saco das prendas e elas soltam-se, o utilizador poderá clicar as mesmas, de onde surgirão mensagens e palavras alusivas à época natalícia. No entanto, estará ao dispor do utilizador uma série de botões animados que serão para puro entretenimento do user. Num desses botões, estará ao dispor uma ligação para uma outra parte da aplicação, onde ficarão disponíveis menus que permitem ver informações acerca do Natal e de como ter e cooperar para uma época mais sustentável.

Estado da Arte

Para a realização da nossa aplicação, resolvemos partir de um trabalho realizado por um Curso de Design (que nos foi referido pelo Professor Ivo de ID-E)que consistia numa aplicação onde mostravam como podiam as pessoas optar por um Natal mais poupado e rentável.

Na nossa pesquisa, procuramos encontrar aplicações parecidas ao que o nosso grupo quer realizar, mas não encontrámos nenhuma que se adeque ao projecto.

Identidade Visual da Aplicação

Abaixo, está representado o esquema de cores que usamos na elaboração do logótipo, nos botões do menu e nas suas respectivas legendas. Em seguida, está representado o logótipo - 'Natal para Todos'. O tipo de letra que usamos e vamos usar em todo o lettering da aplicação é o Cartwheel.
Os códigos das cores são (da esquerda para a direita):

Colour pallette reduzido.jpg
NatalParaTodos.PNG

Estrutura Arborescente

Neste separador, apresentamos a estrutura arborescente do nosso trabalho.

Arborescencia.png

Ecrãs Tipo

Neste separador, apresentamos os ecrãs tipo da aplicação.

Natal.PNG
Evolucao.PNG
Grupo.PNG
Contexto.PNG
Objectivo.PNG
Ajuda.PNG
Sair.PNG
Arvore natal.PNG
Copo.PNG
Prenda1.PNG
Prenda2.PNG
Prenda3.PNG
Prenda4.png

Personagens e adereços

Aqui deixamos dois exemplos de posições das personagens.

Menina2.jpg
Pai natal saco chao3.jpg


Calendarização de Entregas

- 26 de Novembro - grupo e memória descritiva ( concluído )
- 30 de Novembro - estado da arte (concluído )
- 3 de Dezembro - Publicação da Identidade Visual da Aplicação e da Lista de Requisitos Funcionais a desenvolver
- 9 de Dezembro - arborescência (concluído)
- 10 de Dezembro - Publicação dos Ecrãs Tipo e/ou Assets desenvolvidos na página do projecto no Wiki da disciplina.
- 13 de Dezembro - Apresentação Final (AF) do trabalho em progresso.
- 12 de Janeiro - Entrega Final do Projecto no Moodle criado para o efeito (IDE)
- 14 de Janeiro - Época de exames - entrega da aplicação multimédia, do relatório e dos ficheiros documentais (LABMM1)
- 17 de Janeiro - Época de exames - apresentação (LABMM1)

Diário de Bordo

25/11/2010:

26/11/2010:

29/11/2010:

30/11/2010:

2/12/2010:

6/12/2010:

9/12/2010:

10/12/2010:

11/12/2010 e 12/12/2010:

13/12/2010:

16/12/2010:

17/12/2010:

21/12/2010 e 22/12/2010:

23/12/2010:

27/12/2010:

28/12/2010:

29/12/2010:

4/1/2011 e 8/1/2011:

11/1/2011:

12/1/2011:

13/1/2011:

14/1/2011

Relatório do Projecto Final

Agradecimentos

O Projecto foi realizado com um enorme esforço de todo o grupo, mas durante o seu desenvolvimento houve pessoas às quais gostaríamos de agradecer pela ajuda e apoio prestados. Os nossos agradecimentos à Universidade de Aveiro, ao Departamento de Comunicação e Arte, aos docentes Hélder Caixinha e Ana Carla Amaro, da Unidade Curricular de Laboratório Multimédia I e dos professores Pedro Amado, Catarina Lélis e Ivo Daniel da Unidade Curricular de Imagem Digital Estática. Agradecemos ainda aos colegas tanto do 1º ano, do 2º ou do 3º da Licenciatura em Novas Tecnologias da Comunicação, que sempre se disponibilizaram a esclarecer dúvidas e a dar sugestões. A todos o nosso reconhecimento pelo acompanhamento e apoio dado.

1. Apresentação do Projecto

No âmbito da disciplina Laboratório Multimédia1, foi-nos proposto que realizássemos como projecto final uma aplicação multimédia interactiva dirigida aos interesses do utilizador e que fosse resultado do que foi leccionado nas aulas. Desta forma, desde cedo se começaram a realizar os documentos que suportam a produção em Flash, necessários para desenvolver a aplicação.

Relativamente á escolha do tema a abordar no produto multimédia, o grupo optou por escolher um que, embora seja do senso comum por ser tão conhecido, nos fornecia boas condições para fazer algo um pouco diferente. Assim, a ideia passa por mostrar às crianças e aos pais outras formas de ver a época natalícia, de um modo mais atractivo que o habitual.

A escolha da interface gráfica foi pensada para o utilizador usufruir da informação de uma forma mais fácil e dinâmica, mas também interactiva para não o maçar e para criar, também uma forma de interacção mais próxima com o utilizador. Para complementar este facto, escolhemos utilizar como acção imagens correspondentes ao mundo real que aprimorasse ainda mais a experiência do utilizador.

No seguimento do guião disponibilizado pelos docentes para a realização do projecto, o presente relatório divide-se em várias secções em que na primeira é feita uma apresentação geral do projecto, e seguida da descrição das fases de análise e planeamento, dos processos do desenho funcional, nomeadamente os requisitos técnicos, a estrutura arborescente e das informações relativas ao desenho de interacção e usabilidade; depois dessa fase, descrevemos em pormenor como é a aplicação multimédia. De seguida é descrito o processo de produção do projecto, nomeadamente dos processos de produção das animações, das estruturas interactivas, da integração e controlo do som, dos problemas encontrados durante o desenvolvimento do projecto e as soluções técnicas adoptadas na sua resolução. Posto isto, serão apresentadas conclusões do projecto, onde faremos uma reflexão crítica e do desenvolvimento futuro do projecto, no âmbito dos conteúdos.

No final deste relatório, está uma área reservada à bibliografia e aos anexos. Num resumo breve, a nossa aplicação foi realizada no âmbito de fazer com que as pessoas gastassem menos dinheiro na época natalícia e que aprendessem novas formas de poupar. É um trabalho em que o público-alvo é o público em geral, mas principalmente destinado às crianças. Apresentamos, inicialmente uma animação de abertura que mostra o Pai Natal a entrar numa casa, a deixar os presentes e a admiração de uma criança que acorda com o barulho. Os menus permitem ao utilizador a navegação por submenus que mostram a definição de Natal e a evolução que houve ao longo do tempo; permite ainda conhecer os elementos que formam o nosso grupo e qual o contexto e o objectivo do trabalho. Como não poderia deixar de ser, existe ainda na aplicação um botão que fornece ajuda ao utilizador sobre a forma como navegar e interagir com a aplicação. Concretamente, os objectivos da nossa aplicação são:
•Desenvolver, nas crianças, atitudes de respeito pela Natureza;
•Promover a poupança nos adultos;
•Fomentar o diálogo sobre a importância de economizar os meios através da reutilização de vários materiais;
•Alertar os pais para a necessidade de educar os filhos na reutilização de materiais e na ideia de que não só os materiais físicos é que são importantes;
•Desenvolver nas crianças uma atitude cívica.

2. Análise e Planeamento

Este projecto, devido à sua complexidade, desenvolveu-se durante todo um processo de análise e planeamento bem estruturados. Primeiramente, e após a primeira reunião de grupo, ficou decidido e aprovado pelos professores também, que o nosso tema seria o Natal e toda a efervescência provocada, pela própria época, nas pessoas e os resultados consequentes a isso. O grupo começou por distribuir tarefas, igualmente repartidas a cada elemento do grupo, nomeadamente a distribuição das pesquisas acerca do tema do Natal, do seu significado, das evoluções contínuas ao longo dos tempos, e de, como não poderia deixar de ser, sugestões sobre como ter um melhor proveito da época natalícia, reduzindo os gastos. Começamos por trocas umas primeiras impressões e a fazer rascunhos da aplicação (o que queríamos fazer, objectos a usar, personagens a criar, tipografia, menu, aplicações interactivas a realizar, etc.) Durante o processo de pesquisa, que se realizou antes de todas as fases seguintes, o grupo decidiu usar cores vivas e alegres para ter uma maior atracção dado o facto de ser uma aplicação destinada ao público em geral, mas principalmente, destinada às crianças. A partir da pesquisa efectuada, concluímos que foi difícil encontrar aplicações semelhantes àquela que queríamos construir. Ao longo da pesquisa encontramos uma aplicação interactiva online - ‘xixi no banho’ ( http://www.xixinobanho.org.br/ ) -, onde o objectivo era, tal como o nosso projecto, persuadir o utilizador a consumir menos. As tarefas foram, então, assim distribuídas:
• António Alves: vectorização de cenários e personagens, pesquisa e textos sobre o Natal e transformações ao longo dos tempos, animação em flash e aplicação interactiva.
• João Soares: fontes e logótipos, esquemas de cores, grafismo dos botões e menus, animação em flash e aplicação interactiva.
• Patrícia Oliveira: tratamento e pesquisa da informação contida no site, edição e vectorização das personagens e dos cenários e aplicação interactiva.
• Telma Ferreira: vectorização de cenários e personagens; pesquisa de informações acerca de como obter um Natal mais sustentável, estrutura arborescente, reedição do logótipo, e aplicação interactiva.
(NOTA IMPORTANTE: Os cenários, as personagens, adereços, e tudo o resto utilizado na componente gráfica, encontram-se na parte dos Anexos.) Depois de todas os ambientes gráficos, e da vectorização de botões, menus e objectos, o grupo passou para a criação da estrutura arborescente da aplicação, partindo depois para a elaboração de uma tabela com todos os requisitos funcionais da aplicação, nomeadamente todas as funções desempenhadas por cada menu e botão. Concluídas estas fases, deu-se por iniciada a fase de criação da animação, da sonorização e da implementação interactiva. Nesta fase foi fundamental a ajuda de todos os elementos do grupo, quer na implementação e incrementação de códigos ActionScript, como também na pesquisa, na análise dos conteúdos e na viabilidade da usabilidade e da interacção do nosso projecto.

3. Desenho Funcional
3.1 Requisitos Funcionais
Requisitos funcionais1.png

3.2 Estrutura Arborescente

As estruturas arborescentes são estruturas explicitamente hierarquizadas de informação em blocos e de ligações entre eles. Nesta representação, todos os conteúdos estão devidamente identificados e hierarquizados por níveis de conteúdo, respectivamente interligados por nós, que são os pontos-chave da estrutura e pelos links, que mostram as ramificações da arborescências. É importante referia a relação de direccionalidade do fluxo entre todos os nós e links. Para o presente trabalho foi especificamente pedido para que a nossa aplicação interactiva multimédia tivesse uma estrutura arborescente do tipo hierárquica não linear por permitir ao utilizador navegar entre todos os níveis da estrutura e entre os itens do mesmo nível, sem qualquer tipo de restrições; é, também, a tipologia associada ao paradigma de interacção índex onde se verifica que os menus e submenus se encontram sempre presentes; oferece, ainda, total liberdade na selecção de percursos. Na figura abaixo está a estrutura arborescente do nosso projecto. Nela consistem quatro menus, cada um com ramificações de informação relativa a cada botão. No menu Natal, o utilizador tem hipótese de descobrir mais informações sobre o tema abordado em si e sobre as evoluções dadas. É necessário referir que como estrutura arborescente hierárquica não linear, o utilizador tem hipótese de viajar entre todos os níveis da estrutura de forma independente e que tanto no próprio menu ‘Natal’ como no menu ‘Projecto’, é possível o utilizador escolher quais as informações que pretende visualizar. No último referido, o menu ‘Projecto’, permite ao utilizador conhecer os autores da aplicação, bem como todo o contexto e objectivo por trás deste projecto. Ainda no menu ‘Ajuda’, facilitamos a visita do utilizador fornecendo-lhe as devidas informações acerca da forma de navegação na aplicação. No menu ‘Sair’ o utilizador tem o poder de escolha se pretende abandonar ou não a aplicação. Como é importante, deve-se sempre ajudar à leitura da arborescência, e como tal encontra-se ainda a legenda da imagem, que explicita cada menu/botão.

Arborescencia.png

Fig. 1 - Estrutura Arborescente

3.3 Desenho de Interacção e Usabilidade

Tal como no dia-a-dia, é necessário pensar na usabilidade e na funcionalidade de todos os objectos, matérias e materiais. Para tal, todos os objectos são criados de forma a fornecerem um melhor conforto ao utilizador do produto. Estes conceitos de usabilidade, funcionalidade e fiabilidade são elementos sempre a ter em conta em qualquer produção multimédia que se destine a um público quer geral quer mais particular. É fundamental pensarmos, não só na usabilidade da estrutura, dos percursos e dos meios de navegação sem pensarmos também na interacção e do seu efeito no utilizador. O autor deve sempre considerar factores cognitivos, psicológicos, emocionais, comunicacionais, e a experiência do público, mediante a mensagem que queira transmitir. Na nossa aplicação, todos os princípios da usabilidade foram tomados em consideração, pois o reconhecimento e a compreensão são facilitados pela estruturação do layout. A nossa aplicação é bastante simples, de fácil aprendizagem, fácil memorização e, após testada por outros colegas, chegamos à conclusão que o utilizador se encontrou satisfeito com a aplicação e que o resultado final foi eficaz porque conseguiu passar a mensagem essencial. Relativamente à minimização do erro e facilidade na sua correcção o utilizador não tem qualquer problema pois com simples passos o autor da aplicação facilmente consegue identificar o erro através do código html, fazendo trace.


4. Desenho Técnico

Especificidades Técnicas Neste ecrã, a interacção com o utilizador resume-se a um botão apenas: o botão 'entrar' na animação/aplicação e a animação do título 'Natal Para Todos' No ecrã seguinte encontramos a animação principal do Pai Natal e da Menina. No menu principal, encontramos quatro botões que direccionam o utilizador para diferentes submenus com diversas informações relativas a cada tema. Fora do Menu Principal, existem diversos botões espalhados e escondidos que são clicáveis e que dão informação ao utilizador sobre diversas formas de poupar. Uma outra especificidade é o player de música que é constituído por diversos botões, nomeadamente o de Play e Pausa, e os de Avançar e retroceder na música.


5. Produção do Projecto
5.1 Estrutura e meios de navegação/interacção

A aplicação é constituída toda ela por elementos que ajudam à navegação, nomeadamente todos os botões que constituem os menus e botões que originam animações. Neste projecto, tivemos bastante em conta os meios de navegação/interacção e da sua função relativamente aos mecanismos de retorno (backs, retorno ao nó mãe/principal) – o utilizador tem simplesmente que clicar no botão fechar para sair de onde está e voltar ao ponto inicial do menu -; tivemos também em conta os mecanismos de identificação do ponto da estrutura (títulos, destaque do item no menu, etc.) – que são todos os botões devidamente identificados no menu vertical. No resto da aplicação, são visíveis inúmeras animações escondidas no cenário que se desenvolvem com o clicar do rato ou com um simples roll over.


5.2 Integração e controlo de som

A aplicação contém dois tipos de som: um som de fundo no ecrã principal e, um som que reagem à passagem e/ou clique do cursor dentro dos ecrãs informativos bem como em toda o conjunto de botões. O utilizador, ao navegar pelo menu tem a possibilidade de, caso queira parar ou reproduzir esse mesmo som, tem de recorrer a um dos dois botões situados no canto superior esquerdo da aplicação. Relativamente a este item, que é um dos componentes mais importantes na avaliação do projecto, é visível durante toda a parte da aplicação, um reprodutor de música, que vem com opções de pausa e Play da música, bem como de avançar ou retroceder para a música seguinte/anterior. Este está situado no canto superior direito da aplicação.


Player.png

Fig. 2 – Reprodutor de Música - Projecto ‘Natal pata Todos’

Todo o projecto foi realizado com a linguagem de programação ActionScript 2.0.
Para conseguirmos pôr o reprodutor de música a funcionar utilizamos o seguinte código:
mNumber = 0;
trilha = new Sound();
listaMP3 = new XML();
listaMP3.ignoreWhite = true;
listaMP3.load("musicas.xml");
listaMP3.onLoad = function ()
{
playlist = listaMP3.childNodes;
musica = playlist[(random(playlist.length))].attributes.url
trilha.loadSound(musica, true);
trilha.start(0, 0);
carregou = true;
dur = trilha.duration;
pos = trilha.position;
}


trilha.onID3 = function ()
{
artista = trilha.id3.artist;
titulo = trilha.id3.songname;
info = "" + artista + " . " + titulo;
label_.leg.info = info;
}


trilha.onSoundComplete = function ()
{
mute = true;
if (mNumber < playlist.length)
{
++mNumber;
musica = playlist[mNumber].attributes.url;
trilha.loadSound(musica, true);
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);
label.leg.info = info;
stopado.gotoAndStop(1);
trilha.start();
display.mute = false;
}
}


Para os seguintes botões para fazer avançar a música, usamos o seguinte script:
on (release)
{
if (mNumber > 0)
{
--mNumber;
musica = playlist[mNumber].attributes.url;
trilha.loadSound(musica, true);
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);
label.leg.info = info;
stopado.gotoAndStop(1);
trilha.start();
display.mute = false;
}
else
{
mNumber = playlist.length - 1;
musica = playlist[mNumber].attributes.url;
trilha.loadSound(musica, true);
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);
label.leg.info = info;
stopado.gotoAndStop(1);
trilha.start();
display.mute = false;
}
}
O outro script usado no reprodutor de música é o seguinte:
on (release)
{
if (mNumber < playlist.length - 1)
{
++mNumber;
musica = playlist[mNumber].attributes.url;
trilha.loadSound(musica, true);
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);
label.leg.info = info;
stopado.gotoAndStop(1);
trilha.start();
display.mute = false;
}
else
{
mNumber = 0;
musica = playlist[mNumber].attributes.url;
trilha.loadSound(musica, true);
info = unescape(trilha.id3.artist) + " :: " + unescape(trilha.id3.songname);
label.leg.info = info;
stopado.gotoAndStop(1);
trilha.start();
display.mute = false;
}
}


5.3 Animação

A nossa aplicação inicia-se com uma animação muito simples, com um cenário de fundo, à noite, no dia da véspera de Natal. Entretanto o plano de visão é mudado e vê-se o Pai Natal a entrar numa casa pela chaminé da lareira, a deixar os presentes na sala e a admiração de uma criança que acorda com o barulho. Concluída esta pequena animação inicial, existe em toda a aplicação pequenos botões animados que equivalem aos menus, mas também outros botões animados nomeadamente as prendas a abrirem, a chávena do café a deitar fumo, e a personagem do pai natal e da menina emitirem sons ao serem clicados, etc., tudo pequenas animações que ajudam a validar a interactividade com o utilizador.


5.4 Soluções técnicas adoptadas para a resolução de problemas

Devido ao facto de não terem sido adquiridos, em aula, os conhecimentos necessários para produzir a animação/aplicação desejada, foi necessário efectuar uma pesquisa, por via a encontrar o código pretendido e para estudo do mesmo. Recorrendo á Internet, a livros e, também, a colegas com mais conhecimentos em linguagem ActionScript 2.0, conseguimos obter a base do código que necessitávamos ao qual posteriormente usámos. Após muitas horas de estudo dos scripts e do consequente entendimento da sua estrutura lógica, foram implementados no projecto em Adobe Flash CS3.

Principais problemas:

1. Problemas relativos à introdução de um reprodutor de música que tivesse as funções de começar e pausar a música, mas também de avançar e retroceder na livraria de músicas disponíveis. Com esforço, o grupo conseguiu intercalar o código obtido de acordo com as necessidades e requisitos especificados.
2. Falhas dos botões do menu principal que se tornavam não clicáveis depois de abertos que dariam acesso a outros submenus secundários. Para este problema, o grupo não conseguiu encontrar solução, pois simplesmente já de todas as possíveis soluções experimentadas, nenhuma deu resultado.
3. Outro problema parecido com o anterior era relativo aos botões ‘fechar’ das dicas escondidas no stage. A resolução foi voltar a colocar esses botões na livraria da cena, recoloca-los na stage e atribuir-lhes de novo o código dependente da sua função.
4. Problema de que o utilizador não teria como distinguir os botões do menu dos elementos decorativos. Resolvemos da seguinte forma: ao invés de descriminarmos os botões do menu no seu estado up, dos restantes elementos, optámos por distinguir os elementos clicáveis dos não clicáveis, assim, à passagem rato, no estado over dos botões, ou seja, à passagem do cursor por cima de um botão, este ficará com outra imagem, dentro do mesmo tema e há, ainda, uma caixa de texto estática especificando o nome do botão e ainda um som ao clique do cursor no próprio.

Todos os problemas foram superados com sucesso à excepção mesmo do ponto número 2.

6. Conclusões

O desenvolvimento deste projecto permitiu-nos ter uma percepção maior relativamente ao software Adobe Flash CS3 e Adobe Illustrator CS3, na medida em que nos possibilitou aplicar os conhecimentos leccionados nas aulas, assim como a pesquisa de mais material para a realização da aplicação multimédia. O objectivo deste projecto era criar uma aplicação multimédia interactiva distinta e original sobre o Natal e sobre formas de poupar tempo, dinheiro e energia, destinado ao público em geral, mas também às crianças como forma de alerta. Embora seja um tema já do senso comum procurámos desenvolver uma aplicação com um interface gráfica apelativa e dinâmica, bem como torná-la acessível na sua navegação. Assim, esta aplicação tornou-se diferente das aplicações comuns sobre o tema, apresentando cenário criados a partir do real, fornecendo menus com botões e animações apelativas. Ao longo do trabalho, foram surgindo algumas dificuldades a nível técnico, como é o exemplo das falhas dos botões do menu, que se tornavam não clicáveis após abertos; a falha dos botões fechar que não obedeciam ao que era programado com ActionScript; a decisão de alguns aspectos gráficos, como por exemplo a forma de interacção da informação nos submenus. Contudo todas essas dificuldades foram superadas com sucesso. Assim, todos estes objectivos inicialmente definidos foram cumpridos e conclui-se que este projecto serviu como o culminar das aprendizagens adquiridas no módulo de autoria multimédia da Unidade Curricular de Laboratório Multimédia 1, mas também das técnicas e trabalhos realizados em Imagem Digital Estática, nomeadamente nos módulos de Imagem Bitmap, Imagem Vectorial e Tipografia.

6.1 Reflexão crítica

Conscientes de que este projecto envolve todo um conjunto de processos complexos como a recolha de ideias, justificação de escolhas, planificação de documentos e fundamentação de ideias alteradas, tentámos realizar da melhor forma uma aplicação que melhor satisfaça o utilizador bem como que enriqueça os nossos conhecimentos para projectos futuros. No geral, o que foi planificado nesta aplicação multimédia foi cumprido, obtendo um resultado satisfatório. A informação gráfica e a interface são mostradas de forma dinâmica, de fácil acesso, tornando a aplicação mais interessante e com vontade de a explorar. É de realçar ainda que esta é acompanhada por um botão de ajuda que indicam ao utilizador a forma de interacção, como por exemplo, e de um reprodutor de música. Para o caso de existir utilizadores que não se sintam à vontade com a interactividade da aplicação e que queiram navegar de uma forma mais rápida existe um menu lateral com botões que permitem aceder à informação principal. No entanto, houve alguns impedimentos que contiveram que a aplicação ficasse exactamente como o pretendido, como é o caso da falta de coordenação entre o grupo, e um outro erro num botão já referido acima. Existem ainda alguns problemas a nível de escala, uma vez que alguns elementos têm tamanhos muito diminutos em relação a outros. Assim sendo, a escala dos elementos não correspondem muito bem à realidade dando, no entanto, coerência ao nosso ambiente gráfico.


6.2 Sugestões para aperfeiçoamento e/ou desenvolvimento futuro do projecto

Após a realização deste projecto, podemos constatar que poderia haver alguns pontos de aperfeiçoamento, tais como:
• Uma melhor coordenação de grupo;
• Melhoria na Interacção;
• Recurso a mais elementos animados

7. Referências Web e Bibliográficas

Referências Web

•Preloader:
http://www.actionscript.org/resources/articles/54/1/Smooth-PreLoader/Page1.html
http://www.actionscript.org/resources/articles/165/1/Yet-Another-Flash-MX-Loader/Page1.html
http://www.smartwebby.com/Flash/Flash_simple_preloader.asp
•Controlo de música:
http://flashspeaksactionscript.com/flash-xml-music-player/
http://www.dreamincode.net/forums/topic/24626-mp3-music-player/
http://www.swfspot.com/swfspot/samples/flash8/Music_Player
http://www.bydust.com/playr-the-best-actionscript-music-player-out-there/
http://www.actionscript.org/forums/showthread.php3?t=85550
http://www.thegoldenmean.com/technique/mp3player01.html

http://www.freesound.org

Referências Bibliográficas

•‘Essential Actionscript 2.0’, de Colin Moock.
Editora: O’Reilly
Data de Publicação: Junho de 2004
ISBN – 0-596-00652-7
Páginas: 544
•‘Learning ActionScript 2.0 in Adobe Flash’, de © 2007 Adobe Systems Incorporated

8. Anexos
Menina natalparatodos.png

Fig.3 - Outros Objectos

Templatefinal.png

Fig. 4 - Template de Entrega de ID-E

Retrieved from "http://wikis.ua.pt/lab1ide/index.php?title=Natal_Para_Todos"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox