Animação - Unidade 5

Introdução

Durante o 3º período de oficina de multimédia B, era pedido a realização de uma animação usando o flash. O objectivo do meu trabalho era mostrar como, e quais as fases, que a minha assinatura feita no media imagem passou. Então criei uma pequena animação onde mostra os passos pelo qual o meu trabalho passou. Acrescentei alguns extras. Lá contem os meus restantes trabalhos que realizei ao longo do ano para a disciplina.

O programa que utilizamos para realizar o trabalho foi o flash. Tinhamos algumas opções para escolher, entre elas o Flash 8, que foi o que eu utilizei, e o Adobe Flash CS5 ou menor. Utilizei também o Audacity para "arranjar" alguns sons.

A animação deveria conter Motion, rotation e scale, color, shape tweening, motion guide, dois efeitos (Motion presets), texto, um botão, dois sons e dois extras. Era também importante os aspectos gráficos e a história.

Download Flash 8 - Gratuíto

Download Flash CS5 - Versão de Teste

Guião/Fases

Cena 1

Na primeira cena terá dois botões. Um que iniciará a animação propriamente dita e outro que irá para os extras.

Cena 1.1

Aqui começa a animação. Encaminha para esta cena se a pessoa carregar no botão "Ver Animação" na Cena 1. Começará a dar um pequeno texto onde explica como surgiu a minha assinatura de imagem. É uma espécie de introdução a ela.

Cena 2

Nesta cena começa a animação, uma viagem até à minha assinatura, passando por todos os cenários que me inspiraram para a realização da assinatura do media imagem.

Cena 3

Caso escolha na Cena 1 a opção "Ver Extras", irá ser redereccionado para esta cena. Nela estarão mais botões. Esses botões terá caminhos diferentes, onde o objectivo é mostrar os meus restantes trabalhos que realizei durante o ano.

Cena 4

Caso escolha o botão "Imagem" na cena 3, ele irá ter a esta cena. Aqui mostrará o meu trabalho final de Imagem, um friso cronológico sobre a evolução do software.

Cena 5

A mesma coisa que a Cena 4. Caso escolha o botão "Som" na Cena 3 irá mostrar o meu trabalho de som.

Cena 6

Aqui poderão ver o meu vídeo. Tal como os media anteriores, para acessar a esta cena deverá escolher o botão "Vídeo" na Cena 3.

Cena 7

Créditos.

Animação

O começo da minha animação é um começo simples. Tudo começa com dois botões, um que permite ver a animação e consequente a história da minha assinatura. Ou por outro lado, a secção extras que permite mostrar às pessoas os trabalhos que realizei durante o ano lectivo para a disciplina.

O fundo é composto por estrelas, que está, por parte, ligado à minha assinatura. Então coloquei uma estrela maior, que se realça das outras, de entre as estrelas todas, essa será a minha estrela, ou seja, a minha assinatura. Essa estrela contém um motion guide e um motion preset, a explosão.

Seguindo a parte da animação:

Nesta parte, começa com um texto que explica algum do sentido da minha assinatura. Relata algumas partes de como a ideia surgiu e mostra algumas dificuldades para obter um trabalho final.

Em seguida começa a animação, onde o objectivo é mostrar a "viagem" que eu percorri para chegar à minha assinatura digital, passando por todos os espaços e ideias que me surgiram, até chegar à assinatura.

O mundo, que lá podemos ver o meridiano de Greenwich. E as iniciais do meu nome são PM, sugerindo "Post meridiem" – "após o meio dia". Então eu peguei nesse factor, e fiz a minha animação. Começando pelo mundo e fazendo uma viagem até a uma casa que representa esse meridiano, que se situa mesmo no centro, por isso está dividida. Até que entra nessa casa e vê a minha assinatura, que tem tem, como já referi, uma parte dessa situação do Meridiano de Greenwich e do "Post meridiem".

Seguindo a parte dos extras:

Na parte dos extras podem ver os trabalhos que realizei ao longo do ano, com um pouco de animação à mistura. Em primeiro nasce o blog, que representa o media texto. No meu trabalho, tem uma hiperligação que permite aceder ao blog de maneira fácil.

A imagem, o nosso segundo media, está representado numa animação, onde o friso se move desde o principio até ao fim, através do motion tween.

O Som está representado com uns fones, que contêm umas ondas sonoras que se movimentam através de uma máscara, enquanto o meu trabalho de som se faz ouvir.

Por fim, o vídeo está representado numa tela, e sendo assistido por algumas pessoas, que são representadas por circulos.

Aqui fica a minha Animação: Carregue na Assinatura para ver a animação.

Flash8 Pedro OMB by -Pedro on deviantART

Técnicas e estratégias

Motion Tween - Usei em quase toda a animação, foi a técnica que utilizei mais.

Rotation - Utilizei principalmente na Estrela e no feno.

Scale - A linha do Meridiano foi feita com Scale.

Color - O texto, usei o Alpha e no céu, ao passar da manhã até à noite.

Shape tween - A estrela principal usa shape tween.

Motion guide - Usei no Sol em cima da casa e na estrela.

Motion presets - Usei a Explosão e "Blur".

Texto - Introdução da animação e Créditos.

Botões - Usei vários Botões.

Sons - Também usei vários sons.

Extras - Coloquei o meu trabalho de Som, Imagem e o vídeo. Usei também máscaras.

Guiei-me por alguns tutoriais que encontrei na internet para me ajudar a fazer algumas partes da minha animação.

Dificuldades

Tive algumas dificuldades a nível de erros. Um erro da imagem, e outros erros de códigos. Tive de pesquisar e tirar algumas dúvidas sobre esses mesmos códigos para os colocar devidamente nas Actions.

Conclusão

Acho que o meu trabalho ficou bom. Trabalhei com esforço no mesmo, utilizei todas as técnicas pedidas e no fim, percebeu-se qual era o objectivo do trabalho. Contudo, como referi, deu algum trabalho e complicações que se tiveram de resolver com algum tempo. Gostei bastante desta unidade, e aprendi com certeza alguns conceitos de flash.

Bibliografia

Sons

Link do Som de Porta a Abrir

Link do Som de "Boooooo"

Link do Som de Ideia/Lâmpada

Link do Som de Escrita

Link do Som de Vertigo/Música

Link de Todos os Sons

Imagens

Todos os cenários feitos por mim. Assim como os trabalhos, o friso e assinatura. Assim como botões também.

Auscultadores

Bons Sites que podem visitar

Bons Tutoriais

Flash Web Training

Tutoriais

Projecto - Som

O objectivo para o início da unidade de som era realizar uma assinatura sonora. Começámos por pensar numa ideia que tivesse a nossa cara. Então eu pensei que poderia fazer um efeito sonoro como se fosse um trailer de cinema. E assim foi. Comecei por escolher a música de fundo, pesquisei várias delas mas no fim fiquei com esta.

Transformers3 por Pedro

Coloquei alguns efeitos como fade in, fade out e repetição. Cortei algumas partes e as vozes, pois depois de um feedback da professora achei melhor. Para não sair muito do conceito "PM" que utilizei na assinatura da imagem, coloquei o som de um relógio para dar início à assinatura.

Relógio por Pedro

Após isso, gravei a minha voz no próprio audacity, porém ela não ficou grande coisa. A minha voz não fica bem gravada então tive de utilizar um efeito para a modificar. Já que estava a fazer o som de um trailer de um filme de suspense e no qual utilizei a música dos Tranformers 3, pensei em colocar a minha voz "robótica". Pesquisei na Internet como fazer isso, então encontrei um tutorial muito interessante que me ajudou bastante a realizar o que eu pretendia. Usei o Eco para tornar a minha voz "robótica".

Tive algumas dificuldades, mas consegui ultrapassá-las, por isso fiquei satisfeito com a minha assinatura e com o meu desempenho. Além disso tive algum trabalho a cortar as partes da música principal, pois queria que ela ficasse “corrida”. No fim, para terminar, depois do meu nome coloquei uma máquina a desligar-se.

Tutorial: Veja aqui como colocar a sua voz "robótica"

Então a minha assinatura ficou assim:

Ass v-final por Pedro

Após realizar a assinatura começámos a trabalhar no projecto final. Como eu tratei de software na unidade da imagem, dei continuidade no som. O objectivo era fazer uma entrevista e dar a conhecer às pessoas a evolução da informática. Por isso fiz um pequeno questionário a duas pessoas de tempos diferentes. Assim podia ter opiniões diferentes e níveis de reconhecimento de antigos métodos de trabalho.

O meu trabalho de som consistiu em realizar um comentário, onde o tema principal seria a informática, mais propriamente o software como referi acima. Então como era uma entrevista e comentário de televisão comecei por colocar o som de um zapping. Coloquei um efeito muito engraçado, que quando ouvido com auscultadores cria uma espécie de esquerda - direita. Isto é, enquanto o zapping decorre o canal 1 ouve-se na parte esquerda, o canal 2 ouve-se na parte direita e assim sucessivamente.

Zapping por Pedro

A seguir, como tinha de dar um início ao programa, procurei no youtube e encontrei uma introdução bem engraçada. Então escolhi a parte desejada do som e coloquei-a no trabalho com um fade in. Após isso usei a repetição numa parte do meio dessa mesma introdução para ganhar algum tempo para fazer a minha própria introdução falada. Para realizar essa mesma fala utilizei o textaloud, que me permitiu usar uma voz standard. Usei o efeito de eco, para dar uma sensação de introdução.

Introdução tv globo por Pedro

A seguir coloquei as entrevistas, como eram um pouco extensas decidi colocar uma entrevista inteira e com a outra um comentário onde abordava os temas essenciais. Para não ficar apenas uma entrevista “seca”. Pensei em colocar uma música de fundo. Ouvi várias delas, mas não sabia qual delas colocar. Então depois de falar com a professora decidi aplicar uma música feita com uma guitarra acústica. Também tive de a prolongar pois era um pouco curta para todo aquele “texto”. Por isso usei de novo a repetição. Acabei por colocar a música num tom baixo, pois o mais importante era a entrevista e não a música.

Guitar por Pedro

Para colocar as vozes também não foi uma tarefa fácil. Comecei por utilizar um programa que nos permite gravar a nossa voz e modificá-la para masculino, feminino ou até "robótica" por exemplo. No entanto essa tentativa não teve sucesso. As vozes ficaram horríveis, sinceramente a minha voz não dá para este tipo de coisas. Então tive de recorrer ao plano B. Usei o textaloud e utilizei as vozes standard, no entanto tive de fazer algumas modificações no texto pois as vozes não tinham a prenuncia correcta. Até tentei dentro do audacity usar o aumento de graves para ver se conseguia colocar uma voz feminina em masculina, pois eu precisava, novamente sem sucesso. Tive de usar uma voz feminina.

Para acabar o trabalho, usei novamente o zapping e então a televisão a desligar-se. No fim coloquei a minha assinatura.

Resumindo, penso que o meu trabalho ficou bom. Penso que podia ter ficado melhor nuns sítios como por exemplo nas vozes. Entretanto acho que consegui criar o que tinha em mente. A minha maior dificuldade foi sem dúvida trabalhar as vozes, pois fiz várias tentativas e utilizei-as em vários modos, no entanto poucas resultaram devidamente.

Acho que ultrapassei positivamente esta unidade, por isso fiquei satisfeito pelo esforço e dedicação que empenhei neste trabalho. Assim ficou o meu trabalho.

Versao final por Pedro

Biblioteca

Sons Utilizados:

http://www.youtube.com/watch?v=o0ysT0QwJio,

http://www.youtube.com/watch?v=2K61zdPjAi8,

http://www.freesound.org/

http://www.youtube.com/watch?v=QtX81rdi6q8

http://www.youtube.com/watch?v=3H8bnKdf654

http://www.freesound.org/samplesViewSingle.php?id=107435

Programas Utilizados:

Audacity

TextAloud

MorphVox

Upload de Som:

http://soundcloud.com/

Introdução à Imagem

Introdução

Nesta segunda unidade de Oficina de Multimédia B, onde tratámos a imagem, o objectivo era realizar uma assinatura e um trabalho de maior dimensão. Nos dois trabalhos era obrigatório usar um determinado número de técnicas de Photoshop. Sendo assim teríamos de seguir alguns critérios para a realização dos mesmos.

Trabalho de Imagem - Assinatura

A Assinatura

Começámos por realizar uma assinatura pessoal. No início fiz vários modelos, cerca de cinco.

 A antiga assinatura era a seguinte, mas penso que a final ficou mais apelativa que esta, devido aos brushes, cores e imagem.

Após isso escolhi um deles e comecei a trabalhar no mesmo. Depois de realizar a assinatura e a ter quase acabado, surgiu uma nova e melhor ideia. Isso trouxe-me algumas dificuldades, mas com essa assinatura permitiu-me realizar mais técnicas na mesma.

Essa ideia consistia em criar uma assinatura relacionada com o meridiano de Greenwich. Como as iniciais do meu nome são "PM" (Pedro Machado), essas mesmas iniciais querem dizer post meridiem que marca as horas após o meio-dia, era essa a ideia de base.

As iniciais "PM" deviam estar um pouco mais atractivas, pois elas eram a chave da minha assinatura. O brush usado no relógio atrás da imagem do meridiano foi escolhido por causa do tempo, e os brushes de tinta em tons de azul simboliza o céu. Ao princípio coloquei nuvens, porém elas tiravam alguma visibilidade ao relógio.

A imagem é o meridiano e ele aponta o meio-dia ou meia-noite, a passagem de am para pm e vice-versa. A meia-noite significa também a Death Line da professora, ou seja, o nosso prazo de entrega dos trabalhos.

Aqui fica a evolução da minha assinatura, da primeira experiência até à final.

Projecto de Imagem - Friso Cronológico

Introdução

O trabalho seguinte consistia em realizar um trabalho de maior dimensão. O meu trabalho de grande dimensão consistiu em criar um friso cronológico sobre software que o objectivo era colocá-lo numa parede da escola.

Fiquei com a primeira década e meia a partir de 1980 e o João, o meu parceiro de trabalho, com o resto até 2010. Desde 1980 até 1995 houve um grande avanço e evolução de software, principalmente a nível de Sistemas Operativos, onde começaram a ser usados os sistemas operativos GUI (Graphical User Interface), em vez dos primeiros, denominados de CUI (Command-line User Interface). Os CUI funcionavam basicamente a nível de comandos enquanto os GUI, como hoje em dia, usavam o mouse, teclado e teclas de atalhos.

O Friso

No início tive algumas dificuldades. As ideias não surgiam e como começar o friso era realmente um problema. Pensamos em criar um friso um pouco fora no normal, então passados alguns momentos desistimos dessa ideia, pois era muito complicada e não tão atractiva como era suposto. A seguir veio a ideia de criar algo mais vulgar, mas com os produtores e empresas afastados de seus produtos, o que tornaria algo complicado para o público-alvo ligar produtos a produtores.

No fim, surgiu, realizar um friso em forma clássica. Deixando as outras ideias todas para trás, e nos concentrando apenas na nova. Este friso consistia em colocar a data por baixo dos softwares. Os mesmos estavam separados por Sistemas Operativos, Softwares de Aplicação e Internet.  

A Pesquisa

Uma das partes mais trabalhosas, foi a pesquisa e procura de dados, datas e softwares. Na primeira aula, praticamente não encontramos nada, excepto na wikipédia. Nas aulas a seguir através de informação da wikipédia conseguimos vários sites que nos ajudaram na nossa pesquisa. Sistemas operativos e Sistemas de aplicação foram o que encontramos mais. Mas não era só o que queríamos. A Internet, os chats, navegadores web e jogos, foi algo que revolucionou o mundo dos computadores. 

Cores, Formas e Fontes

O nosso friso contém tons de vermelhos escuros, que é a cor que denomina a escola. Escolhemos essa cor pela mesma razão e colocámos um gradiente, que faz lembrar Photoshop e por consequente software. Foi uma das dificuldades que encontrámos, pois também ponderávamos usar azuis. Só mesmo antes de começármos o friso propriamente dito decidimos usar os vermelhos.

Para colocar datas, nomes e imagens de softwares utilizei a ferramenta rectângulo arredondado com determinadas cores para cada elemento.  Para Sistemas Operativos utilizei o vermelho com letras brancas, os Sistemas de aplicação foram de cor branca com as fontes acinzentadas, e por fim, a parte da Internet utilizei um azul com letras igualmente brancas.

Para não estar a fazer uma caixinha de cada vez, decidi, criar alguns styles e então usei a clonagem para ficar mais fácil a utilização dos mesmos. Nas imagens, utilizei alguns ajustes feitos por mim, onde coloquei alguma luz e sombra. O objectivo era para as imagens não ficarem tal e qual como as originais.

Utilizei várias fontes. Seis fontes diferentes, algumas dessas fontes são as oficiais do produto. Pensei nisto várias vezes e achei que foi a melhor escolha, pois o público-alvo pode facilmente distinguir os vários softwares apenas através das fontes. Eis um exemplo de uma dessas fontes.

Os gradientes e estilos do trabalho foram feitos por mim e pelo João, o fundo foi ele que o fez, e os estilos das letras e caixas fui eu para o meu trabalho, os estilos e gradientes são semelhantes, porém têm algumas coisas diferentes. Decidimos assim para os dois frisos se unirem mais facilmente. Assim fica com uma cronologia mais adequada à escola e para não desequilibrar o espaço. 

Para realizar os gradientes e os colocar em todos os itens, realizei um estilo diferentes para os mesmos. No estilo criei um gradiente com duas cores semelhantes e uma pequena sombra. 

Conclusão

Por fim, acabamos o nosso trabalho. Começámos com dificuldades no friso, no facto de desconhecermos algumas das funcionalidades do Photoshop que desenvolvemos com a ajuda da professora. As técnicas utilizadas também no início foram escassas. Porém no fim consegui colocar cinco técnicas diferentes que aprendi durante as aulas. Penso que o trabalho foi realizado com sucesso, contudo muito trabalhoso. 

Bibliografia da Unidade de Imagem

Pesquisas

http://www.dca.fee.unicamp.br/cursos/EA876/apostila/HTML/node9.html

http://www.prof2000.pt/users/sara/net.htm

http://pt.wikipedia.org/wiki/Evolu%C3%A7%C3%A3o_dos_computadores

http://toastytech.com/guis/guitimeline.html

http://www.vas-y.com/dicas/historia/cap5_1.htm

http://pt.wikipedia.org/wiki/Sistema_operativo#GUI_.28Graphical_user_interface.29

http://pt.wikipedia.org/wiki/Software_aplicativo

http://en.wikipedia.org/wiki/Timeline_of_operating_systems

Conteúdo introduzido no Friso Cronológico

Sistemas Operativos

1981 - MS-DOS 1.0; Microsoft Corporation

1983 - Windows 1.0; Microsoft Corporation

1984 - Mac OS (System 1.0); Apple Computer, Inc.

1987 - Windows 2.0; Microsoft Corporation

1988 - Mac OS (System 6); Apple Computer, Inc.

1990 - Windows 3.0; Microsoft Corporation

1991 - Mac OS (System 7); Apple Computer, Inc.

1992 - Windows 3.1x; Microsoft Corporation

1993 - Windows NT 3.1; Microsoft Corporation

1995 - Windows 95; Microsoft Corporation

Softwares de Aplicação

1984 - Microsoft Excel; Microsoft Corporation

1985 - Primeiro Vírus; Anónimo

1985 - Bloco de notas; Microsoft

1989 - Microsoft Word para Windows 1.0; Microsoft

1990 - Photoshop; Adobe

1992 - 1º Jogo 3D - Wolfenstein; John Romero

1993 - Jogo Doom é lançado; id Software

1995 - Introdução do WordPad no Windows 95; Microsoft

Internet

1991- Primeira versão do HTML; World Wide Web Consortium

1993 - Primeiro browser gráfico; Mosaic

1995 - Yahoo; David Filo e Jerry Yang

Projecto - Blog

Este blog foi criado por mim. Em primeiro comecei por procurar um template que me agradasse. Depois de o encontrar comecei a personaliza-lo.

Em primeiro comecei por criar alguns códigos em html, onde adicionei conteúdos essenciais para a disciplina.

A seguir editei a barra de botões que está no topo da página, na folha de html do blog. Ela anteriormente continha botões de "Post RSS" e "Comments RSS".

Editei mais um pouco da parte gráfica do blog. Adicionei algumas imagens e mudei algumas fontes para Verdana. Adicionei também um pequeno ícon que fica ao lado do link do blog, que se chama Favincon. Uma simples imagem feita por mim, no photoshop, com fundo azul e com as letras "OM" que significa, obviamente, Oficina de Multimédia. 

A forma como fiz o upload do favincon foi muito simples. Depois de o ter acabado e guardado no meu computador, fiz upload para um site (http://imageshack.us/). No fim foi só colocá-lo no site através da folha html.
Para aprender a fazer um favincon clique aqui. E para saber como colocá-lo no blog acesse aqui. 

No fim espero ter aqui muitas mensagens, projectos e tutoriais para vos ajudar.

Apresentação

Olá, seja bem-vindo(a) ao meu blog. Eu sou o Pedro Machado e sou aluno de Oficina de Multimédia B. Este blog é o nosso primeiro projecto para a disciplina. Aqui vou divulgar todos os meus trabalhos ao longo do ano.

Fonte(s): 
http://www.iconfinder.com/