FantasticFour
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.
- Banda desenhada com informação acerca dos autores da colecção da aplicação
- Pilha de bandas desenhadas
- Caneta
- Símbolo em forma de chama(burnout)
- Pergaminho
- 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;
