Edição actual desde as 23h59min de 31 de Janeiro de 2012

Projecto de Mariana Pulido, n.º 60289

Apresentação do projecto

No âmbito da UC de Laboratório Multimédia 1, foi realizado um projecto de autoria multimédia com distribuição on-line. A aplicação musical interactiva destina-se aos fãs de Alan Menken (compositor de grande parte das músicas da Disney) e não tem limite máximo nem mínimo de idade (certamente que a aptidão para a leitura/escrita simplificará bastante a navegação dentro da aplicação, mas tal não é grave, dado que há botões com símbolos intuitivos em toda a aplicação (fica é condicionada qualquer parte que o necessite, como o contacto)).

Memória descritiva

Tema - Música
Área de conteúdo - Música (aplicação musical interactiva)
Público alvo - Fãs e apreciadores das músicas da Disney, compostas por Alan Menken
Paradigmas de interacção - Index e tutorial
Objectivos - Criar um espaço, dedicado principalmente aos fãs do compositor, com acesso a alguns dos seus trabalhos na área da música (Disney), biografia, galeria de fotos, clube de fãs e com a oportunidade de deixar um comentário ou uma mensagem a Alan Menken.

Análise e planeamento

Estado da arte

Antes da realização do projecto, foi necessária alguma investigação ao nível do que já tinha sido feito sobre o tema. Foram encontrados alguns sites referentes ao assunto, mas nunca uma aplicação tão resumida com o essencial.

• The Whole New World of Alan Menken
• Alan Menken (Disney PT)

Diário de bordo

28 de Janeiro

• Ponderação e decisão do tema e conteúdo da aplicação de autoria multimédia;
• Investigação do estado da arte e arrecadação da informação biográfica necessária para o projecto;
• Criação da página do projecto na wiki da disciplina;
• Escrita da memória descritiva;
• Começo da introdução da aplicação, no Flash.

29 de Janeiro

• Estrutura arborescente;
• Finalização da animação da introdução e dos créditos;
• Photoshop: tratamento de imagens e construção de botões a utilizar na aplicação.

30 de Janeiro

• Audacity: tratamento de som a integrar na aplicação (música de fundo, sons do menu, ...);
• Implementação e testes na página "contactos";
• Criação da galeria de fotos;
• Finalização do corpo da animação.

31 de Janeiro

• Últimos retoques e testes de interacção da aplicação;
• Finalização do relatório do projecto e publicação na wiki;
• Gravação do CD e entrega no do projecto.

Desenho funcional

Requisitos funcionais

Esta aplicação integra bastantes botões com os quais, o utilizador pode interagir. Todos com feedback em over, dão uma sensação confortável de resposta a quem usa: mudar de cor, ficar sublinhado, mudança de alpha, etc.
Na aplicação, o utilizador pode ouvir música, ver imagens e até mesmo ter acesso a meios de conversa e troca de opinião com outros utilizadores com os mesmos gostos.

Estrutura arborescente

A tipologia da arborescência implementada é não-linear. Permite que o utilizador viaje entre páginas do mesmo nível.

Nova estrutura arborescente
30 de Janeiro

Desenho de interacção e usabilidade

A aplicação "Disney's Alan Menken" foi criada para um público de qualquer idade (preferencialmente mais jovem, dada a palete e as fontes integradas), e é puramente desenhada para fãs da Disney e do compositor. Como tudo gira em volta dele, foram escolhidas para serem apresentadas as matérias mais interessantes - o que um adorador procura. A navegação é feita de uma forma bastante simples e precisa. O menu está sempre presente em toda a aplicação, tudo o que o utilizador poderá querer controlar está sempre à mão (som, páginas, etc.).

Produção do projecto

Integração e controlo de som

A música de fundo (que está activa, por defeito, quando a aplicação inicia) é uma interpretação em piano de uma das músicas de Alan Menken. Foi tratada no Audacity, de forma a não se sobrepôr a qualquer outro som mais importante da aplicação. O seu código de implementação é básico:

declaração da variável

  var som_fundo:Sound=new Sound();
  som_fundo.attachSound("som_fundo");


ordem de início

  som_fundo.start();


ordem para a música tocar em loop

  som_fundo.onSoundComplete = function() {
    som_fundo.start();
  }

Foram descarregados, de um site com recursos gratuítos, vários sons de clicks e de papéis a serem rasgados e amarfanhados - tudo para encontrar um que soasse bem como feedback dos botões do menu. Acabou por ser escolhido um de papel, cortado no Audacity (de forma a obter apenas o fragmento pretendido) e aplicado com os seguintes scripts:

declaração da variável

  var som_menu:Sound=new Sound();
  som_menu.attachSound("paper_sound");


código no botão

  on(rollOver) {
  _parent.som_menu.start();
  }

Animação

É possível observar-se animação em diferentes pontos da aplicação - embora uns mais subtis do que outros.
Começando pela primeira cena, a introdução, vemos um tween de alpha (0% > 100%) no logótipo da WaltDisneyRecords. Passando ao corpo da aplicação, o fundo que dá suporte aos itens do menu sofre uma pequena animação quando "cai" da margem superior até ao seu sítio de repouso. Logo a seguir, os itens do menu aparecem, um por um, nos seus devidos sítios. Dentro de "músicas", todas as thumbnails são animadas com overs (opacidade).
Presente em todas as páginas da aplicação, encontramos botões de controlo de som, botão de saída e botão home; todos eles com feedback em over.
Nos créditos, acontece o mesmo ao logótipo que na introdução - ainda que em sentido oposto (100% > 25%).
A aplicação não está, no entanto, saturada de animação - situando-se assim num patamar mais abrangente de idades.

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

A página de contactos permite enviar uma mensagem ao autor. Por norma, neste tipo de situações, recorre-se a um link do tipo mailto:<endereço de e-mail>, que gera uma comunicação com o programa de e-mail configurado como predefinido no sistema operativo (ex: Microsoft Outlook) para que a mensagem de e-mail seja enviada. No entanto, para além de esta configuração ser desconfortável do ponto de vista da usabilidade, pode mesmo não funcionar, caso o programa não esteja configurado ou não esteja, de todo, instalado no sistema. Assim, decidiu-se recorrer a um script externo, que envia o e-mail. O código Action Script utilizado para chamar o script, passa-lhe três parâmetros que são recolhidos do movieclip "contacto" - que contém o formulário de contacto. Inicialmente utilizou-se o seguinte código Action Script no botão de "enviar mensagem":

on(release) {
  getURL("send_an_email.php?from=" + from.text + "&subject=" + subject.text + "&body=" + body.text");
}

que abre outra janela do browser e processa o script externo.
No entanto, como se quer que este processo seja transparente (e que não seja aberta outra janela), foi então utilizada uma função que carrega o endereço em background:

on(release) {
   loadVariablesNum("send_an_email.php?from=" + from.text + "&subject=" + subject.text + "&body=" + body.text", 0, "GET");
}

Desta forma, se os valores recolhidos dos campos do formulário forem "Mariana" (from), "Aplicacao muito bonita" (subject) e "Gosto muito desta aplicacao!" (body), então o URL que será aberto (de forma transparente) pela aplicação, será:

send_an_email.php?from=Mariana&subject=Aplicacao%20muito%20bonita&body=Gosto%20muito%20desta%20aplicacao!

e a mensagem será enviada para os endereços de e-mail aamaro@ua.pt e caixinha@ua.pt.

Esta solução foi desenvolvida a partir dos tutoriais dos sites:

• http://www.kirupa.com/developer/actionscript/images/flatophptoserver.gif
• http://www.sephiroth.it/tutorials/flashPHP/email/
• http://www.mxstudio.com.br/desenvolvimento/flash/formulario-e-mail-flashphp/

Conclusões

Reflexão crítica

Tecnicamente, tanto do ponto de vista visual, como de animação, como de Action Script, a aplicação aborda diversas áreas de estudo da disciplina, como a integração de áudio, animação utilizando motion tweens, feedback visual de acordo com a posição do rato (sobre botões e menus), campos de texto com input, entre outros. Este trabalho permitiu explorar de forma prática todos estes conceitos. Apesar de, para as funcionalidades desejadas, o código Action Script utilizado ter sido suficiente, seria interessante aprofundar-se questões relativas a funções mais avançadas.

Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto

Há, naturalmente, trabalho futuro que pode ser feito:

• No que toca às animações, será interessante torná-las mais elaboradas e visualmente apelativas.
• O formulário de contacto poderá vir a enviar as mensagens directamente para o artista, Alan Menken.
• O menu "Clube de fãs" poderá ser trabalhado para estar integrado com a aplicação, em vez de ser utilizado um site externo para esse efeito. É interessante que os utilizadores da aplicação possam deixar as suas mensagens num formato de fórum, bem como imagens e músicas interpretadas pelos fãs. Tudo isto feito através da aplicação Flash, com uma interface visualmente simples.
• Dado que, se tudo isto for implementado, a aplicação irá conter conteúdo multimédia "pesado", é importante incluir-se uma barra de loading enquanto a aplicação é carregada. Será interessante que, enquanto a aplicação está a ser carregada, o aspecto visual da aplicação já esteja visivel, por exemplo a preto e branco, mas a transformar-se e a ficar com aspecto a cores.

Referências Web

• Alan Menken (Disney PT)
• Alan Menken (Soundtrack.Net)
• Alan Menken (IMDb)
• Be Our Guest! (MusicalTalk)
• Composer Alan Menken (The Arts Desk)
• The Whole New World of Alan Menken
• Alan Menken Theatre Credits
• Alan Menken: "Beauty and the Beast captures the magic
  of Disney animations and brings it to the stage" (todoMUSICALES)

Anexos

Todos os anexos relativos a este projecto, como imagens ou sons, encontram-se no CD gravado e entregue aos professores da UC.