Tutorial de ActionScript 3

Joo Guilherme Brant Esse tutorial dever para um leitor dar uma vaga ideia de como comear a desenvolver aplicativos no Flash usando ActionScript. Esse tutorial foi elaborado para rpida leitura e, para conhecimento aprofundado, assim como para aplicaes especficas, novas pesquisas devero ser realizadas. O prprio flash tem um grande base da dados de ajuda, que pode ser utilizada ao lado desse tutorial. Lembrando que o conhecimento de ingls ajuda e muito na hora de programar alguma coisa. Esse tutorial foi pensado para pessoas de nvel bsico. Caso voc j programa, pule as partes de Sintaxe, Variveis e Operadores e Funes. O que Actionscript Fonte: Wikipedia ActionScript uma linguagem de programao orientada a objetos baseada em ECMAScript, utilizada principalmente para construo de aplicaes RIA (do ingls RIA: Rich Internet Applications (Aplicaes Ricas de Internet)). executada em uma mquina virtual (AVM - "ActionScript Virtual Machine", atualmente na verso 3 que est disponvel no Adobe Flash Player (pluginencontrvel em navegadores Web) e tambm no ambiente Adobe AIR. Sintaxe Para todo tipo de linguagem de programao existem regras para as quais devem ser seguidas para que o computador entenda o que deve ser feito. O cdigo lido pelo computador linha a linha. Para maior entendimento (mas no necessrio), usual ao final de cada linha colocar o ponto-e-vrgula(;). O ponto-e-vrgula tambm pode ser usado para terminar uma instruo no meio de uma linha, pra colocar outra na mesma linha. Cada linha aqui, uma instruo. Instruo pode ser a declarao de uma varivel, a manipulao de variveis de dados, uma chamada de uma funo. (Veremos tudo adiante). Enfim, saiba que o computador lida com o cdigo instruo aps instruo, uma a uma. Veja:
//Comentrio instruo1; instruo2;

instruo3; instruo4; instruo5; //...

Aqui, primeiro o computador l a instruo1, depois a instruo2, e por a vai. Esse carinha que vai lendo instruo aps instruo o chamado fluxo de execuo. possvel fazer o fluxo de execuo pular pra frente ou ainda voltando pra trs. Veremos adiante como isso funciona. Lembrando outra coisa: comentrios. Tudo seguido de duas barras (//) ou entre os smbolos /* e */ chama-se comentrio. Comentrio algo que no considerado pelo computador. Comentrios servem para indicar alguma coisa para voc, programador. Use e abuse de comentrios, uma boa prtica. Sempre indique o que vai fazer em um prximo trecho de comentrio. Fica mais fcil de lembrar o que esse cdigo faz para voc, e fica mais fcil pra todo mundo que abrir para ler o seu cdigo entender o que voc fez. Alm de tudo isso, o Actionscript (assim como a gigantesca maioria das linguagens de programao) permite voc dar nome s coisas. Mas existem algumas palavras j pr-estabelecidas pelo actionscript que definem qual instruo ser realizada, ou seja, o que o computador dever fazer, que no podem ser usadas livremente. Essas palavras so chamadas de palavras reservadas. Veremos muitas delas adiante. Por exemplo, var define que ser declarado uma varivel, while define que ali ter um loop. medida que se vai programando, essas palavras ficam cada vez mais fceis de serem lembradas (muitas linguagens de programao tem as mesmas palavras para as mesmas coisas). Cada vez que voc testa sua aplicao (CTRL+ENTER) o cdigo que voc escreveu nos frames e nas classes importadas so compiladas. Ou seja, elas so transformadas de cdigo entendvel por voc, ser humano, para cdigo que pode ser entendido pelo computador. Aps isso, o cdigo pronto (que chamamos de binrio) executado. As duas coisas ocorrem rapidamente, uma aps a outra. Variveis e Operadores Quando programamos, guardamos e manipulamos vrios dados basicamente. O espao no computador reservado para um dado que pode ser depois manipulado denominado varivel. Para se declarar uma varivel em Actionscript deve-se escrever:
var nome_da_varivel:Tipo;

Onde nome_da_varivel pode ser o nome que quiser (a, b, banana, bla). S no pode ser uma palavra reservada da linguagem (var, class, etc...). A palavra reservada var indica que ali ser declarada uma nova varivel. No se pode guardar (ou no se deve) qualquer tipo de dado em uma varivel

qualquer. necessrio identificar para o computador qual tipo esse. (Nmero, Palavra, Caractere, Objetos [veremos mais tarde]). Esse o Tipo depois do :. Para o actionscript, existem vrios tipos primitivos. Em pouqussimas palavras, tipos primitivos de uma linguagem so tipos que no podem ser separados em nenhum outro tipo. Esses tipos so, por exemplo: int, char, etc. No actionscript, ao contrrio de outras linguagens, tipos primitivos so pouco usados pelo programador comum. O programador comum usa tipos que usam tipos primitivos (mais sobre isso adiante). Mais um exemplo:
var a:b;

Declarei uma varivel a do tipo b. Agora que uma varivel foi declarada, possvel us-la de vrias formas. Como no exemplo:
var a:int = 5; var b:int = 10; a = b; b = a + b; a = a b + 42;

Aqui, declarei dois inteiros (tipo primitivo) a e b. Pode-se igualar a com b, a com uma operao que envolve a e b, e a com uma operao que envolve a e b e mais uma constante. Existe tambm o uso de constantes na linguagem. Vrios tipos (primitivos ou no) possuem literais. Literais so maneiras fceis de descrever valores e dados. O 5 uma literal que descreve o nmero inteiro 5. Outro exemplo com palavras: abelha um literal que descreve a string abelha, ou seja, a palavra abelha. Veja:
var palavra:String = ovo;

Strings so palavras. Um pouco mais formalmente, uma lista de caracteres. Veja tambm que existem operadores. Operadores so usados para manipular dados: literais e/ou variveis. Todas as quatro operaes (+, -, * e /) so operadores para inteiros no actionscript. Note que as funes dos operadores depende dos tipos em que esto envolvidos. Por exemplo, possvel utilizar + entre strings. O resultado a concatenao das strings, ou seja, junta-se as strings: var novaString:String = ome + lete; // novaString torna-se omelete trace(novaString); // Vai imprimir omelete na tela Existem tambm alguns operadores que s precisam de um parmetro. Por

exemplo, o ++:
i++;

Isso significa que o i agora se torna i + 1. Isso equivalente escrever:

i = i + 1;

medida que vai utilizando o actionscript, os diferentes tipos e operadores vo sendo utilizados mais frequentemente. Alm disso, com uma breve pesquisa na internet j temos uma lista de tipos e de todos os operadores (essa ltima no to grande assim). Mexendo no fluxo de execuo Como j dito acima, o fluxo de execuo vai lendo as instrues uma a uma, linha a linha. Mas ele no precisa ser totalmente linear. possvel fazer ele saltar para vrias outras partes do seu cdigo. Mas voc no deveria fazer livremente. Caso voc queira que o computador execute um cdigo se for estabelecida uma condio, ou at que execute um outro quando no for estabelecida, voc pode usar o if...else... Veja:
// seu cdigo.. if(condio) { //se a condio for satisfeita executa as instrues daqui instrucao1; instrucao3; } else { //caso contrario executa as daqui instrucao2; } //mais cdigo..

Mas como estabelecer uma condio? Existe um tipo de varivel, o tipo booleano. Tipos booleanos s podem assumir dois valores, true (verdadeiro) ou false (falso). Note que true e false so palavras reservadas pelo actionscript. Existem vrios operadores que resultam nesse tipo. Uma expresso ou instruo que resulta em um tipo booleano so chamadas de expresses booleanas. Os operadores mais comuns so: a == b igualdade. Ele resulta em true caso a for igual a b. A > B maior que. Ele resulta em true caso A for maior que B (d um erro se A ou B no forem nmeros). Existe tambm o menor que. A >= B maior ou igual que. Ele resulta em true caso A for maior ou igual a B

(tambm d o mesmo erro). Existe tambm o igual ou menor que. A != B diferena. Resulta em true caso A no for igual a B. Existem tambm os operadores booleanos, que so usados sobre booleanos ou expresses booleanas. Se existem duas expresses booleanas C e D: C && D E lgico. Resulta true se tanto C tanto D forem true. E false caso contrrio. C || D > OU lgico. Resulta true se C ou D forem true. Se um dos dois for false, no tem problema. Usando esses operadores voc ter no final uma expresso booleana tambm. Voc pode substituir o condio no if acima por uma expresso booleana. Outro jeito de mudar o fluxo de execuo fazendo um loop:
while(condio) { //cdigo aqui } //mais cdigo..

Esse while determina um loop. Ou seja, esse cdigo dentro do corpo do while (entre os {}) ser rodado infinitamente, at que a condio no seja mais satisfeita. Quando no for mais satisfeita, o fluxo de execuo sai do loop e continua normalmente. Muito cuidado com o loop infinito: o loop infinito quando por algum erro seu o while nunca para Isso significa que o flash do usurio vai travar caso acontea isso. Voc no quer que isso acontea. Funes medida que o cdigo fica muito grande, fica necessrio fazer partes de cdigo que sejam reutilizveis. A que entram as funes. Ver que funes so nada mais nada menos que fazer o fluxo de execuo pular para uma certo trecho de cdigo. Observe o corpo de uma funo comum:
function nome_da_funcao(parametro1:Tipo1, parametro2:Tipo2):Tipo_De_Retorno { //Cdigo da funcao aqui }

Todas as funes iniciam com a palavra reservada function, seguido do nome que voc deseja adicionar para a funo. Dentro do corpo da funo (entre os {}) fica o cdigo dela. Esse cdigo ser rodado toda vez que funo for chamada. Para chamar uma funo, veja adiante...

var a:int; var b:Number; // ....cdigo....... nome_da_funcao(); //mais cdigo..

Como pode ver, qualquer nome seguido de parnteses () uma chamada de funo. Quando o fluxo de execuo chegar em uma chamada de funo, ele entrar na funo e comeara a seguir o cdigo de dentro. Procure separar seu cdigo em funes o mximo possvel. Alm dele ficar mais fcil de entender, fica muito mais fcil de encontrar erros. A funo pode aceitar parmetros, como acima. No exemplo acima, a funo est esperando os parmetros parametro1 e parametro2. Dentro do cdigo da funo. Voc pode usar os parmetros como variveis livremente. Na chamada da funo, voc TEM que colocar os parmetros dentro dos parnteses, na ordem que foram declarados na declarao da funo. Exemplo:
function fun(i:int, j:int) { //blabl } //cdigo var a:int = 2; fun(a,4);

As funes tambm podem retornar coisas. Depois do parnteses da declarao da funo, voc pode definir o tipo de retorno assim como define tipos de variveis, quando as declara. Esse o tipo do dado que dever ser retornado pela funo. Voc retorna coisas com a palavra reservada return. Quando o fluxo de execuo chegar em um return, ele sai da funo na hora. Voc pode colocar returns sem nada para funes que no retornam nada, caso s queira sair dela naquela hora. Exemplo:
function fun():int { var b:int = 2; return b; } var a:int = fun();

Como voc pde ver acima, quando voc chama uma funo que retorna alguma coisa, voc pode pegar esse resultado. E colocar em uma varivel, como feito acima. Existem muitas utilidades. Uma funo pode retornar um valor do tipo Boolean e ser colocada dentro de uma condio de um if, por exemplo. As utilidades so infinitas. Classes e Instncias Voc tambm pode at definir os seus prprios tipos. a que classes entram em ao. Veja o exemplo:
class nome_da_classe { //Variaveis //Mtodos }

Uma classe define um tipo. Por exemplo, int, Boolean, Number, String, todas essas so classes. Toda classe s tem duas modalidades de coisas: campos e mtodos. Campos o nome de uma varivel em uma classe, e mtodo apenas um nome de uma funo em uma classe. Ou seja, toda classe s tem variveis e funes. A primeira coisa sobre classes que voc ir fazer como instanciar uma classe. Voc faz isso a partir da palavra reservada new: var instancia:nome_da_classe = new nome_da_classe(); Esse new nome_da_classe(); parece uma chamada de funo. E , uma funo chamada construtor. O Construtor um mtodo especial que toda classe tem que retorna uma dado do tipo daquela classe. O construtor no precisa ser definido, mas caso queira defini-lo, apenas crie um mtodo com o mesmo nome da classe, olhe no exemplo:
class minhaClasse { //Variaveis //Construtor function minhaClasse() { } //Mtodos }

Detalhe que o construtor no pode retornar nada. Ele j retorna o tipo da prpria classe. Mas voc pode usar o return sem nada caso queira que a funo acabe no meio. Agora que voc j tem uma instncia da sua classe (ou varivel do tipo da sua classe, chame-a do que quiser), voc j pode us-la. Veja no exemplo:
class minhaClasse { //Variaveis public var a:int = 2; public var blabla:tipo_blabla; //Construtor function minhaClasse() { } //Mtodos function foo(x:int):Number { return x*x; } } var instancia:minhaClasse = new minhaClasse(); var c:int = instancia.a + 2; var d:Number = instacia.foo(c);

Observe que utilizamos campos e mtodos da instncia. Todas as instncias de uma mesma classe tero os mesmos campos e mtodos (voc pode criar vrias). Para acessar um campo ou mtodo da instncia, use o nome da instncia seguido de ponto(.) seguido do nome do campo ou do mtodo. Quando voc chama um mtodo de uma instncia, diz-se que voc est chamando o mtodo sobre essa instncia. Classes tambm tem um poder muito grande, que o de extender outras classes, veja no exemplo:
class Carro { var rodas; var volante; var motor; function acelerar() { trace(acelerei); } function freiar() { trace(frear); }

Defini uma classe carro que tem vrias coisas que um carro tem (campos), e o que um carro faz (mtodos). Agora sabemos que existem tipos mais especficos de carro, que ainda so carros. Um exemplo: o fusca:
class Fusca extends Carro { var idade:int; var estragado:Boolean; override function acelerar() { if(estragado) trace(nem acelerei); else trace(acelerei com dificuldade); } function estragar() { estragado = true; } }

Esse fusca tem tudo o que o carro tem (volante, rodas, etc). Mas ele tem umas coisas a mais, que so especficas dele(idade de carro velho, se est estragado ou no...). Ele tambm pode fazer mais coisa que um carro comum (ele pode estragar) e ele tambm pode alterar o jeito como um carro comum faz as coisas (agora ele no acelera to bem). Para mudar a funcionalidade de um mtodo que j foi declarado na classe pai (no caso, o pai o Carro), usa-se a palavra reservada muito til override. Dentro dos mtodos, voc tambm pode usar a palavra reservada this. Essa palavra se refere instncia da qual o mtodo est sendo chamado. Por exemplo, voc pode acessar campos e outros mtodos dentro de um mtodo, chamar uma outra funo com a instncia como parmetro, entre outros. Outro conceito importante o conceito de pacotes. Pense um pacote como uma pasta que contm classes. Voc pode criar os seus prprios pacotes quando estiver trabalhando em um projeto. O Flash separa as classes pr definidas em pacotes fceis de vizualizar. Por exemplo, flash.display o pacote de coisas grficas, flash.events o pacote de coisas sobre eventos. Os dois esto dentro do pacote flash, por isso o . entre os nomes. Classes podem parecer complicadas, mas uma vez aprendidas, so um importante aliado. Display Objects e como colocar grficos na tela

Image uma DisplayObject como uma imagem, animao, etc. No se pode criar instncias dessa classe diretamente (o Flash no permite). O que se faz usar um filho dessa classe. As mais utilizadas so Sprite, MovieClip e SimpleButton. No Flash, os grficos so implementados atravs de uma rvore. Na raz da rvore, fica o Stage, que o espao em branco que vemos quando criamos um novo arquivo flash. O stage um DisplayObjectContainer, ou seja, uma classe que um DisplayObject que pode ter vrios DisplayObject como filhos, e at outros DisplayObjectConainers. Na hora da exibio, o Flash comea exibindo o Stage, depois exibe todos os filhos, depois os filhos dos filhos em cima dos filhos e por a vai. Ou seja, para adicionar alguma coisa na tela voc tem que adicionar um filho no Stage, e depois ir adicionando filhos. Ela faz uma busca em largura na rvore exibindo tudo, a cada frame. Cada DisplayObject tem sua posio, ou seja, o seu X (sua posio horizontal) e seu Y (sua posio vertical). Algebricamente, um vetor. Aumentando o X voc arrasta o DisplayObject para a direita, diminuindo para esquerda. O aumento do Y arrasta o DisplayObject para baixo. Ao adicionar um filho na rvore, a origem do filho torna-se a posio do pai. No flash, como mexemos em duas dimenses, a origem principal a posio do stage, que a posio x = 0 e y = 0. Essa posio o ponto superior esquerdo do espao em branco. Um filho sempre tem sua origem na posio do pai. Ou seja, mudando a posio do pai voc tambm muda a posio do filho, que depende da posio do pai. Isso tambm acontece com outros parmetros, no s posio. Por exemplo, transparncia, altura e largura, etc. Se interfere no pai interfere no filho. Para adicionar um filho no stage, voc pode ir at o timeline, e apertar F9 para adicionar cdigo quele frame. O mtodo addChild(d:DisplayObject) serve pra isso. Ele um mtodo tanto de um stage como de qualquer DisplayObjectContainer (que inclui sprites e MovieClips). Exemplo:
var sprite:Sprite = new Sprite(); var movieClip:MovieClip(); addChild(sprite); // Isso faz o sprite aparecer na tela sprite.addChild(movieClip); // Isso faz um movieclip aparecer tendo como base o sprite

Essa funo addChild a funo para colocar um filho em um DisplayObjectContainer. Voc executa esse mtodo sobre a instncia que voc quer que seja pai, passando como parmetro o filho. Para fazer um desenho no flash e fazer esse desenho aparecer na tela em tempo de execuo, ou seja, no cdigo, voc ter que linkar o smbolo no

actionscript. Caso no saiba o que seja smbolo, pesquise flash new symbol ou o que quiser na internet. Para linkar o smbolo para o actionscript, voc deve fazer o seguinte: 1. 2. 3. 4. 5. 6. 7. Abra um documento flash. Crie o seu smbolo. Abra a Library(Biblioteca). Clique com o boto direito no smbolo. Marque a opo Export for ActionScript dentro de Linkage Coloque o nome da classe que gostaria de que sua imagem tivesse Coloque a classe que ser pai da imagem que voc est criando. (O Default, MovieClip, o mais usado, mas voc tambm pode usar Sprite se preferir gastar menos espao). 8. Pronto! Agora toda vez que voc chamar new nome-da-classe(); , voc estar criando uma instncia desse smbolo no cdigo. Funciona em qualquer parte do cdigo, at em classes, contando que elas estejam no mesmo projeto. Agora sim, voc sabe como colocar imagens dentro do cdigo actionscript.

Eventos e Interatividade Mas e sobre interatividade, como fazer? O Flash foi feito para ser interativo com o seu usurio, e no uma coisa em que apenas assistido. Fazer alguma coisa acontecer quando se movimenta o mouse ou aperta-se uma tecla, por exemplo, importantssimo. Para comear a fazer alguma coisa interativa, o programador tem que entender alguma coisa de eventos. A classe Event e suas filhas so tipos de eventos. As instncias da classe Event so eventos mais geral (e o que normalmente voc vai mais utilizar). Mas existem tambm, por exemplo, a classe MouseEvent, tem instncias que so eventos ligados ao mouse, como movimentao e clique. E por a vai. A no ser que crie manualmente um evento, ele no vai ser criado (instanciado) por voc. E sim pelo sistema. O que voc faz que toda vez que um evento for criado (isso um pouco amplo, a explicao verdadeira mais complicada) e detectado, uma chamada pra uma funo acontece. essa funo que voc criar. O que acontecer quando o usurio clica em um boto? Ele chamar uma funo automaticamente, e voc quem criar essa funo. Veja um exemplo de como fazer um evento funcionar, em uma frame do timeline:

function foo() { trace(falae); } addEventListener(Event.ENTER_FRAME,foo);

Nesse cdigo, adicionamos ao de entrar em um novo utilizado MUITO) a funo foo. Ou seja, o flash acabar milhares de falae infinitamente. Isso acontece porque nunca para de entrar em novos eventos. Alis, nada para eventos.

frame (um evento imprimindo na tela a timeline principal de entrar em novos

Essa funo, addEventListener, a funo principal para mexer com interatividade. A instncia sobre a qual voc age o mtodo a instncia que escuta. Ou seja, se voc quer que um boto capture o evento MouseEvent.CLICK, voc faz esse mtodo sobre esse boto. O primeiro parmetro qual o tipo de evento de fato, ser escutado pela instncia. Existem vrios tipos de eventos, que podem ser facilmente pesquisados. O segundo parmetro o nome da funo da qual gostaria que fosse chamada quando o evento especificado acontecesse sobre a instncia especificada. O bacana que pode ser qualquer funo, at um mtodo de outra instncia que no tenha nada a ver com o que de fato esteja acontece. A gama de possibilidades imensa.

Outras Classes Existem muitas outras classes que podem ser usadas para explorar toda a funcionalidade do Flash. Como por exemplo Sound para sons, Mouse para o mouse, Accelerometer para acelermetro de dispositivos mveis, entre outros. Muitas dessas classes tm seus prprios tipos de eventos. Uma rpida pesquisa no arquivo de ajuda ou na internet trazem classes e suas descries para as mais vrias funcionalidades. Sabendo de DisplayObject's e Event's, garanto-lhe que uma boa parte do caminho j est percorrida.