Main Page/3D Assembler
From LABMM1_IDE
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)
