Actual - Ficheiro:RelatorioLAB2.pdf | Anterior - Ficheiro:RelatorioLAB.pdf

Alexandra Silva nº 25538 | Cayna Amadeu nº 51873 |José Seabra nº 70045|Marco Pinho nº 69360| Nuno Trindade nº 69594

Índice 1 Memória Descritiva 1.1 Diário de bordo: 1.2 Distribuição de tarefas 2 Apresentação do projeto 3 Análise e planeamento 3.1 Estado de arte 4 Desenho funcional 4.1 Layout / Personagens/Objetos 4.2 Tipo de fonte 4.3 Logótipo 4.4 Estrutura arborescente 5 Desenho de interação e usabilidade (princípios de interação e usabilidade considerados no desenho da estrutura, percursos e meios de navegação) 6 Desenho técnico 7 Produção do projeto 7.1 Estrutura e meios de navegação 7.2 Cenários/ecrãs 7.3 Opção de saída 7.4 Animação 8 Integração e controlo de som 9 Soluções técnicas adoptadas para a resolução de problemas. 10 Conclusões 10.1 Reflexão crítica: 10.2 Sugestões para aperfeiçoamento: 11 Referencias Web

Memória Descritiva

• Fase Inicial (1ª ideia) : Pretendemos criar uma aplicação onde as pessoas possam tomar consciência das diferentes personagens que assumem na sua rotina quotidiana, especificamente na divisão Wc.

Estrutura da Aplicação:

Intro - Percurso até à entrada WC

1ª. Cena - Escolher Wc (Feminino ou Masculino)

2ª. Cena - Interação no Wc

• Fase Final:

Cenário 1	Cenário 2	Cenário 3
A aplicação inicia-se com a saída da pessoa do quarto, em direcção ao WC (na primeira pessoa), sendo enfatizado com o som de passos a percorrer o espaço.	chegando ao WC depara-se com duas portas distintas, devidamente identificadas (feminino/masculino) e escolhe em qual entrar, consoante o seu género.	no WC a pessoa terá à sua disposição vários objetos que fazem parte do seu quotidiano. estes objectos serão animados/interactivos (respeitando a sua real função), ex: ao clicar na gillete, a pessoa irá barbear-se. Pretende-se que a pessoa complete 4 tarefas fundamentais, que a preparem para sair de casa (neste caso, para o trabalho). Ao terminar estas tarefas, inciar-se-á um movie que despoletará o aparecimento de um labirinto que é passível ou não de ser jogado - que ao ser concluido de forma positiva, nos direccione de volta para o quarto - onde teria inicio um novo desafio. Independentemente de jogarmos ou não, podemos a qualquer momento sair do WC, mas o objectivo proposto por nós só será alcançado se todas as tarefas forem realizadas.

Diário de bordo:

Distribuição de tarefas

• Reunir as fontes de Inspiração (wcs, cartoons, labirintos, etc) - Cayna Amadeu
  
• Aprofundamento da pesquisa dos estados de arte - Cayna Amadeu
  
• Edição da Wiki (descrição do projeto, grafismos, logos, etc) - Alexandra Silva, Cayna Amadeu
  
• Criação dos Cenários - Nuno Trindade
  
• Conceção das personagens e objetos - Nuno Trindade e José Seabra
  
• Execução do labirinto - Marco Pinho
  
• Desenvolvimento do layout das mensagens - Alexandra Silva; Nuno Trindade; Marco Pinho
  
• Sound design - Marco Pinho
  
• Elaboração do relatório - Alexandra Silva
  

Apresentação do projeto

Este projeto foi desenvolvido no âmbito da unidade curricular de Laboratório Multimédia 1, em articulação com a unidade curricular de Imagem Digital Estática. O nosso projeto consiste acima de tudo numa narrativa interativa, que se insere na área de entretenimento e tem como plataforma de suporte a world wide web (flash incorporado num website), em formato on-line à qual demos o nome de “On Time”. Esta aplicação nasceu da vontade de tentar criar uma aplicação que espelhasse os conhecimentos adquiridos na U.C. de Imagem Digital Estática (praticamente toda a estrutura visual foi desenvolvida) e Laboratório Multimédia I (implementação da interatividade que sustenta a nossa aplicação, pelo recurso ao programa Flash e da linguagem de programação AS2). Convém frisar que numa fase inicial ainda não tínhamos definido um nome, ou enredo. Porém, em conversa com os professores intervenientes neste projeto, decidimos que a nossa aplicação teria como tema principal o tempo físico. Contudo, sendo este tema tão subjetivo especificamo-lo para o tempo aliado à realização de tarefas em determinados compartimentos na casa, antes de sair. Escolhemos a divisão WC como subtema a desenvolver essas mesmas tarefas. Optamos por unanimidade designar a nossa aplicação de “On Time”. Assim, num primeiro cenário poderemos entrar num corredor, em 1ª pessoa – salientado pelo som de passos a caminhar em direção às portas do WC. Ainda dentro deste cenário teremos, através de “zoom” a aproximação às portas do WC, onde – ainda antes de chegar o usuário poderá interagir com alguns objetos – poderá optar entrar por uma dessas portas devidamente identificadas. Ao escolher uma das portas entra no cenário “WC”, no qual o usuário poderá explorar o espaço circundante e completar 4 tarefas previamente definidas por nós (comuns ao nosso dia-a-dia, como por exemplo: lavar os dentes). A criação de tarefas confere uma certa evolução no nosso enredo que se irá intensificar ao – após se realizar essas mesmas tarefas – será despoletado um movie que direciona a personagem para o jogo “labirinto”. A realização deste labirinto possibilita a saída do cenário – que permitirá a conclusão deste desafio. Este jogo constitui-se como um evento inesperado, criando assim um elemento surpresa). De uma forma geral, a nossa aplicação baseia-se numa narrativa simples, cujo principal objetivo é entreter o usuário, sem que tal vá requerer algum esforço da sua parte, erros ou ações irreversíveis, mas sim um género de alienação ou pura descontração. Com o desafio terminado, mantemos o final em aberto, permitindo continuações possíveis para outros compartimentos da casa. Conceito inicial vs Conceito final: Este conceito final veio completar a nossa ideia inicial de criar uma mera história interativa, sem que existisse algum tipo de desafio inerente, ou algo que remetesse para a criação de jogo – já que o nosso foco estaria para os diferentes papéis/personas que nós assumimos nas nossas rotinas (consciente ou inconscientemente). Com a ideia de “tempo” associada, pudemos criar uma narrativa mais dinâmica, que detém um grau de complexidade baixo – que não sugere grande capacidade de raciocínio ou destreza. Desta forma, para que o nosso propósito fosse respeitado, não nos focamos tanto na questão da complexidade de um jogo, mas sim nos elementos gráficos e os objetos interativos – que apesar de não constituírem um desafio per se, são consistentes com o mundo de cada um de nós, o que nos permite entender melhor o conceito da aplicação.

Análise e planeamento

Estado de arte

Antes da sua definição, tal como a entendemos, tivemos de pesquisar e investigar outras aplicações (o que revelou ser uma tarefa difícil, já que não encontrámos nenhuma outra que traduzisse fielmente a nossa ideia). Porém, destacamos a página Web http://www.animad.gr/, por reunir ilustração e animação. Na página inicial, existem vários elementos interativos que antes de qualquer ação do usuário, já estão animados e que o simples clicar remete para janelas pertinentes. Por exemplo: ao clicarmos no telefone que já está a vibrar (como se tivesse uma chamada em espera) direciona-nos para os contactos. Na agenda, percebemos que ao reunir as letras dispersas construímos a palavra “clientes”, surgindo assim a listagem desses mesmos clientes. O objeto “pena” e “tinteiro” abrem uma janela que permite ao usuário contribuir com o seu feedback acerca da página/empresa. O portfólio encontra-se embutido num desenhado pendurado, sob a forma de stickman. Já as cartas espalhadas pelo chão informam o usuário acerca das novidades ou feedback da empresa aos seus utilizadores, com mensagens como "feliz ano novo", etc. Depois de entrarmos nas portas deparamo-nos com jogos, ou animação de cenários que - por sua vez - nos vão exibindo mensagens de diálogo, exemplo: "you need to find the key in the kitchen". Todos os cenários/portas permitem o retrocesso à página inicial, através do botão "back". Quanto a esta página, por mais completa e fascinante que seja, consideramos que – nesta fase - seria demasiado ambicioso da nossa parte criar algo desta magnitude, porém, tentámos tomá-lo como fonte de inspiração e, qui ça, um objectivo futuro. Outras aplicações Encontrámos diversas aplicações – que ainda que não sejam tão completas quanto a nossa página de eleição supracitada, são compostas por grafismos interessantes – tais como: •http://meninas.1001jogos.pt/murphys-love-laws.html; •http://www.tomsgames.com/game-17235-play-prom-preparation-makeover.php.

Já na escolha do cenário e realização de tarefas minimalistas num WC, apontamos páginas Web como: http://habilidade.1001jogos.pt/escape-the-bathroom.html. Para a investigação visual de WC’s (perspetiva, disposição/organização dos objetos) procurámos páginas sobre decoração de interiores: http://www.casaeplanos.com/artigos/casa-de-banho.html e http://www.i-decoracao.com/casa-banho. Adotámos como pedra basilar do cenário WC, o genérico da série “Shameless” – sugerido pelo professor Mário Vairinhos. ==Cores==: como a escolha dos nossos e cenários se relacionam com o efeito cartoon e reconhecendo que a cor funciona como uma forma de atração ou repulsão – pelo facto de corresponder a uma forma de comunicação visual – tentámos conferir intensidade nalguns elementos da nossa aplicação (geralmente os associados a ações/eventos). A escolha de valores e proporções distintas de saturação, fará com que algumas cores vibrem e outras neutralizem os elementos, para focar os essenciais (caso do cenário do WC onde estão destacados os objetos da animação: escova dos dentes, desentupidor, secador, máquina de barbear, escova). Já no jogo do labirinto empregámos cores neutras (cinzas, brancos e pretos), para não desviar o utilizador do seu propósito e também para diferenciar o elemento dos demais grafismos. De uma forma geral, ao estudar a combinação das cores, baseamo-nos num equilíbrio da composição entre cores complementares e as de maior contraste.

Desenho funcional

O nosso projeto inicia-se com um preloader consistente com o efeito cartoon. De seguida, depois do seu loading, surge o nosso logótipo “On Time”, que irá – através da animação – transparecer a ideia de um relógio a cair (semelhante ao movimento de uma moeda), acompanhado das letras “On Time” que irão descer e pousar nesse mesmo relógio. É esta animação que nos permitirá aceder à aplicação. Entramos para o cenário “corredor”, comum a tantos outros, com a particularidade de que existem objetos contidos dele, suscetíveis de conter animação, como por exemplo: poderemos clicar no vaso das flores e verificar que as pétalas caem; independentemente da ação do usuário surge uma aranha no candeeiro junto à porta masculina realizada em flash, através de brush, pela modificação e otimização das curvas, em movimentos pendulares. A mesma aranha inicia a ação ao sair do candeeiro. Além destas ações, avistamos um vaso chinês sob a forma de botão que estará em rotação de 360º, que ao clicar nos direciona para outra animação - um chinês que contém uma mensagem (a titulo lúdico). Pretendeu-se ainda criar o efeito sticker no tapete, através do recurso a máscaras. E, por último, encontramos nas portas, a digitação de definições do dicionário (http://priberam.pt) quanto ao que significa ser homem e mulher. Após ler estas mensagens, será escolhida a porta de entrada para o cenário WC , no qual se irão realizar algumas tarefas que implicam o rollover em determinados objetos: escova de dentes, máquina de barbear, secador, embalagem de gel. Na banheira, existe um movieclip que fará com que o usuário tome banho e automaticamente se ouça cantar algumas músicas (incluídas num musicplayer que contém várias músicas e distinções de volume). Neste cenário pretende-se que sejam realizadas 4 tarefas previamente selecionadas por nós (aparecerá um diálogo de texto com esta indicação) que irá despoletar um movieclip (frasco de comprimidos a cair na sanita) que permitirá ao usuário o acesso a um mini-jogo sob a forma de labirinto que facultará a saída satisfatória do compartimento WC. Esta saída, dará acesso a novos compartimentos que não trabalhámos, mas que se constituem como possibilidades futuras. O utilizador pode realizar as tarefas ou sair a qualquer momento da aplicação, se assim o desejar. Decide a audição ou não do som integrado, através do recurso aos símbolos do tipo button “som on”, “som off”.

Layout / Personagens/Objetos

Usámos os cartoons para criar uma desproporção face à realidade (nas personagens). Ainda que inicialmente se tenha tornado difícil encontrar um ponto de comum na escolha da personagem, fomos unânimes relativamente ao exagero das características das personagens para reforçar a ideia de fantasia ou até dotá-la de um certo humor (ilustrado na dentição), através dos “apêndices” (exemplo: sobrancelhas compridas no homem, orelhas maiores nas duas personagens, ou olhos grandes por oposição a lábios pequenos, na mulher). Tornou-se importante evidenciar a face das personagens pelo facto de focarmos as ações do cartoon frente ao espelho (com a exceção do banho). Os cenários, apesar da consistência com o efeito cartoon, tentam manter uma aproximação à realidade. O jogo do labirinto recria a textura dos jogos de 8 bits. Todos estes elementos foram vetorizados, para que não se perdesse qualidade e definição com a utilização do fullscreen na aplicação interativa. Ao desenhar os elementos preocupámo-nos com os princípios básicos da animação, tentando que as ações fluíssem, sem que fossem abruptas e pouco orgânicas. Uma vez que se tratava de cartoons – e como já foi mencionado – exagerámos nalgumas características físicas, para corroborar o caráter lúdico e descontraído que pretendemos que a nossa aplicação contenha. Tivemos particular interesse pelo posicionamento dos objetos nos cenários, nas personagens, na incidência da luz e nas sombras. Tentámos equilibrar o “timing” para que as ações não passassem despercebidas.

Tipo de fonte

usámos a fonte Markus Ink, criada em 2009 por Ferran Lopez, distribuída gratuitamente pela Donationware, catalogado na “handwriting” por se assemelhar ao efeito cartoon no qual se alicerça a nossa aplicação e por permitir acentuação.

Logótipo

seguimos a regra KISS (Keep it short and simple) e usámos o conceito da hand writing para as letras e a coerência visual do relógio com os cenários, objetos e personagens (baseados em sketches que são posteriormente vetorizados), para manter uma coerência visual do logótipo com os cenários, objetos e personagens.

Estrutura arborescente

Na nossa estrutura arborescente, do tipo composta, existe uma hierarquia de conteúdos representada pelos nós e respetivas ramificações. Como pontos-chave do mapa de navegação temos o nó “home”, “casa de banho” (masculina e feminina) e o jogo do labirinto. O nó do “hall” assegura a ligação entre as casas de banho e estas por sua vez fazem-no com as tarefas que designámos. Estas tarefas não possuem descendência e permitem que o utilizador navegue entre elas de forma sequencial. Não existem menus, nem submenus, mas sim botões embebidos que permitem a navegação e promovem a exploração. É um pouco mais restrita e complexa, daí ter uma estrutura diferente da habitual, apesar de ser considerada composta ao permitir a coexistência de todas as outras. Não existe uma liberdade total na seleção dos percursos, uma vez que é necessário que realize as ações de forma sequencial para que exista uma certa lógica e seja bem-sucedido na realização da aplicação (execução de quatro tarefas leva o usuário para o jogo do labirinto – cuja cumprimento é facultativo – uma vez que pode sair a qualquer momento da aplicação).

Desenho de interação e usabilidade (princípios de interação e usabilidade considerados no desenho da estrutura, percursos e meios de navegação)

Pautámos o nosso desenho de interação e interface pelo princípio da consistência. Colocámo-nos na posição de utilizadores e verificámos que não é necessário que exista um vasto conhecimento ou experiência prévia da parte do usuário. Os nossos objetos estão dispostos de forma lógica, agrupada e similar aos de um corredor ou WC comum. Fizemos uma discriminação cromática para diferenciar os botões de texto e o jogo do labirinto dos demais elementos que são facilmente reconhecidos pelo utilizador (metáfora gráfica). No que diz respeito à usabilidade, esta aplicação é bastante acessível numa primeira utilização, é de fácil memorização e relativamente satisfatória – para os nossos objetivos - minimiza erros na exploração através de botões de texto (que servem para manter os utilizadores informados sobre as suas ações/erros, como por exemplo, quando no cenário “corredor” tenta subir as escadas, aparece uma mensagem indicando-lhe que está a ir noutra direção que não a pretendida). Não existem aprendizagens adjacentes, uma vez que visa apenas um momento de descontração. Não possui mecanismos de retorno, porém, no jogo de labirinto podemos encontrar um mapa de navegação que mostra a estrutura do mesmo e localiza o utilizador com um ponto vermelho. Tentámos aliar a máxima KISS (keep it simple, stupid) nos meios de navegação/interação, bem como nos restantes grafismos, ao princípio da simplicidade. Desta forma não sobrecarregámos o utilizador com alternativas (caso da inexistência de botões de retorno, mas sim da função “quit”). Ao nível da linguagem, apesar de ser clara, respeita o título do nosso trabalho e é feita em inglês – o que implica que o usuário conheça esta língua.

Desenho técnico

identificação dos requisitos técnicos para a operacionalização dos aspectos funcionais) Recorremos maioritariamente a uma mesa digitalizadora para desenhar praticamente todos os elementos gráficos e vetorizamo-los no Illustrator CS6, pelo elevado grau de compatibilidade e integração entre este programa e a ferramenta de autoria multimédia Adobe Flash CS6 que serviu, juntamente com a sua programação em ActionScript2, para a produção das animações inerentes ao projeto. A junção destes programas permite que se preserve a edição de todos os elementos e das suas características. No que diz respeito à sonorização, optámos por utilizar o programa Audacity para a edição dos sons integrantes. Para a captação/gravação de áudio usámos o gravador Zoom H4. Na composição da música 8 bits, recorremos ao programa “garageband” da Apple e ao plugin “magical8bitPlug” (convém salientar que existem três momentos musicais distintos : intro, play e game over que acentuam as características dos jogos dos anos 80, por exemplo, tal reflete-se no delay existente na opção “Play”). Para a criação da música de ambiente, usámos instrumentos virtuais nativos.

Produção do projeto

Estrutura e meios de navegação

A nossa navegação/interação suscita a manipulação e navegação, pois não existe uma sequencialidade per se, nem temos listagens de conteúdo semelhante às da exploração e browsing. Assim, pretendemos que o utilizador manipule os objetos/símbolos sob a forma de botão e realize eventos em função da passagem do rato, como o rollOver para abrir, fechar, seleccionar, entre outros. Existem instâncias que facultam o acesso às tarefas e objetos (símbolos de tipo button) programados para evocar funções em específico – por exemplo ao clique do rato pode : (botões de música – play, stop, volume), fechar a aplicação (por exemplo), pois assim enfatizamos a componente gráfica, aliada à interativa. Temos também caixas de diálogo que informam ou estabelecem o sub-diálogo com o utilizador, perguntando-lhe se quer sair da aplicação (cenário), ou do jogo. A criação dos botões permite ao utilizador que controle o fluxo informativo. E temos quer time-based (sobretudo a utilização do stop();) para mandar parar a cabeça de leitura, aquando determinada frame , quer user-based que mediante a navegação do utilizador provocam determinada resposta (saltar para determinada frame).

Cenários/ecrãs

Opção de saída

Durante toda a aplicação e consequente navegação, o utilizador pode optar por sair/quit a qualquer momento. Existe um símbolo do tipo button presente em todos os cenários que permite esta ação. Ao selecionar esta opção, aparecerá uma caixa com dois botões designados de "sim" e "não", para que o utilizador confirme ou cancele a saída da aplicação. Caso queira sair, o código correspondente é : on (release){ fscommand (“quit”) ; }

Animação

Através da criação de imagens estáticas, com diferenças de ângulo, apresentadas de forma sequencial com velocidade, damos a ilusão do movimento/continuidade (caso da rotação do vaso chinês, por exemplo). - Princípio fundamental da animação - persistência da visão. – Usámos a animação frame-a-frame, mas na maior parte dos cenários e objetos fizemo-lo por keyframing (já que desenhar todos os momentos da animação se tornava uma tarefa longa) e animação baseada em linguagens de programação.

Integração e controlo de som

A sonorização foi tratada através do Audacity. Incluímos uma música de fundo através do acoplamento de variáveis em Action Script 2.0. A integração e controlo de som interno existente na library, passa pela declaração da variável, de tipo sound à qual o som será acoplado : var meu_som_fundo:Sound=new Sound(); meu_som_fundo.attachSound("som_fundo"); Porém, este código só por si não significa que a música comece a tocar. Apenas o acopla. Torna-se necessário que esteja associada uma ordem de play a uma frame. No nosso caso, está associado a um símbolo do tipo button, como tal, o código a utilizar foi: on (release) { meu_som_fundo.start(); meu_som_fundo.onSoundComplete = function() { meu_som_fundo.start(); }

O utilizador pode controlar o som livremente (ligar, desligar - através de símbolos do tipo button) ao longo de toda a navegação. (dar exemplo printscreen)

Soluções técnicas adoptadas para a resolução de problemas.

Este projeto tornou-se um pouco difícil pelo ponto de referência que possuíamos. Ao nos focarmos em algo, como a página web “animad”, esquecemo-nos da formação insuficiente que ainda possuímos e que teve de ser colmatada através do recurso às mais variadas consultas de informação em páginas web, fóruns, youtube – onde tínhamos acesso a tutoriais e explicação de certos conceitos que se tornavam imperativos para a execução da nossa visão. No jogo do Labirinto tivemos de recorrer ao hitTest, apesar de acharmos que não é a melhor solução, pois a detecção não está a funcionar devidamente (a personagem desloca-se além dos limites desenhados mais especificamente nos cantos, até cerca do registration point – quando na verdade, essa detecção deveria ser feita quando as extremidades do jogador tocam nas dos limites do labirinto. Além do hitTest, fomos procurando novas soluções, através de : variação do valor de bounce, do speed do jogador, do aumento da espessura dos limites, do preenchimento de zonas estratégicas (os cantos), das dimensões do jogador. Porém, de todas, as que nos pareceu mais gratificante e viável, foi mesmo o aumento da espessura dos limites. Quando tentávamos exportar os ficheiros de 8bits para o programa de edição áudio Audacity, este não permitia, pois tem um limite mínimo de exportação de 16bits. Daí termos usado o plugin “magical8bitPlug”, não só por simular a sonoridade 8 bits – tal como queríamos – mas também por estar de acordo com o ambiente gráfico criado no jogo do labirinto.

Conclusões

Reflexão crítica:

Ainda que na fase inicial tivéssemos tido dificuldades na definição do conceito em si – pois tínhamos somente traçados alguns objetivos que pretendíamos alcançar – escutámos a atentámos para as opiniões dos professores intervenientes no projeto (que foram fundamentais para uma redefinição do projeto em si). Acreditamos que de certa forma todos evoluímos não só pela consolidação dos conhecimentos adquiridos ao longo da unidade curricular de laboratório multimédia 1, mas também pela exploração de novas ideias. Este projeto proporcionou-nos uma maior noção acerca dos nossos pontos fontes e fracos – constituindo-se assim como uma mais-valia para o nosso crescimento enquanto alunos e futuros profissionais da área. Pudemos verificar a complexidade adjacente a este tipo de projetos, o que nos deu uma visão mais realista do que será o mercado de trabalho, pois por mais ferramentas que tenhamos utilizado nas aulas, necessitámos de uma extensa pesquisa/investigação associada à prática, para percebermos um pouco mais acerca das funcionalidades dos programas em questão. A entreajuda e companheirismo estiveram sempre presentes, bem como o apoio dos professores a qualquer dúvida que surgisse. De uma forma geral, estamos satisfeitos com o resultado – tendo em conta aquilo a que nos propomos conceber e o tempo que dispúnhamos.

Sugestões para aperfeiçoamento:

Relativamente ao Jogo do Labirinto, encontrámos a função “waypoints” que nos pareceu mais adequada, mas que não foi possível implementar, pela falta de alguns conhecimentos. Esta função faz com que um objeto se desloque num trajeto definido entre um ponto e outro. Para uma próxima estaremos mais aptos para a sua implementação. Como tivemos dificuldades na definição do conceito, é natural que surgissem todos os dias ideias diferentes que acabámos por descurar, por uma questão de gestão temporal e também coesão. Com mais prática, acreditamos que este projeto ficaria melhor, se fosse mais interativo e dinâmico (com mais cenários, símbolos, eventos, etc) com graus diferentes de complexidade. De qualquer das formas sentimo-nos muito satisfeitos com o resultado.

Referencias Web