NDICE

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

Introduo animao ............................................................................................................................ 23 Exerccios: Pintinho Animado ...................................................................................................................................... 24

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)

512MB de rAM (1GB recomendado) 2,5GBdeespaodisponvelemdisco(necessrioumespaolivreadicionalduranteainstalao) resoluo de monitor de 1.024x768 com placa de vdeo de 16 bits unidade de DVD-roM Software Quicktime 7.1.2 necessrio para os recursos multimdia Software DirectX 9.0c Conexo por Internet ou telefone necessria para a ativao do produto Conexo por Internet de banda larga necessria para o Adobe Stock Photos** e outros servios

INtErFACE

Menu: A barra de menu ter todas as aes do Flash. Estudaremos as principais. Start Page: Sero mostrados importantes recursos na tela Start Page, como: open a recent Item: Esta lista quese encontra na parteesquerda daStart Page,mostra arquivosmanipuladosanteriormente,vocpoderclicaremumdosnomesparavoltaamanipularo arquivo. Create New: Criar um novo documento. Create from template: Arquivos prontos do Flash. Extend: Instalar plugin (recurso adicional para o software). Norodapdestajanelaestaopo DontShowAgain.EstaopotiraaStartPagedatelainicialdo Flash,masvocpodervoltarcomatelaaqualquermomento,bastavocclicarem:MenuEDIt>>> PrEFErENCES >>> oN lAuNCH >>> WElCoME SCrEEN.

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:

A bolinha selecionada um vetor. observe os pontos da bolinha.

outrabolinhafoicriadaecolocadadoladoda1bolinha.Quando forretiradaaseleoda2bolinha,teremosumnovoobjetoSolDADo.

obs.:objetosdamesmacor=objetossoldados(unidos).

obs.: objetos cor mesma cor de borda sero soldados.o FlASHSEPArAoPrEENCHIMENtoDABorDA,bastaselecionar a parte que voc quer.

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:

utilizando as opes, temos mais controle sobre a camada. renomear a(s) camada(s) Quandoforadicionandonovascamadas,elasteronomesdefinidospeloFlashcomo:layer1,layer 2,layer3...layerN.Pararenomeara(s)camada(s),devemosclicarsobreonomeduasvezesedigitaro nome para esta camada. Confira o nome e pressione ENtEr.

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.

Quando usar Vetor e quando usar Bitmap:

usandoVetor:osgrficosvetoriaissoutilizadosemimpresses,artepararevistas,folderes,Web.o MacromediaFlashfoioresponsvelpeloboomdaartevetorialnaWeb.ComoaparecimentodatecnologiaShockwave,aMacromediaintroduziuovetorWeb,mdianaqualaartevetorialraramenteaparecia.umareaondeseutilizamuitoasferramentasvetoriaisailustrao,tantoparaquadrinhosquanto parapublicidade.Comaferramentadeilustraovetorial,cria-seocroquiquemaistardetrabalhado em programas de edio bitmaps, para aplicao de detalhes, ou seja, para se dar vida. usandoBitmaps:osgrficosbitmapssoamplamenteutilizadosnaWeb,impresses,cinema,tV,CDroMS,Games,etc.usam-seimagensbaseadasempixelsquandosedesejaumamaiorprofundidade,algo quetransmitamaisvidaparaousurio/observador.usamosoBitmapemmuitoscasos,masnempor issoovetordeveserbanalizado,poismuitosilustradores,comcertezautilizamferramentasvetoriais paracriarsuasobras,sejaocroquiouaartefinal.Enfim,tantoosprogramasVetoriaisquantoosBitmaps soimportantssimosecomcertezaforamrevolucionrioseresponsveispelaexplosodaartedigital nos dias de hoje.

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.

Barra de propriedades dessa ferramenta quando selecionada:

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

A ferramenta rECtANGlEtool rECtANGlE PrIMItIVEtool seguem o mesmo padro das ferramentas oVAl.Pormoquesepodefazernosretnguloscolocar cantos arredondados. Barra de propriedades dessa ferramenta quando selecionada:

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:

Quando quiser alterar os valores dos cantos, a opo estar habilitada.

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:

odesenho com a ferramenta lpis solto(molivre)emuitodifcil.Amenosquevoctenhauma tablet (Mesa digitalizadora).

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 ( ) e mudar para as opes DYNAMIC tEXt INPut tEXt.

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.

obs.: Para criar o texto existem duasmaneiras.Aprimeiraclicar, segurar e arrastar a caixa para o tamanho desejado. A segunda opo s clicar no StAGE.

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:

o principal o INStANCE NAME = dyna. Crie uma nova camada e renomeie para AC Selecione o primeiro frame (Quadradinho) desta camada. Aperte F9 e digite os scripts:

16

/* o curso de flash, no voltado para linguagem ACtIoN SCrIPt. S vai ser mostrado uma aplicao para a caixa Dynamic. Qualquer dvida com relao ao script ou curiosidade, mande um e-mail para: tiago@midiabh.com.br */ //As 4 primeiras linhas como esto, so linhas de comentrio // o smbolo barra-barra utilizado para comentrio com uma nica linha /* o comentrio barra-asterisco + asterisco-barra, para comentrio com mais de uma linha */ // todas as linhas deste script sero comentadas vardyna:textField;/*AcaixaDYNAMICtemonome(INStANCENAME)dyna.tudonaprogramao quandovaireceberumvalor,temonomedevarivel.AquinoFlASH,temosqueespecificar,quetipo de valor que esta varivel vai receber. Ela vai se do tipo textField (Caixa de texto)*/ horario = new Date(); // A classe DAtE, responsvel por minutos, segundos, dias. hora=horario.getHours();//temosumavarhora,quevaiquardarinformaessobreahoradosistema operacional minutos= horario.getMinutes(); //temosuma varminutos,que vai receber informaes sobre os minutos do sistema segundos=horario.getSeconds();//temosumavarsegundos,quevaireceberinformaessobreos segundos do sistema dyna.text=hora+:+minutos+:+segundos;//Pegamostodasasinformaesdasvariveis,ejogamos dentro da caixa dyna /* Execute o arquivo flash apertando Ctrl+ENtEr */ /* lEMBrANDo: o SCrIPt APrESENtADo, NoVAI SEr DISCutIDo DurANtE AulA. EM CASoS DVIDAS, MANDE uM E-MAIl */

obs.:oscriptdigitadoconformemostrado,serbemexecutado.Casoexistaerrooflashmostrar. Preste ateno e tente consertar.

17

Input text AopoInputtext,serveparadigitarvaloresdentrodacaixa.Elamuitoutilizadaparaformulriosem flash. Ela funciona da mesma forma das outras caixas.

Quandocolocamosalgunscampos,elesteroumlimitedecaracteresdentrodacaixa.oCPF,porexemplo, tem 11 nmeros, ento na opo MAXIMuM CHArACtErS s digitar 11.

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.

3 Escolha a textura texturaBolaBasequete.jpg (DVD-roM).

4 Crie outra camada, d o nome a ela de lINHA HorIZoNtAl.Selecioneaferramentalinha,crieuma linha horizontal no meio da bola.

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

1 Abra o pintinho que voc desenhou no mdulo 1.

2 Faa dois quadros chaves no segundo frame, selecione parte da segunda pata do pintinho.

24

3 Selecione a ferramenta FrEEtrANSForM, e mude o eixo de rotao como mostrado na figura.

4 rotacione a rea demarcada.

5 Conserte o desenho, como foi feito no 1 mdulo.

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.

8 V ao MENu >>> MoDIFY >>> trANSForM >>> FlIP HorIZoNtAl.

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:

utilizaremos a opo MotIoN para executar parte da animao. obs1:MotIoN:::AinterpolaoMotIoNNofuncionaemobjetosvetoriais,logovocvercomotransformarobjetos em smbolos. obs 2: SHAPE ::: A interpolao SHAPE No funciona nos objetos AGruPADoS, MoVIEClIPS, BotES e GrFICoS.

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

NAME: Nome do smbolo para referncia para a lIBrArY (Biblioteca). tYPE: tipo do smbolo rEGIStrAtIoN: Eixo

29

Para ter acesso lIBrArY; menu WINDoW >>> lIBrArY.

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.

NAME: Nome para organizar a lIBrArY. tYPE: MoVIE ClIP. rEGIStrAtIoN: EIXo.

31

lIBrArY (BIBlIotECA)

32

EXErCCIo
ANIMANDo - MotIoN

1 Abra no IlluStrAtor o arquivo homem.ai

2Selecioneobonecoporinteiro,copie.VaoFlASH,peaumnovodocumentoecoleohomem.ai. Aparecer est mensagem:

Deixe como est, e clique em oK. 3renomeieacamada2paramo,eacamada1parapessoa.Movaacamada2paracimadacamada1.

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.

2 Selecione os frames 2 at 14 e exclua.

3 Digite o texto: No BEBA... A formatao fica a carter.

35

4 Crie um quadro vazio (F7) no quadro 14 e digite o texto: Pouco!!!

5VoltenoprimeiroquadrodacamadatextoeaperteCtrl+Bduasvezes.Issovaiquebrarotextoat transforma o texto em vetor. Faa o mesmo com o texto do quadro 14.

6 Clique no nome da camada tEXto. Na barra de propriedades escolha a opo SHAPE.

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.

2 Copie o MoVIE ClIP (FuNDo) e cole na camada fundo do arquivo pintinhoAnimadoFundo.fla.

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

1 Abra o arquivo bola.fla.

2 Clique no boto MotIoN GuIDE (

) e desenhe uma curva.

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.

Clicando sobre o smbolo button temos a seguinte tela:

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

Acesse o MENu WINDoW >>> otHEr PANElS >>> SCENE. Paratrocaronomedacena,bastaclicarduasvezessobreonomeSCENE1ealteraronome.Paraadicionar umanovacena,bastaclicarnosinaldemaisnorodap dajanelinha.Paraexcluir,selecioneacenaecliquena lixeira.

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

obs.: o curso no voltado para a programao action script. Ensinaremos a criar um preloader (carregando) simples no Flash.

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

3SelecioneodoisobjetosdoStAGEeconvertaemsmboloMoVIEClIPchamadopreoloader.Selecione o MoVIE ClIP aperte F9 e digite o seguinte cdigo:

linha1:movieEventumdispositivodeativaochamadoevento.Quandooeventoocorre,soexecutados os comandos posteriores a ele entre chaves. load: A ao iniciada assim que o clipe de filme criado e aparece na linha de tempo. linha 2: retorna o nmero total de bytes descarregados por uma operao load joga dentro da varivel total. linha 3: Pra o clipe de filme em execuo no momento. linha5:movieEventumdispositivodeativaochamadoevento.Quandooeventoocorre,soexecutados os comandos posteriores a ele entre chaves. enterFrame: A ao disparada continuamente taxa de quadros do filme. As aes associadas ao evento do clipe enterFrame so processadas depois das aes que tenham sido anexadas aos quadros afetados. linha 6: Quantos bytes foram carregados at o momento joga para dentro da varivel loaded. linha7:pct a caixa que est dentro doMoVIEClIP.Elaserresponsvelemmostraquantosbytes foramcarregadosatomomento.NestalinhaexisteumaclassematemticaMAtH.Floorquemostra somenteonmerointeiro.Assimpegoquantofoicarregadoquantotemparacarregar,divideosdois nmeros multiplica por 100.

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

obs.: o curso no voltado para a programao action script.

51