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