Utilizador:Carochas

Da Lab. Multimédia 1
(Diferença entre edições)
Ir para: navegação, pesquisa
 
(5 edições intermédias de um utilizador não apresentadas)
Linha 14: Linha 14:
  
 
Marco Neves, Marco Gonçalves, Bruno Almeida e João Seabra: Criação do conceito da aplicação e definição das características.
 
Marco Neves, Marco Gonçalves, Bruno Almeida e João Seabra: Criação do conceito da aplicação e definição das características.
 +
 
Marco Gonçalves e João Seabra: Responsáveis pela elaboração da Wikis.
 
Marco Gonçalves e João Seabra: Responsáveis pela elaboração da Wikis.
  
Linha 26: Linha 27:
 
A aplicação a desenvolver consistirá numa intro, que terminará num menu, de onde será possível aceder a:  
 
A aplicação a desenvolver consistirá numa intro, que terminará num menu, de onde será possível aceder a:  
 
-3 jogos interativos
 
-3 jogos interativos
 +
 
-Um dicionário de vocabulário relacionado com o tema das guitarras.
 
-Um dicionário de vocabulário relacionado com o tema das guitarras.
 +
 
-Um livro de acordes, que ajudará não só no objetivo lúdico da aplicação como no desempenho do utilizador nos vários jogos.
 
-Um livro de acordes, que ajudará não só no objetivo lúdico da aplicação como no desempenho do utilizador nos vários jogos.
  
Linha 49: Linha 52:
  
 
Marco Neves, Marco Gonçalves, Bruno Almeida e João Seabra: Pesquisa de páginas web, imagens e aplicações.
 
Marco Neves, Marco Gonçalves, Bruno Almeida e João Seabra: Pesquisa de páginas web, imagens e aplicações.
 +
 
Marco Neves e Bruno Almeida: Responsáveis pelo aprofundamento e elaboração da arborescência.
 
Marco Neves e Bruno Almeida: Responsáveis pelo aprofundamento e elaboração da arborescência.
  
Linha 57: Linha 61:
 
Definição de uma interface composta por menus vectoriais combinados com o realismo de imagens bitmap nas guitarras e no fundo do menu.
 
Definição de uma interface composta por menus vectoriais combinados com o realismo de imagens bitmap nas guitarras e no fundo do menu.
 
Definição da animação do fundo do menu, composta por um conjunto de imagens bitmap com animação de posição muito lenta. No final deste movimento, um abanão repentino faz a transição entre as imagens de fundo.
 
Definição da animação do fundo do menu, composta por um conjunto de imagens bitmap com animação de posição muito lenta. No final deste movimento, um abanão repentino faz a transição entre as imagens de fundo.
 +
Elaboração das grelhas da aplicação.
  
 
===Levantamento do Estado da Arte===
 
===Levantamento do Estado da Arte===
  
 
Foi elaborada mais pesquisa no sentido de procurar objectos e imagens para incorporar na aplicação.
 
Foi elaborada mais pesquisa no sentido de procurar objectos e imagens para incorporar na aplicação.
 +
 +
http://virtualpiano.eu/guitar/
 +
 +
Outra aplicação com características interessantes para o nosso projecto. Desta vez o método de desencadeamento do som das cordas é o que nós pretendemos implementar.
 +
 +
http://www.dafont.com/hard-rock.font          HARD ROCK
 +
 +
http://www.dafont.com/punkrockshow.font        PUNK ROCK SHOW
 +
 +
http://www.dafont.com/decibel.font            DECIBEL
 +
 +
http://www.dafont.com/airstream.font          AIRSTREAM
 +
 +
http://www.dafont.com/velocette.font          VELOCETTE
 +
 +
http://www.dafont.com/appleberry.font          AP
 +
 +
Pesquisa de várias Fonts para implementar ao longo do projeto.
  
  
 
===Distribuição de Tarefas===
 
===Distribuição de Tarefas===
 +
 +
Marco Gonçalves: Elaboração da Wikis.
 +
 +
Marco Neves e Bruno Almeida: Elaboração das grelhas e dos fundos da aplicação.
 +
 +
Marco Gonçalves e João Seabra: Pesquisa para o estado da Arte e participação crítica e construtiva no resto dos fatores a abordar neste dia.
 +
 +
==21-12-2012==
 +
 +
===Diário de Bordo===
 +
 +
Durante estes dias de férias começámos o desenvolvimento da aplicação no flash. Criámos o menu principal, que consiste numa guitarra. Os botões que nos levam para outras partes da aplicação estarão “escondidos” no corpo da guitarra (paradigma de interação ambiente).
 +
 +
[[Ficheiro:Bg1.jpg]]
 +
 +
A imagem de fundo foi importada diretamente do Photoshop para o Flash. 
 +
Definimos também várias ideias para os vários botões:
 +
 +
-Os botões de controlo e a entrada do jack na guitarra serão botões com animações diferentes. Algumas das ideias foram: um botão de controlo a rodar a alta velocidade, um botão de controlo a expelir chamas, um trovão a atingir um botão, a entrada do cabo de jack a ser disparada da guitarra, ficando presa por uma mola a oscilar, etc.
 +
Elaborámos já algumas amostras de possíveis versões desses botões e recolhemos elementos visuais que podemos usar mais tarde na elaboração dos mesmos.
 +
 +
[[Ficheiro:Nohole.jpg]] [[Ficheiro:Toneknob.jpg]]
 +
 +
[[Ficheiro:Flames2.jpg]]
 +
 +
Tendo em mente que uma das partes mais exigentes na elaboração do nosso projeto vão ser os vários jogos, reunimos imagens de guitarras que serão utilizadas nos mesmos.
 +
{imagens guitarras}
 +
 +
===Distribuição de tarefas===
 +
 +
Marco Gonçalves: Elaboração das animações do menu rápido
 +
 +
Marco Neves: Elaboração de animações para o menu principal
 +
 +
Bruno Almeida: Elaboração de animações para o menu principal e menu rápido
 +
 +
João Seabra: Pesquisa de elementos sonoros para integrar na aplicação.
 +
 +
==09-01-2013==
 +
 +
===Diário de Bordo===
 +
 +
Criámos o menu-rápido ( já com animações de guitarras a aparecer quando se passa o rato sobre os vários botões do mesmo), os botões de “mute” e de “sobre?” (on rollover mostra informação sobre a aplicação, o seu funcionamento e o seu objetivo), e as animações dos botões do menu principal.
 +
Gravámos sons de cordas soltas e fizemos com que as cordas da guitarra do menu principal fizessem tocar os sons ao passar do rato.
 +
Além disso criámos um ícone para o cursor a utilizar na aplicação.
 +
 +
===Divisão de Tarefeas===
 +
 +
Marco Gonçalves: Continuação da elaboração das animações do menu-rápido. Gravação dos sons da guitarra e elaboração da Wiki.
 +
 +
Marco Neves: Continuação da elaboração das animações do menu principal
 +
 +
Bruno Almeida: Gravação dos sons da guitarra e elaboração do cursor personalizado da aplicação. Ajuda na elaboração das animações.
 +
 +
João Seabra: Continuação da pesquisa de elementos de som e ajuda na elaboração da wiki. 
 +
 +
==10-01-2013==
 +
 +
===Diário de Bordo===
 +
 +
Início da criação de um dos jogos:
 +
 +
Foram feitos vários movie-clips contendo uma guitarra e uma sério de indicadores que formam um acorde. O objetivo deste jogo é, a partir da imagem, descobrir e indicar, de um conjunto de respostas dadas, o nome do acorde desenhado. Será uma espécie de questionário de escolha múltipla.
 +
Os acordes desenhados servirão igualmente para implementar no dicionário de acordes.
 +
Foram também implementados no flash alguns dos sons pertencentes a cada botão do menu principal (os controladores da guitarra, e a entrada do jack).
 +
Os materiais criados para o primeiro jogo serão os mesmos a implementar nos outro dois, visto que teremos apenas que criar os códigos.
 +
 +
===Divisão de Tarefas:===
 +
 +
Marco Gonçalves: Elaboração da Wiki e ajuda na criação dos movie-clips dos acordes
 +
 +
Marco Neves: Implementação dos sons nos botões do menu-principal.
 +
 +
Bruno Almeida: Ajuda na criação dos movie-clips das guitarras e início da programação do primeiro jogo.
 +
 +
João Seabra: Trabalho no Dicionário da aplicação.
 +
 +
==11-01-2013==
 +
 +
===Diário de Bordo===
 +
 +
Fim da implementação dos sons nos botões do menu principal.
 +
Início da elaboração do Dicionário da aplicação.
 +
Finalização da programação de um dos jogos.
 +
Criação de um protótipo da Intro da aplicação.
 +
Ajustes e aperfeiçoamento de todas as partes da aplicação criadas até ao momento.
 +
 +
===Divisão de Tarefas===
 +
 +
Marco Gonçalves: Elaboração da wiki, criação do livro de acordes e ajuda na escrita do dicionário de acordes. Pesquisa de recursos áudio a implementar no som de fundo da aplicação.
 +
 +
Marco Neves: Elaboração das animações da Intro.
 +
 +
Bruno Almeida: Programação dos jogos da aplicação e ajuda na elaboração do dicionário e do livro de acordes.
 +
 +
João Seabra: Pesquisa de recursos áudio a implementar no som de fundo da aplicação. Elaboração do Dicionário.
 +
 +
==13-01-2013==
 +
 +
===Diário de Bordo===
 +
 +
Finalização do projeto. Fim da programação dos jogos, da intro, e do livro de acordes.
 +
Implementação dos sons de fundo e últimos ajustes nas animações, verificação do funcionamento da aplicação
 +
 +
==Relatório==
 +
 +
===Apresentação do projeto===
 +
 +
O nome da nossa aplicação é “A-corda”, um trocadilho entre as palavras “Acorda” e “corda” e “acorde”, que pretende cativar o utilizador: “Acorda e aprende a tocar guitarra com esta aplicação”, é o que o nome da aplicação pretende transmitir e que traduz basicamente a sua função.
 +
A aplicação vai consistir portanto, numa espécie de manual de iniciação aos conceitos básicos de como tocar guitarra, focando-se, nomeadamente na aprendizagem de acordes.
 +
 +
Através de dois jogos e um livro de acordes, pretende-se que o utilizador consiga aprender, memorizar e reconhecer os acordes mais básicos da forma mais “descontraída” possível.
 +
 +
A aplicação vai possuir também um dicionário de vocabulário relacionado com guitarras em geral, com definições sucintas e relevantes.
 +
 +
===Análise e planeamento===
 +
 +
Na aplicação multimédia A-Corda optámos por tentar transmitir o dinamismo associado à imagem da guitarra eléctrica, definindo os conceitos chave de “Impacto, Vibrante, Energia e Choque” algo a ser expresso pela escolha das cores a utilizar até à escolha dos tipos de letra e reforçado pelas animações. No levantamento do estado da arte investigamos o aspecto das guitarras eléctricas em si, averiguando como as incorporar no corpo do trabalho e fomos também buscar alguma inspiração a revistas como solução a questões tipográficas e de imagética.
 +
No planeamento da aplicação investigamos várias aplicações da mesma área, encontramos 3 que nos despertaram especial interesse:
 +
 +
http://www.jogaflash.com.br/jogosonline/4153/Guitarra_Virtual.html
 +
 +
http://www.virtualmusicalinstruments.com/guitar
 +
 +
http://virtualpiano.eu/guitar/
 +
 +
Serviram de exemplo das maneiras que já se encontram disponíveis para ensinar acordes e aprender as notas. Na definição das funcionalidades que implementamos desviamo-nos destes modelos para maneiras que achamos mais acessíveis ou mais eficazes para aprender os acordes e portante combinamos a presença de um livro de acordes com os jogos que se apoiam uns aos outros na concretização da aprendizagem.
 +
 +
===Desenho Funcional===
 +
====Requisitos Funcionais====
 +
 +
As funcionalidades implementadas na aplicação são 2 jogos, um menu rápido, um pre loader, um dicionário de vocabulário e livro de acordes.
 +
O primeiro jogo chama-se “Escolhe o acorde certo” no qual é apresentado a forma de um acorde aleatoriamente e através dos botões presentes na barra o utilizador tenta acertar no acorde que acha correcto. São apresentados 10 acordes seguidos, no caso do utilizador errar existe um espaço onde aparece a resposta certa e o jogo continua, no final é apresentado o resultado obtido através de um texto que informa em quantos acordes acertou no percurso do jogo, acompanhado deste texto existe também um sistema de pontuação em estrelas e uma descrição do resultado, os resultados possíveis são:
 +
 +
0 Estrelas – nenhuma descrição
 +
 +
Meia estrela até 1 estrela e meia –  “Muito mau!!”
 +
 +
2 Estrelas/ 2 estrelas e meia – “Mau…”
 +
 +
3 Estrelas – “Razoável!!”
 +
 +
3 Estrelas e meia – “Podes fazer melhor”
 +
 +
4 Estrelas – “Boa!!!”
 +
 +
4 Estrelas e meia – “Muito bem!!”
 +
 +
5 Estrelas – “You ROCK!” acompanhado de estrelas graficamente diferentes
 +
 +
No segundo, “Constrói a forma” a situação inverte-se a informação apresentada é o nome do acorde e o utilizador deve tentar descrever a sua forma no braço da guitarra através das pintas presentes nas casas, através do clique o utilizador activa e desactiva as pintas que representam as casas ocupadas pelos dedos na execução do acorde. Este jogo também é composto por uma sequência aleatória de 10 acordes, no caso do utilizador errar ou acertar existe um espaço que informa com os textos “Correcto!” e “Errado!”. No final existe um sistema de pontuação igual à do primeiro jogo.
 +
 +
Disponível na nossa aplicação está um livro de acordes, que pode ser consultado para visualizar a forma de 14 acordes. Estes acordes são: Dó, Dó menor, Ré, Ré Menor, Mi, Mi menor, Fá, Fá Menor, Sol, Sol menor, Lá, Lá Menor, Si e Si menor. São também estes acordes que estão disponíveis nos 2 jogos.
 +
 +
A última funcionalidade implementada na nossa aplicação é o dicionário, aqui está presente várias palavras úteis da gíria da guitarra, tanto eléctrica como acústica.
 +
 +
====Estrutura Arborescente====
 +
 +
A Estrutura da aplicação é a seguinte:
 +
 +
[[Ficheiro:Desenho1 (2).jpg]]
 +
 +
====Desenho de interação e usabilidade====
 +
 +
Uma animação introdutória abre o menu principal.  A partir daqui, o utilizador pode dirigir-se ao jogo “Escolhe o acorde certo”, “Constrói a forma”, ao dicionário, ou ao livro de acordes.
 +
 +
É possível, através do “menu rápido” navegar entre qualquer uma destas páginas, independentemente da página em que o utilizador se encontra. Este pode ser facilmente aberto ou fechado com um clique em cima do botão dedicado. O logotipo da aplicação no canto superior esquerdo permite o acesso ao menu principal a partir de qualquer página da aplicação. A navegação faz-se através de um cursor personalizado constituído pela imagem de uma palheta.
 +
 +
No menu principal os botões estão incorporados no corpo da guitarra, sendo constituídos por vários elementos da guitarra fazendo assim uso do paradigma de interacção ambiente misturado com o índex no menu rápido.
 +
 +
===Desenho técnico===
 +
 +
Do ponto de vista técnico, a aplicação é desenvolvida no flash CS5, utilizando Action script 2.0 a 40FPS. Decidimos utilizar 40 FPS para tornar as animações mais fluidas e rápidas, já que as nossas animações têm movimentos bastante lentos que não ficariam tão suaves a 12 FPS. O tamanho do stage é de 1000x600 pixels.
 +
 +
===Produção do projeto===
 +
 +
====Estrutura e meios de navegação/interacção====
 +
 +
A estrutura da aplicação sofreu alterações desda a sua conceptualização, sendo retirado o terceiro jogo que nunca chegou a ser definido, sendo substituído pela introdução que passou a ganhar mais relevância como animação e contextualização do flash do que propriamente apenas uma entrada.
 +
 +
O cursor em forma de palheta remete para o tema deste projecto, e achámos interessante utilizá-lo, pois ao passar o rato sobre as cordas da guitarra, simulamos o toque nas cordas de uma guitarra com a palheta.
 +
 +
Os vários cenários da aplicação estão divididos em Scenes. A navegação entre estas Scenes é feita através de buttons e as várias animações foram produzidas dentro de movieclips que estão presentes em praticamente tudo, desde overs de botões até à entrada de elementos.
 +
As Scenes dos jogos são compostas de 11 frames, em cada uma destas frames são controladas as variáveis utilizadas no jogo e a visibilidade de movieclips através de actionscript.
 +
 +
====Integração e controlo de som====
 +
 +
Na produção da aplicação foram integrados vários sons associados às animações e uma música de fundo. Os sons das cordas no menu foram gravados através de uma guitarra ligada a um PC pela entrada do microfone com um adaptador de jack 6,3mm para 3,5mm e gravados no Audacity. Os restantes efeitos sonoros e a música foram pesquisados pela internet. O controlo destes sons é feito através de actionscript,  havendo uma excepção, controlando a sua reprodução e paragem. Existe também um botão de controlo de som que retira o volume a todos os sons.
 +
 +
====Animação====
 +
 +
A animação na aplicação toma um papel fundamental como forma de reforçar o impacto definido na temática visual. Existe como forma de entrada a vários elementos e de feedback no over dos botões, tornando-os mais reactivos à interacção do utilizador. Na produção das animações utilizamos várias técnicas como animação frame by frame e por Key Framing, a utilização de masks. Respeitando princípios como o follow through no over dos menus rápidos e no botão do primeiro jogo no qual o relâmpago resulta do brilhar do botão. Na produção das animações procuramos abusar da criatividade de forma a criar animações as mais apelativas possíveis. No fundo do flash está sempre presente uma animação de movimento bastante lenta que preferimos a um fundo estático com o objectivo de transmitir dinamismo.
 +
 +
====Soluções técnicas adoptadas param a resolução de problemas====
 +
 +
Na programação de botões para outras cenas mudamos o código utilizado normalmente:
 +
 +
On(release){
 +
 +
_root.gotoAndStop(“cena”, 1);
 +
 +
}
 +
 +
Para o controlo através de instance names pois esses códigos não funcionavam devido à posição dos botões dentro de movie clips. O código usado foi:
 +
 +
Movieclip.button.onRelease = function () {
 +
 +
gotoAndStop(“cena”, 1);
 +
 +
}
 +
 +
Outra das maneiras com que tentamos resolver este problema foi por o primeiro a levar a outra frame da mesma cena e nessa frame fazia-se a passagem para a cena pretendida.
 +
 +
No jogo onde se constrói a forma dos acordes ocorria um problema onde um acorde, no caso de ser gerado o mesmo acorde 2 vezes seguidas era impossível acertar no acorde certo. Este problema foi corrigido prevenindo um acorde de aparecer 2 vezes seguidas por meio de uma variável que guarda informação acerca do acorde anterior.
 +
 +
===6.- Conclusões===
 +
 +
====Reflexão crítica.====
 +
 +
O resultado final da aplicação é bastante satisfatório, tendo sido produzido uma aplicação genuinamente útil e funcional e um carácter bem definido.
 +
 +
No entanto a aplicação apesar de estar num estado final tem alguns bugs nos jogos, que normalmente podem ser corrigidos voltando a abrir os jogos ou fazendo refresh da página no browser. Estes bugs incluem não haver 10 acordes nos jogos e a pontuação final resultar num 12/10. Para além destes bugs fizemos uso de bastantes imagens bitmap o que resultou num ficheiro bastante grande para a distribuição on-line. Estas imagens também nem sempre produzem os melhores resultados na animação, sendo menos flexíveis do que as imagens vectoriais.
 +
 +
====Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto====
 +
 +
Incluir sons dos acordes no livro de acordes, produzir um jogo onde o utilizador fazia uso dos acordes que aprendeu numa música, incluir uma secção para escalas e disponibilizar vários tipos de guitarras para o segundo jogo com vários tipos de som.

Edição actual desde as 00h45min de 16 de Janeiro de 2013

Índice

06-12-12

Diário de bordo

Desenvolveram se os seguintes assuntos: Tema – O nosso tema tem como base a área musical, mais directamente, as guitarras. As quais pertencem a família dos instrumentos de cordas. Na nossa aplicação multimédia, vamos desenvolver, os seguintes tópicos: como funciona, aulas para principiantes interactivas e um dicionário musical. Os vários paradigmas de interactividade e de distribuição, ainda por definir. Esta aplicação multimédia tem como objectivo, dinamizar a musica e bem como o gosto pelas guitarras, nos utilizadores.

Desenvolvemos uma arborescência provisória.

Distribuíção de Tarefas

Marco Neves, Marco Gonçalves, Bruno Almeida e João Seabra: Criação do conceito da aplicação e definição das características.

Marco Gonçalves e João Seabra: Responsáveis pela elaboração da Wikis.

10-12-2012

Diário de Bordo

Foi desenvolvida a arborescência do nosso projecto.

Arb.jpg

A aplicação a desenvolver consistirá numa intro, que terminará num menu, de onde será possível aceder a: -3 jogos interativos

-Um dicionário de vocabulário relacionado com o tema das guitarras.

-Um livro de acordes, que ajudará não só no objetivo lúdico da aplicação como no desempenho do utilizador nos vários jogos.

A navegação entre as várias páginas da aplicação será livre. Não será necessário regressar ao menu para, por exemplo, sair de um jogo para abrir outro. Isto ajuda a maximizar a liberdade de navegação do utilizador.

Definimos o aspeto visual do site: Dimensões: 1000x600 O tema Visual pretende transmitir a ideia de energia da guitarra eléctrica, bem como transmitir visualmente os conceitos de electricidade e impacto através de cores vibrantes e animações enérgicas com movimentos repentinos. Elaboração de uma palette de cores.

Palletes.png

Levantamento do estado da Arte

http://www.jogaflash.com.br/jogosonline/4153/Guitarra_Virtual.html

http://www.virtualmusicalinstruments.com/guitar

Estas aplicações flash apresentam muitas das funcionalidades interessantes que poderiam ser implementadas na nossa aplicação. Nomeadamente a forma como é tocada cada corda, individualmente, nas guitarras. Nos jogos que vão incorporar o nosso projecto, teremos que criar uma forma de: 1º: seleccionar as cordas/acordes que se pretende tocar, num braço de guitarra. 2º: fazer soar as cordas individualmente com uma ordem do utilizador. (individualmente, pois imagine-se o seguinte: se o utilizador construir um acorde que não existe ou simplesmente construir mal um acorde, gostaríamos que o som produzido pela guitarra deverá ser o mesmo que uma guitarra produziria. Para tal teremos que ter um som diferente para cada corda e para cada traste do braço.) No caso destas aplicações, as cordas soam quando se clica nelas, mas gostaríamos que o fizessem com um simples roll over.

Distribuição de Tarefas

Marco Neves, Marco Gonçalves, Bruno Almeida e João Seabra: Pesquisa de páginas web, imagens e aplicações.

Marco Neves e Bruno Almeida: Responsáveis pelo aprofundamento e elaboração da arborescência.

17-12-2012

Diário de Bordo

Definição de uma interface composta por menus vectoriais combinados com o realismo de imagens bitmap nas guitarras e no fundo do menu. Definição da animação do fundo do menu, composta por um conjunto de imagens bitmap com animação de posição muito lenta. No final deste movimento, um abanão repentino faz a transição entre as imagens de fundo. Elaboração das grelhas da aplicação.

Levantamento do Estado da Arte

Foi elaborada mais pesquisa no sentido de procurar objectos e imagens para incorporar na aplicação.

http://virtualpiano.eu/guitar/

Outra aplicação com características interessantes para o nosso projecto. Desta vez o método de desencadeamento do som das cordas é o que nós pretendemos implementar.

http://www.dafont.com/hard-rock.font HARD ROCK

http://www.dafont.com/punkrockshow.font PUNK ROCK SHOW

http://www.dafont.com/decibel.font DECIBEL

http://www.dafont.com/airstream.font AIRSTREAM

http://www.dafont.com/velocette.font VELOCETTE

http://www.dafont.com/appleberry.font AP

Pesquisa de várias Fonts para implementar ao longo do projeto.


Distribuição de Tarefas

Marco Gonçalves: Elaboração da Wikis.

Marco Neves e Bruno Almeida: Elaboração das grelhas e dos fundos da aplicação.

Marco Gonçalves e João Seabra: Pesquisa para o estado da Arte e participação crítica e construtiva no resto dos fatores a abordar neste dia.

21-12-2012

Diário de Bordo

Durante estes dias de férias começámos o desenvolvimento da aplicação no flash. Criámos o menu principal, que consiste numa guitarra. Os botões que nos levam para outras partes da aplicação estarão “escondidos” no corpo da guitarra (paradigma de interação ambiente).

Bg1.jpg

A imagem de fundo foi importada diretamente do Photoshop para o Flash. Definimos também várias ideias para os vários botões:

-Os botões de controlo e a entrada do jack na guitarra serão botões com animações diferentes. Algumas das ideias foram: um botão de controlo a rodar a alta velocidade, um botão de controlo a expelir chamas, um trovão a atingir um botão, a entrada do cabo de jack a ser disparada da guitarra, ficando presa por uma mola a oscilar, etc. Elaborámos já algumas amostras de possíveis versões desses botões e recolhemos elementos visuais que podemos usar mais tarde na elaboração dos mesmos.

Nohole.jpg Toneknob.jpg

Flames2.jpg

Tendo em mente que uma das partes mais exigentes na elaboração do nosso projeto vão ser os vários jogos, reunimos imagens de guitarras que serão utilizadas nos mesmos. {imagens guitarras}

Distribuição de tarefas

Marco Gonçalves: Elaboração das animações do menu rápido

Marco Neves: Elaboração de animações para o menu principal

Bruno Almeida: Elaboração de animações para o menu principal e menu rápido

João Seabra: Pesquisa de elementos sonoros para integrar na aplicação.

09-01-2013

Diário de Bordo

Criámos o menu-rápido ( já com animações de guitarras a aparecer quando se passa o rato sobre os vários botões do mesmo), os botões de “mute” e de “sobre?” (on rollover mostra informação sobre a aplicação, o seu funcionamento e o seu objetivo), e as animações dos botões do menu principal. Gravámos sons de cordas soltas e fizemos com que as cordas da guitarra do menu principal fizessem tocar os sons ao passar do rato. Além disso criámos um ícone para o cursor a utilizar na aplicação.

Divisão de Tarefeas

Marco Gonçalves: Continuação da elaboração das animações do menu-rápido. Gravação dos sons da guitarra e elaboração da Wiki.

Marco Neves: Continuação da elaboração das animações do menu principal

Bruno Almeida: Gravação dos sons da guitarra e elaboração do cursor personalizado da aplicação. Ajuda na elaboração das animações.

João Seabra: Continuação da pesquisa de elementos de som e ajuda na elaboração da wiki.

10-01-2013

Diário de Bordo

Início da criação de um dos jogos:

Foram feitos vários movie-clips contendo uma guitarra e uma sério de indicadores que formam um acorde. O objetivo deste jogo é, a partir da imagem, descobrir e indicar, de um conjunto de respostas dadas, o nome do acorde desenhado. Será uma espécie de questionário de escolha múltipla. Os acordes desenhados servirão igualmente para implementar no dicionário de acordes. Foram também implementados no flash alguns dos sons pertencentes a cada botão do menu principal (os controladores da guitarra, e a entrada do jack). Os materiais criados para o primeiro jogo serão os mesmos a implementar nos outro dois, visto que teremos apenas que criar os códigos.

Divisão de Tarefas:

Marco Gonçalves: Elaboração da Wiki e ajuda na criação dos movie-clips dos acordes

Marco Neves: Implementação dos sons nos botões do menu-principal.

Bruno Almeida: Ajuda na criação dos movie-clips das guitarras e início da programação do primeiro jogo.

João Seabra: Trabalho no Dicionário da aplicação.

11-01-2013

Diário de Bordo

Fim da implementação dos sons nos botões do menu principal. Início da elaboração do Dicionário da aplicação. Finalização da programação de um dos jogos. Criação de um protótipo da Intro da aplicação. Ajustes e aperfeiçoamento de todas as partes da aplicação criadas até ao momento.

Divisão de Tarefas

Marco Gonçalves: Elaboração da wiki, criação do livro de acordes e ajuda na escrita do dicionário de acordes. Pesquisa de recursos áudio a implementar no som de fundo da aplicação.

Marco Neves: Elaboração das animações da Intro.

Bruno Almeida: Programação dos jogos da aplicação e ajuda na elaboração do dicionário e do livro de acordes.

João Seabra: Pesquisa de recursos áudio a implementar no som de fundo da aplicação. Elaboração do Dicionário.

13-01-2013

Diário de Bordo

Finalização do projeto. Fim da programação dos jogos, da intro, e do livro de acordes. Implementação dos sons de fundo e últimos ajustes nas animações, verificação do funcionamento da aplicação

Relatório

Apresentação do projeto

O nome da nossa aplicação é “A-corda”, um trocadilho entre as palavras “Acorda” e “corda” e “acorde”, que pretende cativar o utilizador: “Acorda e aprende a tocar guitarra com esta aplicação”, é o que o nome da aplicação pretende transmitir e que traduz basicamente a sua função. A aplicação vai consistir portanto, numa espécie de manual de iniciação aos conceitos básicos de como tocar guitarra, focando-se, nomeadamente na aprendizagem de acordes.

Através de dois jogos e um livro de acordes, pretende-se que o utilizador consiga aprender, memorizar e reconhecer os acordes mais básicos da forma mais “descontraída” possível.

A aplicação vai possuir também um dicionário de vocabulário relacionado com guitarras em geral, com definições sucintas e relevantes.

Análise e planeamento

Na aplicação multimédia A-Corda optámos por tentar transmitir o dinamismo associado à imagem da guitarra eléctrica, definindo os conceitos chave de “Impacto, Vibrante, Energia e Choque” algo a ser expresso pela escolha das cores a utilizar até à escolha dos tipos de letra e reforçado pelas animações. No levantamento do estado da arte investigamos o aspecto das guitarras eléctricas em si, averiguando como as incorporar no corpo do trabalho e fomos também buscar alguma inspiração a revistas como solução a questões tipográficas e de imagética. No planeamento da aplicação investigamos várias aplicações da mesma área, encontramos 3 que nos despertaram especial interesse:

http://www.jogaflash.com.br/jogosonline/4153/Guitarra_Virtual.html

http://www.virtualmusicalinstruments.com/guitar

http://virtualpiano.eu/guitar/

Serviram de exemplo das maneiras que já se encontram disponíveis para ensinar acordes e aprender as notas. Na definição das funcionalidades que implementamos desviamo-nos destes modelos para maneiras que achamos mais acessíveis ou mais eficazes para aprender os acordes e portante combinamos a presença de um livro de acordes com os jogos que se apoiam uns aos outros na concretização da aprendizagem.

Desenho Funcional

====Requisitos Funcionais====

As funcionalidades implementadas na aplicação são 2 jogos, um menu rápido, um pre loader, um dicionário de vocabulário e livro de acordes. O primeiro jogo chama-se “Escolhe o acorde certo” no qual é apresentado a forma de um acorde aleatoriamente e através dos botões presentes na barra o utilizador tenta acertar no acorde que acha correcto. São apresentados 10 acordes seguidos, no caso do utilizador errar existe um espaço onde aparece a resposta certa e o jogo continua, no final é apresentado o resultado obtido através de um texto que informa em quantos acordes acertou no percurso do jogo, acompanhado deste texto existe também um sistema de pontuação em estrelas e uma descrição do resultado, os resultados possíveis são:

0 Estrelas – nenhuma descrição

Meia estrela até 1 estrela e meia – “Muito mau!!”

2 Estrelas/ 2 estrelas e meia – “Mau…”

3 Estrelas – “Razoável!!”

3 Estrelas e meia – “Podes fazer melhor”

4 Estrelas – “Boa!!!”

4 Estrelas e meia – “Muito bem!!”

5 Estrelas – “You ROCK!” acompanhado de estrelas graficamente diferentes

No segundo, “Constrói a forma” a situação inverte-se a informação apresentada é o nome do acorde e o utilizador deve tentar descrever a sua forma no braço da guitarra através das pintas presentes nas casas, através do clique o utilizador activa e desactiva as pintas que representam as casas ocupadas pelos dedos na execução do acorde. Este jogo também é composto por uma sequência aleatória de 10 acordes, no caso do utilizador errar ou acertar existe um espaço que informa com os textos “Correcto!” e “Errado!”. No final existe um sistema de pontuação igual à do primeiro jogo.

Disponível na nossa aplicação está um livro de acordes, que pode ser consultado para visualizar a forma de 14 acordes. Estes acordes são: Dó, Dó menor, Ré, Ré Menor, Mi, Mi menor, Fá, Fá Menor, Sol, Sol menor, Lá, Lá Menor, Si e Si menor. São também estes acordes que estão disponíveis nos 2 jogos.

A última funcionalidade implementada na nossa aplicação é o dicionário, aqui está presente várias palavras úteis da gíria da guitarra, tanto eléctrica como acústica.

Estrutura Arborescente

A Estrutura da aplicação é a seguinte:

Desenho1 (2).jpg

Desenho de interação e usabilidade

Uma animação introdutória abre o menu principal. A partir daqui, o utilizador pode dirigir-se ao jogo “Escolhe o acorde certo”, “Constrói a forma”, ao dicionário, ou ao livro de acordes.

É possível, através do “menu rápido” navegar entre qualquer uma destas páginas, independentemente da página em que o utilizador se encontra. Este pode ser facilmente aberto ou fechado com um clique em cima do botão dedicado. O logotipo da aplicação no canto superior esquerdo permite o acesso ao menu principal a partir de qualquer página da aplicação. A navegação faz-se através de um cursor personalizado constituído pela imagem de uma palheta.

No menu principal os botões estão incorporados no corpo da guitarra, sendo constituídos por vários elementos da guitarra fazendo assim uso do paradigma de interacção ambiente misturado com o índex no menu rápido.

Desenho técnico

Do ponto de vista técnico, a aplicação é desenvolvida no flash CS5, utilizando Action script 2.0 a 40FPS. Decidimos utilizar 40 FPS para tornar as animações mais fluidas e rápidas, já que as nossas animações têm movimentos bastante lentos que não ficariam tão suaves a 12 FPS. O tamanho do stage é de 1000x600 pixels.

Produção do projeto

====Estrutura e meios de navegação/interacção====

A estrutura da aplicação sofreu alterações desda a sua conceptualização, sendo retirado o terceiro jogo que nunca chegou a ser definido, sendo substituído pela introdução que passou a ganhar mais relevância como animação e contextualização do flash do que propriamente apenas uma entrada.

O cursor em forma de palheta remete para o tema deste projecto, e achámos interessante utilizá-lo, pois ao passar o rato sobre as cordas da guitarra, simulamos o toque nas cordas de uma guitarra com a palheta.

Os vários cenários da aplicação estão divididos em Scenes. A navegação entre estas Scenes é feita através de buttons e as várias animações foram produzidas dentro de movieclips que estão presentes em praticamente tudo, desde overs de botões até à entrada de elementos. As Scenes dos jogos são compostas de 11 frames, em cada uma destas frames são controladas as variáveis utilizadas no jogo e a visibilidade de movieclips através de actionscript.

====Integração e controlo de som====

Na produção da aplicação foram integrados vários sons associados às animações e uma música de fundo. Os sons das cordas no menu foram gravados através de uma guitarra ligada a um PC pela entrada do microfone com um adaptador de jack 6,3mm para 3,5mm e gravados no Audacity. Os restantes efeitos sonoros e a música foram pesquisados pela internet. O controlo destes sons é feito através de actionscript, havendo uma excepção, controlando a sua reprodução e paragem. Existe também um botão de controlo de som que retira o volume a todos os sons.

====Animação====

A animação na aplicação toma um papel fundamental como forma de reforçar o impacto definido na temática visual. Existe como forma de entrada a vários elementos e de feedback no over dos botões, tornando-os mais reactivos à interacção do utilizador. Na produção das animações utilizamos várias técnicas como animação frame by frame e por Key Framing, a utilização de masks. Respeitando princípios como o follow through no over dos menus rápidos e no botão do primeiro jogo no qual o relâmpago resulta do brilhar do botão. Na produção das animações procuramos abusar da criatividade de forma a criar animações as mais apelativas possíveis. No fundo do flash está sempre presente uma animação de movimento bastante lenta que preferimos a um fundo estático com o objectivo de transmitir dinamismo.

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

Na programação de botões para outras cenas mudamos o código utilizado normalmente:

On(release){

_root.gotoAndStop(“cena”, 1);

}

Para o controlo através de instance names pois esses códigos não funcionavam devido à posição dos botões dentro de movie clips. O código usado foi:

Movieclip.button.onRelease = function () {

gotoAndStop(“cena”, 1);

}

Outra das maneiras com que tentamos resolver este problema foi por o primeiro a levar a outra frame da mesma cena e nessa frame fazia-se a passagem para a cena pretendida.

No jogo onde se constrói a forma dos acordes ocorria um problema onde um acorde, no caso de ser gerado o mesmo acorde 2 vezes seguidas era impossível acertar no acorde certo. Este problema foi corrigido prevenindo um acorde de aparecer 2 vezes seguidas por meio de uma variável que guarda informação acerca do acorde anterior.

6.- Conclusões

Reflexão crítica.

O resultado final da aplicação é bastante satisfatório, tendo sido produzido uma aplicação genuinamente útil e funcional e um carácter bem definido.

No entanto a aplicação apesar de estar num estado final tem alguns bugs nos jogos, que normalmente podem ser corrigidos voltando a abrir os jogos ou fazendo refresh da página no browser. Estes bugs incluem não haver 10 acordes nos jogos e a pontuação final resultar num 12/10. Para além destes bugs fizemos uso de bastantes imagens bitmap o que resultou num ficheiro bastante grande para a distribuição on-line. Estas imagens também nem sempre produzem os melhores resultados na animação, sendo menos flexíveis do que as imagens vectoriais.

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

Incluir sons dos acordes no livro de acordes, produzir um jogo onde o utilizador fazia uso dos acordes que aprendeu numa música, incluir uma secção para escalas e disponibilizar vários tipos de guitarras para o segundo jogo com vários tipos de som.

Obtida de "http://wikis.ua.pt/labmm1/index.php?title=Utilizador:Carochas"
Ferramentas pessoais
Espaços nominais
Variantes
Acções
Navegação
Ferramentas