Ir para o índice Programando em Flash e/ou AS3 Home Page eCC

Alberto Mesquita Filho
© 2011

1. Inserir links (URLs) para páginas Web em arquivos swf

 

1.1 Criando um arquivo FLA ActionScript 3.0

No menu File do Adobe Flash Professional, clique em New e a seguir em Action Script 3.0 e dê OK. Salve o arquivo com um nome apropriado (por ex. "links.fla") e em um diretório de sua conveniência (por exemplo "Fla"). Com este projeto em branco a janela do Adobe Flash Professional deverá se parecer com a figura 1.1 (versão Windows).

Figura 1.1
Figura 1.1: Janela "Essentials" do Adobe Flash Professional

Acima temos a Barra de Menu. No centro e à esquerda está a Área de Trabalho e que na figura 1.1 contém um retângulo branco. Daqui para a frente iremos sempre nos referir a este retângulo como stage. O stage, dentre outras coisas, delimita a área que irá aparecer no arquivo swf a ser produzido através deste arquivo projeto (fla). As características do stage (em especial tamanho e cor de fundo) podem ser alteradas em uma janela que se abre utilizando-se a sequência: menu Modify / Document... Embaixo da Área de Trabalho está o painel Linha do Tempo (Timeline). À direita temos uma coluna com vários painéis. Os painéis que não estão visíveis na plataforma do Adobe Flash Professional (FLA) poderão ser abertos, quando necessários, através do menu Window. Os dois painéis que iremos utilizar por ora são Properties e Library. Na extrema direita temos a Barra de Ferramentas. Neste projeto iremos utilizar apenas as ferramentas Texto (Text Tool), Retângulo (Rectangle Tool) e Seleção (Selection Tool).

1.2 Preenchendo a tela inicial

O arquivo swf que iremos produzir tem apenas um quadro e, nestas condições, a tela inicial será a única a aparecer. Como neste caso vamos trabalhar mais com o FLA do que com o AS3, tudo o que for aparecer na tela inicial (do swf) aparecerá também no stage da plataforma do Flash. Inicialmente acrescentaremos um título através da ferramenta Texto.

Clique na ferramenta texto (Text Tool) e, no painel Properties (na subdivisão Character), escolha a fonte (por ex. Arial) e o estilo (por ex. bold). Digite o tamanho da fonte (por ex. 20 pt) e especifique a cor do texto. Feito isto, arraste o mouse no stage e digite aí um título para o seu trabalho como, por exemplo, "Links para alguns sites" (figura 1.2). Com o arraste do mouse o painel Properties se modifica para comportar a subdivisão Position and Size. Pode-se configurar aí a posição e as dimensões do campo de texto. Este local estará visível sempre que o campo de texto estiver selecionado. Se Position and Size não estiverem aparecendo no painel Properties, clique sobre o texto com a ferramenta seleção (Selection Tool) ou arraste o mouse em volta do texto, também com a ferramenta seleção. Clique aqui para ver o painel Properties com todas as características para a edição do texto selecionado. A posição poderá ser modificada digitando-se no painel os valores para X e Y (medidas em pixel contados a partir da extremidade superior direita do stage) ou arrastando-se o texto selecionado com o mouse ou, ainda, através do teclado (teclas direcionais - setas). Este último recurso é útil para pequenos deslocamentos (pixel por pixel).

Figura 1.2
Figura 1.2


Vamos agora criar os botões que, ao serem clicados pelo usuário, abrirão o navegador em uma página web especificada. Com a ferramenta Retangle desenhe um pequeno retângulo colorido no stage (figura 1.2). Selecione o retângulo com um clique e no Menu Modify clique em "Convert to Symbol...". Na janela que se abre dê um nome (por exemplo "botao") e em Type selecione Button. Assinale a caixa Export for Action Script. O nome botao (ou qualquer outro que tenha sido utilizado) aparecerá na linha Class. Mantenha o Name botao mas, no campo Class modifique para Botao (as classes do AS3 são escritas com a primeira letra maiúscula). Deixe o resto como está e clique em OK e na janela que se abre dê outro OK.

Abra agora o painel Library. Normalmente ele está ao lado do painel Properties (vide a aba superior do painel Properties). Se não o encontrar, dirija-se ao menu Window e procure por Library). Aberto o painel, o botão criado deverá estar em Library com o nome que foi dado anteriormente (no caso, botao). Clique no ícone do botão e arraste-o para o stage a fim de criar um segundo botão. Fique à vontade para criar mais botões, caso tenha links suficientes para carregar no projeto. Com o mouse disponha os botões no stage em uma posição que o satisfaça e volte a abrir o painel Properties. Clique no primeiro botao e, onde se lê <instance name>, digite botao1 (sem espaço entre botao e 1). Clique no segundo botao e, de maneira semelhante, em <instance name> digite botao2. Faça o mesmo com outros botões que porventura existam (3, 4...). Pronto! A parte estética do design está apresentada e você poderá sofisticá-la como desejar: acrescentar novos desenhos ou textos, como por exemplo, algo a indicar a função de cada botão, cor de fundo do stage (background) etc. Feito isso, e para testar a aparência do futuro arquivo swf clique em Ctrl+Enter ou então, no menu Control, clique em Test Movie e logo a seguir em Test (Para ter uma idéia de como deve estar a aparência clique aqui). Vamos agora completar a fase de design através da Linha do Tempo (TimeLine).

Se você optar por identificar o botão com algum texto escrito em cima dele (como no exemplo apresentado logo acima — teste de aparência) qualifique os textos como Static Texts no painel Properties. Do contrário, e como eles estão em cima dos botões, poderão afetar (ou encobrir) a função deste último.

1.3 Trabalhando na Linha do Tempo (TimeLine)

A Linha do Tempo está subdividida em duas colunas. À esquerda temos a coluna das camadas (ou Layers ) e à direita a coluna de frames ou quadros. A rigor a coluna das camadas é a coluna onde, dentre outras coisas, se dá o nome às camadas, pois as camadas são as faixas horizontais que se extendem por toda a Linha do Tempo.

Atualmente, e com o que fizemos até agora, a sua Linha do Tempo deve se parecer com o que é mostrado abaixo na figura 1.3.

Figura 1.3

Figura 1.3: Linha do Tempo

Na coluna Camadas dê um duplo click onde está escrito Layer 1 e renomeie esta camada para conteúdo. Esta camada está respondendo por todos os objetos criados acima (botões e textos). Repare que sempre que você clica nesta camada (faixa azul na figura 1.3) todos os elementos do stage são selecionados. Clicando em qualquer outro ponto da plataforma Flash a seleção desaparecerá.

Na parte inferior da coluna Camadas existem três ícones (vide Figura 1.3 acima). Dê um clique no primeiro destes ícones (New Layer) para criar uma nova camada (Layer). Esta surgirá acima da camada conteúdo e sob a denominação Layer 2. De maneira semelhante à efetuada acima, renomeie esta camada para Ações (figura 1.4). Esta é a camada da linha do tempo que, como veremos oportunamente, irá responder por todos os códigos escritos em ActionScript. Os autores de língua inglêsa costumam nomear esta camada como Actions ou então Scripts. A rigor pode-se dar qualquer nome. Convém no entanto dar um nome que corresponda à função da camada, pois isto facilitará o trabalho, principalmente quando estivermos frente a projetos complexos e com muitas camadas.

Figura 1.4
Figura 1.4

A coluna Frames é bastante utilizada quando os arquivos são produzidos no formato design (como é o nosso caso) e destinam-se a apresentar várias telas que se sucedem no decorrer do tempo (modificações de texto, movimentos de objetos etc). Não é o nosso caso, logo ficaremos com apenas uma faixa vertical ou subcoluna de frames (aquela por onde passa uma linha vermelha, tanto na figura 1.3 quanto na figura 1.4 e que está abaixo do número 1, com fundo vermelho). A coluna Frame é portanto subdividida em subcolunas de frames (1, 2, 3...) podendo estas subcolunas estarem ou não sendo utilizadas.

Não é raro alguém se referir a estas faixas (ou subcolunas) como um único frame. Dependendo do contexto, pode-se chamar de frame cada um daqueles quadradinhos da coluna Frame ou então ao conjunto de todos os quadradinhos que estão embaixo de um mesmo número da Linha do Tempo. No nosso caso seria como dizer que o frame 1 contém dois frames ocupados, um na linha da camada Ações e o outro na linha da camada conteúdo.

Note que o frame 1 da camada conteúdo contém um ponto preenchido, enquanto que o frame 1 da camada Ações contém um ponto claro, ou não preenchido. O preenchimento ocorreu quando você adicionou o primeiro objeto no stage, e exatamente quando só existia a camada conteúdo. Após a criação da camada Ações nada fizemos que justificasse o preenchimento deste ponto. Lembre-se que esta é uma camada destinada a códigos, logo não convém adicionar nada ao stage quando ela estiver selecionada (ou seja, com o fundo azulado - compare as figuras 1.3 e 1.4). Quando começarmos a adicionar códigos ao nosso projeto o visual do frame irá se modificar, porém de uma maneira diversa (não haverá o preenchimento como aquele da coluna conteúdo, a menos que você insira um objeto quando a camada Ações estiver selecionada).

1.4 Montando o código em AS3

O código em AS3 pode ser escrito no painel Actions (existem outras possibilidades), mas antes de abrir este painel vamos especificar o que ele deve conter.

A idéia é simples: Quando o usuário clicar (1 - evento inicial) em um botão (2 - ouvinte do evento), um determinado site (3 - variável a ser especificada no código) deverá ser aberto em seu navegador (4 - função a ser executada). O código deve portanto encadear esses quatro elementos.

Vamos então iniciar declarando as variáveis e que, no caso, são os endereços dos sites.

1.4.1 Declaração das variáveis

Uma das maneiras de se declarar o endereço de um site em AS3 é a seguinte:

var site:URLRequest = new URLRequest("URLDoSite");

Em vermelho estão os textos que devem ser adaptados ao projeto. Em tipo normal está o que não deve ser modificado (o ponto e vírgula faz parte da declaração). Como eu irei utilizar dois botões, devo declarar duas variáveis com dois sites e dois URL´s. A declaração de variáveis ficará assim:

var eCC:URLRequest = new URLRequest("http://ecientificocultural.com");
var uol:URLRequest = new URLRequest("http://www.uol.com.br");

Em que eCC e uol foram os nomes escolhidos para a declaração dos sites 1 e 2. É de boa praxe que esses nomes iniciem-se por minúscula, e portanto escrevemos uol e não Uol, como está referido no texto acima do botão (stage da plataforma Flash).

1.4.2 Funções

Uma função em AS3 deve ter: 1) um nome; 2) a especificação do evento no qual a função foi chamada; e 3) um campo para se referir à execução de um ou mais procedimentos. Para o propósito do nosso projeto as duas funções podem ser declaradas da seguinte forma:

function goToNome(evento:TipoDeEvento):void {
          Ação a ser executada;
}

É de boa praxe escrever o nome da função começando por minúscula e as palavras que se seguem iniciando por maiúsculas e sem espaços de separação nem sublinhados (por exemplo: goToNome, ou irParaECC, ou navegarParaFeiraDeCiencias etc). As siglas devem ser escritas em maiúscula.

A ação a ser executada, para o nosso projeto, seria do tipo:

          navigateToURL(site);

Com estas considerações, as duas funções do meu projeto (eCC e Uol) seriam então:

function goToECC(event:MouseEvent):void {
          navigateToURL(eCC);
}

function goToUOL(event:MouseEvent):void {
          navigateToURL(uol);
}

Não estranhe o fato de ECC e UOL estarem escritos de várias maneiras diferentes. Por exemplo, quando me refiro a um site em AS3, a primeira letra deve estar sempre em minúscula (por exemplo, eCC e uol ou uOL). Quando me refiro a uma função em AS3, se ela iniciar com o nome do site, a primeira letra deverá estar em minúscula e as demais palavras ou siglas em maiúsculas (por exemplo, goToUOL - UOL é uma sigla de um site - Universo On Line). Mas quando me refiro ao site em outras ocasiões e fora do AS3, como quando crio um texto no Flash para que fique em cima de um botão, posso fazer da maneira que quiser, e de preferência, da maneira como o site aparece na Internet.

Lembre-se sempre que para o seu programa funcionar, o importante é que o software entenda o que você pretende fazer, ou que encontre a variável ou a função que está sendo chamada. O mais são detalhes a sofisticarem o seu script.

1.4.3 Eventos e ouvintes de eventos

Um ouvinte de evento é um objeto ou uma ação que se presta a desencadear um procedimento em determinadas condições. Para o nosso projeto os ouvintes de eventos são os botões. Estes botões devem ouvir, ou serem sensíveis a, cliques do mouse sobre os mesmos. Os cliques do mouse sobre o botâo seriam então os eventos que estamos querendo que sejam captados. Tudo isto (ouvinte, evento e prosseguimento do processo evento) pode ser declarado em uma única linha, a conter sequencialmente quatro informações:

ouvinte.adicionarEvento(tipo de evento), função a ser executada;

Para o propósito do nosso projeto esta linha deverá ser do tipo:

botaoX.addEventListener(MouseEvent.CLICK, goToSiteX);

A primeira instrução desta linha declara o ouvinte a ser levado em consideração (botaoX). A segunda instrução desta linha chama o método addEventListener () do AS3 a incorporar as três informações restantes. Este método usa dois parâmetros: o primeiro é o nome do evento que se deseja responder (CLICK) precedido e separado por um ponto da classe a que pertence este evento (MouseEvent). O segundo é o nome da função resposta e que, no nosso caso, é goToSiteX (em vermelho porque ainda é uma função genérica).

Como o meu projeto tem dois botões, as duas linhas correspondentes são:

botao1.addEventListener(MouseEvent.CLICK, goToECC);
botao2.addEventListener(MouseEvent.CLICK, goToUOL);

Essas duas funções (goToECC e goToUOL) são as mesmas que foram criadas no item anterior, e devem ser escritas da mesma maneira.

1.4.4 Importando classes do AS3

Para que o seu programa funcione, você deverá especificar quais classes do AS3 (ou então quais classes por você personalizadas) estão sendo utilizadas. O AS3 possui uma infinidade de classes e não seria conveniente chamar a todas pois neste caso o seu arquivo swf ficaria muito pesado. Chama-se então apenas aquelas que são necessárias.

Dependendo de como o seu Flash foi configurado, este trabalho vai sendo executado no painel Actions a medida em que você vai digitando o código. Assim que o programa percebe que vai necessitar efetuar uma importação, ele automaticamente executa este procedimento colocando o código de importação nas linhas superiores. Não obstante, e caso isto não aconteça, as classes do AS3 que utilizamos foram as seguintes: URLRequest e MouseEvent. O código para importação dessas classes é o seguinte:

import flash.net.URLRequest;
import flash.events.MouseEvent;

1.5 Escrevendo o código

O código está todo apresentado, restando digitá-lo no painel Actions. Para abrir o painel Actions, e estando no Flash, clique com o botão direito do mouse no primeiro frame da camada Ações da Linha do Tempo (aliás, para o nosso caso é o único). Alternativamente você poderá utilizar o menu Window/Actions ou então o atalho F9.

Na janela principal do painel Actions você deverá digitar o texto como descrito acima. Você poderá também copiar e colar o texto abaixo, referente ao meu projeto (para dois botões), e adaptá-lo as suas conveniências (em vermelho estão os termos que devem e/ou que podem ser adaptados).

import flash.net.URLRequest;
import flash.events.MouseEvent;

var eCC:URLRequest = new URLRequest("http://ecientificocultural.com");
var uol:URLRequest = new URLRequest("http://www.uol.com.br");

function goToECC(event:MouseEvent):void {
           navigateToURL(eCC);
}
function goToUOL(event:MouseEvent):void {
          navigateToURL(uol);
}

botao1.addEventListener(MouseEvent.CLICK, goToECC);
botao2.addEventListener(MouseEvent.CLICK, goToUOL);

Ao retornar ao Flash note que o primeiro frame da camada Ações modificou-se ligeiramente (compare a Figura 1.5 com a Figura 1.4):

Figura 1.5
Figura 1.5

Para ver o meu swf em funcionamento clique aqui.

1.6 Criando o arquivo swf

Esta é a etapa mais simples. É suficiente testar o arquivo fla através de um dentre os seguintes métodos: 1) Ctrl+Enter; 2) Control / Test Movie / Test; ou 3) File / Publish Preview / Flash. Com esse teste, um arquivo com a extensão swf e com o mesmo nome do arquivo fla surgirá na pasta onde este último foi salvo. O último método (File / Publish Preview / Flash) tem a vantagem de salvar também um arquivo html com o swf inserido no mesmo.

Isto é tudo, folks!

Ir para o índice

 

 

 

 

 

 

 

Home Page eCC