Melody/rRelatorio
From LABMM1_IDE
(→6 – Conclusões) |
(→3 - Desenho funcional) |
||
| Line 38: | Line 38: | ||
Bateria- | Bateria- | ||
Os restantes botões (menus) têm como animação de passagem do rato uma mudança no brilho destes. | Os restantes botões (menus) têm como animação de passagem do rato uma mudança no brilho destes. | ||
| + | |||
'''3.2 - Arborescência''' | '''3.2 - Arborescência''' | ||
Latest revision as of 22:17, 14 January 2011
Contents |
Relatório do projecto "Melody"
1. Apresentação do projecto
O projecto apresentado, realizado no âmbito das disciplinas Laboratório Multimédia I e Imagem Digital Estática do curso de novas tecnologias da comunicação visa a concretização de uma aplicação multimédia com distribuição on-line. Para escolher a temática juntámo-nos e dialogámos acerca de gostos pessoais de cada, de forma a podermos ter um tema que fosse do agrado de todos, e assim escolhemos fazer uma aplicação sobre música e na área do entretenimento. A aplicação baseia-se, essencialmente, no incentivo do gosto pela música e em educar musicalmente, tendo o grupo optado por escolher as crianças como público-alvo. Através da visualização de alguns sites e jogos, decidimos o conteúdo certo da aplicação e as regras gráficas que iriamos estabelecer nos objectos, de modo a ter uma identificação própria da aplicação. Assim sendo, a aplicação baseia-se em animações de três personagens que ajudam o utilizador durante toda a aplicação. De seguida, o utilizador terá à disposição um menu (metáfora do quarto) com paradigma de interacção ambiente, ou seja, os botões de ligação a outras janelas estarão aí embutidos no ambiente e o utilizador terá de os descobrir. Na sua aventura terá acesso a instrumentos, curiosidades e jogos relacionados com os respectivos instrumentos. A criança poderá manipular o som, ter acesso a uma pequena informação sobre o grupo e um botão de fechar, além do botão de volta para o quarto presente em todas as janelas que o utilizador abrir.
2. Análise e planeamento
Para começarmos a trabalhar na aplicação pesquisámos alguns sites e experimentámos alguns jogos que nos pudessem inspirar à realização de actividades lúdicas ao utilizador. A partir daqui pudemos dar uma nova dimensão às ideias expostas pelo grupo, avaliando a sua utilidade e meios de execução. Consultamos, como base, os seguintes sites: » J.K. Howling http://www.jkrowling.com/ - Como pretendíamos obter uma aplicação onde os utilizadores pudessem navegar através de ecrãs metafóricos de forma a que pudessem reconhecer situações da realidade (no nosso caso o quarto), analisamos o site da autora J.K.Howling, onde podemos encontrar um paradigma de interacção ambiente. (este site foi analisado nas aulas de laboratório multimédia I como exemplo de aplicação nas primeiras aulas) » Made in me http://www.madeinme.com/ - Para termos uma ideia mais geral da aplicação vimos também este site. A partir da sua visualização percepcionámos actividades que poderíamos facultar às crianças de forma educativa, divertida e cativante. O jogo possui também um paradigma de interacção ambiente e personagens que interagem com os utilizadores de forma a poder “brincar” com estes. » AgencyNet http://www.agencynet.com/ - Para além dos anteriores vimos este site que também é alusivo ao mesmo paradigma (retiramos a ideia do quarto a partir das divisões presentes no “escritório” do site). » Simon http://digitalgames.com.br/jogar-online/genius - Este site foi onde vimos e experimentamos um jogo semelhante àquele que pretendíamos inserir na nossa aplicação. O objectivo do mesmo é tentar decorar as cores e os sons e através da memorização desses digitar de igual modo a sequência e aí avançar o nível e quando o utilizador errar o jogo iniciar. Estabelecemos os principais objectivos desta aplicação: estimular a discriminação auditiva, ou seja, a distinção entre os diferentes tipos de sons contidos no projecto, estimular a memória auditiva através da repetição de sons. Também estimula a percepção visual na medida em que vão ter que encontrar os botões no ambiente do quarto. Estes itens foram os pré-requisitos que obtivemos numa investigação sobre desenvolvimento global de uma criança. Deste modo, estabelecemos algumas regras para a nossa aplicação, de modo a que o tema se adequasse ao público a que se destina: após a investigação sobre o tema da aplicação resolvemos inserir vários sons que captam a atenção (som de fundo, sons de movimentos no início com o arco-íris, sons nos jogos de cada instrumento, fala das personagens), animações nas personagens principais (movimento de olhos, boca, braços) para além dos botões icónicos utilizados para que as crianças possam identificar as imagens dos botões às suas funções.
3 - Desenho funcional
3.1 - Requisitos funcionais
No nosso projecto utilizamos vários elementos gráficos nos quais o utilizador pode interagir. Logo que iniciamos a aplicação temos acesso ao logótipo cujas letras, ao passar o rato, emitem (cada uma) um som diferente. No mesmo ecrã temos possibilidade de parar os sons emitidos pelas letras, através de um botão de stop embutido no ponto de exclamação. Ao clicar no botão “Entrar”, que corresponde a uma porta a nível gráfico, surge um novo ecrã onde é feita a apresentação das personagens. Caso o utilizador não queira ver a apresentação tem a possibilidade de “Saltar” desta (também representada com um botão gráfico) e ir directamente para o quarto (corresponde ao “Home”). No quarto podemos interagir com a gaveta do beliche. Esta abre e dentro tem a guitarra que ao clicar nos dá acesso a uma nova janela. Aqui o utilizador pode escolher entre jogar com o instrumento correspondente ou aprender algo mais sobre ele. Sempre que um instrumento é encontrado, aparecem estas duas possibilidades. Em todas as janelas, incluindo no quarto, a aplicação faculta um menu slider no canto superior direito simbolizado por uma seta. Quando pressionamos nesta, automaticamente o botão muda com uma seta virada para cima e temos acesso a uma barra de ferramentas com um botão de informação sobre os autores da aplicação, o “fechar” da aplicação, o botão de som que permite tirar ou pôr som e ainda um botão de maximizar a janela que quando clicado fica invisível e o botão de minimizar fica visível, ou seja, aqui temos dois botões sobrepostos utilizando o parâmetro “visible”. . De volta ao quarto, além de interagir com a gaveta e com a guitarra, também existe a possibilidade abrir a porta do armário onde nele se encontra a personagem “Me” escondido, ao clicar neste ele salta do armário para o centro do quarto. Também pode interagir com a bateria (ao clicar nela aparece a janela das opções de jogo/informação) e com o piano que se encontra em cima de uma estante.
No ecrã alusivo à informação de cada instrumento estão disponíveis dois botões onde um nos dá acesso ao quarto e à janela do jogo.
Requisitos funcionais – ecrãs de jogo
No ecrã do jogo do piano, está disponível um teclado (de piano) onde o utilizador ao clicar nos botões (teclas do piano), emitem um som correspondente à tecla neste também se encontra um botão que ao clicar nele surge uma animação sobre o clarinete. Respectivamente ao ecrã alusivo à guitarra encontramos seis botões onde cada um corresponde a um acorde na guitarra, onde ao passar o rato estes aumentam de tamanho. Neste ecrã também se encontra presente uma guitarra (gráfico),em que o utilizador ao passar o cursor por cima das cordas estas emitem o som correspondente. Bateria- Os restantes botões (menus) têm como animação de passagem do rato uma mudança no brilho destes.
3.2 - Arborescência
Nossa aplicação multimédia segue uma arborescência do tipo “Composta” onde nesta coexistem características das outras estruturas. Este tipo de arborescência permite-nos uma maior liberdade e facilidade de acesso aos conteúdos, ou seja, o utilizador para obter a informação na nossa aplicação não necessita de fazer muitos “cliques” e perder tempo à procura desta.
À medida que a aplicação ia sendo desenvolvida, deparámo-nos com várias dificuldades, uma delas foi na parte do jogo do piano, inicialmente pensámos em fazer dois tipos de jogos, um onde o utilizador pudesse jogar com o piano em modo livre e outro onde tivesse um desafio e ter de fazer uma sequência de oito notas, caso o utilizador vencesse este desafio, uma apresentação sobre o clarinete iria surgir.
3.3 - Desenho de interacção e usabilidade
A aplicação “Melody” foi concebida para crianças com idades compreendidas entre os seis e os nove anos de idade, tendo como objectivo o desenvolvimento do gosto e interesse por música, incentivando-os a querer aprender a tocar algum instrumento musical. Sendo este o nosso público alvo tivemos de fazer a nossa aplicação à base de sons, pois crianças de seis anos ainda não sabem ler, optámos por colocar textos mesmo assim (na parte da informação dos instrumentos) para tentar desenvolver a capacidade de leitura para as crianças embora a personagem fale nesse ecrã a criança pode ler (se já souber ler) ou então tentar perceber o texto. A aplicação multimédia tem como base jogos na medida que é mais fácil e divertido para crianças, visto que uma aplicação com apenas bonecos a falar ou cheia de texto não lhes iria interessar, desta forma podem interagir mais activamente na aplicação enquanto se divertem e aprendem ao mesmo tempo. A nível de aspecto visual utilizamos cores alegres e chamativas para o nosso público alvo, como por exemplo rosas, azuis, verdes etc., tal como as formas que são utilizadas (formas curvas)e a metáfora da aplicação (o quarto). Damos também a possibilidade de aceder à informação de modo rápido, os botões são grandes e à base de gráficos simples de entender.
4- Desenho Técnico
Para a aplicação correr é necessário ter uma ligação à Internet, visto que a aplicação será online, e o “Flash Player 9”. Código utilizado do ecrã do jogo do piano Este é o código utilizado em cada uma das teclas, este código era usado como teste para ver se funcionava, a sequencia correcta não seria a que está inserida no código.
// codigo para o jogo, em cada tecla (exemplo da tecla1)
on (release){ if (meuArray.length<8){
corresponde ao tamanho da sequencia
meuArray.push(1);
atribui o valor 1 ao array do utilizador
trace(meuArray+"\n");
mostra o output (para verificar)
}
if (meuArray.length==8){
compara os dois arrays e verifica
for (i=0; i<8; i++){
if (meuArray[i]==musica1[i]){
se está certa a sequência
continue;
}
_root.movieclip.gotoAndStop(1);
gotoAndStop("errado");
meuArray=new Array();
“reinicia” o array do utilizador
break;
}
trace("certo")
_root.movieclip.gotoAndStop(2)
meuArray=new Array();
}
}
// codigo para o jogo (na layer actions)
var musica1:Array= new Array(1,1,1,1,1,1,1,1);
cria o array da sequência certa e atribui os valores
var meuArray:Array= new Array();
cria o array que irá guardar os valores introduzidos pelo utilizador
var i:Number=0;
No ecrã do piano também tentámos inserir um ”slider” para controlar o volume, este é o código que se encontra na layer actions, este código funcionou correctamente:
// codigo para o volume
var mfundo:Sound=new Sound();
mfundo.attachSound("musicaFundo");
mfundo.start(0, 99);
var ratio:Number=1;
this.ratio = 0;
dragger.onPress = function() {
this.startDrag(false, 163.6, 352, 163.6, 400);
this.onMouseMove = function() {
ratio = 1-(this._y-352)/48;
_root.mfundo.setVolume(ratio*100);
}
dragger.onRelease= dragger.onReleaseOutside =function(){
dragger.stopDrag;
delete (dragger.onMouseMove);
delete (dragger.onRelease);
}
}
5 - Produção do projecto
5.1 Estrutura emeios de navegação/interacção
Primeiramente, a nossa aplicação, em relação a autoria multimédia, é baseada na sincronização temporal segundo o modelo de cast/score/scripting. Utilizamos, portanto, diversas animações que dependem de uma linha temporal para além da acção do utilizador e das suas possibilidades de navegação. Desta forma, recorremos a movieclips, botões, gráficos,sons (representantes do nosso “elenco”) e linguagem de programação para que pudéssemos enviar a cabeça de leitura para determinada frame de modo a reproduzir os ecrãs pretendidos havendo, portanto, simultaneidade e sobreposição de conteúdos. Em relação a navegação, a aplicação é dividida em duas partes: introdução e menu (quarto). No que toca à primeira, esta consiste numa animação onde se vão apresentar as personagens principais (Me,Lo e Dy). A aplicação inicia-se com a formação de um arco-íris com as cores de cada personagem (amarelo, azul e verde) onde há a fusão de três “estrelas” e a formação do botão de “entrar”. No entanto, a interacção já começa desde o princípio: antes da apresentação das personagens, é possível passar o cursor do rato através das letras “M, e, l, o, d, y” de forma a que cada uma reproduza um som (em piano). Assim, quando o utilizador activa o som este inicia a sua reprodução e repete-se em intervalos de tempo, formando uma “música” juntamente com as outras letras, que fazem sons distintos. Desta forma, o utilizador pode desenvolver a sua criatividade de forma a criar uma melodia (dependendo da maneira com que “toca” as letras). Este pode também parar a melodia criada a partir do botão inserido no ponto de exclamação do logótipo “Melody!” que deixa apenas a som de fundo em loop. Relativamente ao botão de entrar, este remete para a apresentação das personagens, onde cada uma destas diz o seu nome e o instrumento correspondente. Após a apresentação, as personagens entram para um piano de forma a que os utilizadores percebam que é neste que se o encontra o quarto. É nesta cena que se desenvolve a interacção principal. Na cena do quarto, possuímos diversas formas de interacção: 1 – O armário, onde as crianças podem abrir e fechar tanto a porta como a gaveta. Na porta podem encontrar o Lo escondido e podem fazer com que este salte para fora. Na gaveta podem encontrar uma forma rectangular que remete para o ecrã correspondente ao piano. Neste ecrã estas têm aceso a uma parte de informação para além do jogo, onde podem tocar nas teclas do piano. 2 – Uma gaveta que podem abrir e fechar e onde encontram a guitarra. Ao carregar na guitarra podem aceder a outro ecrã onde estas podem também aceder à informação sobre o instrumento para além de um jogo onde podem seleccionar acordes de músicas e estes começam a tocar. 3 – A bateria, onde os utilizadores podem aceder ao ecrã corresponde ao instrumento. Neste contém também uma parte de informação e de jogo. No jogo, o utilizador pode “tocar” o instrumento. Sendo assim, no que toca à navegação, esta é feita seguindo uma estrutura arborescente não linear. A partir do menu principal (quarto), o utilizador pode navegar em três níveis de profundidade (piano, guitarra, bateria) e aí podem navegar entre outros itens (voltar para o quarto, informação, desligar/ligar o som, minimizar/maximizar/fechar). Para além disso, em cada instrumento o utilizador pode aceder a duas separações: jogar e informação sobre o instrumento. Para estabelecer estas ligações utilizamos um paradigma de interacção índex em que, no primeiro caso, utilizamos um sub-menu que aparece no canto superior direito com as funcionalidades referidas (fechar, minimizar, maximizar,…) e, no segundo caso, um menu colocado a baixo que dá aceso às separações referidas. Em relação aos estilos de navegação/interacção utilizados, a nossa aplicação é caracterizada pela manipulação/navegação na medida em que o utilizador tem a liberdade para descobrir os instrumento através das gavetas e portas existentes na aplicação. Este também se pode inserir na conversação (pergunta/resposta) na medida em que no botão fechar é feita a questão ao utilizador se este tem a certeza de que pretende fechar a aplicação.
5.2 - Integração e controlo do som
Os sons das vozes e dos instrumentos foram gravados através do programa “Audacity”.
Vozes- as vozes das personagens foram gravadas pela mesma pessoa fazendo tons de voz diferentes para cada personagem (o Me foi gravado com voz normal, o Lo com sotaque brasileiro e na Dy com uma voz mais aguda), as falas correspondentes a cada personagem foram gravadas no mesmo projecto para não haver diferenças de fala para fala. O microfone pelo qual foi gravado o som das vozes fez ruído, para remover este foi usado “Efeitos – Remover ruído” no Audacity, mesmo utilizando essa ferramenta surgiam ainda ruídos, então usamos “Remover Cliques”, melhorando um pouco a qualidade do som. Para modificar as vozes foi usada a ferramenta “Efeitos - Alterar altura”, a personagem Me ficou com voz um pouco mais grave, o Lo com voz ainda mais grave e a Dy com voz aguda.
Sons dos instrumentos - estes sons foram gravados com outro microfone, tendo estes qualidade relativamente melhor, não foram modificados.
Outros sons - os sons de fundo e das notas (das letras do logótipo) foram retirados do site “soundsnap”. O som de fundo é original (ver ficheiros dos sons originais) deste site e foi apenas transferido para o flash em loop . No que toca ao som do arco-íris inicial, neste foram utilizados dois sons originais do soundsnap. O primeiro foi cortado de forma a apenas reproduzir a escala de notas e, no fim, adicionou-se outro som para oferecer o efeito da esfera a expandir na aplicação. Relativamente aos sons das letras, estes também foram directamente utilizados do soundsnap e colocados em loop.
O formato utilizado na aplicação foi o formato de som MP3 devido à sua compressão que embora hajam perdas estas são imperceptíveis ao ouvido humano, e sua qualidade ser relativamente boa, além de ser o formato mais utilizado na Internet (pois nossa aplicação é online) e compatível com distintos aparelhos de reprodução de som.
5.3 Animação
Na nossa aplicação recorremos muitas vezes à animação, de forma a captivar o nosso publico-alvo (as crianças). Primeiramente, temos a animação inicial da formação do arco-íris. Nesta, recorremos a utilização de uma máscara de forma a que as “tiras” do arco-íris se pudessem formar progressivamente, juntamente com as “estrelas” da cor de cada personagem. Na fusão das estrelas foram utilizados motion tweens de escala (aumentar a esfera e diminuir) para além do efeito do desvanecer a partir da manipulação do alpha dos gráficos. Na apresentação das personagens, fizemos a animação da boca para além da animação das personagens (que saltam tanto para o piano quando aparecem). No quarto, fizemos a animação da porta do armário, da gaveta do armário e da cama a abrir. Nestas, devido ao facto de quando utilizamos motion tweens as animações não ficarem da forma que pretendíamos, as animações foram feita frame-a-frame, o que nos obrigou a indicar todas as fases do processo. Em relação aos ecrãs de cada instrumento, também foi utilizado o recurso do alpha para além dos motions tweens de escala e de posição.
No que toca aos botões, inserimos um brilho de 50% na frame OVER para além da manipulação do alpha aquando do seu aparecimento.
5.4 - Sugestões
Concordamos que ainda estamos muito “verdes” nível do flahs, como por exemplo os botões mexerem-se e outros problemas, mas isso com o treino e a prática melhora-se. Algo que achamos que seria necessário dar logo desde o início era programação em ActionScript, pois alguém que não tem muitas bases de programação, ou que nunca trabalhou em nenhuma linguagem de programação é mais difícil entender os códigos e como estes funcionam, era importante ter uma cadeira onde se falasse de programação em Action Script 2.0 para ser explicado e um pouco mais aprofundado em que consistem alguns códigos mais importantes.
6 – Conclusões
6.1 – Reflexão crítica
Do nosso ponto de vista, a aplicação conseguiu alcançar alguns dos nossos objectivos principais: interagir com os instrumentos de forma a conhecê-los e a tornar a música atractiva para as crianças. No entanto, o jogo do piano que gostaríamos de inserir não foi feito com sucesso. Devido aos limitados conhecimentos que temos de linguagem de programação action script 2.0 necessária para este jogo (onde os utilizadores teriam que carregar nas teclas de forma a imitar a música tocada), não foi possível a sua execução, o que fez com que o grupo ficasse ligeiramente desiludido em relação a isto. No que toca à restante aplicação, achamos que perdemos muito tempo na resolução dos problemas que ocorreram durante o desenvolvimento do projecto. Para além disso, reflectimos e aprendemos que nos próximos projectos juntaremos as partes relactivas a cada elemento do grupo com mais antecedência. (uma vez que tínhamos feito em ficheiros .fla separados, juntamos todo o trabalho durante o último dia de entrega, o que não foi muito favorável). Sendo o utilizador a preocupação principal, pensamos que conseguimos utilizar os diálogos e os botões icónicos de forma a que estas pudessem reconhecer as funcionalidades sem que tivessem que ler as informações. No que toca ao trabalhol de grupo, como já referimos, durante toda a realização do projecto fomos confrontadas com diversos problemas que tivemos que resolver. Achamos que sem a colaboração em grupo, aproveitando o conhecimento de cada um e as suas qualidades, conseguimos finalizar o projecto da melhor forma possível. Aprendemos a conhecer melhor os nossos colegas de trabalho e interagir de forma a que todos pudéssemos contribuir para o resultado final. Finalmente, concordamos que os nossos conhecimentos a nível de programação devem ser aperfeiçoados de forma a poder desenvolver algumas das ideias que temos e que com o conhecimento que temos o seu desenvolvimento não foi possível.
6.2 - Soluções técnicas adoptadas para a resolução de problemas
Jogo do piano – Foi necessário pesquisar código na internet e analisá-lo para o poder aplicar no piano, o que fez um pouco confusão foi o local onde colocar o código em que criamos os arrays, mas com a ajuda de colegas e de pesquisas na internet conseguimos descobrir, mas à medida que se foi trabalhando nesta parte da aplicação foi ficando mais confuso saber onde estavam as coisas (o código, as frames e os botões), então com o decorrer do tempo decidimos deixar esta parte da aplicação para o fim, e se tivéssemos tempo voltaríamos a trabalhar nela e colocá-la na aplicação. Algo que tentámos fazer foi o controlador de som que ficou a funcionar, mas como este fazia parte do jogo do piano ele não foi colocado na aplicação. Inicialmente recorremos a um tipo de código mas não funcionou no nosso exemplar, pois fazendo como estava descrito no vídeo funcionou, mas aplicando o mesmo método não funcionou, então recorremos à ajuda dos docentes e de colegas para nos ajudar e ficou a funcionar.
Junções das partes – Quando nos reunimos para juntar as partes de cada um dos elementos do grupo surgiram imensos problemas, como por exemplo as ligações para as labels não funcionavam, os sons ficavam sobrepostos ou então cortados, quando copiávamos las frames de um ficheiro .fla para outro as coisas modificavam-se, a gaveta do beliche estava mal desenhada e não dava para abrir, o movie clip do Lo (dentro do armário) reproduzia sem ser cativado, o armário tinha um gráfico e um movie clip em cima. Para solucionar estes problemas recorremos aos docentes, nos sons tivemos de os exportar novamente do “Audacity”, em algumas partes foi necessário eliminar layers que estavam a mais, o som que estava em MP4 foi necessário converter para MP3, a parte da gaveta foi necessário voltar a desenhá-la e faze-la abrir de frame-a-frame (onde inicialmente abria rápido de mais, para corrigir teve-se de eleminar algumas keyframes).
Tweens – Tentámos ter cuidado ao não permitir que o flash criasse Tweens, então sempre que queríamos fazer uma animação com motion tween criávamos símbolos do tipo gráfico, mas aos botões eram criados tweens, então convertíamos estes para gráficos, mas depois não dava para inserir código nestes.
Botões – Simplesmente não funcionavam, para resolução foi necessário criar de novo os botões no flash.
7. Referências Web e Bibliográficas
http://board.flashkit.com/board/showthread.php?t=274475 http://www.flashvalley.com/fv_tutorials/mouse_control_and_actionscript/ http://mikestickney.com/wordpress/flash-tutorial-play-movie-clip-with-mouse-click/ http://www.actionscript.org/forums/showthread.php3?t=180298 http://board.flashkit.com/board/showthread.php?t=589817 http://www.kirupa.com/developer/mx/volume_slider.htm
Pdfs disponibilizados no moodle da cadeira Laboratório Multimédia I Colaboração dos professores
8. Anexos
Inserimos no CD do projecto os anexos referentes ao nosso projecto. Estes consistem nos ficheiros .fla elaborados para além da componente gráfica utilizada (template).
