ChocoPen

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
(Distribuição das tarefas pelos elementos da equipa)
(Distribuição das tarefas pelos elementos da equipa)
 
(29 intermediate revisions not shown)
Line 37: Line 37:
==Caracterização da equipa==
==Caracterização da equipa==
===Distribuição das tarefas pelos elementos da equipa===
===Distribuição das tarefas pelos elementos da equipa===
-
'''Alexandre:'''
+
'''Alexandre''':
-
*Pesquisa sobre os Efeitos do Chocolate
+
-
*Pesquisa sobre códigos AS2 - a implementar
+
-
*Disposição dos ícones num exemplo de menu
+
-
*Animação inicial
+
-
'''Ana Sofia:'''
+
Pesquisa sobre os Efeitos do Chocolate
-
*Pesquisa sobre a História do Chocolate
+
-
*Procura de imagens para ícones
+
Pesquisa sobre códigos AS2 - a implementar
-
*Desenho dos ícones
+
-
*Desenho do interior da caixa de chocolates
+
Disposição dos ícones num exemplo de menu
-
'''Bárbara:'''
+
Animação "Curiosidades"
-
*Pesquisa sobre os tipos de Chocolate
+
-
*Tipografia "Pusab"
+
-
*Escolha da paleta de cores
+
-
*Desenho dos vários tipos de chocolates
+
-
'''Raquel:'''
+
 
-
*Pesquisa sobre Curiosidades
+
• '''Ana Sofia''':  
-
*Elaboração do background da aplicação
+
 
-
*Elaboração do layout da aplicação
+
Pesquisa sobre a História do Chocolate
-
*Escolha do novo tipo letra (Bickhnam Script Pro)e definição final da palete de cores de acordo com o layout
+
 
-
*Desenho do exterior da caixa de chocolates
+
Procura de imagens para ícones
 +
 
 +
Desenho dos ícones
 +
 
 +
Desenho dos chocolates, chávena, colher e açúcar
 +
 
 +
Animação inicial e "História do Chocolate"
 +
 
 +
Realização da capa, contra-capa, e livrete do CD
 +
 
 +
 
 +
'''Bárbara''':
 +
 
 +
Pesquisa sobre os tipos de Chocolate
 +
 
 +
Pesquisa da receita
 +
 
 +
Tipografia "Pusab"
 +
 
 +
Escolha da paleta de cores
 +
 
 +
Desenho dos vários tipos de chocolates
 +
 +
Animação "Tipos de Chocolates"
 +
 
 +
Desenho do vinil e câmaras de filmar
 +
 
 +
Elaboração do ícone "Som" e "Sem Som"
 +
 
 +
Actualização do powerpoint da apresentação
 +
 +
 
 +
• '''Raquel''':
 +
 
 +
Pesquisa sobre Curiosidades
 +
 
 +
Elaboração do layout/interface da aplicação
 +
 +
Escolha do novo tipo letra (Bickhnam Script Pro) e definição final da palete de cores de acordo com o layout
 +
 
 +
Desenho da caixa do chocolate (fechada), mesa, parede e receita
 +
 
 +
Elaboração do ícone "sair"; “fullscreen”; “setas”; “over dos botões dos menus”; “barra de scrool”
 +
 
 +
Elaboração e manipulação fotográfica dos créditos finais
 +
 
 +
Elaboração e animação do projector de vídeo
 +
 
 +
Animação "Créditos finais” e "Menu principal"
 +
 
 +
Organização template
=Estado da Arte=
=Estado da Arte=
-
A grande influência para a realização da nossa aplicação é o trabalho realizado pelos colegas do 2º ano sobre os tipos de Vinhos, que tivemos a oportunidade de visualizar na palestra de Apresentação do Curso, em Setembro.
+
==ViPorto==
 +
A grande influência para a realização da nossa aplicação é o trabalho realizado pelos colegas do 2º ano (ViPorto), que tivemos a oportunidade de visualizar na palestra de Apresentação do Curso, em Setembro.
 +
 
 +
A paleta de cores da aplicação é extremamente sóbria: Roxo e Beije-escuro. As cores transmitem a seriedade da aplicação, e também torna-a mais minimalista.
 +
 
 +
Esta aplicação consiste em três menus principais: Mapa das Caves de Vinho do Porto, História do Vinho do Porto e Características.
 +
 
 +
Cada menu tem um símbolo que o define no menu principal: Barril, Garrafa e Cacho de Uvas.
 +
 
 +
Temos sempre presente uma barra inferior, onde aparece o link para os créditos, barra de som, botão fullscreen e botão sair da aplicação. Quando entramos noutros menus, aparecem links para os outros menus.
 +
 
 +
No Menu Mapa, podemos ver um Mapa das Caves de Vinho do Porto. As caves estão localizadas no mapa através de pontos vermelhos, que mostram o contacto da respectiva Cave quando o rato passa por cima do ponto.
 +
 
 +
No Menu História, podemos ver um vídeo sobre a História do Vinho do Porto.
 +
 
 +
No Menu Características, podemos ver as características das castas utilizadas para a produção do Vinho do Porto.
 +
 
 +
==Toblerone==
 +
Outra grande influência no nosso trabalho é o site da [http://www.toblerone.com.br/ Toblerone].
 +
 
 +
Este site inicia-se com um menu principal onde aparece uma imagem de um Toblerone, e quatro menus na barra superior: Mais que História, Mais que Chocolates, Mais que Receitas e Fale Connosco.
 +
 
 +
Na barra inferior existe o Slogan da Toblerone("Eu quero mais que um chocolate, eu quero um Toblerone"). Existe também um link para dar aos utilizadores a possibilidade de escrever e enviar um slogan. Carregando no Slogan, a barra sobe, e podemos ler alguns exemplos submetidos por outros utilizadores.
 +
 
 +
No Menu Mais que História, aparece uma série de "slides" sobre a História do Chocolate, de 1867 a 2008. Podemos navegar por entre estes slides de forma linear (através de setas colocadas nos lados direito e esquerdo do screen), mas também de forma não linear (através de uma barra desenhada ao estilo tablete Toblerone, que contém as datas em cada alto).
 +
 
 +
No Meni Mais que Chocolate, pode-se ter conhecimento dos tipos de chocolate disponíveis para venda pela Toblerone no Brasil. Estes são: Toblerone de Leite, Dark, White, e Toblerone Tobélle (bombons). Através de uma barra inferior onde aparecem as imagens promocionais de cada tipo de chocolate, podemos navegar pelos "slides" referentes a cada tipo. Existe também um botão para responder sobre qual tipo de Toblerone o utilizador gostaria de encontrar à venda no Brasil.
 +
 
 +
No Menu Mais que Receitas, encontramos as receitas de Milkshake, Brownie, Fondue e Perir Gâteau feitos com Toblerone. Ao clicar na fotografia de cada doce, abre uma página com a foto aumentada e a receita do doce em questão, e podemos navegar pelas receitas através de setas. Podemos também classificar as receitas (entre 1 a 5 corações).
-
Outra grande influência no nosso trabalho é o site da [http://www.toblerone.com. Toblerone].
+
Carregando no link "Fale Connosco", o site procede à abertura de uma página de FAQs (Frequently Asked Questions), onde podemos preencher um formulário e entrar em contacto com a empresa.
=Palete de cores=
=Palete de cores=
Line 78: Line 148:
:Na nossa aplicação vamos usar três tipos de fontes:
:Na nossa aplicação vamos usar três tipos de fontes:
-
Nome da aplicação: '''Bickhnam Scrip Pro'''
+
Nome da aplicação: '''Bickham Script Pro'''
Titulos menus: '''Vani'''
Titulos menus: '''Vani'''
Line 90: Line 160:
:A nossa ideia inicial, era criar uma a aplicação com uma barra de chocolate (vectorizada), a qual o utilizador teria de interagir (através de 3 cliques) para conseguir aceder ao menu principal.
:A nossa ideia inicial, era criar uma a aplicação com uma barra de chocolate (vectorizada), a qual o utilizador teria de interagir (através de 3 cliques) para conseguir aceder ao menu principal.
-
Porém, depois de alguma reflexão entre o grupo, decidimos que o início da aplicação será então, uma fotografia manipulada por nós, dividida em partes, como um jogo, que dará acesso ao menu principal.
+
Porém, depois de alguma reflexão entre o grupo, decidimos que o início da aplicação será a abertura de uma caixa de chocolates. Caixa essa que será permanente no menu principal e que terá os 3 botões de acesso aos 3 menus (historia, curiosidades e tipos de chocolate)
Line 117: Line 187:
===Arborescência===
===Arborescência===
-
[[File:Chocoholics_arborescencia.jpg]]
 
 +
Composta
 +
 +
[[File:Chocoholics_arborescencia.jpg]]
== Menus/Ecrãs ==
== Menus/Ecrãs ==
 +
 +
'''Inicias:'''
 +
[http://wikis.ua.pt/lab1ide/images/7/7a/Fechada.jpg Caixa fechada]
[http://wikis.ua.pt/lab1ide/images/7/7a/Fechada.jpg Caixa fechada]
Line 137: Line 212:
[http://wikis.ua.pt/lab1ide/images/8/85/Sair.jpg Sair]
[http://wikis.ua.pt/lab1ide/images/8/85/Sair.jpg Sair]
 +
 +
 +
 +
'''Finais:'''
 +
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Caixa_fechada2.jpg Caixa Fechada]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Caixa_aberta2.jpg Caixa Aberta]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Menu_historia2.jpg Menu História]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Menu_curiosidades.jpg Menu Curiosidades]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Menu_curiosidades2.jpg Menu Curiosidades 2]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Menu_tipos.jpg Menu Tipos]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Menu_sair.jpg Menu Sair]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Botoes_creditos.jpg Botões Créditos]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Botoes_curiosidades.jpg Botões Curiosidades]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Botoes_historia.jpg Botões História]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Botoes_principais.jpg Botões Principais]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Botoes_sair.jpg Botões Sair]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Botoes_som_video.jpg Botões Som e Vídeo]
 +
 +
[http://wikis.ua.pt/lab1ide/index.php/File:Botoes_tipos.jpg Botões Tipos]
==Lista de Requisitos Funcionais a desenvolver==
==Lista de Requisitos Funcionais a desenvolver==
-
Animação inicial;
+
Botões criados:
 +
 
 +
•Logo no início da aplicação, existe um botão (tampa da caixa) que dá inicio à interacção do utilizador;
 +
 
 +
•No menu inicial existem três botões, em forma de bombons (formato vectorial), aos quais foram adicionados um over de glow. Estes aparecem mais tarde, noutros menus, como opção “voltar ao menu inicial”;
 +
 
 +
•Ainda no menu inicial, existem mais três botões: uma colher, cubos de açúcar e uma receita. A colher dá acesso à sinopse da Aplicação, os cubos de açúcar aos Créditos, e a receita onde aprendemos a fazer um Milkshake de Chocolate;
 +
 
 +
•Realizámos também quatro botões que estão sempre presentes no stage, na barra inferior. Estes são: o controle de som; um botão “sobre”, de ajuda; e um botão de saída da aplicação (que possui duas opções quando seleccionado: “sim” ou “não”);
 +
 
 +
•Seis botões para o menu “Tipos de Chocolate”, em forma de diferentes chocolates (formato vectorial), todos com over;
 +
 
 +
•Oito botões para o menu “História”, em imagem bitmap, que caracterizam os séculos desenvolvidos no texto;
 +
 
 +
•Cinco botões no menu “Curiosidades”, dos quais quatro são em formato de imagem bitmap e o último em formato vectorial;
 +
 
 +
•Setas presentes em todos os menus da aplicação;
-
Menu com os diversos temas sobre chocolate;
+
•Botões de vídeo: “Play”, “Pause” e “Stop”;
-
Cada botão de acesso aos diferente menus será um bombom (formato vectorial);
+
Outros requisitos:
-
Três botões de acesso à informação (história, curiosidades e tipos de chocolate);
+
•Barra de som: O utilizador não só pode escolher se quer ouvir ou não o som de fundo, como pode também regular o volume do mesmo. Ao mesmo tempo que regula o volume do som, o botão altera-se em quatro fases (sem som, som mínimo, som médio e som máximo);
-
Botões do tipo fechar, som on/off, sair, "about", skip, setas de navegação;
+
•Barras de scroll: Em informações extensas, como as que estão presentes no menu “História” e “Curiosidades”, existe uma barra de scroll para auxiliar a leitura.
=Diário de Bordo=
=Diário de Bordo=
Line 172: Line 296:
'''2 de Dezembro de 2010'''
'''2 de Dezembro de 2010'''
-
 
*Mudança da abertura da aplicação e do menu
*Mudança da abertura da aplicação e do menu
*Publicação da identidade visual e da lista de requisitos
*Publicação da identidade visual e da lista de requisitos
Line 182: Line 305:
'''8 de Dezembro de 2010'''
'''8 de Dezembro de 2010'''
-
 
*Escolha do novo tipo letra
*Escolha do novo tipo letra
*Definição final da palete de cores
*Definição final da palete de cores
*Finalização layout da aplicação
*Finalização layout da aplicação
 +
 +
'''9 de Dezembro de 2010 - 6 de Janeiro de 2011'''
 +
*Início da animação em Flash, consoante a distrubuição de tarefas
 +
*Início da realização dos ficheiros para entregar em IDE
 +
 +
'''6 a 14 de Janeiro de 2011'''
 +
*Continuação e finalização da animação em flash
 +
*Esclarecimento de dúvidas
 +
*Entrega, 12 de Janeiro, dos ficheiros de ID-E
 +
*Entrega, 14 de Janeiro, dos ficheiros de Labm1
 +
 +
=Chocoholics SWF=
 +
 +
=Relatório Final=
 +
[http://wikis.ua.pt/lab1ide/index.php/ChocoholicsRelatorio Relatório Chocoholics]

Latest revision as of 21:56, 14 January 2011

Contents

CHOCOHOLICS

ChocoPen

Inicialmente, escolhemos este nome pois a nossa aplicação iria chegar ao utilizador através de uma pen. Contudo, devido a conflito com o método este método de distribuição, tivemos que modificar o nome da aplicação.

Chocoholics

Foi o nome escolhido, pois a aplicação destina-se aos apreciadores do chocolate.

Grupo

Memória Descritiva

Caracterização do Projecto

Fases e Calendarização das actividades

Caracterização da equipa

Distribuição das tarefas pelos elementos da equipa

Alexandre:

Pesquisa sobre os Efeitos do Chocolate

Pesquisa sobre códigos AS2 - a implementar

Disposição dos ícones num exemplo de menu

Animação "Curiosidades"


Ana Sofia:

Pesquisa sobre a História do Chocolate

Procura de imagens para ícones

Desenho dos ícones

Desenho dos chocolates, chávena, colher e açúcar

Animação inicial e "História do Chocolate"

Realização da capa, contra-capa, e livrete do CD


Bárbara:

Pesquisa sobre os tipos de Chocolate

Pesquisa da receita

Tipografia "Pusab"

Escolha da paleta de cores

Desenho dos vários tipos de chocolates

Animação "Tipos de Chocolates"

Desenho do vinil e câmaras de filmar

Elaboração do ícone "Som" e "Sem Som"

Actualização do powerpoint da apresentação


Raquel:

Pesquisa sobre Curiosidades

Elaboração do layout/interface da aplicação

Escolha do novo tipo letra (Bickhnam Script Pro) e definição final da palete de cores de acordo com o layout

Desenho da caixa do chocolate (fechada), mesa, parede e receita

Elaboração do ícone "sair"; “fullscreen”; “setas”; “over dos botões dos menus”; “barra de scrool”

Elaboração e manipulação fotográfica dos créditos finais

Elaboração e animação do projector de vídeo

Animação "Créditos finais” e "Menu principal"

Organização template

Estado da Arte

ViPorto

A grande influência para a realização da nossa aplicação é o trabalho realizado pelos colegas do 2º ano (ViPorto), que tivemos a oportunidade de visualizar na palestra de Apresentação do Curso, em Setembro.

A paleta de cores da aplicação é extremamente sóbria: Roxo e Beije-escuro. As cores transmitem a seriedade da aplicação, e também torna-a mais minimalista.

Esta aplicação consiste em três menus principais: Mapa das Caves de Vinho do Porto, História do Vinho do Porto e Características.

Cada menu tem um símbolo que o define no menu principal: Barril, Garrafa e Cacho de Uvas.

Temos sempre presente uma barra inferior, onde aparece o link para os créditos, barra de som, botão fullscreen e botão sair da aplicação. Quando entramos noutros menus, aparecem links para os outros menus.

No Menu Mapa, podemos ver um Mapa das Caves de Vinho do Porto. As caves estão localizadas no mapa através de pontos vermelhos, que mostram o contacto da respectiva Cave quando o rato passa por cima do ponto.

No Menu História, podemos ver um vídeo sobre a História do Vinho do Porto.

No Menu Características, podemos ver as características das castas utilizadas para a produção do Vinho do Porto.

Toblerone

Outra grande influência no nosso trabalho é o site da Toblerone.

Este site inicia-se com um menu principal onde aparece uma imagem de um Toblerone, e quatro menus na barra superior: Mais que História, Mais que Chocolates, Mais que Receitas e Fale Connosco.

Na barra inferior existe o Slogan da Toblerone("Eu quero mais que um chocolate, eu quero um Toblerone"). Existe também um link para dar aos utilizadores a possibilidade de escrever e enviar um slogan. Carregando no Slogan, a barra sobe, e podemos ler alguns exemplos submetidos por outros utilizadores.

No Menu Mais que História, aparece uma série de "slides" sobre a História do Chocolate, de 1867 a 2008. Podemos navegar por entre estes slides de forma linear (através de setas colocadas nos lados direito e esquerdo do screen), mas também de forma não linear (através de uma barra desenhada ao estilo tablete Toblerone, que contém as datas em cada alto).

No Meni Mais que Chocolate, pode-se ter conhecimento dos tipos de chocolate disponíveis para venda pela Toblerone no Brasil. Estes são: Toblerone de Leite, Dark, White, e Toblerone Tobélle (bombons). Através de uma barra inferior onde aparecem as imagens promocionais de cada tipo de chocolate, podemos navegar pelos "slides" referentes a cada tipo. Existe também um botão para responder sobre qual tipo de Toblerone o utilizador gostaria de encontrar à venda no Brasil.

No Menu Mais que Receitas, encontramos as receitas de Milkshake, Brownie, Fondue e Perir Gâteau feitos com Toblerone. Ao clicar na fotografia de cada doce, abre uma página com a foto aumentada e a receita do doce em questão, e podemos navegar pelas receitas através de setas. Podemos também classificar as receitas (entre 1 a 5 corações).

Carregando no link "Fale Connosco", o site procede à abertura de uma página de FAQs (Frequently Asked Questions), onde podemos preencher um formulário e entrar em contacto com a empresa.

Palete de cores

Palete de cores.jpg

Para a selecção da palete de cores recorremos:

Palete de Cores no Kuler

Fontes Tipográficas

Na nossa aplicação vamos usar três tipos de fontes:

Nome da aplicação: Bickham Script Pro

Titulos menus: Vani

Textos: Calibri

Identidade Visual da Aplicação

Animação inicial

A nossa ideia inicial, era criar uma a aplicação com uma barra de chocolate (vectorizada), a qual o utilizador teria de interagir (através de 3 cliques) para conseguir aceder ao menu principal.

Porém, depois de alguma reflexão entre o grupo, decidimos que o início da aplicação será a abertura de uma caixa de chocolates. Caixa essa que será permanente no menu principal e que terá os 3 botões de acesso aos 3 menus (historia, curiosidades e tipos de chocolate)


A aplicação consistirá em quatro menus

Menu principal: onde apareceram três botões com a forma de bombons que darão acesso aos menus secundários.
Menus secundarios:

Meio de Distribuição

O meio de distribuição como já referimos será offline

Porquê offline e não online ?

Porque assim o utilizador poderá ver a nossa aplicação sem ter que estar ligado à internet.

Som

A aplicação multimédia irá conter som, musica e video

Arborescência

Composta

Chocoholics arborescencia.jpg

Menus/Ecrãs

Inicias:


Caixa fechada

Caixa aberta

Menu História

Menu Tipos

Menu Curiosidades

Sobre o projecto

Som

Sair


Finais:


Caixa Fechada

Caixa Aberta

Menu História

Menu Curiosidades

Menu Curiosidades 2

Menu Tipos

Menu Sair

Botões Créditos

Botões Curiosidades

Botões História

Botões Principais

Botões Sair

Botões Som e Vídeo

Botões Tipos

Lista de Requisitos Funcionais a desenvolver

Botões criados:

•Logo no início da aplicação, existe um botão (tampa da caixa) que dá inicio à interacção do utilizador;

•No menu inicial existem três botões, em forma de bombons (formato vectorial), aos quais foram adicionados um over de glow. Estes aparecem mais tarde, noutros menus, como opção “voltar ao menu inicial”;

•Ainda no menu inicial, existem mais três botões: uma colher, cubos de açúcar e uma receita. A colher dá acesso à sinopse da Aplicação, os cubos de açúcar aos Créditos, e a receita onde aprendemos a fazer um Milkshake de Chocolate;

•Realizámos também quatro botões que estão sempre presentes no stage, na barra inferior. Estes são: o controle de som; um botão “sobre”, de ajuda; e um botão de saída da aplicação (que possui duas opções quando seleccionado: “sim” ou “não”);

•Seis botões para o menu “Tipos de Chocolate”, em forma de diferentes chocolates (formato vectorial), todos com over;

•Oito botões para o menu “História”, em imagem bitmap, que caracterizam os séculos desenvolvidos no texto;

•Cinco botões no menu “Curiosidades”, dos quais quatro são em formato de imagem bitmap e o último em formato vectorial;

•Setas presentes em todos os menus da aplicação;

•Botões de vídeo: “Play”, “Pause” e “Stop”;

Outros requisitos:

•Barra de som: O utilizador não só pode escolher se quer ouvir ou não o som de fundo, como pode também regular o volume do mesmo. Ao mesmo tempo que regula o volume do som, o botão altera-se em quatro fases (sem som, som mínimo, som médio e som máximo);

•Barras de scroll: Em informações extensas, como as que estão presentes no menu “História” e “Curiosidades”, existe uma barra de scroll para auxiliar a leitura.

Diário de Bordo

23 de Novembro

25 de Novembro

26 de Novembro de 2010

29 de Novembro de 2010

2 de Dezembro de 2010

6 de Dezembro de 2010

8 de Dezembro de 2010

9 de Dezembro de 2010 - 6 de Janeiro de 2011

6 a 14 de Janeiro de 2011

Chocoholics SWF

Relatório Final

Relatório Chocoholics

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox