Promocd
From LABMM1_IDE
(→Estado da Arte) |
|||
| (24 intermediate revisions not shown) | |||
| Line 19: | Line 19: | ||
Reunião com todos os elementos do grupo, para dar a conhecer ao novo elemento o que se pretende com o projecto e ouvir também a sua opinião. | Reunião com todos os elementos do grupo, para dar a conhecer ao novo elemento o que se pretende com o projecto e ouvir também a sua opinião. | ||
| + | (29/11/2010) Pesquisa sobre o artista a integrar no projecto | ||
| - | + | http://www.youclubvideo.com/video/113285/plastikman-sonar-2010-9sk | |
| - | + | Conceito do artísta e uma das suas criação ao vivo | |
| - | |||
| + | http://www.m-nus.com/# | ||
| - | ''' | + | Conteúdos do artista no site da editora(artists/all/plastikman/media) |
| + | |||
| + | |||
| + | |||
| + | (30/11/2010) '''Análise de aplicações''' | ||
http://www.decenio.pt | http://www.decenio.pt | ||
| + | Website indexado, de agradável navegação. Gostamos particularmente da forma como os menus são animados, sendo que pretendemos fazer algo semelhante para os menus do nosso promo cd, no entanto sublinhamos que com a distribuíção de conteúdo existente em "Living art/the brand/last collections" seria francamente impossível mostrar uma discografia de um artista, pois a marca Decenio nesta secção não apresenta mais do que uma simples foto de algumas peças de vestuário. | ||
| + | Pretendemos utilizar a ideia de navegação apenas, pois consideramos que este site não se enquadra ao tipo de conteúdo que vamos apresentar. | ||
| - | + | http://www.jasonmraz.com/index.php | |
| - | http://www.m-nus.com/# | + | Este website é um bom exemplo de um projecto com um design agradável e de fácil navegação. A nível de contéudos encontramos informação em excesso em relação ao que queremos fazer no nosso projecto. Informações como notícias, foruns, ligações, loja, blog e datas de concertos não são necessárias no nosso projecto. A navegação é simples de entender, e por defeito está activa a voz do artista que sempre que visitamos uma página diz-nos o que vamos visitar sem sobre-carregar a navegação. Serve este website, essencialmente, para entender o conceito de uma aplicação em Flash para um artista musical quer a nível estrutural, quer a nível de simplicidade de design. |
| + | |||
| + | http://www.pinkfloyd.co.uk/obtw/ | ||
| + | |||
| + | Neste website encontramos uma apresentação interessante de vários albuns dos Pink Floyd, é o website de divulgação de uma colectânea de cds. O ambiente é interessante tendo em conta que as faixas de várias cores por detrás da capa do CD se movem de acordo com a música que está a tocar em fundo fazendo lembrar um equalizador. A navegação não é tão intuitiva pois para mudar de CD temos que passar o cursor por cima da seta de navegação que ao princípio poderá não se encontrar facilmente. O menu inferior causa alguma estranheza pois num primeiro olhar parece o rodapé normal dos sites que apenas contêm os créditos, faqs, etc, no entanto é o menu principal do website que contém todas as ligações possíveis dentro do website. A retirar deste website ideias para a navegação dos diversos albuns e projectos do artista sobre o qual vamos fazer o nosso projecto. | ||
| + | |||
| + | http://www.mctyphoon.nl/ | ||
| + | |||
| + | Gostamos essencialmente da forma de navegação, embora só seja possivel saber obejctivamente para que secção nos dirigimos, se utilizarmos o menu existente na assinatura(canto inferior esquerdo). Tem um caractér muito minimalista e recorre a um tipo de vectorial sirueta o que nos agrada, mas não serve de todo para o nosso projecto. Com este website comcluímos que embora seja agradável "viajar" nele, seria desesperante encontrar os conteúdos que se espera de um artista. | ||
| + | |||
| + | http://www.fborn.com/websites/137_jbl/ | ||
| + | |||
| + | Apesar de este site não estar directamente ligado a um tipo de conteúdo que pretendemos no nosso projecto, tem uma navegação engraçada e uma apresentação de algumas músicas com animações interessantes. Serve este site para retirar ideias para a navegação e apresentação de algumas músicas no nosso projecto. | ||
| + | |||
| + | http://www.darrylworley.com/index.cfm?id=1 | ||
| + | |||
| + | Serve este website apenas para retirar ideias para a idealização de um cabeçalho para o nosso projecto, uma vez que é a única parte do website que está animada. A nível de conteúdos é o website típico de um músico com informações a mais do que será necessário no nosso projecto. | ||
| + | |||
| + | http://www.deathcabforcutie.com/home/ | ||
| + | |||
| + | Neste website apenas temos a página inicial animada, embora tenha conceitos interessantes, pensamos que tem informação a mais o que faz parecer um pouco desorganizado e pode levar a uma navegação menos intuitiva, no entanto existe o menu na parte superior da página que faz com que a navegação seja facilitada, no entanto, este menu não está animado. Com este website aprendemos o que não devemos fazer na página inicial do nosso projecto. | ||
| + | |||
| + | http://www.jeanmalek.com/ | ||
| + | |||
| + | Navegação um pouco confusa devido ao tamanho reduzido do menu, no entanto este está sempre acessível por intermédio de um click na página onde são mostrados os conteúdos. O website em si mostra conteúdos semelhantes ao nosso projecto, mas não concordamos com a forma de navegação. Um nota importante a reter deste site, devemos sempre ter uma alternativa à navegação principal, permitindo a título de exemplo em visualizações de videos, a passagem de um video para o seguinte sem que o utilizador tenha que voltar a um menu anterior, favorecendo a continuidade de interesse na visualização de outros videos. | ||
| + | |||
| + | http://www.thebeatles.com/ | ||
| + | |||
| + | Website indexado de fácil navegação. Possui um player no topo da página contendo algumas músicas do artista como na maioria dos sites do gênero. Um aspecto interessante é o fato de oferecer ao utilizador duas formas de visualização dos álbuns em que uma delas está relacionada com o player: escolhe-se o álbum e a faixa que pretende-se ouvir no player. Se encaixa no contexto do projeto, salvo informações adicionais como loja, comunidade de fãs, filmes, etc. | ||
| + | |||
| + | http://www.jayzhitscollection.com/ | ||
| + | |||
| + | Excelente integração do vídeo na aplicação Flash, especialmente nos separadores entre as diversas páginas, nota-se a baixa resolução do vídeo no entanto compreende-se para que a aplicação não pese demasiado visto que está distribuida online. A navegação entre fotografias é feita pela diferenciação na colocação do rato nas várias zonas do ecran fazendo com que este assuma butões de navegação foward, backward e close o que denotamos que é neste momento um dos métodos mais usados para navegação em galerias de imagens. Deste website retirámos uma ideia de indexação mais subjectiva libertando o utilizador à descoberta dos conteúdos. | ||
| + | |||
| + | == '''Arborescência''' == | ||
| + | |||
| + | (29/11/2010) | ||
| + | |||
| + | Planificação da arborescência | ||
| + | |||
| + | |||
| + | (08/12/2010) | ||
| + | Reestruturação da arborrescência e procedemos com a publicação para consulta e análise com os docentes da disciplina. | ||
| + | |||
| + | |||
| + | [[File:Arbo wiki cs3v2.jpg]] | ||
| + | |||
| + | |||
| + | |||
| + | == Relatório Final == | ||
| + | 1. Apresentação do projecto | ||
| + | |||
| + | 1.1 – Apresentação (memória descritiva) | ||
| + | Pretende-se o desenvolvimento de um CD promocional sobre um artista para distribuição off-line, no sentido de dar a conhecer um pouco da sua biografia e produções enquanto artista. | ||
| + | |||
| + | 1.2 Caracterização de produto | ||
| + | |||
| + | CD promocional para distribuição off-line em revistas sobre música e eventos. Este pretende dar a conhecer um álbum do artista e um pouco da sua carreira como artista e co-fundador de empresas e produtos ligados com música electrónica. | ||
| + | 2. Análise e planeamento | ||
| + | |||
| + | 2.1 - Investigação temática | ||
| + | |||
| + | A escolha de um tema, é certamente uma das partes mais difíceis de um projecto, dado o seu carácter decisivo para o futuro do desenvolvimento. Partimos sempre do princípio que o nosso publico alvo se enquadraria numa faixa etária compreendida entre os 15 a 40 anos de idade e que desenvolveríamos algo relacionado com música. Preferência essa que nos levou a auscultar dois técnicos da área de programação, para que fosse possível compreender as necessidades e os objectivos a cumprir. | ||
| + | |||
| + | |||
| + | 2.2 - Estado da arte | ||
| + | |||
| + | (29/11/2010) Reunião com todos os elementos do grupo, para dar a conhecer ao novo elemento o que se pretende com o projecto e ouvir também a sua opinião. Foram discutidas as possíveis dificuldades na execução do projecto, sendo esta a melhor altura para reflectir sobre as aptidões técnicas de cada elemento e facilidade de encontrar soluções para futuros problemas. | ||
| + | |||
| + | |||
| + | (29/11/2010) Pesquisa sobre o artista a integrar no projecto | ||
| + | |||
| + | |||
| + | http://www.youclubvideo.com/video/113285/plastikman-sonar-2010-9sk | ||
| + | Conceito do artista e uma das suas criação ao vivo | ||
| + | |||
| + | http://www.m-nus.com/# | ||
| + | Conteúdos do artista no site da editora (artists/all/plastikman/media) | ||
| + | |||
| + | (30/11/2010) Análise de aplicações | ||
| + | |||
| + | http://www.decenio.pt | ||
| + | |||
| + | Website indexado, de agradável navegação. Gostamos particularmente da forma como os menus são animados, sendo que pretendemos fazer algo semelhante para os menus do nosso promo CD, no entanto sublinhamos que com a distribuição de conteúdo existente em "Living art/the brand/last collections" seria francamente impossível mostrar uma discografia de um artista, pois a marca Decenio nesta secção não apresenta mais do que uma simples foto de algumas peças de vestuário. Pretendemos utilizar a ideia de navegação apenas, pois consideramos que este site não se enquadra ao tipo de conteúdo que vamos apresentar. | ||
| + | |||
| + | http://www.jasonmraz.com/index.php | ||
| + | |||
| + | Este website é um bom exemplo de um projecto com um design agradável e de fácil navegação. A nível de conteúdos encontramos informação em excesso em relação ao que queremos fazer no nosso projecto. Informações como notícias, fóruns, ligações, loja, blog e datas de concertos não são necessárias no nosso projecto. A navegação é simples de entender, e por defeito está activa a voz do artista que sempre que visitamos uma página diz-nos o que vamos visitar sem sobrecarregar a navegação. Serve este website, essencialmente, para entender o conceito de uma aplicação em Flash para um artista musical quer a nível estrutural, quer a nível de simplicidade de design. | ||
| + | |||
| + | http://www.pinkfloyd.co.uk/obtw/ | ||
| + | |||
| + | Neste website encontramos uma apresentação interessante de vários álbuns dos Pink Floyd, é o website de divulgação de uma colectânea de CDS. O ambiente é interessante tendo em conta que as faixas de várias cores por detrás da capa do CD se movem de acordo com a música que está a tocar em fundo fazendo lembrar um equalizador. A navegação não é tão intuitiva pois para mudar de CD temos que passar o cursor por cima da seta de navegação que ao princípio poderá não se encontrar facilmente. O menu inferior causa alguma estranheza pois num primeiro olhar parece o rodapé normal dos sites que apenas contêm os créditos, faqs, etc., no entanto é o menu principal do website que contém todas as ligações possíveis dentro do website. A retirar deste website ideias para a navegação dos diversos álbuns e projectos do artista sobre o qual vamos fazer o nosso projecto. | ||
| + | |||
| + | http://www.mctyphoon.nl/ | ||
| + | |||
| + | Gostamos essencialmente da forma de navegação, embora só seja possível saber objectivamente para que secção nos dirigimos, se utilizarmos o menu existente na assinatura (canto inferior esquerdo). Tem um carácter muito minimalista e recorre a um tipo de vectorial sirueta o que nos agrada, mas não serve de todo para o nosso projecto. Com este website concluímos que embora seja agradável "viajar" nele, seria desesperante encontrar os conteúdos que se espera de um artista. | ||
| + | |||
| + | http://www.fborn.com/websites/137_jbl/ | ||
| + | |||
| + | Apesar de este site não estar directamente ligado a um tipo de conteúdo que pretendemos no nosso projecto, tem uma navegação engraçada e uma apresentação de algumas músicas com animações interessantes. Serve este site para retirar ideias para a navegação e apresentação de algumas músicas no nosso projecto. | ||
| + | http://www.darrylworley.com/index.cfm?id=1 | ||
| + | Serve este website apenas para retirar ideias para a idealização de um cabeçalho para o nosso projecto, uma vez que é a única parte do website que está animada. A nível de conteúdos é o website típico de um músico com informações a mais do que será necessário no nosso projecto. | ||
| + | |||
| + | http://www.deathcabforcutie.com/home/ | ||
| + | |||
| + | Neste website apenas temos a página inicial animada, embora tenha conceitos interessantes, pensamos que tem informação a mais o que faz parecer um pouco desorganizado e pode levar a uma navegação menos intuitiva, no entanto existe o menu na parte superior da página que faz com que a navegação seja facilitada, no entanto, este menu não está animado. Com este website aprendemos o que não devemos fazer na página inicial do nosso projecto. | ||
| + | |||
| + | http://www.jeanmalek.com/ | ||
| + | |||
| + | Navegação um pouco confusa devido ao tamanho reduzido do menu, no entanto este está sempre acessível por intermédio de um click na página onde são mostrados os conteúdos. O website em si mostra conteúdos semelhantes ao nosso projecto, mas não concordamos com a forma de navegação. Um nota importante a reter deste site, devemos sempre ter uma alternativa à navegação principal, permitindo a título de exemplo em visualizações de vídeos, a passagem de um vídeo para o seguinte sem que o utilizador tenha que voltar a um menu anterior, favorecendo a continuidade de interesse na visualização de outros vídeos. | ||
| + | |||
| + | http://www.thebeatles.com/ | ||
| + | |||
| + | Website indexado de fácil navegação. Possui um player no topo da página contendo algumas músicas do artista como na maioria dos sites do género. Um aspecto interessante é o fato de oferecer ao utilizador duas formas de visualização dos álbuns em que uma delas está relacionada com o player: escolhe-se o álbum e a faixa que pretende-se ouvir no player. Se encaixa no contexto do projecto, salvo informações adicionais como loja, comunidade de fãs, filmes, etc. | ||
| + | |||
| + | http://www.jayzhitscollection.com/ | ||
| + | |||
| + | Excelente integração do vídeo na aplicação Flash, especialmente nos separadores entre as diversas páginas, nota-se a baixa resolução do vídeo no entanto compreende-se para que a aplicação não pese demasiado visto que está distribuída online. A navegação entre fotografias é feita pela diferenciação na colocação do rato nas várias zonas do ecrã fazendo com que este assuma botões de navegação foward, backward e close o que denotamos que é neste momento um dos métodos mais usados para navegação em galerias de imagens. Deste website retirámos uma ideia de indexação mais subjectiva libertando o utilizador à descoberta dos conteúdos | ||
| + | |||
| + | |||
| + | |||
| + | 2.3 - Conceito | ||
| + | |||
| + | Aplicação de carácter minimalista, concisa e de fácil navegação. Recorre frequentemente a cores escuras e a um sistema de navegação indexado, geralmente colocado em zonas de pouco foco do olhar. Terá também um som ambiente, passível de ser parado e ainda suportará resoluções até ao limite do HD. | ||
| + | |||
| + | 3. Desenho funcional | ||
| + | |||
| + | 3.1 Requisitos funcionais | ||
| + | |||
| + | Esta pretende mostrar vídeos e faixas áudio do artista, bem como uma breve biografia do mesmo. Terá também um som ambiente, passível de ser parado e ainda terá a possibilidade de ir online consultar a página da editora (http://www.m-nus.com). Para sair da aplicação o utilizador deverá confirmar a sua intenção através de um menu próprio. Esta permitira ainda alternar entre fullscreen e normal view. | ||
| + | |||
| + | |||
| + | 3.2 Estrutura arborescente | ||
| + | |||
| + | 3.2.1 Apresentação | ||
| + | |||
| + | Esta aplicação contempla uma introdução com possibilidade de saltar directamente para o menu principal da aplicação, onde o utilizador terá ao seu dispor (4) quatro menus principais (music, biography, credits e exit), destes resultam a possibilidade de submenus com opções diversas para visualização de outros conteúdos associados aos menus principais. | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | Adenda: | ||
| + | |||
| + | |||
| + | Com o avanço no desenvolvimento e pelo facto de na altura da publicação anterior ainda estarem por definir alguns conteúdos media da aplicação, passamos agora a incluir uma versão rectificada da mesma, onde serão mostrados todos os conteúdos da aplicação. | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | 3.3 Desenho de interacção e usabilidade | ||
| + | |||
| + | 3.3.1 Estrutura e orientação | ||
| + | - Identificação inequívoca dos meios de navegação/interacção e da sua função | ||
| + | mecanismos de identificação do ponto da estrutura (títulos, destaque do item no menu, etc.); | ||
| + | - Utilização de localizadores do tipo “você está aqui”; | ||
| + | - Os elementos relacionados estão agrupados. | ||
| + | |||
| + | 3.3.2 Simplicidade | ||
| + | - máxima KISS; | ||
| + | - Simplicidade nas tarefas, nos procedimentos, no acesso a conteúdos e na | ||
| + | linguagem utilizada. | ||
| + | |||
| + | 3.3.3 Visibilidade | ||
| + | |||
| + | - Não sobrecarregar o utilizador com alternativas e não o confundir com informação e opções desnecessárias. | ||
| + | |||
| + | 3.3.4 Tolerância | ||
| + | |||
| + | - Tornar as acções previsíveis; | ||
| + | - Desactivar opções inapropriadas dentro de determinado contexto; | ||
| + | - Questionar o utilizador sempre que as acções forem definitivas e informar da irreversibilidade. | ||
| + | |||
| + | 3.3.5 Consistência | ||
| + | - A aplicação ou sistema deve implementar componentes e comportamentos consistentes e não arbitrários. | ||
| + | 4. Desenho técnico | ||
| + | |||
| + | 4.1 Estilo de interacção e interface | ||
| + | Esta aplicação usa o estilo de manipulação e navegação. Para além de ser o estilo mais usado actualmente é o único que se enquadra no âmbito do nosso projecto, uma vez que toda a interacção é feita através menus e icons. | ||
| + | 4.2 Meios de navegação e interacção – topologias | ||
| + | 4.2.1 Janelas | ||
| + | A aplicação inicia em fullscreen sendo possível através do botão fullscreen colocado no canto inferior direito da aplicação. Toda a navegação é feita na mesma janela, exceptuando o link M-nus que abre uma janela do brownser para o website da editora. | ||
| + | 4.2.2 Icons | ||
| + | Usámos na aplicação cinco icons: play, stop, close, sound on e sound off. A utilização destes ícones permite que o utilizador tenha uma interacção mais intuitiva pois são formas usuais de interacção. | ||
| + | 4.2.3 Menus | ||
| + | A aplicação conta apenas com um menu que utiliza botões de texto e botões gráficos. | ||
| + | |||
| + | 5. Produção do projecto | ||
| + | |||
| + | |||
| + | 5.1 Estrutura e meios de navegação/interacção | ||
| + | |||
| + | A navegação entre páginas é composta por cinco menus principais (1st layer menu) e por outros 3 submenus (2nd layer menu): | ||
| + | |||
| + | 1st layer menu: Main | Biography | Media | Credits | Exit | ||
| + | |||
| + | Main: Página de apresentação da aplicação multimédia; | ||
| + | Biography: Página de biografia do artista; | ||
| + | Media: Página onde constam as musicas e vídeos do mesmo; | ||
| + | Credits: Página de créditos; | ||
| + | Exit: Página de interrogação sobre o sair da aplicação. | ||
| + | |||
| + | |||
| + | 2nd layer menu: Tracks | Video | Yes/No | ||
| + | |||
| + | Tracks: Permite ao utilizador ouvir 6 faixas pré-programadas; | ||
| + | Video: Permite visualizar o vídeo principal do álbum apresentado; | ||
| + | Yes/No: Respostas possíveis apresentadas no menu sair. | ||
| + | |||
| + | |||
| + | 5.2 Integração e controlo de som | ||
| + | |||
| + | Para proceder ao controlo de som da aplicação, especificamente o sobre o som de fundo, recorremos a um pequeno icon. | ||
| + | |||
| + | Este tem quatro variantes de visibilidade. | ||
| + | |||
| + | Com som, normal: | ||
| + | |||
| + | Com som, mouse over: | ||
| + | |||
| + | Sem som, normal: | ||
| + | |||
| + | Sem som, mouse over: | ||
| + | |||
| + | |||
| + | Captura de sons | ||
| + | |||
| + | Som: Click | ||
| + | |||
| + | |||
| + | Para gravar o som de click, com utilização de um microfone utilizamos vários objectos para criar diversos tipos de sons. Depois recorrendo ao Audacity retiramos o trecho de audio que melhor se enquadrava na aplicação. | ||
| + | |||
| + | |||
| + | Corte do ficheiro principal (Ficheiros documentais/sons/capturados/01_Clip de som.wav) aos 31s; | ||
| + | Aplicação de filtros Fade Out, Equalização (Curva AES com Inversão vertical), Normalizer (Remoção de compensação DC e amplitude máxima definida para 0,0 dB). | ||
| + | Exportação para mp3 a 192kbps contantes utilizando o Joint Stereo para minizar o tamanho do ficheiro, visto que não são necessários os dois canais. | ||
| + | |||
| + | Todos os botões da aplicação têm um som associado ao “release”, com a excepção do botão “Yes” do menu “EXIT”, por uma opção nossa. | ||
| + | |||
| + | Som de fundo da aplicação: | ||
| + | |||
| + | richie hawtin - 10 - soul capsule prod. - las ramblas (forever love) ~ ricardo villalobos – bredow.mp3 | ||
| + | |||
| + | Redução da amostar por aplificação de -3,5dB. | ||
| + | |||
| + | 5.3 Animação | ||
| + | |||
| + | Na aplicação em geral não se pretendia colocar animações pois estas poderiam cansar o utilizar e retirar o foco do objectivo estabelecido. No entanto na intro existe animação keyframing por tweens com efeitos de alpha de 0% a 100%, dado que era um requisito obrigatório da mesma. | ||
| + | |||
| + | 5.4 Soluções técnicas adoptadas para a resolução de problemas | ||
| + | |||
| + | 5.4.1 Controlo de um ficheiro áudio com botão de acção Play/Stop: | ||
| + | |||
| + | Após importação de várias faixas de áudio para a library do Flash e da devida integração de código, alguns ficheiros não eram reproduzidos em absoluto. Cerca de uma hora mais tarde ao realizar os testes de despistagem de erros que nos pareciam quase inconcebíveis dada a simplicidade da acção reproduzir um ficheiro de mp3, decidimos trocar a ordem do Stop e realmente resolveu o problema. | ||
| + | |||
| + | Código do botão de Stop | ||
| + | |||
| + | on(release){ | ||
| + | audio_track6.stop(); // pára a música a ser tocada | ||
| + | _parent.audio_click.start(); // play do som click | ||
| + | _parent.audio_bg.start(); // inicia o som de background | ||
| + | // Inicia o loop do som de background | ||
| + | _parent.audio_bg.onSoundComplete=function() { | ||
| + | _parent.audio_bg.start(); | ||
| + | } | ||
| + | // coloca visível o botão de play e não visível o botão de stop da música que o utilizador parou | ||
| + | btn_stop_track6._visible=false; | ||
| + | btn_play_track6._visible=true; | ||
| + | // torna visível o botão para parar o som e não visível o botão para iniciar o som | ||
| + | _parent.mc_menu_sound.btn_som_on=true; | ||
| + | _parent.mc_menu_sound.btn_som_off=false; | ||
| + | } | ||
| + | |||
| + | Código do botão de Play | ||
| + | |||
| + | on(release){ | ||
| + | // Pára o som de fundo e o som de qualquer outra faixa que esteja a ser tocada | ||
| + | _parent.audio_bg.stop(); | ||
| + | audio_track2.stop(); | ||
| + | audio_track5.stop(); | ||
| + | audio_track11.stop(); | ||
| + | audio_track14.stop(); | ||
| + | audio_track15.stop(); | ||
| + | _parent.audio_click.start(); // play do som click | ||
| + | audio_track6.start(); // inicia o som da faixa | ||
| + | audio_track6.onSoundComplete=function() { //Quando a faixa2 chegar ao fim inicia o som de background bem como o loop do mesmo e troca a visibilidade no Stage dos botões de play e stop da faixa | ||
| + | btn_play_track6._visible=true; | ||
| + | btn_stop_track6._visible=false; | ||
| + | _parent.audio_bg.start(); | ||
| + | } | ||
| + | //Força a visibilidade no Stage do botão de play de todas as faixas e torna não visível o botão de stop de todas as faixas exceptuando a faixa a ser tocada | ||
| + | btn_play_track2._visible=true; | ||
| + | btn_stop_track2._visible=false; | ||
| + | btn_play_track5._visible=true; | ||
| + | btn_stop_track5._visible=false; | ||
| + | btn_play_track6._visible=false; | ||
| + | btn_stop_track6._visible=true; | ||
| + | btn_play_track11._visible=true; | ||
| + | btn_stop_track11._visible=false; | ||
| + | btn_play_track14._visible=true; | ||
| + | btn_stop_track14._visible=false; | ||
| + | btn_play_track15._visible=true; | ||
| + | btn_stop_track15._visible=false; | ||
| + | // torna visível o botão para parar o som e não visível o botão para iniciar o som | ||
| + | _parent.mc_menu_sound.btn_som_on._visible=true; | ||
| + | _parent.mc_menu_sound.btn_som_off._visible=false; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | 5.4.2 – Animação de fundo da aplicação: | ||
| + | |||
| + | Surgiram várias questões sobre a animação que faria o fundo animado da aplicação, precisamente por esta funcionar a 12fps. Em alguns testes realizados ainda no decorrer das aulas de projecto detectamos que o facto de trabalharmos a 12fps com uma animação que se pretendia fluida iria ser certamente impossível, dado que precisaríamos de ter uma animação muito próxima dos 60fps. | ||
| + | A solução passaria por tentar recorrer ao Adobe Premier para exportar a animação em formato vídeo de forma a obter um aspecto mais coerente com o pretendido, no entanto decidimos não incluir nenhum fundo, deixando o que estava estabelecido no design inicial. | ||
| + | |||
| + | |||
| + | 5.4.3 – Alinhamento e expansão dos conteúdos para resoluções SD/HD: | ||
| + | |||
| + | Um dos principais requisitos deste projecto era o funcionamento em toda a escala de resoluções disponíveis no mercado actual, com isto surgiram tamanhas dificuldades com o design da aplicação e a sua concretização. | ||
| + | A solução foi criar um layout base com 800x600px de resolução mínima, em que todos os conteúdos só possam ser mostrados num container de informação com 400x800px de resolução. Assim sendo sempre que a resolução expande, por cálculo matemático conseguimos sempre obter as coordenadas para manter o conteúdo alinhado, apenas permitindo a expansão da barra de menu | ||
| + | |||
| + | Alinhamento de um container no Stage | ||
| + | |||
| + | //variavel de alinhamento do container | ||
| + | var myListener10:Object = new Object(); | ||
| + | myListener10.onResize = function () { // Quando houver alteração da resolução de ecrã executa a função | ||
| + | mc_container_intro._x= Stage.width/2; // Divide-se o comprimento do Stage por 2 para encontrar o comprimento médio do mesmo e iguala-se à coordenada x do container | ||
| + | mc_container_intro._y= Stage.height/2;} // Divide-se a altura do Stage por 2 para encontrar a altura média do mesmo e iguala-se à coordenada y do container | ||
| + | Stage.addListener(myListener10); // executa a função | ||
| + | |||
| + | //caso não haja alteração da resolução de ecrã é necessário indicar ao container onde se vai posicionar. | ||
| + | mc_container_intro._x= Stage.width/2; // Divide-se o comprimento do Stage por 2 para encontrar o comprimento médio do mesmo e iguala-se à coordenada x do container | ||
| + | mc_container_intro._y= Stage.height/2; // Divide-se a altura do Stage por 2 para encontrar a altura média do mesmo e iguala-se à coordenada y do container | ||
| + | |||
| + | |||
| + | 6 Conclusões | ||
| + | |||
| + | 6.1 Reflexão crítica | ||
| + | |||
| + | Certo que encontramos dificuldades, dada a nossa parca experiência com Flash AS2 e o pouco tempo disponível dado os constrangimentos profissionais e académicos de cada elemento do grupo e ainda com a perda de um dos elementos iniciais do grupo, ao qual agradecemos a participação até à publicação do estado da arte. No entanto penso estarem cumpridos os objectivos estabelecidos pelo guião, sendo que era possível ainda elaborar uma aplicação mais completa e com mais conteúdo/animação. | ||
| + | |||
| + | 6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto | ||
| + | |||
| + | O título pessoal, penso que a disciplina atingiu este ano lectivo um patamar de conteúdos muito mais agradável com a introdução ao Flash CS3 em detrimento do Director MX. No entanto deixo ficar a crítica da utilização de uma linguagem que não é de todo preferida pelos profissionais da área, dado os inúmeros problemas identificados com a linguagem e a dificuldade em encontrar ajuda para a resolução dos problemas. | ||
| + | Continuando ainda dentro do tema Flash, com a publicação dos guiões dos projectos e mini projectos, foram identificados por mim 2 factores decisivos para o agravamento das dificuldades: | ||
| + | O limite de tempo de animação e ainda o limite de “FPS”. Quanto ao tempo limite de animação, este deixa de fazer sentido dentro do enquadramento curricular, pois os alunos pretendem mostrar a capacidade de construir uma ideia/história e ao limitar o tempo estaremos também a limitar o normal tempo de transições e animações intercalares para melhor compreensão do público alvo. Por outro lado compreendo que profissionalmente assim será imposto na grande maioria das vezes. Quanto ao limite de frames-por-segundo, quanto a mim apenas compreendo pela dificuldade técnica a nível de necessidade de processamento que possa causar, pois a utilização de um número mais elevados de “fps”(por exemplo: 60fps) seria muito mais agradável visualmente. | ||
| + | |||
| + | |||
| + | |||
| + | 7. Referências Web e Bibliográficas | ||
| + | |||
| + | 7.1 – Referências Web | ||
| + | |||
| + | Aquisição de musicas em: | ||
| + | http://www.m-nus.com/#data.pl?artist=Plastikman;MiddleAndRight | ||
| + | |||
| + | Imagens para a aplicação: | ||
| + | http://www.plastikman.com/live | ||
| + | (menu “look”, dentro de cada espectáculo existem as fotos utilizadas) | ||
| + | |||
| + | Biografia do artista: http://m-nus.com/media/PlastikmanBio2010.pdf | ||
| + | |||
| + | Videos para a aplicação: | ||
| + | |||
| + | The Tunnel: http://vimeo.com/205513 | ||
| + | Video de fundo media: http://www.mediafire.com/?wudsaeodmm2wmj6 | ||
| + | Biografia: http://vimeo.com/14832241 | ||
| + | |||
| + | 7.2 - Referências Bibliográficas (Estudos) | ||
| + | |||
| + | 7.2.1 -Publico alvo, utilizadores, cenários, funcionalidades, identificação de conteúdos: Web Design – Estrutura, concepção e produção de sites Web 3ª edição, Bruno Figueiredo, FCA- Editora Informática. | ||
| + | ISBN 978-972-722-433-3. | ||
| + | |||
| + | 7.2.2 - Aprofundamento de conhecimentos sobre os multimédia e tecnologias interactivas: | ||
| + | Multimédia e Tecnologias Interactivas 2ª edição, Nuno Ribeiro, FCA – Editora Informática, ISBN: 978-972-722-574-3. | ||
| + | |||
| + | 7.2.3 - Leitura sobre os Time-based Media: | ||
| + | Web Design, Nigel Chapman and Jenny Chapman, John Wiley & Sons, Ltd. | ||
| + | ISBN:0-470-06089-1 | ||
| + | |||
| + | 7.2.4 – Consultas para esclarecimentos sobre Vídeo e formato de exportação (codecs): | ||
| + | Digital Multimédia, Nigel Chapman and Jenny Chapman, John Wiley & Sons, Ltd. | ||
| + | ISBN: 978-0-470-51216-6 | ||
| + | |||
| + | 8. Anexos | ||
| + | Reportamos todos os anexos para os ficheiros documentais. | ||
Latest revision as of 21:14, 14 January 2011
Contents |
Projecto Final
Grupo
51070 - CARLOS MANUEL SIMÕES DOS SANTOS SARAIVA
60913 - MARINA PARREIRA BARROS BITAR
39110 - JOÃO TIAGO SILVEIRA PINA
Memória Descritiva
Pretendemos com este projecto desenvolver um cd promocional sobre um artista. Este irá mostrar um pouco do seu percurso na carreira bem como musicas produzidas e videos.
Estado da Arte
(29/11/2010) Reunião com todos os elementos do grupo, para dar a conhecer ao novo elemento o que se pretende com o projecto e ouvir também a sua opinião.
(29/11/2010) Pesquisa sobre o artista a integrar no projecto
http://www.youclubvideo.com/video/113285/plastikman-sonar-2010-9sk
Conceito do artísta e uma das suas criação ao vivo
Conteúdos do artista no site da editora(artists/all/plastikman/media)
(30/11/2010) Análise de aplicações
Website indexado, de agradável navegação. Gostamos particularmente da forma como os menus são animados, sendo que pretendemos fazer algo semelhante para os menus do nosso promo cd, no entanto sublinhamos que com a distribuíção de conteúdo existente em "Living art/the brand/last collections" seria francamente impossível mostrar uma discografia de um artista, pois a marca Decenio nesta secção não apresenta mais do que uma simples foto de algumas peças de vestuário. Pretendemos utilizar a ideia de navegação apenas, pois consideramos que este site não se enquadra ao tipo de conteúdo que vamos apresentar.
http://www.jasonmraz.com/index.php
Este website é um bom exemplo de um projecto com um design agradável e de fácil navegação. A nível de contéudos encontramos informação em excesso em relação ao que queremos fazer no nosso projecto. Informações como notícias, foruns, ligações, loja, blog e datas de concertos não são necessárias no nosso projecto. A navegação é simples de entender, e por defeito está activa a voz do artista que sempre que visitamos uma página diz-nos o que vamos visitar sem sobre-carregar a navegação. Serve este website, essencialmente, para entender o conceito de uma aplicação em Flash para um artista musical quer a nível estrutural, quer a nível de simplicidade de design.
http://www.pinkfloyd.co.uk/obtw/
Neste website encontramos uma apresentação interessante de vários albuns dos Pink Floyd, é o website de divulgação de uma colectânea de cds. O ambiente é interessante tendo em conta que as faixas de várias cores por detrás da capa do CD se movem de acordo com a música que está a tocar em fundo fazendo lembrar um equalizador. A navegação não é tão intuitiva pois para mudar de CD temos que passar o cursor por cima da seta de navegação que ao princípio poderá não se encontrar facilmente. O menu inferior causa alguma estranheza pois num primeiro olhar parece o rodapé normal dos sites que apenas contêm os créditos, faqs, etc, no entanto é o menu principal do website que contém todas as ligações possíveis dentro do website. A retirar deste website ideias para a navegação dos diversos albuns e projectos do artista sobre o qual vamos fazer o nosso projecto.
Gostamos essencialmente da forma de navegação, embora só seja possivel saber obejctivamente para que secção nos dirigimos, se utilizarmos o menu existente na assinatura(canto inferior esquerdo). Tem um caractér muito minimalista e recorre a um tipo de vectorial sirueta o que nos agrada, mas não serve de todo para o nosso projecto. Com este website comcluímos que embora seja agradável "viajar" nele, seria desesperante encontrar os conteúdos que se espera de um artista.
http://www.fborn.com/websites/137_jbl/
Apesar de este site não estar directamente ligado a um tipo de conteúdo que pretendemos no nosso projecto, tem uma navegação engraçada e uma apresentação de algumas músicas com animações interessantes. Serve este site para retirar ideias para a navegação e apresentação de algumas músicas no nosso projecto.
http://www.darrylworley.com/index.cfm?id=1
Serve este website apenas para retirar ideias para a idealização de um cabeçalho para o nosso projecto, uma vez que é a única parte do website que está animada. A nível de conteúdos é o website típico de um músico com informações a mais do que será necessário no nosso projecto.
http://www.deathcabforcutie.com/home/
Neste website apenas temos a página inicial animada, embora tenha conceitos interessantes, pensamos que tem informação a mais o que faz parecer um pouco desorganizado e pode levar a uma navegação menos intuitiva, no entanto existe o menu na parte superior da página que faz com que a navegação seja facilitada, no entanto, este menu não está animado. Com este website aprendemos o que não devemos fazer na página inicial do nosso projecto.
Navegação um pouco confusa devido ao tamanho reduzido do menu, no entanto este está sempre acessível por intermédio de um click na página onde são mostrados os conteúdos. O website em si mostra conteúdos semelhantes ao nosso projecto, mas não concordamos com a forma de navegação. Um nota importante a reter deste site, devemos sempre ter uma alternativa à navegação principal, permitindo a título de exemplo em visualizações de videos, a passagem de um video para o seguinte sem que o utilizador tenha que voltar a um menu anterior, favorecendo a continuidade de interesse na visualização de outros videos.
Website indexado de fácil navegação. Possui um player no topo da página contendo algumas músicas do artista como na maioria dos sites do gênero. Um aspecto interessante é o fato de oferecer ao utilizador duas formas de visualização dos álbuns em que uma delas está relacionada com o player: escolhe-se o álbum e a faixa que pretende-se ouvir no player. Se encaixa no contexto do projeto, salvo informações adicionais como loja, comunidade de fãs, filmes, etc.
http://www.jayzhitscollection.com/
Excelente integração do vídeo na aplicação Flash, especialmente nos separadores entre as diversas páginas, nota-se a baixa resolução do vídeo no entanto compreende-se para que a aplicação não pese demasiado visto que está distribuida online. A navegação entre fotografias é feita pela diferenciação na colocação do rato nas várias zonas do ecran fazendo com que este assuma butões de navegação foward, backward e close o que denotamos que é neste momento um dos métodos mais usados para navegação em galerias de imagens. Deste website retirámos uma ideia de indexação mais subjectiva libertando o utilizador à descoberta dos conteúdos.
Arborescência
(29/11/2010)
Planificação da arborescência
(08/12/2010)
Reestruturação da arborrescência e procedemos com a publicação para consulta e análise com os docentes da disciplina.
Relatório Final
1. Apresentação do projecto
1.1 – Apresentação (memória descritiva) Pretende-se o desenvolvimento de um CD promocional sobre um artista para distribuição off-line, no sentido de dar a conhecer um pouco da sua biografia e produções enquanto artista.
1.2 Caracterização de produto
CD promocional para distribuição off-line em revistas sobre música e eventos. Este pretende dar a conhecer um álbum do artista e um pouco da sua carreira como artista e co-fundador de empresas e produtos ligados com música electrónica. 2. Análise e planeamento
2.1 - Investigação temática
A escolha de um tema, é certamente uma das partes mais difíceis de um projecto, dado o seu carácter decisivo para o futuro do desenvolvimento. Partimos sempre do princípio que o nosso publico alvo se enquadraria numa faixa etária compreendida entre os 15 a 40 anos de idade e que desenvolveríamos algo relacionado com música. Preferência essa que nos levou a auscultar dois técnicos da área de programação, para que fosse possível compreender as necessidades e os objectivos a cumprir.
2.2 - Estado da arte
(29/11/2010) Reunião com todos os elementos do grupo, para dar a conhecer ao novo elemento o que se pretende com o projecto e ouvir também a sua opinião. Foram discutidas as possíveis dificuldades na execução do projecto, sendo esta a melhor altura para reflectir sobre as aptidões técnicas de cada elemento e facilidade de encontrar soluções para futuros problemas.
(29/11/2010) Pesquisa sobre o artista a integrar no projecto
http://www.youclubvideo.com/video/113285/plastikman-sonar-2010-9sk
Conceito do artista e uma das suas criação ao vivo
http://www.m-nus.com/# Conteúdos do artista no site da editora (artists/all/plastikman/media)
(30/11/2010) Análise de aplicações
Website indexado, de agradável navegação. Gostamos particularmente da forma como os menus são animados, sendo que pretendemos fazer algo semelhante para os menus do nosso promo CD, no entanto sublinhamos que com a distribuição de conteúdo existente em "Living art/the brand/last collections" seria francamente impossível mostrar uma discografia de um artista, pois a marca Decenio nesta secção não apresenta mais do que uma simples foto de algumas peças de vestuário. Pretendemos utilizar a ideia de navegação apenas, pois consideramos que este site não se enquadra ao tipo de conteúdo que vamos apresentar.
http://www.jasonmraz.com/index.php
Este website é um bom exemplo de um projecto com um design agradável e de fácil navegação. A nível de conteúdos encontramos informação em excesso em relação ao que queremos fazer no nosso projecto. Informações como notícias, fóruns, ligações, loja, blog e datas de concertos não são necessárias no nosso projecto. A navegação é simples de entender, e por defeito está activa a voz do artista que sempre que visitamos uma página diz-nos o que vamos visitar sem sobrecarregar a navegação. Serve este website, essencialmente, para entender o conceito de uma aplicação em Flash para um artista musical quer a nível estrutural, quer a nível de simplicidade de design.
http://www.pinkfloyd.co.uk/obtw/
Neste website encontramos uma apresentação interessante de vários álbuns dos Pink Floyd, é o website de divulgação de uma colectânea de CDS. O ambiente é interessante tendo em conta que as faixas de várias cores por detrás da capa do CD se movem de acordo com a música que está a tocar em fundo fazendo lembrar um equalizador. A navegação não é tão intuitiva pois para mudar de CD temos que passar o cursor por cima da seta de navegação que ao princípio poderá não se encontrar facilmente. O menu inferior causa alguma estranheza pois num primeiro olhar parece o rodapé normal dos sites que apenas contêm os créditos, faqs, etc., no entanto é o menu principal do website que contém todas as ligações possíveis dentro do website. A retirar deste website ideias para a navegação dos diversos álbuns e projectos do artista sobre o qual vamos fazer o nosso projecto.
Gostamos essencialmente da forma de navegação, embora só seja possível saber objectivamente para que secção nos dirigimos, se utilizarmos o menu existente na assinatura (canto inferior esquerdo). Tem um carácter muito minimalista e recorre a um tipo de vectorial sirueta o que nos agrada, mas não serve de todo para o nosso projecto. Com este website concluímos que embora seja agradável "viajar" nele, seria desesperante encontrar os conteúdos que se espera de um artista.
http://www.fborn.com/websites/137_jbl/
Apesar de este site não estar directamente ligado a um tipo de conteúdo que pretendemos no nosso projecto, tem uma navegação engraçada e uma apresentação de algumas músicas com animações interessantes. Serve este site para retirar ideias para a navegação e apresentação de algumas músicas no nosso projecto. http://www.darrylworley.com/index.cfm?id=1 Serve este website apenas para retirar ideias para a idealização de um cabeçalho para o nosso projecto, uma vez que é a única parte do website que está animada. A nível de conteúdos é o website típico de um músico com informações a mais do que será necessário no nosso projecto.
http://www.deathcabforcutie.com/home/
Neste website apenas temos a página inicial animada, embora tenha conceitos interessantes, pensamos que tem informação a mais o que faz parecer um pouco desorganizado e pode levar a uma navegação menos intuitiva, no entanto existe o menu na parte superior da página que faz com que a navegação seja facilitada, no entanto, este menu não está animado. Com este website aprendemos o que não devemos fazer na página inicial do nosso projecto.
Navegação um pouco confusa devido ao tamanho reduzido do menu, no entanto este está sempre acessível por intermédio de um click na página onde são mostrados os conteúdos. O website em si mostra conteúdos semelhantes ao nosso projecto, mas não concordamos com a forma de navegação. Um nota importante a reter deste site, devemos sempre ter uma alternativa à navegação principal, permitindo a título de exemplo em visualizações de vídeos, a passagem de um vídeo para o seguinte sem que o utilizador tenha que voltar a um menu anterior, favorecendo a continuidade de interesse na visualização de outros vídeos.
Website indexado de fácil navegação. Possui um player no topo da página contendo algumas músicas do artista como na maioria dos sites do género. Um aspecto interessante é o fato de oferecer ao utilizador duas formas de visualização dos álbuns em que uma delas está relacionada com o player: escolhe-se o álbum e a faixa que pretende-se ouvir no player. Se encaixa no contexto do projecto, salvo informações adicionais como loja, comunidade de fãs, filmes, etc.
http://www.jayzhitscollection.com/
Excelente integração do vídeo na aplicação Flash, especialmente nos separadores entre as diversas páginas, nota-se a baixa resolução do vídeo no entanto compreende-se para que a aplicação não pese demasiado visto que está distribuída online. A navegação entre fotografias é feita pela diferenciação na colocação do rato nas várias zonas do ecrã fazendo com que este assuma botões de navegação foward, backward e close o que denotamos que é neste momento um dos métodos mais usados para navegação em galerias de imagens. Deste website retirámos uma ideia de indexação mais subjectiva libertando o utilizador à descoberta dos conteúdos
2.3 - Conceito
Aplicação de carácter minimalista, concisa e de fácil navegação. Recorre frequentemente a cores escuras e a um sistema de navegação indexado, geralmente colocado em zonas de pouco foco do olhar. Terá também um som ambiente, passível de ser parado e ainda suportará resoluções até ao limite do HD.
3. Desenho funcional
3.1 Requisitos funcionais
Esta pretende mostrar vídeos e faixas áudio do artista, bem como uma breve biografia do mesmo. Terá também um som ambiente, passível de ser parado e ainda terá a possibilidade de ir online consultar a página da editora (http://www.m-nus.com). Para sair da aplicação o utilizador deverá confirmar a sua intenção através de um menu próprio. Esta permitira ainda alternar entre fullscreen e normal view.
3.2 Estrutura arborescente
3.2.1 Apresentação
Esta aplicação contempla uma introdução com possibilidade de saltar directamente para o menu principal da aplicação, onde o utilizador terá ao seu dispor (4) quatro menus principais (music, biography, credits e exit), destes resultam a possibilidade de submenus com opções diversas para visualização de outros conteúdos associados aos menus principais.
Adenda:
Com o avanço no desenvolvimento e pelo facto de na altura da publicação anterior ainda estarem por definir alguns conteúdos media da aplicação, passamos agora a incluir uma versão rectificada da mesma, onde serão mostrados todos os conteúdos da aplicação.
3.3 Desenho de interacção e usabilidade
3.3.1 Estrutura e orientação - Identificação inequívoca dos meios de navegação/interacção e da sua função mecanismos de identificação do ponto da estrutura (títulos, destaque do item no menu, etc.); - Utilização de localizadores do tipo “você está aqui”; - Os elementos relacionados estão agrupados.
3.3.2 Simplicidade - máxima KISS; - Simplicidade nas tarefas, nos procedimentos, no acesso a conteúdos e na linguagem utilizada.
3.3.3 Visibilidade
- Não sobrecarregar o utilizador com alternativas e não o confundir com informação e opções desnecessárias.
3.3.4 Tolerância
- Tornar as acções previsíveis; - Desactivar opções inapropriadas dentro de determinado contexto; - Questionar o utilizador sempre que as acções forem definitivas e informar da irreversibilidade.
3.3.5 Consistência - A aplicação ou sistema deve implementar componentes e comportamentos consistentes e não arbitrários. 4. Desenho técnico
4.1 Estilo de interacção e interface Esta aplicação usa o estilo de manipulação e navegação. Para além de ser o estilo mais usado actualmente é o único que se enquadra no âmbito do nosso projecto, uma vez que toda a interacção é feita através menus e icons. 4.2 Meios de navegação e interacção – topologias 4.2.1 Janelas A aplicação inicia em fullscreen sendo possível através do botão fullscreen colocado no canto inferior direito da aplicação. Toda a navegação é feita na mesma janela, exceptuando o link M-nus que abre uma janela do brownser para o website da editora. 4.2.2 Icons Usámos na aplicação cinco icons: play, stop, close, sound on e sound off. A utilização destes ícones permite que o utilizador tenha uma interacção mais intuitiva pois são formas usuais de interacção. 4.2.3 Menus A aplicação conta apenas com um menu que utiliza botões de texto e botões gráficos.
5. Produção do projecto
5.1 Estrutura e meios de navegação/interacção
A navegação entre páginas é composta por cinco menus principais (1st layer menu) e por outros 3 submenus (2nd layer menu):
1st layer menu: Main | Biography | Media | Credits | Exit
Main: Página de apresentação da aplicação multimédia; Biography: Página de biografia do artista; Media: Página onde constam as musicas e vídeos do mesmo; Credits: Página de créditos; Exit: Página de interrogação sobre o sair da aplicação.
2nd layer menu: Tracks | Video | Yes/No
Tracks: Permite ao utilizador ouvir 6 faixas pré-programadas; Video: Permite visualizar o vídeo principal do álbum apresentado; Yes/No: Respostas possíveis apresentadas no menu sair.
5.2 Integração e controlo de som
Para proceder ao controlo de som da aplicação, especificamente o sobre o som de fundo, recorremos a um pequeno icon.
Este tem quatro variantes de visibilidade.
Com som, normal:
Com som, mouse over:
Sem som, normal:
Sem som, mouse over:
Captura de sons
Som: Click
Para gravar o som de click, com utilização de um microfone utilizamos vários objectos para criar diversos tipos de sons. Depois recorrendo ao Audacity retiramos o trecho de audio que melhor se enquadrava na aplicação.
Corte do ficheiro principal (Ficheiros documentais/sons/capturados/01_Clip de som.wav) aos 31s;
Aplicação de filtros Fade Out, Equalização (Curva AES com Inversão vertical), Normalizer (Remoção de compensação DC e amplitude máxima definida para 0,0 dB).
Exportação para mp3 a 192kbps contantes utilizando o Joint Stereo para minizar o tamanho do ficheiro, visto que não são necessários os dois canais.
Todos os botões da aplicação têm um som associado ao “release”, com a excepção do botão “Yes” do menu “EXIT”, por uma opção nossa.
Som de fundo da aplicação:
richie hawtin - 10 - soul capsule prod. - las ramblas (forever love) ~ ricardo villalobos – bredow.mp3
Redução da amostar por aplificação de -3,5dB.
5.3 Animação
Na aplicação em geral não se pretendia colocar animações pois estas poderiam cansar o utilizar e retirar o foco do objectivo estabelecido. No entanto na intro existe animação keyframing por tweens com efeitos de alpha de 0% a 100%, dado que era um requisito obrigatório da mesma.
5.4 Soluções técnicas adoptadas para a resolução de problemas
5.4.1 Controlo de um ficheiro áudio com botão de acção Play/Stop:
Após importação de várias faixas de áudio para a library do Flash e da devida integração de código, alguns ficheiros não eram reproduzidos em absoluto. Cerca de uma hora mais tarde ao realizar os testes de despistagem de erros que nos pareciam quase inconcebíveis dada a simplicidade da acção reproduzir um ficheiro de mp3, decidimos trocar a ordem do Stop e realmente resolveu o problema.
Código do botão de Stop
on(release){ audio_track6.stop(); // pára a música a ser tocada _parent.audio_click.start(); // play do som click _parent.audio_bg.start(); // inicia o som de background // Inicia o loop do som de background _parent.audio_bg.onSoundComplete=function() { _parent.audio_bg.start(); } // coloca visível o botão de play e não visível o botão de stop da música que o utilizador parou btn_stop_track6._visible=false; btn_play_track6._visible=true; // torna visível o botão para parar o som e não visível o botão para iniciar o som _parent.mc_menu_sound.btn_som_on=true; _parent.mc_menu_sound.btn_som_off=false; }
Código do botão de Play
on(release){ // Pára o som de fundo e o som de qualquer outra faixa que esteja a ser tocada _parent.audio_bg.stop(); audio_track2.stop(); audio_track5.stop(); audio_track11.stop(); audio_track14.stop(); audio_track15.stop(); _parent.audio_click.start(); // play do som click audio_track6.start(); // inicia o som da faixa audio_track6.onSoundComplete=function() { //Quando a faixa2 chegar ao fim inicia o som de background bem como o loop do mesmo e troca a visibilidade no Stage dos botões de play e stop da faixa btn_play_track6._visible=true; btn_stop_track6._visible=false; _parent.audio_bg.start(); } //Força a visibilidade no Stage do botão de play de todas as faixas e torna não visível o botão de stop de todas as faixas exceptuando a faixa a ser tocada btn_play_track2._visible=true; btn_stop_track2._visible=false; btn_play_track5._visible=true; btn_stop_track5._visible=false; btn_play_track6._visible=false; btn_stop_track6._visible=true; btn_play_track11._visible=true; btn_stop_track11._visible=false; btn_play_track14._visible=true; btn_stop_track14._visible=false; btn_play_track15._visible=true; btn_stop_track15._visible=false; // torna visível o botão para parar o som e não visível o botão para iniciar o som _parent.mc_menu_sound.btn_som_on._visible=true; _parent.mc_menu_sound.btn_som_off._visible=false; }
5.4.2 – Animação de fundo da aplicação:
Surgiram várias questões sobre a animação que faria o fundo animado da aplicação, precisamente por esta funcionar a 12fps. Em alguns testes realizados ainda no decorrer das aulas de projecto detectamos que o facto de trabalharmos a 12fps com uma animação que se pretendia fluida iria ser certamente impossível, dado que precisaríamos de ter uma animação muito próxima dos 60fps. A solução passaria por tentar recorrer ao Adobe Premier para exportar a animação em formato vídeo de forma a obter um aspecto mais coerente com o pretendido, no entanto decidimos não incluir nenhum fundo, deixando o que estava estabelecido no design inicial.
5.4.3 – Alinhamento e expansão dos conteúdos para resoluções SD/HD:
Um dos principais requisitos deste projecto era o funcionamento em toda a escala de resoluções disponíveis no mercado actual, com isto surgiram tamanhas dificuldades com o design da aplicação e a sua concretização. A solução foi criar um layout base com 800x600px de resolução mínima, em que todos os conteúdos só possam ser mostrados num container de informação com 400x800px de resolução. Assim sendo sempre que a resolução expande, por cálculo matemático conseguimos sempre obter as coordenadas para manter o conteúdo alinhado, apenas permitindo a expansão da barra de menu
Alinhamento de um container no Stage
//variavel de alinhamento do container var myListener10:Object = new Object(); myListener10.onResize = function () { // Quando houver alteração da resolução de ecrã executa a função mc_container_intro._x= Stage.width/2; // Divide-se o comprimento do Stage por 2 para encontrar o comprimento médio do mesmo e iguala-se à coordenada x do container mc_container_intro._y= Stage.height/2;} // Divide-se a altura do Stage por 2 para encontrar a altura média do mesmo e iguala-se à coordenada y do container Stage.addListener(myListener10); // executa a função
//caso não haja alteração da resolução de ecrã é necessário indicar ao container onde se vai posicionar. mc_container_intro._x= Stage.width/2; // Divide-se o comprimento do Stage por 2 para encontrar o comprimento médio do mesmo e iguala-se à coordenada x do container mc_container_intro._y= Stage.height/2; // Divide-se a altura do Stage por 2 para encontrar a altura média do mesmo e iguala-se à coordenada y do container
6 Conclusões
6.1 Reflexão crítica
Certo que encontramos dificuldades, dada a nossa parca experiência com Flash AS2 e o pouco tempo disponível dado os constrangimentos profissionais e académicos de cada elemento do grupo e ainda com a perda de um dos elementos iniciais do grupo, ao qual agradecemos a participação até à publicação do estado da arte. No entanto penso estarem cumpridos os objectivos estabelecidos pelo guião, sendo que era possível ainda elaborar uma aplicação mais completa e com mais conteúdo/animação.
6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto
O título pessoal, penso que a disciplina atingiu este ano lectivo um patamar de conteúdos muito mais agradável com a introdução ao Flash CS3 em detrimento do Director MX. No entanto deixo ficar a crítica da utilização de uma linguagem que não é de todo preferida pelos profissionais da área, dado os inúmeros problemas identificados com a linguagem e a dificuldade em encontrar ajuda para a resolução dos problemas. Continuando ainda dentro do tema Flash, com a publicação dos guiões dos projectos e mini projectos, foram identificados por mim 2 factores decisivos para o agravamento das dificuldades: O limite de tempo de animação e ainda o limite de “FPS”. Quanto ao tempo limite de animação, este deixa de fazer sentido dentro do enquadramento curricular, pois os alunos pretendem mostrar a capacidade de construir uma ideia/história e ao limitar o tempo estaremos também a limitar o normal tempo de transições e animações intercalares para melhor compreensão do público alvo. Por outro lado compreendo que profissionalmente assim será imposto na grande maioria das vezes. Quanto ao limite de frames-por-segundo, quanto a mim apenas compreendo pela dificuldade técnica a nível de necessidade de processamento que possa causar, pois a utilização de um número mais elevados de “fps”(por exemplo: 60fps) seria muito mais agradável visualmente.
7. Referências Web e Bibliográficas
7.1 – Referências Web
Aquisição de musicas em: http://www.m-nus.com/#data.pl?artist=Plastikman;MiddleAndRight
Imagens para a aplicação: http://www.plastikman.com/live (menu “look”, dentro de cada espectáculo existem as fotos utilizadas)
Biografia do artista: http://m-nus.com/media/PlastikmanBio2010.pdf
Videos para a aplicação:
The Tunnel: http://vimeo.com/205513 Video de fundo media: http://www.mediafire.com/?wudsaeodmm2wmj6 Biografia: http://vimeo.com/14832241
7.2 - Referências Bibliográficas (Estudos)
7.2.1 -Publico alvo, utilizadores, cenários, funcionalidades, identificação de conteúdos: Web Design – Estrutura, concepção e produção de sites Web 3ª edição, Bruno Figueiredo, FCA- Editora Informática. ISBN 978-972-722-433-3.
7.2.2 - Aprofundamento de conhecimentos sobre os multimédia e tecnologias interactivas: Multimédia e Tecnologias Interactivas 2ª edição, Nuno Ribeiro, FCA – Editora Informática, ISBN: 978-972-722-574-3.
7.2.3 - Leitura sobre os Time-based Media: Web Design, Nigel Chapman and Jenny Chapman, John Wiley & Sons, Ltd. ISBN:0-470-06089-1
7.2.4 – Consultas para esclarecimentos sobre Vídeo e formato de exportação (codecs):
Digital Multimédia, Nigel Chapman and Jenny Chapman, John Wiley & Sons, Ltd.
ISBN: 978-0-470-51216-6
8. Anexos Reportamos todos os anexos para os ficheiros documentais.
