adobe flash
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
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.
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.
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
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
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.
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).
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.
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.
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.
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.
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.
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.
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.
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
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
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
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
exercício
deve ser feita a animação de uma
bolinha picando e deformando,
conforme exemplo.
enviar por email

matheusknebel@gmail.com

Flash introdução

  • 2.
  • 3.
    introdução adobe flash (antigomacromedia 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 visualizarum 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 novodocumento 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 comfunçõ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 abarra 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 (linhade 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 doolho 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.
  • 21.
    exercício deve ser feitaa animação de uma bolinha picando e deformando, conforme exemplo. enviar por email matheusknebel@gmail.com