flash truquesmagicos

Download Flash Truquesmagicos

Post on 03-Jul-2015

1.103 views

Category:

Documents

2 download

Embed Size (px)

TRANSCRIPT

FLASH CS5

NDICENDICE .......................................................................................................................................... 2 INTRODUO .............................................................................................................................. 3

A srie............................................................................................................. 301 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

2

INTRODUOAtualmente 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 srieA 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 MOUSEInicie um projeto no Flash tendo como base o ActionScript2 Desenhe um objeto para ser o seu cursor do mouse.

3

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);

}

4

Salve seu projeto e pressione CTRL+ENTER para testar.

02 ANIMAO COM GUIASUm 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.

5

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.

6

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.

7

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.

8

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

Sua animao circular por um caminho est pronta.

03 MSCARAS COM BORDASInicie 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

9

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 BATATAAtravs 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 FILMEPara 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 CLIPSUm 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 cai