Metallica rules

From LABMM1_IDE

Latest revision as of 17:52, 28 January 2011

Grupo do projecto

Marcelo Bettencourt 60869

Tema

O tema do projecto é a banda Metallica. Neste projecto irei apresentar a banda, os seus elementos, divulgar a sua história, os seus álbuns e as suas músicas.

Memória descritiva

A aplicação irá ter um aspecto simples mas funcional, do género index e também imersivo. A aplicação será offlline, pois esta terá uma playlist extensa, o que ocupará bastante espaço.

Identidade visual

Tipos de letra

Logótipo e partes que sobressaem: Ain't Nothing Fancy (dafont.com)

Menus menos importantes e escrita corrente: Verdana (Normal e Bold)

Diário de Bordo

23 de Janeiro

Escolha do tema e primeiras ideias.

24 de Janeiro

Estudo do logótipo e criação dos botões funcionais.

25 de Janeiro

Inserção do material em plataforma Flash e início da criação da aplicação final (secção: Álbuns)

26 de Janeiro

Conclusão da secção Álbuns, História e Galeria. Início da preparação sonora da aplicação.

Imagens do projecto

Botões de navegação e controle de volume.

Estudo do logótipo com zona de protecção. O esquema de cores utilizado é o apresentado.

Ecrã de entrada da aplicação.

Ecrã dos álbuns da banda.

Ecrã da lista dos temas do álbum (ecrã-tipo)

Ecrã de saída da aplicação.

Relatório Final

1.Apresentação do Projecto

O projecto tem como nome Metallica Rules, sendo este uma homenagem à banda Metallica. Caracteriza-se como sendo uma apresentação da banda, com as suas músicas, álbuns, fotografias e história.

2.Investigação Temática

Para a elaboração deste projecto não tive de pesquisar muito, pois já tinha uma ideia formada. O aspecto base da aplicação foi inspirado em muitas outras aplicações, com um desenho suave e sério.

3.Desenho Funcional

3.1.Requisitos funcionais

Esta aplicação é dividida em quatro grandes partes: Galeria, História, Álbuns e Playlist. Na galeria podemos observar algumas fotos da banda ao vivo. Na História é apresentado ao utilizador uma série de ecrãs em que pode ler uma breve história da banda. No último ecrã existem algumas fotos dos elementos da banda. Nos Álbuns existem miniaturas dos álbuns da banda. Quando se clica em cada um deles, pode se ver a capa em tamanho maior e também a lista de músicas de cada álbum. Na Playlist, que está presente durante toda a aplicação, pode se ouvir algumas músicas dos Metallica, em que se pode ver o nome, a duração, e até ir para a música seguinte e anterior. Pode-se também alterar o volume com um slider que existe na Playlist.

3.2.Estrutura arborescente

3.3.Desenho de interacção e usabilidade

O estilo de navegação deste projecto é um estilo de manipulação e navegação, pois esta aplicação explora a capacidade do utilizador explorar e manipular aquilo que quer ver. Nesta aplicação há popups (janelas de informação), ícones (ícones de controlo de som e de escolha de ecrã) e uma caixa de diálogo, usada quando o utilizador quer sair da aplicação. Em relação à usabilidade, considerei o utilizador tipo alguém que não tem muita experiência com aplicações multimédia, e por isto tentei criar um ambiente simplista e intuitivo. Nesta aplicação também foi aplicado o princípio da estrutura e orientação, tendo esta uma estrutura fácil e intuitiva, devido aos menus sempre presentes em todas as partes da aplicação. Como falei antes, apliquei o princípio da simplicidade (KISS) para que a aplicação não se torne enfadonha e complicada de navegar. Em relação ao princípio da visibilidade, penso que o apliquei bastante, estando todos os menus visíveis e não há nada que distraia a atenção do utilizador do objectivo da aplicação. Por fim, apliquei também o princípio da consistência, sendo esta perceptível na posição dos menus e dos ícones.

4.Desenho Técnico

Para operacionalizar esta aplicação tive de utilizar todos os conceitos técnicos aprendidos na disciplina de Laboratório Multimédia I. Utilizei gráficos, shapes, símbolos de tipo Movie Clip e Button.

5.Produção do Projecto

5.1.Estrutura e meios de navegação/interacção

Ecrã de entrada

Ecrã da galeria

Ecrã da história

Ecrã dos álbuns

Ecrã tipo de cada album

Ecrã de saída da aplicação

A estrutura da aplicação é baseada em frames independentes, podendo navegar-se entre elas através de botões implementados com código AS2.

Todos os botões de navegação baseiam-se no código gotoAndStop.

Este é o código para a galeria. Primeiro crio uma função que vai buscar imagens externas. Quando a imagem entra, existe um fade in provocado por uma incrementação do alpha. As outras funções são as funções do clique, para que cada vez que se clique numa miniatura esta aparece grande dentro do movie clip criado.

Este é o código de saída da aplicação.

5.2.Integração e controlo do som

O som da aplicação é uma lista externa de músicas em XML, em que a aplicação vai buscar esta lista, e a partir dela cria uma variável para que cada som desta lista seja reproduzido. Através de código, pode-se ir para a música seguinte e anterior, pausar e voltar a reproduzir a música. A música é reproduzida automaticamente quando se entra na aplicação, e tem ordem aleatória.

Código da implementação de som e da aplicação interactiva dos botões e mostradores:

Frame 1, layer ActionScript

Linha 1 – Parar a cabeça de leitura

Linha 3 – Criação da variável para a lista criada em XML

Linha 4 – Ignora quebras de linhas para ter a certeza que a lista é lida completamente.

Linha 5 a linha 13 – A função faz um rastreio à lista XML para obter a informação que está nela, tal como o nome da música, o artista e o nome do ficheiro, colocando estas em variáveis.

Linha 14 – Abre um canal sonoro.

Linha 15 -Torna a ordem de reprodução das músicas aleatória.

Linha 17 a linha 19 – Criação de um Movie Clip Vazio para colocar o som. A linha 19 serve para a música ser reproduzida automaticamente.

Linha 21 – Abre a contagem de tempo do canal de som, permitindo ao leitor contar o tempo de cada música.

Linha 22 – Cria uma variável onde está o tempo total da música.

Linha 23 – Calcula o número de minutos que passou.

Linha 24 – Se o número total de minutos que passou é menor que 10 acrescenta-se um zero para o aspecto do leitor ser coerente.

Linha 25 – Calcula o número de segundos que passou.

Linha 26 - Se o número total de segundos que passou é menor que 10 acrescenta-se um zero para o aspecto do leitor ser coerente.

Linha 27 – Envia estes resultados para a caixa de texto dinâmico “timeDisplay_txt”

Linha 29 – Cria e reproduz a função songStarter

Linha 30 a 33 – Vê se já está algo a ser reproduzido. Se está, então esse objecto é parado e eliminado.

Linha 34 – Cria um novo canal de som para a música.

Linha 35 – Carrega o ficheiro que está a ser requisitado no momento.

Linha 36 – Abre uma função “this frame”, significando que sempre que a cabeça de leitura entrar nesta frame esta função será executada.

Linha 37 e 38 – Verifica se a posição da cabeça do leitor é maior que 0. Se for então é eliminada.

Linhas 39, 40 e 41 – Apaga todas as informações dos textos dinâmicos e coloca o contador de tempo a zero.

Linha 42 – Reinicia o intervalo temporal.

Linhas 43, 44 e 45 – Se os textos dinâmicos e o contador de tempo já foram reiniciados, então aparece “Loading…” na caixa de texto bandDisplay_txt.

Linha 47 – Abre uma nova função, que é a que suporta a “próxima” música quando a música actual foi reproduzida até ao fim.

Linha 48 – Reinicia o intervalo de tempo.

Linha 49 – Reinicia o contador do tempo para zero.

Linha 50 – Adiciona +1 ao contador da playlist e progride para a próxima música na lista.

Linha 51 – Localiza, carrega e reproduz a próxima música da lista.

Linha 53 – Abre a função de controlo de volume.

Linha 54 – Verifica a última posição do botão de controlo.

Linha 55 – Abre uma função onEnterFrame para localizar o botão de controlo ao entrar na frame.

Linha 56 – Define os limites mínimos e máximos horizontais do botão de controlo.

Linha 57 – Define o volume de acordo com a localização do botão de controlo.

Linha 60 – Abre uma função onRelease para o botão de controlo.

Linha 61 – Reinicia o botão ao entrar na frame.

Linha 62 – Pára de arrastar.

Linha 64 – Abre uma função onReleaseOutside para o botão de controlo.

Linha 65 – Pára de arrastar.

Linha 68 – Coloca a função soundStatus no valor 100

Linha 69 – Abre uma função soundStatus

Linha 70 – Cria uma variável para receber a quantidade do ficheiro carregado

Linha 71 – Verifica a quantidade total de bytes do ficheiro.

Linha 72 – Define o tamanho total da música sendo 100% da barra de carregamento (168 é o valor de tamanho horizontal da barra)

Linha 73 – Uma variável que tem o valor da duração actual do carregamento.

Linha 74 – Uma variável que tem a localização actual do carregamento.

Linha 75 – Define o comprimento da barra de carregamento como o progresso actual em percentagem.

Linha 78 – Cria uma função onRelease para o botão de Play. Esta função irá ser executada sempre que se clicar no botão “Play”.

Linha 79 – Reinicia o intervalo de tempo.

Linha 80 – Reinicia o contador de tempo para zero.

Linha 81 – Traz a cabeça de posição para a sua posição inicial

Linha 82 – Inicia o ficheiro carregado.

Linha 84 – Cria uma função onRelease para o botão de Stop. Esta função irá ser executada sempre que se clicar no botão “Stop”.

Linha 85 – Limpa o intervalo de tempo.

Linha 86 – Traz a cabeça de posição para a sua posição original.

Linha 87 – Reinicia o contador de tempo para zero.

Linha 88 – Limpa a caixa de texto do título da música.

Linha 89 – Limpa a caixa de texto do nome do artista.

Linha 90 – Para a reprodução da música.

Linha 93 – Cria uma função onRelease para o botão Next. Esta função vai ser executada sempre que se clicar no botão “Next”.

Linha 94 – Reinicia o intervalo temporal.

Linha 95 –Traz a cabeça de posição de volta à sua posição original.

Linha 96 – Adiciona “Loading…” à caixa bandDisplay.

Linha 97 – Reinicia o contador de tempo para 0.

Linhas 98 e 99 – Procura a próxima música na lista e começa a carregá-la. Depois de a carregar começa a reproduzi-la automaticamente. Não está nesta imagem de código, mas a função procura aleatoriamente a próxima música. A linha de código é (song_nr == songfile.length-1) ? _global.song_nr=random : _global.song_nr = random(songfile.length);

Linha 101 – Cria uma função onRelease para o botão Previous. Esta função será executada sempre que o botão “Previous” for clicado.

Linha 102 – Reinicia o intervalo de tempo.

Linha 103 – Traz a cabeça de posição de volta á sua posição original.

Linha 104 – Adiciona “Loading…” à caixa bandDisplay.

Linha 105 – Reinicia o contador de tempo para zero.

Linhas 106 e 107 – Procura a informação acerca da música anterior na lista e começa a carregá-la. Após carregar a música, começa a reproduzi-la automaticamente.

Linha 109 – Carrega a lista “playlist.xml”.

5.3.Animação

A animação desta aplicação é feita maior parte à base de mouse over nos botões, havendo então mudança de cores e a visualização de um texto informativo acerca do botão. Na galeria, a animação que existe é a de fade in, este feito em código. Todos estes códigos já foram explicados anteriormente.

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

Para a resolução de problemas deste projecto utilizei a técnica de tentativa e erro em maior parte dos casos. No caso da playlist consultei um tutorial para entender melhor como havia de fazer todas as variáveis da lista.

6.Conclusões

6.1.Reflexão crítica

Penso sinceramente que o projecto está bastante razoável para o tempo disponível, apesar de estar bastante simples na parte gráfica e de animação. Tenho testado a aplicação à procura de erros, e até agora ainda não encontrei nenhum, o que é bastante bom para o projecto, sendo este coerente e capaz de satisfazer as necessidades do utilizador. Em termos de código, estou satisfeito com a programação que fiz, pois deu bastante trabalho, especialmente a parte da playlist. Como este código está todo bem escrito (não encontrei conflitos nem erros) penso que neste aspecto o projecto está bastante bom.

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

Para aperfeiçoar e desenvolver este projecto, o que se podia fazer era trabalhar na parte gráfica do projecto, mas também fazer algo que gostaria de fazer mas não tive tempo de o executar: no ecrã dos álbuns, quando se entrava em cada um poderia clicar-se em cada música e ela ser ouvida na playlist. Também penso que se poderia ter colocado mais fotografias e de se ter desenvolvido a história dos Metallica.

7.Referências Web e Bibliográficas

Tutorial utlizado:

http://www.minervity.com/features/flash_tutorial/how-to-create-a-flash-xml-playlist-music-player/