Page 1

Í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


Aula Flash CS3  

Aqui tem algumas dicas para a pratica do Adobe Flash CS3

Advertisement
Read more
Read more
Similar to
Popular now
Just for you