Segunda-feira, 11 de dezembro de 2006 às 15h23

Conhecendo o ActionScript 3

Faltam 0 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

A cada nova versão, o Flash vem aperfeiçoando sua linguagem de programação, o ActionScript, que só começou a causar um grande impacto a partir do Flash 5 com um considerável melhoramento na linguagem e deixando de ser visto apenas como uma ferramenta com recursos para design. Com o ActionScript 2, houve um melhor desempenho no uso dessa linguagem, mas com alguns problemas na criação de classes. Por exemplo, o funcionamento entre o que é público e privado na utilização das classes. Mas isso não comprometia o funcionamento da aplicação, pois não faz diferença se usarmos uma ou outra. Isso foi totalmente corrigido com o ActionScript 3, que, entre outros avanços, traz uma forma nova de desenvolver com linguagem. Isto posto, vamos direto ao assunto: o que há de novo no ActionScript 3?

Antes de começar, é preciso que tenhamos o ActionScript 3 em nossa máquina, então podemos baixar a versão Flash 9 Public Alpha no site http://labs.adobe.com. Feita a instalação, estamos prontos para continuar.

Primeiramente, há um site muito interessante para podermos conhecer essas diferenças e o que há de novo (ActionScript 3.0 Language Reference da Adobe). Nos permitirá, com certa facilidade, saber o que aconteceu com alguns comandos do ActionScript 2. Ao entrarmos neste site, veremos uma tela com três partes, e entre elas há uma lista de Packages. Ou seja, pacotes que correspondem a grupos de classes disponíveis para uso.

Também temos os Language Elements que formam uma lista de recursos, com a diferença de que esses não pertencem a nenhum pacote de classes. Por fim, chegamos à parte que interessa no momento, o Appendixes, onde podemos acessar o ActionScript 2.0 Migration para ver o que aconteceu com conhecidos recursos do ActionScript 2 na migração para o ActionScript 3 e não nos sentirmos tão perdidos.

Alguns recursos foram removidos, como o “#endinitclip”, “newline”, “targetPath()”, entre outros, mas não podemos esquecer que muitos deles já estavam na lista de deprecated do Flash. Em outras palavras, sabíamos que esses recursos seriam descartados futuramente. Muitos se mantiveram inalterados, ao menos na forma como acessá-los, outros mudaram seus nomes como o “instanceof” que mudou para “is” e, por fim, a grande maioria foi colocada em seus pacotes de classes correspondentes às suas funcionalidades, o que deixou tudo muito mais organizado.

Vamos criar o nosso primeiro aplicativo com ActionScript 3, colocando o script a seguir no primeiro frame do nosso arquivo.

// Vamos criar um objeto com a classe TextField.
var txt:TextField = new TextField();
// Definimos alguns parâmetros da caixa que queremos criar.
// A largura da caixa de texto.

txt.width = 120;
// A altura da caixa de texto.
txt.height = 20;
// Não queremos que seu valor possa ser selecionado.
txt.selectable = false;
// Definimos suas coordenadas em relação ao lugar onde vamos colocar a caixa de texto.
// Coordenada x.

txt.x = 0;
// Coordenada y.
txt.y = 0;
// Por fim, colocamos o valor da caixa de texto.
txt.text = "Seja bem-vindo ao AS3.";
// Mas só isso não basta, temos de colocar esta caixa de texto em algum lugar para que possa ser vista na tela, então vamos criar um lugar para colocá-la.
var meuMovie:Sprite = new Sprite();
// A Sprite é uma classe na qual podemos dizer que cria um MovieClip; porém, esse MovieClip não existe na linha de tempo, ele não possui nenhuma ligação a um objeto no palco. Isso significa que podemos colocá-lo dentro de qualquer lugar, a qualquer momento. O que isso representa para nós? Lembra-se de quando criávamos um MovieClip dentro de outro e de repente precisávamos colocá-lo dentro de outro MovieClip diferente, mas não podíamos fazê-lo porque ele estava preso ao local onde foi criado? Agora isso não é mais um problema, podemos colocá-lo em qualquer lugar a qualquer momento e este tipo de recurso não se aplica somente ao Sprite.
// Ainda não sabemos onde vamos colocar esse objeto, mas onde quer que seja, ficará na coordenada x: 100 e y: 100 em relação ao local onde será colocado.

meuMovie.x = 100;
meuMovie.y = 100;
// O objeto ainda não pode ser visto na interface, então vamos dizer que ele será um objeto filho do objeto principal, o palco.
this.addChild(meuMovie);
// Agora, vamos dizer que txt será um objeto filho de meuMovie e finalmente poderá ser visto no palco.
meuMovie.addChild(txt);

Pronto, finalmente colocamos uma caixa de texto no palco, mas e daí? Como é que vamos saber se ele realmente pode ser colocado em qualquer lugar? Pois então vamos colocar isso à prova, criando uma animação com dois MovieClip, sendo que cada um deles seguirá por uma animação na linha de tempo, um para cima e outro para frente, uma animação realmente simples.

Vamos desenhar uma área com exatamente as dimensões da caixa de texto que acabamos de criar por programação, depois transformamos em um MovieClip, duplicamos esse MovieClip no palco, colocando cada um em uma linha de tempo diferente e por fim, instanciamos um com “area_1” e o outro como “area_2”, fazendo um seguir para o topo da página, e o outro para o canto direito da página colocando um simples stop() no final da animação. Veja a imagem:

Feito isso, quando gerarmos o swf, veremos que os desenhos irão se deslocar para suas posições especificas, mas a caixa de texto permanecerá inalterada em sua posição, pois afinal meuMovie é um objeto que está fixado no palco.

Agora vamos fazer o seguinte: colocaremos a caixa de texto para ficar dentro de um desses desenhos. Fique à vontade, escolham qualquer um deles e gere o swf.

// Este comando colocará a caixa de texto dentro de area_1.
area_1.addChild(txt);

// Este comando colocará a caixa de texto dentro de area_2.
area_2.addChild(txt);

Então, funcionou? Podemos abusar um pouco mais, depois que escolhemos, digamos, o area_1 para colocar a caixa de texto, no frame 10 coloquemos então o comando para colocar a caixa de texto no area_2 ou vice versa, geramos o swf e veremos a caixa de texto trocar de lugar durante a animação.

Com apenas uma única linha de comando, foi possível tirar um objeto de dentro de um MovieClip para outro a qualquer momento e com muita facilidade. Isso parece mais um novo recurso do que uma mudança, então vamos pegar o nosso MovieClip na biblioteca e colocarmos duas cópias dele no palco em uma camada para botões e os instanciamos um como “botao_1” e o outro como “botao_2”, e apenas para ficar diferente, vamos tonalizá-los um para vermelho e outro para verde.

Voltamos então ao primeiro frame e no final das ações acrescentamos mais alguns comandos.

// Primeiro importamos a classe de eventos de mouse.
import flash.events.MouseEvent;
// Criamos um método que queremos que seja executado pelo primeiro botão.
var aoClicar_1:Function = function(){
// Colocamos a caixa de texto dentro do MovieClip area_2.
area_2.addChild(txt);
}
// Já esse método será executado pelo botao_2.
var aoClicar_2:Function = function(){
// Mandamos para o segundo quadro para recomeçar a animação.
gotoAndPlay(2);
// Colocamos a caixa de texto para dentro do MovieClip area_1.
area_1.addChild(txt);
}
// Aqui está uma das mudanças do ActionScript 3. Agora temos de dizer ao Flash exatamente que evento será associado ao MovieClip ou qualquer outro objeto. Não podemos mais selecionar um botão ou MovieClip e colocar uma ação dentro deles ou usar um método onRelease. Temos agora que dizer que um objeto irá monitorar um evento sobre ele – nesse caso, o evento de mouse – e se utilizar da classe de evento específica para executar um método definido.
// Aqui estamos dizendo que o MovieClip botão_1 irá monitorar um evento sobre ele, neste caso, um evento click do mouse e irá executar o método aoClicar_1.

botao_1.addEventListener(MouseEvent.CLICK, aoClicar_1);
// O mesmo vale para o MovieClip botão_2 e o método aoClicar_2.
botao_2.addEventListener(MouseEvent.CLICK, aoClicar_2);

Está feito. Geramos o swf e vemos o resultado. Quando clicarmos no botao_1, ele colocará a caixa de texto dentro do MovieClip area_2, e quando clicarmos no botao_2, ele recomeçará a animação a partir do frame 2 e colocará a caixa de texto no MovieClip area_1.

Esta é apenas uma pequena amostra do que veio para melhorar o ActionScript. Ainda há muito mais a ser explorado, mas, lembre-se, esta é apenas uma versão Alpha para conhecer os novos recursos. Não significa que todos os recursos documentados no site da Adobe já estejam funcionado 100%.

Clique aqui para baixar todos arquivos deste artigo.

Até a próxima.

2 comentários

 Jonimar Marques Policarpo
12/12/2006 10h18

Trilogia completa

a história mostra que trilogias, no 3º episódio, ou se esfarelam ou se consagram, no caso do Flash é a consagração, uma linguagem cada vez mais enxuta e direta.
Parabéns renato pelo artigo, exemplo bem fácil mas que ja mostra o poder d AC3!
Que venha o novo!

 Paulo Renzi
29/03/2007 00h15

Ola, sobre o flash

Ola, estou começando a mexer com Flash agora e sei que minha duvida nao tem a ver com a materia, mas estou atras disso a uns 2 meses e ninguem sabe responder, da ultima vez me disseram pra perguntar pra alguem que mexa bastante com Flash, entao ai vai: eu quero fazer um menu em flash e utiliza-lo no Dreamweaver, quero que os botoes abram a frame central, sem que uma nova janela seja aberta, para tanto eu uso o seguinte comando:

on (press) {
getURL("menu2.html", "centro", "GET");
}

mas ele sempre abre uma pagina nova ou abre na propria frame do menu, o que fazer? Obrigado!

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Sobre o Autor
Renato Pacheco é programador e desenvolve projetos se utilizando de banco de dados, PHP, Asp, XML e, principalmente, trabalhando com Flash tanto para multimídia quanto web.

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.