ÍNDICE

Módulo 1
Introdução .................................................................................................................................................... 2 Interface ......................................................................................................................................................... 3 Novo documento ....................................................................................................................................... 5 Camadas ........................................................................................................................................................ 7 Vetor x Bitmap ............................................................................................................................................. 10 Ferramentas ................................................................................................................................................. 11 Panel Color .................................................................................................................................................... 19 Exercícios: Bola de basquete ........................................................................................................................................ 20 Desenhando - Pintinho (Vetor) ............................................................................................................. 22

Módulo 2

Introdução à animação ............................................................................................................................ 23 Exercícios: Pintinho Animado ...................................................................................................................................... 24

Módulo 3

Interpolações ............................................................................................................................................... 28 Símbolos ........................................................................................................................................................ 29 Movie Clip ..................................................................................................................................................... 31 Exercícios: Animando – Motion .................................................................................................................................. 33 Animando - Shape ..................................................................................................................................... 35 Movie Clip ..................................................................................................................................................... 37 Curva na bola ............................................................................................................................................... 41

Módulo 4

Mask ................................................................................................................................................................ 44 Button ............................................................................................................................................................. 45

Módulo 5

Cenas .............................................................................................................................................................. 46 Controle do filme (gotoAndPlay, gotoAndStop e stop) ............................................................... 47

Módulo 6

Carregando ................................................................................................................................................... 48 Player .............................................................................................................................................................. 51

1

MóDulo 1
INtroDução

osoftwareAdobe®Flash®CS3Professionaléomaisavançadoambientedepublicaçãodeconteúdo ricoeinterativoparaasplataformasdigitais,webemóvel.Criewebsitesinterativos,anúnciosricosem mídia,mídiasinstrutivas,apresentações,jogosemais.utilizeoFlashCS3eoAdobeFlashPlayerparaassegurar que o seu conteúdo atinja o maior público possível. requisitos do sistema: Sistema Windows

• Processador Intel® Pentium® 4, Intel Centrino®, Intel Xeon® ou Intel Core™ Duo (ou compatível) •Microsoft®WindowsXPcomServicePack2ouWindowsVista™HomePremium,Business,ultimate,
ou Enterprise (certificado para edições de 32 bits)

• 512MB de rAM (1GB recomendado) •2,5GBdeespaçodisponívelemdisco(énecessárioumespaçolivreadicionalduranteainstalação) • resolução de monitor de 1.024x768 com placa de vídeo de 16 bits • unidade de DVD-roM • Software Quicktime 7.1.2 necessário para os recursos multimídia • Software DirectX 9.0c • Conexão por Internet ou telefone necessária para a ativação do produto • Conexão por Internet de banda larga necessária para o Adobe Stock Photos** e outros serviços

2

INtErFACE

Menu: A barra de menu terá todas as ações do Flash. Estudaremos as principais. Start Page: Serão mostrados importantes recursos na tela Start Page, como: open a recent Item: Esta lista quese encontra na parteesquerda daStart Page,mostra arquivosmanipuladosanteriormente,vocêpoderáclicaremumdosnomesparavoltaamanipularo arquivo. Create New: Criar um novo documento. Create from template: Arquivos prontos do Flash. Extend: Instalar plugin (recurso adicional para o software). Norodapédestajanelaestáaopção Don’tShowAgain.EstaopçãotiraaStartPagedatelainicialdo Flash,masvocêpoderávoltarcomatelaaqualquermomento,bastavocêclicarem:MenuEDIt>>> PrEFErENCES >>> oN lAuNCH >>> WElCoME SCrEEN.

3

Panel: temos vários tipos de Panels no Flash, como: Align, library, Color e etc. tools: Ferramentas para trabalharmos como arquivos do Flash. Properties:Serãomostradosrecursosnestaparte,quandoforpedidoumnovodocumentoouquando alguma ferramenta for selecionada. Filters: recursos adicionais em textos e em Movie Clips.

4

NoVo DoCuMENto

ParainiciarumnovodocumentonoFlashháváriasopçõescomo:programasparadispositivosmovéis, projetos e arquivos com a linguagem JavaScript. NocursodewebdesigndaMídia,nãofaremosdiferençaentreFlashFile(ActionScript3.0)eFlashFile (ActionScript 2.0), pois não estudaremos a fundo a linguagem ACtIoNSCrIPt.

Criaremosagoranossoprimeirodocumento,noqualpoderásercriadonoCrEAtENEWdoFlashFile (ActionScript 2.0) ou pelo MENu FIlE >>> NEW.

5

ostageteráotamanho550x400pixelsdefinidocomopadrão,maspodemostrocarosvaloresedefinir um novo tamanho padrão para arquivos flash.

obs.:Nabarradepropriedades.PodemosalteraracordoStagequandoquisersemterqueclicarno botão do size e ainda definir um valor para frame rate.

6

CAMADAS

NoFlash,criaremosdesenhosvetoriaisperfeitos.Elespoderãosesoldar/apararpelocorpooupelasua borda. observe os exemplos:

1º Exemplo:

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

outrabolinhafoicriadaecolocadadoladoda1ºbolinha.Quando forretiradaaseleçãoda2ºbolinha,teremosumnovoobjetoSolDADo.

7

obs.:objetosdamesmacor=objetossoldados(unidos).

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

2º Exemplo:

obs.:objetoscomcordepreenchimentodiferente=subtração.

8

Paraquenãoaconteçamestescasosquepoderãodeixá-lofrustradocasosoldarformasnãosejasua intenção, utilizaremos as CAMADAS (lAYErS).

Criando cada objeto em uma nova camada, não haverá modificação nos objetos vetoriais. Em cada camada temos 3 opções:

utilizando as opções, temos mais controle sobre a camada. renomear a(s) camada(s) Quandoforadicionandonovascamadas,elasterãonomesdefinidospeloFlashcomo:layer1,layer 2,layer3...layerN.Pararenomeara(s)camada(s),devemosclicarsobreonomeduasvezesedigitaro nome para esta camada. Confira o nome e pressione ENtEr.

9

VEtor X BItMAP

• Gráficos Bitmaps
Gráficosbitmapssãoimagensformadaporpixels(pictureelements).Masoqueéumpixel?Pixelssão pequenospontosemseumonitor,comcorebrilhovariados.Indicadospararepresentaçãodeimagens comaltoníveldedetalhes.osarquivosBitmapsporseremformadosdispondoaimagempixelapixel, setiveremseutamanhoaumentadosofrerãodistorçõesconsideráveis,poiscadapontoétransformado emblocosmaioresparacomporaimagemmaior.EntreosprincipaissoftwaresdeediçãoBitmapestão: AdobePhotoshop,JascPaintShopProeCorelPhotopaint,algunsdessesprogramastambémtempropriedades Vetoriais, como a ferramenta Shapes do Photoshop.

• Gráficos Vetoriais
GráficosVetoriaissãoimagensformadasporcálculosmatemáticosexecutadospelocomputador.Agora vocêdeveestarseperguntando:“Masedaí?oquemudadeVetorparaBitmap?”Simplesmentetudo. lembra-sequedoispontos“A”e“B”determinamumareta?Agoraimaginesevocêmoveroponto“A” para mais distante de “B”, continuaremos tendo uma reta, porém maior. Agorasuaperguntadeveser:“Entãoosgráficosvetoriais,mesmosemodificadosquantoaseutamanho, largura,etc,continuamomesmo?”Issomesmo!osgráficosvetoriaissecomportamexatamentedesta maneira.Sevocêcriarumquadradopequenoedepoisaumentarseutamanhoem200vezes,oquadrado continuaráomesmo,comamesmadefiniçãoequalidade.AgoraimaginefazerissoemimagensBitmaps. o quadrado vai ficar distorcido. o grande diferencial entre Bitmap eVetor é isso, a capacidade de transformação.

• Quando usar Vetor e quando usar Bitmap:
usandoVetor:osgráficosvetoriaissãoutilizadosemimpressões,artepararevistas,folderes,Web.o MacromediaFlashfoioresponsávelpeloboomdaartevetorialnaWeb.ComoaparecimentodatecnologiaShockwave,aMacromediaintroduziuovetoràWeb,mídianaqualaartevetorialraramenteaparecia.umaáreaondeseutilizamuitoasferramentasvetoriaiséailustração,tantoparaquadrinhosquanto parapublicidade.Comaferramentadeilustraçãovetorial,cria-seocroquiquemaistardeétrabalhado em programas de edição bitmaps, para aplicação de detalhes, ou seja, para se dar vida. usandoBitmaps:osgráficosbitmapssãoamplamenteutilizadosnaWeb,impressões,cinema,tV,CDroMS,Games,etc.usam-seimagensbaseadasempixelsquandosedesejaumamaiorprofundidade,algo quetransmitamais“vida”paraousuário/observador.usamosoBitmapemmuitoscasos,masnempor issoovetordeveserbanalizado,poismuitosilustradores,comcertezautilizamferramentasvetoriais paracriarsuasobras,sejaocroquiouaartefinal.Enfim,tantoosprogramasVetoriaisquantoosBitmaps sãoimportantíssimosecomcertezaforamrevolucionárioseresponsáveispelaexplosãodaartedigital nos dias de hoje.

10

FErrAMENtAS
*Veja vídeo aula no CD-roM de conteúdo interativo

Asferramentasqueserãomostradasaseguirforamaperfeiçoadas.ApesardequeoFlashnãoéespecíficoparadesenhosvetoriais,asferramentasvãonosajudaradesenharbemmelhorqueasversões anteriores. obs.:Construaseusdesenhosnosprogramas:IlluStrAtor,PHotoSHoPCS3eimporteparaoFlASH CS3. Estes programas têm uma interação bem maior que a versão anterior.

oval A ferramenta elipse do Flash CS3 tem duas opções. osdoistiposdeferramentaselipsesãobastanteparecidas, o que vai diferenciar é o modo de manipulação delas. EnquantoaoVAltoolteremosaoportunidadedemodificaroraio,oinícioeofimdosegmentoumaúnicavez,com a oVAl PrIMItIVEtool, você poderá modificar quando quiser. Veremos logo a seguir estas opções.

Barra de propriedades dessa ferramenta quando selecionada:

AlgumasopçõesvocêsjáconhecemdoFireworksCS3,oquemudoudeumsoftwareparaooutroforam asopçõesStArtANGlE,ENDANGlE,INNErrADIuS,CloSEPAtH,CAP, JoIN.Asquatrosprimeiras opções vão ser as diferenças do oVAl tool para oVAl PrIMItIVE tool. AsopçõesCAPeJoINsãoutilizadasparalinhaeobjetosqueexistampontas(retânguloPolígono).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,mastemosasopçõesStArtANGlE,ENDANGlE,INNEr rADIuS, CloSE PAtH habilitadas ao desagrupar o objeto.

Desagrupando o objeto 2 vezes (MENu >>> MoDIFY >>> uNGrouP) não terá as opções.

12

rectangle

A ferramenta rECtANGlEtool é rECtANGlE PrIMItIVEtool seguem o mesmo padrão das ferramentas oVAl.Porémoquesepodefazernosretângulosécolocar cantos arredondados. Barra de propriedades dessa ferramenta quando selecionada:

Na parte inferior da barra de propriedades, temos então as opções para cantos arredondados. o cadeadosignificaproporçãoparaoscantos.Seadicionarovalor32aprimeiracaixinha,todasterão32 por proporção. 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 opção estará habilitada.

13

PolyStar Barra de propriedades dessa ferramenta quando selecionada:

Por padrão, o polígono terá 5 pontas, mas podemos alterar a quantidade de lados do polígono:

Entre as opções: Style: Polígono ou estrela Number of sides: Número de lados Star point size: Está opção fará com que a estrela fique mais “gordinha” ou “magrinha”. Pencil Barra de propriedades dessa ferramenta quando selecionada:

odesenho com a ferramenta lápis é solto(àmãolivre)emuitodifícil.Amenosquevocêtenhauma tablet (Mesa digitalizadora).

14

Pen Barra de propriedades dessa ferramenta quando selecionada:

Estaferramentaserámuitoutilizadaparadesenhosvetoriais.Enquantoasoutrasferramentasterãoque se juntar para desenhar algo, a ferramenta caneta por si só, fará tudo. texto AferramentatextodoFlashnãoéutilizadasomenteparatextos,elapodeservirdecaixadeentradade dados(INPut)ouguardardados(CArrEGANDo).Alémdevermosasprincipaiscaracterísticas,daremos uma passada nestas duas opções da ferramenta de texto.

Nabarradepropriedadesdotexto,temosasopçõesdeconfiguraçãodotextonormaleopçõesde adicionar link à palavra ( ) e mudar para as opções DYNAMIC tEXt é INPut tEXt.

Static text Como o próprio nome já diz este tipo de texto é estático (intacto). Quando executamos o arquivo flash,teremosotextonormal,masnãopodemosselecionar(amenosquehabilite ),apagarouaté mesmo trocar algum caractere. Este tipo de texto é mais utilizado para títulos. Quando temos um texto com várias linhas, é necessário apertar ENtEr, senão o texto permanecerá com uma linha.

obs.: Para criar o texto existem duasmaneiras.Aprimeiraéclicar, segurar e arrastar a caixa para o tamanho desejado. A segunda opção é só clicar no StAGE.

15

Dynamic text Aopçãodynamictext,existeparadiversasidéias,como:Informaaousuárioondeeleestánavegando, dataehora,carregandoeassimpordiante,ondeousuárionãopodealteraainformaçãoqueestádentro caixa,maspodemanipulaainformaçãoviacódigo(ACtIoNSCrIPt).Paraentendemosmelhor,vamos criar uma pequena aplicação 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, não é voltado para linguagem ACtIoN SCrIPt. Só vai ser mostrado uma aplicação para a caixa Dynamic. Qualquer dúvida com relação ao script ou curiosidade, mande um e-mail para: tiago@midiabh.com.br */ //As 4 primeiras linhas como estão, são linhas de comentário // o símbolo barra-barra é utilizado para comentário com uma única linha /* o comentário barra-asterisco + asterisco-barra, é para comentário com mais de uma linha */ // todas as linhas deste script serão comentadas vardyna:textField;/*AcaixaDYNAMICtemonome(INStANCENAME)dyna.tudonaprogramação quandovaireceberumvalor,temonomedevariável.AquinoFlASH,temosqueespecificar,quetipo de valor que esta variável vai receber. Ela vai se do tipo textField (Caixa de texto)*/ horario = new Date(); // A classe DAtE, é responsável por minutos, segundos, dias. hora=horario.getHours();//temosumavarhora,quevaiquardarinformaçõessobreahoradosistema operacional minutos= horario.getMinutes(); //temosuma varminutos,que vai receber informações sobre os minutos do sistema segundos=horario.getSeconds();//temosumavarsegundos,quevaireceberinformaçõessobreos segundos do sistema dyna.text=hora+”:”+minutos+”:”+segundos;//Pegamostodasasinformaçõesdasvariáveis,ejogamos dentro da caixa dyna /* Execute o arquivo flash apertando Ctrl+ENtEr */ /* lEMBrANDo: o SCrIPt APrESENtADo, NãoVAI SEr DISCutIDo DurANtE AulA. EM CASoS DÚVIDAS, MANDE uM E-MAIl */

obs.:oscriptdigitadoconformemostrado,serábemexecutado.Casoexistaerrooflashmostrará. Preste atenção e tente consertar.

17

Input text AopçãoInputtext,serveparadigitarvaloresdentrodacaixa.Elaémuitoutilizadaparaformuláriosem flash. Ela funciona da mesma forma das outras caixas.

Quandocolocamosalgunscampos,elesterãoumlimitedecaracteresdentrodacaixa.oCPF,porexemplo, tem 11 números, então na opção MAXIMuM CHArACtErS é só digitar 11.

18

PAlEtA Color

ApaletaColorserveparamanipularascores,adicionandotransparêncianacordoobjeto,adicionando um bitmap (imagem) e adicionando um gradiente, seja ele linear ou radial. QuandonãoestiverdisponíveloacessoàpaletaColordoladoesquerdodajaneladoFlASH,váao MENu >>> WINDoW >>> Color.

19

EXErCÍCIo
BolA DE BASQuEtE

1ºComaferramentaElIPSEselecionada,façauma bolade150pxx150pxcomcontornopretotamanho3pxecompreenchimentovermelho.renomeiea camada para BolA.

2ºComaferramentaseleção,cliquesobreopreenchimento (VErMElHo). Com a paleta Color maximizada, clique sobre a lista suspensa da opçãotYPE 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

5ºAproximedalinhadesenhada,atéaparecerumalinhacurvaembaixodoponteiro.Cliquesegureearrasteparacima, fazendo com que alinha fique curva.

6ºCrieoutracamadachamadalinhasverticais.Faça osmesmosprocedimentosparacriaroseguintedesenho.

7º Salvando o documento - FIlE >>> SAVE. Escolha o local onde irá guardar o arquivo e clique no botão oK. Antes de fechar o arquivo, aperte Ctrl+ENtEr,paraqueoarquivoFlASHsejaexecutado.Quandovocêestiverdentrodapastaonde salvouodocumento,terádoisarquivos.oarquivo *.FlA é o arquivo *.SWF. o arquivo FlA, é o arquivooriginaldoFlASH,ouseja,quandoalteraro arquivo(trocarumacor,adicionarumtextoéetc) vocêabriráumarquivo*.FlA.JáquandoforpublicaroarquivooseutrabalhoFlASHnaWEB,mande o arquivo *.SWF.

21

EXErCÍCIo
DESENHANDo

22

MóDulo 2
INtroDução à ANIMAção

oFlashémuitoutilizadoparaanimações.Elasservemtantoparaconteúdosmaissimplesatéconteúdos mais complexos (www.charges.com.br). utilizaremos com mais ênfase a timeline do flash:

Cadadivisãoabaixodosnúmerosrecebeonomedequadro.Estesquadrossãoinfinitos,masquandoum novo documento é criado, o padrão é 625. Existem três tipos de animação no flash: Quadroaquadro:éfeitaalterandomanualmenteoconteúdodecadaquadro-chave(keyframe) sucessivamente. Animaçãodemovimento:éfeitadefinindodoispontosdaanimação:oinícioeofim,permitindo aoflashligaroconteúdodosquadrosintermediáriosqueexistementreosdoispontosdefinidos. Animaçãodeformas:éfeitadefinindoobjetosdiferentes;umobjetonoiniciodaanimaçãoeum objeto no final. Como resultado termos a mesclagem dos objetos criados. QuandodesenhamosalgonoStAGE,oquadroficaescuro,indicandoque háumconteúdoqualquernestequadro.Quandoesteconteúdoéexcluído ou não existe, o quadro fica branco. Podemoscolocarmaisquadrosnatimeline.Bastaselecionaroquadro,irao MENu >>> tIMElINE é escolher entre estas opções. FrAME (Quadro): Quadro de marcação (Bolinha Branca). tEClA DE AtAlHo: F5. KEYFrAME (Quadro Chave): Quadro de fechamento (Bolinha Preta).tEClA DE AtAlHo: F6. BlANK KEYFrAME (Quadro Chave em branco):Quadrodemarcaçãoemseguida umnovoquadroembranco(Quadrobrancoemseguida,bolinhaBranca).tEClADE AtAlHo: F7.

23

EXErCÍCIo
ANIMANDo PINtINHo

1º Abra o pintinho que você desenhou no módulo 1.

2º Faça dois quadros chaves no segundo frame, selecione parte da segunda pata do pintinho.

24

3º Selecione a ferramenta FrEEtrANSForM, e mude o eixo de rotação como mostrado na figura.

4º rotacione a área demarcada.

5º Conserte o desenho, como foi feito no 1º módulo.

25

6ºAperteCtrl+ENtEr,vejacomoestáficando.Aanimaçãodapataestámuitorápida,criaremosmais quadroschavesparaquepossasermaisdemorado.Selecioneoquadro1dacamadaCorPoéCor, aperte F5 (Quadro – Frame) 1 vez, faça o mesmo com o quadro 3, selecione e aperte F5. Execute de novo o arquivo e veja como ficou mais lento.

7ºSelecioneoquadro5dasduascamadasécrieumQuADroCHAVE(F6).Selecioneparteda“cabeça” do pintinho.

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

26

9º Movimente a cabeça do pintinho até ficar certo. Selecione o quadro 12 de cada camada, e crie FrAMES(F5).Selecioneosquadros1até4dascamadas(CorPoeCor),cliquecombotãodireitoem cima da faixa preta da seleção e escolha CoPY FrAMES.

10º Selecione o quadro 13 das camadas, clique com botão direito na faixa preta e escolha a opção PAStE FrAME.

11ºParaterminar,selecioneoquadro9dacamadaCorPoecrieumquadrochave(F6).Façaomesmo para o quadro 10 da camada.Volte no quadro 9 da camada CorPo, e apague os olhos do pintinho. EXECutE A ANIMAção (Ctrl+ENtEr).

27

MóDulo 3
INtErPolAçõES

No2ºmódulovimosaanimaçãoquadroaquadroqueéamaisdemorada,mascomomáximodedetalhes. Mas temos auxiliares para alguns tipos de animação que são as animações MotIoN e SHAPE. Porexemplo,secolocarmosumamãoacenandoparaumladoeparaooutro,temosdoispontosprincipais que são o início e o fim da animação. observe a figura:

utilizaremos a opção MotIoN para executar parte da animação. obs1:MotIoN:::AinterpolaçãoMotIoNNãofuncionaemobjetosvetoriais,logovocêverácomotransformarobjetos em símbolos. obs 2: SHAPE ::: A interpolação SHAPE Não funciona nos objetos AGruPADoS, MoVIEClIPS, BotõES e GrÁFICoS.

28

SÍMBoloS
*Veja vídeo aula no CD-roM de conteúdo interativo

umSymbol(Símbolo)éumobjetousadoreutilizávelcriadoemFlash.osSymbols(Símbolos)podemser reutilizadosemtodoofilmeouimportadoseutilizadoemoutrosfilmes.Existemtrêstiposdesímbolos: Graphic (Gráfico), Buttom (Botão), e Movieclip (Clipe de Vídeo). umacópiadeumsímbolousadonofilmeéchamadadeInstância,quepodeterpropriedadesdiferentes (comocor,tamanho,função,etc)dooriginalSymbol(Símbolo).todososSymbols(Símbolos)utilizadosem umfilmeflashsãoguardadosnalibrary(Biblioteca),deondevocêpodearrastaresoltarnovasinstâncias dosSymbol(Símbolo)emseufilme.QuandoumSymbol(Símbolo)éeditadotodasassuasinstânciassão atualizadas,masalterandoaspropriedades,efeitosoudimensõesdeumainstânciadeumsímbolonão afetará o Symbol (Símbolo) original ou de outras instâncias. ParatransformaroobjetoselecionadoemumsímboloGrÁFICo,BotãoouMoVIEClIP, bastaselecioná-lo e ir ao menu MoDIFY >>> CoNVErt to SYMBol - tEClA DE AtAlHo (F8).

NAME: Nome do símbolo para referência para a lIBrArY (Biblioteca). tYPE: tipo do símbolo 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 podemoscriaranimaçõesdentrodele.ComMoVIEClIPS,podemos:Controlarseuinícioatéofimdesua animação,aplicarfiltrosexistentesdesdeoFlASH8,criarlinkseváriasoutrascoisas,queserãobemmais facéis 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

EXErCÍCIo
ANIMANDo - MotIoN

1º Abra no IlluStrAtor o arquivo homem.ai

2ºSelecioneobonecoporinteiro,copie.VáaoFlASH,peçaumnovodocumentoecoleohomem.ai. Aparecerá está mensagem:

Deixe como está, e clique em oK. 3ºrenomeieacamada2paramão,eacamada1parapessoa.Movaacamada2paracimadacamada1.

33

4ºVamosanimaramãodohomem.Quandoselecionaramão,elavaiestáseparada(DEDoS,uNHAS, SoMBrASeetc.),mascadaobjetovaiestáagrupado.Poderíamosdeixarassim,masparanãosofrer interferências,vamosdesagruparosobjetosetransformá-losemumSÍMBoloGrÁFICo.Selecioneos objetosquecompõemamãoesquerda,desagrupeosobjetosetransforme-osemumsímbolográfico. Chame o símbolo gráfico como mão e marque o registration ( ) na base central.

5ºSelecioneaferramentaFrEEtrANSForM.Coloqueopontobrancoqueexistenomeiodacaixana base central da mão e rotacione para esquerda.

6º Selecione o quadro 7 da camada mão e crie um quadro chave (F6) e faça o movimento contrário com a mão (direita). Crie um quadro (F5) na camada pessoa.

7º Execute a animação. Mande um e-mail para seu instrutor perguntando a ele como se faz o movimento contrário copiando os frames.

34

EXErCÍCIo
ANIMANDo - SHAPE

1ºAbranoIlluStrAtoroarquivohomem.ai.Crieumacamadachamadatextoecoloqueacimade todas.

2º Selecione os frames 2 até 14 e exclua.

3º Digite o texto: “Não BEBA...” A formatação fica a caráter.

35

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

5ºVoltenoprimeiroquadrodacamadatextoeaperteCtrl+Bduasvezes.Issovaiquebrarotextoaté transforma o texto em vetor. Faça o mesmo com o texto do quadro 14.

6º Clique no nome da camada tEXto. Na barra de propriedades escolha a opção SHAPE.

7ºSelecionetodososquadros20dascamadaseaperteF5.Executeaanimação.obs:Selecioneos1 quadros das camadas e aperte F5 5 vezes.

36

EXErCÍCIo
MoVIE ClIP

1ºAbraoarquivofundo.flaeoarquivopitinhoAnimadoFundo.fla.obs:oarquivopitinhoAnimadoFundo. flajátemumacamadafundoabaixodetodas.Selecionetodoconteúdodoarquivofundo.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 opçãoto CANVAS e clique nos 2 primeiros botões da opção MAtCH SIZE e no 1º E 4º da opção AlIGN.

3ºClique2VEZESnoMoVIEClIPFuNDoparaquepossamosentrarnatimelinedoMoVIE.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 edição se encontra no MoVIE Sol agora.Vamos girarosol,paraqueelefiquerodandonocéu.Comovimosnomódulo2,nãopodemosterainterpolação demovimentonovetor(Desenhosol).Vamoscriarumsímbolográfico,paraquepossamosrodarosol. Selecioneosolporinteiro,etransformeosolemumsímboloGrÁFICochamado“solgrafico”(toDo MINÚSulo SEM ACENto).

6ºCriequadroschaves(F6)nosquadros10,13,18e24.EmcadaquadroselecioneaferramentaFrEE trANSForM, e rotacione o sol (ESQuErDA e DIrEItA). Crie a interpolação MotIoN.

7ºCliquenoBotãoSCENE1paraquepossamosacabarnossaanimação.Noquadro16dacamada FuNDo,crieumquadro(F5)etesteaanimação.Aanimaçãodosolnãotemfim,porqueelaestáem umaoutratIMElINE.Próximaetapadoexercícioémovimentarasnuvensparaláéparacá.Mandeo arquivo FINAlIZADo para o e-mail do seu instrutor.

39

MotIoN GuIDE

PodemoscontrolarMoVIEClIPSanimadosounãoousímbolosGrÁFICoSporumalinha.Vamossupor que temos uma bola de futebol é ela terá uma curva igual à do desenho abaixo: MesmocriandoMotIoNparamovimentaraBolA,temosqueselecionarcadaframee irrotacionandoabolaparaqueelafaçaomovimentomaisparecidopossível.Mascom a opção guia de movimento, não vamos ter muito trabalho.

40

EXErCÍCIo
CurVA NA BolA

1º Abra o arquivo bola.fla.

2º Clique no botão 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

4ºSelecioneoquadro20dacamadaBolAecrieumquadrochave(F6).Agorafaçaumquadro(F5)no frame 20 da camada Guide: Bola. Posicione a bolinha BrANCA da bola no final da linha.

5º Crie a interpolação MotIoN na camada bola e teste a animação. A próxima etapa do exercício é colocarabolinhamenornofinaldacurvaequeelarotacioneduranteopercurso.Façatambémumgole o goleiro. Mande o arquivo FINAlIZADo para o e-mail do seu instrutor.

43

MóDulo 4
MASK (MÁSCArA)

Quandotemosumobjeto(Elipse,retângulo,textoeetc.)nacamadadecima,podemosfazercomque ele oculte os objeto(s) que estão na casa de baixo. observe o exemplo:

44

ButtoN (Botão)

Jávimosostiposdesímbolosquetemosnoflash,mascomosímbolobuttontemosalgunsdetalhesamais que os outros símbolos. Comojávimos,paratransformarqualquerobjetoemumsímbolo,bastaselecionaroobjetoeteclarF8.

Clicando sobre o símbolo button temos a seguinte tela:

Estados do botão: up: Estado inicial do botão. over: Quando passa o mouse em cima do botão. Down: Quando clica no botão. Hit: Área sensível do botão.

45

MóDulo 5
SCENES (CENAS)

DesdeocomeçodoFlashestamostrabalhandocomcenas.Podemossimplificaroconceitodecenada seguintemaneira:estápassandoumanovelanatVeocorreumcortedecâmera(mudançadecenário), podemosdizerqueissofoiumamudançadecena.outramaneiraédizerquefilmesdiferentessejam carregados em cenas diferentes. ComeçamoscomumacenapadrãonoFlashquesechamascene1,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

oscódigosqueserãoapresentadosemseguidapodemsercolocadosembotões,moviesenatimeline. gotoAndPlay(); Quando executado, vai para o quadro indicado e continua a animação. gotoAndStop(); Quando executado, vai para o quadro indicado e para a animação. stop(); Pára a execução do filme.

47

MóDulo 6
CArrEGANDo

obs.: o curso não é voltado para a programação 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. 1ºCrie2textos.um dostextos teráo textoCArrEGANDocomotipodecaixaStAtICtEXt eooutro servirá para mostrar o quanto carregou é não terá nada digitado, o tipo de caixa é DYNAMICtEXt.

2º Clique na caixa DYNAMICtEXt é na barra de propriedades na opção var coloque pct. PCt será a variável responsável por mostrar o valor que carregou.

48

3ºSelecioneodoisobjetosdoStAGEeconvertaemsímboloMoVIEClIPchamadopreoloader.Selecione o MoVIE ClIP aperte F9 e digite o seguinte código:

linha1:movieEventéumdispositivodeativaçãochamadoevento.Quandooeventoocorre,sãoexecutados os comandos posteriores a ele entre chaves. load: A ação é iniciada assim que o clipe de filme é criado e aparece na linha de tempo. linha 2: retorna o número total de bytes descarregados por uma operação load é joga dentro da variável total. linha 3: Pára o clipe de filme em execução no momento. linha5:movieEventéumdispositivodeativaçãochamadoevento.Quandooeventoocorre,sãoexecutados os comandos posteriores a ele entre chaves. enterFrame: A ação é disparada continuamente à taxa de quadros do filme. As ações associadas ao evento do clipe enterFrame são processadas depois das ações que tenham sido anexadas aos quadros afetados. linha 6: Quantos bytes foram carregados até o momento é joga para dentro da variável loaded. linha7:pct é a caixa que está dentro doMoVIEClIP.Elaseráresponsávelemmostraquantosbytes foramcarregadosatéomomento.NestalinhaexisteumaclassematemáticaMAtH.Floorquemostra somenteonúmerointeiro.Assimépegoquantofoicarregadoéquantotemparacarregar,divideosdois números é multiplica por 100.

49

Exemplo: Vamossuporquetemosnopalco500Mbparacarregar.Sesóforamcarregados214Mb,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 MÚSICA
*Veja vídeo aula no CD-roM de conteúdo interativo

obs.: o curso não é voltado para a programação action script.

51

Sign up to vote on this title
UsefulNot useful