Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila Completa Flash Cs5-2
Apostila Completa Flash Cs5-2
Desenvolvido
por Marcos Paulo Furlan
NDICE
NDICE .......................................................................................................................................... 2
ADOBE FLASH............................................................................................................................. 3
ADOBE FLASH
O AMBIENTE DO FLASH
Ao iniciarmos o Flash ele vai apresentar uma tela com as opes que podemos
trabalhar com o Flash.
Atalhos
O Flash tambm disponibiliza uma 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.
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
Observe que seu filme tem uma taxa de quadros de 18 fps (frames per second
frames por segundo) e uma dimenso de 800x600px e fundo de tela branco.
Voc pode alterar todas as propriedades clicando no boto Edit.
Voc pode chamar essa tela tambm atravs do clique com o boto direito e
depois a opo Document Properties.
Caixa de Ferramentas
A caixa de Ferramentas do Flash CS5 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.
um
objeto
em
smbolo
funcionamento
da
ferramenta
posteriormente.
Junto a ela temos a 3D Translation Tool
tambm posteriormente.
Ao lado da ferramenta linha temos a ferramenta Lao
que permite
10
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
e de Entrada.
Essas opes podem ser modificadas pelo painel Properties
Texto Esttico: o texto normal. Utilizamos esse tipo de texto no Flash para
11
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.
Agora no Flash CS5 voc pode tambm alternar para o formato de
texto TLF que permite escrita vertical, caracteres orientais,
encadeamento de fluxo de texto, etc. Para saber mais sobre este
novo formato entre em contato com apostilando.com e pea informaes sobre
o curso WebKit 2.
Abaixo temos a ferramenta Linha
ligada - o mesmo
. Para
12
no canto inferior direito aparece uma pequena bolinha, quando o retngulo fica
uniforme como um quadrado a bolinha fica mais forte, isso facilita muito para se
criar objetos perfeitos, outra forma de se criar se criar um quadrado
pressionar a tecla SHIFT enquanto se desenha.
Para desenhar seu retngulo com cantos arredondados externos e internos, ao
selecionar a ferramenta retngulo, voc chama o painel Properties, nele voc
pode alterar tanto cor de contorno e preenchimento como definir o
arredondamento dos cantos.
verso CS4 podemos tambm ngulos de inicio, fim e alterar o raio interno.
13
14
A ferramenta lpis
15
A ferramenta pincel
Deco Tool
Mas na janela de propriedades temos o efeito de desenho (Drawing Effect),
abaixo temos as opes de utilizar ou no smbolos como est marcada a
opo Default Shape o boto Edit esta desabilitado podemos mudar as cores
do efeito
Nas opes avanadas podemos mudar o ngulo e o escalamento do padro
de preenchimento.
Podemos tambm definir se o efeito ser esttico ou podemos animar o
padro.
16
, como so duas
17
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.
18
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.
Ao clicar na ferramenta Gradient Transform Tool
, permite alterar a
19
dentro de outro, por exemplo, se voc importar um bitmap para dentro do flash
20
Erase Normal Apaga como uma 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.
A ferramenta Hand
21
A ultima opo
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.
22
23
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
Ao ser importado o objeto ele fica na palco e mantm uma instncia dele na
biblioteca.
24
25
26
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.
27
28
Importando vdeos
Porm para poder exibir um vdeo dentro do padro de Flash Vdeo ser
necessrio converter ele para FLV
Use o Adobe Media Encoder para convert-lo antes de importar no Flash.
29
30
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
31
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 rolar 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.
32
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 symbolXX), 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.
Ao criar um smbolo, podemos manipul-lo pela barra de propriedades.
33
34
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.
35
Linha do Tempo
A Linha do tempo utilizada na criao de animaes. Atravs dela podemos
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.
.
.
36
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.
37
38
Observe na timeline que ele preenche os quadros com uma cor lils. Ele
39
com
boto
direito
escolha
Create
Motion
Tween.
Ele
automaticamente vai criar quadros em azul claro at o quadro 24 (se a sua taxa
de quadros for essa).
Arraste seu objeto para o outro canto da janela e observe que ele cria uma
linha pontilhada.
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
40
Motion Editor
Quando trabalhamos com Motion Tween, podemos manipular a nossa
animao atravs do Motion editor, aba que fica ao lado da Timeline.
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).
Voc pode ampliar ou reduzir a sua timeline posicionando o mouse
na extremidade direita da animao e ao cursor mudar para um
41
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
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.
42
Camadas
As camadas funcionam no Flash para que possamos trabalhar o empilhamento
de objetos dentro de nossa animao.
Atravs das camadas podemos animar nossos objetos de forma independente.
No podemos ter di objetos animados na mesma camada.
Para criar uma nova Camada, na janela de Timeline clique no boto New Layer
no rodap da janela
43
ocultar a Layer, o segundo permite travar a layer e o terceiro permite ver a layer
em forma Outline.
Ainda sobre a paleta de layers no rodap ao lado do boto de New Layer
temos mais dois botes, um permite criar uma pasta, esse um recurso til em
animaes que utilizem muitas layers em situaes distintas, pois permite
separar elas dentro destas pastas, o terceiro boto permite excluir uma layer
existente.
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.
44
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
45
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.
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
46
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.
47
Observe que ele deixa visvel somente onde os objetos se interceptam. Veja
abaixo a rea de edio natural e depois com a mscara aplicada.
48
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
49
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.
Clique no quadro 1 de sua linha do tempo. Na caixa de propriedades abaixo da
tela, no campo interpolao onde est none escolha SHAPE, observe que
na linha do tempo ao invs de aparecer uma cor lils aparece uma core verdeclaro, isso identifica uma interpolao de forma.
50
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:
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
51
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
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.
52
filme.
Na minha Timeline criei uma animao de Classic Tween e defini uma rotao
no sentido horrio de uma volta em 24 frames (1 segundo). Isso dentro do
Clipe de Filme Pai
Cinemtica Inversa
Com toda a certeza uma das ferramentas mais esperadas nessa nova verso
do Flash foi ferramenta de Bones
esqueleto em seu objeto para que se possa animar seu objeto de forma
53
Selecione a ferramenta Bone Tool e clique onde ser criado o primeiro eixo de
seu esqueleto.
54
Crie seu quadro chave mais a frente e pelos ns de sua armadura mude a
forma de seu desenho, a animao ser criada automaticamente.
55
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.
56
Para que voc possa ter acesso a esses esquemas de animao, clique no
menu Window, Motion Presets.
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.
57
58
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.
59
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#.
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.
60
pressione F9
Na janela de actions clique no boto com o sinal de mais (+), depois navegue
por Global Functions, Timeline Control, goto, clique na opo goto
61
62
Crie uma nova camada acima de sua camada atua e renomeie ela para AS
63
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.
64
Chame o painel de actions (F9) e d um duplo clique na opo play, isso far
com que a animao continue.
Vamos fazer tambm com que o boto ao ser clicado nesse quadro inicie
65
novamente a animao.
Clique no bloco de aes na linha de getURL para selecion-la, depois d um
duplo clique na opo goto na esquerda da janela, automaticamente ser
acrescentada a nova linha abaixo de getURL.
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.
Atualmente o uso das cenas tem sido mais restritos a animaes
Flash para multimdias em CDs, HD, etc., para swfs a serem
apresentados na WEB, elas vo consumir muito espao, ento ela
tem sido substituda por aes de carregamentos de filme, por este motivo no
ser dada uma nfase maior sobre este elemento do Flash.
66
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
documento HTML com o cdigo de insero do para o arquivo swf do Flash.
Para podermos definir quais as propriedades de nossa publicao, clique no
Menu File, Publish Settings.
A primeira guia trs a possibilidade dos formatos a serem definido como projeto
final de seu trabalho:
67
68
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 modo), alinhamento,
escala do swf no HTML.
69
Concluso
Aqui finalizamos o estudo com o Flash CS5. certo que podemos fazer muito
mais com esta espetacular ferramenta.
70