FantasticFour

Edição actual desde as 19h40min de 16 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.|Realização do relatório(13/1/2013)|

Diogo Barros | Organização de elementos gráficos e animações. Estudo sonoro (13/12/2012)|Realização do relatório(13/1/2013)|

João Campos | Guião do projecto, layout, recursos web.|Desenvolvimento do loading|(03/01/2013)|

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

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)

Problemas

• 05/01/2013- Não se conseguem suavizar as imagens bitmap|Resolvido(7/01/2013);
• 10/01/2013- Problemas na realização do page flipping e incorporação de duas bandas desenhadas no mesmo.|Resolvido(11/01/2013);
• 12/01/2013- Problemas na incorporação sonora.|Resolvido(13/01/2013);

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 projeto 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 interação se deve realizar de forma intuitiva, isto é, a açã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 interação. Porém, centramo-nos apenas numa coleção desta editora, a coleção “Marvels”. Deste modo pretendemos explorar o contexto da coleção, a bibliografia dos autores e as personagens principais. Isto através de um conjunto de animações e da interatividade 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 projeto multimédia é constituída por uma mesa com uma pilha de livros de banda desenhada e outra isolada, ambos os elementos interativos, 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 coleção, em forma de placard com cromos interativos, 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 utilizador escolher outro conteúdo, estes vão ficar sobrepostos sobre os anteriores, logo existirá um botão para limpar o conteúdo 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 ações.

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

No início do planeamento deste projeto 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 interaçã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 projeto, definimos o nosso universo principal, o da banda desenhada. Assim, faríamos uma aplicação numa mesa interativa dedicada à história da Marvel e às suas coleções principais, autores e super-heróis. Na mesa estariam dispersos vários livros de banda desenhada, cada um animado e interativo, 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 coleção "Marvels", por um botão burnout (permite a organização do interface), uma banda desenhada com elementos interativos 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, baseamos-nos no estilo característico da banda desenhada da Marvel e na visualização de bandas desenhadas 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 coleçã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.

A fonte, ou o tipo de letra utilizado foi o "Comic Book Commando Bold" (encontrada no website: www.dafont.com; ver anexos);

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 objetos que são interativos. Estão expostos objetos 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 objetos sobre a mesa para se aperceber se estes mesmos objetos 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. Se o utilizador quiser clicar sobre a primeira pilha de bd's terá uma breve informação sobre os autores da coleçã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 vai poder arrastar as várias bandas desenhadas pela mesa, dando assim ainda mais liberdade ao utilizador e uma maior identificação com a realidade. Estes bd's encontram-se “bloqueados“ ao utilizador, ou seja, para conseguir ler o seu conteúdo terá de os comprar. De entre eles apenas um 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 utilizador escolha ler a informação dos autores , e de seguida ler parte de uma banda desenhada os elementos vão ficar sobrepostos, dando assim um ar mais desorganizado à mesa, por isso mesmo criamos o botão da chama para “queimar “ os elementos anteriormente selecionados. Existe também uma secção à parte da mesa para o controlo do volume do som, podendo mesmo desligá-lo por completo.

1. Banda desenhada com informação acerca dos autores da coleçã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 interação. A organização destas pistas e dos elementos da aplicação simulam uma mesa com determinado material passivo de açã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 coleção da Marvel. Através desta damos acesso a vários conteúdos , todos relacionados com a coleção “Marvels”; assim sendo, todo o aspecto visual está diretamente 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 interação mais rápida, confortável e graficamente atrativa.

• 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 efetua sempre no mesmo interface, a visibilidade para aceder a outros conteúdos não se altera, havendo mesmo um botão para limpar todos os elementos anteriormente selecionados.

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 interação e que permitem a interaçã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 objetos 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 interação dos objetos 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 ações a realizar, não sendo o utilizador sobrecarregado com alternativas.

• Usabilidade. Princípios do desenho de interação e interfaces
  • Princípio: feedback
    • 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 interaçã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 ações é previsível através de animações e dentro destas existe uma, o burnout que reverte ações e organiza o espaço interativo. 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 interação que não se separasse muito da realidade e da forma como interatuamos com objetos 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 diversos símbolos do tipo movieclip deve-se ao facto de que cada um deles é composto por uma imagem bitmap e como tal necessita de um código para as suavizar 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 interação
  • on(releaseOutside){
    • stopDrag();
  • }

• Pergaminho - ao carregar no pergaminho, que parte do mesmo princípio que a pilha de livros (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 interativa 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 interativa é um botão invisível que foi colocado por cima da mesma. Na sua posição de over aparece a mensagem.

• Banda desenhada da coleçã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

Na aplicação é possível controlar o som, para isso existe uma barra de volume, que no entanto não baixa o som até o eu valor mínimo, isto é, zero, para isso existe um botão para remover o som Para além da música de fundo também existem sons associados a cada animação, botão e movieclip.

Animação

Barra de carregamento – Como elemento essencial esta é composta por um movieclip programado para o seu tamanho aumentar de acordo com o valor de bytes descarregados. Enquanto a barra está a carregar é possível visualizar uma pequena introdução animada onde aparecem e desaparecem umas vinhetas com um efeito de fade in e fade out, respectivamente, conseguido através de classic tweens e o valor de transparência (alpha) adequado;

Banda desenhada do Stan Lee- Passando o ponteiro do rato por cima é desencadeada uma animação onde, com o uso de máscaras, aparecerem determinados elementos, permanecendo alguns estáticos e outros não;

Ferramenta burnout- possui uma animação bastante simples conseguida através do uso de classictweens;

Pergaminho- Para animar este rolo foram usados vários símbolos distintos e, portanto, para além de possuir animação frame-a-frame também possui animação key-framing;

Livros a espalhar na mesa- Esta animação é básica e conseguiu-se através de animação key-framing;

Livros a queimar - animação efetuada frame-a-frame;

Passagem das páginas-Animação realizada através da programação;

Cada banda desenhada é composta por uma animação key-framing onde são revelados dados sobre a mesma.

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

Começando pela primeira cena, onde se efetua o carregamento, tínhamos em mente que aparecesse o tocha humana a voar sobre a barra de carregamento enquanto se descarregava informação, no entanto optamos por não o realizar porque chegamos à conclusão que num ecrã de loading não devem existir muitos elementos já que provoca erros de leitura no programa e o torna muito pesado. Portanto recorremos a uma simples barra azul que vai crescendo de acordo com a quantidade de informação descarregada e armazenada. Outro grande problema foi a realização do efeito 3d das páginas a girar, já que o código é bastante avançado e composto por vários elementos, no entanto conseguimos dar a volta à situação, entendê-lo e adaptá-lo às nossas necessidades A uma dada altura descobrimos que botões que se encontrassem dentro de um movieclip eram inúteis, isso aconteceu com uma das bandas desenhadas e portanto tivemos de recorrer à ideia de arrastar a banda desenhada para cima da caneta.

Conclusões

Reflexão crítica

Encontrar outras aplicações que estivessem de alguma forma relacionadas com o tema foi complicado, no entanto exemplos de videojogos como por exemplo o “Medal of Honor: Allied Assault”, “Metro 2033” ou “Mafia” já possuíam este tipo de interacção. De certeza que a ideia não é inovadora, no entanto procuramos implementar uma série de elementos de aplicações que já conhecíamos ou com as quais nos deparamos ao longo de todo o processo de investigação. Fomos bastantes ingénuos na fase das ideias, mas isso levou-nos a criar metas, que não foram atingidas da melhor forma possível, ou mais simples, mas que foram atingidas. No entanto deparamo-nos com bastantes dificuldades o que tornou a elaboração do projecto bastante mais complexa. Com certeza que ,apesar das suas pequenas falhas, é completamente funcional e serve os propósitos para os quais foi criado.

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

Uma melhor análise da programação e do processo construtivo e uma melhor concepção a nível do design, mas de resto não existe muito mais a acrescentar, o essencial já existe e já foi criado. No entanto a aplicação poderia ser explorada de outra forma para o seu potencial ser aproveitado ao máximo.

Referências Web e Bibliográficas

• 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);
• The Amazing Spiderman, #1;
• The Amazing Spiderman, #2;
• Ross, Alex; Busiek Kurt, Marvels;
• http://forums.adobe.com/;
• http://adobe.hosted.jivesoftware.com/message/4007417;
• http://www.actionscript.org/forums/;
• http://www.kirupa.com/;

Anexos

(Alex Ross paint)

(Mafia Menu)