FantasticFour

Da Lab. Multimédia 1
Ir para: navegação, pesquisa

UAveiro1 68160.jpg


Índice

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)

Arborecencia 68160.jpg

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

Arborecencia 68160 2.jpg

Problemas

Progressos

Primeira Capa temporário/Primeira Capa final

Capa1 68160.jpg
Capa1 book 68160.jpg


Estudos da interface

Iniciais

0layout loading screen 68160.jpg
1table 68160.jpg
11table comic 68160.jpg



Final(4/01/2013)

Table done 68160.png

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.

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.

Cores 68160.jpg

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.

Table good.png
  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)

Arborecencia 68160 2.jpg


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.

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.

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.

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

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

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

O código é o seguinte :



}

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.

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.

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.


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

Anexos

Comic Book Commando Bold.ttf.png
Spiderman classic alex ross poster 2.jpg
(Alex Ross paint)
Menu 3x1.jpg
(Mafia Menu)
Ferramentas pessoais
Espaços nominais
Variantes
Acções
Navegação
Ferramentas