LoopyTunes Relatório Final Sistemas Multimédia FEUP

Transcrição

1 LoopyTunes Relatório Final Miguel Medeiros Correia Rui Miguel Costeira Alves da Costa Sistemas Multimédia FEUP Mestrado Integrado em Engenharia Electrotécnica e de Computadores 2010/2011

2 Índice Índice Objectivos Implementação Visão geral do funcionamento XML Arquitectura do SWF Reprodução de imagem e vídeo Navegação Layout Zona de Vídeo Leitor/Reprodutor de Áudio Menu Planeamento Conclusão

3 1. Objectivos Este relatório apresenta-se como um documento especificação sobre o projecto desenvolvido durante o decorrer da unidade curricular de Sistemas Multimédia do presente ano lectivo. Dentro dos objectivos da cadeira o grupo propôs-se a criar um site multimédia baseado em tecnologia flash para streaming de áudio e imagem (vídeo e fotografia) que oferecesse ao utilizador uma apresentação multimédia relativamente harmoniosa e recreativa. O objectivo final foi o de tornar possível ao utilizador escolher uma música, sendo-lhe apresentado um vídeo acompanhado pelo áudio escolhido, criando um ambiente agradável para o utilizador. Procurou-se desenvolver uma interface dinâmica, apelativa, funcional e de simples utilização. Foi estabelecido que o sistema deveria suportar algumas funcionalidades, sendo estas abaixo descritas segundo prioridade de implementação Prioridade alta O utilizador deverá, ao aceder ao site, poder escolher uma opção musical. Deverá iniciar a reprodução da música com o conteúdo visual a ser apresentado na zona apropriada como um vídeo. A interface para o utilizador deve ser funcional e de fácil utilização. Deverão ser disponibilizadas um mínimo de duas escolhas. Prioridade média Os menus inicialmente disponíveis ao utilizador devem ter a possibilidade de serem ocultos, permitindo uma visualização do vídeo em ecrã completo. Deverá ser possível que o utilizador escolha os conteúdos visuais (fotografia e vídeo) que irão acompanhar a música. Prioridade baixa Deverá ser possível ao utilizador carregar para o site conteúdo áudio-visual para ser reproduzido (música, fotografia e vídeos). Idealmente, o utilizador deverá poder partilhar a sua produção através do site. 3

4 2. Implementação 2.1. Visão geral do funcionamento Procurou-se implementar um sistema que fosse dinâmico, trazendo a possibilidade de, através do mesmo, criar uma API que possa ser utilizada das mais variadas formas. Para o efeito, o SWF funciona de uma forma isolada. A informação que terá que processar é carregada fazendo uso de ficheiros XML. Uma vez escolhida uma opção, é lido o XML referente à mesma para carregar os elementos áudio-visuais associados. As imagens são carregadas em primeiro lugar e uma vez concluído este processo é inicializado o leitor de áudio, com a música associada, criado o reprodutor de vídeo e iniciada a reprodução. A escolha entre imagem ou vídeo é feita de uma forma aleatória. Uma vez escolhido o tipo de elemento, é gerada, novamente de forma aleatória sobre o numero de elementos em causa, a escolha de um destes. Finalmente, é apresentado o elemento visual. Como cada escolha é feita sobre a música em si, foi decidido que esta continuaria a tocar em loop (i.e., sempre que chega ao fim, recomeça a mesma música). Desta forma, e sendo a escolha de elemento visual feita aleatoriamente, o utilizador pode desfrutar da música tendo um vídeo sempre diferente XML O sistema tira proveito da possibilidade de comunicação entre SWF e XML para criar uma plataforma dinâmica e facilmente adaptável a várias soluções. No diagrama 1 pode-se observar as interacções que o SWF tem com o XML. O ficheiro XML de menu é utilizado para a criação dos menus e aponta para os vários XML de conteúdo, que por sua vez contêm a informação dos elementos áudio-visuais a serem reproduzidos. A informação das opções musicais disponíveis são guardadas em um XML de Menu. Neste encontram-se a definição dos menus e das suas opções. Um menu é definido com a tag <menu> e cada opção associado a este, com a tag <item>. Todos os menus são ainda envoltos por uma tag <menus>. Passam-se a descrever os parâmetros para cada tag: <menus> serve como um wrapper para a definição individual dos menus. <menu> id cada entrada de menu deve ser identificada com um inteiro. Isto permite ao SWF mais tarde reconhecer que menu se encontra activo. 4

5 <item> url localização do xml de conteúdo associado à opção do menu. thumb localização de uma imagem que servirá de thumbnail para a opção. As imagens devem ter as dimensões 95x120 a fim de evitar distorção. Diagrama 1. Interacções do SWF com o XML. Por cada entrada <menu> será criado um objecto de menu no SWF e por cada entrada <item> será criada uma opção de menu associado ao mesmo (consultar secção 4.3). O XML de menu é o único que tem um nome e caminho fixo. Este deverá ter o caminho e nome src/xml/menu_content.xml. Na listagem 1 pode-se ver um exemplo da definição de um menu. Listagem 1. Exemplo da definição do ficheiro XML para o conteúdo dos menus. De notar que foi criado apenas um menu com uma opção. Cada entrada <item> por sua vez, tem um url para o XML associado ao item. Estes são os ficheiros de definição dos vários conteúdos áudio-visuais que fazem parte da opção. Os ficheiros de conteúdo são envoltos por uma tag <slideshow> e definem não só o caminho para cada elemento audiovisual como também o tempo de transição entre cada um. Na listagem 2 podemos encontrar um exemplo de um destes ficheiros. Passam-se a descrever as diferentes tags que 5

6 constituem um destes ficheiros: <SLIDESHOW> wrapper para a definição do elementos que constituem a apresentação. VSPEED duração dos vídeos, em segundos. ISPEED duração das imagens, em segundos. <VIDEO> elemento de vídeo. URL caminho para o elemento. TITLE título do elemento. <IMAGE> elemento de imagem. URL caminho para o elemento. TITLE título do elemento. <MUSIC> elemento musical da apresentação. URL caminho para o elemento. Listagem 2. Exemplo da definição de um ficheiro XML de conteúdo. O resultado será uma apresentação com apenas uma música, um vídeo e uma imagem, com uma transição entre vídeos e imagens de 7 segundos. Além de ser possível introduzir a uma apresentação vários elementos music, o reprodutor só interpretará o primeiro da lista Arquitectura do SWF O SWF foi implementado por fases, criando em paralelo alguns dos seus componentes. O produto final é montado por camadas que se comunicam numa topologia top-down, ou seja, as camadas de nível superior passam informação ao nível directamente abaixo não havendo comunicação no sentido contrário. No diagrama 2 encontra-se a organização dos diferentes níveis da aplicação. 6

7 Diagrama 2. Organização dos diferentes níveis do SWF. Elementos com a mesma orientação vertical são consideradas do mesmo nível e portanto conseguem comunicar entre si. Com a topologia adoptada torna-se possível inicializar e automatizar o funcionamento de cada um dos níveis independentemente dos restantes, tornando a aplicação mais robusta, menos susceptível a erros facilitando, também, futuras alterações sobre o sistema Reprodução de imagem e vídeo O reprodutor de áudio foi construido de raiz, para permitir as interacções pretendidas para o projecto. Por sua vez, para o reprodutor de vídeo, foi utilizado um FLVComponent dada a sua maior facilidade de implementação e controle. Como foi referido, no início desta secção, a reprodução de imagem e vídeo é feita de forma aleatória. É feita uma escolha entre o tipo de elemento audiovisual com uma probabilidade de 50% entre cada uma, uma vez definido o tipo de elemento a ser reproduzido é feita uma escolha do 1, sendo n o número de elementos elemento a ser reproduzido com uma probabilidade de n disponíveis. No caso das imagens é adicionado um temporizador com o tempo definido no parâmetro ISPEED do XML quando a imagem é apresentada. Uma vez esgotado o tempo, é recomeçado o processo de escolha de elementos. Se um vídeo foi escolhido pelo sistema para ser apresentado, este é passado ao leitor de vídeo e iniciada a sua reprodução. É então constantemente lida a evolução desta reprodução e interrompida quando atingir o tempo definido em VSPEED, sendo escolhido novo elemento. No diagrama 3 pode ser consultado o processo acima descrito. 7

8 Diagrama 3. Processo de escolha de elemento visual. 8

9 3. Navegação Este projecto está orientado segundo uma topologia de navegação em estrela, interligando as várias funcionalidades do nosso projecto em apenas uma página, existindo uma página principal em que está presente toda a navegação multimédia incorporada na página, dando a possibilidade de realizar toda a navegação relacionada com a parte dinâmica do projecto nesse mesmo espaço. E uma página About, com a descrição do projecto realizado, em que é usada uma topologia de linha para o acesso. Como se pode observar, através do diagrama (ver diagrama 4), com os elementos áudio-visuais do projecto todos presentes na página principal, permite ao utilizador aceder ao todos os elementos da página e suas funcionalidades, em simultâneo e de forma independente, permitindo uma simplicidade de processos e um acesso mais intuitivo a cada componente. Diagrama 4. Tipo de navegação da página. Tipologia em estrela. 9

10 4. Layout Com o objectivo de ser criada uma interface dinâmica, apelativa, agradável e funcional, que permitisse oferecer ao utilizador um sistema funcional, intuitivo, de fácil acesso ás funcionalidades presentes no projecto de forma a tornar a navegação o mais simplificada possível durante a sua utilização, a elaboração do projecto de layout (ver figura 1) implementado no projecto desenvolvido, focou-se essencialmente nesses pontos. Como pode ser observado, é adoptado para o site html, um desgin css, bastante simplista e minimalista, uma vez que o principal objectivo do projecto desenvolvido era a dinâmica e componente multimédia do mesmo. Figura 1. Layout da página. De seguida apresenta-se uma explicação das diversas áreas do layout desenvolvido. 10

11 4.1. Zona de Vídeo Figura 2. Zona de vídeo. Com o objectivo de dar o maior relevo possível a parte visual do projecto, esta zona foi elaborada (ver figura 2) por forma a preencher na totalidade toda a área pertencente à parte multimédia do projecto, permitindo o visionamento dos vídeos e imagens de forma aleatória, que estão incorporados em cada música seleccionada pelo utilizador. A simplicidade prima nesta área que possui um tratamento na imagem/vídeo apresentados, por forma a suavizar a visualização por parte do utilizador, tornado o mesmo mais agradável á vista. Esta zona é apresentada inicialmente com uma imagem dinâmica que nos transmite a sensação de que estamos perante um imagem televisiva, com ruído em fundo, ao qual é adicionado um tratamento de imagem old grain dando ao utilizador o aspecto de estar perante uma imagem de televisão antiga (ver figura 3). Esta zona é complementada com uma parte áudio incorporada na página, relacionando o áudio com a parte visual. 11

12 Figura 3. Zona de vídeo, inicialmente, com efeito old grain Leitor/Reprodutor de Áudio Figura 4. Leitor/Reprodutor de áudio. 12

13 A parte áudio no projecto (ver figura 4), umas das suas componentes principais, está incorporada na zona de vídeo da página uma vez que se torna importante ao utilizador poder controlar as funções de áudio que estão a ser reproduzidas de uma maneira rápida e intuitiva, durante o processo de transmissão de imagens/vídeo. O leitor/reprodutor de áudio projectado e implementado, é pensado para oferecer ao utilizador um acesso muito simples e bastante eficaz ás principais funções áudio necessárias durante a reprodução de um ficheiro de som, assim, as funcionalidades play/pause e o controlo de volume tornam-se essenciais em qualquer reprodutor de áudio. È ainda apresentada a informação musical do ficheiro a ser reproduzido e um equalizer que permite observar a intensidade sonora que está a ser transmitida a música. A parte visual do leitor/reprodutor, é pensada de forma a ser incorporada em qualquer vídeo sem perder a sua simplicidade e suavidade, não tornando a mesma pesada a vista do utilizador Menu Figura 5. Menu Principal. O menu principal deste projecto (ver figura 5) foi elaborado por forma a tornar a navegação e as escolhas do utilizador o mais simples e eficientes. O dinamismo do menu foi pensado de forma a tornar possível essa mesma simplicidade. A navegação através do menu é bastante intuitiva, estando acessível através do botão de Menu, sendo apresentadas diferentes opções de escolha relativas aos conteúdos áudio-visuais presentes, tornando-se a sua escolha uma tarefa bastante simplista ao utilizador, podendo proceder ao início da reprodução dos conteúdos multimédia presentes, ou à alteração do conteúdo que está a ser 13

14 reproduzido nesse momento, seleccionando a opção pretendida. Através da sobreposição do cursor sobre a opção pretendida é possível observar uma alteração do perfil da opção seleccionada (ver figura 6), para que o utilizador saiba sempre a opção que está, ou vai seleccionar. Figura 6. Menu Principal, efeito de sobreposição do cursor. Pode o menu ser fechado com um simples toque no botão de menu, permitindo ao utilizador ter um acesso total à zona de vídeo e áudio, não interferindo o menu com as reproduções que poderão estar a ser realizadas. 14

15 5. Planeamento Foi inicialmente elaborado um planeamento de actividades para melhor organização do projecto em termos temporais. O diagrama de Gantt resultante é apresentado no diagrama 5. Diagrama 5. Planeamento de actividades. 15

16 6. Conclusão Este relatório foi realizado com o objectivo de dar a conhecer todo o processo de projecção, implementação e desenvolvimento elaborado na conclusão do projecto multimédia que foi proposto ser realizado. Os vários passos do processo de desenvolvimento são enunciados e descritos de forma clara e simples, nos diferentes pontos do relatório por forma a esclarecer todas as funcionalidades do sistema tal como o seu método de implementação. Os diferentes níveis de prioridade para a implementação de funcionalidades durante o processo de projecção do trabalho (alta, média e baixa), foram desenvolvidos tendo em conta o nível de prioridade definido, sendo implementadas na totalidade todas as funcionalidades propostas como de prioridade alta, com elevado nível de sucesso. As prioridades de nível médio, foram cumpridas, porém a escolha de conteúdos visuais por forma ao utilizador poder personalizar os efeitos visuais da sua preferência, não foi concluído na sua totalidade. O sistema foi preparado para esta funcionalidade mas foi deixada a sua implementação para futuras iterações do projecto. O mesmo acontece com os objectivos de prioridade baixa. Uma vez que os elementos a audiovisuais a serem apresentados são apontados a partir de XML, foi decidido que a possibilidade de um utilizador criar o seu próprio vídeo seria um projecto à parte, integrando o sistema SWF do LoopyTunes neste. Dá-se por concluída a fase inicial do LoopyTunes, um site de reprodução multimédia, com listagens por XML com SWF de fácil integração e alteração. 16