Jump to content
Sign in to follow this  
Andy

[Tutorial] Adobe® Flash® CS4 - Básico

Recommended Posts

Andy

Adobe® Flash® CS4

flcs4.jpg

Importante

Para que a página não fique extensa visualmente, cada capítulo estará dentro de um spoiler.

Em função das enúmeras imagens no decorrer do tutorial, todas elas estarão escondidas por trás de um botão clicável, bem como, evitar a quebra de layout.

Adobe Flash (antes: Macromedia Flash), ou simplesmente Flash, é um software primariamente de gráfico vetorial - apesar de suportar imagens bitmap e vídeos - utilizado geralmente para a criação de animações interativas que funcionam embutidas num navegador web. O produto era desenvolvido e comercializado pela Macromedia, empresa especializada em desenvolver programas que auxiliam o processo de criação de páginas web.

Costuma-se chamar apenas de flash os arquivos gerados pelo Adobe Flash, ou seja, a animação em si. Esses arquivos são de extensão ".swf" (de Shockwave Flash File). Eles podem ser visualizados em uma página web usando um navegador que o suporta (geralmente com plug-in especial) ou através do Flash Player, que é um leve aplicativo somente-leitura distribuído gratuitamente pela Adobe. Os arquivos feitos em Flash são comumente utilizados para propaganda animada (banners) em páginas web, mas evidentemente não limitando-se a isso, pois existem diversos jogos e apresentações dos mais variados tipos utilizando a tecnologia. Até mesmo sites inteiros podem ser feitos em '.swf'.

Em versões recentes (a partir da 5), a Macromedia expandiu a utilização do Flash para além de simples animações, mas também para uma ferramenta de desenvolvimento de aplicações completas. Isso graças aos avanços na linguagem ActionScript, que é a linguagem de programação utilizada em aplicações de arquivos flashes (.swf). A terceira versão desta linguagem acaba de ser lançada, tornando mais fácil e rápido criar aplicações para web, além de contar com recursos bem mais poderosos.

Uma nova plataforma, chamada Apollo, está sendo lançada pela Adobe e tem como objetivo solidificar o desenvolvimento da linguagem ActionScript, seja através do Flash, do Adobe Flex ou de outros programas

FONTE WIKIPÉDIA

Índice

Desenhando no Flash

Funções básicas

Interpolação de movimento

Interpolação de forma

Símbolo gráfico

Símbolos: movie clip e botão

Guia de movimento

Máscara

Introdução ao ActionScript

Alpha e Tint

Alguns joguinhos

Eventos e posição do mouse

Alterando as propriedades de um objeto

Fotos dinâmicas

Rollover com movie clip

Template

Áudio

Preloaders

Clique aqui para baixar o Adobe® Flash® CS4, faça o seu cadastro gratuitamente na Adobe para ter acesso aos downloads gratuitos para testes, e usufrua desse produto por 30 dias.

  • Like 1

Share this post


Link to post
Andy

Desenhando no Flash

Clique aqui para baixar o material a ser usado em boa parte do tutorial e extraia do WinZip dentro da pasta que você vai criar “flash”, abra o Flash CS4.

Clique para exibir

Clique em Open ou vá ao menu: File => Open... (Ctrl O).

Clique para exibir

Vá à pasta recém-extraída “galeria” e abra o arquivo “Montada.fla”.

Clique para exibir

Bom exibir as réguas para orientar, para isso vá ao menu: View => Rulers (o atalho é Ctrl Alt Shift R).

Clique para exibir

Clicando no ícone do quadradinho na Layer 1, você poderá exibir o contorno e preenchimento do boneco, clique nele para voltar a ocultar porque iremos fazer o nosso próprio contorno e preenchimento. Deixe a Layer 2 ativa.

Antes de prosseguir, que fique claro que o Flash não é o software mais eficiente para desenhos, mas nós vamos aprender a desenhar nele.

Clique para exibir

Bem, vamos começar com o contorno. Clique em Line Tool (o atalho é N).

Nas partes que forem retas não é problema, pois é só fazer a linha por cima. Mas e nas partes que forem curvas?

Clique para exibir

Isso é o que veremos a partir de agora. Vá até o chapéu e faça uma reta em uma das partes curvas como mostra na figura acima. Feito isso chame a Selection Tool (o seu atalho é V).

Clique para exibir

Vá com o cursor até a linha e quando aparecer um pequeno arco, você poderá encurvar a reta como na figura acima.

Vá contornando o máximo que puder, quando chegar aos olhos acompanhe os próximos passos.

Clique para exibir

Vá ao Retangle Tool (o atalho é R) e mude para Oval Tool (de atalho O).

Clique para exibir

Tente fazer-lo por cima de um dos olhos. Se aparecer um preenchimento, volte a ferramenta de seleção e clique no preenchimento antes de apertar Delete.

Clique para exibir

Chame a Free Transform Tool (o atalho é Q). Ajuste o novo olho à posição do olho já desenhado. Repita o procedimento no olho seguinte.

Clique para exibir

Hora de preencher, chame a Paint Bucket Tool (de atalho K).

Clique para exibir

Mude a cor do preenchimento para um cinza escuro e preencha o chapéu.

Parece que você não conseguiu preencher o chapéu, pois isso acontece porque nele há algumas brechas que não dá para ver nessa visualização. Ao contrário do Paint que preenche a tela inteira em caso de brecha, no Flash não faz preenchimento para evitar esses incidentes.

Com o balde de tinta ainda ativo, clique em Gap Size para abrir um leque de opções:

Dont’ Close Gaps: não fecha nenhuma abertura.

Close Small Gaps: fecha aberturas pequenas.

Close Medium Gaps: fecha aberturas médias.

Close Large Gaps: fecha aberturas grandes (não tão grande assim também né).

Clique para exibir

Escolha Close Large Gaps.

Clique para exibir

E finalmente preencha o chapéu.

Vá preenchendo o restante a seu gosto.

Agora iremos conhecer a borracha do flash, que é diferente da de outros editores gráficos.

Clique para exibir

Para isso clique em Eraser Tool (o atalho é E).

Clique para exibir

A Eraser Normal, como o nome diz, apaga tudo normalmente, nem precisa testar.

Clique para exibir

A Erase Fills apaga o preenchimento. Ctrl Z para desfazer.

Clique para exibir

A Erase Lines apaga as linhas. Ctrl Z para desfazer.

Clique para exibir

A Erase Selected Fills apaga o preenchimento selecionado. Ctrl Z para desfazer.

Clique para exibir

E a Erase Insidea apaga o preenchimento interior de uma forma, exemplo: nessa figura eu passei a borracha sobre o cara do boneco, ultrapassei um pouco e passei a borracha no chapéu, mas só apagou o preenchimento da cara, por onde comecei. Ctrl Z para desfazer.

Funções básicas

Mais algumas funções básicas quando estivermos desenhando ou editando objetos.

Abra o arquivo “Rosto01.fla”, que se encontra na pasta “galeria”.

Vamos conhecer as ferramentas Smooth, que serve para alisar objetos, e a Straighten, para indireitar.

Clique para exibir

Selecione a linha vermelha e vai clicando em Smooth até você acha que já te satisfez.

Clique para exibir

Selecione o círculo torto e clique em Straighten.

Clique para exibir

Se você desejar inserir um retângulo com cantos arredondados, aperte R para ativar e nas propriedades vá em Retangle Options.

Clique para exibir

Aumente para 5 e insira o retângulo no palco (a área de trabalho do Flash). Agora com os cantos arredondados.

Feche esse arquivo e abra o “Avião.fla”.

Clique para exibir

Selecione todo o aviãozinho amarelo.

Clique para exibir

Leve-o até sobrescrever parte da bolinha vermelha. Clique em qualquer lugar do palco.

Clique para exibir

Clique duas vezes no aviãozinho amarelo e leve-o um pouco para trás.

Clique para exibir

Parece que ele comeu um pedaço da bolinha vermelha.

Como evitar que isso aconteça?

Primeiro, vai dando Ctrl Z até desfazer toda a ação.

Clique para exibir

Selecione novamente o aviãozinho amarelo e vá ao menu: Modify => Group (Ctrl G).

Clique para exibir

Leve o aviãozinho amarelo novamente na bolinha vermelha.

Clique para exibir

Clique em qualquer lugar do palco e selecione o aviãozinho outra vez. Leve-o para trás e a bolinha não foi afetada.

Clique para exibir

Também é possível evitar esses incidentes separando os objetos por camadas. Vá à Timeline e clique em New Layer (nova camada).

Ao contrário do Fireworks e Photoshop, no Flash as camadas não são criadas automaticamente ao inserir um novo objeto.

Selecione o aviãozinho azul, dê Ctrl X para recortar, clique na camada recém-criada e Ctrl Shift V para colar (pressionando o Shift, o objeto a ser colado estará no mesmo ponto do palco).

Clique para exibir

Leve o aviãozinho azul até a bolinha verde.

Clique para exibir

Clique no palco e selecione o aviãozinho novamente (lembrando que esse não foi agrupado), leve-o para trás.

Clique para exibir

A bolinha azul não foi afetada, claro, se está em uma nova camada.

Interpolação de movimento

Nós vimos no Fireworks que uma animação é composta por vários quadros, logo, todas as animações vistas em desenhos animados, nada mais são do que uma ilusão de ótica.

Relembrando: para causar a impressão de movimento, são mostradas várias imagens em seqüência, em alta velocidade, de modo que o olho humano não perceba a transição entre elas. Você já deve ter feito, alguma vez na vida, algo parecido, desenhando, por exemplo, figurinhas em seqüência nos cantos das folhas de um caderno e folheando as páginas para causar a impressão de movimento.

As animações no Flash são feitas exatamente desse jeito. Nele, você coloca imagens em quadros sucessivos e depois faz com que eles rodem a determinada velocidade, como fizemos no State do Fireworks.

Obviamente, o Flash tem algumas vantagens sobre o bloquinho de papel e os GIFs animados com bitmaps - uma das principais é que você não precisa preencher todos os quadros necessários para a sua animação - podendo criar uma interpolação de movimento, ou seja, um quadro no ponto de partida e outro quadro no ponto de chegada.

Clique para exibir

Crie um novo arquivo em Flash, clicando em Flash File ou menu: File => New... (Ctrl N).

Clique para exibir

Dê OK.

Clique para exibir

Salve como “halloween.fla” e menu: Window => Color (Shift F9).

Clique para exibir

Mude o Type de Solid para Linear (efeito gradiente).

Clique para exibir

Clique no ícone de preenchimento preto.

Clique para exibir

Mude para azul. E no branco mude para preto.

Clique para exibir

Insira um retângulo que ocupe todo o palco.

Observação: é possível também mudar a cor do fundo do palco. Porque eu escolhi fazer um retângulo como fundo? Porque só há cor sólida como fundo do palco, com o retângulo foi possível aplicar um efeito gradiente linear.

Clique para exibir

Renomeie a camada para “céu” e bloqueie a mesma para não te atrapalhar adiante.

Crie duas camadas, renomeie a Layer 2 para “castelo” e a Layer 3 para “bruxa”. Vamos importar para o palco as figuras “Castelo.wmf” e “Bruxa.wmf”.

Clique para exibir

Para isso vá ao menu: File => Import => Importe to Stage... (Ctrl R).

Importe cada figura para suas respectivas camadas. Deixe a Bruxa fora do palco, pelo lado esquerdo na parte de cima, e leve o castelo para o canto inferior direito.

Clique para exibir

Na Timeline, clique no Frame (quadro) 30 da camada céu, e vá ao menu: Insert => Timeline => Frame (F5).

Clique para exibir

Faça o mesmo nas outras camadas para continuar sendo exibida as outras figuras que ficaram só no primeiro quadro, dando F5 é mais rápido.

Clique para exibir

Clique com o botão direito em qualquer lugar nos quadros da camada da bruxa e escolha Create Motion Tween (criação de interpolação de movimento).

Clique para exibir

Dê OK para agrupar todas as partes da figura da bruxa.

Clique para exibir

Leve o cursor da Timeline (não a setinha do mouse) no quadro 20 e vá ao menu: Insert => Timeline => Keyframe, ou dê um F6 para inserir um Keyframe (quadro-chave).

Isto é, do quadro 1 ao quadro 20 vai ter uma interpolação de movimento.

Mas claro que se fôssemos executar agora, não aconteceria nada, pois não animamos ainda o objeto principal.

Com o cursor no Keyframe 20, leve a bruxa até o outro lado, mas sem sair do palco.

Agora sim já tem uma animação, dê um Ctrl Enter para conferir.

Agora vamos fazer a bruxa dar uma curva com a vassoura. Crie um Keyframe no quadro 25.

Clique para exibir

No quadro 25, vá ao menu: Modify => Transform => Flip Horizontal.

Com isso a bruxa irá fazer uma curva para voltar.

Clique no Frame 40 e F5 em todas as camadas, ative a camada da bruxa no Frame 40 e F6 para inserir mais um Keyframe.

Clique para exibir

Leve a bruxa ao ponto de origem, mas dessa vez dentro do palco.

Clique para exibir

F5 no Frame 45 em todas as camadas e F6 no Frame 45 da camada “bruxa”. Volte ao menu: Modify => Transform => Flip Horizontal, para a bruxa fazer outra curva.

F5 em todas as camadas no Frame 50 e F6 nesse frame na camada da bruxa.

Clique para exibir

Aperte Q para chamar a Free Transform e rotacione um pouco para a diagonal em direção ao castelo.

F5 no Frame 65 da camada da bruxa e F6 nela, nas outras duas F5 na camada 70. Volte para a camada da bruxa no Frame 65.

Clique para exibir

Leve a bruxa até a porta do castelo e reduza a sua escala para dar a ilusão de que ela está entrando pela porta (para a redução da escala sair perfeita, mantenha o Shift pressionado).

Clique para exibir

Agora é só publicar: File => New => Publish (Shift F12), a animação será salva na pasta do seu projeto.

Para visualizar com um navegador, basta dar F12.

Clique aqui para o resultado da nossa primeira animação.

Para praticar: abra o arquivo “Esqui.fla” (salve como um novo arquivo) e importe o arquivo “Esquiador.wmf”. Faça com que o esquiador venha descendo da montanha, esquiando, e à medida que ele vai se aproximando da tela, faça com que aumente o seu tamanho aos poucos.

Interpolação de forma

Aprendemos a fazer uma interpolação de movimentos, agora iremos aprender a fazer uma interpolação de formas.

Crie um novo arquivo.

Clique para exibir

Nas propriedades do palco, vá ao Size e clique em “Edit...” que por padrão está com 500 pixels de largura por 400 de altura.

Clique para exibir

Defina a dimensão do palco em 300 pixels de largura por 200 de altura. Em “Frame rate”, que está com 24 frames por segundo, diminua para 12, o padrão em um desenho simples. Feito isso pode dar OK.

Salve como “formas.fla” e clique no quadro 30 da “Layer 1” antes de dar F5.

Clique para exibir

Chame a ferramenta oval e na paleta de cores escolha um verde gradiente (o cursor está indicando na figura acima).

Clique para exibir

Faça um círculo (para sair perfeito mantenha o Shift pressionado) e Ctrl F para chamar as ferramentas de alinhamento. Clique em “To stage” para ativar.

Clique para exibir

Com o círculo selecionado, clique em “Align horizontal center” (alinhamento horizontal centralizado).

Clique para exibir

E “Align vertical center” (alinhamento vertical centralizado).

Clique para exibir

Clique com o botão direito do mouse nos quadros ativos da “Layer 1”, mas escolha o “Create Shape Tween” (criação de interpolação de formas).

Clique para exibir

Clique no quadro 30, mas não dê F6 para inserir um Keyframe, invés disso vá ao menu: Insert => Timeline => Blank Keyframe (quadro vazio, o atalho é F7).

Clique para exibir

Faça um quadrado perfeito (preciso dizer como?) e alinhe ao centro também.

Ctrl Enter para ver o círculo virando um quadrado.

Clique para exibir

Agora vamos fazer o quadrado virar um círculo. Clique no quadro 60 e F5 dê um F7 nesse quadro para inserir um quadro vazio.

Clique para exibir

Clique com o cursor no quadro 1 e selecione o círculo, copiando-o em seguida com Ctrl C.

Clique para exibir

Clique no quadro 60 e dê um Ctrl Shif V para que seja colado na mesma posição do quadro 1.

Ctrl Enter para conferir, também pode ser conferido aqui.

Clique para exibir

Também é possível salvar a animação em outro formato, por exemplo como Gif Animado. Vá ao menu: File => Export => Export Movie... (Ctrl Alt shift S).

Clique para exibir

Escolha Animated Gif.

Clique para exibir

Dê OK.

Clique para exibir

O Gif Animado ficou com 108 Kbytes e com cores limitadas, enquanto o nosso SWF ficou com grande número de cores e com somente 10 Kbytes.

E possível transformar um SWF em um arquivo executável, abra o arquivo “formas.swf”.

Clique para exibir

Menu: Arquivo => Criar projetor...

Clique para exibir

Será salvo como um EXE.

Clique para exibir

Abra o arquivo “formas.exe”.

Clique para exibir

Ele ficou mais pesado, com aproximadamente 4 Megabytes, mas em compensação você pode ver a animação sem precisar instalar o Adobe Flash Player.

Símbolo gráfico

Quem acompanhou o tutorial do Corel Draw já tem uma noção básica do que são símbolos.

Para você que não acompanhou, e que já aprendeu a desenhar no Flash, suponha que você tenha desenhado um tabuleiro de xadrez e fez dois quadrados: um azul e um branco para serem as casas do tabuleiro. Com isso você foi copiando e colando até completar o tabuleiro.

Mas você resolve mudar as casas de azul para preta. Já imaginou o trabalho que você teria em mudar todas as 32 casas azuis, ou então, mudar uma e copiar e colar tudo de novo?

Existe um modo mais prático para fazer isso, usando símbolos.

Veja no exemplo abaixo:

Clique para exibir

Eu converti a casa azul para um símbolo e a branca para outro símbolo, copiei e colei até formar um tabuleiro. Aí decidi mudar a casa de azul para preta. Dando dois cliques no símbolo ou com o botão direito do mouse em Edit.

Clique para exibir

Abriu-se a propriedade desse símbolo e mudei para preto.

Clique para exibir

Acima da Timeline, cliquei em “Scene 1” para voltar pro palco.

Clique para exibir

E pronto. Por ser tão prático, vou mudar as casas brancas também.

Clique para exibir

Escolhi um beje.

Clique para exibir

E voltei para o palco.

Clique para exibir

Sem contar que com os símbolos, o arquivo original fica bem mais leve do que ficaria sem os símbolos (caso tenha copiado várias vezes o mesmo objeto sem estar como símbolo).

Outra qualidade do símbolo, é que é possível inserir animações dentro dele. Isso é muito útil para garantir melhor controle em projetos complexos, com muitas animações correndo no paralelo.

Há três tipos de símbolo no Flash:

Gráfico - símbolo simples contendo uma imagem, que pode depois ser aplicada em uma animação. Digamos que você tenha criado um personagem que possui movimento dos membros, é interessante criar um gráfico para cada membro que irá se movimentar, e depois juntá-los em um movie clip. O que veremos no próximo capítulo.

Movie Clip - símbolo que geralmente contem uma animação, isto é, esse símbolo pode ser animado na própria propriedade.

Botão - por intermédio dele que podemos dar o controle das animações ao usuário final. Assunto do ActionScript.

Clique para exibir

Vamos aprender a fazer um símbolo gráfico, crie um novo arquivo “cata.fla” e chame a Pen Tool (o atalho é P).

Clique para exibir

Vai clicando até fazer um triângulo escaleno.

Clique para exibir

Encurve as linhas com a ferramenta de seleção e preencha com o balde de tinta (talvez você precise aumentar a Gap Size).

Clique para exibir

Selecione toda a figura e vá ao menu: Modify => Convert to Symbol... (F8).

Clique para exibir

Acompanhe as definições, principalmente deixando o Type em Graphic (gráfico) antes de dar OK.

Clique para exibir

Só lembrando que ao lado da aba Properties fica a aba Library (biblioteca).

Símbolos: movie clip e botão

Já fizemos a paleta de cata-vento como símbolo gráfico, agora faremos o cabo como movie clip.

Apague a paleta do palco e faça um cabo de cata-vento (bom aumentar o palco para 750 pixels de largura por 600 de altura).

Clique para exibir

Feito o cabo, converta-o para símbolo, dê um nome, e escolha a opção Movie Clip.

Vá às propriedades desse símbolo (duplo clique no objeto) e leve para o palco o símbolo gráfico “paleta”.

Adicione mais uma camada, a inferior nomeie como cabo e a superior como paleta.

Clique para exibir

Aperte Q para ativar a “Free Transform Tool” e clique no alvo (ponto central).

Se a paleta estiver muito grande, reduza um pouco a escala.

Clique para exibir

Leve o alvo para a ponta da paleta mais próxima do cabo.

Clique para exibir

Agora duplique a paleta (Ctrl D) e rotacione à 90 graus negativo. Por o alvo estar à direita agora, o ponto de rotação não será mais no centro do objeto.

Vá repetindo o procedimento até formar-se quatro paletas.

Eu queria que cada paleta tivesse uma cor diferente, mas utilizando o mesmo símbolo. Vimos no tabuleiro de xadrez, que mudando a cor ou formato de um símbolo, todos os objetos pertencentes ao mesmo símbolo mudam também.

Clique para exibir

Selecione uma das paletas, e em propriedades vá em Color Effect, escolha o Style “Tint”.

Clique para exibir

Aqui você pode modificar sem afetar os símbolos copiados.

Clique para exibir

Faça o mesmo com mais duas paletas.

Terminado, dê um F5 no quadro 40 em ambas as camadas e crie uma interpolação de movimento na camada paleta, antes de inserir um Keyframe no quadro 40.

De cara, iríamos rotacionar o cata-vento.

Clique para exibir

Mas não, iremos clicar no primeiro quadro, e em propriedades deixar o “Rotate” em 40 times, com a Direction em CCW (anti-horário).

Volte para o placo principal, saindo das propriedades desse símbolo.

Clique para exibir

Note que não criamos nenhuma animação no palco principal, toda a animação está dentro do movie clip.

Confira o resultado aqui.

Feche o arquivo e crie um novo de nome “button.fla”.

Vamos aprender a fazer um botão com efeito rollover.

Clique para exibir

Chame a ferramenta oval e escolha o preenchimento de gradiente vermelho.

Clique para exibir

Faça um objeto oval no tamanho de um botão e selecione sua borda para aumentar em 3 pixels na parte Stroke.

Clique para exibir

Selecione o botão e F8, nomeie como “botão” e escolha a opção Button.

Entre nas propriedades desse símbolo.

Ao contrário do Movie clip, os quadros não são numerados. E sim com: Up, Over, Down e Hit.

Up - como o botão será exibido inicialmente.

Over - mudará a cor ou formato, ao passar o mouse em cima.

Down - mudará a cor ou formato, ao clicar no botão.

Hit - especificar uma área do botão para os efeitos anteriores.

Clique para exibir

Adicione mais uma camada, a de baixo se chamará “botão” e a de cima “texto”.

Clique para exibir

Digite um texto de cor branca (importante nas propriedades deixar como Static Text, mais adiante iremos conhecer essa função).

Clique para exibir

F6 nas camadas do quadro Over e mude o texto para verde suave.

Clique para exibir

F6 nas camadas do quadro Down e vamos mudar o botão para um gradiente amarelo.

Clique para exibir

F6 somente na camada do texto do quadro Hit, com isso os efeitos irão ocorrer somente quando o cursor chegar ao texto do botão. Se deixar o Hit em branco, o efeito será no objeto inteiro ao passar com o mouse.

Clique para exibir

Diminua o palco para a escala um pouco maior que a do botão, e centralize o seu objeto.

Vamos ver como ficou o nosso botão, ou dando F12 ou clicando aqui.

Passe com o mouse sobre ele, clique nele. Agora só falta fazer o botão funcionar, quando chegarmos à parte programável do Flash.

Guia de movimento

Na interpolação de movimentos, você deve ter notado que o objeto só anda em linha reta, o que torna-o monótono.

No Flash, você conta com um recurso bem interessante para direcionar o movimento dos objetos. Estou falando do guia de movimento (Motion Guide) que você pode traçar uma linha qualquer e fazer o objeto se mover ao longo dela.

Salve na pasta “flash” as imagens floresta e borboleta, crie um novo arquivo de nome “borboleta.fla” e aumente o palco para 560 pixels de largura por 420 de altura (a mesma resolução da imagem da floresta).

Clique para exibir

Importe as imagens para a biblioteca, para isso vá ao menu: File => Import => Import to Library...

Clique para exibir

E localize as imagens que iremos trabalhar.

Clique para exibir

Dê OK.

Clique para exibir

Renomeie a Layer 1 para “floresta” e crie uma nova camada de nome “borboleta”. Leve cada imagem para suas respectivas camadas e bloqueie a camada da floresta (bom diminuir um pouco a escala da borboleta).

Clique para exibir

Converta a borboleta para o símbolo do tipo Movie Clip e entre nas propriedades do seu novo símbolo.

Clique para exibir

F5 no quadro 5 e crie uma interpolação de movimento. F6 no quadro 5 e estreite um pouco a borboleta para dar a ilusão de que está fechando as asas.

Clique para exibir

Clique com o botão direito do mouse nesse intervalo e escolha Copy Frames para copiar todos os cinco frames.

Clique para exibir

Clique no quadro 6 com o botão direito do mouse e escolha Paste Frames.

Clique para exibir

Clique com o botão direito nos frames recém-colado e escolha Reverse Keyframes para inverter a animação antes de voltar para o palco.

Clique para exibir

Clique com o botão direito do mouse sobre o nome da camada “borboleta” e escolha “Add Classic Motion Guide” (oculte o preenchimento da floresta para facilitar a visão).

Clique para exibir

Chame o lápis para fazer uma linha na camada do Guide.

Clique para exibir

Faça uma linha curva, mas sem cruzamento (ela ficará oculta na hora de ser publicado).

Observação: NÃO FAÇA INTERPOLAÇÃO DE MOVIMENTOS NA CAMADA DA LINHA GUIA!!!!!!

Pois a linha em si que interpolará o movimento do objeto.

Clique para exibir

Arraste a borboleta para uma extremidade da linha, no quadro 1.

Clique para exibir

Clique no quadro 55 e F5 em todas as camadas. Na camada da borboleta, clique com o botão direito do mouse e escolha “Create Classic Tween”.

Clique para exibir

Keyframe no quadro 25 e arraste a borboleta para a outra extremidade.

Clique para exibir

Insira um Keyframe no quadro 30.

Clique para exibir

Copie o quadro 1.

Clique para exibir

E cole no quadro 55.

Clique para exibir

Nem precisou arrastar de volta, F12 ou confira aqui.

Para praticar: abra o arquivo “Camadas.fla” e faça duas bolas, uma de cor gradiente linear azul e outra linear vermelha.

Converta-as em símbolo gráfico.

Acima da Layer “Mão Direita”, adicione mais duas camadas de nome: azul, e vermelho. Selecione a Layer “azul” e adicione um Guide. O mesmo na Layer “vermelho”. Coloque a bola azul linear na camada “azul” e a bola vermelha na camada “vermelho”.

Desenhe um arco em cada Guide, e faça cada bola ir e voltar.

Clique para exibir

Se não ficou nenhuma dúvida, a prática deverá estar assim.

Confira aqui o resultado.

Máscara

Como o nome já diz, elas escondem o que está por baixo.

Salve a imagem carro na pasta “flash” e crie um novo arquivo “carro.fla”.

Clique para exibir

Mude o fundo do palco para preto e altere a dimensão do palco para 440 pixels de largura por 313 de altura.

Renomeie a Layer 1 para “carro”, importe a imagem do carro para essa camada antes de bloquear a mesma. Crie uma nova camada “máscara” e faça um círculo.

Clique para exibir

Na camada do círculo, clique com o botão direito do mouse em “Mask”.

Clique para exibir

A máscara está pronta, agora vamos animar a máscara. F5 no quadro 100 em todas as camadas, e na camada da máscara, Create Shape Tween.

Destrave a camada máscara (a camada do círculo).

Clique para exibir

F6 no quadro 10 e mova o círculo como indicado na figura acima.

Clique para exibir

Idem no quadro 20.

Clique para exibir

No quadro 30.

Clique para exibir

No quadro 40.

Clique para exibir

Mais um Keyframe no quadro 45 e centralize a sua máscara.

Clique para exibir

Insira um quadro vazio no quadro 50 com F7 e chame o retângulo.

Clique para exibir

Insira um retângulo no quadro vazio e aumente para a mesma resolução do palco, bom alinhar ao centro.

Clique para exibir

Insira mais um Keyframe no quadro 80, mas não atribua nada.

Clique para exibir

F6 no quadro 90 e diminua a altura do retângulo para um pixel.

Clique para exibir

Centralize a linha (ex-retângulo) na vertical.

Clique para exibir

F6 no quadro 91 e leve a linha para fora do palco.

Clique para exibir

E F6 no quadro 100 antes de dar um F12.

Esse é o resultado.

Esse é o último capítulo com as animações simples, a partir do próximo capítulo iremos começar aprofundar na parte de programação. Mas não entre em pânico, porque serão comandos simples que estarei orientando.

Então nada melhor do que praticarmos com o que aprendemos até aqui:

Prática 1

Valendo um DVD do Chaves com episódios a sua escolha (dos que eu tenho na lista, claro) para o primeiro que conseguir fazer uma animação similar a dessa prática.

Material: Lupa e Girador.

Prática 2

Esse aqui eu vou premiar com qualquer seriado exibido no SBT a sua escolha, exceto CH.

Material: Etiqueta, Celular 1, Celular 2, Celular 3, Celular 4, Celular 5.

Se você não estiver dando conta de fazer essa prática, eu disponibilizei o FLA aqui para tirar algumas dúvidas.

Essa segunda animação foi feita pelo professor Vimerson Dantas.

Introdução ao ActionScript

É por meio do ActionScript que fazemos aquelas animações em que o usuário final clica em um botão para prosseguir, bem como, o famoso “preloader”.

Esses dois exemplos acima faremos mais adiante.

Suponhamos que você resolva fazer uma apresentação em Flash. Como você controlaria a apresentação? Fazendo a apresentação durarem muitos quadros para ter tempo de ler ela toda?

Está faltando um controle para apresentações. E é isso que faremos a partir de agora, crie um novo arquivo no flash de nome “diario.fla”.

Clique para exibir

Vamos inserir um botão: Window => Common Libraries => Buttons.

Antes renomeie a Layer 1 para “texto”, crie uma nova camada de nome “botões”.

Clique para exibir

Escolha um de seu gosto e arraste para o palco na camada “botões”.

Clique para exibir

Vamos precisar de mais dois botões, repita o procedimento ou vai duplicando o botão. Ative as réguas e puxe uma linha-guia vertical para te orientar.

Em ambas as camadas, insira quadros vazios (F7) até o quadro 4.

Clique para exibir

Escolha um outro botão que indique que é para voltar e coloque a direita do palco, no quadro 2 da camada “botões”.

Clique para exibir

No lado de cada botão o capítulo, na camada “texto” do quadro 1 (todos os textos deverão estar como StaticText).

Clique para exibir

Digite o endereço www.forumch.com.br e converta-o para símbolo do tipo botão, para servir de link para o fórum.

Clique para exibir

Entre nas propriedades do novo botão e configure a seu gosto.

Clique para exibir

Não precisa preencher o Hit, volte para o palco.

Agora iremos conhecer a interface do ActionScript.

Clique para exibir

Mantenha o botão do link selecionado e vá ao menu: Window => Actions (F9).

Clique para exibir

E digite o código a seguir:

on (release) {
getURL("http://www.forumch.com.br/", "_blank");
}

_blank: evento ao clicar no link, abrir-se a uma nova janela.

Clique para exibir

Copie o nome do primeiro capítulo.

Clique para exibir

E cole no quadro 2, não se esquecendo de alinhar ao centro na horizontal e ao topo na vertical.

Clique para exibir

Selecione o botão que você inseriu nesse quadro (o que vai funcionar como voltar).

Clique para exibir

E digite esse evento:

on (release) {
gotoAndStop(1);
}

É aí que eu estou querendo chegar:

gotoAndStop: ir para o quadro desejado e não sair desse quadro. Esse evento é muito importante, pois esse evento nos dá o controle de uma apresentação em Flash.

Clique para exibir

Bom checar para ver se não há nenhuma sintaxe incorreta.

Clique para exibir

Nesse exemplo o script não contém erros.

Clique para exibir

Eu apaguei uma “{” para verificar o que vai retornar quando uma sintaxe está incorreta. A mensagem de erro mostra onde está o erro e o número de erros. Desfaça o erro.

No capítulo seguinte nós vamos fazer os botões do quadro 1 funcionarem.

Alpha e Tint

Antes de passar para os recursos anunciados neste capítulo, vamos adiante com o arquivo do capítulo anterior. Volte ao quadro 1 e copie o nome do segundo capítulo.

Clique para exibir

Cole-o no quadro 3. Copie e cole o botão voltar (para colar na mesma posição do quadro anterior, Ctrl Shift V).

Clique para exibir

E faça o mesmo com o capítulo 3.

Clique para exibir

Agora selecione o primeiro botão e F9.

Clique para exibir

E copie esse evento:

on (release) {
gotoAndStop(2);
}

Dica: quem lida com códigos e scripts, não se dá ao trabalho de digitar letra por letra. No exemplo acima, como é a mesma sintaxe do botão voltar, eu só copiei o código e colei nesse botão (apenas mudando o quadro a ser exibido).

Clique para exibir

Repita o procedimento no segundo botão, mudando apenas o quadro a ser exibido.

on (release) {
gotoAndStop(3);
}

Clique para exibir

E no terceiro botão.

on (release) {
gotoAndStop(4);
}

Pois bem, em cada botão que a gente clicar, irá para o quadro desejado sem que ele saia do quadro a ser exibido.

Mas e o primeiro quadro? Ele só vai ficar parado quando clicamos em voltar, nos outros capítulos, mas não vai ficar parado quando for iniciada essa apresentação.

É mais fácil ainda.

Clique para exibir

Clique no “quadro 1” da camada texto e no ActionScript digite o comando “stop();”.

Viu que programação em flash não é nenhum bicho de sete cabeças, mas vamos aliviar um pouco e conhecer mais dois recursos.

Clique para exibir

Crie uma nova camada “título” para o título da apresentação, ative o quadro 1 e menu: Insert => New Symbol... (Ctrl F8).

Clique para exibir

Nomeie como Título do tipo Movie Clip.

Essa interpolação vai ser dentro do movie clip para não influenciar a nossa apresentação, que está sem interpolação na Timeline.

Que aliás, é bom que boa parte das animações sejam feitas dentro do movie clip, procurando deixar a Timeline do palco principal com o mínimo de quadros possíveis.

Clique para exibir

Dentro do movie clip “fantasma”, faça um titulo “O DIÁRIO DO FUCH” e converta em símbolo gráfico (se o texto não for um símbolo, os efeitos que iremos praticar ficam desativados).

F5 no quadro 50.

Selecione o símbolo gráfico e insira um Keyframe no quadro 10, não se esqueça de criar a interpolação.

Clique para exibir

Volte ao quadro 1 e em Color Effect, em Style, escolha o “Alpha”.

Clique para exibir

Deixe em 0% para ficar oculto.

Clique para exibir

Se no quadro 10 também estiver oculto, deixe o “Alpha” em 100% nesse Keyframe.

Clique para exibir

Insira um Keyframe no quadro 20 e em Color Effect, em Style, escolha o “Tint”.

Clique para exibir

E mude para outra cor.

Clique para exibir

F6 no quadro 30 e mude para outra cor.

Clique para exibir

O mesmo no quadro 40.

Clique para exibir

E por fim no quadro 50.

Clique para exibir

Insira o comando “stop();” nesse Keyframe para que a interpolação nesse movie clip não seja com “loop” (circular).

Volte para o palco principal.

Clique para exibir

Remova os frames 2, 3, e 4 na camada “título” para que o título do livro seja exibido somente no índice, no caso o quadro 1.

Vamos ver como ficou o nosso livro, clicando aqui.

Alguns joguinhos

Provavelmente você já acessou uma página em que uma imagem acompanha o cursor do mouse. É um recurso da linguagem Java, mas também é possível fazer isso no ActionScript.

É o que iremos fazer agora, crie um novo arquivo “persegue.fla”

Clique para exibir

Faça um círculo e converta-o para Movie Clip.

Clique para exibir

Selecione esse objeto e atribua a linha de comando a seguir:

onClipEvent
(enterFrame) {
//Movimento Horizontal
mx=_root._xmouse;
if (mx<_x) {
dx=_x-mx;
}
else {
dx=mx-_x;
}
moveSpeedx=dx/10;
if (mx<_x) {
_x=_x-moveSpeedx;
}
else {
_x=_x+moveSpeedx;
}
//Movimento Vertical
my=_root._ymouse;
if (my<_y) {
dy=_y-my;
}
else {
dy=my-_y;
}
moveSpeedy=dy/10;
if (my<_y) {
_y=_y-moveSpeedy;
}
else {
_y=_y+moveSpeedy;
}
}

Os comentários entre “//” não afetam a sintaxe.

Confira o resultado.

Agora iremos aprender a fazer um quebra-cabeça, salve esta imagem e abra-a com o Fireworks.

Clique para exibir

Ative a ferramenta “Polygon Lasso tool” (o atalho é L).

Clique para exibir

Vá recortando em polígonos (vamos fazer cortes grandes para não estender muito).

Clique para exibir

Tendo recortado, crie um novo arquivo. O tamanho da área de trabalho automaticamente será o mesmo tamanho da área recortada.

Escolha o fundo transparente.

Clique para exibir

Cole.

Clique para exibir

Ctrl Shift S para salvar como “maisa1.png”.

Clique para exibir

Vá repetindo o procedimento com as outras partes, salvando como “maisa2.png”.

Clique para exibir

Como “maisa3.png”.

Clique para exibir

E “maisa4.png”.

Crie um novo arquivo no flash de nome “puzzle.fla” (bom aumentar o palco para 600 pixels de largura).

Clique para exibir

Ctrl R para importar as partes da Maísa.

Clique para exibir

Faça conforme o indicado e dê OK.

Clique para exibir

Embaralhe as partes da Maísa e selecione parte por parte antes de dar F9 em cada uma.

Clique para exibir

Atribua esse código em cada parte do quebra cabeça:

on(press){
startDrag(this,false)
}
on(release){
this.stopDrag();
}

Vamos ver como ficou, clique aqui para brincar com o novo quebra-cabeça da Maísa.

Eventos e posição do mouse

Embora disponível o ActionScript 3.0 nessa versão, iremos continuar com o 2.0.

Quando vamos criar uma interação com o usuário, devemos determinar comandos a serem executados, para que esses comandos possam ser executados em determinado momento, devemos utilizar os eventos, que podem ser de mouse ou de teclado, veja abaixo os principais eventos de mouse existentes no ActionScript 2.0:

onPress - Evento acionado quando o objeto é pressionado com o botão esquerdo do mouse.

onRelease - Evento acionado quando o botão do mouse é solto ainda sobre o objeto.

onReleaseOutside - Evento acionado quando o botão do mouse é solto com o cursor fora do objeto.

onRollOut - Evento acionado quando o cursor do mouse sai de cima do objeto.

onRollOver - Evento acionado quando o cursor do mouse passa pela área do objeto.

Vamos pôr em prática, crie um novo arquivo “mouse.fla” e renomeie a Layer 1 para “objeto”. Crie uma nova camada de nome “ações”.

Clique para exibir

Desenhe um retângulo e converta-o para Movie Clip.

Clique para exibir

Selecione esse movie clip e nomeie essa instância (“Instance name”) como “objeto”.

Nas instâncias não devem conter espaços e nem acentos.

Até o capítulo anterior, nós só tínhamos atribuído as ações em objeto por objeto. Com as instâncias, finalmente podemos criar uma camada que agregará todas as ações, deixando mais organizado.

Clique para exibir

Aí que entra a camada “ações”, a partir deste capítulo todos os FLAs posteriores serão criados essa camada para as ações do ActionScript, clique nela e F9.

Clique para exibir

Insira as ações a seguir, com a função trace():

objeto.onPress = function() {
trace("o usuário pressionou o botão do mouse");
};
objeto.onRelease = function() {
trace("o usuário soltou o botão do mouse");
};
objeto.onReleaseOutside = function() {
trace("o usuário soltou o botão do mouse fora da área do objeto");
};
objeto.onRollOut = function() {
trace("o mouse sai da área do objeto");
};
objeto.onRollOver = function() {
trace("o mouse passou na área do objeto");
};

“objeto” é a instance name do seu movie clip.

Clique para exibir

Ctrl Enter para testar, essa ação não será mostrada quando publicada.

Clique para exibir

Passando o mouse no objeto.

Clique para exibir

Clicando com o mouse no objeto.

Clique para exibir

Soltando o mouse no objeto.

Clique para exibir

Tirando o mouse do objeto.

Clique para exibir

Passando com o mouse no objeto, clicando no objeto, mas soltando o mouse fora do objeto.

Crie um novo arquivo “position.fla” e renomeie a Layer 1 para “objetos”.

Observação: Não vou mais mandar criar a camada “ações” já que isso será feito a cada novo FLA.

Como já conhecemos os eventos de mouse vamos agora capturar a posição do mouse em relação a determinados objetos.

Clique para exibir

Chame a ferramenta texto e mude de Static Text para Dynamic Text.

Clique para exibir

Prepare dois textos: um para a posição do eixo X e outro para o eixo Y.

Clique para exibir

O texto dinâmico do eixo X, nomearemos como “posx”.

Clique para exibir

E o do eixo Y para “posy”.

Lembre-se que no mundo da web, o ponto 0 (zero) do eixo Y é em cima e não embaixo, pois uma página da web começa de cima para baixo e não de baixo para cima.

Clique para exibir

F9 na camada “ações” e atribua as ações abaixo:

_root.onEnterFrame = function() {
posx.text = _xmouse
posy.text = _ymouse
};

Clique para exibir

Ctrl Enter para testar: nesse exemplo o mouse está na posição 0 (zero) em ambos os eixos.

Clique para exibir

A cada movimento com o mouse, ele vai mudando sua posição.

Clique para exibir

Na outra extremidade.

Clique para exibir

Muito utilizado para ter o controle de uma posição no palco.

Confira.

Alterando as propriedades de um objeto

Todos os objetos possuem propriedades, essas propriedades podem ser lidas e alteradas, mas nunca excluídas.

Crie um novo arquivo “movie1.fla” e renomeie a Layer 1 para “botões”, além de criar a camada “objetos” e fazer um retângulo nessa última camada antes de converter-lo para Movie Clip.

Clique para exibir

Nomeie-o como “mc_retangulo”.

Clique para exibir

Na camada “botões”, insira os botões, em Key Buttons: down, left, right e up.

Clique para exibir

E o botão “loop” em Playback. Duplique esse botão e inverta-o (Modify => Transform => Flip Horizontal) antes de atribuirmos os seus respectivos nomes.

Clique para exibir

up: nomeie como “cima”.

Clique para exibir

left: nomeie como “esquerda”.

Clique para exibir

down: nomeie como “baixo”.

Clique para exibir

right: nomeie como “direita”.

Clique para exibir

loop invertido horizontalmente: “girar_ccw” (girar no sentido anti-horário).

Clique para exibir

loop: “girar_cw” (girar no sentido horário).

Clique para exibir

Na camada “ações”, atribua o evento a seguir:

cima.onPress = function(){
mc_retangulo._y-=10
};
baixo.onPress = function(){
mc_retangulo._y+=10
};
esquerda.onPress = function(){
mc_retangulo._x-=10
};
direita.onPress = function(){
mc_retangulo._x+=10
};
girar_cw.onPress = function(){
mc_retangulo._rotation+=10
};
girar_ccw.onPress = function(){
mc_retangulo._rotation-=10
};

Confira.

Você pode mover o objeto para qualquer direção, mas tem que ficar apertando toda hora os botões do palco.

Para facilitar incrementaremos um evento que ao clicar uma vez o objeto irá sozinho para uma direção, sem ter que apertar toda hora o mesmo botão.

É o evento:

_root.onEnterFrame = function(){

Salve o arquivo como “move2.fla” e edite a camada “ações”.

Clique para exibir

A ação incrementada estará assim:

cima.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._y-=10
}
}
baixo.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._y+=10
}
}
esquerda.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._x-=10
}
}
direita.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._x+=10
}
}
girar_ccw.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._rotation-=10
}
}
girar_cw.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._rotation+=10
}
}

Veja.

Agora não teremos mais o trabalho de apertar inúmeras vezes um botão. Mas, não podemos mais parar o retângulo. Com isso, se apertar uma vez e não fizer nada, ele vai embora.

Clique para exibir

Aí que entra um outro evento.

instance name.onRelease = function(){
delete _root.onEnterFrame
}

Salve como “move3.fla”.

Clique para exibir

Com esse evento, ao clicar em qualquer botão, o objeto ira se mover até soltar o botão, quando pára.

As ações ficarão assim:

cima.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._y-=10
}
}
cima.onRelease = function(){
delete _root.onEnterFrame
}

baixo.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._y+=10
}
}
baixo.onRelease = function(){
delete _root.onEnterFrame
}

esquerda.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._x-=10
}
}
esquerda.onRelease = function(){
delete _root.onEnterFrame
}

direita.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._x+=10
}
}
direita.onRelease = function(){
delete _root.onEnterFrame
}

girar_ccw.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._rotation-=10
}
}
girar_ccw.onRelease = function(){
delete _root.onEnterFrame
}

girar_cw.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._rotation+=10
}
}
girar_cw.onRelease = function(){
delete _root.onEnterFrame
}

Confira.

Vamos criar mais dois botões (se quiser fazer o seu próprio botão, assim como eu usei símbolos de texto, fique a vontade).

Clique para exibir

Um botão para ampliar o objeto (se estiver usando símbolo de texto também, mude para Static Text).

Clique para exibir

E outro botão para reduzir.

Clique para exibir

O botão que irá ampliar o objeto vai se chamar “ampliar”.

Clique para exibir

E o botão que irá reduzir vai se chamar “reduzir”.

Clique para exibir

Vamos incrementar à camada ações.

Ampliar e diminuir a escala na horizontal e na vertical ao mesmo tempo, senão vai-se deformar.

ampliar.onPress = function(){
mc_retangulo._xscale = mc_retangulo._xscale+10
mc_retangulo._yscale = mc_retangulo._yscale+10
};
reduzir.onPress = function(){
mc_retangulo._xscale = mc_retangulo._xscale-10
mc_retangulo._yscale = mc_retangulo._yscale-10
};

E incrementar os outros dois eventos se não quiser apertar diversas vezes.

Clique para exibir

Ficará assim:

ampliar.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._xscale = mc_retangulo._xscale+10
mc_retangulo._yscale = mc_retangulo._yscale+10
}
}
ampliar.onRelease = function(){
delete _root.onEnterFrame
}

reduzir.onPress = function(){
_root.onEnterFrame = function(){
mc_retangulo._xscale = mc_retangulo._xscale-10
mc_retangulo._yscale = mc_retangulo._yscale-10
}
}
reduzir.onRelease = function(){
delete _root.onEnterFrame
}

Eis o resultado final.

Fotos dinâmicas

Crie um novo arquivo “album.fla” e as camadas: “botões”, “legenda”, e, “foto” (além da “ações”...).

Salve na pasta “flash” a foto 1, foto 2, foto 3, foto 4 e foto 5.

Clique para exibir

Crie um novo botão.

Clique para exibir

E nas propriedades desse símbolo, crie uma nova camada para textos [se o texto estiver como Dynamic Text (texto dinâmico), mude para Static Text (texto estático)].

Clique para exibir

Em Over, mude a cor do botão.

Clique para exibir

Em Down, mude a cor do nome do botão.

Clique para exibir

Volte para o palco, clique na aba Library e clique com o botão direito do mouse no botão recém-criado, escolhendo Duplicate.

Clique para exibir

Renomeie o símbolo.

Clique para exibir

Leve o novo botão para o palco.

Clique para exibir

Clique com o botão direito sobre ele e vá em Edit.

Clique para exibir

Renomeie em todos os quadros o nome do botão no texto antes de voltar para o palco principal.

Duplique mais três botões e repita o procedimento (bom alinhar os cinco botões, na parte inferior do palco).

Clique para exibir

Agora iremos atribuir o nome a cada um. O primeiro se chamará “bt1”.

Clique para exibir

O segundo “bt2”.

Clique para exibir

O terceiro “bt3”.

Clique para exibir

O quarto “bt4”.

Clique para exibir

E o quinto “bt5”.

Clique para exibir

Para adiantar: vamos chamar algumas ferramentas para não ter que ficar dependendo dos atalhos ou recorrer ao menu. Window => Toolbars => Main (tem até ferramenta de escala, para não precisar usar o Free Transform, que é obrigado a pressionar o Shift...).

Clique para exibir

Vá para a camada legenda e crie uma área para as legendas usando a ferramenta Text Tool, escolha a opção Dynamic Text e nomeie como “legenda”.

Clique para exibir

Na camada “foto”, desenhe um retângulo que ocupe a maior parte do palco (para exibir as fotos), converta-o em Movie Clip e em Registration ative a diagonal superior esquerda (se a borda do retângulo estiver preta, mude para branco dentro do seu movie clip).

Clique para exibir

Ao invés do centro, a foto será exibida a partir da área que ativamos.

Clique para exibir

Atribuindo as escalas limite da foto no primeiro botão, todas as outras fotos não ultrapassarão esse limite.

bt1.onPress = function(){
legenda.text="Mulher espantada"
loadmovie("foto1.jpg",area);
area._xscale = 50;
area._yscale = 50;
 }
bt2.onPress = function(){
legenda.text="Menina e macarrão"
loadmovie("foto2.jpg",area);
 }
bt3.onPress = function(){
legenda.text="Menino e macarrão"
loadmovie("foto3.jpg",area);
 }
bt4.onPress = function(){
legenda.text="Escritório"
loadmovie("foto4.jpg",area);
 }
bt5.onPress = function(){
legenda.text="Torre"
loadmovie("foto5.jpg",area);
 }

Ctrl Enter pare testar (lembre-se que as fotos ficam na mesma pasta do corrente arquivo, no caso a pasta “flash”).

Clique para exibir

Ao contrário do texto estático, no texto dinâmico é possível selecionar o texto com o mouse.

Observação: se você der um F5 no link acima, quando voltará a aparecer sem foto, se começar a clicar em qualquer foto, sem ser a primeira, todas elas serão exibidas na escala original e poderão ficar na frente dos botões (claro, se a camada “botões” está abaixo de tudo, mas se clicar no nome da camada você poderá mover ela de posição). Isso porque só atribuímos o limite no bt1. Nesse caso é só copiar o:

area._xscale = 50;
area._yscale = 50;

...para os outros botões, nas ações. O exemplo da animação deste capítulo (mais abaixo) eu optei por não usar as fotos da mesma pasta da animação, mas sim da url que eu passei para vocês salvarem a foto. Com isso eu adicionei antes do nome de cada foto a url "http://s60.photobucket.com/albums/h39/ebmel/Flash/", ficando assim:

bt1.onPress = function(){
legenda.text="Mulher espantada"
loadmovie("http://s60.photobucket.com/albums/h39/ebmel/Flash/foto1.jpg",area);
area._xscale = 50;
area._yscale = 50;
 }
bt2.onPress = function(){
legenda.text="Menina e macarrão"
loadmovie("http://s60.photobucket.com/albums/h39/ebmel/Flash/foto2.jpg",area);
 }
bt3.onPress = function(){
legenda.text="Menino e macarrão"
loadmovie("http://s60.photobucket.com/albums/h39/ebmel/Flash/foto3.jpg",area);
 }
bt4.onPress = function(){
legenda.text="Escritório"
loadmovie("http://s60.photobucket.com/albums/h39/ebmel/Flash/foto4.jpg",area);
 }
bt5.onPress = function(){
legenda.text="Torre"
loadmovie("http://s60.photobucket.com/albums/h39/ebmel/Flash/foto5.jpg",area);
 }

Confira.

Rollover com movie clip

É possível criarmos um botão rollover com movie clip, crie um novo arquivo “bola.fla” e renomeie a Layer 1 para “bola”.

Deixe o palco com 120 pixels de largura por 120 de altura e faça um círculo perfeito com 86 pixels de diâmetro.

Clique para exibir

Converta-o para Movie Clip e volte com o Registration ao centro.

Clique para exibir

Nas propriedades desse movie clip, insira o stop(); no primeiro quadro.

Clique para exibir

F6 no quadro 2 e mude a cor da bola para verde.

Clique para exibir

No quadro 3 para vermelho, antes de voltar para o palco principal.

Clique para exibir

Nomeie o movie clip como “bola”.

Clique para exibir

Na camada ações, atribua os eventos a seguir:

(Com explicação de cada evento iniciados por “//”):

//ao passar o mouse sobre a bola, irá para o segundo quadro
bola.onRollOver = function() {
bola.gotoAndStop(2);
};
//ao sair da bola com o mouse, voltará para o primeiro quadro
bola.onRollOut = function() {
bola.gotoAndStop(1);
};
//ao clicar na bola com o mouse, irá para o terceiro quadro
bola.onPress = function() {
bola.gotoAndStop(3);
};
//ao soltar a bola, ainda com o mouse sobre ela, voltará para o segundo quadro
bola.onRelease = function() {
bola.gotoAndStop(2);
};
//ao soltar o mouse fora da bola, voltará para o primeiro quadro 
bola.onReleaseOutside = function() {
bola.gotoAndStop(1);
};

Sem explicação (caso queira uma vista mais limpa nas ações):

bola.onRollOver = function() {
bola.gotoAndStop(2);
};
bola.onRollOut = function() {
bola.gotoAndStop(1);
};
bola.onPress = function() {
bola.gotoAndStop(3);
};
bola.onRelease = function() {
bola.gotoAndStop(2);
};
bola.onReleaseOutside = function() {
bola.gotoAndStop(1);
};

Teste o seu novo botão feito com movie clip.

Crie um novo arquivo “galeria_animada.fla” e salve na pasta flash: painel, foto 1, foto 2, foto 3, foto 4, foto 5, foto 6, foto 7, foto 8, foto 9, e foto 10.

Deixe pronto as camadas “pictures”, “base”, “botão”, e “ações” (não me diga) e altere o palco para 503 pixels de largura por 339 de altura, antes de importar o PNG para a camada “base”.

Clique para exibir

Importe todas as fotos para a biblioteca.

Clique para exibir

Leve-as para o palco em “pictures”, alinhe elas, e converta-as em um único movie clip (se o PNG estiver atrapalhando é só ocultar a camada “base”).

Clique para exibir

Vamos nomear o movie clip para “mc_foto”.

Clique para exibir

Na camada “botões” desenhe um retângulo sobre a setinha da esquerda e converta-o em Movie Clip.

Duplicate nesse movie clip e leve para a setinha da direita.

Clique para exibir

Nomeie o MC da esquerda como “volta”.

Clique para exibir

E o MC da direita como “vai”.

Clique para exibir

Selecione o MC da esquerda e deixe o alpha em 0 (zero), faça o mesmo com o da direita.

Clique para exibir

Ative a camada “ações”.

Clique para exibir

Atribua os eventos a seguir.

volta.onRollOver = function(){
mc_foto._x-=15
};
vai.onRollOver = function(){
mc_foto._x+=15
};

Clique para exibir

Acima da camada “pictures”, crie uma camada “cobertura” para cobrir as fotos que passam fora da telinha, usando as formas com o preenchimento branco e sem borda.

Experimente passar o mouse em cima em alguma das setas, clicando aqui. Passa, tira, passa, tira...

Cansativo, não é verdade?

Salve como “galeria_animada1.fla” e insira mais um evento em cada ação:

_root.onEnterFrame = function(){

Clique para exibir

Ficando assim:

volta.onRollOver = function(){
_root.onEnterFrame = function(){
mc_foto._x-=15
}
}
vai.onRollOver = function(){
_root.onEnterFrame = function(){
mc_foto._x+=15
}
}

Agora ficou menos cansativo, confira.

Porém, ele não pára. Aí que entra o evento:

instance name.onRollOut = function(){
delete _root.onEnterFrame
}

Salve como “galeria_animada2.fla” e atribua o evento acima.

Clique para exibir

Com isso, as fotos irão parar de correr quando tiramos o mouse de cima das setas.

volta.onRollOver = function(){
_root.onEnterFrame = function(){
mc_foto._x-=15
}
}
volta.onRollOut = function(){
delete _root.onEnterFrame
}

vai.onRollOver = function(){
_root.onEnterFrame = function(){
mc_foto._x+=15
}
}
vai.onRollOut = function(){
delete _root.onEnterFrame
}

Confira.

Template

Para criarmos um template no flash, é necessário criar um movie clip para visualizar o conteúdo e/ou apresentação. Crie um novo arquivo com o palco de 640 pixels de largura por 400 e salve-o como “index.fla” antes de criar as camadas: “seções”, “área”, “topo” e a tradicional “ações”.

Salve na pasta “flash” o topo e importe-o na camada “topo” (bom deixar a cor de fundo do palco similar a do topo).

Clique para exibir

Crie a seção “Página Inicial” e converta para Button.

Clique para exibir

Ídem para “Hospedagens”.

Clique para exibir

Ibdem para “Domínio”.

Clique para exibir

Faça um retângulo sem preenchimento, que será o movie clip do conteúdo, e deixe o Registration na diagonal superior esquerda.

Nesse movie clip será visualizados as seções a serem criadas. Cada seção será um arquivo do flash, no formato SWF. A escala de cada arquivo, que funcionará como seção, terá que ser igual a do movie clip (com a mesma largura e altura).

Clique para exibir

Nomeie a seção “Página Inicial” como “bt1”.

Clique para exibir

A “Hospedagens” como “bt2”.

Clique para exibir

A “Dominio” como “bt3”.

Clique para exibir

Leve o MC retângulo para a camada “área” e deixe a borda da mesma cor do fundo da página. Nomeie como “mc_conteudo”.

Clique para exibir

Crie o arquivo “home.fla”, edite, deixe a largura e a altura igual a do Movie clip; publique (home.swf).

Clique para exibir

O mesmo com “planos.fla”.

Clique para exibir

E com o “domínio.fla”.

Clique para exibir

Configurando cada link-seção.

Vá para a camada ações e insira esses eventos:

bt1.onPress = function(){
_root.mc_conteudo.loadMovie("home.swf");
}
bt2.onPress = function(){
_root.mc_conteudo.loadMovie("planos.swf");
}
bt3.onPress = function(){
_root.mc_conteudo.loadMovie("dominio.swf");
}

Dê um Ctrl Enter para testar.

Só que o conteúdo inicial só aparece quando clicamos em “Página inicial” e não quando só acessamos a “index.swf”.

Clique para exibir

Para que a “home.swf” funcione como um “onLoad” na “index.swf”, é só copiar o primeiro evento “_root.mc_conteudo.loadMovie("home.swf");” e colar acima de tudo, ficando assim:

_root.mc_conteudo.loadMovie("home.swf");
bt1.onPress = function(){
_root.mc_conteudo.loadMovie("home.swf");
}
bt2.onPress = function(){
_root.mc_conteudo.loadMovie("planos.swf");
}
bt3.onPress = function(){
_root.mc_conteudo.loadMovie("dominio.swf");
}

Não se esqueça de publicar todos os arquivos.

Confira

Se desejar colocar animações em cada seção, basta criar e animar movie clips para os correntes arquivos.

Áudio

Existem três maneiras de trabalharmos com o áudio no Flash.

Vamos à primeira, que é importando para a biblioteca e levando para o palco. Importe da pasta “galeria” o áudio “Devolva-me.mp3”.

Clique para exibir

Leve o áudio para o palco e F5 no quadro 30.

Clique para exibir

Você também pode atribuir alguns efeitos no áudio, mas vale lembrar que o Flash não é o programa eficiente para edição de áudios.

Clique para exibir

Vamos a cada sincronização:

Event: toda vez que o tempo da apresentação der a volta (loop), a música será reiniciada, mas a que iniciou antes continuará tocando. Isso deixa o som muito abafado, salvo se a música se encerrar antes de dar a volta.

Start: se apresentação der a volta antes da música terminar, a música continuará tocando e não será reiniciada por cima da que se iniciou.

Stop: A música não será tocada na apresentação.

Stream: toda vez que o tempo da apresentação der a volta, a música será reiniciada e a que iniciou antes será interrompida.

Vai testando cada uma das opções, dando Ctrl Enter.

Clique para exibir

Se você desejar editar o áudio manualmente, clique no ícone do lápis ao lado de Effect.

Clique para exibir

Se aumentar mais quadros, a música continuará de onde parou (no caso o quadro 30).

Agora veremos a segunda maneira de trabalhar com o áudio no Flash, vinculando de diretório e/ou URL. Crie um novo arquivo “audio_externo.fla” e as camadas “botões”, “cronômetro”, “descrição”, e a importante camada “ações”.

Clique para exibir

Leve para o palco, na camada “botões”, um botão de Play e outro de Stop, se precisar aumentar ou reduzir a escala de um dos botões, use a nova ferramenta Scale.

Duplique duas vezes o botão do Play e rotacione um para 90 graus, o outro inverta verticalmente (se a sombra desse último estiver inversa a do anterior, inverta horizontalmente também).

Na camada “descrição”, insira algumas legendas estáticas para identificas as funções dos botões “Play”, “Volume”, “Tempo Atual”, “Tempo Total”, e “Stop”.

Na camada “cronômetro” insira dois textos dinâmicos, um ao lado de “Tempo Atual” e o outro ao lado de “Tempo Total”.

Deverá ficar mais ou menos como na figura a seguir:

Clique para exibir

No botão Play, nomeie como “tocar”.

Clique para exibir

Nomeie o botão rotacionado à 90 graus como “aumenta”.

Clique para exibir

O invertido verticalmente como “baixa”.

Clique para exibir

E o botão Stop como “parar”.

Vocês devem estar se perguntando por que eu não coloquei nas instâncias: play e stop nos principais botões.

Não coloquei porque “play” e “stop” são palavras reservadas do ActionScript; assim como in, out, size, volume, etc...

Clique para exibir

Nomeie o “Dynamic Text” do tempo atual como “t_atual”.

Clique para exibir

Nomeie o “Dynamic Text” do tempo total como “t_total”.

Clique aqui para baixar o áudio que iremos utilizar nesse exemplo e salve na pasta “flash” (suponha que este FLA tenha sido salvo lá).

Clique para exibir

F9 na camada “ações” e aplique esse evento:

musica = new Sound();
musica.loadSound("audio.mp3", true);
musica.stop();
_root.onEnterFrame = function(){
t_total.text = musica.duration/1000
t_atual.text = Math.round(musica.position/1000);
}
tocar.onPress = function(){
musica.start();
}
parar.onPress = function(){
musica.stop();
}
var altura:Number = 20;
musica.setVolume(altura)
aumenta.onPress = function(){
altura = altura + 20;
musica.setVolume(altura);
}
baixa.onPress = function(){
altura = altura - 20;
musica.setVolume(altura);
}

Clique para exibir

Ctrl Enter para conferir ou confira aqui.

Do mesmo jeito que funciona com um diretório, funciona também com um link externo.

Clique para exibir

Salve o arquivo como “audio_url.fla”. No: “musica.loadSound” substitua o “audio.mp3” por “http://www.classicrpg.com/files/audio_peq.mp3”.

musica = new Sound();
musica.loadSound("http://www.classicrpg.com/files/audio_peq.mp3", true);
musica.stop();
_root.onEnterFrame = function(){
t_total.text = musica.duration/1000
t_atual.text = Math.round(musica.position/1000);
}
tocar.onPress = function(){
musica.start();
}
parar.onPress = function(){
musica.stop();
}
var altura:Number = 20;
musica.setVolume(altura)
aumenta.onPress = function(){
altura = altura + 20;
musica.setVolume(altura);
}
baixa.onPress = function(){
altura = altura - 20;
musica.setVolume(altura);
}

O áudio será executado de uma URL, confira.

Vamos para a terceira maneira de trabalhar com o áudio no Flash: atachando o áudio da biblioteca para o ActionScript.

Salve o arquivo como “audio_biblioteca.fla” e importe da pasta “galeria” para a biblioteca o áudio “To_Sir_With_Love.mp3”.

Clique para exibir

Na aba Library, clique com o botão direito sobre o nome do áudio e escolha Rename. Mude para “som” (sem a extensão .mp3) para que não fique com um nome gigantesco.

Clique para exibir

Clique novamente no áudio com o botão direito e vá em Properties...

Clique para exibir

Em Linkage deixe marcada a opção Export for ActionScript (e a opção seguinte...) antes de dar OK.

Clique para exibir

Onde estava “musica.loadSound” mude para “musica.attachSound” e entre “” coloque “som” (onde estava a URL anteriormente).

musica = new Sound();
musica.attachSound("som",true);
musica.stop();
_root.onEnterFrame = function(){
t_total.text = musica.duration/1000
t_atual.text = Math.round(musica.position/1000);
}
tocar.onPress = function(){
musica.start();
}
parar.onPress = function(){
musica.stop();
}
var altura:Number = 20;
musica.setVolume(altura)
aumenta.onPress = function(){
altura = altura + 20;
musica.setVolume(altura);
}
baixa.onPress = function(){
altura = altura - 20;
musica.setVolume(altura);
}

Clique para exibir

Checando a linkagem na biblioteca.

Por ter um áudio dentro a apresentação vai estar um pouco mais pesada (já que anteriormente só estava vinculando).

Esse é o resultado.

Preloaders

São aqueles indicadores de quanto de uma animação já foi carregado. Os preloaders não são meramente decorativos. Um site em Flash, por exemplo, sem o preloader é um forte candidato a fazer com que o usuário desista de ver o site rapidinho, já que não tem como saber quanto tempo ainda falta para a animação carregar por inteiro.

Vamos criar o nosso preloader? Crie um novo arquivo de nome “preloader.fla” com as camadas: “preloader”, e, “ações”. F7 no quadro 2 de cada camada.

Salve na pasta “flash” essa foto e importe para a biblioteca antes de alterar o palco para 500 pixels de largura por 335 de altura.

Clique para exibir

Insira um texto estático “CARREGANDO”, no primeiro quadro.

Clique para exibir

Mais abaixo crie um texto dinâmico com o nome “porcentagem”.

Clique para exibir

E mais abaixo faça um retângulo, converta-o em Movie clip, com o Registration centro-esquerda.

Clique para exibir

Vamos chamá-lo de “barra”.

Clique para exibir

No Segundo quadro, leve a imagem importada para o palco.

Clique para exibir

No quadro 1 da camada “ações”, insira esse evento:

_root.onEnterFrame = function(){
total = _root.getBytesTotal();
carregados = _root.getBytesLoaded();
barra._xscale = 0
P = Math.round((carregados/total)*100)
porcentagem.text = P+"%"
barra._xscale = P
}

Clique para exibir

E no segundo quadro o evento “stop();”.

Clique para exibir

Confira.

Clique para exibir

Será que valeu a pena esperar? Digo...

Como este é o último capítulo, vamos para as últimas dicas:

Clique para exibir

Para ficar mais organizado o seu projeto, é sempre bom criar algumas pastas na Timeline.

Clique para exibir

Assim não fica bagunçado e a Timeline não fica extensa pelo número excessivo de camadas.

Clique para exibir

Se desejar que o palco ocupe toda a área de trabalho, basta escolher Fit in Window.

Este tutorial foi baseado no programa Adobe Flash CS4, de modo que, nas próximas versões a serem lançadas, eu postarei aqui o que mudou.

Sempre que surgir uma dúvida com o que eu ensinei, poste aqui.

Quem quiser colaborar e ensinar algo que eu não coloquei (posteriormente não aprendi) fique a vontade e dê a sua participação.

Quem for colaborar, não importa a versão do Flash que esteja usando. Se houver algum diferencial, eu postarei onde e como é feito na versão atual.

Quando eu tiver um tempo livre, procurarei aprender mais coisas para ensinar aqui futuramente.

Até a próxima.

  • Like 2

Share this post


Link to post
Leninha

As imagens não estão abrindo!!!

Share this post


Link to post
Andy

Infelizmente a nova versão da Invision desabilitou todos os javascripts inseridos pelo usuário, o que impede a visualização deste conteúdo.

A Invision Power Board se viu obrigada a desabilitar essa opção porque houve usuários, em diversos fóruns, que usaram de forma abusiva prejudicando o computador do internauta.

Estaremos buscando solução o quanto antes ;)

Share this post


Link to post
José Antonio

Andy, tenta postar as imagens em anexo, assim elas ficam com o efeito hightslide.

Share this post


Link to post
Andy

Com a ajuda do nosso administrador José Antonio as imagens voltaram a aparecer :joia:

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...