Vamos ver outros tipos de efeitos possíveis com ActionScript 3.0 que são as transições. O efeito Blinds mostra ou esconde o Movie Clip que está recebendo a transição aos poucos através de áreas retangulares que vão aparecendo ou desaparecendo.
1- Crie um novo arquivo.
2- Importe para o palco do Flash a imagem: transicao.jpg que esta na pasta da lição.
3- Transforme esta imagem em um Movie Clip e coloque o nome de instância da imagem de “imagem”.
4- Crie uma nova camada e no primeiro quadro desta camada abra o painel Actions e digite:
import fl.transitions.*;
import fl.transitions.easing.*;
var transicao:TransitionManager=new
TransitionManager(imagem);
Nas duas primeiras linhas importamos as classes que vamos utilizar.
Na terceira linha criamos uma instância chamada “transição” a partir da classe TransitionManager (classe que está presente somente do Action Script 3.0) que cuida dos efeitos de transição.
5- Numa nova linha digite:
transicao.startTransition({type:Blinds,
direction:Transition.IN,duration:2,easing:Strong.easeOut,
numStrips:10, dimension:1});
O parâmetro numStrips define a quantidade de retângulos e o dimension indica se o efeito será com retângulos na horizontal (valor 1) ou na vertical (valor 0).
Para a instância chamada “transicao” usamos o método starTransition que dará início a transição.
Dentro dos parênteses desse método temos (entre as chaves) os parâmetros que vão orientar a transição, o qual podemos mudar:
direction:Transition.IN que indica que o Movie Clip irá aparecer ou
direction:Transition. OUT que o mostrará se escondendo.
duration:2 é o tempo em segundos que essa transição irá durar até atingir o final.

6- Teste seu arquivo.

Os retângulos aparecem e revelam partes da imagem até mostrá-la por completo.
Temos, também, o PixelDissolve que faz o Movie Clip aparecer ou desaparecer através de um efeito em quadrados que vão aos poucos aparecendo ou desaparecendo.
7- Insira um novo quadro-chave na layer que contém a imagem e insira a imagem transicao.3.jpg que esta na pasta imagens.
8-Transforme esta imagem em um Movie Clip e coloque o nome de instância da imagem de “imagem1”.
9- Na camada das actions insira um novo quadro e digite:
var transicao1:TransitionManager=new
TransitionManager(imagem1);
10- Na próxima linha digite:
transicao1.startTransition({type:PixelDissolve,
direction:Transition.IN, duration:1,
easing:Strong.easeOut,xSections:20,ySections:0});
Temos como parâmetros adicionais xSections (quantidade de quadrados no eixo x) e ySections (quantidade de quadrados no eixo y). A Adobe aconselha valores de
no máximo 50 para estes parâmetros.
Iremos colocar uma função para controlar a passagem das imagens com as transições.
11- No primeiro quadro da layer das ações, digite:
stop();
var tempo = 10000;
function vai():void{
if(this.currentFrame != this.totalFrames)
nextFrame();
else
gotoAndStop(1);
}
setInterval(vai, tempo);
12- Teste o arquivo.

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.

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;