60289 61633 Projecto P2
From LABMM1_IDE
(→Relatório) |
|||
| (6 intermediate revisions not shown) | |||
| Line 34: | Line 34: | ||
|- | |- | ||
| ||● Os membros do grupo acharam que ficaria demasiado farto o facto de os resumos serem ilustrados. Como tal, achou-se por bem que as ilustrações estivessem apenas nos fundos de cada secção temática. | | ||● Os membros do grupo acharam que ficaria demasiado farto o facto de os resumos serem ilustrados. Como tal, achou-se por bem que as ilustrações estivessem apenas nos fundos de cada secção temática. | ||
| + | |- | ||
| + | | ||● Começámos por alinhavar todas as ideias e escrevê-las; desde as listas ''"to do"'' à divisão de tarefas. | ||
| + | |- | ||
| + | | ||● Dando início à concepção da parte gráfica (que preferímos que fosse bitmap, dado que queremos incluir ilustrações originais do livro), a primeira coisa que fizémos foram os botões essenciais ao funcionamento da aplicação: | ||
| + | |- | ||
| + | | || <p align="center">[[File:FW.png|70 px]] [[File:Play.png|67 px]] [[File:Pause.png|67 px]] [[File:Stop.png|70 px]] [[File:FF.png|70 px]]</p> | ||
| + | |- | ||
| + | | || <p align="center">[[File:Seta left.png|150 px]] [[File:Seta right.png|150 px]]</p> | ||
| + | |- | ||
| + | | || <p align="center">[[File:Fullscreen on.png|130 px]] [[File:Fullscreen off.png|130 px]] [[File:Quit.png|78 px]] [[File:Quit rollover.png|100 px]]</p> | ||
| + | |- | ||
| + | | ||● Conseguímos encontrar o estilo de botões de menu que tínhamos idealizado. Falta-nos agora decidir qual será a melhor maneira de os dispor: | ||
| + | |- | ||
| + | | || [[File:Menu extended.png|350 px]] [[File:Incones-2.png|350 px]] [[File:Incones-1.png|350 px]] | ||
| + | |- | ||
| + | | 24Jan ||┐ | ||
| + | |- | ||
| + | | ||● | ||
| + | |- | ||
| + | | 25Jan ||┐ | ||
| + | |- | ||
| + | | ||● Layouts/fundos terminados. Entraremos agora num estado profundo de admiração de Adobe Flash CS3. | ||
| + | |- | ||
| + | | ||● Começar a animar e a montar todas as peças até agora construídas, botões de navegação e loading. | ||
| + | |- | ||
| + | | 26Jan ||┐ | ||
| + | |- | ||
| + | | ||● Depois de testes, decidímos que o loading iria ser feito da seguinte forma: | ||
| + | |- | ||
| + | | || [[File:Loading-1.png|400 px]] [[File:seta_right.png|70 px]] [[File:Loading-2.png|400 px]] | ||
| + | |- | ||
| + | | 27Jan ||┐ | ||
| + | |- | ||
| + | | ||● | ||
| + | |- | ||
| + | | 28Jan ||┐ | ||
| + | |- | ||
| + | | ||● Últimos retoques, testar funcionalidades/feedbacks e entregar o CD-R em mão no DeCA. | ||
|} | |} | ||
<br> | <br> | ||
| Line 40: | Line 78: | ||
Foi-nos proposta, no âmbito da disciplina Laboratório Multimédia 1, a criação de uma aplicação de autoria multimédia. Optámos por escolher um tema do agrado de ambos e acordámos que "O Principezinho" seria uma boa opção.<br> | Foi-nos proposta, no âmbito da disciplina Laboratório Multimédia 1, a criação de uma aplicação de autoria multimédia. Optámos por escolher um tema do agrado de ambos e acordámos que "O Principezinho" seria uma boa opção.<br> | ||
Dentro do muito que podíamos ter feito e atendendo aos prazos reduzidos, decidímos ficarmo-nos pelo que achámos essencial: a biografia do autor, curiosidades sobre o tema, a história (resumida) e frases e citações marcantes. Completámos ainda com uma banda sonora inspirada na obra - "Inocencia" de Bosques de mi Mente.<br> | Dentro do muito que podíamos ter feito e atendendo aos prazos reduzidos, decidímos ficarmo-nos pelo que achámos essencial: a biografia do autor, curiosidades sobre o tema, a história (resumida) e frases e citações marcantes. Completámos ainda com uma banda sonora inspirada na obra - "Inocencia" de Bosques de mi Mente.<br> | ||
| - | | + | O produto é dirigido a todos os que sentem um carinho especial pelo Pequeno Príncipe do planeta B216. |
<br><br> | <br><br> | ||
=== Análise e planeamento === | === Análise e planeamento === | ||
| - | (investigação temática, estado da arte, definição do conceito…) | + | (investigação temática, estado da arte, definição do conceito…)<br> |
| + | À partida, a parte visual da aplicação já estava <br> | ||
* [http://elisiodonas.pt.vu/ Elísio Donas - ''Official Website''] - botões de som <br> | * [http://elisiodonas.pt.vu/ Elísio Donas - ''Official Website''] - botões de som <br> | ||
* [http://fogefogebandido.com/ Foge Foge Bandido] | * [http://fogefogebandido.com/ Foge Foge Bandido] | ||
| Line 51: | Line 90: | ||
=== Desenho funcional === | === Desenho funcional === | ||
==== Requisitos funcionais ==== | ==== Requisitos funcionais ==== | ||
| - | ( | + | A aplicação começa com uma pequena animação de loading. Aparece um ecrã com a famosa cobra que o escritor desenhou quando era pequeno (que todas as pessoas adultas a quem mostrou disseram ser um chapéu).<br> |
| + | Enquanto a aplicação é carregada, há uma estrelinha no canto inferior direito a aparecer e a desaparecer.<br> | ||
| + | Quando o loading atinge os 100%, o desenho da cobra passa a ser um botão clicável, dando o feedback de a cobra ficar transparente e aparecer o elefante no seu interior. Segue para o menu da aplicação.<br> | ||
| + | No menu, o utilizador depara-se com os botões de controlo do som, o botão para sair da aplicação e quatro outros botões com desenhos:<br> | ||
| + | ● os botões de som são intuitivos: play, pause, stop, retomar a música anterior e passar para a música seguinte.<br> | ||
| + | ● o botão que fecha a aplicação transporta o utilizador para um ecrã com os créditos (que contém um botão para fechar definitivamente a aplicação, com o texto ''fermer'').<br> | ||
| + | ● os restantes botões presentes no menu estão devidamente legendados:<br> | ||
| + | → o botão ''o principezinho'', que tem o desenho de um cordeiro, dá acesso ao ecrã que contém o resumo da obra;<br> | ||
| + | → o botão ''biografia'', que tem o desenho de uma rosa, dá acesso ao ecrã que contém a biografia do autor;<br> | ||
| + | → o botão ''quotes'', que tem o desenho de uma raposa, dá acesso ao ecrã que contém citações marcantes do livro;<br> | ||
| + | → o botão ''sabias que...'', que tem o desenho de uma caixa, dá acesso ao ecrã que contém curiosidades (tanto em relação à obra, como ao autor). | ||
==== Estrutura arborescente ==== | ==== Estrutura arborescente ==== | ||
(apresentação e descrição da arborescência) | (apresentação e descrição da arborescência) | ||
| + | |||
==== Desenho de interacção e usabilidade ==== | ==== Desenho de interacção e usabilidade ==== | ||
(princípios de interacção e usabilidade considerados no desenho da estrutura, percursos e meios de navegação) | (princípios de interacção e usabilidade considerados no desenho da estrutura, percursos e meios de navegação) | ||
| Line 63: | Line 113: | ||
<br> | <br> | ||
=== Produção do projecto === | === Produção do projecto === | ||
| - | |||
==== Estrutura e meios de navegação/interacção ==== | ==== Estrutura e meios de navegação/interacção ==== | ||
| + | A navegação e interacção através da aplicação baseia-se na deslocação entre frames onde cada página é criada e desenvolvida. Embora no resumo da obra, em cada página só altera o texto que é exibido. Sendo assim, criou-se um movie-clip, em que cada frame é uma sequência do texto, sobre o qual os botões de navegação desloca a cabeça de leitura, alternando o texto a ser exibido na página.<br> | ||
| + | Já na biografia, visto que optámos por ter um cenário diferente para cada parte, foram criadas duas cenas diferentes, uma em cada frame, pelas quais se desloca o utilizador através dos botões.<br> | ||
| + | Nas quotes retiradas do livro, também foi criado um movie-clip onde se pode deslocar aleatóriamente entre as suas frames.<br> | ||
| + | Os créditos não pertencem a nenhuma frame, visto que só aparecem quando o utilizador fecha a aplicação, tornando visível um movie-clip onde estão presentes os créditos e o botão que permite realmente fechar a aplicação.<br> | ||
| + | A aplicação foi também desenvolvida em cenas separadas, para uma melhor estruturação do trabalho e maior facilidade e simplicidade no seu desenvolvimento. | ||
==== Integração e controlo de som ==== | ==== Integração e controlo de som ==== | ||
| + | Ousámos utilizar um código desconhecido que nos possibilitava criar uma playlist com todas as músicas que planeámos disponibilizar na aplicação. Assim, teríamos os botões play, pause, stop, retroceder e avançar, todas a funcionar correctamente. | ||
==== Animação ==== | ==== Animação ==== | ||
| + | |||
==== Soluções técnicas adoptadas para a resolução de problemas ==== | ==== Soluções técnicas adoptadas para a resolução de problemas ==== | ||
(problemas encontrados durante o desenvolvimento do projecto e soluções técnicas adoptadas na sua resolução) | (problemas encontrados durante o desenvolvimento do projecto e soluções técnicas adoptadas na sua resolução) | ||
| Line 76: | Line 132: | ||
(no âmbito dos conteúdos programáticos da unidade curricular)<br> | (no âmbito dos conteúdos programáticos da unidade curricular)<br> | ||
Ilustrações da história. | Ilustrações da história. | ||
| - | <br> | + | <br><br> |
=== Referências Web e Bibliográficas === | === Referências Web e Bibliográficas === | ||
* [http://pt.wikipedia.org/wiki/Antoine_de_Saint-Exupéry Wikipédia - ''Antoine de Saint-Exupéry'']<br> | * [http://pt.wikipedia.org/wiki/Antoine_de_Saint-Exupéry Wikipédia - ''Antoine de Saint-Exupéry'']<br> | ||
* [http://www.paralerepensar.com.br/exupery.htm Para ler e pensar - ''Antoine de Saint-Exupéry'']<br> | * [http://www.paralerepensar.com.br/exupery.htm Para ler e pensar - ''Antoine de Saint-Exupéry'']<br> | ||
| + | * [http://www.nydailynews.com/news/national/2008/03/20/2008-03-20_nazi_pilot_saddened_by_world_war_ii_kill.html NY Daily News - ''Nazi pilot saddened by World War II kill''] | ||
* [http://pt.wikipedia.org/wiki/Le_petit_prince Wikipédia - ''Le petit prince'']<br> | * [http://pt.wikipedia.org/wiki/Le_petit_prince Wikipédia - ''Le petit prince'']<br> | ||
* [http://www.scribd.com/doc/41741415/principezinho Scribd - ''principezinho'']<br> | * [http://www.scribd.com/doc/41741415/principezinho Scribd - ''principezinho'']<br> | ||
* [http://pt.shvoong.com/books/370650-principezinho/ Shvoong - ''O Principezinho'']<br> | * [http://pt.shvoong.com/books/370650-principezinho/ Shvoong - ''O Principezinho'']<br> | ||
* [http://www.bosquesdemimente.com/ Bosques de mi Mente: ''Official Homepage''] | * [http://www.bosquesdemimente.com/ Bosques de mi Mente: ''Official Homepage''] | ||
| - | + | <br> | |
=== Anexos === | === Anexos === | ||
<br><br><br> | <br><br><br> | ||
| + | ---- | ||
---- | ---- | ||
<br><br> | <br><br> | ||
[[File:201101280541-2272.jpg|center|900px]] | [[File:201101280541-2272.jpg|center|900px]] | ||
Latest revision as of 03:35, 1 February 2011
«y además los tigres no comen hierba»
Contents
|
Projecto realizado por:
- Mariana Pulido 60289
- Vítor Gonçalves 61633
A Aplicação
| Tema | "o principezinho", de antoine de saint-exupéry. |
| Área de Conteúdos | informativo; entretenimento. |
| Público Alvo | toda a gente. |
| Objectivo(s) | homenagear a obra e o autor. |
Memória Descritiva
O nosso projecto sobre a famosa e imortal obra de Antoine de Saint-Exupéry tem como objectivo homenagear e acariciar o livro "O Principezinho".
Irá ser uma aplicação multimédia de distribuição off-line, dirigida a todos os amantes da história.
O projecto de autoria multimédia desenvolvido pelo grupo vai contar com um resumo do livro, citações marcantes, curiosidades, biografia do autor e, claro, música devidamente apropriada.
Vamos aplicar a todo o produto multimédia cores bastante neutras e relaxantes, numa perspectiva de transmitir toda uma sensação inocente e tranquilizante. Vamos também incluir ilustrações bastante simples e harmoniosas, de fácil digestão para o utilizador, dado que todo o livro passa por essa assinatura gráfica.
p.s.: a visualização do projecto não dispensa a leitura integral da obra :)
Diário de Bordo
Relatório
Apresentação do projecto
Foi-nos proposta, no âmbito da disciplina Laboratório Multimédia 1, a criação de uma aplicação de autoria multimédia. Optámos por escolher um tema do agrado de ambos e acordámos que "O Principezinho" seria uma boa opção.
Dentro do muito que podíamos ter feito e atendendo aos prazos reduzidos, decidímos ficarmo-nos pelo que achámos essencial: a biografia do autor, curiosidades sobre o tema, a história (resumida) e frases e citações marcantes. Completámos ainda com uma banda sonora inspirada na obra - "Inocencia" de Bosques de mi Mente.
O produto é dirigido a todos os que sentem um carinho especial pelo Pequeno Príncipe do planeta B216.
Análise e planeamento
(investigação temática, estado da arte, definição do conceito…)
À partida, a parte visual da aplicação já estava
- Elísio Donas - Official Website - botões de som
- Foge Foge Bandido
- Onde acaba o arco íris
Desenho funcional
Requisitos funcionais
A aplicação começa com uma pequena animação de loading. Aparece um ecrã com a famosa cobra que o escritor desenhou quando era pequeno (que todas as pessoas adultas a quem mostrou disseram ser um chapéu).
Enquanto a aplicação é carregada, há uma estrelinha no canto inferior direito a aparecer e a desaparecer.
Quando o loading atinge os 100%, o desenho da cobra passa a ser um botão clicável, dando o feedback de a cobra ficar transparente e aparecer o elefante no seu interior. Segue para o menu da aplicação.
No menu, o utilizador depara-se com os botões de controlo do som, o botão para sair da aplicação e quatro outros botões com desenhos:
● os botões de som são intuitivos: play, pause, stop, retomar a música anterior e passar para a música seguinte.
● o botão que fecha a aplicação transporta o utilizador para um ecrã com os créditos (que contém um botão para fechar definitivamente a aplicação, com o texto fermer).
● os restantes botões presentes no menu estão devidamente legendados:
→ o botão o principezinho, que tem o desenho de um cordeiro, dá acesso ao ecrã que contém o resumo da obra;
→ o botão biografia, que tem o desenho de uma rosa, dá acesso ao ecrã que contém a biografia do autor;
→ o botão quotes, que tem o desenho de uma raposa, dá acesso ao ecrã que contém citações marcantes do livro;
→ o botão sabias que..., que tem o desenho de uma caixa, dá acesso ao ecrã que contém curiosidades (tanto em relação à obra, como ao autor).
Estrutura arborescente
(apresentação e descrição da arborescência)
Desenho de interacção e usabilidade
(princípios de interacção e usabilidade considerados no desenho da estrutura, percursos e meios de navegação)
Desenho técnico
(identificação dos requisitos técnicos para a operacionalização dos aspectos funcionais)
Produção do projecto
A navegação e interacção através da aplicação baseia-se na deslocação entre frames onde cada página é criada e desenvolvida. Embora no resumo da obra, em cada página só altera o texto que é exibido. Sendo assim, criou-se um movie-clip, em que cada frame é uma sequência do texto, sobre o qual os botões de navegação desloca a cabeça de leitura, alternando o texto a ser exibido na página.
Já na biografia, visto que optámos por ter um cenário diferente para cada parte, foram criadas duas cenas diferentes, uma em cada frame, pelas quais se desloca o utilizador através dos botões.
Nas quotes retiradas do livro, também foi criado um movie-clip onde se pode deslocar aleatóriamente entre as suas frames.
Os créditos não pertencem a nenhuma frame, visto que só aparecem quando o utilizador fecha a aplicação, tornando visível um movie-clip onde estão presentes os créditos e o botão que permite realmente fechar a aplicação.
A aplicação foi também desenvolvida em cenas separadas, para uma melhor estruturação do trabalho e maior facilidade e simplicidade no seu desenvolvimento.
Integração e controlo de som
Ousámos utilizar um código desconhecido que nos possibilitava criar uma playlist com todas as músicas que planeámos disponibilizar na aplicação. Assim, teríamos os botões play, pause, stop, retroceder e avançar, todas a funcionar correctamente.
Animação
Soluções técnicas adoptadas para a resolução de problemas
(problemas encontrados durante o desenvolvimento do projecto e soluções técnicas adoptadas na sua resolução)
Conclusões
Reflexão crítica
Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto
(no âmbito dos conteúdos programáticos da unidade curricular)
Ilustrações da história.
Referências Web e Bibliográficas
- Wikipédia - Antoine de Saint-Exupéry
- Para ler e pensar - Antoine de Saint-Exupéry
- NY Daily News - Nazi pilot saddened by World War II kill
- Wikipédia - Le petit prince
- Scribd - principezinho
- Shvoong - O Principezinho
- Bosques de mi Mente: Official Homepage
Anexos
