1- Crie um novo arquivo.
2- Desenhe um retângulo no palco do Flash e transforme-o em um símbolo Movie Clip. Instancie-o para “ativa”. Renomeie esta layer para “banner”.
3- Dê um duplo clique para entrar em sua edição e escreva “Passe o Mouse” como texto estático.
5- Retorne para a cena principal.
6- Crie um quadrado da mesma largura do retângulo já criado e posicione-o acima do retângulo (na parte de fora do palco) em uma nova layer chamada “animacao”.
7- Transforme essa forma em um símbolo Movie Clip e instancie-o para “tela”.
8- Entre na edição do Movie Clip “tela” e transforme o Shape em um símbolo Gráfico.
9- Crie uma interpolação de movimento e no quadro final desloque o objeto para baixo do símbolo.
10- Ainda dentro do Movie Clip “tela”crie uma nova camada e insira um keyframe no frame 13. Escreva “Adobe Flash”na parte superior fora do palco.
11- Crie uma interpolação de movimento e no quadro final desta layer posicione o texto em cima do outro símbolo.
12- Crie uma nova camada e renomei-a para “acoes”. No seu primeiro frame coloque um comando de Stop:
stop();
13- Retorne a cena principal e crie uma nova camada com o nome de “acoes”.
14- Coloque a ordem das camadas como na imagem. Esta ordem é importante para o funcionamento correto do banner.
15- Habilite o painel Actions no primeiro frame da layer “acoes” e na primeira linha digite:
stop();
ativa.addEventListener(MouseEvent.MOUSE_OVER,Exibe);
ativa.addEventListener(MouseEvent.MOUSE_OUT,Esconde);
ativa.buttonMode = true;
Quando o mouse passar em cima do Movie Clip “ativa” irá chamará a função “Exibe”; e quando o mouse sair de cima do Movie Clip ativa, chamará a função “Esconde”.
16- Na quinta linha digite:
function Exibe(evento:MouseEvent):void{
tela.addEventListener(Event.ENTER_FRAME, Abre);
tela.removeEventListener(Event.ENTER_FRAME,Fecha);
}
function Abre(evento:Event):void{
tela.nextFrame();
if (tela.currentFrame == tela.totalFrames) {
tela.removeEventListener(Event.ENTER_FRAME, Abre);
}
A função “Exibe” quando executa a função “abre” vai para o próximo frame até chegar ao final no Movie Clip Tela, onde está nossa animação.
Na condição (if) temos: se o Frame atual for igual ao numero total de frames, remove a função abrir.
17- Na linha seguinte digite:
function Esconde(evento:MouseEvent):void{
tela.addEventListener(Event.ENTER_FRAME, Fecha);
tela.removeEventListener(Event.ENTER_FRAME,Abre);
}
function Fecha(evento:Event):void{
tela.prevFrame();
if (tela.currentFrame == 1){
tela.removeEventListener(Event.ENTER_FRAME,Fecha);
}
}
Para a função “Esconde” temos a mesma lógica, alterando a condição (if) para: se o frame atual for igual a 1, remove a função fechar da lista.
18- Pronto. Teste seu Movie Clip e veja a funcionalidade do banner.

Para este tutorial é necessário criar um arquivo .psd com um retângulo com gradiente de transparência.

1- Crie um novo arquivo.
2- Clique no menu: File > Import > Import to stage e selecione o arquivo banner.psd que esta na pasta imagens.
3- Selecione cada layer e marque a opção: Flattened bitmap image, a qual irá ser uma imagem não editável.
Na layer Shape 1 marque a opção: Editable paths and layer styles, que fará com que esta imagem seja editável, deixando, no caso
deste arquivo, a forma separada do preenchimento.
Desmarque a layer background, pois não a usaremos no arquivo fla.
Deixe marcada a opção Flash Layers.
As duas opções abaixo ficam marcadas:
- Place object at original position: os objetos importados para o Flash ficaram na mesma posição que se encontravam no Photoshop;
- Set stage size to same size as Photoshop canvas: o placo do Flash será redimensionado para as mesmas dimensões do Photoshop.
Veja que nossos arquivos estão nas Layers do Flash exatamente como estavam no Photoshop e que na Biblioteca as imagens encontram-se organizadas em uma pasta.
4- Selecione o Movie Clip, localizado na layer Shape 1 e dê um duplo clique para entrarmos em sua edição.
5- Exclua a layer 1, que corresponde à cor de preenchimento do objeto.
6- Importe para a Biblioteca 3 imagens do seu computador.
7- Renomeia-e a layer 2 para mask.
8- Crie uma nova layer e renomeie-a para “imagem1”. Posicione-a abaixo
da layer “mask”.
9- Com a layer “flor1” selecionada arraste a imagem flor1.jpg para o palco do Flash.
Redimensione e posicione a imagem em cima do objeto.
10- Crie uma interpolação de movimento na layer “imagem1” e redimensione os
quadros desta para o quadro 80.
11- Deixe o indicador de tempo posicionada no quadro 1 e diminua o Alpha para 0%.
12- No quadro 10 deixe o Alpha em 100%.
13- No quadro 80 deixe o Alpha em 0%.
14- No quadro 70 deixe o Alpha em 100%.
15- Estenda a layer “mask” até
o quadro 80, também.
16- Teste a animação.
17- Insira uma layer acima da layer “imagem1” e renomei-a para “imagem2″
18- Posicione o indicador de tempo no quadro 70 e insira um quadro-chave (F6) na layer “imagem2”.
19- Arraste a imagem flor2.jpg para o palco e diminua a mesma.
20- Crie uma interpolação de movimento nesta layer e arraste-a até o quadro 160.
21- Prolongue a layer “mask”, também.
22- No quadro 70 na layer “imagem2” deixe o Alpha em 0%.
23- No quadro 80 desta layer deixe o Alpha em 100%.
24- No quadro 160 deixe o Alpha em 0%.
25- No quadro 150 deixe o Alpha em 100%.
26- Teste a animação e veja as imagens passando na máscara.
27- Retorne a Cena principal.
28- Selecione o bitmap correspondente as curvas da parte de baixo do banner e transforme-a em um símbolo Movie Clip.
29- Entre na edição deste MC e crie uma nova layer desenhando um forma ao lado esquerdo da imagem.
30- Crie uma interpolação de movimento e no quadro final da layer aumenta a forma de maneira que cubra toma a imagem.
31- Peça a propriedade de Mask para esta layer.
32- Coloque um stop no quadro final da animação.
33- Retorne a cena principal.
34- Insira uma nova layer e renomei-a para “btnInvisivel”.
35- Clique no menu: Insert > New Symbol e escolha a opção Button.
36- Insira um Keyframe no estado Hit do botão e desenhe um retângulo, configurando a posição X e Y para 0.
37- Retorne a Cena principal.
38- Com a layer “btnInvisivel”selecionada arraste o novo botão criado para o palco do Flash, posicionando-o em cima do banner e redimensionando-o de forma que ocupe toda a extensão do banner.
39- Instancie este botão para “btn”.
40- Crie uma nova layer e renomei-a para “acoes”. Habilite o painel Action e digite:
btn.addEventListener(MouseEvent.CLICK, banner);
function banner(event:MouseEvent):void {
navigateToURL(new
URLRequest(“http://www.google.com”), “_blank”);
}
O método navigateToURL é o responsável por abrirmos uma nova página.

1- Abra o arquivo desejado.
2- Em todas as layers do seu filme filme avance um frame, deixando-as todas iniciando a partir do frame 2 da Timeline.
3- Crie uma nova layer abaixo da layer “acoes” e renomei-a para “preloader”.
4- Crie um campo de texto dinâmico com o nome de instância de “pct”.
5- Delete o segundo quadro da layer “preloader”, deixando somente o quadro 1 com o objeto de texto.
6- Selecione o quadro 1 da camada “preloader”e habilite o painel Action digitando:
stop();
this.addEventListener(Event.ENTER_FRAME,loaded); function
loaded(EVENT:Event):void
{
var carregando:Number=int(loaderInfo.bytesLoaded/
loaderInfo.bytesTotal*100) pct.text=carregando+”%”;
if(carregando==100)
{
removeEventListener(Event.ENTER_FRAME,loaded);
gotoAndPlay(2);
}
}
Criamos uma função “loaded”que executa o carregamento a partir da classe loaderInfo, responsável pela execução do carregamento, que passa o resultado dos bytes carregados divididos pelos bites totais e multiplicado por 100.
A instância “pct” é do tipo texto que quando carregada mostra o valor em porcentagem
Se carregado todo o arquivo ele remove a função loaded e vai para o frame 2.
7- Desloque o quadro da ações da camada “acoes” para o segundo e coloque um stop na primeira linha.
8- Teste seu filme. Para ver o preloader em funcionamento pressione CTRL + Enter, novamente.
Quando chegar a 100% será carregado nosso filme.
Para adicionar uma barra que vai crescendo juntamente com a porcentagem crie um retângulo de largura de 2 pixels e transforme-a em um símbolo do tipo Movie Clip com nome de instância de “barra”.
9- Habilite o painel Action e digite na 7 linha:
barra.gotoAndStop(carregando);
10- Teste seu arquivo e veja como ficou

Os Componentes, como já vimos, são Movie Clips com parâmetros que permitem modificar sua aparência.
Ao invés de criamos botões, combos e listas, podemos arrastar esses componentes para o palco do Flash e adicionar funcionalidade a eles, configurando-os a nossa maneira.
1- Abra o arquivo contatenos.fla
2- Habilite o painel Componentes.
3- Selecione o componente TextInput e arraste-o para o palco do Flash colocando o nome de instância de “nome”.
4- Aumente o tamanho deste Componente para 300×20.
Quando arrastamos um componente para o palco, automaticamente é criada um símbolo dele junto a Biblioteca.
5- Selecione o símbolo TextInput da Biblioteca e arraste-o para o palco do Flash, colocando-o logo abaixo do outro, deixando-o com a mesma largura e altura. Dê o nome de instância para ele de “email”.
6- Agora, arraste uma instância do componente TextArea para a palco, colocando abaixo dos outros componentes com a largura de 300×40. Instancie-o para “mensagem”:
7- Arraste uma instância do componente Button para o palco do Flash, posicionando abaixo dos outros componentes.
8- No painel Components Inspector mude o item label para “Enviar” e instancie-o para “btn_enviar”.
9- Arraste outra instância do componente Button para o palco do Flash, colocando-o ao lado do btn_enviar.
10- Mude a opção label para “Limpar”e instancie- o para “btn_limpar”
11- Precisamos agora de um campo de erro. Selecione a ferramenta Text Tool no formato Dynamic Text e clique e arraste uma caixa na parte superior dos componentes.
12- Instancie esta caixa de texto para “mensagemErro”.
13- Crie uma nova camada e renomei-a para “acoes”. Habilite o painel Actions e digite na primeira linha:
btn_enviar.addEventListener(MouseEvent.CLICK, valida);
btn_limpar.addEventListener(MouseEvent.CLICK, limpar);
A função “valida” servirá para verificar se os campos foram digitados, se não retornará uma mensagem.
A função “limpar” servirá para apagar os campos de texto.

14- Na terceira linha digite:
function valida(evento:MouseEvent):void{
mensagemErro.text = “”;
if (nome.text == “”){
mensagemErro.text = “Favor preencher o campo
nome \n”;
}
if (email.text == “”){
mensagemErro.text = String(mensagemErro.text)
+ “Favor preencher o campo email \n”;
}
if (mensagem.text == “”){
mensagemErro.text = String(mensagemErro.text)
+ “Favor preencher o campo mensagem \n”;
}
}
function limpar(evento:MouseEvent):void{
nome.text = “”; email.text = “”; mensagem.text = “”;
}
Caso as caixas de texto estejam vazias retornará uma mensagem no campo de texto instanciado de “mensagemErro”.
Teste o arquivo e veja que os botões estão funcionando.
Melhore o visual desta página inserindo imagens de redes sociais e maiores informações.

Configurando o envio de dados do formulário de contato

15- Abaixo dos ouvintes dos botões (na terceira linha) digite:
var nomeArquivo:String;
nomeArquivo = “processa.asp”;
O Flash conversa com o ASP e PHP através de envio e recebimento de variáveis, executando as tarefas.
Neste exercício passaremos os dados para o ASP fazer o envio dos dados por e-mail.
16- Abaixo das condicionais (if) acrescente mais uma para a função “enviar”, digitando:
if (mensagemErro.text = = “”){
this.enviar();
}
17- Abaixo iremos digitar a função “enviar”, responsável pelo envio dos nossos dados do formulário:
function enviar():void {
var req:URLRequest=new URLRequest(nomeArquivo);
req.method=URLRequestMethod.POST;
var vars:URLVariables=new URLVariables;
vars.nome=escape(nome.text);
vars.email=escape(email.text);
vars.mensagem=escape(mensagem.text); req.data=vars;
var loader:URLLoader=new URLLoader();
loader.load(req);
loader.addEventListener(Event.
COMPLETE,onVarsLoaded);
loader.addEventListener(IOErrorEvent.IO_ERROR,
onIOError);
}
function onVarsLoaded(event:Event):void{
var loader:URLLoader = URLLoader(event.target);
mensagemErro.text = “Email enviado com sucesso”;
}
function onIOError(event:IOErrorEvent):void {
mensagemErro.text = “Erro ao enviar o email”;
}
A função enviar pega todos os itens digitados nos campos e envia os dados. São criadas variáveis para os objetos (nome, email,  mensagem) para guardarem o conteúdo dos dados digitados.

A rolagem de conteúdo é muito utilizada quando temos mais informações que espaço disponível.
1- Abra o arquivo verao.fla
2- Crie uma layer e desenhe um retângulo com bordas no palco do Flash e renomeie a layer para “mask”.
3- Dê um duplo clique em cima da borda desta forma e leve-a para uma layer acima, que será chamada “borda”.
4- Crie uma layer acima de todos e dê o nome de “botoes”. Nesta layer desenhe dois triângulos posicionando-os como na imagem.
5- Clique em cima do triângulo de baixo e transforme esta forma em um símbolo do tipo Button.
6- Transforme o triângulo de cima em um símbolo do tipo Button, também.
7- Coloque o nome de instância do botão de baixo de “btdesce” e no botão de cima de “btsobe”.
8- Crie uma nova layer e dê o nome a ela de “mc”. Posicione esta layer abaixo de todas as outras, com exceção da layer “que tem o título”.
9- Na layer “mc” desenhe vários quadrados um abaixo do outro, fazendo com que eles fiquem para fora no quadrado desenhado na tela, juntamente com um texto.
10- Com todos os quadrados e textos selecionados transforme-os em um Movie Clip e dê o nome de instância para eles de “quadrado”.
11- Dê um duplo clique para entrar na edição deste Movie Clip. Selecione todos os quadrados e textos e transforme-os em um símbolo do tipo Graphic.
12- No frame 1 da layer crie uma interpolação de movimento. Desloque o símbolo como uma animação.
13- Crie uma nova camada e coloque um comando de Stop no seu primeiro frame.
14- Retorne para a cena principal.
15- Na camada “mask”crie uma máscara. Agora iremos programar nosso filme para que quando passarmos o mouse sobre os botões role o conteúdo que é o Movie Clip “quadrado” e quando tirarmos o mouse de cima dos botões o conteúdo pare. Para isso usaremos a ação nextFrame e prevFrame.
16- Crie uma nova camada acima de todas e renomei-a para “acoes”. Abra o painel Actions e digite:
btdesce.addEventListener(MouseEvent.ROLL_OVER,desce);
btdesce.addEventListener(MouseEvent.ROLL_OUT,desceRemove);
function desce(evento:MouseEvent):void{
quadrado.addEventListener(Event.ENTER_FRAME, desceFull);
}
function desceFull(evento:Event):void{
quadrado.nextFrame();
}
function desceRemove(evento:MouseEvent):void{
quadrado.removeEventListener(Event.ENTER_FRAME,
desceFull);
}
Para a instância chamada “quadrado” criamos um ouvinte (addEventListener) do tipo evento com atualização constante que será executado a quantidade de frames por segundo do nosso filme, executando uma função chamada “desceFull”.
Essa programação está aos moldes das outras que já fizemos. O que esta aparecendo de novo é a ação nextFrame que está sendo aplicada no símbolo “quadrado”, fazendo com que quando passarmos o mouse (MouseEvent.ROLL_OVER) sobre o botão “btdesce” executará a função desceFull que tem como parâmetro à ação nextFrame.

17- Repetiremos a mesma programação para o btn_sobe. Na próxima linha digite:
btsobe.addEventListener(MouseEvent.ROLL_OVER,sobe);
btsobe.addEventListener(MouseEvent.ROLL_OUT,sobeRemove);
function sobe(evento:MouseEvent):void{
quadrado.addEventListener(Event.ENTER_FRAME, sobeFull);
}
function sobeFull(evento:Event):void{
quadrado.prevFrame();
}
function sobeRemove(evento:MouseEvent):void{
quadrado.removeEventListener(Event.ENTER_FRAME,
sobeFull);
}
18- Teste o filme e veja a animação.

Embora o ActioScript 3.0 possa parecer intimidador se somos iniciante em scripts, é possível obter excelentes resultados com alguns scripts muito simples. Como ocorre com qualquer linguagem, é recomendável parar um pouco para aprender a sua sintaxe e alguma terminologia básica.

Classe

Uma classe é uma categoria de objetos que compartilha os mesmos métodos e propriedades, que podem ser alteradas pelo usuário.
Exemplos de classes, por exemplo, cão, gato.

Propriedades

Propriedades são as características de uma classe, que podem ser acessadas até modificadas via programação.
Por exemplo, se Cachorro for uma classe, suas propriedades incluirão quatro patas, pêlo e uma cauda.
Exemplos: meuBotao.label=”texto”; meuBotao.x=200;
meuBotao.width=150; meuBotao.visible=false;

Métodos

Um método consiste na função que um elemento desempenha.
Por exemplo, dois métodos associados com a classe MovieClip são:
stop();
gotoAndPlay();

Parâmetros

Parâmetros fornecem detalhes específicos e são valores entre parênteses ( ) em uma linha de código.
Por exemplo, no código:
gotoAndPlay(3);
O parâmetro instrui o script a ir para o frame 3.

Função

Uma função é um grupo de instruções que pode ser referenciado pelo nome.
Utilizando uma função, é possível executar o mesmo conjunto de instruções sem digitá-las repetidamente no mesmo script.
Exemplo:
function alerta():void {
}

Variáveis

Variáveis funcionam como uma espécie de container que armazena informações, seja um texto, um número, etc.
Exemplo:
var nome:String=”Flash”
Temos uma variável sendo declarada (ação var) cujo nome é “nome” que receberá (=) como valor o texto “Flash”.

Utilizando uma sintaxe de script adequada

• O ponto-e-vírgula no final da linha instrui o ActionScript de que ele alcançou o final dessa linha de código e que deve seguir para a próxima linha no código;
• Cada parêntese de abertura deve ter um parêntese de fechamento correspondente, o mesmo vale para colchetes e chaves;
• O operador de ponto (.) fornece uma maneira de acessar as propriedades e os métodos de um objeto;
• Sempre que estivermos inserindo um nome de um arquivo, use aspas;
• Podemos adicionar comentários que o ActionScript não lerá, assim nos ou o utras pessoas podem se lembrar do que esta sendo feito em diferentes partes do script.
// comentário de uma linha
/*
Comentário de várias linhas
*/
• Para verificar a sintaxe de um script que estamos escrevendo, clique no ícone AutoFormat (que também formatará o script de acordo com as convenções) ou clique no ícone Check Syntax. Os erros de sintaxe são listados no painel Compiler Erros.
• O ActionScript é uma linguagem case-sensitive, o que significa que os identificadores diferem em case (letras maiúsculas de minúsculas). Abaixo, como exemplo duas variáveis diferentes:
var num1:int;
var Num1:int;