Introdução

Se já usou o Flash 8 IDE, deverá ter a perfeita consciência de que, apesar de todos os seus pontos fortes, possui várias lacunas que dificultam ou impossibilitam mesmo o desenvolvimento de projectos mais complexos. Entre essas lacunas podem-se contar:

• Editor de actionscript muito limitado;
• Não apela a boas práticas – à medida que a dimensão de um projecto, também aumenta a sua complexidade, muito por culpa do código se encontrar disperso nas frames da timeline dos imensos objectos;
• Impossibilidade de desenvolvimento colaborativo – o facto do ficheiro FLA ser um binário inviabiliza o desenvolvimento de código em simultâneo por diferentes elementos de uma equipa recorrendo, por exemplo, a CVS, excepto recorrendo a ficheiros externos .as;
• Os componentes da Macromedia são muito pesados, lentos e possuem imensos bugs e falhas;
• O compilador é lentíssimo – um projecto com 100 classes pode demorar vários minutos a compilar;

Pretende-se com este tutorial apresentar um ambiente de desenvolvimento mais eficiente recorrendo a algumas ferramentas open-source.

A solução que será apresentada não é completamente open-source, pois continua a depender da utilização do Flash 8 IDE para a construção da biblioteca – o objectivo não é apresentar uma solução 100% open-source e gratuíta, mas sim apresentar uma solução cómoda e mais eficiente para o desenvolvimento em Flash. Porém, se pretender uma solução 100% open-source, basta substituir o Flash 8 IDE pelo SWFMill.

O ambiente proposto é uma alternativa eficiente ao desenvolvimento habitual em Flash. Porém, se pretender construir aplicações Flex deve utilizar o Flex Builder 2 para este fim. A alternativa aqui proposta permite-lhe obter um ambiente de desenvolvimento com ligeiras semelhanças ao ambiente do Flex Builder 2 (ambos se baseiam em Eclipse), porém, não se trata de uma alternativa ao desenvolvimento em Flex, mas sim ao desenvolvimento em Flash.

Vantagens do ambiente proposto, comparativamente ao ambiente do Flash 8 IDE

Que vantagens se obtêm com o ambiente de desenvolvimento que será proposto?

• O conforto do Eclipse como editor de código por excelência para quase todas as linguagens – “one editor to rule them all”. Por outras palavras, pode fazer um projecto inteiro usando Actionscript, JAVA, PHP, UML, etc, sem ter que trocar de editor;
• Syntax highlighting e code auto-completion: o ASDT irá dotar o Eclipse da capacidade de editar e colorir código actionscript e de apresentar completação automática do código (basta carregar CTRL+Space para ver uma lista de propostas);
• Com este ambiente, desenvolver um projecto em Actionscript será um processo idêntico a desenvolver um projecto em JAVA! Pode usar as mesmas metodologias que usa em JAVA. E com isto pode, claro está, recorrer facilmente a boas práticas de desenvolvimento, como frameworks (ARP e Cairngorm) e padrões de desenho;
• Os componentes v2 da Macromedia podem ser facilmente substituídos por algumas frameworks de componentes open-source mais completas, como o ASWing – framework idêntica ao Swing do Java;
• Torna-se possível o recurso ao CVS ou SVN para trabalho colaborativo;
• E principalmente, o compilador (MTASC) demora meros segundos a compilar projectos gigantescos!;

Em resumo, com este ambiente um projecto de grandes dimensões em actionscript pode finalmente ser abordado de uma forma séria, sendo possível aplicar as melhores metodologias de engenharia da programação ao desenvolvimento.

Para mais informações, consulte o site da comunidade OSFlash.

Descrição das ferramentas necessárias

• J2SE – necessário para poder correr o Eclipse, ou ainda, compilar código JAVA se precisar
• Eclipse – o editor que irá usar
• MTASC – o compilador de actionscript
• ASDT – plugin para o eclipse que lhe permite editar código actionscript
• ANT – ir-lhe-á permitir automatizar o processo de compilação, permitindo que com um único shortcut compile e teste a sua aplicação
• Flash 8 IDE – Necessário para construir a sua biblioteca, e ainda, se assim o desejar, colocar e desenhar os seus ecrâns no stage. O Flash 8 não é open-source, pelo que se quiser pode substituí-lo pelo SWFMill

Instalar o Flash 8 IDE

Faça download da versão trial do Flash 8, e instale-a com as opções por defeito.

Corra o Flash 8 para confirmar o sucesso da instalação.

Instalação do J2SE

Comece por fazer o download do J2SE. Se pretende fazer também código em JAVA, retire o SDK. Caso contrário, basta-lhe o JRE.

Depois de terminar corra o instalador que recebeu, e pode aceitar todas as opções por defeito.

Instalação do Eclipse

Faça o download do Eclipse.

Depois de terminar, utilize o seu descompressor (i.e. Winzip, WinRar, etc) para descomprimir o Eclipse para uma pasta da sua preferência (p. ex. C:\Programas\Eclipse).

Se preferir, crie um atalho no seu ambiente de trabalho para o Eclipse.

Sempre que instalar um novo plugin manualmente no Eclipse, terá que arrancá-lo pela linha de comandos com a seguinte sintaxe “eclipse.exe -clean”.

Instalação do MTASC

Faça o download do MTASC.

Descomprima o MTASC para uma pasta da sua preferência (p. ex. C:\Programas\MTASC), e recorde-se do local para onde descomprimiu o MTASC.

Instalação do ASDT

Corra o Eclipse

Quando lhe for pedido para escolher um workspace, deixe o que está por defeito, ou aponte para a pasta onde deseja colocar os seus projectos

Se lhe for exibida a janela de boas vindas, feche-a

Escolha Help > Software Updates > Find and Install

Escolha Search for new features to install e clique em Next

Clique em New Remote Site

Escreva ASDT na caixa de texto para o nome, e http://aseclipseplugin.sourceforge.net/updates/ na caixa para o URL e clique em OK

Active a checkbox do ASDT na lista e clique em Finish

A partir daqui o Eclipse irá instalar o ASDT automaticamente. Se lhe for pedido para confirmar, ou para escolher novamente o ASDT na lista, active novamente a checkbox e clique em Next.

Quando a instalação terminar, reinicie o Eclipse.

Configurar o ASDT e o MTASC

Escolha Window > Preferences.

Escolha Actionscript2 > Compiler na lista à esquerda.

Na caixa Select Compiler, escolha MTASC.

Active as opções:
Check syntax on Save
Check syntax when a AS file is opened

Na lista à direita, escolha, Actionscript2 > Compiler > MTASC

Na caixa Location of MTASC.exe coloque o caminho para onde descomprimiu o MTASC. Por exemplo: C:\Program Files\mtasc-1.12\mtasc.exe

Neste ecrân, deixe todas as caixas em branco.

Na realidade, iremos utilizar uma ANT task para se encarregar da compilação, e não o próprio ASDT. Esta configuração serve apenas para que possâmos obter validação do nosso código sempre que gravamos o ficheiro actionscript.

Na lista à direita, escolha agora Actionscript 2 > Core Path.

Na caixa Directory of Macromedia’s core classes coloque C:\Documents and Settings\{O SEU NOME}\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Classes . Não se esqueça de mudar {O SEU NOME} para o seu nome de utilizador. Certifique-se que o caminho existe realmente, usando o botão Browse.

Alterar as classes da Macromedia para que possam ser compiladas com o MTASC

O MTASC não suporta #includes, pois esta directiva é desaconselhada e cada vez menos usada, por não apelar a boas práticas de programação (o ideal é que seja criado uma classe por cada ficheiro .as). Algumas classes do SDK do Flash 8 não são compatíveis com o MTASC, por usarem esta directiva.

Para corrigir este problema, basta comentar em cada ficheiro com erro a linha que possui o dito #include. Porém, só deverá fazer isso se for utilizar as classes com problema, como por exemplo, as classes de Tweening.

Para corrigir as classes de Tweening:

Utilize o explorador do window para procurar a pasta C:\Documents and Settings\{O SEU NOME}\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Classes\mx\transitions

Se não consegue ver esta pasta, certifique-se que já instalou o Flash 8 e que tem activa a opção do explorador do windows de ver as pastas escondidas e de sistema.

Abra todos os ficheiros nesta pasta, e comente ou apague a linha #include “Version.as” em todos os que a tiverem. Ou seja: //#include “Version.as”.

Se durante o seu desenvolvimento obtiver erros de compilação relativamente a alguma outra classe da Macromedia, basta que a abra e que comente a linha descrita anteriormente, e o problema ficará resolvido.

O primeiro projecto Actionscript

Comece por activar a perspectiva de desenvolvimento em Actionscript 2:

Escolha Window > Open Perspective > Other

Escolha Actionscript 2 na lista e clique em OK.

Chega então a altura de criar o primeiro projecto:

Escolha File > New > Project

Abra a pasta Actionscript, escolha New Actionscript 2 Project e clique em Next.

No Project name coloque OlaMundo e clique em Next

Deixe os valores por defeito e clique em Finish.

À direita, no Navigator deverá ter ficado com um projecto chamado OlaMundo. Expanda este projecto, e deverá ter duas pastas: core e src. A pasta core possui as classes do SDK da Macromedia, que definiu na configuração do ASDT, e na pasta src deverá colocar o seu código actionscript.

Dentro a pasta src, crie uma pasta chamada org. Para isso clique com o botão direito sobre SRC, e escolha New > Other > General > Folder, e clique Next. No novo ecrân escreva “org” na caixa Folder name, e clique em Finish.

Faça o mesmo para criar uma pasta chamada riapt dentro da pasta org.

Clique com o botão direito sobre a pasta riapt e escolha New > New Actionscript2 Class.

Na Class name coloque OlaMundo e clique em Finish.

Deverá possuir um novo ficheiro Actionscript, onde irá colocar o seguinte código:

class org.riapt.OlaMundo {

	private var caixaDeTexto:TextField;
	private var scope:MovieClip;

	function OlaMundo(scope:MovieClip){
		this.scope=scope;
	  	scope.createTextField("caixaDeTexto", 1, 50, 50, 100, 100);
  		scope.caixaDeTexto.html = true;
	  	scope.caixaDeTexto.multiline = true;
  		scope.caixaDeTexto.wordWrap = true;
	  	scope.caixaDeTexto.border = true;
	}

	public static function main():Void{
  		var ola:OlaMundo = new OlaMundo(_root);
  		ola.escreve();
	}

	public function escreve():Void{
  		scope.caixaDeTexto.htmlText = "Olá Mundo!";
	}
}

Se preferir, pode descarregar um exemplo deste projecto aqui. Porém, para compilar terá que abrir o ficheiro build.xml e alterar algumas propriedades descritas seguidamente.

Compilação com ANT

O ANT é uma ferramenta para automatizar a compilação. Para compilar o programa anterior, pode utilizar a linha de comandos e chamar o MTASC manualmente, pode utilizar o FlashOut ou o próprio ASDT, mas o método mais confortável é criar uma tarefa ANT que se encarregará de todo o processo de compilação do seu código.

Para tal, crie um ficheiro com o nome build.xml na pasta src do seu projecto.

Clique com o botão direito sobre a pasta src e escolha New > General > File, e clique em Next. No File name coloque build.xml e clique em Finish.

Neste ficheiro deverá colocar o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<project name="olaMundo" default="compileMTASC" basedir=".">

	<description>Build file for olaMundo</description>

	<!-- user modifiable properties -->
	<property name="ASFile" value="org\riapt\OlaMundo.as"/>
	<property name="SWFFile" value="D:\workspace\OlaMundo\bin\OlaMundo.swf"/>
	<property name="classPath" value="D:\workspace\OlaMundo\src"/>
	<property name="MacromediaClassPath" value="C:\Documents and Settings\joao\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Classes"/>
	<property name="additionalParams" value=" -mx "/>

	<!-- trace command -->
	<!--property name="TraceCommand" value="Log.addMessage"/-->
	<!--property name="TraceCommand value="tv.zarate.Utils.Trace.trc"/-->

	<!-- classpath info -->
	<!--property name="additionalClassPath" value="d:\webfuel\onfashion_pt\src\org\asdt\logger"/-->

	<!-- tool info -->
	<property name="mtasc" location="C:\Program Files\mtasc-1.12\mtasc.exe"/>

	<property name="flashplayer" value="C:\Program Files\Macromedia\Flash 8\Players\SAFlashPlayer.exe"/>

	<!-- folder info -->
	<property name="source" location="source"/>
	<property name="deploy" location="deploy"/>

	<target name="compileMTASC">
		<exec executable="${mtasc}" failinhibited_error="true">
			<arg line='-main "${ASFile}" ${additionalParams} -swf "${SWFFile}" -cp "${classPath}"  -cp "${additionalClassPath}" -cp "${MacromediaClassPath}" -version 8 -trace ${TraceCommand} -header 800:600:31'/>
		</exec>
		<exec executable="${flashplayer}" spawn="true">
			<arg value="${SWFFile}"/>
		</exec>
	</target>
</project>

Deverá alterar as seguintes propriedades:

SWFFile: Coloque o caminho completo de onde deseja colocar o seu ficheiro SWF. Confirme que o caminho que escreveu já existe no sistema (i.e. se colocar o ficheiro swf numa pasta bin, certifique-se de que criou a pasta bin primeiro).

classPath: Coloque o caminho completo para a sua pasta src

MacromediaClassPath: Coloque o caminho completo para a pasta das classes da Macromedia no seu sistema.

Mtasc: Coloque aqui o caminho completo para o ficheiro mtasc.exe

Flashplayer: Coloque aqui o caminho completo para o ficheiro SAFlashPlayer.exe que vem com o seu Macromedia Flash 8.

Se tudo estiver bem configurado, está na altura de compilar. Clique com o botão direito sobre o ficheiro build.xml e escolha Run As > Ant Build.

Se ocorrer um erro durante a compilação, deverá ver qual a mensagem na Console, e tentar corrigir o problema – provavelmente enganou-se num dos caminhos.

Se a compilação for bem sucedida, deverá aparecer a mensagem BUILD SUCCESSFUL na Console, e será aberta uma instância do Flash Player com o seu programa.

Criar a biblioteca no Flash

Repare que na linha arg line= possui um parâmetro

–header 800:600:31

Este parâmetro serve para indicar ao MTASC que irá criar um ficheiro SWF de origem.

Porém, provavelmente ser-lhe-á mais útil criar a sua biblioteca, e o aspecto e estrutura dos seus ecrâns utilizando ferramentas visuais. A grande vantagem de utilizar o MTASC é que pode construir a sua biblioteca no Flash, compilar, e depois utilizar o Eclipse para fazer o código. O MTASC encarregar-se-á de injectar o código no SWF que criou no Flash. Para tal, deve alterar o seu build.xml, removendo a expressão -header 800:600:31 da linha “arg line=”.

Deverá então, primeiro construir toda a sua biblioteca e ecrâns no Flash IDE, e compilar com o compilador da Macromedia. A partir daí pode fechar o Flash IDE, e passar a usar somente o Eclipse para escrever a sua aplicação, compilando sempre com o MTASC!

Se não tiver possibilidade de comprar o Flash IDE, ou se preferir utilizar unicamente ferramentas open-source, pode experimentar a ferramenta SWFMill.

Exemplo de um projecto com biblioteca em Flash

Veja este exemplo para ver como deve estruturar o código Actionscript e o FLA de forma a obter o descrito anteriormente.

Compile primeiro o ficheiro OlaMundoComBiblioteca.fla no Flash IDE, para ser construído o SWF com a biblioteca. Depois compile então no Eclipse através do build.xml para injectar o código actionscript.

Object.RegisterClass

O Object.registerClass é uma ténica que serve para associar uma classe actionscript a um objecto previamente desenhado no Flash IDE e colocado na biblioteca.

Para utilizar esta técnica, usando o Flash 8, clique com o botão direito sobre o objecto na biblioteca a que deseja poder associar uma classe e escolha Linkage.

Na secção Linkage, escolha “Export for Actionscript” e “Export in first frame”.

No identifier deve meter o nome da classe que deseja ligar a este MovieClip, neste caso org.riapt.BotaoDeTeste.

No Eclipse, para cada classe que deseja linkar a um símbolo deve colocar o seguinte código:

public static var symbolName:String = "org.riapt.OlaMundoComBiblioteca";
private static var symbolLinked= Object.registerClass(symbolName, OlaMundoComBiblioteca);

No SymbolName deve colocar o nome do Identifier que escreveu no Flash IDE.

No segundo argumento do SymbolLinked deve colocar o nome da classe que deseja linkar.

Alguns pontos a reter

Seguidamente, é apresentado o código do ficheiro OlaMundoComBiblioteca.as:

import org.riapt.BotaoDeTeste;
class org.riapt.OlaMundoComBiblioteca extends MovieClip {

	//
	// Grupo: No Stage
	//
	private var caixaDeTexto:TextField;
	private var botaoDeTeste:BotaoDeTeste;

	//
	// Grupo: Registo
	//
	public static var symbolName:String = "org.riapt.OlaMundoComBiblioteca";
	private static var symbolLinked= Object.registerClass(symbolName, OlaMundoComBiblioteca);

	function OlaMundoComBiblioteca() {	}

	function onLoad() {
		caixaDeTexto.text="Olá Mundo, agora com biblioteca!";
		botaoDeTeste.setTexto("Continuar");
	}

	public static function main():Void {  }

}

Observando o código anterior, notam-se algumas diferenças em relação ao exemplo OlaMundo.as.

Antes de mais, não existe código no main(), ou seja, não é preciso instanciar a classe OlaMundoComBiblioteca pois no Flash IDE foi colocado no Stage um simbolo que está linkado à classe OlaMundoComBiblioteca. Como está no Stage, o símbolo é instanciado quando o SWF é arrancado, e devido à sua ligação a uma classe (através do Object.registerClass), a classe é instanciada automaticamente.

Outra diferença, é que a classe OlaMundoComBiblioteca extende a classe MovieClip. Isto é necessário, pois se esta classe corresponde a um símbolo no Stage, então “será” um MovieClip, possuindo todas as características e métodos de um MovieClip. A classe é o símbolo que está no stage.

É ainda importante realçar que não existe código no construtor da classe, mas sim no método onLoad(). Isto acontece porque no momento em que o construtor é corrido, os objectos que estão dentro desta classe ainda não foram instanciados (i.e. o BotaoDeTeste ainda não foi instanciado). A solução é colocar o código dentro do método onLoad(), que corresponde ao evento que indica que todos os objectos que pertencem à classe em questão já foram carregados e instanciados.

No Flash IDE não existe nenhum código, nem deve existir… excepto algumas linhas que estão na primeira frame, com o seguinte código:

var a = mx.utils.Delegate;
var c = mx.remoting.Service;
var d = mx.rpc.RelayResponder;
var e = mx.rpc.ResultEvent;
var f = mx.rpc.FaultEvent;
var g = mx.remoting.PendingCall;
var h = mx.controls.TextInput;
var j = mx.managers.PopUpManager;

As classes aqui referidas estão já pré-compiladas pela Macromedia, pelo que o MTASC não as volta a compilar, nem as insere na aplicação (existe, porém, um parâmetro do MTASC para forçar a compilação destas classes, mas pessoalmente prefiro usar esta técnica).
Este código foi criado no Flash IDE para garantir que essas classes são mesmo inseridas no SWF. Claro que para este exemplo estas classes não são necessárias, tendo sido apenas lá colocadas a título explicativo.

Algumas dicas

Aconselho a que seja dada uma vista de olhos à classe mx.utils.Delegate, que deve ser usada para definir qual o scope em que deverá ser corrida determinada função. É habitual a utilização de Delegates quando se pretende associar uma função a um evento, definindo o scope em que a função deverá correr.

Nunca deve ser colocado nenhum código na timeline, exceptuando o anteriormente referido para importar as classes pré-compiladas.

Sugiro que sempre que possível tente fazer as suas animações através de actionscript utilizando as classes de Tween do Flash, ou usando um pacote de animação como o AnimationPackage ou o Fuse Kit.

Para que uma aplicação fique bem desenhada, é imperativo a utilização de eventos. Sugiro que sempre que indicado as classes sejam EventDispatchers, através do comando EventDispatcher.initialize(this);. Consulte a classe ArpForm da framework ARP do Aral Balkan.

Outras ferramentas e metodologias para enriquecer o ambiente de desenvolvimento

Posteriormente será explicado noutros tutoriais como adicionar mais ferramentas ao seu ambiente de desenvolvimento para obter ainda mais produtividade. Mas entretanto fica aqui uma lista das ferramentas e metodologias indispensáveis para reforçar o desenvolvimento:

• ARP ou Cairngorm – frameworks MVC de desenvolvimento de RIAs (open-source)
• CVS ou SVN – sistemas de controlo de versões e trabalho colaborativo. Pessoalmente, uso o CVSDude.
• Xray ou ASLogger – sistemas de debugging e logging (open-source)
• ASWing – framework de componentes visuais, semelhante ao JAVA Swing (open-source)
• AMFPHP ou openAMF – implementações de Flash Remoting, a primeira para PHP e a segunda para JAVA (open-source)
• Service Capture – “Packet Sniffer” que permite interceptar e interpretar objectos AMF trocados por Flash Remoting (comercial, cerca de 30€)

Em resumo

Comparar o desenvolvimento dentro do Flash IDE com a solução aqui apresentada, é como comparar um triciclo a um Ferrari. Construir aplicações complexas recorrendo a boas práticas dentro do Flash IDE é uma tarefa penosa ou mesmo impossível.
As técnicas aqui apresentadas alargam o horizonte das possibilidade do Flash, e permitem que técnicas aplicadas ao desenvolvimento maduro de aplicações extensas e robustas, normalmente técnicas de programadores JAVA, sejam reutilizadas em Actionscript.

A partir deste ponto, inserir uma framework MVC ao desenvolvimento em Flash é algo relativamente semelhante ao que se faz em JAVA.

Os passos que deverá tomar em seguida, deverão ser:

• aprender a fazer debugging com o Xray
• criar uma aplicação cliente-servidor com base de dados, utilizando Flash Remoting (AMFPHP, openAMF, ou outra) para a comunicação
• recorrer a uma framework MVC como a ARP ou a Cairngorm para criar aplicações mais robustas
• configurar o eclipse para utilizar CVS ou SVN, possibilitando o trabalho colaborativo

Para mais informações, consulte o site da comunidade OSFlash.