ProjectoFinal CGLM

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
 
(35 intermediate revisions not shown)
Line 8: Line 8:
== Sobre o Projecto ==
== Sobre o Projecto ==
-
Vamos desenvolver uma aplicação online de promoção a uma série televisiva, "Modern Family".
+
Vamos desenvolver uma aplicação online de promoção da sério televisiva, "Modern Family".
Foi atribuído o nome "Modern Family WebSite" ao nosso projecto.
Foi atribuído o nome "Modern Family WebSite" ao nosso projecto.
 +
 +
O registo de imagem que usaremos será uma mistura de vectorial e bitmap. A escolha pelo vectorial deveu-se principalmente a problemas como direitos de autor das imagens ou a dificuldade de encontrá-las.
 +
 +
A aplicação conjugará várias cores, sendo que as principais são as que se seguem.
 +
<gallery>file:Esquema_de_cores_mfw.png
 +
file:VI_modernfamilywebsite.jpg|Identidade Visual Modern Family Website</gallery>
 +
 +
O tipo de letra a usar será Helvetica Neue estilo Regular para os textos longos ou etiquetas simples, e estilo Condensed Bold para títulos.
 +
 +
<gallery>File:Seasonone.png|Exemplo de um título, usando Helvetica Neue Condensed Bold
 +
File:Manny.png|Exemplo de um texto simples, neste caso uma etiqueta, usando Helvetica Neue Regular.</gallery>
 +
 +
O modo de interacção com a aplicação consistirá num paradigma ambiente, onde botões estão embebidos no cenário e o utilizador pode interagir com alguns elementos.
== Diário de bordo ==
== Diário de bordo ==
 +
 +
'''25 de Novembro'''
'''25 de Novembro'''
Formação do grupo e escolha do tema do projecto, através da consulta de outros websites como meio de inspiração.
Formação do grupo e escolha do tema do projecto, através da consulta de outros websites como meio de inspiração.
 +
 +
 +
'''29 de Novembro'''
'''29 de Novembro'''
O grupo juntou-se para discutir ideias, foi elaborado um esboço do que, em princípio, será a nossa aplicação.
O grupo juntou-se para discutir ideias, foi elaborado um esboço do que, em princípio, será a nossa aplicação.
 +
Definição de objectivos para cumprir até ao final da semana.
 +
 +
<gallery> File:Esboco.jpg | Esboço da aplicação. </gallery>
 +
 +
 +
 +
 +
'''2 de Dezembro'''
 +
 +
No dia de hoje, fizemos recolha de imagens das personagens que vão ser usadas na aplicação. Os cenários que servirão de base para a ilustração vectorial são os que se seguem:
 +
 +
<gallery> file:Casa projecto final.jpg|Esta é a imagem a ser usada como base para a introdução da aplicação. A ideia é aparecer inicialmente a casa, e depois alterar a perspectiva para dentro dela.
 +
file:Sala projecto final.png|Imagem original da sala.
 +
file:Sala perspectiva.jpg|No Photoshop, através da ferramenta Crop, activámos a opção perspective, de forma a obter uma imagem com outra perspectiva da imagem original. Isto facilita a ilustração vectorial e a interacção do utilizador com a aplicação. </gallery>
 +
 +
 +
 +
 +
'''3 de Dezembro'''
 +
 +
Elabaroção de uma base da sala onde acontecerão a maior parte das interacções utilizador-aplicação.
 +
 +
<gallery>file:Sala_base_mf.png|Através da imagem original que tínhamos conseguido no dia anterior, foram criadas as principais linhas que definem a sala, e foram feitas algumas alterações.</gallery>
 +
 +
 +
 +
 +
'''7 de Dezembro'''
 +
 +
Elaboração da arborescência da aplicação.
 +
 +
[[File:Arborescência modernf.pdf]]
 +
 +
 +
 +
 +
'''9 de Dezembro'''
 +
 +
Continuação da ilustração e preenchimento do cenário interior da casa. Os padrões, encontrados no google images, foram aplicados no Illustrator. De seguida, cada um dos objectos foi isoladamente tratado no Photoshop, com a atribuição da textura canvas (para dar um aspecto de cartão à imagem) e alteração das tonalidades.
 +
Os objectos foram também importados para um ficheiro do Flash, e foram feitas as primeiras animações. O resultado está esquematizado nas imagens que se seguem.
 +
 +
 +
Ecrã
 +
<gallery>file:Ecra 1 mf.jpg|Início da animação. Sala sem quaisquer objectos.
 +
file:Ecra 2 mf.jpg|Os objectos começam a surgir de todas as direcções, arrastados ou caídos de cima. As setas a vermelho representam alguns desses movimentos.
 +
file:Ecra 3 mf.jpg|Aparência final da animação inicial. Aqui, já os objectos necessários se encontram sob a forma de botões.
 +
</gallery>
 +
 +
Este será o ecrã principal, onde estarão embutidas todas as opções da aplicação.
 +
 +
 +
 +
 +
'''13 de Dezembro'''
 +
 +
O grupo fez a apresentação final do projecto na disciplina de Imagem Digital Estática, em que foram apresentados aspectos como o tema visual, requisitos funcionais, arborescência da aplicação e os principais elementos do guião da aplicação como os ecrãs tipo e a identidade visual.
 +
 +
<gallery>file:Casa2.png| Este será o momento inicial da aplicação. Será criado um botão que levará o utilizador ao ecrã_principal, onde decorrerão a maior parte das interacções. A vectorização do cenário encontra-se parcialmente concluída, faltando ainda a inclusão de alguns elementos estéticos.
 +
</gallery>
 +
 +
 +
 +
 +
'''14 de Dezembro'''
 +
 +
Mudança das cores do ecrã principal.
 +
<gallery>file:Mf_cenario_alterado.jpg|A barra beje será o local onde estarão dispostos os botões de controlo de som e o logo da série.
 +
</gallery>
 +
 +
 +
 +
 +
'''15 de Dezembro'''
 +
O grupo tomou a decisão de iniciar a aplicação toda desde o princípio. O tamanho insuficiente do stage, a textura aplicada no cenário foram umas das principais razões que nos levaram começar tudo do início. Então assim foi. Foram retiradas texturas e padrões ao cenário interior e as imagens foram importadas para o flash com um stage de maiores dimensões (930x520)
 +
Este é o aspecto actual do cenário interior da casa.
 +
<gallery>file:Cenario interior mf.png</gallery>
 +
 +
Neste mesmo dia, as animações iniciais foram também feitas no flash.
 +
 +
 +
 +
'''16 de Dezembro'''
 +
Elaboração e configuração dos botões.
 +
<gallery>file:Ipad01.png
 +
File:Jornal.png
 +
File:Caderno.png</gallery>
 +
 +
 +
Estes objectos estarão dispostos em cima da mesa de centro. Os restantes botões são a televisão e a moldura na parede. Estes foram feitos aquando o cenário.
 +
 +
 +
 +
Ainda no mesmo dia, foram elaborados e configurados os botões de controlo do som. Foi com este [http://www.youtube.com/watch?v=b6FmgrhLp3s vídeo] disponível no Youtube que aprendemos a usar os códigos ationscript necessários para o controlo do volume.
 +
 +
 +
<gallery>File:Botoes som mfw.png|Estes botões vão ser dispostos no canto inferior direito do stage, sobre uma barra com transparência que será colocada na zona inferior.</gallery>
 +
 +
 +
 +
 +
'''29 de Dezembro'''
 +
 +
A aplicação já se encontra quase concluída. O grupo reuniu-se para dar início ao relatório.
 +
 +
<gallery>File:MF.png|Ecrã concluído</gallery>
 +
 +
 +
 +
 +
'''Até 14 de Janeiro'''
 +
 +
A aplicação foi melhorada. Algumas animações foram adicionadas ao cenário e a qualidade da imagem e som ajustada.
 +
 +
O relatório foi completado e encontra-se em PDF no seguinte link:
 +
<gallery>file:Relatório do projecto Modern Family Website.pdf|Relatório do Projecto</gallery>
 +
 +
 +
 +
O resultado final do ficheiro swf pode ser visualizado neste link: [http://megaswf.com/serve/99066/ Modern Family Website]

Latest revision as of 00:16, 14 January 2011

Constituição do grupo

Sobre o Projecto

Vamos desenvolver uma aplicação online de promoção da sério televisiva, "Modern Family".

Foi atribuído o nome "Modern Family WebSite" ao nosso projecto.

O registo de imagem que usaremos será uma mistura de vectorial e bitmap. A escolha pelo vectorial deveu-se principalmente a problemas como direitos de autor das imagens ou a dificuldade de encontrá-las.

A aplicação conjugará várias cores, sendo que as principais são as que se seguem.

Esquema de cores mfw.png

Identidade Visual Modern Family Website

O tipo de letra a usar será Helvetica Neue estilo Regular para os textos longos ou etiquetas simples, e estilo Condensed Bold para títulos.

Exemplo de um título, usando Helvetica Neue Condensed Bold

Exemplo de um texto simples, neste caso uma etiqueta, usando Helvetica Neue Regular.

O modo de interacção com a aplicação consistirá num paradigma ambiente, onde botões estão embebidos no cenário e o utilizador pode interagir com alguns elementos.

Diário de bordo

25 de Novembro

Formação do grupo e escolha do tema do projecto, através da consulta de outros websites como meio de inspiração.



29 de Novembro

O grupo juntou-se para discutir ideias, foi elaborado um esboço do que, em princípio, será a nossa aplicação. Definição de objectivos para cumprir até ao final da semana.

Esboço da aplicação.



2 de Dezembro

No dia de hoje, fizemos recolha de imagens das personagens que vão ser usadas na aplicação. Os cenários que servirão de base para a ilustração vectorial são os que se seguem:

Esta é a imagem a ser usada como base para a introdução da aplicação. A ideia é aparecer inicialmente a casa, e depois alterar a perspectiva para dentro dela.

Imagem original da sala.

No Photoshop, através da ferramenta Crop, activámos a opção perspective, de forma a obter uma imagem com outra perspectiva da imagem original. Isto facilita a ilustração vectorial e a interacção do utilizador com a aplicação.



3 de Dezembro

Elabaroção de uma base da sala onde acontecerão a maior parte das interacções utilizador-aplicação.

Através da imagem original que tínhamos conseguido no dia anterior, foram criadas as principais linhas que definem a sala, e foram feitas algumas alterações.



7 de Dezembro

Elaboração da arborescência da aplicação.

File:Arborescência modernf.pdf



9 de Dezembro

Continuação da ilustração e preenchimento do cenário interior da casa. Os padrões, encontrados no google images, foram aplicados no Illustrator. De seguida, cada um dos objectos foi isoladamente tratado no Photoshop, com a atribuição da textura canvas (para dar um aspecto de cartão à imagem) e alteração das tonalidades. Os objectos foram também importados para um ficheiro do Flash, e foram feitas as primeiras animações. O resultado está esquematizado nas imagens que se seguem.


Ecrã

Início da animação. Sala sem quaisquer objectos.

Os objectos começam a surgir de todas as direcções, arrastados ou caídos de cima. As setas a vermelho representam alguns desses movimentos.

Aparência final da animação inicial. Aqui, já os objectos necessários se encontram sob a forma de botões.

Este será o ecrã principal, onde estarão embutidas todas as opções da aplicação.



13 de Dezembro

O grupo fez a apresentação final do projecto na disciplina de Imagem Digital Estática, em que foram apresentados aspectos como o tema visual, requisitos funcionais, arborescência da aplicação e os principais elementos do guião da aplicação como os ecrãs tipo e a identidade visual.

Este será o momento inicial da aplicação. Será criado um botão que levará o utilizador ao ecrã_principal, onde decorrerão a maior parte das interacções. A vectorização do cenário encontra-se parcialmente concluída, faltando ainda a inclusão de alguns elementos estéticos.



14 de Dezembro

Mudança das cores do ecrã principal.

A barra beje será o local onde estarão dispostos os botões de controlo de som e o logo da série.



15 de Dezembro O grupo tomou a decisão de iniciar a aplicação toda desde o princípio. O tamanho insuficiente do stage, a textura aplicada no cenário foram umas das principais razões que nos levaram começar tudo do início. Então assim foi. Foram retiradas texturas e padrões ao cenário interior e as imagens foram importadas para o flash com um stage de maiores dimensões (930x520) Este é o aspecto actual do cenário interior da casa.

Cenario interior mf.png

Neste mesmo dia, as animações iniciais foram também feitas no flash.


16 de Dezembro Elaboração e configuração dos botões.

Ipad01.png
Jornal.png
Caderno.png


Estes objectos estarão dispostos em cima da mesa de centro. Os restantes botões são a televisão e a moldura na parede. Estes foram feitos aquando o cenário.


Ainda no mesmo dia, foram elaborados e configurados os botões de controlo do som. Foi com este vídeo disponível no Youtube que aprendemos a usar os códigos ationscript necessários para o controlo do volume.


Estes botões vão ser dispostos no canto inferior direito do stage, sobre uma barra com transparência que será colocada na zona inferior.



29 de Dezembro

A aplicação já se encontra quase concluída. O grupo reuniu-se para dar início ao relatório.

Ecrã concluído



Até 14 de Janeiro

A aplicação foi melhorada. Algumas animações foram adicionadas ao cenário e a qualidade da imagem e som ajustada.

O relatório foi completado e encontra-se em PDF no seguinte link:

Relatório do Projecto


O resultado final do ficheiro swf pode ser visualizado neste link: Modern Family Website

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