Dominando Action Script 3

Transcrição

1

2 Dominando Action Script 3 Segunda Edição (2014) Daniel Schmitz Esse livro está à venda em Essa versão foi publicada em This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do Daniel Schmitz

3 Conteúdo 1 Introdução O que é Action Script? Action Script 2.0 e Action Script O papel do Flash Player O Adobe Flash Builder Instalação do Adobe Flash Builder Criando o Hello World O comando trace() Erro ao executar aplicações no modo Debug

4 1 Introdução A tecnologia Flash evoluiu de forma a estar presente em mais de 98% dos navegadores no mundo todo. Inicialmente como uma tecnologia para desenhar animações, o Flash evoluiu diversos conceitos, dentre eles a sua linguagem base. Quando falamos em linguagem base do Flash estamos dizendo Action Script. Todas aquelas animações dos banners Flash e dos sistemas em Flex são movidos por esta linguagem, na qual iremos aprender os seus principais conceitos nesta obra. 1.1 O que é Action Script? Basicamente é uma linguagem de programação, como PHP, C# ou Java. É claro que possui suas diferenças, mas o seu padrão ECMAScript3 garante uma certa semelhança às linguagens derivadas do C. É um pouco óbvio que você saiba o que é Action Script, pois comprou um livro que fala exatamente deste assunto, por isso não vamos nos aprofundar nisso. Rapidamente, podemos dizer que o Action Script é uma linguagem que possui uma dinâmica orientada a objetos, e possui a maioria dos comandos que todas as linguagens de programação têm, tais como o if, while e for. Além disso, o Action Script possui funcionalidades extras, graças à rica biblioteca de recursos do Flash Player. Dentre elas podemos destacar: Carregar imagens bitmap; Executar som e vídeo; Capturar o som do microfone e o vídeo da webcam; Desenhar linhas, figuras (retângulo, elipse ), fazer preenchimentos com gradiente e aplicar máscaras, definir transparência; Carregar e manipular dados XML; Interagir com o usuário capturando eventos como o click do mouse ou teclas do teclado Realizar animações em objetos; Trabalhar com dados binários. Além desse básico, utilizando as bibliotecas do Flash e do Flex, centenas de novas funcionalidades são adicionadas ao Action Script.

5 Introdução 2. Quer conhecer todas as classes do Action Script? Apresentamos então o melhor caminho para isso, se chama Action Script 3.0 Reference e está disponível neste endereço: Action Script 2.0 e Action Script 3.0 Existem basicamente duas versões do Action Script: 2.0 e 3.0. A versão 2.0 está ligada às versões antigas do Flash, e por isso não serão vistas nesta obra. Estaremos abordando exclusivamente a versão 3.0 do Action Script, e quando você ler Action Script em nosso livro, saiba que é Action Script 3.0. O Action Script 3.0 já é usado no Flash CS 5 e sempre foi usado no Flex, então não existe a necessidade de analisarmos diferenças entre estas duas versões. 1.3 O papel do Flash Player O Action Script 3.0 é a base para os sistemas em Flex e as animações no Flash. Mas como estes códigos podem ser executados em um navegador web se o usual é HTML e JavaScript? Para isso existe um plugin chamado Flash Player, que atualmente está na versão Felizmente o Flash Player é um plugin consagrado no mercado, presente em mais de 98% dos navegadores no mundo. É um produto maduro, com mais de 10 anos de existência. O Flash Player funciona como uma máquina virtual, assim como no Java. Ou seja, quando criamos códigos para o Flash Player, não estamos preocupados com a versão do sistema operacional ou com o navegador do cliente, pois estamos criando código para o Flash Player. Ele será responsável em reproduzir o nosso código de acordo com o sistema operacional/navegador. Isso é muito bom, porque podemos programar a vontade sem a necessidade de testar navegadores (algo necessário com JavaScript). O Flash Player trabalha com um arquivo compilado chamado swf. Ou seja, todos os arquivos que criarmos com a extensão.as, ao compilarmos, resulta em um único arquivo swf. Se este processo é complexo para você, fique tranqüilo, utilizando uma IDE como o Flash Builder, teremos tudo isso sem maiores problemas. Falaremos do Flash Builder no próximo capítulo. Além do Flash Player poder executar todo o seu código, ele também contém um conjunto de códigos prontos que podemos usar a vontade, chamado de API do FlashPlayer. Por exemplo, se quisermos obter uma instância da webcam do usuário (para tirar um foto), será pela API do Flash Player que conseguiremos isso. O mesmo vale para capturar as teclas do teclado ou o click do mouse.

6 Introdução O Adobe Flash Builder 4 O Flash Builder 4 é a melhor IDE para aprendermos Action Script. Uma IDE (Integrated Development Enviroment Ambiente integrado de desenvolvimento) é um programa de computador que traz diversas facilidades para desenvolvermos código. Relembrando, o Flash Player, bem como o Action Script e todo o framework Adobe Flex são gratuitos. Ou seja, você pode construir aplicações em Flash/Flex sem gastar nada, bastando apenas usar um editor de códigos e o compilador. Este não será o nosso caso. Nesta obra, iremos utilizar o Flash Builder que é uma IDE paga, mas possui 60 dias de avaliação.. Nota da nova versão desta obra: A versão gratuita para estudantes nao existe mais. Caso você deseje utilizar uma IDE free para o Flex Framework, você pode optar pela ferramenta FlashDevelop ou FDT Free Ou seja, o Flash Builder é a IDE perfeita para você que está aprendendo Action Script (ou Flex), e será a IDE perfeita quando você começar a criar aplicações em Flex. 1.5 Instalação do Adobe Flash Builder Para instalar o Adobe Flash Builder 4, acesse este endereço¹ e, na página que surge com os produtos da Adobe, escolha o Flash Builder, e clique em Baixar. Talvez seja necessário realizar um login no site da Adobe. Se você ainda não tiver uma conta, deverá criar uma. Ao invés de baixar o Flash Builder, você irá instalar o Creative Cloud desktop, que, por sua vez, irá instalar o Flash Builder, de acordo com a imagem a seguir. ¹

7 Introdução 4 Creative Cloud desktop instalando o Adobe Flash Builder 1.6 Criando o Hello World Vamos usar o Adobe Flash Builder para criamos o nosso primeiro código. Através dele iremos aprender diversos conceitos, mesmo sem conhecer profundamente a linguagem. Com o Flash Builder aberto, navegue até o item de menu File (canto superior esquerdo), New, Action Script Project:

8 Introdução 5 Criando um novo projeto Veja que temos também projetos do Adobe Flex e do Flash Professional. Ao selecionarmos ActionScript Project, surge a seguinte tela: Criando o projeto HelloWorld Nesta tela, devemos inserir o nome do projeto, no campo Project Name. Deixe marcado o item Use default location, e deixe a versão do Flex SDK como a padrão (default). Clique no botão Finish para criar o projeto. Neste momento o projeto HelloWorld é criado, e temos a seguinte tela:

9 Introdução 6 Projeto criado e classe HelloWorld.as Na janela Package Explorer, temos o projeto HelloWorld criado, juntamente com algumas pastas. Neste momento, podemos olhar somente para a pasta src, onde temos o arquivo HelloWorld.as, que representa a classe HelloWorld. A aba Outline mostra o esqueleto da classe HelloWorld, onde poderemos navegar através dos métodos e propriedades da classe com mais facilidade. Na janela principal, temos a classe HelloWorld, com pouco mais de 10 linhas de código. Vamos inserir algum código nesta classe. Na linha 9 (da figura anterior), temos um método chamado HelloWorld. Inicialmente, vamos aceitar que este método sempre será executado quando executarmos a aplicação. Vamos inserir o seguinte código:

10 Introdução 7 1 package 2 { 3 import flash.display.sprite; 4 5 public class HelloWorld extends Sprite 6 { 7 public function HelloWorld() 8 { 9 trace("hello World"); 10 } 11 } 12 }. Atenção Sempre quando você ver um número em parêntesis, como por exemplo (9), significa a linha do código em questão. No método HelloWorld, em (9), usamos o comando trace para imprimir alguma coisa na janela de Debug, chamada de Console. Este comando será muito utilizado, e merece algumas considerações importantes. 1.7 O comando trace() O comando trace() é usado para imprimir informações na janela Output do Flash Builder. Uma consideração muito importante sobre o trace(), é que ele funciona somente quando executamos a aplicação no modo Debug. O modo Debug é um modo de execução especial do Flex, que é executando clicando no ícone em destaque da figura a seguir: Botão para executar o projeto no modo Debug Este ícone está localizado na parte superior do Flash Builder. Vamos então executar o projeto Hello World. Clique no ícone de Debug e aguarde o Flex abrir o navegador web. Porque isso? Por que o Flash Builder irá executar a aplicação HelloWorld através do arquivo HelloWorld.swf, que deverá ser executado no navegador. Assim que o navegador abrir, volte ao Flash Builder e verifique se a janela Console está aberta, com a linha Hello World sendo exibida, conforme a figura a seguir:

11 Introdução 8 Saída do comando trace na janela console. Dica O comando trace funciona apenas quando executamos a aplicação no modo debug. 1.8 Erro ao executar aplicações no modo Debug Talvez ao tentar executar a aplicação no modo Debug, possa surgir uma mensagem erro, conforme exibida a seguir: Mensagem de erro ao executar o projeto no modo debug Isso acontece porque o Flash Player instalado no navegador não possui a versão Debug, na qual deverá ser instalada. Clique no link da mensagem de erro e instale o Flash Player no modo debug, de acordo com o seu navegador padrão, conforme a figura a seguir:

12 Introdução 9 Mensagem de erro ao executar o projeto no modo debug. Recomendamos usar o navegador firefox para testar suas aplicações em flex.