Tutorial de ActionScript 3

Transcrição

1 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 (pluginencontrá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;

2 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

3 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

4 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. 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

5 (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...

6 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();

7 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

8 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 );

9 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

10 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

11 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:

12 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.