Space Odyssey

Revisão das 03h59min de 15 de Janeiro de 2012

Sobre a aplicação

O nosso grupo de trabalho, dentro das opções indicadas, decidimos optar pelo tema "Museu da Ciência". Dentro deste tema, decidimos optar pelo subtema a origem do Sistema Solar, numa aplicação interativa na qual em 1º lugar o utilizador irá observar como se formou o Sistema Solar a partir da teoria da nébula solar, e de seguida irá poder interagir com a aplicação podendo visualizar os diferentes planetas do Sistema Solar, o Sol e outros astros do nosso sistema.

Eis um rascunho da ideia para a aplicação:

Imagens

Layout's

Mudanças

A nossa aplicação sofreu uma mudança significativa na qual é necessário explicar. A nossa ideia inicial era, como demonstrava a primeira arborescência, criar um genérico inicial na qual saltava automaticamente para o menu, e depois no menu podíamos aceder as informações dos diferentes planetas e astros do Sistema Solar. A mudança é que agora temos um video inicial que demonstra como o Sistema Solar se formou, como a possibilidade do utilizador se não desejar assistir o video na totalidade saltar para o menu, e uma seekbar para avançar no mesmo. E depois em seguida, para além do menu, temos também uma galeria de fotos retirada do site da NASA, e também uma área dedicada aos créditos.

Diário de bordo

4/12 - Idealização e realização do esboço de um tema para o projeto.

6/12 - Idealização de um outro tema para o projeto, neste caso de cinemática, utilizando um trabalhado já realizado.

8/12 - Desistência do tema antigo prosseguindo para o tema idealizado no dia 4/12, o atual tema.

10/12 - Dinamização da página Wiki.

12/12 - Realização da Arborescência.

13/12 - Vetorização de algumas Imagens.

14/12 e 15/12 - Dinamização do aspeto gráfico da aplicação.

19/12 - Melhoramento do aspeto gráfico depois da apresentação ao professor de IDE.

20/12 - Acabamentos finais e entrega da parte de IDE.

03/01 - Divisão de tarefas.

04/01 - Inicio de desenvolvimento da aplicação.

05/01 - Modificação da arborescência da wiki.

09/01 até 13/01 - Desenvolvimento da aplicação mais o relatório descritivo da aplicação.

Grupo

Nuno Costa

Paulo Ruela

Fernando Lindim

Marco Nunes (Membro do grupo da parte de labmm1)

Elena Iglesias Talavero (Membro do grupo da parte de IDE)

Divisão de Tarefas

Idealização do tema - Nuno Costa
Dinamização da Wiki - Nuno Costa
Pesquisa de Referências - Paulo Ruela e Fernando Lindim
Aborescência em formato digital - Fernando Lindim
Design Gráfico - Nuno Costa, Paulo Ruela e Fernando Lindim
Relatório - Nuno Costa e Fernando Lindim
Sonorização - Fernando Lindim
Desenvolvimento da aplicação - Nuno Costa, Paulo Ruela, Fernando Lindim e Marco Nunues

Relatório de Lbmm 1

Apresentação do Projecto

O nosso projeto consiste numa aplicação interativa educativa no âmbito da ciência sobre o Sistema Solar. O utilizador terá acesso a informações sobre os planetas do sistema, sobre o cinturão de asteroides situado entre Marte e Júpiter e sobre a nossa estrela, o Sol.

Será uma aplicação para distribuição off-line como plataforma de suporte um quiosque multimédia.

A nível de paradigma de interação, o nosso projeto possui dois géneros distintos. O paradigma índex na sua essência, com a informação indexada, em balões distintos com a possibilidade de ser acedida através de botões, ícones e menus e também o paradigma tutorial, na área da galeria.

A aplicação é baseada na sincronização temporal, mais especificamente o modelo cast/score/scripting, utilizando uma linguagem de programação (Action Script) para estabelecer a interatividade.

Análise e planeamento

Para a realização deste trabalho, procuramos em primeiro lugar fazer uma pesquisa aprofundada do nosso tema - O Sistema Solar - através da consulta de uma panóplia de aplicações, animações e sites disponíveis na internet.

Após a pesquisa de diversos sites, verificamos que uma das características comuns a todos eles era a representação gráfica, funcional do sistema solar. Observamos e concluímos por conseguinte que os sites em que a imagem do sistema solar era dinâmica cativavam consideravelmente a atenção do utilizador, sendo esse o principal factor da nossa escolha. Verificamos igualmente que uma das desvantagens comum a vários sites correspondia à informação dispersa, o que implica perca de tempo na busca de informação e desorientação do utilizador.

Procurando simplificar o nosso layout por forma a permitir que o utilizador aceda rapidamente e com facilidade à informação que se encontra disponível, optamos por um layout menos robusto; as cores dos planetas destacam-se para despertar a atenção do utilizador, os botões são facilmente visíveis e identificáveis e a informação está organizada de forma intuitiva. O nosso principal objectivo consistiu em optimizar da melhor forma o espaço de uma forma simples e prática, oferecer um fluxo eficiente de informação a quem recorre a este layout, como também aumentar a flexibilidade no que concerne a utilização e compreensão nas várias faixas etárias. No que diz respeito à conceção mais artística do layout, procuramos transmitir a sensação de uma imagem cinematográfica e futurista, quer pela representação dos limites do ecrã, semelhante a uma tela de cinema, quer pelo fundo escuro escolhido para o layout do quiosque multimédia.

Desenho Funcional

Requisitos Funcionais

A aplicação irá iniciar com um vídeo introdutório ao nosso tema, o Sistema Solar. Este vídeo é da autoria Discovery Communications, retirada do YouTube. Esta parte da aplicação terá o próprio som do vídeo. Este tipo de player para além dos habituais pause/play também irá ter um botão de skip, na qual o utilizador poderá saltar está parte introdutória diretamente para o menu, e também uma seekbar, em caso de saltar para uma parte específica do vídeo.

Cada planeta para além da informação detalhada, irá ter uma pequena calculadora na qual o utilizador a partir do seu peso normal (peso registado no planeta Terra) poderá saber o seu peso se estivesse no planeta. Este cálculo é realizado através destes valores:

• Mercurio - 0.376

• Vênus - 0.903

• Terra - 1

• Marte - 0.38

• Júpiter - 2.34

• Saturno - 1.16

• Urano - 1.15

• Neptuno - 1.19

Por exemplo, uma pessoa com um peso de 60kg, se estivesse em Marte, teria um peso de 22.8Kg (60 x 0.38).

Na área da Galeria, o utilizador poderá visualizar as fotos em thumbview, e de seguida ao clicar na foto irá visualizar a foto expandida, com a possibilidade de saltar para a foto seguinte, seguindo uma disposição utilizada nos paradigmas de interação tutorial. Para além dessa possibilidade, o utilizador também poderá visualizar as fotos em slideshow.

Estrutura arborescente

A aplicação possui uma estrutura arborescente do tipo hierárquica não linear, como demostra a ilustração 1. O utilizador pode navegar entre os níveis da estrutura e navegar o 2º nível da estrutura sem restrições.

Como referido anteriormente, a aplicação começa com um vídeo inicial e passa automaticamente (no fim do vídeo) ou através de um botão (skip) para o Menu.

Uma vez no Menu, o utilizador terá acesso a informação de cada planeta, o cinturão de asteroides e o Sol, e poderá aceder as áreas da Galeria, aos Créditos e ao vídeo inicial. Tanto na Galeria como nos Créditos, é possível aceder ao Menu ou entre eles, e também ao vídeo inicial. Isto deve-se ao fato da existência de uma barra inferior que estará presente em todas as áreas, em exceção do vídeo inicial.

Na galeria, é possível aceder todas as fotos, mas uma vez a foto expandida só é possível prosseguir para a seguinte e a anterior.

Desenho de interação e usabilidade

A nível de usabilidade, a aplicação possui uma organização lógica dos elementos interativos. Isto proporciona uma interação mais acessível ao utilizador. Ainda dentro da usabilidade, podemos realçar que ainda tivemos cuidado em não fugir ao princípio de simplicidade, “simplicidade nas tarefas, nos procedimentos, no acesso a conteúdos e na linguagem utilizada pela aplicação para comunicar com o utilizador” (Amaro, Ana Carla 2012). Também tivemos cuidado com o princípio de visibilidade, que consiste em não sobrecarregar o utilizador com informação desnecessária.

Desenho Técnico

A nossa aplicação possui um estilo de interação muito comum atualmente, na qual também era o mais apropriado para um quiosque multimédia, o estilo da manipulação e navegação.

Como todas as aplicações de manipulação e navegação, a aplicação têm como base a utilização de janelas, menus e ícones mediante a ações definidas por action script.

As janelas foi uma forma de dividir a informação, ou seja, existe uma janela associada a cada tipo informação sobre os astros do sistema solar. Um menu onde utilizador terá a oportunidade de selecionar qual das informações deseja aceder. E ícones, que na nossa aplicação são mais utilizados para navegar ou para realizar uma ação, como por exemplo um mute no som da aplicação, ou um simples fechar para retroceder ao menu inicial.

Produção do Projeto

Estrutura e meios de navegação/interação

A estrutura da aplicação é composta por 4 cenas, a cena inicial que contem o vídeo, em que é possível fazer um “skip” para acena principal, o Menu, em que se desenrola quase toda a interação da aplicação, é desta cena que podemos retroceder novamente para o vídeo inicial e nos é permitida a navegação para todas as outras opções incluídas na animação. A terceira cena com o nome Galeria, onde nos é permitido visualizar algumas imagens, tendo também a opção de visualização tipo slideshow. Por último temos a cena dos Créditos, onde é possível obter a informação dos elementos que desenvolveram esta aplicação.

A interação entre as diversas cenas é feita por meio de botões colocados no menu, em que nos permite em qualquer altura a escolha e navegação pela aplicação.

Integração e controlo do som

Para o controlo de som foi criado um ícone no canto inferior direito da aplicação, que esta sempre presente ao longo de toda a navegação. Esse ícone, quando clicado, procede ao corte de som e posteriormente a sua continuação.

Para os botões de seleção dos planetas e para a sua animação (aparecimento e recolha dos menus), foi criado através da aplicação de edição de som Logic, com recurso a instrumentos virtuais, vários sons e consequente mistura entre os mesmos.

Para som de fundo foi escolhida uma música com particularidades mais espaciais, a fim de dar enfase ao tema da aplicação.

O nome do tema escolhido é Dance Of The Loomi retirado do album Arborescence do grupo Ozric Tentacles.

Animação

Nas aplicações foram desenvolvidas varias animações a fim de dar a dinâmica e efeito visual pretendido. Foram desenvolvidas animações para os menus dos planetas e do balão dos créditos finais, em que ha a recolha e aparecimento dos mesmos, essas animações foram desenvolvidas com o recurso a Motion Tween. No Menu existe também uma animação do sistema solar em que é constituída por 10 movie clips. A sua estrutura é descrita no tópico das soluções técnicas.

Solução técnicas adotadas para a resolução de problemas

Vídeo Inicial:

Para a realização da programação do player do vídeo, era necessário ter controlo sobre a reprodução, para isso utilizamos um único botão que alternava a aparência e função consoante o estado atual de reprodução. Para tal, foi criado um movieclip, com quatro frames, quando o utilizador clica no movieclip, ele lê o estado onde se encontra a frame atual e alterna para a frame correspondente para a qual foi desejada, tendo assim diferentes estados em um único botão, utilizando o gotoAndStop chamada por onRelease do botão. Dentro da função criada ele tem uma condicionante que faz ler a frame atual do movieclip do botão e alterna a sua posição na frame correspondente, e ao mesmo tempo, troca também o símbolo, com outro botão no seu interior que controla inversamente a reprodução.

O mesmo acontece com o botão de som, ao ser clicado muda de frame dentro do movieclip e troca o botão lá dentro inserido, tendo a função de onRelease, a capacidade de mudar o volume, caso o botão seja para deligar, tornar o volume a 0, caso seja para voltar a ter som, o volume passa para 100%.

A seek bar, é utilizado uma função onde ele guarda numa variável a dimensão da barra, e também a posição relativa de um botão de seek quanto a essa barra. Para isso são criadas 2 variáveis, onde uma delas guarda o valor em percentagem da barra e outra variável com a posição, também em percentagem do botão de seek. Outra função é encarregue de ler o valor da variável da dimensão da barra e da posição do seek, de seguida ele compara valores entre as variáveis e controla o tempo do vídeo de acordo também com o mesmo princípio de percentagem, tendo assim a possibilidade de, qualquer que seja o vídeo colocado para reprodução, ele irá sempre ter precisão de controlo e mover a reprodução para o tempo desejado ao arrastar o seek.

Na seek bar, é utilizado um ficheiro externo que lhe permite criar a classe de funções acopladas para o efeito e assim poder ser reutilizada para outros fins, sejam eles dentro da mesma cena, cenas diferentes, ou até mesmo aplicações independentes. Os botões em questão, não foi utilizado ficheiros externos nem classes visto serem elementos que controlam unicamente o objeto em questão, por isso foram programados dentro da timeline.

Calculadora:

Na calculadora foram feitos os vários botões com os números, visto a aplicação ser para quiosques multimédia, a probabilidade de não haver teclado é alta, por isso foi criado.

Cada botão tem a programação necessária para introduzir numa caixa de texto dinâmico one acrescenta os números correspondentes que são clicados, por seu lado a caixa de texto tem incorporado uma variável onde esse número final é guardado.

O botão de “igual” faz com que o número que se encontra na caixa de texto com variável de input seja multiplicado pelo número correspondente ao índice de massa e retorna o valor numa outra caixa de texto dinâmica que mostra então o cálculo do peso nesse determinado planeta.

Existe um botão de reset (“C”) que retorna ambas as variáveis a 0 para se poder calcular um outro valor.

Sistema Solar:

O sistema solar é constituído por 10 movie clips individuais, 9 dinâmicos e um estático o sol. Os 9 dinâmicos são os 8 planetas do sistema solar mais o cinturão de asteroides. Cada um desses movie clips possui um movimento de rotação próprio calculado aproximadamente a partir da orbita real do mesmo. A Terra possui demora 1 ano a completar uma volta ao Sol, nele foi introduzido um valor padrão (2) na qual a partir desse irão ser baseados os restantes. Mercúrio por exemplo demora 0.24 anos, o que é aproximadamente 1/4 de tempo que demora a Terra, então a sua velocidade de rotação é por sua vez é 4x superior ao da Terra, então 2x4=8, então Mercúrio possui o valor de 8.

 O comando que faz estes movie clips rodar é o seguinte:

 

 onClipEvent (enterFrame) {

    this._rotation += 8;

 }

 // 8 por se tratar do Movie clip de Mercurio.

O valor de rotação de cada um é seguido por esta tabela:

• Mercúrio 8
• Vênus 5.84
• Terra 2
• Marte 1.88
• C.Asteroides 0.5
• Júpiter 2
• Saturno* 0.8
• Urano* 0.6
• Neptuno* 0.3

Os Valores de Saturno, Urano e Neptuno não seguem o modo de calcular anteriormente explicado, pois se mantivéssemos esse calculo, estes planetas não teriam muito movimento de rotação, e a nível estético não seria muito agradável para o utilizador, especialmente para o ultimo planeta.

A janela do Menu, possui 9 botões, na qual reproduz uma "Label" (ou frame name) localizada no stage. Nestas diferentes labels estão localizadas os diferentes símbolos gráficos de cada astro do sistema solar. E uma vez dentro da Label do planeta, é possível regressar a janela do Menu, através do botão fechar.

 Este acesso é feito pela simples linha de código:
 

 on (release){

    gotoAndPlay("Neptuno");

 }

 // Cada planeta possui o seu Label

 

 Botão fechar:

 on(release) {

    gotoAndPlay("sol_fechar");

 }

 // Reproduz uma Label que possui uma animação de "recolha" da janela

 +

 gotoAndPlay("Menu");

 // Localizada +/- a meio da Label, o que é representada por uma animação de abrir a Janela do Menu.

Galeria:

Na galeria grande parte da animação foi colocada directamente na time line com o controlo de visualização individual das fotos em botões dedicados onde as actions são combinadas entre os comandos de cada botão, de cada frame na layer das accções da timeline e com as labels das frames onde se inicia uma animação.

 exmplo:

 

 linha de código associado a um botão:

 on(release) {

    play();

 }

 

 linha de código associado à frame:

 gotoAndStop("inicio");

 

Para efeitos de visualização e definição gráfica tambem foram usados movieclip para transição entre fotos.
Ao navegar na galeria o utilizador terá a cada momento a opção de ver uma apresentação das fotos, de forma automática, onde poderá controlar o fluxo do fotorama e sair do mesmo, voltando à posição anterior da navegação na galeria. A galeria roda em movieclip e tambem aqui foram criadas as animações de transição ao longo da timeline de forma ciclica.

Conclusões

Reflexão crítica

Foram encontradas algumas dificuldades, apesar de alguns elementos do grupo já estarem um pouco mais confortáveis no que diz respeito a programação com Flash e seu manuseamento, para a maioria dos envolvidos este projeto foi uma constante linha de aprendizagem e progressão. Os maiores constrangimentos estiveram relacionados com a gestão de tempo e trabalho entre todos os elementos, visto que são todos trabalhadores e estudantes e por vezes foi bastante complicado a delegação de tarefas.

Tendo a consciência de que muito mais trabalho, e de melhor qualidade poderia ter sido feito, julgamos ter atingido os objetivos e os propósitos deste projeto.

Julgamos ter seguido e alcançado os objetivos propostos no guião deste projeto.

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

Um dos aspetos que desde o princípio queríamos adotar no nosso projeto era o Sistema Solar também ele ser formando por botões, ou seja, para além dos botões da janela do menu, queríamos que o utilizador pudesse aceder a informação através do próprio Sistema Solar.

Mas isso não foi realizado pois não encontramos o código necessário para que os botões fizessem o movimento de rotação, e também achamos que não seria o ideal uma plataforma como a do quiosque multimédia.

Referências Web

Imagens para a aplicação:

[Nasa]

Vídeo para a aplicação:

[YouTube]

Informação dos Planetas:

[Wikipedia]

Outros sites:

[Neography]

[Kids Astronomy]

[Dynamic Diagrams]