Adobe Flash é um software de animação vetorial que pode ser usado para criar banners, jogos e aplicações interativas. Ele permite desenhar formas, importar imagens e animá-las ao longo do tempo na timeline. As ferramentas incluem seleção, formas, texto, pincel e gradiente. Animações são criadas adicionando keyframes para definir estados ao longo do tempo.

2. adobe flash

3. 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.
existem portais
especializados em
jogos feitos em
flash
pode-se descobrir se algo
é feito em flash clicando
com o botão direito do
mouse sobre

4. introdução
para se visualizar um conteúdos flash no navegador (chrome, firefox,
etc) é necessário que o plugin flash player esteja instalado.
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.

5. 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.

6. 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

7. tools
podemos dividir a barra
tools nas seguintes
secções:
seleção e modificação
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.
criação
visionamento
cores
opções

8. tools
a gradient tool (segura o botão do mouse sobre a free transform tool para mostrar), permitenos 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.

9. 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).

10. tools
a line tool (N) é usada para desenhar linhas retas no canvas. segurando a tecla shift, tornase 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.

11. 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.

12. 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.

13. 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:
1
- 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.

14. 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.

15. 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.

16. 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.

17. timeline
layers
cada layer é independente e pode ter os seus próprios
elementos e a sua própria animação, sons, vídeos, texto,
ou actionscript.
layer 3
layer 2
layer 1
cria nova layer
deleta layer

18. timeline
configurações
marcando na coluna
do olho aparece um X
deixando aquela layer
invisível
marcando na coluna
do cadeado
bloqueiamos a layer
marcando na
coluna do quadrado
tornamos apenas os
contornos dos objetos
visíveis

19. timeline
keyframes
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

20. 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

21. exercício
deve ser feita a animação de uma
bolinha picando e deformando,
conforme exemplo.
enviar por email
matheusknebel@gmail.com