Escolar Documentos
Profissional Documentos
Cultura Documentos
Mdulo 1
Introduo ..................................................................................................................................................... 2
Interface ......................................................................................................................................................... 3
Novo documento ........................................................................................................................................ 5
Camadas ......................................................................................................................................................... 7
Vetor x Bitmap . ............................................................................................................................................ 10
Ferramentas .................................................................................................................................................. 11
Panel Color .................................................................................................................................................... 19
Exerccios:
Bola de basquete . ....................................................................................................................................... 20
Desenhando - Pintinho (Vetor) .............................................................................................................. 22
Mdulo 2
Mdulo 3
Interpolaes ................................................................................................................................................ 28
Smbolos . ....................................................................................................................................................... 29
Movie Clip ...................................................................................................................................................... 31
Exerccios:
Animando Motion ................................................................................................................................... 33
Animando - Shape ...................................................................................................................................... 35
Movie Clip ...................................................................................................................................................... 37
Curva na bola . .............................................................................................................................................. 41
Mdulo 4
Mask ................................................................................................................................................................. 44
Button . ............................................................................................................................................................ 45
Mdulo 5
Cenas ............................................................................................................................................................... 46
Controle do filme (gotoAndPlay, gotoAndStop e stop) ................................................................ 47
Mdulo 6
Carregando . .................................................................................................................................................. 48
Player ............................................................................................................................................................... 51
Mdulo 1
Introduo
OsoftwareAdobeFlashCS3Professionalomaisavanadoambientedepublicaodecontedo
ricoeinterativoparaasplataformasdigitais,webemvel.Criewebsitesinterativos,annciosricosem
mdia,mdiasinstrutivas,apresentaes,jogosemais.UtilizeoFlashCS3eoAdobeFlashPlayerparaassegurar que o seu contedo atinja o maior pblico possvel.
Requisitos do sistema:
Sistema Windows
Processador Intel Pentium 4, Intel Centrino, Intel Xeon ou Intel Core Duo (ou compatvel)
MicrosoftWindowsXPcomServicePack2ouWindowsVistaHomePremium,Business,Ultimate,
ou Enterprise (certificado para edies de 32 bits)
INTERFACE
Panel: Temos vrios tipos de Panels no Flash, como: Align, Library, Color e etc.
Tools: Ferramentas para trabalharmos como arquivos do Flash.
Properties:Seromostradosrecursosnestaparte,quandoforpedidoumnovodocumentoouquando
alguma ferramenta for selecionada.
Filters: Recursos adicionais em textos e em Movie Clips.
Novo Documento
ParainiciarumnovodocumentonoFlashhvriasopescomo:programasparadispositivosmovis,
projetos e arquivos com a linguagem JavaScript.
NocursodewebdesigndaMdia,nofaremosdiferenaentreFlashFile(ActionScript3.0)eFlashFile
(ActionScript 2.0), pois no estudaremos a fundo a linguagem ACTIONSCRIPT.
Criaremosagoranossoprimeirodocumento,noqualpodersercriadonoCREATENEWdoFlashFile
(ActionScript 2.0) ou pelo MENU FILE >>> NEW.
Ostageterotamanho550x400pixelsdefinidocomopadro,maspodemostrocarosvaloresedefinir
um novo tamanho padro para arquivos flash.
Obs.:Nabarradepropriedades.PodemosalteraracordoStagequandoquisersemterqueclicarno
boto do size e ainda definir um valor para frame rate.
Camadas
NoFlash,criaremosdesenhosvetoriaisperfeitos.Elespoderosesoldar/apararpelocorpooupelasua
borda. Observe os exemplos:
1 Exemplo:
Outrabolinhafoicriadaecolocadadoladoda1bolinha.Quando
forretiradaaseleoda2bolinha,teremosumnovoobjetoSOLDADO.
Obs.:Objetosdamesmacor=Objetossoldados(Unidos).
2 Exemplo:
Obs.:Objetoscomcordepreenchimentodiferente=subtrao.
Paraquenoaconteamestescasosquepoderodeix-lofrustradocasosoldarformasnosejasua
inteno, utilizaremos as CAMADAS (LAYERS).
Criando cada objeto em uma nova camada, no haver modificao nos objetos vetoriais.
Em cada camada temos 3 opes:
Vetor x BITMAP
Grficos Bitmaps
Grficosbitmapssoimagensformadaporpixels(pictureelements).Masoqueumpixel?Pixelsso
pequenospontosemseumonitor,comcorebrilhovariados.Indicadospararepresentaodeimagens
comaltonveldedetalhes.OsarquivosBitmapsporseremformadosdispondoaimagempixelapixel,
setiveremseutamanhoaumentadosofrerodistoresconsiderveis,poiscadapontotransformado
emblocosmaioresparacomporaimagemmaior.EntreosprincipaissoftwaresdeedioBitmapesto:
AdobePhotoshop,JascPaintShopProeCorelPhotopaint,algunsdessesprogramastambmtempropriedades Vetoriais, como a ferramenta Shapes do Photoshop.
Grficos Vetoriais
GrficosVetoriaissoimagensformadasporclculosmatemticosexecutadospelocomputador.Agora
vocdeveestarseperguntando:Maseda?OquemudadeVetorparaBitmap?Simplesmentetudo.
Lembra-sequedoispontosAeBdeterminamumareta?AgoraimaginesevocmoveropontoA
para mais distante de B, continuaremos tendo uma reta, porm maior.
Agorasuaperguntadeveser:Entoosgrficosvetoriais,mesmosemodificadosquantoaseutamanho,
largura,etc,continuamomesmo?Issomesmo!Osgrficosvetoriaissecomportamexatamentedesta
maneira.Sevoccriarumquadradopequenoedepoisaumentarseutamanhoem200vezes,oquadrado
continuaromesmo,comamesmadefinioequalidade.AgoraimaginefazerissoemimagensBitmaps.
O quadrado vai ficar distorcido. O grande diferencial entre Bitmap eVetor isso, a capacidade de
transformao.
10
Ferramentas
*Veja vdeo aula no CD-ROM de contedo interativo
Asferramentasqueseromostradasaseguirforamaperfeioadas.ApesardequeoFlashnoespecficoparadesenhosvetoriais,asferramentasvonosajudaradesenharbemmelhorqueasverses
anteriores.
Obs.:Construaseusdesenhosnosprogramas:ILLUSTRATOR,PHOTOSHOPCS3eimporteparaoFLASH
CS3. Estes programas tm uma interao bem maior que a verso anterior.
Oval
A ferramenta elipse do Flash CS3 tem duas opes.
Osdoistiposdeferramentaselipsesobastanteparecidas,
o que vai diferenciar o modo de manipulao delas. EnquantoaOVALTOOLteremosaoportunidadedemodificaroraio,oincioeofimdosegmentoumanicavez,com
a OVAL PRIMITIVETOOL, voc poder modificar quando
quiser. Veremos logo a seguir estas opes.
AlgumasopesvocsjconhecemdoFireworksCS3,oquemudoudeumsoftwareparaooutroforam
asopesSTARTANGLE,ENDANGLE,INNERRADIUS,CLOSEPATH,CAP, JOIN.Asquatrosprimeiras
opes vo ser as diferenas do OVAL TOOL para OVAL PRIMITIVE TOOL.
AsopesCAPeJOINsoutilizadasparalinhaeobjetosqueexistampontas(RetnguloPolgono).Como
podemos separar cada parte do objeto (Linha e preenchimento) podemos utiliza CAP e JOIN.
11
Oval Primitive
Barra de propriedades dessa ferramenta quando selecionada:
Pareceseramesmabarradepropriedades,mastemosasopesSTARTANGLE,ENDANGLE,INNER
RADIUS, CLOSE PATH habilitadas ao desagrupar o objeto.
Desagrupando o objeto 2 vezes (MENU >>> MODIFY >>> UNGROUP) no ter as opes.
12
Rectangle
Na parte inferior da barra de propriedades, temos ento as opes para cantos arredondados. O
cadeadosignificaproporoparaoscantos.Seadicionarovalor32aprimeiracaixinha,todastero32
por proporo. Se desmarcar o cadeado, voc poder mexer nos cantos com mais liberdade.
Rectangle Primitive
Barra de propriedades dessa ferramenta quando selecionada:
13
PolyStar
Barra de propriedades dessa ferramenta quando selecionada:
Por padro, o polgono ter 5 pontas, mas podemos alterar a quantidade de lados do polgono:
Entre as opes:
Style: Polgono ou estrela
Number of sides: Nmero de lados
Star point size: Est opo far com que a estrela fique mais gordinha ou magrinha.
Pencil
Barra de propriedades dessa ferramenta quando selecionada:
14
Pen
Barra de propriedades dessa ferramenta quando selecionada:
Estaferramentasermuitoutilizadaparadesenhosvetoriais.Enquantoasoutrasferramentasteroque
se juntar para desenhar algo, a ferramenta caneta por si s, far tudo.
Texto
AferramentatextodoFlashnoutilizadasomenteparatextos,elapodeservirdecaixadeentradade
dados(INPUT)ouguardardados(CARREGANDO).Almdevermosasprincipaiscaractersticas,daremos
uma passada nestas duas opes da ferramenta de texto.
Nabarradepropriedadesdotexto,temosasopesdeconfiguraodotextonormaleopesde
adicionar link palavra (
Static Text
Como o prprio nome j diz este tipo de texto esttico (intacto). Quando executamos o arquivo
flash,teremosotextonormal,masnopodemosselecionar(amenosquehabilite ),apagarouat
mesmo trocar algum caractere. Este tipo de texto mais utilizado para ttulos. Quando temos um
texto com vrias linhas, necessrio apertar ENTER, seno o texto permanecer com uma linha.
15
Dynamic Text
Aopodynamictext,existeparadiversasidias,como:Informaaousurioondeeleestnavegando,
dataehora,carregandoeassimpordiante,ondeousurionopodealteraainformaoqueestdentro
caixa,maspodemanipulaainformaoviacdigo(ACTIONSCRIPT).Paraentendemosmelhor,vamos
criar uma pequena aplicao com este tipo de caixa.
Crie uma caixa dynamic, como a figura abaixo:
16
Obs.:Oscriptdigitadoconformemostrado,serbemexecutado.Casoexistaerrooflashmostrar.
Preste ateno e tente consertar.
17
Input Text
AopoInputText,serveparadigitarvaloresdentrodacaixa.Elamuitoutilizadaparaformulriosem
flash. Ela funciona da mesma forma das outras caixas.
18
PALETA Color
ApaletaCOLORserveparamanipularascores,adicionandotransparncianacordoobjeto,adicionando
um bitmap (imagem) e adicionando um gradiente, seja ele linear ou radial.
QuandonoestiverdisponveloacessopaletaCOLORdoladoesquerdodajaneladoFLASH,vao
MENU >>> WINDOW >>> COLOR.
19
Exerccio
Bola de basquete
1ComaferramentaELIPSEselecionada,faauma
bolade150pxx150pxcomcontornopretotamanho3pxecompreenchimentovermelho.Renomeiea
camada para BOLA.
2Comaferramentaseleo,cliquesobreopreenchimento (VERMELHO). Com a paleta COLOR maximizada, clique sobre a lista suspensa da opoTYPE e
escolha BITMAP.
20
5Aproximedalinhadesenhada,ataparecerumalinhacurvaembaixodoponteiro.Cliquesegureearrasteparacima,
fazendo com que alinha fique curva.
6Crieoutracamadachamadalinhasverticais.Faa
osmesmosprocedimentosparacriaroseguintedesenho.
7 Salvando o documento - FILE >>> SAVE. Escolha o local onde ir guardar o arquivo e clique
no boto OK. Antes de fechar o arquivo, aperte
CTRL+ENTER,paraqueoarquivoFLASHsejaexecutado.Quandovocestiverdentrodapastaonde
salvouodocumento,terdoisarquivos.Oarquivo
*.FLA o arquivo *.SWF. O arquivo FLA, o arquivooriginaldoFLASH,ouseja,quandoalteraro
arquivo(trocarumacor,adicionarumtextoetc)
vocabrirumarquivo*.FLA.JquandoforpublicaroarquivooseutrabalhoFLASHnaWEB,mande
o arquivo *.SWF.
21
Exerccio
Desenhando
22
MDULO 2
Introduo animao
OFlashmuitoutilizadoparaanimaes.Elasservemtantoparacontedosmaissimplesatcontedos
mais complexos (www.charges.com.br). Utilizaremos com mais nfase a timeline do flash:
Cadadivisoabaixodosnmerosrecebeonomedequadro.Estesquadrossoinfinitos,masquandoum
novo documento criado, o padro 625.
Existem trs tipos de animao no flash:
Quadroaquadro:feitaalterandomanualmenteocontedodecadaquadro-chave(keyframe)
sucessivamente.
Animaodemovimento:feitadefinindodoispontosdaanimao:oincioeofim,permitindo
aoflashligarocontedodosquadrosintermediriosqueexistementreosdoispontosdefinidos.
Animaodeformas:feitadefinindoobjetosdiferentes;umobjetonoiniciodaanimaoeum
objeto no final. Como resultado termos a mesclagem dos objetos criados.
QuandodesenhamosalgonoSTAGE,oquadroficaescuro,indicandoque
humcontedoqualquernestequadro.Quandoestecontedoexcludo
ou no existe, o quadro fica branco.
Podemoscolocarmaisquadrosnatimeline.Bastaselecionaroquadro,irao
MENU >>> TIMELINE escolher entre estas opes.
FRAME (Quadro): Quadro de marcao
(Bolinha Branca). TECLA DE ATALHO: F5.
KEYFRAME (Quadro Chave): Quadro
de fechamento (Bolinha Preta).TECLA DE
ATALHO: F6.
BLANK KEYFRAME (Quadro Chave em
branco):Quadrodemarcaoemseguida
umnovoquadroembranco(Quadrobrancoemseguida,bolinhaBranca).TECLADE
ATALHO: F7.
23
Exerccio
Animando pintinho
2 Faa dois quadros chaves no segundo frame, selecione parte da segunda pata do pintinho.
24
25
6AperteCTRL+ENTER,vejacomoestficando.Aanimaodapataestmuitorpida,criaremosmais
quadroschavesparaquepossasermaisdemorado.Selecioneoquadro1dacamadaCORPOCOR,
aperte F5 (Quadro Frame) 1 vez, faa o mesmo com o quadro 3, selecione e aperte F5. Execute de
novo o arquivo e veja como ficou mais lento.
7Selecioneoquadro5dasduascamadascrieumQUADROCHAVE(F6).Selecionepartedacabea
do pintinho.
26
9 Movimente a cabea do pintinho at ficar certo. Selecione o quadro 12 de cada camada, e crie
FRAMES(F5).Selecioneosquadros1at4dascamadas(CORPOeCOR),cliquecombotodireitoem
cima da faixa preta da seleo e escolha COPY FRAMES.
10 Selecione o quadro 13 das camadas, clique com boto direito na faixa preta e escolha a opo
PASTE FRAME.
11Paraterminar,selecioneoquadro9dacamadaCORPOecrieumquadrochave(F6).Faaomesmo
para o quadro 10 da camada.Volte no quadro 9 da camada CORPO, e apague os olhos do pintinho.
EXECUTE A ANIMAO (CTRL+ENTER).
27
Mdulo 3
Interpolaes
No2mdulovimosaanimaoquadroaquadroqueamaisdemorada,mascomomximodedetalhes. Mas temos auxiliares para alguns tipos de animao que so as animaes MOTION e SHAPE.
Porexemplo,secolocarmosumamoacenandoparaumladoeparaooutro,temosdoispontosprincipais que so o incio e o fim da animao. Observe a figura:
28
Smbolos
*Veja vdeo aula no CD-ROM de contedo interativo
UmSymbol(Smbolo)umobjetousadoreutilizvelcriadoemFlash.OsSymbols(Smbolos)podemser
reutilizadosemtodoofilmeouimportadoseutilizadoemoutrosfilmes.Existemtrstiposdesmbolos:
Graphic (Grfico), Buttom (Boto), e Movieclip (Clipe de Vdeo).
UmacpiadeumsmbolousadonofilmechamadadeInstncia,quepodeterpropriedadesdiferentes
(comocor,tamanho,funo,etc)dooriginalSymbol(Smbolo).TodososSymbols(Smbolos)utilizadosem
umfilmeflashsoguardadosnaLibrary(Biblioteca),deondevocpodearrastaresoltarnovasinstncias
dosSymbol(Smbolo)emseufilme.QuandoumSymbol(Smbolo)editadotodasassuasinstnciasso
atualizadas,masalterandoaspropriedades,efeitosoudimensesdeumainstnciadeumsmbolono
afetar o Symbol (Smbolo) original ou de outras instncias.
ParatransformaroobjetoselecionadoemumsmboloGRFICO,BOTOouMOVIECLIP, bastaselecion-lo e ir ao menu MODIFY >>> CONVERT TO SYMBOL - TECLA DE ATALHO (F8).
29
30
Movie Clip
Clipe de filme independente do clipe principal (RAIZ ROOT). Quando criado um MOVIE CLIP podemoscriaranimaesdentrodele.ComMOVIECLIPS,podemos:Controlarseuincioatofimdesua
animao,aplicarfiltrosexistentesdesdeoFLASH8,criarlinksevriasoutrascoisas,queserobemmais
facis com MOVIE CLIPS.
Para criar MOVIE CLIPS, basta criar um objeto, selecionar e apertar F8 ou MENU >>> MODIFY >>>
CONVERT TO SYMBOL.
31
LIBRARY (Biblioteca)
32
Exerccio
Animando - Motion
2Selecioneobonecoporinteiro,copie.VaoFLASH,peaumnovodocumentoecoleohomem.ai.
Aparecer est mensagem:
33
4Vamosanimaramodohomem.Quandoselecionaramo,elavaiestseparada(DEDOS,UNHAS,
SOMBRASeetc.),mascadaobjetovaiestagrupado.Poderamosdeixarassim,masparanosofrer
interferncias,vamosdesagruparosobjetosetransform-losemumSMBOLOGRFICO.Selecioneos
objetosquecompemamoesquerda,desagrupeosobjetosetransforme-osemumsmbologrfico.
Chame o smbolo grfico como mo e marque o registration (
) na base central.
5SelecioneaferramentaFREETRANSFORM.Coloqueopontobrancoqueexistenomeiodacaixana
base central da mo e rotacione para esquerda.
6 Selecione o quadro 7 da camada mo e crie um quadro chave (F6) e faa o movimento contrrio
com a mo (direita). Crie um quadro (F5) na camada pessoa.
7 Execute a animao. Mande um e-mail para seu instrutor perguntando a ele como se faz o
movimento contrrio copiando os frames.
34
EXERCCIO
Animando - Shape
1AbranoILLUSTRATORoarquivohomem.ai.Crieumacamadachamadatextoecoloqueacimade
todas.
35
5VoltenoprimeiroquadrodacamadatextoeaperteCTRL+Bduasvezes.Issovaiquebrarotextoat
transforma o texto em vetor. Faa o mesmo com o texto do quadro 14.
7Selecionetodososquadros20dascamadaseaperteF5.Executeaanimao.Obs:Selecioneos1
quadros das camadas e aperte F5 5 vezes.
36
Exerccio
Movie Clip
1Abraoarquivofundo.flaeoarquivopitinhoAnimadoFundo.fla.Obs:OarquivopitinhoAnimadoFundo.
flajtemumacamadafundoabaixodetodas.Selecionetodocontedodoarquivofundo.flaecrieum
MOVIE CLIP chamado fundo.
37
2 Selecione o MOVIE CLIP FUNDO e abra o PANEL ALIGN. Marque a opoTO CANVAS e clique nos
2 primeiros botes da opo MATCH SIZE e no 1 E 4 da opo ALIGN.
3Clique2VEZESnoMOVIECLIPFUNDOparaquepossamosentrarnatimelinedoMOVIE.Observe
que na barra inferior da timeline, aparece SCENE 1 -- -- FUNDO.
4 Selecione o sol por inteiro e transforme para MOVIE CLIP com o nome SOL.
38
5 Clique no MOVIE CLIP SOL 2 vezes. O modo de edio se encontra no MOVIE SOL agora.Vamos
girarosol,paraqueelefiquerodandonocu.Comovimosnomdulo2,nopodemosterainterpolao
demovimentonovetor(Desenhosol).Vamoscriarumsmbologrfico,paraquepossamosrodarosol.
Selecioneosolporinteiro,etransformeosolemumsmboloGRFICOchamadosolgrafico(TODO
MINSULO SEM ACENTO).
6Criequadroschaves(F6)nosquadros10,13,18e24.EmcadaquadroselecioneaferramentaFREE
TRANSFORM, e rotacione o sol (ESQUERDA e DIREITA). Crie a interpolao MOTION.
7CliquenoBOTOSCENE1paraquepossamosacabarnossaanimao.Noquadro16dacamada
FUNDO,crieumquadro(F5)etesteaanimao.Aanimaodosolnotemfim,porqueelaestem
umaoutraTIMELINE.Prximaetapadoexercciomovimentarasnuvensparalparac.Mandeo
arquivo FINALIZADO para o e-mail do seu instrutor.
39
Motion Guide
PodemoscontrolarMOVIECLIPSanimadosounoousmbolosGRFICOSporumalinha.Vamossupor
que temos uma bola de futebol ela ter uma curva igual do desenho abaixo:
MesmocriandoMOTIONparamovimentaraBOLA,temosqueselecionarcadaframee
irrotacionandoabolaparaqueelafaaomovimentomaisparecidopossvel.Mascom
a opo guia de movimento, no vamos ter muito trabalho.
40
Exerccio
Curva na bola
41
3 Selecione a bola e transforme em MOVIE CLIP com o nome de bola. Posicione a BOLINHA
BRANCA CENTRAL DO MOVIE CLIP em cima da linha.
42
4Selecioneoquadro20dacamadaBOLAecrieumquadrochave(F6).Agorafaaumquadro(F5)no
frame 20 da camada Guide: Bola. Posicione a bolinha BRANCA da bola no final da linha.
5 Crie a interpolao MOTION na camada bola e teste a animao. A prxima etapa do exerccio
colocarabolinhamenornofinaldacurvaequeelarotacioneduranteopercurso.Faatambmumgole
o goleiro. Mande o arquivo FINALIZADO para o e-mail do seu instrutor.
43
Mdulo 4
Mask (Mscara)
Quandotemosumobjeto(Elipse,retngulo,textoeetc.)nacamadadecima,podemosfazercomque
ele oculte os objeto(s) que esto na casa de baixo.
Observe o exemplo:
44
Button (Boto)
Jvimosostiposdesmbolosquetemosnoflash,mascomosmbolobuttontemosalgunsdetalhesamais
que os outros smbolos.
Comojvimos,paratransformarqualquerobjetoemumsmbolo,bastaselecionaroobjetoeteclarF8.
Estados do boto:
Up: Estado inicial do boto.
Over: Quando passa o mouse em cima do boto.
Down: Quando clica no boto.
Hit: rea sensvel do boto.
45
Mdulo 5
Scenes (Cenas)
DesdeocomeodoFlashestamostrabalhandocomcenas.Podemossimplificaroconceitodecenada
seguintemaneira:estpassandoumanovelanaTVeocorreumcortedecmera(mudanadecenrio),
podemosdizerqueissofoiumamudanadecena.Outramaneiradizerquefilmesdiferentessejam
carregados em cenas diferentes.
ComeamoscomumacenapadronoFlashquesechamascene1,maspodemosalterarseunomeouat
mesmo adicionar mais cenas.
46
Controle do filme
Oscdigosqueseroapresentadosemseguidapodemsercolocadosembotes,moviesenatimeline.
gotoAndPlay(); Quando executado, vai para o quadro indicado e continua a animao.
gotoAndStop(); Quando executado, vai para o quadro indicado e para a animao.
stop(); Pra a execuo do filme.
47
Mdulo 6
Carregando
Este script poder ser alterado para criar mais efeitos, mas s com ele, j se pode carregar o filme
Flash.
1Crie2textos.Um dostextos tero textoCARREGANDOcomotipodecaixaSTATICTEXT eooutro
servir para mostrar o quanto carregou no ter nada digitado, o tipo de caixa DYNAMICTEXT.
2 Clique na caixa DYNAMICTEXT na barra de propriedades na opo var coloque pct. PCT ser a
varivel responsvel por mostrar o valor que carregou.
48
49
Exemplo:
Vamossuporquetemosnopalco500Mbparacarregar.Sesforamcarregados214Mb,porexemplo,
temos:
Dividindo: 214 / 500 = 0,428
Multiplicando: 0,428 * 100 = 42,80
Como temos o MATH.FLOOR = 43
Linha 8: Se o valor carregado for igual a 100, executar o clipe.
50
Player de msica
*Veja vdeo aula no CD-ROM de contedo interativo
51