FantasticFour

Revisão das 04h12min de 15 de Janeiro de 2013

Elementos do grupo

Carlos Silva | 68160

Diogo Barros | 68459

João Campos | 69966

Rúben Lima | 66197

Memória Descritiva

Plataforma de suporte: World Wide Web

Forma de distribuição: Online

Paradigma de interação: Tutorial e ambiente

Descrição do projeto(inicial): O projecto baseia-se na criação de um website flash de distribuição online relacionado no universo das bandas desenhadas, mais precisamente, na editora Marvel. Pretendemos explorar o contexto histórico em que foi criada, a bibliografia dos seus criador e o processo criativo em si. Isto através de um conjunto de animações e interatividade com diversos elementos, implementados num interface simples e criativo.

Temos em vista o desenvolvimento de uma cena inicial constituída por uma mesa com diversos comics, dando ao utilizador a oportunidade de navegar entre eles. Cada comic será constituído por animações, sendo um deles mais complexo(será dado o acesso a elementos diversos através do click do rato em diversas áreas ou do controlo de uma personagem). Estes elementos estão organizadas sobre a forma de vinhetas, inicialmente estáticas, animadas quando se realiza uma acção.

Descrição do projeto(final): O resultado final encontra-se muito bem enquadrado com o inicial, no entanto reduzimos o objecto de estudo, continuando com o tema das bandas desenhadas da Marvel, limitamo-nos a reduzir a esse universo a apenas uma colecção, denominada de "Marvels". Esta colecção por si só já contém, na sua história, fundamentos base relacionados com a evolução desta empresa (Kurt Busiek encarregue do argumento), explorando, de uma forma clássica e foto-realista (Alex Ross), o aparecimento dos heróis, a sua difusão com o mundo real e a sua importância num período pós-guerra e de recuperação de traumas.

O paradigma de interacção será ambiente e mantém-se a ideia da mesa, no entanto ela será constituída pela colecção "Marvels", por um botão burnout (permitirá a orgaanização do interface), um comic com elementos interactivos e uma clássica colectânea de cromos.

Distribuição de Tarefas

Carlos Silva | Desenho de elementos gráficos, programação de elementos interactivos.

Diogo Barros | Organização de elementos gráficos e animações. Estudo sonoro (13/12/2012)

João Campos | Guião do projecto, layout, recursos web.

Rúben Lima | Organização de elementos gráficos e animações. Estudo sonoro (13/12/2012)

Planeamento (13/12/2012)

Estado da arte - Sites consultados:

http://the-desk.nalindesign.com/ - Apoio à metáfora/conceito da disposição de objetos num espaço, organização através de drag&drop.

http://comicstore.marvel.com/ - Baseamo-nos no estilo interativo existente na visualização dos webcomics presentes neste site.

http://www.youtube.com/watch?v=felys-u4nfk - apoio à criação artística (16/12/2012)

http://www.youtube.com/watch?v=OEjUoSqrdOA - apoio à criação artística (16/12/2012)

Arborescência hierárquica não-linear (inicial)

Arborescência hierárquica não-linear (Final)

Progressos

Primeira Capa temporário/Primeira Capa final

Estudos da interface

Iniciais

Final(4/01/2013)

Relatório

Apresentação do projeto (apresentação e caracterização do produto multimédia)

Este projecto baseia-se na criação de um website flash de distribuição online relacionado com o universo das bandas desenhadas, mais precisamente, da editora Marvel e parte do princípio que toda a interacção se deve realizar de forma intuitiva, isto é, a acção humana já está programada a trabalhar com determinado objecto de determinada forma pelo tanto foi procurada ao máximo esta aproximação com a realidade da interacção. Porém, centramo-nos apenas numa colecção desta editora, a colecção “Marvels”. Deste modo pretendemos explorar o contexto da colecção, a bibliografia dos autores e as personagens principais. Isto através de um conjunto de animações e da interactividade com diversos elementos, implementados num interface simples e apelativo. A sua plataforma de suporte será a World Wide Web, sendo assim distribuível online. A principal e inicial cena do projecto multimédia é constituída por uma mesa com uma pilha de livros de banda desenhada e outra isolada, ambos os elementos interactivos, dando ao utilizador a oportunidade de navegar entre eles. Também será exposto um pergaminho enrolado no canto da mesa que possui uma breve apresentação das personagens cruciais da colecção, em forma de placard com cromos interactivos, tendo sido a ideia da caderneta abandonada, dando assim, do ponto de vista artístico, um ar mais clássico. Cada livro de banda desenhada será constituído por animações.Quando os conteúdos escolhidos estão abertos sobre a mesa, se o utilzador escolher outro conteúdo, estes vão ficar sobrepostos sobre os anteriores, logo existirá um botão para limpar o contéudo espalhado na mesa com o sentido de organizar a mesma (organizar o interface), em forma de chama (burnout). Como se procura que o utilizador descubra por si as funcionalidades da aplicação esta trata-se de uma aplicação ambiente, mas também tutorial, no sentindo em que para chegar a determinado fim é necessário, primeiro, realizar determinadas acções.

Análise e planeamento (investigação temática, estado da arte, definição do conceito…)

No início do planeamento deste projecto tivemos a ideia de elaborar uma aplicação baseada em movimentos corporais, através do uso do kinect. Esta ideia foi abandonada dado ao grau de complexidade da mesma e do tempo disponibilizado. Partimos então para outro conceito distinto, fazer uma aplicação baseada num tipo de interacção point-and-click, uma aventura gráfica, uma ideia da qual desistimos também. Chegando a um consenso definimos a versão final do projecto, definimos o nosso universo principal, o da banda desenhada. Assim, fariamos uma aplicação numa mesa interactiva dedicada à história da Marvel e às suas colecções principais, autores e super-heróis. Na mesa estariam dispersos vários livros de banda desenhada, cada um animado e interactivo, possuindo informações sobre um determinado assunto. Estes livros também poderiam ser arrastados pela mesa, dando uma maior liberdade ao utilizador com o sentido de este se sentir o mais à vontade possível e com vista a não separar muito a realidade da aplicação multimédia. Alguns destes elementos foram eliminados, no entanto mantivemos a ideia da mesa e reduzimos o universo em estudo. Ele é constituído apenas pela colecção "Marvels", por um botão burnout (permite a organização do interface), uma banda desenhada com elementos interactivos e uma clássica colectânea de cromos. Dado o tema apresentado ser muito centrado no universo da banda desenhada, a arte que o compõe associa-se também com o mesmo. Deste modo, baseamo-nos no estilo característico da banda desenhada da Marvel juntamente com outros métodos como o drag and drop ou a visualização de comics e magazines em diversos sites.

• Exemplos:
  • http://comicstore.marvel.com/;
  • http://issuu.com/;
  • http://the-desk.nalindesign.com/;
  • http://colorschemedesigner.com/;
  • http://www.youtube.com/watch?v=felys-u4nfk - apoio à criação artística ;
  • http://www.youtube.com/watch?v=OEjUoSqrdOA- apoio à criação artística.

Ou videojogos é o caso do menu principal de “Medal of Honor: Allied Assault”, “Metro 2033”, “Mafia, ou “Dirt 2”. Para a elaboração dos diversos conceitos gráficos, incluindo a cor e fonte tipográfica, procuramos analisar o seu uso dentro da própria colecção e adequá-los às nossas capacidades. Alex Ross, o artista responsável pelo fotorrealismo presente nas bandas desenhadas, usava bastantes tons de azul e vermelho e após uma análise aprofundada chegamos à conclusão que são complementares.

Desenho funcional

Requisitos funcionais (descrição das funcionalidades da aplicação…)

A aplicação, como foi dito anteriormente , baseia-se na vista superior de uma mesa ou secretária de leitura. Deste modo possui vários objectos que são interactivos. Estão expostos objectos como pilhas de livros de banda desenhada, duas neste caso, uma caneta, um pergaminho, e um outro botão dedicado à limpeza da mesa (pequeno símbolo em forma de chama). O utilizador pode recorrer à passagem do rato sobre os objectos sobre a mesa para se aperceber se estes mesmos objectos tem uma animação ou não, podendo mesmo clicar neles. Esta forma de disposição das animações dão uma liberdade ao utilizador de explorar o espaço de uma forma mais descontraída, escolhendo o objecto de acordo com a sua preferência. No caso da passagem do rato sobre os objectos, os únicos possuidores de animações são a primeira pilha de comics, a caneta e o símbolo em forma de chama. Se o utilizador quiser clicar sobre a primeira pilha de comics terá uma breve informação sobre os autores da colecção “Marvels” e também o contacto e informação dos autores da aplicação multimédia. Ao clicar sobre a pilha de comics, o utilizador tem ao seu dispor a técnica “drag and drop” , podendo arrastar os vários comics pela mesa, dando assim ainda mais liberdade, com sentido de entertenimento , ao utilizador. Estes comics encontram-se “bloqueados “ ao utilizador, ou seja, para conseguir ler o seu conteúdo terá de os comprar. Apenas um destes comics contém uma breve parte da história em banda desenhada, estando o resto também bloqueado como referido anteriormente. Caso o utilizador pretenda clicar no pergaminho, este mesmo desenrola-se mostrando uma síntese das principais personagens da coleção “Marvels”. No entanto, o objecto da caneta só possui uma animação na passagem do rato, informando os utilizadores como devem proceder através da aplicação, para melhor utilização da mesma. O pequeno símbolo em forma de chama é muito útil pois evita a sobreposição dos elementos, ou seja, caso o utlizador escolha ler a informação dos autores , e de seguida ler parte de uma comic, estes elementos vão ficar sobrepostas, dando assim um ar mais desorganizado à mesa, por isso mesmo criamos o botão da chama para “queimar “ os elementos anteriormente seleccionados. Existe também uma secção à parte da mesa para o controlo do volume do som, podendo mesmo desliga-lo por completo.

1. Banda desenhada com informação acerca dos autores da colecção da aplicação
2. Pilha de bandas desenhadas
3. Caneta
4. Símbolo em forma de chama(burnout)
5. Pergaminho
6. Controlo do som e volume

Estrutura arborescente (apresentação e descrição da arborescência)

A estrutura arborescente desta aplicação trata-se de uma arborescência hierárquica não-linear. O utilizador pode navegar entre os níveis da estrutura e entre itens do mesmo nível da estrutura, sem restrições.

Desenho de interação e usabilidade (princípios de interação e usabilidade considerados no desenho da estrutura, percursos e meios de navegação)

Procurando que o utilizador se sinta emergido na aplicação decidimos optar por meios de navegação aos quais já estivesse habituado, o que contribui para uma rápida compreensão do funcionamento da aplicação, isto é, o arrastar, o virar das páginas e não só. Pistas visuais em determinados botões são oferecidas, evitando o erro e contribuindo para a dinâmica da interacção. A organização destas pistas e dos elementos da aplicação simulam uma mesa com determinado material passivo de acção, de ser manuseado.

• Usabilidade. Princípios do desenho de interação e interfaces
  • Princípio: conhecer o utilizador
    • A nossa aplicação multimédia destina-se a um grupo específico de utilizadores, especialmente fãs de banda desenhada, ou alguém que esteja particularmente interessado nesta colecção da Marvel. Através desta damos acesso a vários conteúdos , todos relacionados com a colecção “Marvels”; assim sendo, todo o aspecto visual está directamente relacionado com o mundo da banda desenhada e dos super-heróis. Disponibilizamos toda a informação em menos de 3 cliques, não permitindo assim ao utilizador perder-se noutros aspectos e desenvolver uma interacção mais rápida, confortável e graficamente atractiva.

• Usabilidade. Princípios do desenho de interação e interfaces
  • Princípio: estrutura e orientação

The best journey is the one with fewest steps. Shorten the distance between the user and the goal. (Tognazzini, 1991)

• • • Dispomos também de uma interface bastante organizada, dentro da sua metáfora, que juntamente com a simplicidade da aplicação proporciona ao utilizador uma melhor experiência de navegação. Como a navegação se efectua sempre no mesmo interface, a visiblilidade para aceder a outros conteúdos não se altera, havendo mesmo um botão para limpar todos os elementos anteriormente seleccionados.

Tudo funciona de forma intuitiva e é impossível que o utilizador não memorize os caminhos que pode optar, caso existam dúvidas existe uma funcionalidade de auxílio que situa num botão representado por uma caneta. Os elementos passíveis de interacção e que permitem a interacção são identificáveis através do uso de animações ou da mudança automática do ícone do rato. Caso exista a sensação de desorganização sempre é possível reposicionar os objectos na sua posição original graças à funcionalidade burnout.

• Usabilidade. Princípios do desenho de interação e interfaces
  • Princípio: simplicidade
    • Todos os elementos existentes possuem informação relevante e não existem de forma excessiva, apenas os necessários à aplicação e à sua funcionalidade. (máxima KISS)

Foi também procurado uma limitação no uso da escrita para comunicar com o utilizador, parte-se do princípio que o utilizador automaticamente saberá o que fazer tendo em conta as noções adquiridas com a interacção dos objectos no quotidiano.

• Usabilidade. Princípios do desenho de interação e interfaces
  • Princípio: visibilidade
    • O design gráfico facilmente permite saber o que fazer e torna visíveis todas as acções a realizar, não sendo o utilizador sobrecarregado com alternativas.

• Usabilidade. Princípios do desenho de interação e interfaces
  • Princípio: feeback
    • Visto que se trata de uma aplicação multimédia de distribuição online, vai necessitar de uma barra de carregamento ou loading screen, dando ao utilizador um feedback visual, elemento que sinaliza um período de espera. Para o seu desenvolvimento decidimos implementar elementos visuais relacionados com o tema, uma curta introdução de 4 vinhetas (prólogo ao paradigma e metáfora de interacção).

Exemplos de feedback sonoro são inexistentes, mas existem mais de feedback visual, é o caso dos controlos de som.

• Usabilidade. Princípios do desenho de interação e interfaces
  • Princípio: tolerância
    • A realização de algumas acções é previsível através de animações e dentro destas existe uma, o burnout que reverte acções e organiza o espaço interactivo. Nesta aplicação não existe comunicação homem-máquina através de input de texto, é tudo realizado através do uso de um simples rato de computador.

Em casos como o controlo de som, a barra de volume desaparece sempre que este está apagado.

• Usabilidade. Princípios do desenho de interação e interfaces
  • Princípio: consistência
    • Os comportamentos existentes na aplicação são consistentes, já que se explorou um tipo de interacção que não se separasse muito da realidade e da forma como interactuamos com objectos do quotidiano, isto permite que as o sistema esteja de acordo com as expectativas do utilizador.

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

Para operacionalizar os aspectos funcionais apenas é necessário um rato, os outros são evidentemente necessários, que é o caso de um monitor e um computador.

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

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

Barra de carregamento- esta barra permite carregar todos os conteúdos multimédia antes de prosseguir para a aplicação. Quando todos os elementos estiverem carregados, e após visualizar as animações iniciais, desbloqueia-se o botão “next” que salta para a seguinte frame onde se situa a mesa com os seus elementos.

Pilha de bandas desenhadas- Consiste num símbolo do tipo movieclip e num botão, o botão torna o movieclip visível e desenrola-se a animação. A criação de diverso símbolo movieclips deve-se ao facto de que cada um deles é composto por uma imagem bitmap e como tal necessita de um código para as suaviza evitando assim fenómenos de pixelização, o que corresponde a um severo erro gráfico. O código é o seguinte :

• Timebased (colocado na cena inicial e adequado a todas as imagens):
  • mc.loadMovie("issue_judgemnet_day_2.jpg");

• UserBased(colocado no movieclip):
  • onClipEvent(load){
  • forceSmoothing = true;
  • }

Nessa mesma pilha existem outros movieclips que correspondem a cada banda desenhada individual, os quais é possível arrastar:

• ao deixar pressionado o botão do rato sobre movieclip este é colocado no top de todos os livros e pode-se arrastar numa determinada área tendo em conta a sua origem
  • on(press){
    • this.swapDepths(999);
    • startDrag(this, false, -300, 5, 525, 325);
  • }

• ao largar o botão do rato o movieclip deixa de ser arrastado e permanece na posição onde foi deixado, é também reproduzido um som
  • on(release){
    • stopDrag();
    • _root.drop_sound.start();
  • }

• serve para evitar erros associados a este tipo de interacção
  • on(releaseOutside){
    • stopDrag();
  • }

Rolo de cromos- ao carregar nos cromos, que partem do mesmo princípio que a pilha de livro (ler detalhes referidos no ponto anterior), accionamos outro movieclip onde, posicionados na última frame estão dispostos outros, que correspondem aos super heróis e às suas características, também existem 2 botões, com um símbolo up e um símbolo over, que permitem a navegação dentro do rolo. Tudo isto foi conseguido através de códigos de alteração da visibilidade:

• Assim:
  • on(rollOver){
    • this._visible=true;
  • }
  • on(rollOut){
    • this._visible=false;

} Banda desenhada do stan lee- Este foi o objecto mais complicado a desenvolver, este permite visualizar e ler uma banda desenha interactiva desenvolvida por nós. A sua estrutura e o seu código foram desenvolvidos a partir de outro encontrado num fórum que entretanto não conseguimos localizar outra vez. Chama (ferramenta burnout)- a sua funcionalidade consiste em reorganizar todos os elementos e posiciona-los de acordo com a cena inicial. Isto foi conseguido também através de códigos de visibilidade. Caneta- Na realidade a caneta não funciona, o único que a torna interactiva é um botão invisível que foi colocado por cima da mesma. Na sua posição de over aparece a mensagem.

Banda desenhada da colecção- esta banda desenhada para além de se conseguir arrastar também pode ser lida, para isso basta coloca-la por cima da caneta. Isto vai tornar o livro interactivo visível e a cabeça de leitura irá até à frame onde se situam as páginas principais desta banda desenhada.

• Deste modo:
  • on(release){
    • stopDrag();
    • _root.drop_sound.start();
    • if (this.hitTest(_root.inv_info)) {
      • _root.book._visible=true;
      • _root.book.rightpage.gotoAndStop(12);
      • _root.book.leftpage.gotoAndStop(11);
  • }
  • if (!this.hitTest(_root.inv_info)) {
    • _root.book._visible=false;
    • _root.book.rightpage.gotoAndStop(12);
    • _root.book.leftpage.gotoAndStop(11);
  • }
• }

• Zoom in e zoom out- através da roda do rato é possível fazer um zoom in e zoom out das bandas desenhadas legíveis, é este o código correspondente:
  • var mouseListener:Object = new Object();
  • mouseListener.onMouseWheel = function(delta) {
    • if (delta > 0) {
      • book._xscale = book._xscale + 10;
      • book._yscale = book._yscale + 10;
      • book._x=book._x - 40;
      • book._y=book._y - 25;
    • if (book._xscale >= 240) {
      • book._xscale = book._xscale - 10;
      • book._yscale = book._yscale - 10;
      • book._x=book._x + 40;
      • book._y=book._y + 25;
    • }
  • }
    • if (delta < 0) {
      • book._xscale = book._xscale - 10;
      • book._yscale = book._yscale - 10;
      • book._x=book._x + 40;
      • book._y=book._y + 25;
    • if (book._xscale <= 100) {
      • book._xscale = book._xscale + 10;
      • book._yscale = book._yscale + 10;
      • book._x=book._x - 40;
      • book._y=book._y - 25;
    • }
  • }
• }
• Mouse.addListener(mouseListener);

Integração e controlo de som

Animação

Soluções técnicas adoptadas para a resolução de problemas (problemas encontrados durante o desenvolvimento do projeto e soluções técnicas adotadas na sua resolução)

Conclusões

Reflexão crítica

Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projeto (no âmbito dos conteúdos programáticos da unidade curricular)

Referências Web e Bibliográficas

Anexos