ProjectoFinal CGLM

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
(→Diário de bordo)
 
(29 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.
Line 15: Line 15:
A aplicação conjugará várias cores, sendo que as principais são as que se seguem.
A aplicação conjugará várias cores, sendo que as principais são as que se seguem.
-
<gallery>file:Palete cores mf.jpg</gallery>
+
<gallery>file:Esquema_de_cores_mfw.png
 +
file:VI_modernfamilywebsite.jpg|Identidade Visual Modern Family Website</gallery>
-
O tipo de letra a usar será, provavelmente, Helvetica.
+
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.
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.
Definição de objectivos para cumprir até ao final da semana.
 +
 +
<gallery> File:Esboco.jpg | Esboço da aplicação. </gallery>
 +
 +
 +
'''2 de Dezembro'''
'''2 de Dezembro'''
-
No dia de hoje, fizemos recolha de imagens das personagens que vão ser usadas na aplicação. Foi também decidido que os cenários vão ser imagens vectoriais. Os cenários que servirão de base para a ilustração vectorial são os que se seguem:
+
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.
<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 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>
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'''
'''3 de Dezembro'''
Line 46: Line 62:
<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>
<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