Main Page/3D Assembler

From LABMM1_IDE

Latest revision as of 23:33, 14 January 2011

Apresentação do projecto

Grupo

Grupo 4

Projecto: PC_Assembler

Daniel Carvalho, 60822

Joaquim Fernandes, 59808

Memória descritiva

Esta aplicação, (realizada no âmbito das disciplinas de Imagem Digital Estática e Laboratório Multimédia 1), chama-se PC Assembler, destinando-se a uma interacção multimédia de cariz de aprendizagem para montagem das diferentes peças de um computador. Proporciona um entendimento mais objectivo e correcto ao utilizador de como montar um Pc "desktop", prioridades dos componentes a ligar e montar e explicar como e para que serve cada componente enquanto se demonstra como e onde se liga, com informação anexada, intuitiva e simplificada. Vai ser utilizado um estilo gráfico orientado em infografia animada com interactividade no seu meio. Vai ser desenvolvido num tom cinzento de modo a ser "genérico", com aspecto limpo e moderno para a montagem de um Pc Desktop. O modo de navegação entre os menus será efectuado através de ícones/botões de desenho personalizado com texto. Terão funções tradicionais como Menu Principal, Avançar , Fechar e Retroceder e únicos como Iniciar Animação, ampliação, detalhes e entre outros. Todos terão uma personalização de ícone (desenho) únicos e enquadrados dentro do tema. Está a ser realizado um estudo de cor para a composição dos layouts de todos os menus/ecrãs, envolvendo o cinzento (já referido anteriormente) e preto em contraste com o azul e branco.

Diário de bordo

23.Nov.2010

Foi formado o grupo e depois escolhido o tema a desenvolver.

25.Nov.2010

Foram esclarecidas as ideias a desenvolver na aplicação. Na aula foi discutido onde é que tinhamos obtido a ideia para a realização da aplicação, sendo referenciado o site IKEA como inspiração para o aspecto do nosso projecto e no vídeo Como as coisas Funcionam do Youtube para o tutorial do nosso projecto. Foi também referido que a aplicação baseava-se na construção de um desktop, pelo que iriamos fazer uma aplicação que ía incluir uma animação em cada peça da torre, onde cada componente teria a sua respectiva informação e animação. Na informação, poderemos observar a função do componente seleccionado, a localização da sua montagem e a média de preço. A animação ocorre quando clicamos no botão personalizado (a própria peça é um botão que foi reduzido o tamanho), que depois faz movimentar o componente até ao respectivo sítio no desktop.

Imagem da aplicação do IKEA e Imagem do vídeo COMO AS COISAS FUNCIONAM

29.Nov.2010

Foi pesquisado o tipo de letra. Foram escolhidos o Sansation (fontsquirrel.com) e o V5 Prophit (dafont.com) para os títulos e o Tahoma (pré-definido no computador) para os textos da aplicação. Escolhemos estes tipos de letra devido ao tema limpo, moderno e claro da aplicação. Depois começamos a desenvolver o logótipo, pelo que decidimos que PC e Assembler teriam diferentes tipos de letra.

2.Dez.2010

Continuamos o desenvolvimento do logótipo que se iniciou no dia 29 de Novembro e foi escolhido o tipo de letra para o logótipo, sendo PC o V5 Prophit e Assembler o Tahoma.

3.Dez.2010

Foi decidido que no menu tutorial da aplicação seria constituido por imagens vectoriais e bitmap, pelo que conseguimos conjugar imagens reais com imagens desenhadas pelo grupo. No entanto, as ditas 'imagens reais' só serão usadas como conteúdo 'extra' para que a aplicação fique mais agradável a nível estético.

É apresentado os esboços já realizados da aplicação:

Ideia do menu da aplicação e o respectivo menu do tutorial.

Ideia de como fazer os botões.

Como já foi referido anteriormente, a aplicação foi baseada na aplicação do IKEA e no vídeo COMO AS COISAS FUNCIONAM, onde chegamos à conclusão que estes possuiam as características pretendidas para o nosso projecto.

Foi desenvolvido o esquema de arborescência da plataforma, isto é, começamos a desenvolver o esquema das funcionalidades da aplicação e a estudar a forma de como os menus iriam transitar de uns para os outros, enquanto o utilizador estivesse a interagir com a aplicação.

Haverá uma pequena introdução com vários 'fade ins' dos elementos do menu inicial. Nesse menu, haverá botões para aceder ao menu do tutorial, para o menu dos créditos, para sair da aplicação, para desligar ou ligar o som. No menu do tutorial, será encontrado as respectivas peças do computador, onde haverá a opção para ver a informação sobre essa peça e depois a animação da sua montagem na torre do computador.

Ecrãs desenvolvidos

Neste ecrã podemos observar uma ideia do menu inicial, onde podemos encontrar os botões já devidamente posicionados.

Aqui encontra-se o menu tutorial, onde podemos observar inúmeras 'caixas' vazias, que irão incluir o desenho de uma peça, ficando estes botões personalizados e cada um diferente do outro. Cada botão irá mostrar a respectiva informação e animação.

Encontra-se aqui uma ideia de apresentação da animação da montagem da peça na torre do computador.

17.Dez.2010 até 14.Jan.2011

O projecto foi desenvolvido todos os dias. No entanto, como houve dificuldades na reunião e no contacto com o grupo nas férias, o projecto ficou a ser desenvolvido somente por um membro do grupo (Daniel Carvalho). Visto que o projecto estava a desenvolver-se num bom ritmo, foi decidido que iria haver alterações a nível estético e a nível funcional na aplicação. Assim, o esquema cromático sofreu alterações, havendo um maior número de tons. A ordem dos objectos presentes nos diversos ecrãs foram alteradas, foi adicionado um novo botão na aplicação (funcionalidade que permite fullscreen) e foram adicionadas novas animações. No entanto, houve algumas coisas que se mantiveram intactas, como o tipo de letra, o objectivo da aplicação, o esquema de arborescência e a animação do tutorial.

Novo esboço da aplicação e o respectivo botão

Esquema cromático da aplicação

Novos ecrãs da aplicação

A primeira imagem corresponde ao menu inicial, onde podemos observar que a nível estético foi completamente alterado. No entanto, em relação às suas funcionalidades, só foi acrescentado mais um botão que permite pôr a aplicação em fullscreen. Foi desenhado um computador e os respectivos elementos, como o rato, o teclado e o monitor. Esse desenho está simplificado de forma a dar um aspecto moderno e limpo à aplicação, como já foi referido anteriormente.É também possível visualizar a alteração a nível cromático, passando do branco a um glamoroso cinza escuro. Também, para fazer contraste, os botões mantiveram-se com a cor azul, o que dá uma excelente combinação entre cinzento/azul. O logótipo foi alterado devido à dúvida de existência de direitos de autor na imagem do USB, pelo que foi simplificado. Foram criados os botões de iniciar e de créditos, que transitam para o menu tutorial e o menu dos créditos, respectivamente.

A segunda imagem é o menu dos créditos, como podemos observar. Quando o texto dos créditos surge, este aparece num lado errado do ecrã, pelo que surge uma animação de uma mão a buscar o texto para o sítio correcto. Com esta animação, os créditos tornam-se mais atractivos ao utilizador, fazendo com que este desperte interesse na sua leitura e interacção.

Foi adicionado um pequeno pormenor na aplicação, onde surge um ecrã a perguntar se temos a certeza que queremos sair da aplicação. Se clicarmos 'não', voltamos ao menu inicial. Porém, este ecrã também surge se clicarmos no botão que possui uma cruz nos menus da aplicação, como o menu do tutorial e o menu inicial. Foi devidamente programado para quando nós clicarmos 'não', voltarmos para o respectivo menu e não para o menu inicial.

Este é o menu do tutorial. Aqui a ideia manteve-se desde o prícipio, mas a nível estético foi alterado. Cada caixa é um botão e dentro desses botões encontramos o desenho de um componente da torre de computador, que se encontra à direita do ecrã. Se movermos o rato e ficar o ponteiro em cima de um botão, irá aparecer informações em relação à peça seleccionada. No entanto, se clicarmos nessa peça (volto a recordar que é também um botão), irá ocorrer uma animação da sua montagem na torre do computador. Podemos observar o aparecimento da informação e da animação nas últimas três imagens.

Desenvolvimento do novo logótipo e respectivo esboço

Relatório do projecto final

1. Apresentação do projecto (apresentação e caracterização do produto multimédia)

A aplicação desenvolvida chama-se PC Assembler, tendo como objectivo ser uma aplicação que possui um cariz de aprendizagem para montagem das diferentes peças da torre de um computador. Proporciona um entendimento mais objectivo e correcto ao utilizador de como montar um Pc "desktop", sabendo as prioridades dos componentes a ligar e montar e explicar como e para que serve cada componente enquanto se demonstra como e onde se liga, com informação anexada, intuitiva e simplificada. Foi utilizado um estilo gráfico orientado em infografia animada com interactividade no seu meio. Foi desenvolvido num tom cinzento de modo a ser "genérico", com aspecto limpo e moderno para a montagem de um Pc Desktop. O modo de navegação entre os menus será efectuado através de ícones/botões de desenho personalizado com texto. Terão funções tradicionais como Menu Principal, Avançar , Fechar e Retroceder e únicos como Iniciar Animação, ampliação, detalhes e entre outros. A todos terão uma personalização de ícone (desenho) únicos e enquadrados dentro do tema.Foi realizado um estudo de cor para a composição dos layouts de todos os menus/ecrãs, envolvendo o cinzento (já referido anteriormente) e preto em contraste com o azul e branco.

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

Depois de seleccionado o grupo e discutido o tema, foi decidido que seria desenvolvido o projecto 'PC Assembler', sendo este um tutorial para a construção de uma torre de um computador, com a devida informação e animação em cada componente do computador. Foi distribuido pelo grupo as devidas tarefas, assim como foi pesquisado no que o projecto seria baseado. Começamos a desenhar a ideia do primeiro ecrã, (o menu inicial), os botões do projecto, o tipo de letra e o esquema cromático. Na decisão do esquema cromático, foi decidido que o projecto teria as cores azuis, branco, preto e cinzento, pelo que seria obtido um tema 'moderno' e 'simples', como estava pretendido. Obtivemos dificuldades para encontrar aplicações com o mesmo objectivo que o nosso, pelo que nos inspiramos em aplicações e vídeos que eram excelentes exemplos do tutorial que pretendiamos realizar. Os respectivos sites são o IKEA (http://www.ikea.com/ms/pt_PT/rooms_ideas/splashplanners.html#), onde possui uma aplicação para construirmos o nosso próprio quarto e o youtube, onde foi visto um vídeo de como as coisas funcionam (http://www.youtube.com/watch?v=nqQ7qdtwNBs), mostrando o interiror de determinados objectos e a sua funcionalidade. Começamos a desenhar as peças para a montagem na torre do computador (também vectorizado), a planear e a desenhar o logótipo, a seleccionar conteúdo para a informação de cada componente do computador e a escolher o tipo de letra. Foi desenvolvido também o esquema arborescente da aplicação, assim como foi iniciado o desenvolvimento dos requisitos funcionais da aplicação (funções de cada menu e respectivos botões). Após o desenvolvimento da parte gráfica, foi iniciado o processo da criação da animação e de sonorização e de implementação de actionscript na aplicação.

3. Desenho funcional

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

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

Na minha aplicação e tal como é visivel na estrutura arborescente, a aplicação começa com uma introdução (animação inicial), que depois prossegue para o menu inicial. No menu inicial, estão desenvolvidos três botões, que se dividem em menu tutorial, créditos e fechar. No menu tutorial, encontra-se divididos vários botões, sendo cada botão, uma imagem personalizada de cada componente da torre do computador vectorizada. Dentro de cada botão, existe a tabela de informação desse componente e a respectiva animação.

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

De modo a que ocorra uma interacção com o utilizador de forma desejada, percebendo este o tutorial de como montar a torre de um computador, foram criados menus apelativos e imagens desenvolvidas para que sejam atractivas a nível estético. Para além da utilidade do projecto, foi também pensado o efeito que a aplicação teria no utilizador, pelo que foi reflectido se iria contribuir a nível cognitivo e se seria divertido para o utilizador, de forma a que fosse interactivo. A aplicação, tendo um aspecto 'limpo' e 'moderno' e depois de finalizado, foi testado por outros colegas. Chegou-se à conclusão que a aplicação atraia todas as pessoas que o visualizavam, nomeadamente no menu do tutorial. Tornou-se atractivo devido aos botões possuirem dupla função, a da respectiva informação e da animação.

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

No menu inicial, encontramos os botões para iniciar o menu do tutorial ou para iniciar o menu dos créditos. encontramos também nesse menu, o botão para tornar a aplicação 'fullscreen'. No menu dos créditos, encontramos a informação relativamente ao projecto e a animação de uma mão a buscar o texto para o devido sítio. No menu do tutorial, encontramos os respectivos botões para observarmos a informação de cada peça do computador, assim como a respectiva animação da montagem.

5. Produção do projecto (descrição dos aspectos técnicos da produção do projecto)

5.1 Estrutura e meios de navegação/interacção

Em toda a aplicação existem botões que permitem ao utilizador para retroceder e avançar nos diversos menus. No entanto, encontramos no menu do tutorial os botões de avançar em cada peça do computador, e o respectivo botão 'Voltar ao Tutorial'. Existe um botão para pôr o som 'on' ou 'off', aparecendo o rtespectivo ícone após o clique.

5.2 Integração e controlo de som

A aplicação é constituida por som de fundo, que possui um botão em cada menu. Em cada menu, existe a opção 'on' ou 'off' no controlo do som. Foram usados a programação dados na aula para o controlo do som.

5.3 Animação

A aplicação começa com um fade in do logótipo, da imagem de um computador e dos botões do ecrã. Quando clicamos no botão dos créditos, surge um fade in a nível da opacidade do ecrã, surgindo o texto dos créditos. No entanto o texto 'pousa' num sitio errado da aplicação, pelo que aparece a animação de uma mão a posicionar o texto no devido sítio. Ao voltarmos para o menu inicial e clicarmos no menu iniciar, avançamos para o menu do tutorial. Na transição entre menus, o menu inicial desaparece no monitor de um computador e o menu tutorial aparece quando ocorre a ampliação da torre de um computador. No menu tutorial, há a animação de cada peça a montar-se no respectivo sitio da torre desenhada à direita do ecrã. No entanto, estas últimas animações só ocorrem quando clicamos no respectivo botão personalizado com a imagem de um componente do computador.

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

Como o grupo teve dificuldades na sua reunião para o desenvolvimento do projecto, assim como foi impossível o contacto com alguns membros do grupo, só um membro do grupo é que trabalhou no desenvolvimento da aplicação (Daniel Carvalho). Assim, os problemas que ocorreram foram a gestão de tempo, pois só estava uma pessoa a trabalhar. Também, a nível de programação, foi necessário que a aplicação ficasse mais objectiva nas suas funcionalidades. No entanto, o projecto foi finalizado a tempo.

6. Conclusões

Foi adquirido um maior conhecimento a nível de flash e a respectiva programação. Foi também adquirido um novo gosto para conjugação de cores e conheceu-se como se montava um computador, assim como as funcionalidades de cada componente presente.

6.1 Reflexão crítica

Foi concluido o projecto com uma avaliação satisfatória de quem visualizou a aplicação. Para além de o projecto ter sido maioritariamente desenvolvido pelo Daniel Carvalho, foi possível realizar todas as metas exigidas para este projecto final.

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

Depois de finalizada a aplicação, chegou-se à conclusão que a aplicação poderia ter uma maior complexidade a nível de programação. Também podia ter sido mais desenvolvido os controlos de som. Devia ter sido feito uma boa distribuição de tarefas no inicio do projecto pelo grupo, assim como uma melhor coordenação.

7. Referências Web e Bibliográficas

youtube

dafont

fontsquirrel

IKEA

8. Anexos