Curso ActionScrpt 3.0 – Módulo 3
Criando Meu Primeiro Projeto
Autor: Everton Vieira
Nível: Básico
Introdução
Neste terceiro módulo, veremos primeiramente quais são as IDE´s disponíveis no mercado para ActionScript 3, indicando qual utilizaremos no curso. Em seguida, veremos as configurações necessárias para criarmos o nosso primeiro projeto.
IDE´s Disponíveis para AS3
Atualmente não existem muitas opções de IDE´s para se trabalhar com Action Script 3. Mas, se compararmos com as versões anteriores da linguagem, podemos enxergar um pequeno avanço neste sentido. Vamos conhecer as principais:
Flash CS Professional
Desenvolvedor: Adobe
Custo: U$ 900,00
O software Adobe® Flash® CS Professional é o ambiente líder do setor para a criação de experiências interativas para web. Atualmente na versão CS4 (10), trás uma IDE focoda na produção de animações.
Apesar de ser bastante popular e possuir uma ótima integração com a parte gráfica, esta IDE é pouco utilizada para projeto ou games mais complexos. Seu editor de código é bastante limitado, claramente focado nas animações e códigos em formato script dispostos na timeline.
Adobe Flash Builder
Desenvolvedor: Adobe
Custo: U$ 840,00
O Adobe Flash Builder™, anteriormente chamado de Flex Builder, é uma ferramenta de desenvolvimento baseada no Eclipse™ que permite uma codificação inteligente, depuração interativa, aparência e comportamento de aplicações ricas para internet.
Flash Builder trás para os desenvolvedores web uma grande facilidade, sua IDE conta com vários compoentes pré-fabricados capazes de facilitar muito a criação de um sistema baseado no navegador. Através de uma linguagem de Script nativa, o MXML, juntamente com o já conhecido ActionSctipt 3, ele permite separar a parte gráfica da parte lógica de sua aplicação. Os principais recursos incluem:
- Ferramentas avançadas de codificação
- Layout visual sofisticado
- Visualização interativa de dados
- Ferramentas avançadas de teste
Curiosidade: O nome Flash Builder foi utilizado para evitar confusões entre o Flex SDK, iniciativa livre da Adobe, e a IDE paga.
Flash Develop
Desenvolvedor: Independente
Custo: Gratuito
Flash Develop é uma IDE gratuita, elaborada em cima da plataforma Dot Net, para desenvolvimento de aplicações em AS2, AS3, MXML e Air.
O projeto já existe há vários anos, mas recentemente ganhou um grande número de usuário. Isto não é uma coinscidência, o projeto com o passar dos anos ganhou maturidade, e o que não passava de um hobby para os desenvolvedores, hoje é um ótima opção para desenvolver grandes projetos com a linguagem ActionScript.
Tendo em vista a iniciativa, e essência, do Abrindo o Jogo, vamos sempre que possível optar por ferramentas livres. Sendo assim, o Flash Develop será a IDE utilizada em nosso curso. Na próxima sessão veremos como instalar, configurar e montar nosso primeiro projeto.
Instalação e Configuração
Para instalar o Flash Develop, você antes precisará baixar o Flex SDK, que contém a API base do AS3 e seu compilador. Além disto, necessitaremos do Dot Net, tecnologia utilizada para desenvolver o editor, e do Java, tecnologia do compilador. É isto mesmo que você leu, o compilador de AS3 foi desenvolvido em Java. O Alessandro deve estar dando pulos de alegria 
Siga a lista de links abaixo:
Após instalar as plataformas, o SDK e o Editor, vamos efetuar as configurações necessárias para iniciarmos o desenvolvimento. Primeiramente indicamos o local do SDK (Compilador e API)
Clicar em Tools>Program Settings
Em As3Context inserir o local onde foi descompactado o SDK
Após configurarmos o compilador e a API base através da pasta do Flex SDK, o editor está pronto para utilizarmos.
Meu Primeiro Projeto
Nosso primeiro projeto aqui no Abrindo o Jogo será bem simples, temos que começar no nível básico para podermos ir evoluindo de forma sólida e consistente, nada de já querer fazer um First Person Shooter na primeira aula 
. Sendo assim, o objetivo será o famoso “Hellow World”. Vamos aos passos:
1) Crirar um novo Projeto ActionScript 3.0
Clicar em Project>New Project
Selecione AS3 Project, digite o nome do projeto PrimeiroProjeto e clique OK
2) Entendendo o arquivo Main.as
Em seguida a criação do projeto, o Develop monta uma estrtura padrão de pastas e também o arquivo padrão Main.as. Este último tem função semelhante aos arquivos Main de outras linguagens, ou seja, servem para instanciar o seu projeto. A imagem abaixo mostra a estrutura criada automaticamente pelo editor:
Estrutura padrão criada pelo editor
A pasta bin é destinada aos arquivos que serão gerados para seu aplicativo. Já a lib, é destinada a arquivos úteis para o projeto, tais como: XML de configuração, imagens, áudios, etc. A pasta src é o local onde vamos armazenar nossas classes. É possível notar o arquivo Main já dentro da pasta correta, vamos visualizar seu código:
1 package 2 { 3 import flash.display.Sprite; 4 import flash.events.Event; 5 6 /** 7 * ... 8 * @author everton vieira 9 */ 10 public class Main extends Sprite 11 { 12 13 public function Main():void 14 { 15 if (stage) 16 init(); 17 else 18 addEventListener(Event.ADDED_TO_STAGE, init); 19 } 20 21 private function init(e:Event = null):void 22 { 23 removeEventListener(Event.ADDED_TO_STAGE, init); 24 // vamos digitar nosso código aqui 25 } 26 27 } 28 29 }
Analisando o código linha à linha, temos:
- linha 1 – Sintaxe de pacotes do AS3, similar a utilizada em namespaces.
- linhas 3 e 4 – É possível identificar que o editor acrescentou os pacotes que a classe utililza.
- linha 10 – Temos a definição da classe. É possível perceber que ela estende de Sprite, classe gráfica da linguagem AS3. Isto é necessário pois no momento da compilação, o editor vinculará a classe Main ao arquivo swf a ser gerado, instanciando um objeto deste tipo e populando alguns de seus atributos. Este processo é exatamente o mesmo utilizado pela IDE Flash, conhecido como Document Class.
- linhas 13 a 19 – É definido o construtor da classe e um teste para previnir erros em tempo de excução. Como vimos na explicação acima, o compilador atribuirá valores a algums atributos do objeto. Um dos principais é o atributo stage, herdado de Sprite, que receberá uma referência para o antigo _root (palco). É desta forma que conseguiremos nas aulas seguintes escrever algo na tela. O editor neste ponto sugere um teste simples com uma estutura de seleção, onde ele testa primeiramente se o atributo já foi populado. Se isto ainda não ocorreu, ele cadastra-se como ouvinte do evento ADDED_TO_STAGE (adicionado ao palco), que será disparado quando esta relação ocorrer. Este tipo de erro ocorre em aplicativos que já possuem muitos objetos gráficos anexados ao Stage antes da compilação.
- linhas 21 a 25 – Independente do ocorrido no construtor, o método init será chamado. Sua primeira instrução, na linha 23, é a cancelar o vínculo com o evento, ou seja, paramos de ouvi-lo a partir deste ponto. A partir dai podemos inserir nosso código normalmente.
3) Configurando o Projeto
Bom, agora que já entendemos o que o editor fez por nós, vamos conferir se o projeto está com as especificações desejadas. Para isto clique com o botão direito do mouse sobre o nome:
Clique com o botão direito do Mouse sobre o nme do projeto
Propriedades do Projeto
- Você pode configurar a versão do player que deseja utilizar. Vamos configurar para versão 10
- Configuração do nome e local do arquivo SWF a ser gerado.
- Dimensão do arquivo SFW a ser gerado. Vamos definir um aplicativo de 800 x 600 pixels.
- Cor de fundo do SWF. Escolha uma cor de sua preferência.
- Taxa de frames por segundo do SWf a ser gerado. Mantenha os 30 sugeridos pelo editor.
- Neste combobox, você define onde visualizará seu projeto quando publicado. Vamos definir para ele ser executado em uma janela popup, desta forma facilitando bastante o desenvolvimento.
4) Digitando o código
Para escrevermos algo na saída do programa utilizaremos o comando trace, muito útil nas próximas aulas. O código ficará assim:
...
21 private function init(e:Event = null):void
22 {
23 removeEventListener(Event.ADDED_TO_STAGE, init);
24 trace("Hellow World AS3");
25 }
26
27 }
Após digitar o código, você deve publicar/compilar o nosso programa. Para esta ação temos duas opções:
1) Build Project – Este comando compila o projeto, iniciando pela classe Main, indicando a existência de algum erro de sintaxe.
2) Test Movie – Mesma ação do comando anterior, porém ao final executa e abre o aplicativo.
Se tudo correu certinho, você verá a saída do programa no painel de output , como demonstrado na tela abaixo:
Por hoje é isto pessoal, com esta etapa, encerramos o arco de módulos básicos do nosso curso. Os próximos serão mais avançados e mais direcionados a área de jogos. Não deixem de acessar a lista de discussões, comentando e tirando suas dúvidas.
Até mais!
Postado em Técnico