35mm
From LABMM1_IDE
Contents |
Apresentação do projecto
Grupo
Fernando Pata 50056
João Costa 50011
Raquel Machado 51447
Memória descritiva
Tema
O tema adoptado para este trabalho foi o cinema. Depois de uma análise de vários temas que poderíamos abordar optámos por este, uma vez que faz parte dos interesses de todos os elementos do grupo, sendo assim agradável trabalhar com este tema.
Objectivos
A nossa aplicação será um meio de fazer chegar a sétima arte a todos. O produto final do projecto será divulgado numa plataforma online. Nela o utilizador poderá consultar a informação de 3 filmes, informação essa: trailer, capas e imagens relativas a cada filme; poderá ser consultada informação como: elenco (com imagens tipo lista), sinopse, informação do realizador.
Será implementado um sistema de votação por filme, actualizado através da internet, concordante com o método de distribuição. Essa votação é feita de acordo com o que o utilizador espera do filme. Relativamente ao som, terá um som de fundo agradável ao utilizador; quando escolhida a capa de um certo filme, através de um efeito rollover, poder-se-á ouvir o tema principal. Também os cliques do rato e transições serão devidamente sonorizadas.
Relatório Final
1. Apresentação do projecto
O projecto apresentado, realizado no âmbito da disciplina de Laboratório Multimédia 1, do curso de Novas Tecnologias da Comunicação, tem por objectivo o desenvolvimento de uma aplicação Multimédia. A temática dessa aplicação multimédia é a divulgação de filmes prestes a estarem em exibição, a qual demos o nome “35mm”.
“35mm” incide fundamentalmente sobre três filmes de géneros diferentes: Drama (Chloe), Acção (Tourist) e Ficção Científica (Tron). Desta forma, o projecto tem como propósito apresentar uma amostra de como seria uma aplicação numa situação “real”. Para começar, foi feito um estudo de campo de modo a saber se já existiria alguma aplicação deste género, pesquisando em websites. Encontrando apenas sites de texto corrido e muito poucos do género que estávamos a idealizar, decidimos que esta seria uma boa escolha de trabalho. Finalmente, foram escolhidas algumas ideias e decidido qual o ambiente gráfico a trabalhar. Assim sendo, tentou-se criar uma aplicação limpa e agradável para o utilizador.
O público-alvo de “35mm” abrange a sociedade em geral, não se dirigindo apenas a um público específico. “35mm” pretende ser uma aplicação com um desenho e organização simples, com menus de fácil acesso e percepção. Cremos ser uma aplicação de fácil navegação e interessante e com uma forma atractiva.
A aplicação principia com uma animação, contendo o nosso logo aparecendo de uma forma simples. De seguida, o utilizador tem acesso a um ecrã principal onde, a partir daí, pode aceder aos ecrãs relativos aos diferentes filmes e, consequentemente, conhecer um pouco melhor de cada filme. Pode também, em todos os ecrãs excepto o das galerias, ter acesso ao botão de controlo de som e a um ecrã de sair.
2. Análise e planeamento
Desde o principio que tivemos como intenção, desenvolver a nossa aplicação de uma maneira o mais autónoma possível. Por isso, não tivemos por base outros sites ou aplicações, visto também a nossa pesquisa não ter mostrado muitos resultados.
A ideia inicial foi criar um ambiente retro, com elementos muito alusivos ao cinema antigo, mas conjugado com um aspecto limpo e algo moderno. Rapidamente nos apercebemos que esta não seria a melhor abordagem.
Optámos por simplesmente usar elementos característicos do cinema: reel (presente no menu inicial) e a fita do filme (que pode ser encontrada em alguns menus, como elemento ilustrativo). O resultado final, que cumpriu a nossa idealização, foi uma aplicação simples, agradável e funcional; sem menus “escondidos” e informação facilmente acessível.
3. Desenho funcional
3.1 Requisitos funcionais
Visto que “35mm” é para um público-alvo bastante abrangente, tentou-se criar um ambiente neutro. O primeiro ecrã serve simplesmente para dar a conhecer o logo. Este ecrã tem a opção de saltar a introdução (avançar).
Depois de acabada a animação inicial, ou escolhida a opção de saltar, surge um novo ecrã: neste, o utilizador pode escolher o conteúdo, através do reel (filmes ou sobre); desligar/ligar o som e, se assim o desejar, sair da aplicação. Depois de escolhido o conteúdo, a aplicação é direccionada para os restantes submenus, sempre com a mesma disposição de botões. Também a informação nestes submenus tem, aproximadamente, a mesma disposição.
3.2 Estrutura arborescente
“35mm” começa com uma pequena animação; esta pode-se saltar por escolha do utilizador. De seguida entra-se no ecrã inicial, podendo controlar o som, escolher sair, um dos três filmes escolhidos para a aplicação ou sobre. É sempre possível regressar ao ecrã inicial e, no terceiro e quarto nível da aplicação, pode-se navegar entre ecrãs.
 |
 |
 |
 |
3.3 Desenho de interacção e usabilidade
A interacção entre o utilizador e a aplicação espera-se que ocorra de uma forma simples e intuitiva. O utilizador deve saber sempre quando pode interagir e quais as opções de que dispõem. Este conceito está presente ao longo de toda a aplicação.
Rápida e facilmente se chega à informação pretendida, através de poucos cliques.
File:Menu principal.jpg
4. Desenho técnico
Nesta parte do projecto apoiámo-nos em dois programas para o desenvolvimento do projecto: Adobe Illustrator CS3 e Adobe Photoshop CS3. Com o primeiro, criaram-se os botões, logótipo, janelas e layouts, todo o grafismo da aplicação; com o segundo, fez-se o tratamento de todas as imagens usadas.
A resolução escolhida, deve-se ao facto de ser a mais coerente com os diferentes tipos de ecrãs e sistemas operativos.
5. Produção do projecto
A navegação da aplicação é feita segundo uma estrutura de arborescência hierárquica não linear. O utilizador pode navegar em quatro níveis de profundidade (o ecrã inicial, os filmes, a informação de cada filme e a galeria das imagens) e entre os mesmos níveis da arborescência, excepto na escolha dos filmes, em que o utilizador é obrigado a voltar ao ecrã inicial. Para voltar ao ecrã inicial, o utilizador apenas tem de clicar no botão “menu”, sempre presente e bem visível.
Foi tudo realizado num único ficheiro (animação e restante aplicação). A animação é composta por uma sequência rápida de imagens e termina com a apresentação do nosso logo.
Os aspectos que receberam maior atenção e com importância significativa para o bom funcionamento e interactividade da aplicação, foram:
- O controlo do som e opção de sair estão num menu de fácil acesso e inalterável durante toda a aplicação. Este menu tem tudo claramente indicado, com os itens sempre visíveis e sem dúvidas em relação à sua função.
- O ecrã inicial foi criado numa base de paradigma ambiente; os restantes menus num paradigma índex tendo os elementos principais sempre acessíveis. Os botões estão devidamente identificados, sem ficarem deslocados do ambiente da aplicação. A escolha dos botões colocados sempre na mesma posição, faz com o utilizador não se perca devido à mudança, cor ou posição dos botões.
No ecrã galeria, o utilizador depara-se com um paradigma tutorial, só podendo navegar “para trás e para a frente”, de forma linear sem poder saltar entre as imagens. Aqui existem três botões: seguinte, anterior e fechar; esta simplicidade tem como objectivo orientar o utilizador e facilitar a navegação.
Todos os botões têm comportamentos adequados, dando “feedback” da sua activação, através de efeitos rollover. Os botões com que o utilizador mais se depara na nossa aplicação são: controlo de som, sair, os botões de escolha da informação e o botão para regressar ao menu. Na galeria optou-se por deixar os botões anterior e seguinte invisíveis, para não obstruir a imagem; quando se entra na galeria, todos os botões ficam inactivos, só ficando activos os essenciais à navegação.
Por último, no ecrã “Sobre”, optou-se por manter um aspecto parecido ao da animação inicial.
5.2 Integração e controlo de som
Na nossa aplicação existem dois sons: a música de fundo e o som de clique do rato. Estes dois sons foram tirados de duas livrarias de som online (www.proudmusiclibrary.com e www.soundsnap.com).
Tratou-se da importação dos dois sons para a library do flash, criar uma variável para o som de fundo e tratar da programação. O som dos cliques foi inserido no efeito down de cada botão. Depois de criada a variável aplica-se um loop através de programação, para assegurar a reprodução contínua durante a navegação. Atribui-se ao botão de ligar ou desligar o som, a capacidade de silenciar por completo todos os sons da aplicação e também o efeito contrário (ligar).
5.3 Animação
A aplicação começa com uma animação, com aproximadamente 10 segundos, apresentando o logo “35mm”. Esta começa com imagens a surgir, aleatoriamente, até que surge o logo. As imagens são todas de filmes que marcaram a história do cinema; aparecem bruscamente, aumentando a velocidade a que surgem. É tendencioso saltar as introduções, por isso damos a possibilidade ao utilizador de saltar para o ecrã principal da aplicação.
No ecrã principal apresentamos o logótipo e uma barra com o botão de controlo de som e sair. O logótipo, que já surgiu na animação inicial, utiliza um tweening de escala, que o posiciona onde irá ficar o resto da aplicação; a barra do menu utiliza um motion tween linear vertical de cima para baixo. Surge o reel (com um motion tween de baixo para cima) onde o utilizador poderá escolher o conteúdo a visualizar. Para seleccionar esse conteúdo (Turista, Tron, Chloe e Sobre) existem quatro botões que já indicam o conteúdo através de elementos textuais. Ao escolher o conteúdo, através do clique, a aplicação salta para o submenu do filme escolhido.
Neste submenu (terceiro nível da aplicação), o utilizador pode escolher entre diversos tipos de informação: trailer, capa filme/imagens, elenco, sinopse, informação realizador, votação. Quando o rato passa por cima de um botão, há um destaque do mesmo, através da cor, com recurso ao efeito over.
Quando se escolhe a informação pretendida, esta aparece na parte inferior do ecrã da aplicação.
- Capa filme/imagens: surge a capa do filme e seis imagens. Estas, com transparência de 50%, “ganham” cor quando o rato passa por cima; ao clicar, surge o ecrã da galeria. Na galeria pode-se ver as imagens em ponto grande; existe um botão anterior e seguinte, da mesma altura que as imagens e tornam-se visíveis quando o rato ocupa a sua área; têm o devido “feedback” visual, mostrando setas que subentendem o propósito dos botões; como é de esperar, carregando no botão anterior, o utilizador vê a imagem anterior e no próximo, a próxima imagem da galeria. Há a excepção da primeira imagem, em que não se pode ir para a anterior e a última em que não há próxima. Todas as imagens da galeria são animadas com um tween de escala, tanto o rectângulo que ocupa o ecrã, como as imagens em si;
- Elenco: aqui o utilizador pode escolher o actor, através de botões com efeito de transparência de 50% para 100%; clicando na respectiva fotografia, dispõe da informação no espaço adjacente;
- Informação realizador: aqui pode ser vista a fotografia do realizador de cada filme, carreira, biografia, prémios e filmes; os botões sofrem o mesmo efeito que os do menu fixo (bordo preto); os restantes elementos aparecem sem qualquer tipo de animação;
- Sinopse: apenas contém um texto com a sinopse do filme escolhido;
- Trailer: aqui o utilizador tem a hipótese de ver o trailer, com controlo do vídeo através de Play e Pause; estes botões também sofrem destaque de cor;
- Votação: neste ecrã o utilizador poderá classificar o filme numa escala de um a cinco, de acordo com o que espera do filme; as estrelas neste ecrã também têm o efeito de “ganhar cor”, passando duma imagem com 50% de transparência, para uma com 100%.
De uma maneira geral, na aplicação, foram utilizadas animações de frame-a-frame e keyframing, essencialmente.
6. Conclusões
6.1 Reflexão crítica
Após termos concluído o projecto, acreditamos ter chegado a um resultado bastante satisfatório, tendo conseguido a maioria dos nossos objectivos e ideias. Nesta altura apercebemo-nos e concluímos que, voltando a fazer o projecto teríamos mudado alguns pontos e aspectos, ou melhorá-los. Alguns deles:
- Uma melhor animação inicial, espécie de um trailer ou algo mais ligado ao mundo do cinema; uma animação que desse a conhecer melhor a aplicação.
- Em suma, cremos ter conseguido uma boa aplicação, apesar de, com mais tempo e com melhores conhecimentos, teríamos conseguido resultados ainda melhores e até implementar outras dinâmicas, aumentando a experiência com a aplicação e criando uma navegação mais divertida. Tudo isto tendo em conta: evitar uma aplicação confusa e com pouca usabilidade ou desinteressante, uma aplicação que não falhasse o público-alvo.
O que mais terá falhado foi talvez a falta de organização e de aproveitamento do tempo.
O que mais terá falhado foi talvez a falta de organização e de aproveitamento do tempo.
