Flash introdução

21

Transcript of Flash introdução

Page 1: Flash introdução
Page 2: Flash introdução

adobe flash

Page 3: Flash introdução

introdução

adobe flash (antigo macromedia flash), é um software de animação vetorial que pode ser utilizado também para se criar aplicações interativas como banners de sites ou até mesmo jogos.

pode-se descobrir se algo é feito em flash clicando com o botão direito do

mouse sobre

existem portais especializados em jogos feitos em flash

Page 4: Flash introdução

introdução

para se fazer jogos em flash é necessário o uso da linguagem de programação actionscript, porém nesta disciplina apenas estudaremos como se fazem animações básicas. nas próximas aulas criaremos um personagem no illustrator, importaremos no flash e vamos animá-lo.

para se visualizar um conteúdos flash no navegador (chrome, firefox, etc) é necessário que o plugin flash player esteja instalado.

Page 5: Flash introdução

criando um novo documento

quando o flash é aberto é exibida uma janela onde pode-se configurar um novo documento, mas em qualquer outro momento pode-se criar um novo documento no menu file.

Page 6: Flash introdução

interface

menu superior com funções que veremos ao longo do tempo. atenção ao menu window, que seguindo o padrão do illustrator e demais programas da adobe, nos permite abrir diferentes barras de ferramentas e configurações.

menu de ferramentas.

timeline, a linha do tempo das nossas animações.

canvas, onde trabalhamos.

menus extras que veremos no decorrer das aulas

Page 7: Flash introdução

tools

seleção e modificação

criação

visionamento

cores

opções

podemos dividir a barra tools nas seguintes

secções:

a selection tool (V) serve, como próprio nome indicar para selecionar, mover e manipular os objetos no canvas. com ela podemos selecionar partes ou o contorno de uma forma, ou o seu interior por exemplo. podemos alterar a forma, ou simplesmente mover o objeto.

a sub selection tool (A) permite-nos selecionar as âncoras dos objetos e, assim, ter um controle mais fino do contorno de um objeto.

a free transform tool (F), permite-nos aplicar transformações ao objeto como: aumentar o tamanho, fazer flips horizontais ou verticais e criar distorção na forma.

com esta ferramenta selecionada temos, também, acesso, na parte inferior da barra, às opções:- rotate & skew;- scale;- distort;- envelop.

Page 8: Flash introdução

tools

a gradient tool (segura o botão do mouse sobre a free transform tool para mostrar), permite-nos controlar o gradiente de um objeto. com esta ferramenta selecionada podemos controlar: o ponto de focagem, o centro, a largura, o tamanho e a rotação do gradiente.

a lasso tool (H) permite-nos selecionar um objeto ou partes e de um objeto desenhando-se a área de interesse.

com a pen tool (P), desenhamos as linhas resultantes da introdução dos pontos de âncora. um clique para novo pontos, dois cliques para parar. clica, segura e arrasta para criar uma bézier.

com a anchor point tool (=), inserimos mais âncoras nas linhas desenhadas.

com a delete anchor point tool (-), eliminamos âncoras.

com a convert anchor point tool (C), alteramos a forma dos contornos.

Page 9: Flash introdução

tools

text tool (T), para inserir texto basta selecionar a ferramenta e clicar onde queremos inserir o texto. quando selecionamos esta ferramenta temos acesso, na barra de propriedades às opções: - static text (texto estático);- dynamic text (texto dinâmico, para manipular com action script); - input text (campos de texto).

podemos controlar o posicionamento e o tamanho do texto através dos campos: with of instance (W) e height of instance (H), assim como o seu posicionamento relativo aos eixos X (horizontal) e Y (vertical).

Page 10: Flash introdução

tools

a line tool (N) é usada para desenhar linhas retas no canvas. segurando a tecla shift, torna-se mais fácil criar linhas retas horizontais, verticais ou diagonais.

com a rectangle tool (R) desenhamos retângulos ou quadrados (mantendo segurada a tecla shift). é, também, possível desenhar retângulos com cantos arredondados utilizando a opção do painel de properties. podemos, igualmente, definir o tipo de linha, a cor e espessura do contorno, a cor do preenchimento.

com a rectangle primitive tool (R), desenhamos igualmente retângulos ou quadrados, mas podemos posteriormente arredondar os cantos.

com oval tool (O), desenhamos elipses ou círculos desde que tenhamos a tecla shift pressionada. no painel properties temos as mesmas opções que as referentes à rectangle tool.

com a oval primitive tool (O), podemos definir ovais e círculos e definir o raio e os ângulos no objecto.

*após se desenhar qualquer shape ele deixa de ser entendido pelo programa como um rectangle, oval, ou o que for, e passa a ser apenas um vetor qualquer.

Page 11: Flash introdução

tools

com oval tool (O), desenhamos elipses ou círculos desde que tenhamos a tecla shift segurada. no painel properties temos as mesmas opções que as referentes à rectangle tool.

com a oval primitive tool, podemos definir ovais e círculos e definir o raio e os ângulos para fatiar o objeto.

a polystar tool permite-nos desenhar polígonos ou estrelas. no painel properties podemos definir se desejamos um polígono ou uma estrela e determinar o seu número de lados, assim como, as restantes propriedades comuns às ferramentas deste grupo.

Page 12: Flash introdução

tools

a pencil tool (Y) é usada para desenhar diretamente no canvas.possui opções de ajuste:

- straighten, ajusta as linhas desenhadas de modo a que sejam sempre rectilíneas; - smooth, Suaviza as linhas desenhadas, dando-lhes uma forma curva; - ink, não suaviza as linhas nem as torna rectas.

OBS:object drawing (presente em line, rectangle, oval, pencil, brush e pen tool), pressionado faz com que toda a linha desenhada passe a ser selecionável como um objeto único, evitando que ela mescle com outra linha, do contrário ela poderá ser segmentada em diversos objetos ou mesclar com uma linha desenhada no mesmo lugar. os efeitos são levemente diferentes para cada ferramenta.

Page 13: Flash introdução

tools

a brush tool (B) serve para criar preenchimentos e não linhas de contorno. é uma ferramenta configurável, sendo possível escolher o tamanho e a forma do pincel. Podemos, igualmente definir a suavidade da pincelada no painel properties.

na barra de ferramentas podemos determinar os modos de utilização:

- brush modes, ver abaixo.- brush size: tamanho do pincel;- brush shape: formato do pincel;- use presure: torna o tamanho do pincel dependente da pressão aplicada na mesa gráfica (se estiver utilizando uma).

brush modes:- paint normal, pinta sem diferenciação entre linhas de contorno ou preenchimento;- paint fills, pinta sobre o preenchimento, não afectando as linhas de contorno que fica sempre por cima;- paint behind, pinta por detrás dos objectos desenhados no palco;- paint inside, pinta o interior das formas sem afectar o seu contorno.

1

Page 14: Flash introdução

tools

ink bottle tool (S), permite acrescentar ou alterar a cor de contorno de um objecto no canvas.

paint bucket tool (K), permite atribuir cor à um contorno fechado ou mudar a cor de um existente.

eyedropper tool (I) permite selecionar qualquer cor presente no canvas. depois de selecionada a cor a ferramenta transforma-se na paint bucket tool, o que permite a imediata aplicação da cor.

eraser tool (E) apaga os elementos do canvas e pode ser configurada da mesma forma que a ferramenta brush tool.

Page 15: Flash introdução

tools

a hand tool (H), permite mover o canvas.

a zoom tool (M, Z), permite permite variar a dimensão do canvas entre 8 a 2000 %.

stroke color, permite definir as cores de contorno.

fill color, permite definir as cores de preenchimento.

swap colors, permite mudar as cores entre o contorno e o preenchimento

no color, permite não atribuir ou retirar a cor de um objecto.

Page 16: Flash introdução

timeline

a timeline (linha de tempo) é um dos componentes principais do flash. é na timeline que definimos a animação e a organizamos no espaço e no tempo com as layers que são como folhas transparentes sobrepostas.

Page 17: Flash introdução

timeline

layer 3layer 2layer 1

cada layer é independente e pode ter os seus próprios elementos e a sua própria animação, sons, vídeos, texto, ou actionscript.

layers

cria nova layerdeleta layer

Page 18: Flash introdução

timeline

marcando na coluna do olho aparece um X deixando aquela layer invisível

marcando na coluna do cadeado

bloqueiamos a layermarcando na

coluna do quadrado tornamos apenas os

contornos dos objetos visíveis

configurações

Page 19: Flash introdução

timeline

cada frame é um momento de tempo e para se adicionar algum estado àquele momento adiciona-se um keyframe.

o retângulo e linha vermelha indicam

qual frame estamos visualizando agora

para criarmos um keyframe clicamos com o botão direito

sobre um momento do tempo e selecionamos

insert keyframe

keyframes

Page 20: Flash introdução

timeline

tutoriais (em inglês):

http://www.adobe.com/devnet/flash/articles/concept_timeline.html

http://www.leonelcunha.com/formacao/HTML/flash/timeline.html

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

Page 21: Flash introdução

exercício

deve ser feita a animação de uma bolinha picando e deformando, conforme exemplo.

enviar por email

[email protected]