Criação de banner em Flash CS3: Parte 3Criando uma nova camada e importando outro arquivo gráfico
Vamos proteger as três camadas existentes até agora clicando no ícone do cadeado, em seguida clicamos na camada bg2 e em seguida clicamos em Insert -> Timeline -> Layer;
Nessa nova camada vamos renomeá-la atribuindo o nome botão. Aprenderemos agora a criar um símbolo do tipo Botão no Flash CS3.Clique na camada botão, em seguida com a ferramenta Retângulo desenhe uma forma retangular e usando o painel de propriedades atribua os valores: W=160, H=600, X=0 e Y=0, Para cor digitamos: #00FF00, não se preocupe pois essa cor não aparecerá quando o banner estiver funcionando. Com isso estamos colocando nosso botão sobre os demais elementos. Criando o botão invisível- Clique sobre o retângulo e pressione F8, na caixa Convert to Symbol, marque type = Button e dê OK.
- Dê dois cliques sobre o símbolo de botão e na linha do tempo do botão arraste o quadro-chave da posição Up para a posição Hit, conforme figura abaixo.
- Em seguida clique em Scene 1 para voltar à Timeline principal.
Figura 1: Criando um botão invisível Clique sobre o botão e no painel de propriedades atribua ao símbolo de botão o nome de instância botao1. Teste o arquivo, clicando em Control -> Test Movie (ou Ctrl + Enter). Repare que agora ao passar o mouse sobre o banner já há uma sinalização de que se clicarmos algo ocorre. Porém ainda falta implementar o código para a interatividade. Criando uma nova camada para o código ActionScriptVamos proteger as quatro camadas existentes até agora clicando no ícone do cadeado, em seguida clicamos na camada botão e em seguida clicamos em Insert -> Timeline -> Layer; Vamos dar dois cliques sobre a nova camada e vamos atribuir o nome: action. Clicamos no frame 1 da camada action e em seguida clicamos em Window -> Actions (F9 produz o mesmo efeito). É no painel actions que escrevemos o código ActionScript responsável por gerar interações e dar dinamismo aos banners e outras aplicações. Agora vamos aprender um pouco sobre como criar essas interações. Antes de prosseguir é importante observar a ordem das camadas na figura abaixo. 
Figura 2: posição das camadas 
Figura 3: Aparência do banner Os tipos de animação no Flash CS3Para se criar animações no Flash CS3, utilizamos uma das três opções abaixo: Interpolação de movimento (motion tween transition): Usadas para alterar a posição de um objeto ao longo de um tempo determinado, através da definição dos pontos iniciais (aqueles onde ocorrerão alterações) e do ponto final nos quadros-chave. Ao ser aplicado o Flash® CS3 desenha as etapas intermediárias, produzindo um efeito de movimento. Interpolação de forma (shape tween transition): Usadas para alterar a forma de um objeto ao longo de um tempo determinado, através da definição dos pontos iniciais (aqueles onde ocorrerão alterações) e do ponto final nos quadros-chave. Ao ser aplicado o Flash® CS3 desenha as etapas intermediárias, produzindo um efeito de alteração de forma do objeto. Animação quadro a quadro (frame to frame transition): Usadas para alterar a posição e/ou a forma de um objeto ao longo de determinado período de tempo, através da criação manual de cada um dos quadros, tendo como efeito final a produção de movimento e/ou alteração de forma, só que de maneira mais controlada e com efeitos mais sofisticados.
Para este exercício criaremos uma interpolação de movimento usando ActionScript 3.0. Adicionado interatividade com ActionScript 3.0Para produzir interpolações através de código ActionScript vamos importar para nosso script o pacote fl.transitions, esse pacote contém classes que usamos para criar efeitos de animação e o pacote fl.transition.easing o qual coontém classes usadas para criar efeitos de atenuação. A atenuação permite criar efeitos de aceleração e desaceleração gradual durante uma animação, tornando a animação mais realista. Para importar pacotes para nosso script usamos a palavra chave import, veja abaixo: import fl.transitions.*;
import fl.transitions.easing.*;
Agora vamos criar uma função que será chamada sempre que o mouse estiver sobre o banner.
function mostraInfoAdicional(event:MouseEvent):void
{
// usamos o método start() da classe TransitionManager para criar um efeito de quadros aparecendo e desaparecendo no bg1
TransitionManager.start(bg1, {type:PixelDissolve, direction:Transition.IN, duration:3, easing:Regular.easeIn, xSections:10, ySections:10});
var valorInicial:Number = bg2.x; //recebe o valor da altura do movie bg2, o que tem a figura do cachorro.
var valorFinal:Number = 380; //até onde o movie pode descer.
var duracao:Number = 5;
var minhaInterpolacao:Tween = new Tween(bg2, "y", Elastic.easeOut, valorInicial, valorFinal, duracao, true);
}
Agora vamos criar uma função que será chamada sempre que o mouse for deslocado do banner.
function ocultaInfoAdicional(event:MouseEvent):void
{
var valorInicial:Number = bg2.x;
var valorFinal:Number = 120; //até onde o movie pode subir
var duracao:Number = 5;
var minhaInterpolacao:Tween = new Tween(bg2, "y", Elastic.easeOut, valorInicial, valorFinal, duracao, true);
}
Agora vamos criar uma função que será chamada sempre que clicarmos o mouse sobre o banner e que nos levará ao site do patrocinador.
function irParaSite(event:MouseEvent):void {
var siteURL:URLRequest = new URLRequest("http://www.aprendofacil.com.br"); //basta substituir a URL por outra desejada.
navigateToURL(siteURL);
}
Para finalizar criamos os ouvintes de eventos e atribuímos ao botão1, quando o evento ocorre uma das três funções acima é chamada. Nesse exercício são três as situações possíveis: mouse sobre o banner, mouse fora do banner e clique no banner.
botao1.addEventListener(MouseEvent.MOUSE_OVER, mostraInfoAdicional);
botao1.addEventListener(MouseEvent.ROLL_OUT, ocultaInfoAdicional);
botao1.addEventListener(MouseEvent.CLICK, irParaSite); Teste o arquivo, clicando em Control -> Test Movie (ou Ctrl + Enter).
Publicando o arquivo
Ao publicarmos o arquivo fonte (entensão FLA), estamos criando um novo arquivo com extensão SWF. Para proceder à publicação do arquivo clicamos em File -> Publish Settings na aba Format desmarque HTML e clique em Publish. O arquivo SWF com o mesmo nome do arquivo fonte (extensão FLA) será gerado na pasta onde você salvou o arquivo FLA.
É esse arquivo SWF que você publicará no site.
Veja o banner em ação.
No próximo tutorial vamos ver como publicar esse arquivo usando o Adobe Dreamweaver CS3. Até lá.
Poste no fórum qualquer dúvida ou dificuldade encontrada.
|
Tutoriais 
