Plugged In

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
(→RELATÓRIO)
(→RELATÓRIO)
 
(33 intermediate revisions not shown)
Line 133: Line 133:
== RELATÓRIO ==
== RELATÓRIO ==
 +
 +
Andreia Bastos - 59805
 +
 +
Daniela Monteiro - 60811
 +
 +
Marcelo Bettencourt - 60869
 +
 +
Tiago Vieira - 50765
 +
 +
 +
Projecto de Laboratório Multimédia I
 +
 +
Docentes:
 +
 +
Ana Carla Amaro
 +
 +
Helder Caixinha
 +
 +
 +
NTC – 1ºano
 +
'''1. APRESENTAÇÃO DO PROJECTO'''  
'''1. APRESENTAÇÃO DO PROJECTO'''  
Line 150: Line 171:
-
  2. ANÁLISE E PLANEAMENTO
+
  2. '''ANÁLISE E PLANEAMENTO'''
-
(investigação temática, estado da arte, definição do conceito...)
+
-
  3. DESENHO FUNCIONAL  
+
 
 +
Para começarmos a trabalhar na aplicação pesquisámos alguns sites e visitámos uma loja de musica, a Adágio, em Aveiro que nos pudesse 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:
 +
 
 +
- [http://www.adagio.pt Adágio] - Como pretendíamos obter um ambiente de uma loja de musica baseamo-nos principalmente nesta loja bem como alguns dos seus instrumentos.
 +
 
 +
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 da loja, bem como o estúdio.
 +
 
 +
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 nos acordes da guitarra), animações dos vários objectos (balcão, guitarras, porta do estúdio) para além dos botões da barra do menu (ajuda, controlo de volume e o regresso ao ambiente inicial da aplicação.
 +
 
 +
  3. '''DESENHO FUNCIONAL'''
3.1 Requisitos funcionais
3.1 Requisitos funcionais
-
(descrição das funcionalidades da aplicação...)
 
-
  3.2 Estrutura arborescente  
+
 
 +
 
 +
No nosso projecto utilizamos vários elementos gráficos nos quais o utilizador pode interagir. Logo que iniciamos a aplicação temos acesso a um loading com contagem crescente de 0 a 100 com som de fundo diferente de 0 a 99 e 100. Este loading leva-nos ao ambiente inicial da loja onde temos depois vários objectos interactivos, bem como o balcão, que quando passado por cima com o rato, mostra um brilho que o distingue do resto do ambiente e, que ao clique do rato faz aparecer uma janela com várias informações sobre do grupo e sobre a loja bem como o objectivo desta aplicação. Atrás do balcão temos uma porta que vai dar a um outro ambiente, o estúdio, esta porta abre-se quando se passa o rato por cima, ao clique do mesmo, somos direccionados para para o ambiente "estúdio". Ainda no ambiente inicial da loja temos um mostrador de guitarras que quando passado o rato por cima mostra um brilho idêntico ao do balcão. Ao clique do rato, é-nos apresentada uma janela com 7 guitarras, de diferentes marcas (Dean, Fender, Gibson, Jackson, Epiphone, ESP e Ibanez). Em cima da janela temos os diferentes separadores com as marcas, do lado esquerdo da janela temos um texto resumido da marca (data de criação, criador e dados históricos) e do lado direito temos uma imagem da guitarra consoante a marca, bem como o nome do modelo. Passando para o ecrã do estúdio, temos mais um ambiente interactivo onde o utilizador tem acesso a uma guitarra. Juntamente com esta guitarra, está também uma pequena janela com 10 acordes. Ao passar por cima de cada acorde com o rato, o utilizador consegue ver os diferentes pontos na guitarra e, assim, conseguir aprender a tocar esse acorde. Ainda com duvidas, o utilizador pode clicar no respectivo acorde e este tocará o som do mesmo, para que o este possa ter a certeza que está a tocar bem. O utilizador tem ainda acesso a uma barra de menu no topo da aplicação que aparece nos dois ambientes. Esta barra contém diferentes botões interactivos que ao passar do rato tornam-se na cor vermelha dominante de toda a aplicação, como por exemplo:
 +
 
 +
- A Ajuda: ao clique do rato, surge uma janela, onde contém tudo o que o utilizador precisa de saber para poder funcionar com a aplicação (para cada botão existe uma breve descrição do que esse botão faz). Este botão só está presente no ambiente da loja visto que não vai ser necessário no ambiente do estúdio, pois este já vem com instruções à parte;
 +
 
 +
- O controlo de volume: aqui o utilizador tem acesso a três barras com diferentes alturas (pequena, média e grande), que vão controlar o nível do som (baixo, médio e alto), bem como um símbolo do lado direito das três barras que vai ocultar o som por completo.
 +
 
 +
- Voltar: Este botão, ao contrário do botão de ajuda, só aparece no ambiente do estúdio, e ao clique vai retornar ao ambiente inicial da loja.
 +
 
 +
E por fim temos o botão "sair", que está situado no canto superior direito, fora da barra da barra do menu, que serve apenas, com clique do rato, para desligar a aplicação.
 +
   
 +
 
 +
3.2 Estrutura arborescente  
 +
 
 +
 
 +
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.
 +
 
 +
 
 +
[[File:Arborescencia pluggedin.jpg]]
 +
 
   
   
  3.3 Desenho de interacção e usabilidade  
  3.3 Desenho de interacção e usabilidade  
 +
 +
 +
 +
A aplicação “Plugged In”  foi concebida para adolescentes com idades compreendidas entre os dez e os 20 anos de idade, tendo como objectivo o desenvolvimento do gosto e interesse por música, incentivando-os a querer aprender a tocar guitarra eléctrica. Sendo este o nosso tema tivemos de fazer a nossa aplicação à base de sons. Optámos por colocar textos para que o nosso público alvo retenha algum conhecimento geral da guitarra em si bem como os seus criadores e a história da mesma. A aplicação multimédia tem como base a aprendizagem com um novo instrumento (neste caso, a guitarra eléctrica), ou simplesmente passar um bom momento a praticar.
 +
A nível de aspecto visual utilizamos cores escuras para o nosso público alvo, como por exemplo vermelhos, pretos, castanhos etc. 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.
-
(princípios de interacção e usabilidade considerados no
 
-
desenho da estrutura, percursos e meios de navegação)
 
-
  4. DESENHO TÉCNICO  
+
  4. '''DESENHO TÉCNICO'''
(identificação dos requisitos técnicos para a operacionalização dos aspectos
(identificação dos requisitos técnicos para a operacionalização dos aspectos
funcionais)  
funcionais)  
-
  5. PRODUÇÃO DO PROJECTO
+
  5. '''PRODUÇÃO DO PROJECTO'''
(descrição dos aspectos técnicos da produção do projecto)
(descrição dos aspectos técnicos da produção do projecto)
  5.1 Estrutura e meios de navegação/interacção
  5.1 Estrutura e meios 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 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: ambiente "loja" e ambiente "estúdio".
 +
 +
No ecrã da loja possuímos diversas formas de interacção:
 +
 +
- O balcão onde o utilizador pode aceder ao objectivo desta aplicação com a ajuda de um "scrollbar", para ver a informação por completo, seja do grupo, seja da loja.
 +
 +
- As guitarras onde o utilizador pode aceder a 7 marcas diferentes de guitarras. A cada marca foi atribuído um texto que contém o criador e a data de criação da mesma, e dados históricos ao longo da sua existência. Juntamente com um texto, cada marca contém uma imagem de um modelo da mesma para dar um pouco de dinâmica à animação.
 +
 +
 +
O ecrã "estúdio" é a "alma" da nossa aplicação, pois é aqui que acontece a nossa ideia principal e o que nos levou a realizar este projecto. É aqui que o utilizador vai ter maior interacção e com certeza passar a maior parte do tempo.
 +
 +
No estúdio temos uma guitarra e um conjunto de 10 acordes. Isto servirá não só para praticar mas também para aprender os acordes mais utilizados. Com a ajuda de um "?" o utilizador poderá ler as instruções e então de seguida tocar. Se por algum motivo, este estiver com dúvidas do som que vai reproduzir, pode simplesmente passar o rato por cima do acorde e, este mostrará na guitarra onde devem estar colocados os dedos nas cordas. Para que não haja sobreposição de som quando é tocado um acorde novo, o acorde anterior pára de produzir som.
 +
 +
Sendo assim, no que toca à navegação, esta é feita seguindo uma estrutura arborescente não linear. A partir do menu principal (loja), o utilizador pode navegar em três níveis de profundidade (balcão, guitarras, estudio) e aí podem navegar entre outros itens (voltar para a loja, ajuda, desligar/ligar o som, fechar).
 +
 +
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 botões através de efeitos luminosos e portas existentes na aplicação.
 +
 +
Para o código da "ScrollBar" utilizámos:
 +
 +
 +
var scrollUpper:Number = 243;
 +
 +
var scrollLower:Number = 340;
 +
 +
 +
var textLower:Number = 394;
 +
 +
var textUpper:Number = 180;
 +
 +
 +
var scrollRange:Number = scrollLower - scrollUpper;
 +
 +
var textRange:Number = textLower - textUpper;
 +
 +
 +
function scroll() {
 +
 +
var moved:Number = slider._y - scrollUpper;
 +
 +
var pctMoved:Number = moved/scrollRange;
 +
 +
var textMove:Number = pctMoved*textRange;
 +
 +
text02._y = textLower - textMove;
 +
 +
}
 +
 +
 +
slider.onPress = function() {
 +
 +
this.startDrag(false,this._x,scrollUpper,this._x,scrollLower);
 +
 +
this.onMouseMove = scroll;
 +
 +
}
 +
 +
 +
slider.onRelease = slider.onReleaseOutside = function() {
 +
 +
this.stopDrag();
 +
 +
this.onMouseMove = null;
 +
 +
}
 +
 +
 +
text02.setMask(mask02);
 +
5.2 Integração e controlo de som
5.2 Integração e controlo de som
 +
 +
 +
Para gravação do som utilizamos maioritariamente o software "Audacity", apenas para os acordes utilizamos ''free sound recorder'' do "Guitar Pro".
 +
 +
Para o som de fundo utilizamos o audacity para compilar os vários sons para que usemos uma só variavel e utilizámos o seguinte código:
 +
 +
 +
var som:Sound = new Sound;
 +
 +
som.attachSound("som_de_fundo");
 +
 +
som.start(0,99999);
 +
 +
som.onSoundComplete = function(){
 +
 +
som.start();
 +
 +
}
 +
 +
 +
Para o controlo de volume utilizamos valores não variaveis, ou seja, para o utilizador, directos (30%, 60% e 100%):
 +
 +
 +
Som mínimo:
 +
 +
on (release){
 +
 +
var my_sound:Sound=new Sound();
 +
 +
my_sound.attachSound("som_de_fundo");
 +
 +
my_sound.setVolume(30)
 +
 +
}
 +
 +
 +
Som Médio:
 +
 +
on (release){
 +
 +
var my_sound:Sound=new Sound();
 +
 +
my_sound.attachSound("som_de_fundo");
 +
 +
my_sound.setVolume(60)
 +
 +
}
 +
 +
 +
Som máximo:
 +
 +
on (release){
 +
 +
var my_sound:Sound=new Sound();
 +
 +
my_sound.attachSound("som_de_fundo");
 +
 +
my_sound.setVolume(100)
 +
 +
}
 +
 +
 +
Som off:
 +
 +
on (release){
 +
 +
var my_sound:Sound=new Sound();
 +
 +
my_sound.attachSound("som_de_fundo");
 +
 +
my_sound.setVolume(0)
 +
 +
}
 +
 +
 +
Para ligar o som de novo basta, para o utilizador carregar em qualquer uma das três barras de som.
 +
No estúdio utilizamos maioritariamente “linkages” dos sons que utilizámos. Estes sons são os acordes mais utilizados dentro do mundo da guitarra. Quando se passa o rato por cima de cada acorde, aparece na guitarra a posição dos dedos nesta, para o utilizador ter uma melhor noção de como o acorde é na realidade. Quando se clica em cada acorde, o som deste é reproduzido, para o utilizador saber qual é o som deste e se o está a fazer bem.
No estúdio utilizamos maioritariamente “linkages” dos sons que utilizámos. Estes sons são os acordes mais utilizados dentro do mundo da guitarra. Quando se passa o rato por cima de cada acorde, aparece na guitarra a posição dos dedos nesta, para o utilizador ter uma melhor noção de como o acorde é na realidade. Quando se clica em cada acorde, o som deste é reproduzido, para o utilizador saber qual é o som deste e se o está a fazer bem.
Line 193: Line 393:
Botões de acordes:
Botões de acordes:
-
- Ao clique, reproduzir o som e anular os outros sons todos.  
+
 
 +
- Ao clique, reproduzir o som e anular todos os outros.
 +
 
 +
[[File:Am.png]]
 +
 
 +
- '''Código do botão Am'''
 +
 
 +
[[File:B7.png]]
 +
 
 +
- '''Código do botão B7'''
 +
 
 +
[[File:Dm.png]]
 +
 
 +
- '''Código do botão Dm'''
 +
 
 +
[[File:Em.png]]
 +
 
 +
- '''Código do botão Em'''
 +
 
 +
[[File:F.png]]
 +
 
 +
- '''Código do botão F'''
 +
 
 +
[[File:A.png]]
 +
 
 +
- '''Código do botão A'''
 +
 
 +
[[File:C.png]]
 +
 
 +
- '''Código do botão C'''
 +
 
 +
[[File:D.png]]
 +
 
 +
- '''Código do botão D'''
 +
 
 +
[[File:E.png]]
 +
 
 +
- '''Código do botão E'''
 +
 
 +
[[File:G.png]]
 +
 
 +
- '''Código do botão G'''
5.3 Animação
5.3 Animação
 +
 +
'''Loading'''
 +
 +
No loading utilizámos um movie clip a simular um loading, onde um som é reproduzido durante, e outro quando o movie clip é carregado totalmente.
 +
O aspecto deste movie clip é o símbolo utilizado no nosso logótipo, e também uma contagem crescente de percentagens.
 +
 +
[[File:Loading.png]]
 +
 +
- '''Ecrâ de loading'''
 +
 +
Código utilizado:
 +
 +
- Atribuição de uma variável ao som final.
 +
 +
[[File:Crowd.png]]
 +
 +
- '''Código de atribuição de variável ao segundo efeito sonoro'''
5.4 Soluções técnicas adoptadas para a resolução de problemas
5.4 Soluções técnicas adoptadas para a resolução de problemas

Latest revision as of 20:07, 16 January 2011

Contents

Projecto de LabMM1/IDE

Nome do Projecto: Plugged In


Elementos do grupo

- Daniela Monteiro - 60411

- Andreia Bastos - 59805

- Marcelo Bettencourt - 60869

- Tiago Vieira - 50765


Memória Descritiva

A nossa ideia consiste em criar uma loja de música fictícia, sendo visível na interface duas montras e um estúdio.

Uma das montras terá várias guitarras eléctricas com as quais o utilizador pode interagir, tendo à sua disposição informação sobre a marca e uma breve história da mesma.

A segunda montra possuirá livros informativos sobre guitarras e acessórios, como cordas, amplificadores, etc.

No estúdio vamos criar uma interface que disponibilizará vários acordes em que o utilizador pode carregar para ver a posição dos dedos correcta para a execução do acorde, bem como ouvir o som do mesmo.


Diário de Bordo

23 de Novembro

Formação do grupo.

Escolha do tema.


25 de Novembro

Apresentação do tema ao professor Ivo.

Escolha do nome a dar à aplicação: Plugged In

Criação de uma página wiki para o projecto.


29 de Novembro

Pesquisa de tipos de letra e estudos para logótipo.


2 de Dezembro

Estudos do Logótipo. Pesquisa de entidades visuais.


3 de Dezembro Entidade visual e Requisitos funcionais

Neste projecto serão utilizadas ambas imagem vectorial e bitmap. esta ideia surgiu da visualização de sites relacionados com os vários tipos de imagem e ilustração aplicada no contexto de websites em flashdos seguintes sites:

Illustration Mundo

Trip Wired Magazine

Hongkiat

Smashing Magazine


No decorrer da pesquisa achamos relevantes algumas imagens por representarem com exactidão o tipo de ilustração e organização visual pretendida pelo grupo:


New York Vistual Tour 01 00 Referência que mais se aproxima do resultado a nível de tipologia de ilustração


A última imagem é a que mais se aproxima do resultado da edição de imagem bitmap que pretendemos. Através da utilização deste tipo de edição a inserção de elementos vectoriais são será descontextualizada e não causará a rejeição ,por parte do utilizador, destes elementos.


A plataforma interactiva será organizada de acordo com o seguinte mapa :

Esboço da arborescência da plataforma

Mapa da Plataforma

Arborescenciapluggedin.jpg


No "Mostrador 1" o utilizador poderá aceder às informações do grupo, com uma breve apresentação dos mesmos.

No "Mostrador 2" estarão expostas várias guitarras de diferentes marcas onde o utilizador acede, através do click do rato, a informações sobre as marcas, tais como a sua história e músicos que utilizam essas marcas.

No "Estúdio" haverá uma maior interacção,conseguida através de um sistema baseado no conceito do programa "Guitar Pro" e no conceito do "Learn how to...". Neste sector da plataforma interactiva o utilizador visualizará e escolherá uma das várias guitarras e visuais das mesmas disponíveis e após a escolha vai puder então tocar a guitarra pretendida com diversos acordes à sua disponibilidade.


Esboços da Plataforma e estudo do Logótipo:


Esboço da plataformaEsboço do logótipo

Esboço do logótipoEsboço do logótipo Esboço do logótipo LOGO 60811.jpg

File:Lista de guitarras eléctricas.pdf

Estas guitarras são as que vão estar expostas no "mostrador 2". Se acedidas pelo utilizador irão mostrar uma breve historia sobre a marca.


Ambiente.jpg

Este vai ser o interior da loja. Do lado direito onde está um espaço vazio vamos ter o mostrador das guitarras.


Mostrador1.jpg

Mostrador de Guitarras


Logofinalpluggedin.jpg

Logótipo final


Estudio.jpg

Estúdio não texturizado


RELATÓRIO

Andreia Bastos - 59805

Daniela Monteiro - 60811

Marcelo Bettencourt - 60869

Tiago Vieira - 50765


Projecto de Laboratório Multimédia I

Docentes:

Ana Carla Amaro

Helder Caixinha


NTC – 1ºano


1. APRESENTAÇÃO DO PROJECTO

Um dos grandes gostos da maioria da população da nossa faixa etária é definitivamente a música.

Grande é o número de pessoas que nutrem admiração pelas guitarras em particular, e cada vez é maior o número de interessados em aprender a tocar este instrumento.

A loja fictícia Plugged In possibilita tanto o ensino dos acordes mais básicos e comuns, como dá a conhecer ao utilizador a vasta gama de guitarras disponíveis no mercado, bem como exemplos de artistas célebres que as utilizam.

A construção da aplicação multimédia interactiva, desenvolvida para ambiente off-line (CD-ROM) foi realizada utilizando os seguintes programas: Adobe Flash CS3, Adobe Ilustrator CS3, Adobe Photoshop CS3, Audacity.

Decidimos utilizar maioritariamente o paradigma de interacção Ambiente, visando uma maior interactividade entre a aplicação e o utilizador, pois é necessária a exploração do espaço para descobrir o modo como nele navegar, tornando assim a aplicação mais cativante e menos monótona.

Esta aplicação multimédia é constituída por duas cenas principais, o interior da loja e o estúdio, bem como de um breve loading. Na loja apresenta-se um balcão, botão que leva às informações sobre o grupo e o projecto, uma porta, que leva ao estúdio e um lote de guitarras afixadas na parede, botão que leva a informações sobre marcas de guitarras mais importantes, imagens destas e de artistas consagrados que utilizam essas guitarras. No estúdio encontra-se representada uma guitarra parcialmente, ocupando o braço da guitarra toda a largura do ecrã, mais os acordes possíveis de serem aprendidos, botões que, ao serem clicados, mostram a sua posição a ocupar no braço da guitarra, bem como a reprodução do som do mesmo acorde. 


2. ANÁLISE E PLANEAMENTO


Para começarmos a trabalhar na aplicação pesquisámos alguns sites e visitámos uma loja de musica, a Adágio, em Aveiro que nos pudesse 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:

- Adágio - Como pretendíamos obter um ambiente de uma loja de musica baseamo-nos principalmente nesta loja bem como alguns dos seus instrumentos.

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 da loja, bem como o estúdio.

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 nos acordes da guitarra), animações dos vários objectos (balcão, guitarras, porta do estúdio) para além dos botões da barra do menu (ajuda, controlo de volume e o regresso ao ambiente inicial da aplicação. 

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 a um loading com contagem crescente de 0 a 100 com som de fundo diferente de 0 a 99 e 100. Este loading leva-nos ao ambiente inicial da loja onde temos depois vários objectos interactivos, bem como o balcão, que quando passado por cima com o rato, mostra um brilho que o distingue do resto do ambiente e, que ao clique do rato faz aparecer uma janela com várias informações sobre do grupo e sobre a loja bem como o objectivo desta aplicação. Atrás do balcão temos uma porta que vai dar a um outro ambiente, o estúdio, esta porta abre-se quando se passa o rato por cima, ao clique do mesmo, somos direccionados para para o ambiente "estúdio". Ainda no ambiente inicial da loja temos um mostrador de guitarras que quando passado o rato por cima mostra um brilho idêntico ao do balcão. Ao clique do rato, é-nos apresentada uma janela com 7 guitarras, de diferentes marcas (Dean, Fender, Gibson, Jackson, Epiphone, ESP e Ibanez). Em cima da janela temos os diferentes separadores com as marcas, do lado esquerdo da janela temos um texto resumido da marca (data de criação, criador e dados históricos) e do lado direito temos uma imagem da guitarra consoante a marca, bem como o nome do modelo. Passando para o ecrã do estúdio, temos mais um ambiente interactivo onde o utilizador tem acesso a uma guitarra. Juntamente com esta guitarra, está também uma pequena janela com 10 acordes. Ao passar por cima de cada acorde com o rato, o utilizador consegue ver os diferentes pontos na guitarra e, assim, conseguir aprender a tocar esse acorde. Ainda com duvidas, o utilizador pode clicar no respectivo acorde e este tocará o som do mesmo, para que o este possa ter a certeza que está a tocar bem. O utilizador tem ainda acesso a uma barra de menu no topo da aplicação que aparece nos dois ambientes. Esta barra contém diferentes botões interactivos que ao passar do rato tornam-se na cor vermelha dominante de toda a aplicação, como por exemplo:

- A Ajuda: ao clique do rato, surge uma janela, onde contém tudo o que o utilizador precisa de saber para poder funcionar com a aplicação (para cada botão existe uma breve descrição do que esse botão faz). Este botão só está presente no ambiente da loja visto que não vai ser necessário no ambiente do estúdio, pois este já vem com instruções à parte;

- O controlo de volume: aqui o utilizador tem acesso a três barras com diferentes alturas (pequena, média e grande), que vão controlar o nível do som (baixo, médio e alto), bem como um símbolo do lado direito das três barras que vai ocultar o som por completo.

- Voltar: Este botão, ao contrário do botão de ajuda, só aparece no ambiente do estúdio, e ao clique vai retornar ao ambiente inicial da loja.

E por fim temos o botão "sair", que está situado no canto superior direito, fora da barra da barra do menu, que serve apenas, com clique do rato, para desligar a aplicação.


3.2 Estrutura arborescente


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.


Arborescencia pluggedin.jpg 


3.3 Desenho de interacção e usabilidade


A aplicação “Plugged In” foi concebida para adolescentes com idades compreendidas entre os dez e os 20 anos de idade, tendo como objectivo o desenvolvimento do gosto e interesse por música, incentivando-os a querer aprender a tocar guitarra eléctrica. Sendo este o nosso tema tivemos de fazer a nossa aplicação à base de sons. Optámos por colocar textos para que o nosso público alvo retenha algum conhecimento geral da guitarra em si bem como os seus criadores e a história da mesma. A aplicação multimédia tem como base a aprendizagem com um novo instrumento (neste caso, a guitarra eléctrica), ou simplesmente passar um bom momento a praticar. A nível de aspecto visual utilizamos cores escuras para o nosso público alvo, como por exemplo vermelhos, pretos, castanhos etc. 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

(identificação dos requisitos técnicos para a operacionalização dos aspectos funcionais) 

5. PRODUÇÃO DO PROJECTO

(descrição dos aspectos técnicos da produção do projecto) 

5.1 Estrutura e meios 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 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: ambiente "loja" e ambiente "estúdio".

No ecrã da loja possuímos diversas formas de interacção:

- O balcão onde o utilizador pode aceder ao objectivo desta aplicação com a ajuda de um "scrollbar", para ver a informação por completo, seja do grupo, seja da loja.

- As guitarras onde o utilizador pode aceder a 7 marcas diferentes de guitarras. A cada marca foi atribuído um texto que contém o criador e a data de criação da mesma, e dados históricos ao longo da sua existência. Juntamente com um texto, cada marca contém uma imagem de um modelo da mesma para dar um pouco de dinâmica à animação.


O ecrã "estúdio" é a "alma" da nossa aplicação, pois é aqui que acontece a nossa ideia principal e o que nos levou a realizar este projecto. É aqui que o utilizador vai ter maior interacção e com certeza passar a maior parte do tempo.

No estúdio temos uma guitarra e um conjunto de 10 acordes. Isto servirá não só para praticar mas também para aprender os acordes mais utilizados. Com a ajuda de um "?" o utilizador poderá ler as instruções e então de seguida tocar. Se por algum motivo, este estiver com dúvidas do som que vai reproduzir, pode simplesmente passar o rato por cima do acorde e, este mostrará na guitarra onde devem estar colocados os dedos nas cordas. Para que não haja sobreposição de som quando é tocado um acorde novo, o acorde anterior pára de produzir som.

Sendo assim, no que toca à navegação, esta é feita seguindo uma estrutura arborescente não linear. A partir do menu principal (loja), o utilizador pode navegar em três níveis de profundidade (balcão, guitarras, estudio) e aí podem navegar entre outros itens (voltar para a loja, ajuda, desligar/ligar o som, fechar).

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 botões através de efeitos luminosos e portas existentes na aplicação.

Para o código da "ScrollBar" utilizámos:


var scrollUpper:Number = 243;

var scrollLower:Number = 340;


var textLower:Number = 394;

var textUpper:Number = 180;


var scrollRange:Number = scrollLower - scrollUpper;

var textRange:Number = textLower - textUpper;


function scroll() {

var moved:Number = slider._y - scrollUpper;

var pctMoved:Number = moved/scrollRange;

var textMove:Number = pctMoved*textRange;

text02._y = textLower - textMove;

}


slider.onPress = function() {

this.startDrag(false,this._x,scrollUpper,this._x,scrollLower);

this.onMouseMove = scroll;

}


slider.onRelease = slider.onReleaseOutside = function() {

this.stopDrag();

this.onMouseMove = null;

}


text02.setMask(mask02);


5.2 Integração e controlo de som


Para gravação do som utilizamos maioritariamente o software "Audacity", apenas para os acordes utilizamos free sound recorder do "Guitar Pro".

Para o som de fundo utilizamos o audacity para compilar os vários sons para que usemos uma só variavel e utilizámos o seguinte código:


var som:Sound = new Sound;

som.attachSound("som_de_fundo");

som.start(0,99999);

som.onSoundComplete = function(){

som.start();

}


Para o controlo de volume utilizamos valores não variaveis, ou seja, para o utilizador, directos (30%, 60% e 100%):


Som mínimo:

on (release){

var my_sound:Sound=new Sound();

my_sound.attachSound("som_de_fundo");

my_sound.setVolume(30)

}


Som Médio:

on (release){

var my_sound:Sound=new Sound();

my_sound.attachSound("som_de_fundo");

my_sound.setVolume(60)

}


Som máximo:

on (release){

var my_sound:Sound=new Sound();

my_sound.attachSound("som_de_fundo");

my_sound.setVolume(100)

}


Som off:

on (release){

var my_sound:Sound=new Sound();

my_sound.attachSound("som_de_fundo");

my_sound.setVolume(0)

}


Para ligar o som de novo basta, para o utilizador carregar em qualquer uma das três barras de som.


No estúdio utilizamos maioritariamente “linkages” dos sons que utilizámos. Estes sons são os acordes mais utilizados dentro do mundo da guitarra. Quando se passa o rato por cima de cada acorde, aparece na guitarra a posição dos dedos nesta, para o utilizador ter uma melhor noção de como o acorde é na realidade. Quando se clica em cada acorde, o som deste é reproduzido, para o utilizador saber qual é o som deste e se o está a fazer bem. Quando se clica nos acordes o som de fundo desliga, tendo depois se ligar o som para voltar a ouvir a música. Cada acorde anula o outro, para os sons não se confundirem.

Acordes.png

- Ecrã dos acordes

Código utilizado: - Atribuição de variáveis aos sons, e parar a cabeça de leitura.

Atribuiçao de variaveis (acordes).png

- Código da atribuição das variáveis dos acordes

Botões de acordes:

- Ao clique, reproduzir o som e anular todos os outros.

Am.png

- Código do botão Am

B7.png

- Código do botão B7

Dm.png

- Código do botão Dm

Em.png

- Código do botão Em

F.png

- Código do botão F

A.png

- Código do botão A

C.png

- Código do botão C

D.png

- Código do botão D

E.png

- Código do botão E

G.png

- Código do botão G

5.3 Animação

Loading

No loading utilizámos um movie clip a simular um loading, onde um som é reproduzido durante, e outro quando o movie clip é carregado totalmente. O aspecto deste movie clip é o símbolo utilizado no nosso logótipo, e também uma contagem crescente de percentagens.

Loading.png

- Ecrâ de loading

Código utilizado:

- Atribuição de uma variável ao som final.

Crowd.png

- Código de atribuição de variável ao segundo efeito sonoro

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

(problemas encontrados durante o desenvolvimento do projecto e soluções técnicas adoptadas na sua resolução)

6. CONCLUSÕES 

6.1 Reflexão crítica

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

(no âmbito dos conteúdos programáticos da unidade curricular)

7. REFERÊNCIAS WEB E BIBLIOGRÁFICAS 

8. ANEXOS
Retrieved from "http://wikis.ua.pt/lab1ide/index.php?title=Plugged_In"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox