INTRODUÇÃO 01 MUDANDO O CURSOR DO MOUSE. A série

Transcrição

1 FLASH CS5

2 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série MUDANDO O CURSOR DO MOUSE ANIMAÇÃO COM GUIAS MÁSCARAS COM BORDAS O SENHOR BATATA MUDANDO A COR DO CLIPE DE FILME COLISÃO DE MOVIE CLIPS BANNER EXPANSÍVEL ANIMAÇÕES RELÓGIO ANALÓGICO CRIANDO UM EFEITO DE FOGO CONCLUSÃO

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

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

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

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

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

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

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 9

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). 10

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 11

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 12

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(){ 13

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

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

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 16

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(){ 17

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 18

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 19

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

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

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 ). 22

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

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

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(' '_blank') Para finalizar crie uma camada de ações e no último quadro adicione uma ação stop(); 25

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

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

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

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

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

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

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

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

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

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

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

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

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: 38