Informedia fotografia
From LABMM1_IDE
Evapereira (Talk | contribs) (→Grupo de projecto) |
Evapereira (Talk | contribs) (→Grupo de projecto) |
||
| Line 1: | Line 1: | ||
== Grupo de projecto == | == Grupo de projecto == | ||
| - | + | [http://wikis.ua.pt/lab1ide/index.php/User:Evapereira Eva Pereira - 41549] | |
João Gonçalves 42328 | João Gonçalves 42328 | ||
Revision as of 20:58, 28 January 2011
Grupo de projecto
João Gonçalves 42328
Temática
O nome do projecto denomina-se "Informedia.Studios - Fotografia" e consiste de uma aplicação efectuada por uma empresa fictícia de nome "Informedia.Studios" produtora de aplicativos informativos sobre o mundo multimédia. Neste caso em concreto teve-se como objectivo transmitir a um público alvo interessado e desconhecedor, informação de vários tipos sobre o tema “fotografia” bem como toda a sua envolvente. A denominação "Informedia.Studios - Fotografia" define o nosso trabalho pois o pretendido é produzir uma aplicação que informe o utilizador através de diversos elementos textuais bem como audiovisuais e animações no âmbito da multimédia interactivo, isto sobre a temática da fotografia.
Relatório
1. Apresentação do projecto
Neste relatório pretende-se descrever as etapas realizadas no desenvolvimento de uma aplicação multimédia, em Adobe Flash CS3, no âmbito da disciplina Laboratório Multimédia I. O nome do projecto denomina-se "Informedia.Studios - Fotografia" e consiste de uma aplicação efectuada por uma empresa fictícia de nome "Informedia.Studios" produtora de aplicativos informativos sobre o mundo multimédia. Neste caso em concreto teve-se como objectivo transmitir a um público alvo interessado e desconhecedor, informação de vários tipos sobre o tema “fotografia” bem como toda a sua envolvente. Assim sendo, podemos afirmar que o nosso público alvo engloba uma faixa de idades bastante alargada pois é destinado a pessoas que se interessem por fotografia e que consigam usar a aplicação, sendo excluídos os casos de analfabetismo ou crianças em idade pré-escolar. A denominação "Informedia.Studios - Fotografia" define o nosso trabalho pois o pretendido é produzir uma aplicação que informe o utilizador através de diversos elementos textuais bem como audiovisuais e animações no âmbito da multimédia interactivo, isto sobre a temática da fotografia.
2. Análise e planeamento
A temática sugerida foi a primeira ideia considerada pois ambos os elementos do grupo partilham o gosto por fotografia e quando se tocou no assunto ficou logo decidido que o trabalho seria nessa área. A ideia da metáfora do estúdio fotográfico apareceu no decorrer de pesquisas na web sobre o tema. Decidiu-se então que seria interessante recriar o estúdio de forma a que o utilizador interagisse com os diferentes elementos visuais, neste caso, as fotografias. Ficou também estabelecido que o estúdio não deveria ter muitos elementos visuais para não sobrecarregar o utilizador com informação desnecessária. A nossa interface baseia-se um pouco num produto já existente na web (http://images.templatemonster.com/screenshots/31500/31589.html) no entanto não havia o intuito de esta ser uma aplicação online. No momento em que o utilizador tem acesso ao site ocorre um momento de loading inicial, de seguida entra no menu, e no ecrã pode-se observar o logo da empresa, neste caso "Qepico.Studio". Juntamente com o logo também estão presentes 6 quadrados coloridos e quando o utilizador passa o rato por cima surgem os nomes dos diferentes caminhos possíveis de exploração da aplicação.
3. Desenho funcional
3.1 Requisitos funcionais
Criou-se o movie com as dimensões 1200x800.
Cena “Início”
Criou-se a layer “fundo_mercury”, desenhou-se um rectângulo sem stroke e com as mesmas dimensões do stage, aplicou-se a cor “Mercury” presente na palette “Crayons” nas opções relativas às cores no Adobe Flash CS3 e alinhou-se ao centro no stage. Converteu-se o fundo num símbolo gráfico com o nome “fundo_mercury”. Acrescentaram-se frames até à 60 e converteu-se a última frame numa keyframe. Colocou-se o alpha da layer a 0% e na última frame alterou-se o valor para 100%. Aplicou-se um motion tween (tween de alpha). Criou-se a layer “load_cinza” e inseriu-se o texto “Loading...” com a fonte “Jane Austen”, de tonalidade cinza (#999999) e tamanho 60, que se alinhou ao centro no stage. Embebeu-se a fonte. Criou-se a layer “load_preto” e efectuaram-se os mesmos procedimentos que para a layer “load_cinza” mas desta vez a cor utilizada foi o preto (#000000). Criou-se a layer “mask”. Desenhou-se um quadrado com as dimensões 90x90 e posicionou-se antes do texto “Loading...”. Converteu-se o quadrado num símbolo gráfico com o nome “quadrado”, transformou-se a frame 60 numa keyframe e com a mesma seleccionada alterou-se o comprimento do quadrado para 500 de forma a cobrir a totalidade do texto nesta frame. Com as frames da layer “mask” seleccionadas criou-se um motion tween que iria originar a animação das letras. Clicou-se duas vezes no símbolo da layer e alterou-se a sua tipologia para “mask”. Por meio de arrasto, associou-se a layer “load_preto” à layer “mask”. Criou-se a layer “fundo branco”. Copiaram-se as frames vazias para a frame 61 e retiraram-se as frames posteriores à 100. Com a frame 61 seleccionada desenhou-se um rectângulo sem stroke com o mesmo tamanho do stage, aplicou-se a cor “Mercury” e alinhou-se ao centro no stage. Converteu-se o fundo num símbolo gráfico com o nome “fundo_branco”. Converteu-se a última frame numa keyframe e alterou-se a propriedade do alpha desta para 0%. Aplicou-se um motion tween. Copiou-se a última frame para a frame 101 e arrastou-se até à frame 120. Criaram-se oito layers relativas à animação de oito quadrados de dimensões 50x50 e stroke preto (#0000000): - Quadrado azul (#0000FF): “anima_quadrado_azul”; - Quadrado verde (#00FF00): “anima_quadrado_verde”; - Quadrado vermelho (#FF0000): “anima_quadrado_vermelho”; - Quadrado preto (#0000000): “anima_quadrado_preto”; - Quadrado branco (#FFFFFF): “anima_quadrado_branco”; - Quadrado ciao (#00FFFF): “anima_quadrado_ciao”; - Quadrado amarelo (#FFFF00): “anima_quadrado_amarelo”; - Quadrado magenta (#FF00FF): “anima_quadrado_magenta”. Converteram-se as frames 61 de cada uma destas layers em keyframes e com estas seleccionadas desenharam-se os quadrados respectivos que se posicionaram de acordo com a figura abaixo. Cada um deles foi convertido em movie clip.
De seguida, acedeu-se a cada um dos movie clips por meio de duplo clique em cada um dos quadrados e nomearam-se as “layer 1” para “actions”. Efectuaram-se as animações respectivas por afectação a um determinado percurso. Criou-se o botão para entrar na aplicação.
Cena "Menu"
Converteu-se a imagem "estúdio" em símbolo gráfico, aplicou-se um break apart na imagem e um distribute to layers. Criaram-se símbolos gráficos para cada imagem presente no estúdio e identificaram-se as layers com os respectivos nomes. Na layer "mola_1", que vai da frame 10 até à 70, aplicou-se um motion tween em que o alpha varia de 0 a 100%. Aplicaram-se através do mesmo método motion tweens às layers “mola_2”, “mola_3”, “mola_4”, “mola_5”, “mola_6”, “mola_7” e “mola_8” de modo a que apareça uma mola de cada vez sequencialmente. Na animação das fotos tentou-se criar a ilusão de cada foto a aparecer de forma não sequencial. Com a corda, pretendeu-se replicar a metáfora de alguém a puxá-la. Para tal, aumentou-se o tamanho inicial da corda de modo a que estivesse sempre presente no ecrã e aplicou-se um motion tween em que a corda se desloca da esquerda para a direita bem como um tween de alpha que varia de 0% a 100%. A animação da corda tem uma duração de 70 frames, começando na frame 0. Da frame 70 até à frame 140 a corda fica na posicão final com o alpha a 100%. A câmera fotográfica e os holofotes fazem parte da layer "estúdio" à qual foi aplicado um tween de alpha de 0% a 100%, entre a frame 0 e a 70, prolongando-se até à frame 140 com o alpha a 100%. Converteu-se a "foto_1" para botão. Na timeline de edição do botão introduziu-se uma keyframe na frame over, alterou-se a cor da parte interior da "foto_1" para azul (#0000FF) e escreveu-se o texto "apresentação", o qual foi centrado na parte branca da foto. De seguida, introduziu-se uma keyframe na frame hit e copiou-se a frame up para a frame hit. Este método utilizou-se na "foto_2", "foto_3", "foto_4", "foto_5", "foto_6", "foto_7" e "foto_8" que se converteram em botoes e alterou-se a cor de preenchimento e ajuda à navegação de cada uma na frame over.
3.2 Estrutura arborescente
Como se pode observar, a aplicação apresenta uma estrutura arborescente do tipo hierárquica não linear pois o utilizador pode navegar entre os níveis da estrutura e entre itens do mesmo nível da estrutura dando-lhe total liberdade de caminhos e apresenta-se como uma estrutura equilibrada, nem muito profunda, nem muito distendida de modo a não levar ao desinteresse e desorientação do utilizador.
3.3 Desenho de interacção e usabilidade
Relativamente ao desenho de interacção e usabilidade pode-se referir que os textos são apresentados por meio de tween de alpha para que o utilizador não tenha de esperar para continuar a ler determinada frase ou parágrafo pois o texto aparece todo de uma vez de modo a que este o leia da forma mais convencional (da esquerda para a direita e de cima para baixo), as cores utilizadas nos botões são cores fortes e chamativas, a ordem dos menus correspondentes a cada foto obedece a uma sequência no tempo dos acontecimentos, no botão de saída não foi utilizada metáfora visual elaborada mas apenas o símbolo mais comumente visto (X) para facilitar a identificação bem como no botão de som (ON-OFF). O botão de saída posicionou-se no canto superior direito por ser o sítio mais comum nas plataformas windows e o botão de controlo de som no rodapé ao centro por ser o sítio mais utilizado nos web sites. Teve-se a preocupação de colocar um numero razoável de objectos simples mas ao mesmo tempo lógicos e de fácil interpretação, devidamente preparados no Adobe Illustrator CS3 para se proceder à animação no Adobe Flash CS3 sem problemas. O menu das fotos encontra-se posicionado no cabeçalho por ser - tendo em conta estudos de eyetracking – em regra geral um dos primeiros sítios para onde o utilizador desloca o olhar ao visualizar qualquer tipo de informação. O logo encontra-se posicionado no cabeçalho, à esquerda, pois é o primeiro sítio que se deduz para onde o utilizador vá desviar o olhar, sendo uma estratégia de divulgação do nome empresa. O botão de entrar está presente ao centro no stage de forma a focar a atenção para esse local anteriormente à visualização dos conteúdos da aplicação. As cores usadas nos quadrados da animação inicial são as mesmas dos menus, de forma a que o utilizador compreenda que os conceitos de fotografia e espectro da luz visível estão de mãos dadas desde os primórdios. Utilizaram-se fotos como metáforas para o menu pois sendo esta aplicação sobre fotografia, pensou-se que seria o mais óbvio possível. A animação da corda obedece ao princípio da continuidade uma vez que corre o ecrã do lado esquerdo ao lado direito, dando a ideia de movimento. Os menus obedecem ao princípio da simplicidade pois são simples em grafismo, coerentes, organizados e quase simétricos. É bastante fácil ao utilizador percorrer todos os caminhos da aplicação, sendo esta também de fácil memorização e agradável a este pois não o sobrecarrega com informação. A mesma possui ajudas breves à navegação e a linguagem utilizada é simples, de fácil compreensão. Os períodos de latência foram minimizados com recurso à utilização de sons nos botões e por meio de animações.
4. Desenho técnico
Na aplicação pode-se encontrar informação textual que aborda a história da fotografia, fotografia a preto e branco, evoluções da mesma, curiosidades sobre especificidades de meios técnicos, um ecrã com alguns aspectos sobre fotojornalismo, uma galeria com fotos e vídeos úteis… O interface foi baseado num estúdio de fotografia. Para tal, utilizou-se o programa Adobe Illustrator CS3 que permitiu trabalhar com as imagens de forma a traduzirem a mensagem pretendida. Tentou-se ser o mais fiel possível à simplicidade, desde a escolha dos objectos presentes nos diferentes ecrãs aos estudos de tipografia e cores utilizados. A ideia consiste basicamente em fazer o utilizador sentir que se encontra num estúdio fotográfico, ja que se encontram presentes no menu principal os holofotes a iluminar o centro, a câmera fotográfica apontada para esse ponto de iluminação e por cima destes elemento os principais meios de navegação de toda a estrutura multimédia, que consistem nas fotos penduradas numa corda e cuja animação remete o utilizador para a metáfora de as retirar de lá. Através das fotos pode-se ter acesso às diferentes categorias de informação. A foto 1 leva o utilizador para uma pequena apresentação da aplicação, na foto 2 aborda-se de forma resumida a história da fotografia desde o começo até aos dias de hoje. Nas fotos 3, 4 e 5 encontra-se informação relativa a fotografia a preto e branco, informação sobre fotografia a cores e sobre fotografia digital, respectivamente. Na foto 6 o utilizador vai ter acesso a curiosidades sobre especificidades de meios técnicos utilizados. Na foto 7 aborda-se um pouco a temática do fotojornalismo e na foto 8 o utilizador pode visualizar fotos e vídeos que se acharam oportunos. A função essencial da aplicação é tentar dar a conhecer ao utilizador alguma informação sobre fotografia de forma interessante e interactiva. Ao navegar na aplicação a pessoa que a explora pode optar por seguir vários caminhos, todos eles diferentes uns dos outros, com informação relativa ao tema escolhido. Por exemplo, se o utilizador optar pela primeira foto, poderá ler uma breve introdução à empresa e à aplicação em contexto. Uma vez dentro do ecrã de cada foto, os restantes caminhos de navegação encontraram-se acessíveis, deixando ao utilizador o papel de escolher o seu próximo passo, não tendo de regressar a um ecrã anterior para o fazer, tal como se prevê numa estrutura arborescente hierárquica não linear. A imagem estúdio é composta por cinco paredes (duas laterais, tecto, chão, parede de fundo), dois holofotes e uma câmera fotográfica com tripé. Foi utilizado um cinzento claro (#E2E2E2), para todas as paredes. Os holofotes foram preenchidos a preto (#000000) bem como a câmera e o tripé. As fotografias foram baseadas em fotos de polaroid clássicas, a preto e branco (#000000 e #FFFFFF respectivamente). Nos botões correspondentes distribuíram-se ordenadamente as cores consoante a animação inicial dos quadrados para quando o utilizado passasse com o rato por cima. A cor da mola é um castanho escuro (#45210F) para dar a ideia de mola de madeira. A cor da corda é um castanho mais claro (#A65C35) para sugerir a ideia de gasto e frágil.
5. Produção do projecto
5.1 Estrutura e meios de interacção/navegação
O estilo de navegação/interacção utilizado foi o de manipulação e navegação em que o utilizador explora a aplicação baseada em espaços do mundo real. A navegação e interacção faz-se por meio de menus, janelas, ícones mediante determinadas acções como seleccionar, fechar,... Um exemplo no que diz respeito ao uso de janelas corresponde ao botão de sair da aplicação em que o utilizador por meio de clique no botão “sair” é enviado para um ecrã de confirmação (caixa de diálogo). No que toca aos ícones, as fotos são todas elas ícones que redireccionam o utilizador para o ecrã com a informação, também por meio de clique. Existe um ecrã específico para o menu. No botão de sair, no de entrar e em cada uma das fotos estão presentes pequenas ajudas informativas por meio de menus pop-up.
5.2 Integração e controlo de som
5.3 Animação
Na animação inicial, aplicou-se uma mask com a metáfora do loading para que o utilizador não “esbarrasse” logo com uma animação mais complexa. De seguida, através de layers do tipo guide definiu-se o trajecto dos diferentes quadrados, cada um deles representantes de uma cor primária, secundária ou neutra, aplicando motion tweens entre as posições iniciais e finais dos quadrados, criando a ideia de remoinho, que culmina na criação de um quadrado maior que serve de porta de entrada para a cena "menu". Na cena "menu" existem várias animações com recurso a tweens de alpha, de tamanho e de caminho, ao longo do stage. Quando se aplicaram os botões a cada fotografia, também se aplicou uma mudança de cor na frame over e down, assim, cada vez que o utilizador passasse o rato em cada uma das fotos, a cor mudaria, isto é, cada uma das cores dos quadrados da animação inicial iria corresponder a uma foto. Com todos os botões concluídos na cena "menu", o passo seguinte consistiu na realização de oito novas cenas. Em cada nova cena existe um movie clip que representa uma foto a ser recolhida da corda e a aumentar de tamanho gradualmente através de um motion tween. Este passo foi repetido para as restantes 7 fotos.
5.4 Soluções técnicas adoptadas para a resolução de problemas
O erro mais frequente no decorrer da concepção desta aplicação ocorreu na realização das diferentes cenas relativas aos movie clip das primeiras fotos em cada ecrã. O erro acontecia quando se convertia o botão em movie clip, isto é, o movie clip ia assumir as propriedades do botão, propriedades essas que iriam ser animadas ao fazer o movie clip, provocando um efeito não desejado. Uma vez encontrado o problema, bastou apenas apagar o conteúdo das frames over, down, e hit, deixando a keyframe up com conteúdo, sendo assim possível criar o movie clip sem que algo estranho acontecesse. Outro dos problemas que surgiram foi erro nos códigos. Primeiro escrevemos erradamente o código e, como se isso não bastasse, não estava posicionado no botão para ordenar à cabeça de leitura para começar a correr determinada cena após o clique nele próprio. O código utilizado foi
on (release) { gotoAndPlay ("fotografia_a_cores", 1); }
pegando no exemplo do ecrã relativo à fotografia a cores.
6. Conclusões
6.1 Reflexão crítica
Quando concluído o desenvolvimento de uma aplicação, torna-se necessário reflectir sobre o resultado, isto é, se foram atingidos os objectivos inicialmente pretendidos. Assim sendo, tentou-se transmitir simplicidade e clareza nos elementos e na navegação. A maior parte dos conteúdos gráficos foram vectorizados de uma forma simples e as animações também não se apresentam como algo muito complexo, bem como a informação. O objectivo desta etapa foi atingido com sucesso. O som que acompanha os botões e o ecrã inicial encontram-se bem inseridos no trabalho uma vez que transportam o utilizador para o ambiente do mundo fotográfico, mais especificamente o som associado aos botões, nos quais se pode ouvir o flash, o obturador e o beep de um botão de máquina. No ecrã inicial optou-se por uma música ambiente e minimalista de forma a não distrair o utilizador da aplicação. Na animação inicial ocorre um problema com a animação do quadrado branco e do quadrado azul pois ambos não seguem o trajecto que se aplicou através das guides, no entanto, achamos que não alterava de forma significativa a aplicação. Ao longo do projecto encontraram-se dificuldades em animar os botoes sem que as suas propriedades fossem assumidas pelo movie clip correspondente.
6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto
Uma sugestão plausível seria utilizar a metáfora de uma câmera fotográfica presente no centro do stage e tentar recriar um slideshow com imagens relativas a todos os temas abordados, fazendo assim uma espécie de resumo gráfico da aplicação. Outra sugestão seria colocar um ecrã de apoio a navegação, onde iria estar presente uma espécie de arborescência explicando os caminhos lógicos do projecto. Criar um ecrã em formato de jogo, onde o utilizador poderia testar a informação que a aplicação multimédia lhe transmitiu, através de perguntas, foi outra hipótese considerada. Usar as cores nos menus de forma a serem interpretados mais facilmente pelo utilizador também era uma questão a considerar.
7. Referências web e bibliográficas
As referências utilizadas na concepção desta aplicação foram predominantemente a web, nomeadamente os seguintes web sites:
http://www.wikipedia.com/fotografia/
