Manual - Pedro F. Carvalho
Transcrição
Manual - Pedro F. Carvalho
Í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: [email protected] */ //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