Actionscript-3-Tutorial

Prévia do material em texto

Tutorial de ActionScript 3
João Guilherme Brant
Esse tutorial deverá para um leitor dar uma vaga ideia de como começar a 
desenvolver aplicativos no Flash usando ActionScript. Esse tutorial foi 
elaborado para rápida leitura e, para conhecimento aprofundado, assim como 
para aplicações específicas, novas pesquisas deverão ser realizadas. O próprio 
flash tem um grande base da dados de ajuda, que pode ser utilizada ao lado 
desse tutorial.
Lembrando que o conhecimento de inglês ajuda – e muito – na hora de 
programar alguma coisa.
Esse tutorial foi pensado para pessoas de nível básico. Caso você já programa, 
pule as partes de Sintaxe, Variáveis e Operadores e Funções.
O que é Actionscript
Fonte: Wikipedia
ActionScript é uma linguagem de programação orientada a objetos baseada 
em ECMAScript, utilizada principalmente para construção de aplicações RIA (do 
inglês RIA: Rich Internet Applications (Aplicações Ricas de Internet)). É 
executada em uma máquina virtual (AVM - "ActionScript Virtual Machine", 
atualmente na versão 3 que está disponível no Adobe Flash Player (plug-
inencontrável em navegadores Web) e também no ambiente Adobe AIR.
Sintaxe
Para todo tipo de linguagem de programação existem regras para as quais 
devem ser seguidas para que o computador entenda o que deve ser feito.
O código é lido pelo computador linha a linha. Para maior entendimento (mas 
não é necessário), é usual ao final de cada linha colocar o ponto-e-vírgula(“;”). 
O ponto-e-vírgula também pode ser usado para terminar uma instrução no 
meio de uma linha, pra colocar outra na mesma linha.
Cada linha aqui, é uma instrução. Instrução pode ser a declaração de uma 
variável, a manipulação de variáveis de dados, uma chamada de uma função. 
(Veremos tudo adiante). Enfim, saiba que o computador lida com o código 
instrução após instrução, uma a uma.
Veja:
//Comentário
instrução1;
instrução2;
instrução3; instrução4; instrução5;
//...
Aqui, primeiro o computador lê a instrução1, depois a instrução2, e por aí vai. 
Esse “carinha” que vai lendo instrução após instrução é o chamado fluxo de 
execução. É possível fazer o fluxo de execução “pular” pra frente ou ainda 
voltando pra trás. Veremos adiante como isso funciona.
Lembrando outra coisa: comentários. Tudo seguido de duas barras (“//”) ou 
entre os símbolos /* e */ chama-se comentário. Comentário é algo que não é 
considerado pelo computador. Comentários servem para indicar alguma coisa 
para você, programador.
Use e abuse de comentários, é uma boa prática. Sempre indique o que vai 
fazer em um próximo trecho de comentário. Fica mais fácil de lembrar o que 
esse código faz para você, e fica mais fácil pra todo mundo que abrir para ler o 
seu código entender o que você fez. 
Além de tudo isso, o Actionscript (assim como a gigantesca maioria das 
linguagens de programação) permite à você dar nome às coisas. Mas existem 
algumas palavras já pré-estabelecidas pelo actionscript que definem qual 
instrução será realizada, ou seja, o que o computador deverá fazer, que não 
podem ser usadas livremente. Essas palavras são chamadas de palavras 
reservadas. Veremos muitas delas adiante. Por exemplo, var define que será 
declarado uma variável, while define que ali terá um loop. À medida que se vai 
programando, essas palavras ficam cada vez mais fáceis de serem lembradas 
(muitas linguagens de programação tem as mesmas palavras para as mesmas 
coisas).
Cada vez que você testa sua aplicação (CTRL+ENTER) o código que você 
escreveu nos frames e nas classes importadas são compiladas. Ou seja, elas 
são transformadas de código entendível por você, ser humano, para código 
que pode ser entendido pelo computador. Após isso, o código pronto (que 
chamamos de binário) é executado. As duas coisas ocorrem rapidamente, uma 
após a outra.
Variáveis e Operadores
Quando programamos, guardamos e manipulamos vários dados basicamente. 
O “espaço” no computador reservado para um dado que pode ser depois 
manipulado é denominado variável. Para se declarar uma variável em 
Actionscript deve-se escrever:
var nome_da_variável:Tipo;
Onde nome_da_variável pode ser o nome que quiser (a, b, banana, bla). Só 
não pode ser uma palavra reservada da linguagem (var, class, etc...). A 
palavra reservada var indica que ali será declarada uma nova variável.
Não se pode guardar (ou não se deve) qualquer tipo de dado em uma variável 
qualquer. É necessário identificar para o computador qual tipo é esse. 
(Número, Palavra, Caractere, Objetos [veremos mais tarde]). Esse é o Tipo 
depois do “:”.
Para o actionscript, existem vários tipos primitivos. Em pouquíssimas palavras, 
tipos primitivos de uma linguagem são tipos que não podem ser separados em 
nenhum outro tipo. Esses tipos são, por exemplo: int, char, etc. No 
actionscript, ao contrário de outras linguagens, tipos primitivos são 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 variável a do tipo b.
Agora que uma variável foi declarada, é possível usá-la de várias 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 operação que envolve a e b, e a com uma operação que envolve a e 
b e mais uma constante.
Existe também o uso de constantes na linguagem. Vários tipos (primitivos ou 
não) possuem literais. Literais são maneiras fáceis de descrever valores e 
dados. O 5 é uma literal que descreve o número 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 são palavras. Um pouco mais formalmente, uma lista de caracteres.
Veja também que existem operadores. Operadores são usados para manipular 
dados: literais e/ou variáveis. Todas as quatro operações (+, -, * e /) são 
operadores para inteiros no actionscript. Note que as funções dos operadores 
depende dos tipos em que estão envolvidos. Por exemplo, é possível utilizar + 
entre strings. O resultado é a concatenação 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 também alguns operadores que só precisam de um parâmetro. 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 vão 
sendo utilizados mais frequentemente. Além disso, com uma breve pesquisa 
na internet já temos uma lista de tipos e de todos os operadores (essa última 
não é tão grande assim).
Mexendo no fluxo de execução
Como já dito acima, o fluxo de execução vai lendo as instruções uma a uma, 
linha a linha. Mas ele não precisa ser totalmente linear. É possível fazer ele 
“saltar” para várias outras partes do seu código. Mas você não deveria fazer 
livremente.
Caso você queira que o computador execute um código se for estabelecida 
uma condição, ou até que execute um outro quando não for estabelecida, você 
pode usar o if...else...
Veja:
// seu código..
if(condição)
{
//se a condição for satisfeita executa as instruções daqui
instrucao1;
instrucao3;
}
else
{
//caso contrario executa as daqui
instrucao2;
}
//mais código..
Mas como estabelecer uma condição? Existe um tipo de variável, o tipo 
booleano. Tipos booleanos só podem assumir dois valores, true (verdadeiro) 
ou false (falso). Note que true e false são palavras reservadas pelo 
actionscript. Existem vários operadores que resultam nesse tipo. Uma 
expressão ou instrução que resulta em um tipo booleano são chamadas de 
expressões booleanas. Osoperadores mais comuns são:
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 não forem números). Existe também o menor que.
A >= B maior ou igual que. Ele resulta em true caso A for maior ou igual a B→ 
(também dá o mesmo erro). Existe também o igual ou menor que.
A != B diferença. Resulta em true caso A não for igual a B.→
Existem também os operadores booleanos, que são usados sobre booleanos ou 
expressões booleanas. Se existem duas expressões booleanas C e D:
C && D E lógico. Resulta true se tanto C tanto D forem true. E false caso→ 
contrário.
C || D –> OU lógico. Resulta true se C ou D forem true. Se um dos dois for 
false, não tem problema.
Usando esses operadores você terá no final uma expressão booleana também. 
Você pode substituir o condição no if acima por uma expressão booleana.
Outro jeito de mudar o fluxo de execução é fazendo um loop:
while(condição)
{
//código aqui
}
//mais código..
Esse while determina um loop. Ou seja, esse código dentro do corpo do while 
(entre os {}) será rodado infinitamente, até que a condição não seja mais 
satisfeita. Quando não for mais satisfeita, o fluxo de execução 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 usuário vai travar caso 
aconteça isso. Você não quer que isso aconteça.
Funções
À medida que o código fica muito grande, fica necessário fazer partes de 
código que sejam reutilizáveis. Aí é que entram as funções. Verá que funções 
são nada mais nada menos que fazer o fluxo de execução pular para uma certo 
trecho de código.
Observe o corpo de uma função comum:
function nome_da_funcao(parametro1:Tipo1, parametro2:Tipo2):Tipo_De_Retorno
{
//Código da funcao aqui
}
Todas as funções iniciam com a palavra reservada function, seguido do nome 
que você deseja adicionar para a função.
Dentro do corpo da função (entre os {}) fica o código dela. Esse código será 
rodado toda vez que função for chamada. Para chamar uma função, veja 
adiante...
var a:int;
var b:Number;
// …....código.......
nome_da_funcao();
//mais código..
Como pode ver, qualquer nome seguido de parênteses “()” é uma chamada de 
função. Quando o fluxo de execução chegar em uma chamada de função, ele 
“entrará” na função e começara a seguir o código de dentro.
Procure separar seu código em funções o máximo possível. Além dele ficar 
mais fácil de entender, fica muito mais fácil de encontrar erros.
A função pode aceitar parâmetros, como acima. No exemplo acima, a função 
está esperando os parâmetros parametro1 e parametro2. Dentro do código da 
função. Você pode usar os parâmetros como variáveis livremente. Na chamada 
da função, você TEM que colocar os parâmetros dentro dos parênteses, na 
ordem que foram declarados na declaração da função.
Exemplo:
function fun(i:int, j:int)
{
//blablá
}
//código
var a:int = 2;
fun(a,4);
As funções também podem retornar coisas. Depois do parênteses da 
declaração da função, você pode definir o tipo de retorno assim como define 
tipos de variáveis, quando as declara. Esse é o tipo do dado que deverá ser 
retornado pela função. Você retorna coisas com a palavra reservada return. 
Quando o fluxo de execução chegar em um return, ele sai da função na hora. 
Você pode colocar returns sem nada para funções que não 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ê pôde ver acima, quando você chama uma função que retorna 
alguma coisa, você pode pegar esse resultado. E colocar em uma variável, 
como feito acima. Existem muitas utilidades. Uma função pode retornar um 
valor do tipo Boolean e ser colocada dentro de uma condição de um if, por 
exemplo. As utilidades são infinitas.
Classes e Instâncias
Você também pode até definir os seus próprios tipos. É aí que classes entram 
em ação.
Veja o exemplo:
class nome_da_classe
{
//Variaveis
//Métodos
}
Uma classe define um tipo. Por exemplo, int, Boolean, Number, String, todas 
essas são classes. Toda classe só tem duas modalidades de coisas: campos e 
métodos.
Campos é o nome de uma variável em uma classe, e método é apenas um 
nome de uma função em uma classe. Ou seja, toda classe só tem variáveis e 
funções.
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 função. E é, uma 
função chamada construtor. O Construtor é um método especial que toda 
classe tem que retorna uma dado do tipo daquela classe. O construtor não 
precisa ser definido, mas caso queira defini-lo, apenas crie um método com o 
mesmo nome da classe, olhe no exemplo:
class minhaClasse
{
//Variaveis
//Construtor
function minhaClasse()
{
}
//Métodos
}
Detalhe que o construtor não pode retornar nada. Ele já retorna o tipo da 
própria classe. Mas você pode usar o return sem nada caso queira que a 
função acabe no meio.
Agora que você já tem uma instância da sua classe (ou variável 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()
{
}
//Métodos
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 métodos da instância. Todas as instâncias de 
uma mesma classe terão os mesmos campos e métodos (você pode criar 
várias). Para acessar um campo ou método da instância, use o nome da 
instância seguido de ponto(“.”) seguido do nome do campo ou do método.
Quando você chama um método de uma instância, diz-se que você está 
chamando o método sobre essa instância.
Classes também 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 várias coisas que um carro tem (campos), e o 
que um carro faz (métodos).
Agora sabemos que existem tipos mais específicos de carro, que ainda são 
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 são específicas dele(idade de carro velho, se está estragado 
ou não...). Ele também pode fazer mais coisa que um carro comum (ele pode 
estragar) e ele também pode alterar o jeito como um carro comum faz as 
coisas (agora ele não acelera tão bem).
Para mudar a funcionalidade de um método que já foi declarado na classe pai 
(no caso, o pai é o Carro), usa-se a palavra reservada muito útil override.
Dentro dos métodos, você também pode usar a palavra reservada this. Essa 
palavra se refere à instância da qual o método está sendo chamado. Por 
exemplo, você pode acessar campos e outros métodos dentro de um método, 
chamar uma outra função com a instância como parâmetro, entre outros.
Outro conceito importante é o conceito de pacotes. Pense um pacote como 
uma pasta que contém classes. Você pode criar os seus próprios pacotes 
quando estiver trabalhando em um projeto. O Flash separa as classes pré 
definidas em pacotes fáceis de vizualizar. Por exemplo, flash.display é o pacote 
de coisas gráficas, flash.events é o pacote de coisas sobre eventos. Os dois 
estão dentro do pacote flash,por isso o “.” entre os nomes.
Classes podem parecer complicadas, mas uma vez aprendidas, são um 
importante aliado.
Display Objects e como colocar gráficos na tela
Image uma DisplayObject como uma imagem, animação, etc. Não se pode 
criar instâncias dessa classe diretamente (o Flash não permite). O que se faz é 
usar um filho dessa classe. As mais utilizadas são Sprite, MovieClip e 
SimpleButton.
No Flash, os gráficos são implementados através de uma árvore. Na raíz da 
árvore, fica o Stage, que é o espaço em branco que vemos quando criamos um 
novo arquivo flash. O stage é um DisplayObjectContainer, ou seja, uma classe 
que é um DisplayObject que pode ter vários DisplayObject como filhos, e até 
outros DisplayObjectConainers.
Na hora da exibição, o Flash começa 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 posição, ou seja, o seu X (sua posição horizontal) 
e seu Y (sua posição 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 posição do pai. 
No flash, como mexemos em duas dimensões, a origem principal é a posição 
do stage, que é a posição x = 0 e y = 0. Essa posição é o ponto superior 
esquerdo do espaço em branco. Um filho sempre tem sua origem na posição 
do pai. Ou seja, mudando a posição do pai você também muda a posição do 
filho, que depende da posição do pai. Isso também acontece com outros 
parâmetros, não só posição. Por exemplo, transparência, 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 código àquele frame. O método addChild(d:DisplayObject) serve pra 
isso. Ele é um método 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 função addChild é a função para colocar um filho em um 
DisplayObjectContainer. Você executa esse método sobre a instância que você 
quer que seja pai, passando como parâmetro o filho.
Para fazer um desenho no flash e fazer esse desenho aparecer na tela em 
tempo de execução, ou seja, no código, você terá que linkar o símbolo no 
actionscript.
Caso não saiba o que seja símbolo, pesquise “flash new symbol” ou o que 
quiser na internet.
Para linkar o símbolo para o actionscript, você deve fazer o seguinte:
1. Abra um documento flash.
2. Crie o seu símbolo.
3. Abra a Library(Biblioteca).
4. Clique com o botão direito no símbolo.
5. Marque a opção “Export for ActionScript” dentro de Linkage
6. Coloque o nome da classe que gostaria de que sua imagem tivesse
7. Coloque a classe que será pai da imagem que você está criando. (O 
Default, MovieClip, é o mais usado, mas você também pode usar Sprite 
se preferir gastar menos espaço).
8. Pronto! Agora toda vez que você chamar “ new nome-da-classe(); “, 
você estará criando uma instância desse símbolo no código. Funciona em 
qualquer parte do código, até em classes, contando que elas estejam no 
mesmo projeto.
Agora sim, você sabe como colocar imagens dentro do código actionscript. 
Eventos e Interatividade
Mas e sobre interatividade, como fazer? O Flash foi feito para ser interativo 
com o seu usuário, e não uma coisa em que apenas é assistido. Fazer alguma 
coisa acontecer quando se movimenta o mouse ou aperta-se uma tecla, por 
exemplo, é importantíssimo.
Para começar a fazer alguma coisa interativa, o programador tem que 
entender alguma coisa de eventos. A classe Event e suas filhas são tipos de 
eventos. As instâncias da classe Event são eventos mais geral (e o que 
normalmente você vai mais utilizar). Mas existem também, por exemplo, a 
classe MouseEvent, tem instâncias que são eventos ligados ao mouse, como 
movimentação e clique. E por aí vai.
A não ser que crie manualmente um evento, ele não 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 explicação verdadeira é mais 
complicada) e detectado, uma chamada pra uma função acontece. É essa 
função que você criará. O que acontecerá quando o usuário clica em um 
botão? Ele chamará uma função automaticamente, e você é quem criará essa 
função.
Veja um exemplo de como fazer um evento funcionar, em uma frame do 
timeline:
function foo()
{
trace(“falae”);
}
addEventListener(Event.ENTER_FRAME,foo);
Nesse código, adicionamos ao de entrar em um novo frame (um evento 
utilizado MUITO) a função foo. Ou seja, o flash acabará imprimindo na tela 
milhares de “falae” infinitamente. Isso acontece porque a timeline principal 
nunca para de entrar em novos eventos. Aliás, nada para de entrar em novos 
eventos.
Essa função, addEventListener, é a função principal para mexer com 
interatividade. A instância sobre a qual você age o método é a instância que 
escuta. Ou seja, se você quer que um botão capture o evento 
MouseEvent.CLICK, você faz esse método sobre esse botão. O primeiro 
parâmetro é qual o tipo de evento de fato, será escutado pela instância. 
Existem vários tipos de eventos, que podem ser facilmente pesquisados.
O segundo parâmetro é o nome da função da qual gostaria que fosse chamada 
quando o evento especificado acontecesse sobre a instância especificada. O 
bacana é que pode ser qualquer função, até um método de outra instância que 
não 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 acelerômetro de dispositivos móveis, entre outros. 
Muitas dessas classes têm seus próprios tipos de eventos.
Uma rápida pesquisa no arquivo de ajuda ou na internet trazem classes e suas 
descrições para as mais várias funcionalidades.
Sabendo de DisplayObject's e Event's, garanto-lhe que uma boa parte do 
caminho já está percorrida.