Main Page/3D Assembler

From LABMM1_IDE

Revision as of 04:43, 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