Escolar Documentos
Profissional Documentos
Cultura Documentos
FLASH CS4
Autor:
Marcos Paulo furlan
1
Adobe Flash CS4
NDICE
NDICE .......................................................................................................................................... 2
INTRODUO .............................................................................................................................. 4
O que Shockwave Flash .............................................................................. 4
O AMBIENTE DO FLASH............................................................................... 5
Preferncias.................................................................................................... 6
Atalhos ........................................................................................................ 7
Tela de Abertura ............................................................................................. 8
Configurando sua rea de trabalho ................................................................ 9
Barra de ferramentas.................................................................................... 11
Caixa de Ferramentas .................................................................................. 11
Ferramentas de Desenho e suas propriedades............................................ 11
Manipulando Objetos.................................................................................... 26
Trabalhando com objetos externos............................................................... 28
Importando bitmaps .................................................................................. 28
Importando arquivos em PSD ................................................................... 30
Importando arquivos do Illustrator............................................................. 31
Importando um arquivo de udio............................................................... 32
Importando vdeos .................................................................................... 35
SMBOLOS ................................................................................................................................. 39
Os tipos de Smbolos:................................................................................... 40
Filtros ........................................................................................................ 42
LINHA DO TEMPO ..................................................................................................................... 43
ANIMAO................................................................................................................................. 45
Animao Quadro a Quadro ......................................................................... 45
Animao com Interpolao de Movimento .................................................. 46
Motion Editor................................................................................................. 49
Onion Skin .................................................................................................... 49
Propriedades da barra de ferramentas do quadro ........................................ 51
Suavizao da animao. ......................................................................... 52
CAMADAS .................................................................................................................................. 53
Camadas Guia.............................................................................................. 55
Exemplo .................................................................................................... 57
Mscaras ...................................................................................................... 59
Interpolao de Forma.................................................................................. 61
Trabalhando com imagens importadas ..................................................... 62
Shape Hints............................................................................................... 63
Trace Bitmap............................................................................................. 64
BOTES ..................................................................................................................................... 65
Biblioteca de Botes ................................................................................. 66
CLIPES DE FILME...................................................................................................................... 67
2
Adobe Flash CS4
CINEMTICA INVERSA............................................................................................................. 70
Bind Tool....................................................................................................... 73
MOTION PRESETS E SPRAY BRUSH TOOL .......................................................................... 74
Motion Presets.............................................................................................. 74
Spray Brush Tool .......................................................................................... 75
AES........................................................................................................................................ 78
O painel Aes ............................................................................................. 78
Utilizando o Script Assist .............................................................................. 80
Aes bsicas do Flash ................................................................................ 82
Exemplo de utilizao de actions .............................................................. 83
Programao Centralizada e Descentralizada.............................................. 86
PRE-CARREGADOR.................................................................................................................. 89
Criando um carregador simples.................................................................... 90
APLICAO STAND ALONE .................................................................................................... 91
Abaixo seguem os comandos do FS Command ....................................... 92
CENAS ........................................................................................................................................ 93
PUBLICAO DO FILME .......................................................................................................... 93
CONCLUSO ............................................................................................................................. 97
3
Adobe Flash CS4
INTRODUO
A tecnologia Shockwave Flash, da Adobe, j esta presente na WEB h alguns
anos e hoje presente em praticamente 98% dos computadores existentes.
O grande sucesso do Flash se deve ao seu poder de processamento
multimdia, limitado somente pela criatividade de designers e criadores de
contedo, tudo isto aliado a uma caracterstica muito importante: os arquivos
transferidos pela Internet so pequenos.
A nova verso CS4 que est totalmente remodelada faz com que o Flash atinja
um patamar nunca alcanado para uma ferramenta de criao a animao
web.
4
Adobe Flash CS4
O AMBIENTE DO FLASH
Ao iniciarmos o Flash ele vai apresentar uma tela com as opes que podemos
trabalhar com o Flash.
5
Adobe Flash CS4
Preferncias
Voc pode tambm definir alteraes na exibio de componentes dentro do
Flash, clique no menu, Edit>Preferences (CTRL+U).
6
Adobe Flash CS4
programa como ao carregar (on Lauch) o que deve ser mostrado o padro
a tela de boas vindas. Quantidade de opes de desfazer, cores de elementos
visveis, etc...
Podemos definir tambm as preferncias relativas linguagem ActionScript,
auto formatao. opes de objetos a serem colados no Flash, como se
comportar com as ferramentas de desenho, preferncias de texto, avisos e
importao de PSD e AI para dentro do Flash.
Atalhos
O Flash tambm disponibiliza um grande quantidade de atalhos para facilitar a
sua utilizao, a grande maioria segue os padres dos programas grficos
como CRTL+S para salvar, CTRL+A para selecionar todos os objetos. Os
principais atalhos voc pode observar ao selecionar um item de menu.
7
Adobe Flash CS4
Tela de Abertura
Na tela de abertura podemos verificar os ltimos filmes abertos, ou abrir um
arquivo j existente. Na opo do meio podemos criar um novo filme do Flash
utilizando a linguagem ActionScript 3, ActionScript 2, documento AIR, Flash
Mbile, ActionsScript File, ActionScript Communication File, Flash JavaScript e
Flash Project. Na direita da tela temos A opo de usarmos um Template e de
adicionarmos uma extenso ao Flash.
8
Adobe Flash CS4
Inicialmente ele mostra a opo Publish, mas observe que existe ai uma barra
de rolagem para demais configuraes. Voc pode tambm aumentar a
dimenso dessa janela, posicionando o mouse no final dela e aumentando a
janela.
9
Adobe Flash CS4
Observe que seu filme tem uma taxa de quadros de 24 fps (frames per second
frames por segundo) e uma dimenso de 550x400px e fundo de tela branco.
Voc pode chamar essa tela tambm atravs do clique com o boto direito e
10
Adobe Flash CS4
Barra de ferramentas
Para exibir a barra de ferramentas no Flash, clique no Menu, Window,
Toolbars, Main
Na Barra de ferramentas alm dos botes padres como Novo, Abrir, Salvar,
etc..., temos botes exclusivos do FLASH como, por exemplo, Encaixar
(formato de im) que auxilia no posicionamento dos elementos na tela do filme.
Caixa de Ferramentas
A caixa de Ferramentas do Flash CS4 composta de quatro subdivises:
Ferramentas (Tools), Exibir (View), Cores (Colors) e Opes (Options).
A rea de ferramentas composta dos botes de desenho e manipulao dos
desenhos feitos na rea de desenho do FLASH.
A rea Exibir permite modificar a forma de visualizar a rea de desenho do
Flash permitindo mover o desenho ou ampli-lo com a lupa.
Na rea de cores podemos definir cores de linhas e cores de preenchimento
dos desenhos feitos no FLASH.
Opes tratam das opes de desenho selecionado.
Ainda com relao caixa de ferramentas, ao posicionar a ponta do mouse
sobre uma ferramenta ela mostra o nome da ferramenta e uma letra entre
parnteses, ao pressionar a tecla correspondente letra ela ser marcada
como ativa automaticamente.
11
Adobe Flash CS4
12
Adobe Flash CS4
13
Adobe Flash CS4
ferramenta 3D Rotation Tool . Para que essa ferramenta possa ser utilizada
necessrio que seu objeto j esteja convertido em smbolo. Veremos como
converter um objeto em smbolo e funcionamento da ferramenta
posteriormente.
14
Adobe Flash CS4
Voc pode observar que ao criar os pontos ele gera alas que podero depois
com ferramenta subselecionar (seta branca) serem trabalhados acentuando as
curvas conforme a sua necessidade. Caso seja necessrio criar algum ponto
novo, voc pode usar a ferramenta Add Anchor Point Tool que faz parte do
grupo da ferramenta caneta. Ao selecionar essa ferramenta voc poder
observar que o cursor fica no formato da caneta com um sinal de mais (+)
permitindo criar o novo ponto. Para retirar um ponto basta selecionar a
ferramenta Delete Anchor Point Tool. Com a ferramenta Convert Anchor Point
voc poder tambm trabalhar diretamente nos pontos.
A ferramenta Texto possui trs opes. que podem ser Esttico, Dinmico
e de Entrada.
Essas opes podem ser modificadas pelo painel Properties
15
Adobe Flash CS4
Texto Esttico: o texto normal. Utilizamos esse tipo de texto no Flash para
frases e blocos de texto. Para se criar um bloco basta clicar e manter o mouse
pressionado para definir o tamanho de sua caixa de texto. Ele permite
formatao de caractere e pargrafo, opes de aplicao de link direto nele e
filtros (veremos posteriormente junto com smbolos).
Texto Dinmico: o texto que recebe informaes de uma varivel, ou seja,
ele l o texto de um arquivo qualquer que contenha uma varivel igual a sua,
exemplo de usos para leitura de variveis de scripts, ASP, PHP, HTML e at
mesmo de arquivos TXT, como por exemplo, para textos em barras de
rolagem.
Texto de Entrada: Permite que se crie uma caixa de texto e que a mesmo
comporte-se como campo de formulrios, ele permite que o usurio insira
informaes que sero repassadas tambm atravs de variveis.
16
Adobe Flash CS4
17
Adobe Flash CS4
18
Adobe Flash CS4
19
Adobe Flash CS4
20
Adobe Flash CS4
21
Adobe Flash CS4
22
Adobe Flash CS4
Na paleta Color a opo padro inicial Solid onde podemos definir as cores
de contorno e preenchimento pela escolha da cor, cdigos RGB e
Hexadecimal. A opo Alpha define o grau de transparncia da cor. Na opo
TYPE temos como padro SOLID, ao clicar nessa opo pode-se mudar para
linear que aplicar ao objeto selecionado
Ao escolher opo SOLID, ser mostrado na opo COLOR a barra de cores
gradiente.
Voc pode observar que temos na opo gradiente duas alas de cores, para
alterar a cor de qualquer uma das alas de gradiente, basta clicar sobre ela e
escolher a cor desejada. Podemos acrescentar uma ala de gradiente a nossa
paleta de cores basta clicar entre uma delas, ele vai criar as outras alas de
cores.
Para retirar uma das alas basta apenas clicar sobre a ala, manter o mouse
pressionado e arrastar para fora da linha.
23
Adobe Flash CS4
24
Adobe Flash CS4
dentro de outro, por exemplo, se voc importar um bitmap para dentro do flash
e depois desejar aplicar este bitmap como preenchimento de um objeto clique
sobre o bitmap com o conta gotas, a ferramenta modifica-se imediatamente
para o balde de tinta e voc pode preencher onde desejar.
Erase Normal Apaga como um borracha mesmo, onde for passado o cursor
ele apaga.
Erase Fills Apaga somente preenchimentos.
Erase Lines Apaga apenas linhas.
Erase Selected Fills Apaga somente preenchimentos selecionados.
Erase Inside Apaga somente de dentro para fora do objeto selecionado.
A opo Faucet (cone em forma de uma torneira) apaga todo o objeto que
esteja com as mesmas propriedades.
A ltima opo permite modificar o formato da borracha.
25
Adobe Flash CS4
no teclado de caracteres.
Manipulando Objetos
Ao desenhar no Flash, podemos manipular nossos objetos, tanto na forma,
como contorno e preenchimentos.
Ao desenharmos linhas, polgonos, retngulos e elipses, podemos alterar a sua
forma facilmente com a ferramenta seta.
Por exemplo, se clicarmos diretamente na linha a mesma ser selecionada,
mas se aproximarmos o cursor da linha o mesmo se transformar em uma
curva, ao pressionarmos o boto do mouse e arrastarmos transformaremos
nossa linha em uma curva, o mesmo vale para todos os objetos. Em retngulos
ao aproximarmos de suas extremidades ele tambm apresentar um vrtice
permitindo que se crie pontas.
26
Adobe Flash CS4
texto ele vai quebrar em letras, retira o processo de desmembrar para ele se
transformar em Vetor.
27
Adobe Flash CS4
Importando bitmaps
O processo de importao simples, basta clicar no menu File Import, as sub
opes desse menu so:
To stage Importa para o palco
To Library Importa o objeto diretamente para a biblioteca
To External Library Importa a biblioteca de outro arquivo FLA.
Vdeo Importa um vdeo.
Escolha a primeira opo e adicione uma imagem ao seu filme
28
Adobe Flash CS4
Ao ser importado o objeto ele fica na palco e mantm uma instncia dele na
biblioteca.
29
Adobe Flash CS4
A opo Set stage size to same size as Photoshop canvas permite que se
dimensione o palco do Flash pelo tamanho de seu PSD.
30
Adobe Flash CS4
possvel observar pela imagem que ao importar ele criar uma pasta com o
nome de group e adiciona cada layer do PSD dentro de uma layer do Flash.
31
Adobe Flash CS4
32
Adobe Flash CS4
Observe que ele mostrar o arquivo de udio que est sendo carregado, caso
tenha mais de um arquivo de udio em sua biblioteca voc poder alterar o
arquivo por essa opo.
Podemos tambm aplicar efeitos em nosso som
A opo None no aplica quaisquer efeitos ao arquivo de som. Escolha essa
opo para remover os efeitos aplicados anteriormente.
A opo Left Channel/Right Channel reproduz o som somente no canal
esquerdo ou direito.
A opo Fade Left to Right/Fade Right to Left desloca o som do canal
esquerdo para o direito e do direito para o esquerdo.
A opo Fade-in aumenta gradualmente a amplitude de um som pela sua
durao.
A opo Fade-out diminui gradualmente a amplitude de um som pela sua
durao.
33
Adobe Flash CS4
A opo Custom permite que voc crie seus prprios pontos de entrada e de
sada do som usando Editar Envelope.
34
Adobe Flash CS4
exemplo, uma frase, a ser dita ao clicar sobre um boto, ou uma parte de uma
msica para introduo de seu site, aconselhvel para isso o uso de
programas externos, deixando para o Flash o som j pronto para ser utilizado.
Importando vdeos
Entre os diversos formatos populares para vdeo digital que o Flash importa
esto o QuickTime, MPEG, AVI e DV. Alm de importar possvel adicionar
interatividade, animaes e figuras do Flash e em alguns casos possvel
aplicar interpolaes de movimento.
Porm para poder exibir um vdeo dentro do padro de Flash Vdeo ser
necessrio converter ele para FLV
Para importar um vdeo, Menu File Import, Import Vdeo e vai aparecer uma
caixa de dilogo, onde voc deve selecionar o seu filme. Caso o seu filme
venha a ser puxado de um servidor de Streaming Flash necessrio marcar
a segunda opo e direcionar o caminho do servidor.
Como nosso filme um vdeo no formato MOV, clique no boto Launch Adobe
35
Adobe Flash CS4
Media Encoder.
36
Adobe Flash CS4
37
Adobe Flash CS4
Atravs dessa janela voc pode mudar o nome ou o caminho de seu arquivo
38
Adobe Flash CS4
SMBOLOS
Para podermos trabalhar com animaes no FLASH necessrio que quase
todos os elementos sejam convertidos para smbolos, pois atravs de
smbolos que podemos definir qual o comportamento do smbolo:
Os trs smbolos do FLASH so Grficos , Botes e Clipes de Filme .
Voc pode criar o objeto e depois convert-lo em Smbolo ou atravs do menu
Insert Convert to Symbol cri-lo e depois adicionar ao filme. Ao criar um
smbolo ele vai automaticamente para a Biblioteca de Smbolos.
Para converter um objeto existente em smbolo basta apenas apertar a tecla de
funo F8.
39
Adobe Flash CS4
Os tipos de Smbolos:
Grfico: Este o tipo mais bsico de smbolo, pois ele praticamente esttico,
embora possa receber aes para ele, muito utilizado tambm dentro dos
outros smbolos.
Boto: Este smbolo pode receber valores diferentes para estado do boto,
normal, ao rola sobre, pressionado e oculto, muito utilizado para chamar
aes.
Clipe de Filme: Este tipo de smbolo permite que se crie um filme dentro do
smbolo com a vantagem de que ele carrega todo o clipe de filme primeiro e
mostra o mesmo no filme todo de uma vez.
Ao desenhar seu objeto e pressionar F8, (Menu, Modify Convert to Symbol) ele
abre a tela acima, onde necessrio dar um nome ao smbolo (ele sempre
trar um nome genrico, como symbol??), o nome aconselhvel manter uma
nomenclatura que facilite a sua identificao. Por exemplo, Grficos colocar
GRnome, boto BTnome, Clipe de Filme MCnome. No caso do clipe de filme
usa-se MC (Movie Clip), dessa forma que a comunidade de designers e
programadores em Flash chama o Clipe de Filme. Abaixo do nome temos a
escolha do tipo de smbolo. Ao lado do tipo de smbolo temos a posio de seu
centro de Registro, ao padro no canto superior esquerdo, esse centro de
registro necessrio, pois a partir dele que seu objeto carregado.
Ao clicar na opo Advanced, abre-se as opes de exportao de nosso
objeto para cdigo.
Mesmo depois de pronto podemos alterar as propriedades de nossos smbolos
atravs da biblioteca (atalho CTRL+L ou Menu Window Library), ou mesmo ele
estando dentro do filme principal, em ambos os casos basta apenas clicar
sobre o smbolo com o boto direito do mouse e depois escolher editar para
ambos os casos, e estando o smbolo no filme podemos edit-lo tambm no
local e em uma nova janela.
40
Adobe Flash CS4
somente Clipes de Filme mesmo para objetos estticos. A razo para essa
mudana pelo fato de que posso controlar meu Clipe de Filme atravs de
programao (linguagem actionscript) e aplicao de filtros e mistura de
camadas.
Ao criar um smbolo, podemos manipul-lo pela barra de propriedades.
41
Adobe Flash CS4
Filtros
A partir da verso 8, o Flash trouxe uma inovao esperada h muito tempo
que so filtros para serem aplicados aos smbolos. Uma nica observao, os
filtros s podem ser aplicados a Clipes de Filme e Textos.
Para aplicar um filtro, selecione seu smbolo e clique no boto Add Filter.
As opes so:
Drop Shadow Aplica uma sombra ao seu objeto. Permite alterar
diversas propriedades do efeito como desfoque, cor, qualidade, etc...
42
Adobe Flash CS4
LINHA DO TEMPO
A Linha do tempo utilizada na criao de animaes. Atravs dela podemos
43
Adobe Flash CS4
definir qual ser a mudana e/ou caminho a ser especificado pelo objeto do
filme. Podemos travs de a linha tempo utilizar camadas para melhor
agrupamento e movimento dos objetos.
44
Adobe Flash CS4
ANIMAO
Animao Quadro a Quadro
A animao quadro a quadro funciona de maneira semelhante a um desenho
animado, ou seja, para cada movimento do objeto dever ser colocado o
mesmo dentro de quadro.
Para entendermos melhor este processo crie uma circunferncia na sua rea
de desenho. Observe que ao desenhar o objeto no filme do Flash, no primeiro
quadro aparece uma bolinha preta, mostrando que no quadro existe um objeto.
Para inserir uma instncia deste mesmo objeto no prximo quadro, clique com
o boto direito do mouse no prximo quadro e escolha Inserir Quadro Chave
(tecla de atalho F6). Ele repete o mesmo smbolo.
45
Adobe Flash CS4
Podemos tambm gerar todo o HTML pelo prprio Flash atravs do recurso de
publicao que veremos mais adiante.
Quando se trabalhar com animao quadro a quadro no se converte os
objetos em smbolos.
46
Adobe Flash CS4
Observe na timeline que ele preenche os quadros com uma cor lils. Ele
tambm apresenta como quadros preenchidos somente o primeiro e o ltimo
quadro de sua animao. Clique no ltimo quadro e mude seu smbolo de
posio na rea de desenho. Se voc arrastar o cursor vermelho pela
animao voc poder ver como est sua animao. Estando no primeiro
quadro e pressionando ENTER ele tambm apresenta sua animao. Para ver
a animao em looping pressione CTRL+ENTER. Para poder andar quadro a
quadro de sua animao, voc pode pressionar as teclas com sinal de maior
(>) e menor (<) no teclado.
47
Adobe Flash CS4
Ele tambm cria o segundo quadro chave para o movimento de seu objeto.
Aumente um pouco o seu objeto.
Rotacione seu objeto.
Voc pode com a ferramenta de seleo direta (seta branca) ou com a
ferramenta Convert Anchor Point (grupo da caneta), trabalhar em qualquer uma
das duas pontas da linha.
J com a ferramenta de seleo, voc pode ao aproximar da linha deixar ela
em curva, e ao selecionar ela mover toda a animao.
48
Adobe Flash CS4
Motion Editor
Esse recurso muito semelhante forma como o Adobe After Effects trabalha,
atravs do Motion editor podemos trabalhar com posio x e y, rotao z.
Transformao em Skew.
Podemos aplicar transformaes de cores como Alpha, Tint, etc..., Podemos
aplicar filtros, opes de Easy (suavizao da animao).
Onion Skin
Quando se cria uma animao muitas vezes temos a necessidade de ficar indo
e vindo atravs dos quadros para termos uma idia melhor de como est
ficando a animao, o que causa uma grande perca de tempo. mas para
49
Adobe Flash CS4
facilitar todo este processo o FLASH possui um processo chamado Onion Skin.
Com ele podemos editar o quadro atual enquanto observamos o quadro que
est logo abaixo dele ou at mesmo editar diversos quadros simultaneamente.
O quadro atual aparece com as cores normais, enquanto os quadros anteriores
aparecem com as cores apagadas, como se estivssemos sendo vistos atravs
de uma folha de papel vegetal. Somente o quadro atual pode ser modificado,
os quadros apagados no podem ser alterados.
Para utilizar o efeito basta clicar sobre o boto Papel de Transferncia.
50
Adobe Flash CS4
Viso Outlines
51
Adobe Flash CS4
Suavizao da animao.
Podemos trabalhar a suavizao de nossa animao.
Ao utilizarmos Animao do tipo Motion, isso deve ser feito atravs da aba
Motion Editor.
52
Adobe Flash CS4
Teste sua animao com um Easy semelhante ao da imagem acima e veja que
ele da um efeito de Bounce.
CAMADAS
As camadas funcionam no Flash para que possamos trabalhar o empilhamento
53
Adobe Flash CS4
54
Adobe Flash CS4
Camadas Guia
Um dos grandes atrativos da animao com Interpolao possibilidade de
criar caminhos para a animao do objeto este processo chamado Linha
Guia.
Para especificar este caminho existem dois cuidados importantes, quando voc
cria um smbolo voc pode observar que na parte central do smbolo aparece
um sinal de mais (+) este sinal deve coincidir com a linha guia.
O segundo cuidado que a linha dever ser criada na camada da linha guia
para no ocorrer defeitos na animao.
Para criar uma camada guia proceda da seguinte forma.
Crie seu smbolo que dever seguir a guia
55
Adobe Flash CS4
Observe que o cone da guia teve uma mudana, com isso definimos que ela
uma guia, precisamos agora definir que a camada de baixo ser uma camada
guiada.
56
Adobe Flash CS4
Arraste a camada de baixo para cima da camada guia puxando um pouco para
a direita e observe que vai aparecer uma barrinha com uma bolinha na ponta,
pode soltar o mouse
Exemplo
Vamos criar uma animao que far o desenho de uma bola "quicando" no
filme.
Primeiro, crie um smbolo no formato de uma circunferncia e crie uma
interpolao at o quadro 40.
Crie a sua camada guia seguindo os passos descritos acima, depois clique no
57
Adobe Flash CS4
primeiro quadro da camada guia (observe que ela mostra um arco) e com a
ferramenta lpis faa retas conforme abaixo.
58
Adobe Flash CS4
Podemos fazer com que dois ou mais objetos sigam as linhas guias e
podemos tambm alterar o ponto central de nosso smbolo. Basta dar um duplo
clique sobre o mesmo e mudar o smbolo de posio em relao ao ponto
central.
Mscaras
Criar mscaras uma maneira simples de revelar seletivamente partes da
camada acima ou abaixo da cena. Isso requer marcar uma camada como
camada de mscara e as camadas abaixo como camadas mascaradas.
Para criar a sua mscara desenhe ou importe algum objeto para seu palco.
Crie uma nova camada e desenhe o objeto que vai mascarar o objeto da
camada de baixo.
59
Adobe Flash CS4
Observe que ele deixa visvel somente onde os objetos se interceptam. Veja
abaixo a rea de edio natural e depois com a mscara aplicada.
60
Adobe Flash CS4
faz um recuo.
Essa camada recuada chamada de camada Mascarada (MASKED).
Caso voc precise alterar algo em sua mscara, ou no objeto que est
mascarando, necessrio desbloquear a mscara, clicando no cone em forma
de cadeado.
Caso voc queira voltar s camadas ao estado normal, necessrio clicar
como boto direito do mouse na camada e escolher a opo Properties
Interpolao de Forma
A interpolao de forma uma tcnica usada nos efeitos de morfismo que
podem ser feitos usando-se transformaes de instncias, como rotao,
redimensionamento ou distoro. Preenchimento, contorno, gradientes e alfa
so todos atributos que podem ser aplicados na Interpolao de forma.
Como exemplo bsico inicial, crie um retngulo no palco de seu filme, depois
crie um quadro chave no quadro 24 e apague o retngulo e desenhe uma
circunferncia.
61
Adobe Flash CS4
62
Adobe Flash CS4
desenho Flash.
Clique no menu Modify, Shape, Add Shape Hint, Vai aparecer em ambas s
imagens uma bolinha vermelha com a letra a, estas so as referncias, voc
pode arrast-las para qualquer posio dentro de seu desenho e isto far com
que a sua forma mude a trajetria durante a modificao.
Depois coloque uma forma no primeiro frame e outra no frame 30 e faa a
Interpolao de Forma.
Shape Hints
Shape Hints so referncias que podemos adicionar aos elementos de nossa
Interpolao de Forma, com isso eu posso forar determinada rea a ser
transformada em outra.
Com o primeiro frame selecionado, clique no menu, Modify, Shape, Add Shape
Hint, voc vai observar que aparece no meio de seu desenho uma bolinha
vermelha com a letra a, se voc for ao prximo quadro chave, poder
observar que nele a bolinha verde.
Basta posicionar a bolinha vermelha no ponto a ser transformado, e fazer o
mesmo com a bolinha verde. Os shape hints reposicionados ficaro na cor
amarela.
63
Adobe Flash CS4
Trace Bitmap
Quando voc pretende aplicar referncia de forma em bitmaps, aconselhvel
programas externos ao flash como, por exemplo, o Winmorph que permite
fazer a mudana de forma entre duas fotos e export-la como swf.
Mas o prprio flash possui uma possibilidade de se trabalhar com formas, que
a possibilidade de se traar o bitmap. Aps inserir a imagem, Menu Modify,
Bitmap, Trace Bitmap.
64
Adobe Flash CS4
Se a sua imagem for, por exemplo, uma caricatura, voc ainda conseguir
bons resultados, mas se for uma fotografia deve-se ter muito cuidado.
BOTES
Na verdade, os botes so clipes de filme interativos compostos por quatro
quadros. Quando voc seleciona o comportamento de boto para um smbolo,
o Flash cria uma Linha de Tempo com quatro quadros. Os primeiros trs
exibem os trs estados possveis do boto, enquanto o quarto defina sua rea
ativa. Na realidade, a Linha de Tempo no reproduzida, simplesmente reage
ao movimento do ponteiro s aes, passando para o quadro apropriado.
Para tornar um boto interativo em um filme, coloque uma instncia do smbolo
do boto no Palco e atribua aes instncia. Voc pode adicionar aes aos
botes diretamente no smbolo, ou na linha do tempo, sendo que nesse caso
necessrio dar um nome de instncia ao smbolo de boto.
Cada quadro na Linha de Tempo de um smbolo de boto tem uma funo
especfica:
65
Adobe Flash CS4
Biblioteca de Botes
Voc pode utilizar qualquer elemento do Flash como um boto, podemos
acrescentar botes estticos, com clipes de filmes como elementos dos botes,
podemos acrescentar udio ao boto, etc...
Mas o Flash tambm tem uma srie de botes pr-personalizados que podem
ser utilizados como botes. Para ter acesso a eles, clique no Menu Window,
Common Library, Buttons
66
Adobe Flash CS4
Observe que dentro do boto foram criadas vrias camadas para que ele
ficasse com a aparncia atual.
CLIPES DE FILME
Clipes de Filme mais conhecidos como Movie Clips ou somente MC so
pequenos trechos de animao que funcionam independentes da linha do
tempo do filme principal. Podem conter sons, controles interativos, instncias
de outros MCS. Podem ser controlados atravs de botes, por aes de
quadros, ou por outros MCS, podem ainda ser utilizados na criao de botes
animados.
Uma das grandes vantagens dos MCS voc pode edit-los separadamente
do filme principal, facilitando a organizao da animao, alm de que o MC
carregado por completo no filme.
Atualmente embora o Flash possa criar smbolos do tipo grfico, botes e
clipes de filme, os clipes de filme esto substituindo os demais smbolos em
sua utilizao.
Como criar um clipe de filme.
Desenhe um crculo. Imaginemos que esse circulo venha a ser roda de um
veculo. Podemos conforme o veiculo se movimentar com a roda gire. Imagine
67
Adobe Flash CS4
agora se isso fosse ser aplicado a um caminho com seis eixos, seriam seis
crculos sendo animados. Se formos pensar em fazer isso diretamente na
Timeline, alm do tempo de criao, o filme ficar bem pesado.
Ento com sua roda desenhada.
Na minha Timeline criei uma animao de Classic Tween e defini uma rotao
68
Adobe Flash CS4
69
Adobe Flash CS4
CINEMTICA INVERSA
Com toda a certeza uma das ferramentas mais esperadas nessa nova verso
70
Adobe Flash CS4
Selecione a ferramenta Bone Tool e clique onde ser criado o primeiro eixo de
seu esqueleto.
71
Adobe Flash CS4
Crie seu quadro chave mais a frente e pelos ns de sua armadura mude a
forma de seu desenho, a animao ser criada automaticamente.
Ao criar sua cinemtica inversa, o Flash vai criar uma camada chamada
armature, ao clicar no quadro chave dessa layer abre-se as propriedades
dessa layer.
72
Adobe Flash CS4
Bind Tool
A opo Bind Tool que faz parte do conjunto de ferramentas Bone Tool permite
que se controle os pontos de seu bon.
Crie uma figura e crie os ns de sua armadura.
Com a ferramenta Bind Tool voc pode manipular os pontos de acordo com a
sua armadura.
73
Adobe Flash CS4
74
Adobe Flash CS4
Para que voc possa aplicar o efeito em seu objeto, basta apenas desenhar
seu objeto ou import-lo, escolher o efeito na janela de efeitos e clicar em
Apply.
Automaticamente sero criados os quadros chaves de sua animao.
75
Adobe Flash CS4
76
Adobe Flash CS4
Voc pode tambm a largura e altura de seu pince em Scale width e Scale
heigth.
Voc pode tambm escalar e rotacionar de forma randmica se u brush.
Aps definir a forma de seu Brush, basta apenas espalhar o spray em sua tela.
77
Adobe Flash CS4
AES
O Flash vem atravs de suas verses se aprimorando cada vez mais como
ferramenta de criao e desenvolvimento para web e aplicaes ricas. A
verso CS3 trouxe junto com ela um amadurecimento de sua linguagem de
programao o ACTIONSCRIPT para a verso 3 que est estruturada como
uma linguagem madura e utilizando recursos que somente eram comuns a
linguagens como JAVA, C E C#.
Em nossa apostila vamos estudar o flash de forma programvel utilizando o
actionscript 2.
Na verso CS4 ainda possvel programar em AS (Action Script) 2.0.
Um cuidado que se deve ter aqui o tipo de projeto a ser criado, pois
bem comum, iniciar um projeto de forma errada. Caso voc queira um projeto
AS2 e tenha iniciado um projeto AS3, clique no meu File>Publish Settings>aba
Flash e mude na opo ActionScript version.
O painel Aes
Para podermos aplicar os cdigos action Script em nosso projeto necessrio
utilizarmos o painel actions. Voc pode chamar o painel actions atravs do
menu, window actions, ou atravs da tecla de atalho F9 opo recomendada.
78
Adobe Flash CS4
de aes. Voc pode observar que no topo temos o nvel de action script que
estamos utilizando e na direita temos a janela de cdigo.
Na parte superior da parte direita do painel de aes temos alguns botes,
vamos ver os principais:
Permite adicionar aes de acordo com a sua necessidade.
79
Adobe Flash CS4
voc no o tenha feito Durant a digitao dos cdigos, voc pode usar esse
boto para reorganizar o cdigo para voc.
80
Adobe Flash CS4
81
Adobe Flash CS4
82
Adobe Flash CS4
caso voc queira que o link abra na mesma janela, ser necessrio apenas
abrir e fechar aspas.
Crie uma nova camada acima de sua camada atua e renomeie ela para AS
83
Adobe Flash CS4
Isso far com que ao chegar ao quadro 30 a animao pare. Repita o processo
no quadro 60.
Observe que ao colocarmos aes em quadros os mesmos apresentam junto
ao quadro um pequeno a, indicando que no frame existem aes.
84
Adobe Flash CS4
Vamos fazer tambm com que o boto ao ser clicado nesse quadro inicie
novamente a animao.
Clique no bloco de aes na linha de getURL para selecion-la, depois d um
85
Adobe Flash CS4
86
Adobe Flash CS4
Clique sobre o boto cinza e pressione F9. Desligue a opo Script Assistance,
assim podemos digitar nossas aes. Adicione a seguinte ao:
on(press){
trace(Esse um modelo de programao descentralizada);
}
87
Adobe Flash CS4
Vamos agora usar o mesmo texto, mas no outro boto (vermelho) como
programao centralizada. A primeira coisa a ser feita instanciar esse boto.
Clique sobre ele, e no campo instance name, coloque botao_btn.
88
Adobe Flash CS4
Ao testar seu filme voc pode observar que ele escreve tambm na janela de
sada output
Explicando o cdigo: botao_btn.onPress = function(){ boto_btn nosso
boto instanciado que recebe o evento onPress e executa uma funo. O trace
o contedo a ser executado quando o boto for pressionado.
PRE-CARREGADOR
Todo o cuidado que voc investe na criao de interatividade complexa com
vrias linhas de Tempo ser desperdiado caso o seu usurio tenha que
esperar muito tempo para que seja feito o download da animao atravs da
WEB, muitas vezes fazendo com que o usurio desista de abrir a pgina.
Podemos evitar a perca de usurios criando animaes curtas que os
entretenha e dispare o filme principal somente quando o filme tiver sido
carregado.
Os pr-carregadores devero ser pequenos j que voc quer que eles sejam
carregados quase que instantaneamente e devem ser informativo, deixando
seus espectadores cientes do que os espera ou de quanto tempo eles tero de
aguardar.
89
Adobe Flash CS4
Explicando a ao:
if (_framesloaded>=_totalframes) { Verifica se os quadros carregados de seu
filme maior ou igual ao total de quadros de seu filme.
gotoAndPlay (2); Caso a ao acima seja real ele direciona para o quadro 2
onde temos nossa animao.
} else {
90
Adobe Flash CS4
gotoAndPlay (1);
} Caso a quantidade de quadros ainda no tenha sido toda carregada ele
volta ao quadro 1. Isso se repete at que o filme tenha sido todo carregado.
A ao utilizada pelo Flash para esse recurso FSCOMMAND que est dentro
do painel de aes na pasta Browser / Network.
A instruo FS Command nos permite enviar comandos de dentro do FLASH
para outros programas externos a ele.
91
Adobe Flash CS4
92
Adobe Flash CS4
CENAS
Podem ser entendidas como partes de uma animao. Cada cena pode conter
seus prprios objetos/ personagens, e automaticamente se colocam em ordem
uma aps outras, podem tambm ser chamadas atravs de botes ou atravs
de aes colocadas diretamente nos quadros.
Depois de criada a cena podemos nomear as cenas de forma que ela possa
identificar sua funo dentro da animao. Para criar uma nova cena clique no
Menu Insert Scene, e para alterar o nome de uma cena Menu Modify, Scene.
Para um entendimento maior das cenas ser necessrio trabalhar tambm com
aes.
PUBLICAO DO FILME
A publicao resultado final de seu trabalho no Flash , para publicar o seu
trabalho, basta apenas clicar no Menu File, Publish. O resultado ser um
93
Adobe Flash CS4
A primeira guia trs a possibilidade dos formatos a serem definido como projeto
final de seu trabalho:
Flash (swf) Este o formato do arquivo de filme como resultado final;
HTML: Gera o documento HTML de seu filme ;
GIF: este formato permite gerar de seu filme gifs estticos e gifs animados do
mesmo, sendo que quando estticos podemos definir qual ser o looping e a
qualidade final.
JPG: Permite que seja gerado de sua animao uma imagem em JPG, e
qualidade de exportao.
PNG: Permite exportar o filme neste formato que embora seja menos utilizado
94
Adobe Flash CS4
pode ser utilizado para imagens em seu cdigo HTML , o formato padro do
Fireworks.
Windows Projector: Aqui podemos gerar um arquivo executvel de seu filme o
que dispensa a necessidade de plug-ins e do Flash para se visualizar a
animao , este projetor somente para Windows.
Macintosh Projector: Funciona da mesma maneira que para o Windows , s
que para a plataforma MAC.
A guia Flash permite definir a verso do Flash Player para seu filme, ordem de
carregamento do filme, verso de actionScript. Em Images and Sounds
podemos definir a qualidade de sada das imagens e dos arquivos de udio.
A terceira opo permite definir as propriedades de seu SWF como
compresso, incluso de camadas ocultas, incluir metadados, etc...
Em Advanced podemos gerar um relatrio de publicao, proteger o swf contra
importao,etc...
95
Adobe Flash CS4
A terceira guia HTML, permite definir para qual sada Flash ser o filme,
permite detectar a verso do Flash. Dimenses do filme, definir a exibio filme
(playback), qualidade do filme, modo de janela (Window mode), alinhamento,
escala do swf no HTML.
96
Adobe Flash CS4
CONCLUSO
Com certeza a verso CS4 do Adobe Flash est bem amadurecida, permitindo
a designer, animadores e developers explorar a ferramenta em seus projetos,
seja ele um website, uma aplicao multimdia, um banner, etc...
97