38
FLASH CS5

Flash Truquesmagicos

Embed Size (px)

Citation preview

Page 1: Flash Truquesmagicos

FLASH CS5

Page 2: Flash Truquesmagicos

2

ÍNDICE

ÍNDICE .......................................................................................................................................... 2

INTRODUÇÃO .............................................................................................................................. 3

A série............................................................................................................. 3

01 – MUDANDO O CURSOR DO MOUSE .................................................................................. 3

02 – ANIMAÇÃO COM GUIAS ..................................................................................................... 5

03 – MÁSCARAS COM BORDAS................................................................................................ 9

04 – O SENHOR BATATA ......................................................................................................... 11

05 – MUDANDO A COR DO CLIPE DE FILME ......................................................................... 15

06 – COLISÃO DE MOVIE CLIPS .............................................................................................. 18

07 – BANNER EXPANSÍVEL ..................................................................................................... 22

08 – ANIMAÇÕES ...................................................................................................................... 26

9 – RELÓGIO ANALÓGICO ....................................................................................................... 30

10 – CRIANDO UM EFEITO DE FOGO ..................................................................................... 34

CONCLUSÃO ............................................................................................................................. 38

Page 3: Flash Truquesmagicos

3

INTRODUÇÃO Atualmente é muito comum encontrar material que ensine a utilizar um software

em seu computador, basta apenas dedicação e você passa a conhecer sua

interface, seus botões e menus.

Alguns materiais como os do Apostilando.com “casam” a explicação com

exemplos reais. Mas para quem está começando muitas vezes isso é

insuficiente.

Então nós do Apostilando.com, criamos uma série chamada TRUQUES

MÁGICOS. A composição da série será de apostilas para você que já baixou

nossas apostilas e precisa exercitar a criatividade.

Cada material da série trará dentro de um determinado software dicas e

exemplos de uso do software, reforçando assim seu aprendizado sobre ele e

despertando sua criatividade. Obrigado e tenha um bom curso.

A série

A série em sua primeira edição 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.

Page 4: Flash Truquesmagicos

4

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 ações. Adicione a seguinte ação.

//esconde o cursor do mouse

Mouse.hide()

//Define a ação para mover o mouse

_root.onMouseMove = function(){

setProperty(cursor_mc,_x,_xmouse);

setProperty(cursor_mc,_y,_ymouse);

}

Page 5: Flash Truquesmagicos

5

Salve seu projeto e pressione CTRL+ENTER para testar.

02 – ANIMAÇÃO COM GUIAS Um dos recursos do Flash que mais chama a atenção é a animação através 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 símbolo. (F8).

Clique com botão direito no primeiro frame e escolha Create Motion Tween.

No Flash CS4 e CS5 esta opção cria a animação em linha azul. Caso

queira manter a mesma forma que era criada antes use a opção Create Classic

Tween.

Page 6: Flash Truquesmagicos

6

Clique no quadro 10 e mude seu texto de posição. Observe que será traçado o

caminho do objeto.

Clique no quadro 20 e mude novamente de posição.

Observe que ele faz todo o trajeto.

Ao posicionar o cursor próximo à linha que foi criada, você poderá torna-la

curva.

Page 7: Flash Truquesmagicos

7

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 também usar a ferramenta Subselection Tool para manipular os nós

.

Podemos também substituir nosso caminho por outra forma.

Com a ferramenta Oval Tool, desenhe uma forma oval sem preenchimento e

com uma cor de contorno.

Page 8: Flash Truquesmagicos

8

Com a ferramenta Free Transform Tool, incline-a.

Com a ferramenta Borracha apague um pequeno pedaço da circunferência.

Selecione a forma oval e recorte-a.

Page 9: Flash Truquesmagicos

9

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

Sua animação circular por um caminho está pronta.

03 – MÁSCARAS 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

Page 10: Flash Truquesmagicos

10

e um contorno opaco na mesma cor do palco.

Mova esta camada para baixo da primeira elipse.

Transforme a camada elipse em Máscara, (botão direito, Mask).

Page 11: Flash Truquesmagicos

11

Arraste a camada imagem, para que ela também fique mascarada.

Depois bloqueie a camada.

04 – O SENHOR BATATA

Através do Flash podemos criar além de animações e sites, também jogos. É

claro que jogos complexos exigem também bons conhecimentos em

Page 12: Flash Truquesmagicos

12

programação. O que não é nosso foco.

O exemplo a seguir será a criação de uma versão em Flash do Clássico

Senhor Batata.

Inicialmente desenhe as partes de seu boneco de forma separada.

Converta cada elemento em um símbolo de Botão 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 ações e vamos ao código.

Adicione a seguinte ação.

//define a função que faz com que ao mouse ser

//pressionado mova os olhos

Page 13: Flash Truquesmagicos

13

olhos_btn.onPress=function(){

startDrag(this);

}

//função 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 também a boca possa ser movida.

//define a função que faz com que ao mouse ser

//pressionado mova os olhos

olhos_btn.onPress=function(){

startDrag(this);

}

//função que para o arrasto ao soltar o mouse

olhos_btn.onRelease = function(){

stopDrag();

}

boca_btn.onPress=function(){

startDrag(this);

}

//função que para o arrasto ao soltar o mouse

boca_btn.onRelease = function(){

stopDrag();

}

Basta apenas agora repetir o código para todos os elementos.

//define a função que faz com que ao mouse ser

//pressionado mova os olhos

olhos_btn.onPress=function(){

Page 14: Flash Truquesmagicos

14

startDrag(this);

}

//função que para o arrasto ao soltar o mouse

olhos_btn.onRelease = function(){

stopDrag();

}

boca_btn.onPress=function(){

startDrag(this);

}

//função que para o arrasto ao soltar o mouse

boca_btn.onRelease = function(){

stopDrag();

}

chapeu_btn.onPress=function(){

startDrag(this);

}

//função que para o arrasto ao soltar o mouse

chapeu_btn.onRelease = function(){

stopDrag();

}

nariz_btn.onPress=function(){

startDrag(this);

}

//função que para o arrasto ao soltar o mouse

nariz_btn.onRelease = function(){

stopDrag();

Page 15: Flash Truquesmagicos

15

}

orelhadir_btn.onPress=function(){

startDrag(this);

}

//função que para o arrasto ao soltar o mouse

orelhadir_btn.onRelease = function(){

stopDrag();

}

orelhaesq_btn.onPress=function(){

startDrag(this);

}

//função 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ê também pode usar uma ação

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.

Page 16: Flash Truquesmagicos

16

Crie três botões que mudarão as cores do Movie Clip.

Instancie os botões

Será preciso saber o código hexadecimal de cada cor.

Dê um duplo clique sobre o seu botão. E depois na escolha da cor clique no

botão de escolha da cor

Page 17: Flash Truquesmagicos

17

Vamos agora adicionar a ação para nossos botões.

Crie uma camada chamada AS e adicione o seguinte código.

// cria a variável para o objeto camisa

colorir = new Color(camisa_mc);

//função para o botão azul

azul_btn.onPress=function(){

//aplica a mudança de cor

colorir.setRGB(0x000099);

}

Com a ação acima criamos uma variável do tipo Color para nosso objeto.

Depois definimos que ao clicar no botão azul seria aplicado a cor hexadecimal

definida no parâmetro setRGB ao objeto instanciado na variável.

Vamos agora completar nosso código com a ação para os demais botões.

// cria a variável para o objeto camisa

colorir = new Color(camisa_mc);

//função para o botão azul

azul_btn.onPress=function(){

//aplica a mudança de cor

colorir.setRGB(0x000099);

}

vermelho_btn.onPress=function(){

Page 18: Flash Truquesmagicos

18

//aplica a mudança de cor

colorir.setRGB(0xFF0000);

}

verde_btn.onPress=function(){

//aplica a mudança de cor

colorir.setRGB(0x00CC00);

}

06 – COLISÃO 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 usuário.

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

Page 19: Flash Truquesmagicos

19

Crie uma camada chamada ações.

Na camada resposta crie uma caixa de texto dinâmico e instancie como

resposta.

Em Anti Alias defina como Use Device Fonts.

Instancie também os objetos

Page 20: Flash Truquesmagicos

20

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

dinâmico para onde o arquivo será enviado.

Então vamos agora programar nosso exemplo. Clique no primeiro quadro da

camada de ações e adicione.

Inicialmente adicione

//ação de arrastar o documento

documento.onPress = function(){

startDrag(this);

}

//ação para parar o arrasto ao soltar o mouse

documento.onRelease=function(){

stopDrag();

}

A ação 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 código

para:

//ação de arrastar o documento

documento.onPress = function(){

startDrag(this);

}

//ação para parar o arrasto ao soltar o mouse

documento.onRelease=function(){

stopDrag();

if (documento.hitTest(disquete)==true){

trace("disquete")

resposta_txt.text="Seu documento foi enviado para o

disquete";

Page 21: Flash Truquesmagicos

21

}else if(documento.hitTest(impressora)==true){

trace("impressora")

resposta_txt.text="Seu documento foi enviado para a

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

}

}

No código acima foi verificado se houve colisão entre os Movie Clips

(documento e destino). Esta colisão foi verificada através da ação HitTest

sendo real (TRUE) usei um trace para verificação e escrevi dentro da caixa de

texto a minha mensagem. No lugar da reposta eu poderia utilizar qualquer

ação. Usei o If, else, para ir verificando em qual movie clip de destino ocorre à

colisão.

Page 22: Flash Truquesmagicos

22

07 – BANNER EXPANSÍVEL O Banner Expansível é, a principio, um full banner (468x60) comum, porém,

quando o usuário passa o mouse em cima do mesmo, ele se expande, criando

uma boa interação e mostrando informações adicionais.

No Flash, crie um documento com 468 de width, que é a largura padrão de um

full banner e com a altura de sua preferência, porém só não exagere muito, o

ideal é que o banner tenha 468x280 pixels.

Vamos criar duas cenas.

Vamos agora editar a primeira cena (“cena1”).

Page 23: Flash Truquesmagicos

23

Faça um retângulo que será o fundo do seu banner. Faça um retângulo de

468x84, sem bordas. Converta-o em botão. Depois o arraste para a área Hit do

Botão.

Clique sobre ele e chame o painel de ações. Adicione o seguinte código:

on (rollOver) {

play();

}

on (rollOut) {

_root.gotoAndStop(1);

}

Crie uma nova camada. Arraste para baixo do botão e nela adicione uma

imagem.

Page 24: Flash Truquesmagicos

24

Adicione uma nova camada a nomeie para actions e adicione uma ação

stop();.

Crie um quadro chave no quadro 15 e adicione outra ação stop. Para a camada

da imagem crie uma animação do quadro 10 ao quadro 15 que faça com que a

imagem desapareça em um alpha 0.

Na cena Rollover adicione a imagem ou texto que será parte de sua animação.

No quadro 1 ela deve ficar na parte superior e no quadro final de sua animação

deverá estar em toda a tela.

Page 25: Flash Truquesmagicos

25

Crie uma camada para o botão invisível. Desenhe um retângulo que cubra todo

o palco converta-o em botão e deixe-o no quadro hit.

Clique sobre ele e pressione F9 para abrir o painel de ações. Digite

on (rollOut) {

gotoAndStop("cena1", 1)

}

on (release) {

getURL('www.apostilando.com.br', '_blank')

}

Para finalizar crie uma camada de ações e no último quadro adicione uma ação

stop();

Page 26: Flash Truquesmagicos

26

08 – ANIMAÇÕES Para quem já esta acostumado com o Flash sabe que para que uma animação

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 símbolo.

Crie um quadro chave no quadro 50 e crie uma animação de movimento

clássica (Botão direito do mouse em qualquer parte da animação e depois

Classic Tween).

Até aqui processo normal. Mas e se seu quisesse que ele fizesse um efeito de

frenagem e aceleração. O primeiro pensamento é que de criar novos quadros

chaves e mudar o objeto manualmente.

Page 27: Flash Truquesmagicos

27

Não é preciso. Clique em qualquer parte de sua animação fora dos quadros

chaves.

Junto ao local onde se podem trabalhar os valores do Easy, temos um lápis

para podermos manipular o efeito.

Clique no lápis.

Conforme você mover a linha ele adicionará a forma de aceleração da sua

animação.

Page 28: Flash Truquesmagicos

28

Para testar é preciso clique em OK e pressionar CTRL+ENTER.

Caso queira mudar a animação, basta mudar os pontos de posição. Para

retornar ao modo normal clique no botão RESET.

O Próprio Flash possui alguns efeitos prontos que vem a facilitar seu processo

de animação.

Crie um novo filme ou exclua a animação e o quadro chave final.

Selecione seu símbolo e clique no menu Window, Motion Presets.

Page 29: Flash Truquesmagicos

29

Será mostrado um painel com modelos de animação que você pode adicionar

aos seus símbolos. Bastam apenas estar com seu símbolo selecionado, depois

clicar sobre a animação desejada e clicar em Apply.

Será feito todo o caminho de sua animação.

Observe que o mode de Tween é o Motion Tween.

Para testar outras forma de animação, pressione CTRL+Z par voltar e repita o

processo.

Page 30: Flash Truquesmagicos

30

9 – RELÓGIO ANALÓGICO Neste exemplo vamos criar um relógio analógico.

Inicie um novo filme do Flash com ActionScript 2

Desenhe uma circunferência que será o fundo de nosso relógio.

Depois crie uma nova camada e acrescente os números do relógio. 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.

Page 31: Flash Truquesmagicos

31

Duplique seu símbolo e nomeie-o para minutos. Depois o edite e mude a sua

cor e tamanho.

Page 32: Flash Truquesmagicos

32

Crie uma camada chamada minuto e posicione o símbolo em seu relógio.

Page 33: Flash Truquesmagicos

33

Repita todo o processo para o ponteiro dos segundos.

Selecione os três ponteiro e chame o painel de alinhamento desmarque a

opção de alinhar ao palco e depois clique no alinhamento central.

Precisamos agora instanciar os botões do relógio. Oculte as camadas de

segundos e minutos e selecione o botão hora e instancie-o como: hora.

Page 34: Flash Truquesmagicos

34

Faça o mesmo para os demais ponteiros.

Crie uma nova camada chamada ações e dentro dela adicione.

//looping de animação

onEnterFrame = function() {

//cria a variável tempo do tipo Date

tempo = new Date();

//define a rotação 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.

Page 35: Flash Truquesmagicos

35

Em um novo projeto ActionScript2 desenhe uma circunferência e preencha com

um gradiente radial com a cor #FFFF00 nas duas cores, apenas na cor final

determine com alpha 0.

Converta para símbolo gráfico.

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.

Page 36: Flash Truquesmagicos

36

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 gráfico e aplique uma animação de forma,

distorcendo para cima um pouco a sua esfera.

Page 37: Flash Truquesmagicos

37

Volte à cena principal e adicione a seguinte ação.

//declara a variável

var copia:Number =1;

//loop de animação

_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.

Page 38: Flash Truquesmagicos

38

Salve seu filme e teste.

CONCLUSÃO

Com isto finalizamos nossa apostila de Flash TRUQUES MÁGICOS, se

você quer aprender mais sobre esta fantástica ferramenta e quer aprender a

usá-la para projetos de criação de web sites conheça nosso curso Webkit

através do link: http://apostilando.com/pagina.php?cod=30.