IDEA 59294 60962

From LABMM1_IDE

Latest revision as of 22:13, 17 January 2011

Projecto de Autoria Multimédia

Projecto realizado no âmbito das unidades curriculares de Laboratório Multimédia 1 e Imagem Digital - Estática do curso de Novas Tecnologias da Comunicação.

Título: IDEIA

Área de Conteúdos: Marketing

Constituição do Grupo

Ana Pereira 60962
Bianca Miranda 59294
Jose Rocha 43394

Memória descritiva

• A nossa aplicação multimédia consiste num website de uma loja fictícia que tem uma campanha promocional de Natal. Assim neste site, os utilizadores encontrão uma forma de viver o espírito natalício ao mesmo tempo que descobrem qual será a prenda ideal para oferecer neste Natal à mãe, ao pai, ao irmão… Tudo através do preenchimento de um questionário simples mas muito divertido.

Outros Dados

Website de promoção de uma loja em época natalícia, onde as pessoas poderão responder a um questionário que indica qual a prenda certa a oferecer a uma determinada pessoa.

Sugestões de prendas para toda a família, para a melhor amiga, para o vizinho, para o cão e até para o gato.

O website é de uma loja que vende todo o género de produtos, desde artigos para o lar, a peças de vestuário...

O slogan da campanha é: O que eles querem receber neste Natal?

Questionário simples e directo, onde à medida que as pessoas vão respondendo às perguntas, aparecem bonecos com as caraterísticas mencionadas.

No ínicio aparecem bonecos em roupa interior. Estes por sua vez vão sendo completados de acordo com as respostas seleccionadas.

As sugestões de prendas são produtos que se podem encontrar na loja.

Símbolos de Natal.

Arborescência

Objectivos

» Revelar autonomia, competências técnicas e visuais na autoria de imagem Bitmap e Vectorial;

» Revelar o domínio na criação de composições visuais;

» Revelar competências de manipulação tipográfica e no uso de cor no contexto da aplicação multimédia;

» Dominar o processo de criação de um projecto desde a sua concepção à apresentação do produto final;

» Posicionar-se criticamente em relação ao produto desenvolvido;

» Demonstrar competências de conceptualização e implementação de estruturas não lineares de informação e elementos interactivos, no respeito pelos conceitos e princípios do desenho de interacção e usabilidade;

» Revelar competências ao nível dos processos de aquisição/digitalização, edição e composição de som;

» Demonstrar o domínio dos processos técnicos de integração e implementação de som, animação 2D e interactividade no Adobe Flash e em ActionScript 2.0 (as2)

Requisitos Obrigatórios

• ser desenvolvida a 12fps;

• basear-se numa estrutura arborescente de tipo não-linear;

• integrar elementos que assegurem interacção/navegação, programados em as2

• integrar animação;

• integrar som;

• integrar elementos interactivos de controlo de som, programados em as2;

Identidade Visual

Referências Visuais:

Loja do Gato Preto

Tudo sobre o natal

Campanha coca-cola natal

Templates natal

Site Natalício

Site Natalício

Site de Quiz

Site de Quiz

Referências retiradas da internet:

Referência retirada da internet.	Referência retirada da internet.	Referência retirada da internet.	Referência retirada da internet.
Referência retirada da internet.	Referência retirada da internet.	Referência retirada da internet.	Desenho feito de raíz no illustrator.

Logotipo

Estudos de Logotipo:

Logotipo Final:

Fonte utilizada

Escolha do Tipo de Letra Principal:

Esquema de Cores

Objectos da aplicação

Esquema dos Botões que integram a aplicação:

Personagens Principais

Estudos:

Finais:

Outros Objectos a integrar/animar:

Ecrãs

Layouts dos ecrãs:

Ecrãs Tipo:

Entregas

• 26 de Novembro: Grupo e memória descritiva (realizado no ponto 1)

• 30 de Novembro: Estado da arte. Não encontramos nenhuma aplicação multimédia com funcionalidades semelhantes. Unicamente encontrámos websites de lojas que têm passatempos interactivos que incentivam o utilizador ao consumo, como por exemplo gato preto.

• 03 de Dezembro: Publicação da Identidade Visual da Aplicação e da Lista de Requisitos Funcionais a desenvolver na página do projecto no Wiki da disciplina. (disponível no tópico "Identidade Visual")

• 9 de Dezembro: Arborescência (disponível no tópico acima)

• 10 de Dezembo: Publicação dos Ecrãs Tipo e/ou Assets desenvolvidos na página do projecto no Wiki da disciplina.

• 13 de DezembroApresentação Final do trabalho em progresso.

• 12 de JaneiroEntrega Final do Projecto no Moodle criado para o efeito (IDE)

• Época de exames Entrega da aplicação multimédia, do relatório e dos ficheiros documentais (LABMM1)

• Época de exames Apresentação da aplicação em Laboratório MM 1

Diários de Bordo

• 25 de Novembro

Elementos presentes:

Ana Pereira

Bianca Miranda

Assuntos tratados:

Nesta aula de IDE, estivemos a debater sobre o tema do nosso projecto. Surgiram algumas ideias, tais como, fazer uma aplicação multimédia que ajudasse clientes de uma loja de animais a decidir qual o animal ideal para si ou fazer um website sobre arte. Entretanto decidimos fazer uma aplicação multimédia sobre uma campanha natalícia de uma loja.

Tarefas definidas:

Bianca-criar a página na wiki, enviar os e-mails aos professores, escrever a memória descritiva e pesquisar referências visuais para o nosso projecto.

Ana-enviar links de sites para o e-mail da Bianca.

• 26 de Novembro:

Assuntos Tratados:

Ontem era para colocar aqui na página os sites de referência para o nosso projecto. Contudo a Ana não me enviou um email com a sua pesquisa. Sendo assim vou colocar nesta página o resultado da minha pesquisa.

• 28 de Novembro:

Ana: coloquei alguns sites relativos ao nosso trabalho relacionados com jogos de formato quiz.

• Aula de 29 Novembro:

Elementos Presentes:

Ana Pereira;

Bianca Miranda;

Hugo Ribeiro;

Assuntos Tratados:

Nesta aula, como o Hugo esteve presente, reformulamos o nosso projecto. Decidimos então que o título do nosso projecto vai ser "IDEA" e que o produto final consistirá num website promocional de uma loja. Esta aplicação terá apenas uma máquina de prendas natalícias, que sugere produtos existentes na loja IDEA.

Tarefas Definidas:

Ana- digitalizar e enviar ao Hugo os esboços que fizémos na aula;

Bianca-Pesquisar bonecos que representem a nossa linha gráfica;

Hugo-Editar a Wiki, isto é, criar uma página nova, fazer edições e enviar aos professores o novo link;

• 2 de Dezembro

Elementos presentes:

Ana Pereira;

Bianca Miranda;

Hugo Ribeiro;

Assuntos Tratados:

Definir o tema visual- fonte,esquema de cores e logotipo e linha gráfica.

Tarefas Definidas:

Ana: sugestão de linhas gráficas.

Bianca:Edição da Wiki, e linhas gráficas.

Hugo:Acabar de conceber o logotipo.

Esboços:

Ideias de logotipos.

Estudo do ecrã principal da apresentação.

Características que influenciarão a sugestão das prendas.

• 3 de Dezembro

Assuntos tratados:

Colocar na wiki os resultados das nossas pesquisas sobre o tema visual.

Deste modo a Ana enviou à Bianca imagens retiradas da internet do tipo de desenhos que vamos querer realizar;

O hugo enviou uma protótipo do logotipo da nossa loja;

A Bianca desenhou um boneco no illustrator, digitalizou alguns esboços do trabalho realizado nas aulas e acrescentou mais conteúdo à wiki.

• Aula 6 de Dezembro (LAB/IDE)

Elementos presentes:

Hugo Ribeiro;

Assuntos Tratados:

Inicio do estudo da arborescência da aplicação.

Continuação do estudo do logotipo

• Reunião 7 Dezembro:

Assuntos Tratados:

•Assuntos Tratados: Fizemos um ponto de situação e definimos tarefas para a aula de quinta feira.

•Tarefas Definidas:

Ana: desenhar no illustrator moedas, notas e barras de ouro, em várias perpesctivas para poderem posteriormente ser animadas no Flash;

Bianca: fazer 38 prendas (bitmap)no Photoshop que ilustrem cada estado; Hugo: alterar a cor do logotipo, fazer os ecrãs tipo, duas personagens, os botões e colocar o painel de cores a ser usado.

• Aula 9 Dezembro:

Elementos presentes:

Ana Pereira

Bianca Miranda

Assuntos Tratados:

Nesta aula estivemos a fazer a arborescência e a desenhar no illustrator os botões da aplicação.

A Ana tal como combinado desenhou as moedas, as notas e as barras de ouro;

A Bianca fez as 38 prendas em photoshop;

O Hugo não cumpriu com todas as tarefas decididas e não entregou os desenhos que fez em illustrator, o que prejudicou o nosso trabalho pois não podemos dar seguimento.

Desenhos em Illustrator

Dinheiro:

Prendas:

• Reunião 10 Dezembro:

Elementos presentes:

Ana Pereira

Bianca Miranda

Assuntos Tratados:

Reformulação do grupo, nova distribuição de tarefas, criação do novo link da página.

Tarefas Definidas:

Ana- pai natal illustrator, duas personagens,características a acrescentar às personagens, reformular a arborescência, aperfeiçoar as moedas, as notas e as barras de ouro.

Bianca- desenhar os botões da aplicação em illustrator, os ecrãs tipo, logotipo, escolher tipo de letra, musica de fundo, fazer mais prendas e começar a trabalhar no flash.

• 11 Dezembro:

Tarefas Definidas:

Ana: Manteve-se as tarefas; Cumpriu com as tarefas todas.

Bianca: Tive necessidade de fazer ainda duas personagens e editar a Wiki. Cumpriu com as tarefas todas.

• 12 Dezembro:

Assuntos Tratados

Alteração do nome do projecto de "IDEA" para "IDEIA".

Tarefas Definidas:

Bianca: Fazer um surporte para a apresentação oral de IDE. Colocar o resultado do trabalho desenvolvido no fim de semana na wiki.

File:IDEIA Bianca Ana.pdf

• Ponto da Situação

Conseguimos cumprir as etapas estabelecidas até agora às duas disciplinas em causa.

As tarefas que faltam são:

»Desenhar em illustrator

• 3 tshirts

• 3 camisas

• 3 casacos de fato

• 3 calções

• 3 calças de ganga

• 3 calças de fato

• 3 saias

• 3 calções curtos

• 3 vestidos;

• Caixa de embrulho vista de cima;

»Escolher duas perguntas que traduzam caraterísticas das pessoas de quem se está a traçar o perfil e que se posssam reflectir na roupa.

»Definir a questão da atribuição de pontos e percentagem para tornar mais fácil a sugestão de prenda.

»Definir quais os sons a integrar a aplicação.

»Começar a aplicação em Flash.

• Reunião 13 Dezembro:

Elementos presentes:

Ana Bianca José

Tarefas Definidas:

Ana- Desenhos Illustrator

Bianca- Desenhar em Illustrator prenda vista de cima,fazer uma apresentação power point para IDE.

José- Propostas de música de fundo, pesquisa sobre códigos, animação do logotipo em flash.

• Aula de 16 Dezembro

Elementos Presentes:

Ana Bianca José

Assuntos Tratados:

A Bianca trouxe o desenho em Illustrator e o power point para a apresentação oral em IDE e o respectivo suporte oral. Preparação da apresentação oral do projecto em IDE. Pesquisa sobre os códigos que vamos utilizar no flash.

O José trouxe um ficheiro em flash com a animação do logotipo e respectiva música.

File:Inicio.swf

Tarefas Definidas:

Ana-roupas em Ilustrator

Bianca-Reformular e continuar a animação em flash, colocar os códigos das cores na wiki, e os ecras tipo com as guias.

José-pesquisa da música de fundo.

• Ponto da Situação:

Ana: falta concluir os desenhos;

Bianca: reformulei o ficheiro de flash com a animação do logotipo; editei o ecrã tipo do "sobre" e o esquema de cores da aplicação; pesquisei e coloquei o código necessário para que a aplicação ficasse embebida numa página html e preparada para publicação em servidor. File:Aplicacao IDEIA2.swf

José:Pesquisa sobre códigos.

• Reunião 22 de Dezembro 2010

Elementos Presentes:

Bianca

José

Assuntos Tratados:

Fizémos um ponto da situação. Decidimos disponibilizar mais informação na wiki, estivemos a ver qual seria a melhor forma para conceber o jogo em flash, estivemos a falar sobre o relatório final de Labmm1 e definimos novas tarefas.

Tarefas definidas:

Ana: enviar desenhos em illustrator para a Bianca

Bianca: Enviar ficheiro flash modificado, página html da aplicação e respectivo código utilizado para o José; começar a elaborar o relatório final de Lab; definir a música de fundo; definir as perguntas do jogo; editar a wiki e adicionar o ficheiro swf que realizou.

José: Dar continuidade ao projecto, nomeadamente começar a trabalhar no jogo; colocar na wiki os sons que pesquisou, e o ficheiro swf que elaborou; pesquisar mais códigos para o jogo;

• Ponto da Situação

Ana:fez o desenhos do rapaz com roupa casual; falta fazer os outros desenhos em illustrator

Bianca: enviou o ficheiro para o José;editou a Wiki;definiu as perguntas do jogo;

José: falta editar a wiki; Media:Som amb 2.mp3 Media:TRACK_08.mp3

Reformulação de tarefas:

Ana: fazer apenas 3 desenhos(mulher com vestido;mulher com calçoes e top;mulher com calças e camisola;

Bianca: Desenhar em illustrator: hamburguer, gelado, bola, palmeira, café,microfone, rapaz com roupa casual, com roupa clássica e com roupa desportiva; conceber em flash o ecrã do catálogo, o ecrã da loja, e o ecrã do jogo; fazer o jogo em flash com programação;criar todos os botões necessários e programá-los;

José: receber e continuar o ficheiro fla da Bianca.

• Ponto da Situação

Ana: falta os três desenhos em illustrator

Bianca: Fez os desenhos um illustrator, os ecrans em flash,o jogo, começou a fazer o pdf com o catálogo 2011(o código para abrir o pdf já consta no flash), reformular a arborescência.

José:receber o ficheiro e dar continuidade.

O que falta fazer?

Programar o botão de som on, o botão de som off, o botão ajuda, escolher a música de fundo e os outros sons que vão integrar a aplicação.

Fazer um movie clip com a animação da caixa de embrulho.

Concluir o pdf que contém o catálogo 2011.

Colocar as prendas no flash.

Preencher o template de IDE.

Concluir o relatório de LAB.

Preparar a apresentação final de Lab.

Ana:Desenhou a personagem feminina com roupa clássica;

Bianca: Fez o catálogo da loja em Illustrator;

• 30 de Dezembro 2010

Assuntos Tratados:

A Bianca enviou ao José o ficheiro em Flash para este dar continuidade e os respectivos ficheiros em Illustrator e Photoshop.

O ficheiro tem:

o ecrã sobre a loja feito com o catálogo programado, o ecrã sobre a história da loja com todos os elementos e devidamente programado, o jogo está construído e programado, só é preciso substituir a imagem masculina pela imagem feminina( aguardamos dois desenhos da Ana). As imagens que ilustram as perguntas do jogo também estão no devido local e programadas. Este ficheiro fla tem também uma pequena animação do embrulho, e a programação para as prendas que vão surgir. Os botões de controlo de som também já estão no ficheiro, só falta programá-los. O botão de ajuda também já está construído.Todos os restantes botões já estão programados. A timeline a livraria também têm os conteúdos organizados em pastas e com a respectiva identificação.

File:Aplicacao IDEIA .swf

Tarefas Definidas:

José- escolher e colocar a música de fundo na aplicação e escolher outros sons para incluir, colocar as prendas no fla, colocar códigos para animar o cursor e um código para que seja possível ao utilizador fazer o controlo do volume de som e fazer um movie_clip com as prendas a sair de dentro do embrulho.

Bianca: Continuar a construir o relatório para Labmm1.

12 de Janeiro

"Assuntos Tratados"

Bianca: desenhou em illustrator a personagem masculina com roupa clássica; elaboração do template para IDE; Acabar o ficheiro em flash( colocar mais prendas e programar, substituir a personagem masculina pela personagem feminina, mudar a música de fundo; colocar código para alterar o aspecto do cursor); e editar a parte gráfica do relatório de Laboratório.

José: Entregou o ficheiro fla à Bianca.

13 de Janeiro

Assuntos Tratados

Bianca: Alterou a música de fundo, desenhou e programou um cursor em forma de árvore de natal, colocou 24 prendas no jogo, acrescentou um ecrã para as encomendas e um ecrã para o agradecimento, organizou a timeline e a livraria, acrescentou mais elementos ao ecrã sobre a loja e ao ecrã interrogação.

14 Janeiro

Assuntos Tratados: Bianca e José: acabar o relatório. Media:Exemplo.ogg

Aplicação Multimédia-IDEIA

File:Animacao IDEIA Final.swf

Relatório

File:Relatório IDEIA.pdf

Códigos Utilizados na Aplicação

Para mudar o aspecto do cursor:

Mouse.hide();

cursor.startDrag("true");

• Código utilizado no Menu Principal:

stop();

var musica_fundo:Sound=new Sound();

musica_fundo.attachSound("musica_fundo");

musica_fundo.start();

musica_fundo.onSoundComplete = function() {

musica_fundo.start();

}

• Dentro do movie clip que faz a animação do logótipo:

var meu_som_fundo_1:Sound=new Sound();

meu_som_fundo_1.attachSound("TRACK_20");

meu_som_fundo_1.start();

• Dentro do movie clip que assegura a animação de uma caixa de texto referente às encomendas online:

on (release){

_parent.gotoAndStop ("ecra_receber");

}

• Nos outros ecrãs da aplicação utilizámos apenas:

stop();

• No botão que direcciona o utilizador para o menu principal da aplicação:

on (release){

musica_fundo.stop();

gotoAndStop ("entrada");

}

• No botão que pára a musica de fundo caso seja accionado pelo utilizador:

on (release){

stopAllSounds();

}

• No botão de play da música de fundo:

on (release){

musica_fundo.start();

}

• No botão dos créditos:

on (release){

gotoAndStop("ajuda");

}

• No botão para abrir o catálogo da loja:

on (release){

getURL("catalogo.pdf",_blank);

}

• Em termos de código, o jogo foi construído utilizando códigos básicos como por exemplo:

on (release){

gotoAndStop (9);

}

on (release){

gotoAndStop("girl1");

}

on (release){

gotoAndStop ("dinheiro1");

}