FLASH CS5

NDICE
NDICE .......................................................................................................................................... 2 INTRODUO .............................................................................................................................. 3

A srie............................................................................................................. 3
01 MUDANDO O CURSOR DO MOUSE .................................................................................. 3 02 ANIMAO COM GUIAS ..................................................................................................... 5 03 MSCARAS COM BORDAS................................................................................................ 9 04 O SENHOR BATATA ......................................................................................................... 11 05 MUDANDO A COR DO CLIPE DE FILME ......................................................................... 15 06 COLISO DE MOVIE CLIPS .............................................................................................. 18 07 BANNER EXPANSVEL ..................................................................................................... 22 08 ANIMAES ...................................................................................................................... 26 9 RELGIO ANALGICO ....................................................................................................... 30 10 CRIANDO UM EFEITO DE FOGO ..................................................................................... 34 CONCLUSO ............................................................................................................................. 38

INTRODUO
Atualmente muito comum encontrar material que ensine a utilizar um software em seu computador, basta apenas dedicao e voc passa a conhecer sua interface, seus botes e menus. Alguns materiais como os do Apostilando.com casam a explicao com exemplos reais. Mas para quem est comeando muitas vezes isso insuficiente. Ento ns do Apostilando.com, criamos uma srie chamada TRUQUES MGICOS. A composio da srie ser de apostilas para voc que j baixou nossas apostilas e precisa exercitar a criatividade. Cada material da srie trar dentro de um determinado software dicas e exemplos de uso do software, reforando assim seu aprendizado sobre ele e despertando sua criatividade. Obrigado e tenha um bom curso.

A srie
A srie em sua primeira edio abordar exemplos para os seguintes softwares: Adobe Photoshop; Adobe Flash Adobe Dreamweaver PHP Microsoft Word Microsoft Excel

01 MUDANDO O CURSOR DO MOUSE

Inicie um projeto no Flash tendo como base o ActionScript2 Desenhe um objeto para ser o seu cursor do mouse.

Converta ele Movie Clip (F8), instancie ele como cursor_mc.

Crie uma nova camada e nomeie-a para AS. Pressione a tecla F9 para chamar o painel de aes. Adicione a seguinte ao. //esconde o cursor do mouse Mouse.hide() //Define a ao para mover o mouse _root.onMouseMove = function(){ setProperty(cursor_mc,_x,_xmouse); setProperty(cursor_mc,_y,_ymouse);

Salve seu projeto e pressione CTRL+ENTER para testar.

02 ANIMAO COM GUIAS

Um dos recursos do Flash que mais chama a ateno a animao atravs de guias. O recurso um dos mais importantes e interessantes quando se inicia os estudo do Flash. Agora com o Flash CS4 e CS5 isso foi facilitado. Inicie um novo projeto AS3 Digite seu texto ou desenhe sua forma para seguir a guia. Converta-o em smbolo. (F8).

Clique com boto direito no primeiro frame e escolha Create Motion Tween.

No Flash CS4 e CS5 esta opo cria a animao em linha azul. Caso queira manter a mesma forma que era criada antes use a opo Create Classic Tween.

Clique no quadro 10 e mude seu texto de posio. Observe que ser traado o caminho do objeto.

Clique no quadro 20 e mude novamente de posio.

Observe que ele faz todo o trajeto. Ao posicionar o cursor prximo linha que foi criada, voc poder torna-la curva.

Ao clicar com a ferramenta Convert Anchor Point em um dos pontos da linha poder manipular a linha como curvas de Bezier. - Convert Anchor Point.

Voc pode tambm usar a ferramenta Subselection Tool para manipular os ns . Podemos tambm substituir nosso caminho por outra forma. Com a ferramenta Oval Tool, desenhe uma forma oval sem preenchimento e com uma cor de contorno.

Com a ferramenta Free Transform Tool, incline-a.

Com a ferramenta Borracha apague um pequeno pedao da circunferncia.

Selecione a forma oval e recorte-a.

Depois selecione o caminho criado anteriormente e cole a forma recortada.

Sua animao circular por um caminho est pronta.

03 MSCARAS COM BORDAS

Inicie um projeto no Flash. Importe uma imagem qualquer. Crie uma nova camada e nela desenhe seu objeto.

Copie a elipse e crie uma nova camada. Cole a elipse no mesmo local (Edit, Past to Place). Mude a cor desta camada para um gradiente radial com o centro transparente

e um contorno opaco na mesma cor do palco.

Mova esta camada para baixo da primeira elipse.

Transforme a camada elipse em Mscara, (boto direito, Mask).

10

Arraste a camada imagem, para que ela tambm fique mascarada.

Depois bloqueie a camada.

04 O SENHOR BATATA
Atravs do Flash podemos criar alm de animaes e sites, tambm jogos. claro que jogos complexos exigem tambm bons conhecimentos em

11

programao. O que no nosso foco. O exemplo a seguir ser a criao de uma verso em Flash do Clssico Senhor Batata. Inicialmente desenhe as partes de seu boneco de forma separada.

Converta cada elemento em um smbolo de Boto e depois instancie como : olhos_btn, boca_btn, nariz_btn, chapeu_btn, orelhaesq_btn e orelhadir_btn.

Eu separei a bata em uma camada e os demais objetos em outra camada. Depois crie uma camada de aes e vamos ao cdigo.

Adicione a seguinte ao.

//define a funo que faz com que ao mouse ser //pressionado mova os olhos

12

olhos_btn.onPress=function(){ startDrag(this); } //funo que para o arrasto ao soltar o mouse olhos_btn.onRelease = function(){ stopDrag(); } Isso faz com que apenas os olhos possam ser movidos. Vamos adicionar agora para que tambm a boca possa ser movida.

//define a funo que faz com que ao mouse ser //pressionado mova os olhos olhos_btn.onPress=function(){ startDrag(this); } //funo que para o arrasto ao soltar o mouse olhos_btn.onRelease = function(){ stopDrag(); }

boca_btn.onPress=function(){ startDrag(this); } //funo que para o arrasto ao soltar o mouse boca_btn.onRelease = function(){ stopDrag(); }

Basta apenas agora repetir o cdigo para todos os elementos. //define a funo que faz com que ao mouse ser //pressionado mova os olhos olhos_btn.onPress=function(){

13

startDrag(this); } //funo que para o arrasto ao soltar o mouse olhos_btn.onRelease = function(){ stopDrag();

boca_btn.onPress=function(){ startDrag(this); } //funo que para o arrasto ao soltar o mouse boca_btn.onRelease = function(){ stopDrag();

chapeu_btn.onPress=function(){ startDrag(this); } //funo que para o arrasto ao soltar o mouse chapeu_btn.onRelease = function(){ stopDrag();

nariz_btn.onPress=function(){ startDrag(this); } //funo que para o arrasto ao soltar o mouse nariz_btn.onRelease = function(){ stopDrag();

14

orelhadir_btn.onPress=function(){ startDrag(this); } //funo que para o arrasto ao soltar o mouse orelhadir_btn.onRelease = function(){ stopDrag();

orelhaesq_btn.onPress=function(){ startDrag(this); } //funo que para o arrasto ao soltar o mouse orelhaesq_btn.onRelease = function(){ stopDrag();

} Crie novos elementos para seu jogo.

05 MUDANDO A COR DO CLIPE DE FILME

Para adicionar interatividade em seu site, voc tambm pode usar uma ao que mude a cor de seus clipes de filme. Inicie um projeto ActionScript 2, desenhe seu objeto e converta-o em Movie Clip. Instancie seu MC.

15

Crie trs botes que mudaro as cores do Movie Clip. Instancie os botes

Ser preciso saber o cdigo hexadecimal de cada cor. D um duplo clique sobre o seu boto. E depois na escolha da cor clique no boto de escolha da cor

16

Vamos agora adicionar a ao para nossos botes.

Crie uma camada chamada AS e adicione o seguinte cdigo. // cria a varivel para o objeto camisa colorir = new Color(camisa_mc); //funo para o boto azul azul_btn.onPress=function(){ //aplica a mudana de cor colorir.setRGB(0x000099); } Com a ao acima criamos uma varivel do tipo Color para nosso objeto. Depois definimos que ao clicar no boto azul seria aplicado a cor hexadecimal definida no parmetro setRGB ao objeto instanciado na varivel. Vamos agora completar nosso cdigo com a ao para os demais botes. // cria a varivel para o objeto camisa colorir = new Color(camisa_mc); //funo para o boto azul azul_btn.onPress=function(){ //aplica a mudana de cor colorir.setRGB(0x000099); }

vermelho_btn.onPress=function(){

17

//aplica a mudana de cor colorir.setRGB(0xFF0000); }

verde_btn.onPress=function(){ //aplica a mudana de cor colorir.setRGB(0x00CC00); }

06 COLISO DE MOVIE CLIPS

Um recurso interessante do Flash o de podermos fazer com que nosso filme tenha uma atitude de acordo com a escolha do usurio. Vamos criar um exemplo onde teremos dois objetos e ao colidirmos ambos ele apresente uma resposta. Inicie um novo projeto. ActionScript 2 Crie uma camada chamada objetos e adicione seus objetos nela. Crie uma camada chamada resposta

18

Crie uma camada chamada aes.

Na camada resposta crie uma caixa de texto dinmico e instancie como resposta.

Em Anti Alias defina como Use Device Fonts. Instancie tambm os objetos

19

No exemplo usei para o documento que esta embaixo como documento, e para os demais disquete, impressora, cd e hd. O objetivo ser ao arrastar o documento ser escrito na caixa de texto dinmico para onde o arquivo ser enviado.

Ento vamos agora programar nosso exemplo. Clique no primeiro quadro da camada de aes e adicione. Inicialmente adicione //ao de arrastar o documento documento.onPress = function(){ startDrag(this); }

//ao para parar o arrasto ao soltar o mouse documento.onRelease=function(){ stopDrag(); } A ao acima apenas far com que o objeto possa ser arrastado. Vamos agora verificar se ao soltar o mouse ele colide com outro MovieClip. Altere seu cdigo para: //ao de arrastar o documento documento.onPress = function(){ startDrag(this); }

//ao para parar o arrasto ao soltar o mouse documento.onRelease=function(){ stopDrag(); if (documento.hitTest(disquete)==true){ trace("disquete") resposta_txt.text="Seu disquete"; documento foi enviado para o

20

}else if(documento.hitTest(impressora)==true){ trace("impressora") resposta_txt.text="Seu impressora"; }else if(documento.hitTest(cd)==true){ trace("cd") resposta_txt.text="Seu documento foi enviado para o CD"; }else if(documento.hitTest(hd)==true){ trace("hd") resposta_txt.text="Seu documento foi enviado para seu computador"; } } documento foi enviado para a

No cdigo acima foi verificado se houve coliso entre os Movie Clips (documento e destino). Esta coliso foi verificada atravs da ao HitTest sendo real (TRUE) usei um trace para verificao e escrevi dentro da caixa de texto a minha mensagem. No lugar da reposta eu poderia utilizar qualquer ao. Usei o If, else, para ir verificando em qual movie clip de destino ocorre coliso.

21

07 BANNER EXPANSVEL
O Banner Expansvel , a principio, um full banner (468x60) comum, porm, quando o usurio passa o mouse em cima do mesmo, ele se expande, criando uma boa interao e mostrando informaes adicionais.

No Flash, crie um documento com 468 de width, que a largura padro de um full banner e com a altura de sua preferncia, porm s no exagere muito, o ideal que o banner tenha 468x280 pixels.

Vamos criar duas cenas.

Vamos agora editar a primeira cena (cena1).

22

Faa um retngulo que ser o fundo do seu banner. Faa um retngulo de 468x84, sem bordas. Converta-o em boto. Depois o arraste para a rea Hit do Boto.

Clique sobre ele e chame o painel de aes. Adicione o seguinte cdigo: on (rollOver) { play(); }

on (rollOut) { _root.gotoAndStop(1); } Crie uma nova camada. Arraste para baixo do boto e nela adicione uma imagem.

23

Adicione uma nova camada a nomeie para actions e adicione uma ao stop();. Crie um quadro chave no quadro 15 e adicione outra ao stop. Para a camada da imagem crie uma animao do quadro 10 ao quadro 15 que faa com que a imagem desaparea em um alpha 0.

Na cena Rollover adicione a imagem ou texto que ser parte de sua animao. No quadro 1 ela deve ficar na parte superior e no quadro final de sua animao dever estar em toda a tela.

24

Crie uma camada para o boto invisvel. Desenhe um retngulo que cubra todo o palco converta-o em boto e deixe-o no quadro hit. Clique sobre ele e pressione F9 para abrir o painel de aes. Digite on (rollOut) { gotoAndStop("cena1", 1) }

on (release) { getURL('www.apostilando.com.br', '_blank') }

Para finalizar crie uma camada de aes e no ltimo quadro adicione uma ao stop();

25

08 ANIMAES
Para quem j esta acostumado com o Flash sabe que para que uma animao fique com um efeito legal preciso um bom tempo de trabalho. O que s vezes at se sabe mas se esquece, que o Flash possui alguns recursos que vem a facilitar este trabalho. Vamos aos nossos exemplos. Inicie um novo arquivo no Flash tipo ActionScript 3 e salve-o. Adicione um texto ou qualquer outro objeto e converta-o em smbolo. Crie um quadro chave no quadro 50 e crie uma animao de movimento clssica (Boto direito do mouse em qualquer parte da animao e depois Classic Tween).

At aqui processo normal. Mas e se seu quisesse que ele fizesse um efeito de frenagem e acelerao. O primeiro pensamento que de criar novos quadros chaves e mudar o objeto manualmente.

26

No preciso. Clique em qualquer parte de sua animao fora dos quadros chaves. Junto ao local onde se podem trabalhar os valores do Easy, temos um lpis para podermos manipular o efeito.

Clique no lpis.

Conforme voc mover a linha ele adicionar a forma de acelerao da sua animao.

27

Para testar preciso clique em OK e pressionar CTRL+ENTER. Caso queira mudar a animao, basta mudar os pontos de posio. Para retornar ao modo normal clique no boto RESET. O Prprio Flash possui alguns efeitos prontos que vem a facilitar seu processo de animao.

Crie um novo filme ou exclua a animao e o quadro chave final. Selecione seu smbolo e clique no menu Window, Motion Presets.

28

Ser mostrado um painel com modelos de animao que voc pode adicionar aos seus smbolos. Bastam apenas estar com seu smbolo selecionado, depois clicar sobre a animao desejada e clicar em Apply. Ser feito todo o caminho de sua animao.

Observe que o mode de Tween o Motion Tween. Para testar outras forma de animao, pressione CTRL+Z par voltar e repita o processo.

29

9 RELGIO ANALGICO
Neste exemplo vamos criar um relgio analgico. Inicie um novo filme do Flash com ActionScript 2 Desenhe uma circunferncia que ser o fundo de nosso relgio. Depois crie uma nova camada e acrescente os nmeros do relgio. No exemplo adicione apenas o 3, 6, 9 e 12, pois ficam nos centros dos objeto, se precisar use linhas guias para auxili-lo.

Bloquei estas camadas e crie uma nova camada chamada hora, dentro dela desenhe o ponteiro das horas. Depois o converta em Movie Clipe com ponto de registro na parte de baixo.

30

Duplique seu smbolo e nomeie-o para minutos. Depois o edite e mude a sua cor e tamanho.

31

Crie uma camada chamada minuto e posicione o smbolo em seu relgio.

32

Repita todo o processo para o ponteiro dos segundos. Selecione os trs ponteiro e chame o painel de alinhamento desmarque a opo de alinhar ao palco e depois clique no alinhamento central.

Precisamos agora instanciar os botes do relgio. Oculte as camadas de segundos e minutos e selecione o boto hora e instancie-o como: hora.

33

Faa o mesmo para os demais ponteiros. Crie uma nova camada chamada aes e dentro dela adicione. //looping de animao onEnterFrame = function() { //cria a varivel tempo do tipo Date tempo = new Date(); //define a rotao do movie clip de acordo com as horas hora._rotation = tempo.getHours()%12*360/12; minuto._rotation = tempo.getMinutes()*360/60; segundo._rotation = tempo.getSeconds()*360/60; }

10 CRIANDO UM EFEITO DE FOGO

Neste exemplo vamos criar um efeito que simule um efeito de fogo.

34

Em um novo projeto ActionScript2 desenhe uma circunferncia e preencha com um gradiente radial com a cor #FFFF00 nas duas cores, apenas na cor final determine com alpha 0.

Converta para smbolo grfico.

Depois converta-o novamente para Movie Clip.

D um duplo clique no Movie Clip para podermos edit-lo. No quadro 10 aplique um Tint nele para vermelho.

35

Crie um quadro chave no quadro 20 e aplique um Tint preto, diminua bem seu tamanho e sua ele.

D agora um duplo clique no grfico e aplique uma animao de forma, distorcendo para cima um pouco a sua esfera.

36

Volte cena principal e adicione a seguinte ao. //declara a varivel var copia:Number =1; //loop de animao _root.onEnterFrame=function(){ //incrementa copia++ if (copia>50){ copia=1 } fogo_mc._x=100+Math.random()*21; duplicateMovieClip("fogo_mc",qualquer,copia); }

Para dar uma tom mais realista aplique um efeito de Blur em seu Movie Clip.

37

Salve seu filme e teste.

CONCLUSO
Com isto finalizamos nossa apostila de Flash TRUQUES MGICOS, se voc quer aprender mais sobre esta fantstica ferramenta e quer aprender a us-la para projetos de criao de web sites conhea nosso curso Webkit atravs do link: http://apostilando.com/pagina.php?cod=30.

38