Actionscript 3 Tutorial

7/16/2019 Actionscript 3 Tutorial

http://slidepdf.com/reader/full/actionscript-3-tutorial-563387152cab5 1/12

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 foielaborado para rápida leitura e, para conhecimento aprofundado, assim comopara aplicações específicas, novas pesquisas deverão ser realizadas. O próprioflash tem um grande base da dados de ajuda, que pode ser utilizada ao ladodesse tutorial.

Lembrando que o conhecimento de inglês ajuda – e muito – na hora deprogramar 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 baseadaem ECMAScript, utilizada principalmente para construção de aplicações RIA (doinglê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 quaisdevem ser seguidas para que o computador entenda o que deve ser feito.

O código é lido pelo computador linha a linha. Para maior entendimento (masnã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 nomeio de uma linha, pra colocar outra na mesma linha.

Cada linha aqui, é uma instrução. Instrução pode ser a declaração de umavariá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ódigoinstrução após instrução, uma a uma.

Veja:

//Comentárioinstruçã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 deexecuçã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 (“//”) ouentre os símbolos /* e */ chama-se comentário. Comentário é algo que não éconsiderado pelo computador. Comentários servem para indicar alguma coisapara você, programador.

Use e abuse de comentários, é uma boa prática. Sempre indique o que vaifazer em um próximo trecho de comentário. Fica mais fácil de lembrar o queesse 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 daslinguagens de programação) permite à você dar nome às coisas. Mas existemalgumas palavras já pré-estabelecidas pelo actionscript que definem qualinstrução será realizada, ou seja, o que o computador deverá fazer, que nãopodem ser usadas livremente. Essas palavras são chamadas de palavrasreservadas. Veremos muitas delas adiante. Por exemplo, var define que serádeclarado uma variável, while define que ali terá um loop. À medida que se vaiprogramando, essas palavras ficam cada vez mais fáceis de serem lembradas(muitas linguagens de programação tem as mesmas palavras para as mesmascoisas).

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, elassão transformadas de código entendível por você, ser humano, para códigoque pode ser entendido pelo computador. Após isso, o código pronto (quechamamos de binário) é executado. As duas coisas ocorrem rapidamente, umaapó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 depoismanipulado é denominado variável. Para se declarar uma variável emActionscript 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 Tipodepois 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. Noactionscript, ao contrário de outras linguagens, tipos primitivos são poucousados pelo programador comum. O programador comum usa tipos que usamtipos 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 eb e mais uma constante.

Existe também o uso de constantes na linguagem. Vários tipos (primitivos ounão) possuem literais. Literais são maneiras fáceis de descrever valores edados. 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, apalavra “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 manipulardados: literais e/ou variáveis. Todas as quatro operações (+, -, * e /) sãooperadores para inteiros no actionscript. Note que as funções dos operadoresdepende 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” asstrings:

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ãosendo utilizados mais frequentemente. Além disso, com uma breve pesquisana internet já temos uma lista de tipos e de todos os operadores (essa últimanã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 fazerlivremente.

Caso você queira que o computador execute um código se for estabelecidauma 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 daquiinstrucao1;instrucao3;

}else{

//caso contrario executa as daquiinstrucao2;

}

//mais código..

Mas como estabelecer uma condição? Existe um tipo de variável, o tipobooleano. Tipos booleanos só podem assumir dois valores, true (verdadeiro)ou false (falso). Note que true e false são palavras reservadas peloactionscript. Existem vários operadores que resultam nesse tipo. Umaexpressão ou instrução que resulta em um tipo booleano são chamadas deexpressões booleanas. Os operadores 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 ouexpressõ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 forfalse, 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 maissatisfeita. Quando não for mais satisfeita, o fluxo de execução sai do loop econtinua normalmente.

Muito cuidado com o loop infinito: o loop infinito é quando por algum erro seuo while nunca para Isso significa que o flash do usuário vai travar casoaconteç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 decódigo que sejam reutilizáveis. Aí é que entram as funções. Verá que funçõessão nada mais nada menos que fazer o fluxo de execução pular para uma certotrecho 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 nomeque 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, vejaadiante...



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 defunçã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 ficarmais 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çãoestá esperando os parâmetros parametro1 e parametro2. Dentro do código dafunção. Você pode usar os parâmetros como variáveis livremente. Na chamadada função, você TEM que colocar os parâmetros dentro dos parênteses, naordem 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 dadeclaração da função, você pode definir o tipo de retorno assim como definetipos 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 retornaalguma coisa, você pode pegar esse resultado. E colocar em uma variável,como feito acima. Existem muitas utilidades. Uma função pode retornar umvalor do tipo Boolean e ser colocada dentro de uma condição de um if, porexemplo. As utilidades são infinitas.

Classes e Instâncias

Você também pode até definir os seus próprios tipos. É aí que classes entramem ação.

Veja o exemplo:

class nome_da_classe{

//Variaveis

//Métodos}

Uma classe define um tipo. Por exemplo, int, Boolean, Number, String, todasessas são classes. Toda classe só tem duas modalidades de coisas: campos emétodos.

Campos é o nome de uma variável em uma classe, e método é apenas umnome 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 é, umafunção chamada construtor. O Construtor é um método especial que todaclasse 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 omesmo nome da classe, olhe no exemplo:

class minhaClasse{

//Variaveis

//Construtorfunction minhaClasse(){}

//Métodos}



Detalhe que o construtor não pode retornar nada. Ele já retorna o tipo daprópria classe. Mas você pode usar o return sem nada caso queira que afunção acabe no meio.

Agora que você já tem uma instância da sua classe (ou variável do tipo da suaclasse, chame-a do que quiser), você já pode usá-la. Veja no exemplo:

class minhaClasse{

//Variaveispublic var a:int = 2;public var blabla:tipo_blabla;

//Construtorfunction minhaClasse(){}

//Métodosfunction 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 deuma mesma classe terão os mesmos campos e métodos (você pode criarvárias). Para acessar um campo ou método da instância, use o nome dainstâ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 outrasclasses, 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 oque 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 umascoisas 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 podeestragar) e ele também pode alterar o jeito como um carro comum faz ascoisas (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. Essapalavra se refere à instância da qual o método está sendo chamado. Porexemplo, 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 comouma pasta que contém classes. Você pode criar os seus próprios pacotesquando estiver trabalhando em um projeto. O Flash separa as classes prédefinidas em pacotes fáceis de vizualizar. Por exemplo, flash.display é o pacotede coisas gráficas, flash.events é o pacote de coisas sobre eventos. Os doisestão dentro do pacote flash, por isso o “.” entre os nomes.

Classes podem parecer complicadas, mas uma vez aprendidas, são umimportante aliado.

Display Objects e como colocar gráficos na tela



Image uma DisplayObject como uma imagem, animação, etc. Não se podecriar 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 eSimpleButton.

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 umnovo arquivo flash. O stage é um DisplayObjectContainer, ou seja, uma classeque é 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 osfilhos, depois os filhos dos filhos em cima dos filhos e por aí vai. Ou seja, paraadicionar alguma coisa na tela você tem que adicionar um filho no Stage, edepois 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 Xvocê arrasta o DisplayObject para a direita, diminuindo para esquerda. Oaumento 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çãodo 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çãodo pai. Ou seja, mudando a posição do pai você também muda a posição dofilho, que depende da posição do pai. Isso também acontece com outrosparâ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 paraadicionar código àquele frame. O método addChild(d:DisplayObject) serve praisso. Ele é um método tanto de um stage como de qualquerDisplayObjectContainer (que inclui sprites e MovieClips).

Exemplo:

var sprite:Sprite = new Sprite();var movieClip:MovieClip();addChild(sprite); // Isso faz o sprite aparecer na telasprite.addChild(movieClip); // Isso faz um movieclip aparecer tendo como base o sprite

Essa função addChild é a função para colocar um filho em umDisplayObjectContainer. 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 emtempo 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 quequiser 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 Linkage6. Coloque o nome da classe que gostaria de que sua imagem tivesse7. Coloque a classe que será pai da imagem que você está criando. (O

Default, MovieClip, é o mais usado, mas você também pode usar Spritese 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 emqualquer parte do código, até em classes, contando que elas estejam nomesmo 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 interativocom o seu usuário, e não uma coisa em que apenas é assistido. Fazer algumacoisa acontecer quando se movimenta o mouse ou aperta-se uma tecla, porexemplo, é importantíssimo.

Para começar a fazer alguma coisa interativa, o programador tem queentender alguma coisa de eventos. A classe Event e suas filhas são tipos deeventos. As instâncias da classe Event são eventos mais geral (e o quenormalmente você vai mais utilizar). Mas existem também, por exemplo, a

classe MouseEvent, tem instâncias que são eventos ligados ao mouse, comomovimentaçã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 queum evento for criado (isso é um pouco amplo, a explicação verdadeira é maiscomplicada) e detectado, uma chamada pra uma função acontece. É essafunção que você criará. O que acontecerá quando o usuário clica em umbotão? Ele chamará uma função automaticamente, e você é quem criará essafunção.

Veja um exemplo de como fazer um evento funcionar, em uma frame dotimeline:



function foo(){

trace(“falae”);}

addEventListener(Event.ENTER_FRAME,foo);

Nesse código, adicionamos ao de entrar em um novo frame (um eventoutilizado MUITO) a função foo. Ou seja, o flash acabará imprimindo na telamilhares de “falae” infinitamente. Isso acontece porque a timeline principalnunca para de entrar em novos eventos. Aliás, nada para de entrar em novoseventos.

Essa função, addEventListener, é a função principal para mexer cominteratividade. 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 eventoMouseEvent.CLICK, você faz esse método sobre esse botão. O primeiroparâ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 chamadaquando o evento especificado acontecesse sobre a instância especificada. Obacana é que pode ser qualquer função, até um método de outra instância quenão tenha nada a ver com o que de fato esteja acontece. A gama depossibilidades é imensa.

Outras Classes

Existem muitas outras classes que podem ser usadas para explorar toda afuncionalidade do Flash. Como por exemplo Sound para sons, Mouse para omouse, 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 suasdescrições para as mais várias funcionalidades.

Sabendo de DisplayObject's e Event's, garanto-lhe que uma boa parte docaminho já está percorrida.

Actionscript 3 Tutorial

Documents

Transcript of Actionscript 3 Tutorial