action script para flash

7/30/2019 Action script para Flash

1/30

Apostila

Nvel Bsico


2/30

Apostila Flash 5.0 Bsic o - 2 -

Desenvolvimento: Cludio MartinezAp oio: Roa nder Sc herer

nd ice

1 Introdu o (3)

* Ap resenta o (3)* Conc eitos Inic ia is (4)* Interfac e (7)

2 - Desenho Vetoria l (9)

* Ferramentas (9)* Ca ra c terstic as d o Desenho (10)* Imagens Importadas (14)

* Organizando (16)3 Smbolos (17)

* Conc eito (17)* Tipos (18)* Bib liotec as (19)

4 Anima es (21)

* Conc eitos (21)

* Frame-by-frame (Qua dro-a-Quadro) (23)* Tweening (Interpola o) (24)

- Mo tion (24)- Shape (Forma) (25)

5 Botes (26)

* Conc eitos (26)

6 - A es Bsic as (29)

* Conc eitos

7 Public a o (29)


3/30



Intro d u o

A p re se nta o

O curso tem como objetivo apresentar as funcionalidades ecaractersticas da ferramenta, principalmente os conceitos de utilizaodesta ferramenta, de maneira que o aluno aprenda a planejar e visualizaro d esenvolvimento de seu p rojeto em Flash,

Esta apostila vem servir de apoio didtico ao curso Flash 5.0 Bsico,os tpicos foram agrupados por rea de assunto e ordenados, pensando-se em uma seq nc ia q ue a jude a forma r de sde o a prendizado , c onc eitosfundamentais para uma utilizao profissional e otimizada do Flash 5.0,nesta apostila o aluno encontra material de apoio, material de referncia

e propostas de exerccios prticos. Ao concluir o curso, voc estarfamiliarizado com os principais processos de criao/produo de umaap lic a o em Flash 5.0.


4/30



C o nc e ito s Inic ia is

Flash um software desenvo lvido pela Ma c rom ed ia que possib ilita acriao de contedos multimdia de alta qualidade, interativos eanima do s, otimizad os pa ra a pub lic a o na internet.

Conted o p rod uzido e m Flash pod e ser:

- Botes;- Banners;- Jogos;- Formulrios;- Desc anso de Tela;- Interfaces de Navegao;- Sites.Um dos primeiros passos no inicio de um projeto a definio da

tecnologia utilizada nas partes ou processos do projeto, a corretaaplicao da ferramenta est intimamente l igada com o conhecimentode suas funcionalidades e aplicaes, e a escolha da ferramenta certapara seu ob jetivo tra r resultados mais p roveitosos e p rofissiona is.

Caractersticas:

Os a rquivos c riados no Flash g uardam e apresenta m as informa esgrficas ve toria lm e nte . Isto significa que as imagens so entendidas comoformas e preenchimentos e o que armazenado so seus parmetros,diferente dos formatos bitmap (mapa de bits - .jpg, .gif, .bmp),normalmente utilizado para armazenamento de fotos e imagens. Aima gem de um c rc ulo, po r exemp lo, arma zenaria vetoria lmente ap ena s osvalores referentes posio e ao raio deste crculo. Uma imagem bitmaparma zena a informa o da c or de c ad a pixel que forma o d esenho, o q uege ralmente oc upa muito ma is espa o.


5/30



Bitma p (mapa d e b its):

Comparao:


6/30



Exem plo Grfico Veto ria l:

Os desenhos vetoriais podem ser redimensionados sem perda daqua lida de de de fini o e sem d iferen a no tam anho d o a rquivo.

O seu arquivo de trabalho no Flash, ou arquivo-projeto, salvo coma extenso .FLA, c om o o c d igo fonte de um p rog ram a, e nele que voc vai desenvolver todo o c onted o. Para a visualiza o e pub lic a o d este

c ontedo, ele p rec isa ser exportado para o fo rma to .SWF.


7/30



Inte rfa c e

Conhec end o a Interfac e d o Flash e seus elementos:

Explore sua rea de trab a lho!

Barra d e Me nus

Barra d e Ferram enta s(desenho)

Barra de Ferram enta s a dr o

Timelines / Linha s d o Tem o

Librar / Bibliotec a

Ata lhos a ra Pa nels

La ers/Camadas

Sta e / Pa lco

Panels / Painis de Confi ura esZOOM


8/30



Come ando um Projeto:

Vamos c om e ar nosso p rimeiro p rojeto utilizando o Flash e a proveitarpara saber com o se c onfigura a s princ ipa is c arac terstic as de seu Filme.

Com ec e um novo Filme.

Atrav s do menu Mod ify>Movie (Mo d ific a r > Filme)(Ctrl+M) ac esse a sproprie da de s de seu Filme :

Taxa de Qua dros (Frame Ra te):Define e m quantos quadros por seg undo seu filme ser a presenta do,alterando este valor possvel conseguir filmes mais detalhados (edem orad os) ou filmes mais rp idos.

Dimenses (Dimensions):A d imenso d e seu Pa lc o, o ta manho fina l visua lizvel de seu filme .

Corresponder (Match): Impressora/Contedo (Printer/Contents)Atribui as d imense s de seu filme p ara se a justa r ao ta manho d opapel configurado p ela sua imp ressora, ou a me nor rea possvelc om rela o ao c ontedo j d ispo sto.

Cor do fundo (Bac kground Co lor):Define a c or de fundo do Filme .

Unida de d e med ida :Define a unida de de med ida de trab alho, a ma is c mod a c ostuma

ser pixels.

Exp lore as c onfigura e s d isponveis, so as defini e s de c om o seu filmeser p ublic ad o e a presentad o.


9/30



De se nho V e to ria l

Fe rra m e nta s

O Flash 5.0 d ispe das princ ipa is ferramenta s pa ra desenho veto ria l.Esta a barra de Ferramentas de Desenho:

Seta / Arrow (V)

Linha / Line (N)

Cane ta / Pen (P)

L p is / Penc il (Y)

Conta Gota s / Drop pe r (i)

Oval (O)

Tinteiro / Ink Botle (S)

Subsele o / Sub selec t (A)

Texto / Text (T)

Pinc el / Brush (B)

Borrac ha / Eraser (E)

La o / La sso (L)

Ret ngulo / Rec ta ngle (R)

Ba lde d e Tinta / Pa int Buc ket (K)

Ferrament as de Visua liza o

Opes Especficas daFerram enta Selec ionad a

Sele o d e c ores: LinhaPreenchimento


10/30



C a ra c te rstic a s d o De se nho

A tcnica de desenho vetorial possui algumas caractersticas quec om sua utiliza o se to rnam fa milia r.

Um desenho vetorial constitudo apenas de Linhas ePreenchimento (que podem ser nulos). As linhas quando sobrepostas seassociam, j os preenchimentos possuem dois comportamentos diferentes,quand o d a mesma c or se a ssoc iam, qua ndo de c ores d istintas a rea deba ixo subtra da .

Com a resoluo dos exerccios propostos, estas e outrasc arac terstic as se tornaro ma is c laras.

Exerc c ios:

01)- Desenhe linhas, utilizando e explorando as configuraes das

ferramentas:o Linhao Canetao Lp is (observe as op es de mo do!)

Op es do Lp is

(modo da linha)


11/30



Fa a mo d ific a e s ago ra , utilizando a s ferrame ntas:o Setao Subseleoo Laoo Smooth (sua vizar, a lisar)o Straighten (regular)o Rotacionaro Redimensionar

Dicas:Clic ando em Wind ow >Panel >Stroke (Janela > Pa inis > Linha ),

voc a bre o pa inel espec fic o d e c onfigura o de tra os:

Op es da Seta :snapsmoothstraightenrotatescale


12/30



02)- Desenhe fo rmas c onhec idas (estrela , sol, etc ..) explorand o a s

ferramentas :o Ovalo Retnguloo Pincelo Balde de Tintao Borrachao Contagotas

Assim c om o no e xercc io a nterior, p roc ure u tiliza r as op e s e o srec ursos de c ad a ferram enta:

Op es da Borrac ha:

D a ten o s c onfigura es do Preenc himento!


13/30



Voc j sab e ond e enc ontrar ma is op es de c onfigura o p araesta fe rrame nta:

03)

- Para que servem estas ferramentas?


14/30



Im a g e ns Im p o rta d a s

Voc pode tambm importar imagens de outros arquivos e emoutros forma tos a travs do menu File>Imp ort (Arquivo>Importar). Dentre osformatos disponveis, possvel escolher entre importar o contedo de umoutro arquivo flash, imagens vetoriais em outros formatos (freehand,ilustra tor, wmf) e ima gens b itmaps (.jpg , .g if, .bmp).


15/30



O rg a niza nd o

Desenhando no Flash voc deve ter reparado que muitas vezes impossvel fazer um desenho sem alterar ou confundir-se com outro jpronto. Uma das maneira de comear a organizar seu contedo agrupando as formas assim como nos softwares comuns de edio deimagens. Para tal, selecione as formas que pretende agrupar e clique emModify > Group (Modificar > Agrupar) ou pressione Ctrl+G. Para editarfiguras agrupadas, basta d ar um d uplo-clique sob re a ima gem.

Assim como os principais programas de grficos, o Flash tambm

trabalha com layers (camadas), controle e operaes com as camadas,que pod em ser ac essad os pelos a talhos:


16/30



funda me ntal que se esteja fam ilia rizado a traba lha r c om c ama das,sua utiliza o fac ilita a c ria o e m anuten o d e seu p rojeto.

Exerc c ios:

04)- Com ec e um novo filme e d esenhe uma c asa, ap lic and o o s

c onc eitos desenvolvidos nos exerc c ios ante riores.- Desenhe um c en rio d e fundo pa ra sua c asa.- Salve seu exerc c io.

Dicas:- Proc ure identific ar qua is so os elem ento s de seu desenho e

trab alhar c ad a um em uma c ama da diferente.- D nomes sugestivos s camadas- possvel oc ultar ou travar as c amadas que d esejar, experimente !


17/30




18/30



Sm b o lo s

Para comearmos a utilizar os recursos de animao do Flash, p rec iso antes ap rend er a traba lha r com Smb olos.Para o Flash interagir c om um elemento, p rec iso que este e lemento

seja definido como um objeto, um Smbolo. Como objeto, os smbolospossuem p rop ried ades, a es e c om portame ntos, que p od er ser definidose/ ou alterad os no d ec orrer da anima o .

Ao inserir um smbolo em uma animao, voc est inserindo umainstncia do objeto definido. como se fosse uma cpia, porm comcaractersticas diferentes. Instncias de um mesmo smbolo possuemmesmo contedo, porm podem possuir propriedades e caractersticasdiferentes.


19/30



Tipos

Existem trs tipos possveis de smbolos: Graphic, Movie Clip e Button(Gr fic o, Clipe de Filme e Bot o), que se d iferenc iam p elo com portamentoe pe las p rop ried ad es que c onhec eremo s ma is adiante.

Para transforma r uma forma em um smb olo, selec ione algum a formaem seu p alc o e c lique e m Insert>Co nvert to Symb ol (Inserir>Converter paraSmb olo), esc olha o nom e d o ob jeto e o tipo d o smb olo: Graphic .

Desc ri o d os tipos de Smbolos:

Graphic(grfico): Ideal para elementos que no interagem com ofilme, a linha de tempo dos smbolos do tipo grfico correm juntocom a linha de tempo principal. No realizam ao, nem recebem

interao. Movie Clip (c lipe d e filme): Sem elhante a o g r fic o, porm possui linha

de tempo independente, um clipe de fi lme se comporta como umarquivo flash a parte, pode executar aes e receber controle eintera o externa.

Button(bot o): Um smb olo do tipo bo to, respond e a eventos domo use(up , ove r, dow n, e hit) e exec uta a e s.

Conhec eremos me lhor as c a rac terstic as de c ada tipo de smb olo q uand oprec isarmos aplic ar os c onc eitos.


20/30



Biblioteca

Quando criamos um smbolo, este arquivado na biblioteca dofilme, a partir dela possvel gerenciar os objetos de seu filme,orga nizando, a lterando refernc ias e visua lizando o c ontedo existente.

Voc acessa a biblioteca de seu filme atravs do menuWindow >Lib rary (Janela>Bib liote c a ), ou a travs do a ta lho Ctrl+L.

exemplo de b ibliotec a

Ob serve que a s ima ge ns imp ortad as tam b m a parece m nabiblioteca.


21/30



Exerc c ios:

05)

- Abra o arquivo b ibliotec a .fla e c op ie o smb olo Mouse p a ra umnovo filme .

- Crie instnc ias do M ouse, diferenc iando um a de outra , ap liqueefeitos, redimensione.- Edite a go ra o c ontedo d o smb olo e veja o q ue ac ontece !

Smb olo Mouse do tipo G rfico

- Salve seu exerccio.

Dicas:

- possvel arrasta r smbolos de outras b ib liotec as pa ra seu filme.- possvel abrir um arquivo Flash, com o uma b ib liotec a ,

experimente.- Proc ure o pa inel de Instnc ias e o de e feitos.


22/30



A nim a e s

Fina lmente o que interessa , Anima r!Dizem os que o Flash c ria c ontedo 3D, isso porque c om o j deve ter

ob servad o, temos o p lano de d esenho (2D) e tudo o que ac ontec e nesteplano a c ontec e em fun o de um Tempo (a terc eira d ime nso ), que rep resentad o p ela time line o u linha-do-temp o, co nhe a :

Cada caixinha na timeline representa um frame (quadro) de suaanimao, que roda por default a 12fps (frames-por-segundo). Quandoinic iamos uma anima o , esta c ontm ape nas um fram e, ou seja, a inda esttica.

Exerc c ios:

06)

- Comece uma nova anima o;- Insira o smbolo Bip lane d isponvel em b ib lioteca .fla- Insira 30 qua dros em seu filme.

Quad ro n:

Posicionador

Escala da timeline

Quadro atual

Ta xa d e re ro du o

Tem o decorrido

Onion skins


23/30



Ob serve a a ltera o na timeline:

O Quad rado c om a bo linha p reta rep resenta um Key Frame e indic aos quadros-chave da animao, ou seja, onde existe mudana nocontedo da mesma, o restante dos quadros cinzas so Frames(quadros),e indic am que o c ontedo d o KeyFrame imed iata mente ante rior c ontinuapresente. O quadradinho no fim da animao indica o ltimo quadro em

que o c ontedo d o KeyFram e a pa rec e. possvel desenvolver basicamente dois tipos de animaes noFlash, elas so exp lic adas a seguir:


24/30



Fra m e b y fra m e (Q ua d ro - a - q ua d ro )

a mais simples, porm a mais trabalhosa. Para criar animaesquadro-a-quadro (como o prprio nome sugere), necessrio que sedefina tod os os qua dros da a nima o , ou seja , tod o q uad ro um q uad ro-c have (keyfram e).

Exerc c ios:

07)- Faa uma animao quadro-a-quadro utilizando um smbolo ou

uma forma livre.(sugesto: utilize o smbolo boneco do arquivobiblioteca.fla)

Dicas:- Utilize Mo d ify>Break Ap art (Ctrl+B) para q uebrar um smbolo em

forma s novam ente.- Depois de pronto , exp lore as op es de Onion Skin


25/30



Tw e e ning (A nim a o Line a r)

O Twe ening a princ ipal forma de a nima o no Flash, um a

maneira mais fcil de se animar, basta definir o quadro chave inicial e oquadro chave final e comandar ao Flash que realize o tweening. O Flashde tec ta a m uda na e tenta a divinhar q ual era o m ovimento de sejad o.

Existem dua s formas de Twee ning:

Tweening Mo tion:

Utilizado pa ra animar smbolos. Para a c orreta utiliza o do Twee ningmo tion prec iso a lguns c uidados:

- Som ente Smbolos pod em ser anima dos.- Som ente um Smb olo p or Keyframe/ Layer de ve ser utilizado.- O m esmo Smb olo d eve estar p resente no keyframe inic ia l e final.

Exerc c ios:

08)- Imp orte o smb olo guia de b ibliotec a.fla e fa a um a

anima o de la sobrevoa ndo o seu pa lc o.- Explore a s c onfigura e s do Twee ning (proc ure o p a inel Frame)

o Scaleo Rotateo Easing

- Ad ic ione efeitos na instnc ia a nima da e c onfira o resultad o naanimao.

- possvel fazer a guia percorrer um c aminho sinuoso?- Salve seu exerc c io.


26/30



Twee ning Sha pe:

Transforma uma forma livre em o utra , c riando um efeito de mo rph .O p roc ed imento de c ria o seme lhante a o d o Twe ening Mo tion, pormos quadros c ha ves s d eve m c onter formas livres.

Exerc c ios:

09)- Imp orte o s smb olos da pasta e x9 de b ib liotec a .fla e fa a

anima es de forma , fazend o um a figura vira r outraconsecutivamente. (Primeiro transforme os smbolos em formas!)

- Salve seu exerc c io.

Dica:- Uma dica de forma: possvel adicionar Shape Hints ao tweening

sha pe a travs do m enu M od ify>Transform>Ad d Shape Hint oupelo atalho Ctrl+H.


27/30



Botes

Os botes no Flash, assim como os grficos, so smbolos quepossuem caractersticas especiais. Um smbolo do tipo boto possui 3estg ios, Up (leva ntado), Over (em cima) e Dow n (ab a ixado), querepresentam os comportamentos possveis de um boto com relao aoc ursor do Mouse:

- UP : bo t o solto- Ove r: c ursor sob re o boto- Down: bo to c lic and o;

e um qua rto frame, Hit, que rep resenta a rea c lic ave l do b oto.Observe:

Exerc c ios:

09)- Crie trs botes d istintos que sug iram a idia d e Play, Pause, e

Volta , c om tod os os estados definidos.- Salve seu exerc c io.


28/30



A e s B sic a s (c ontro le de re produ o)

Para comearmos a controlar nossa animao e at mesmo para

que o uso de botes faa sentido, hora de aprendermos como inserirAes no Flash. Atravs de Aes possvel controlar a reproduo de umfilme, planejar navegao de uma aplicao, configurar o modo devisualizao, criar interaes das mais diversas com o usurio, programareventos e menus, definir variveis, interagir com aplicativos externos e atmesmo gerar uma animao. possvel definir aes em Frames, emsmb olos do tipo Movie C lip e e m botes.

Para visualizar as aes disponveis, clique em Window>Actions(Janela>Aes ), ou clique no atalho no canto inferior direito da tela doFlash:

Janela d e A es :

Para Inserir uma a o, ba sta selec iona r um ob jeto v lido e a a oque d eseja a tribuir.


29/30



Exerc c ios:

09)- Esc olha um a das anima es feitas- Insira os Botes c riados no ltimo exerc c io- Ad ic ione as respec tivas a es aos bot es, de m od o a c ria r umc ontrole da a nima o .


30/30


Desenvolvimento: Cludio Martinez

Pub lic a o

Agora que temos uma animao pronta e com controles no Flash,nos resta exportar, publicar e visualizar o resultado.Sua animao pode ser exportada em diversos formatos. O padro

para animaes Flash a exportao para o Flash Player e Flash Plug-in,nos quais a animao compilada e recebe a extenso .SWF e estp ronta para ser distribuda ou inserida em uma pgina HTML . Clique emFile>Export (Arquivo>exportar) para verificar os formatos de exportao doFlash.

Para publicar seu filme, clique em File>Publish Setings (Arquivo,Configurar Public a o ) e esc olha o forma to d esejado:

Em seguida clique em Publish (Publicar). Os arquivos selecionadossero g erad os no d iret rio em que a a nima o est sa lva.

Ab ra e veja o resultad o!

action script para flash

Documents