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

[Andy]

Adobe® Flash® CS4

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.

[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 em Open ou vá ao menu: File => Open... (Ctrl O).

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

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

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.

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?

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

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.

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

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.

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

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

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

Escolha Close Large Gaps.

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.

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

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

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

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

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

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.

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

Selecione o círculo torto e clique em Straighten.

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

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

Selecione todo o aviãozinho amarelo.

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

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

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.

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

Leve o aviãozinho amarelo novamente na bolinha vermelha.

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.

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

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

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

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.

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

Dê OK.

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

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

Clique no ícone de preenchimento preto.

Mude para azul. E no branco mude para preto.

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.

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

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.

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

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

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

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.

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.

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

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.

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.

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

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.

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.

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.

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

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.

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

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

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

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

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

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 com o cursor no quadro 1 e selecione o círculo, copiando-o em seguida com Ctrl C.

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.

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

Escolha Animated Gif.

Dê OK.

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

Menu: Arquivo => Criar projetor...

Será salvo como um EXE.

Abra o arquivo “formas.exe”.

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:

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.

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

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

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

Escolhi um beje.

E voltei para o palco.

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.

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

Vai clicando até fazer um triângulo escaleno.

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

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

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

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

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.

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.

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

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.

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

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

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.

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.

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.

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

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

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.

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

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

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

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

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.

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

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

E localize as imagens que iremos trabalhar.

Dê OK.

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

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

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 com o botão direito do mouse nesse intervalo e escolha Copy Frames para copiar todos os cinco frames.

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

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

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

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.

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

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

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

Insira um Keyframe no quadro 30.

Copie o quadro 1.

E cole no quadro 55.

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.

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

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.

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

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

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

Idem no quadro 20.

No quadro 30.

No quadro 40.

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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.

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

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

Agora iremos conhecer a interface do ActionScript.

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

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.

Copie o nome do primeiro capítulo.

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

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

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.

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

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

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.

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

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

Agora selecione o primeiro botão e F9.

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

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

on (release) {
gotoAndStop(3);
}

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

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

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.

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.

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

Deixe em 0% para ficar oculto.

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

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

E mude para outra cor.

F6 no quadro 30 e mude para outra cor.

O mesmo no quadro 40.

E por fim no quadro 50.

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.

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”

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

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.

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

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

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

Escolha o fundo transparente.

Cole.

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

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

Como “maisa3.png”.

E “maisa4.png”.

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

Ctrl R para importar as partes da Maísa.

Faça conforme o indicado e dê OK.

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

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

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

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.

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.

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.

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

Passando o mouse no objeto.

Clicando com o mouse no objeto.

Soltando o mouse no objeto.

Tirando o mouse do objeto.

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.

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

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

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

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.

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

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

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

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

Na outra extremidade.

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.

Nomeie-o como “mc_retangulo”.

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

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.

up: nomeie como “cima”.

left: nomeie como “esquerda”.

down: nomeie como “baixo”.

right: nomeie como “direita”.

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

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

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

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.

Aí que entra um outro evento.

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

Salve como “move3.fla”.

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

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

E outro botão para reduzir.

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

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

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.

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.

Crie um novo botão.

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

Em Over, mude a cor do botão.

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

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.

Renomeie o símbolo.

Leve o novo botão para o palco.

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

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

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

O segundo “bt2”.

O terceiro “bt3”.

O quarto “bt4”.

E o quinto “bt5”.

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

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

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

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

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

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.

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

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

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

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

Nomeie o movie clip como “bola”.

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

Importe todas as fotos para a biblioteca.

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

Vamos nomear o movie clip para “mc_foto”.

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.

Nomeie o MC da esquerda como “volta”.

E o MC da direita como “vai”.

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

Ative a camada “ações”.

Atribua os eventos a seguir.

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

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

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.

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

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

Ídem para “Hospedagens”.

Ibdem para “Domínio”.

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

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

A “Hospedagens” como “bt2”.

A “Dominio” como “bt3”.

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

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

O mesmo com “planos.fla”.

E com o “domínio.fla”.

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

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

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

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.

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.

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

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

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:

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

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

O invertido verticalmente como “baixa”.

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

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

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

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

Ctrl Enter para conferir ou confira aqui.

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

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

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 novamente no áudio com o botão direito e vá em Properties...

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

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

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.

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

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

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

Vamos chamá-lo de “barra”.

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

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
}

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

Confira.

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

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

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

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

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.

[Leninha]

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

[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

[José Antonio]

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

[Andy]

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