Scite + AS3 + Flex-SDK + PaperVision3D

Scite se tornou meu editor favorito por ser altamente customizável e tornando-o um editor multilinguagem muito bom. Baseado neste aspecto do scite resolvi agora começar a estudar um pouco de AS3, o Flex e o Papervision usando o scite para editar o código ao invés de utilizar o editor embutido do Flash.

A proposta aqui é utilizar o compilador do flex para criar os arquivos SWF sem precisar do flash, deixando o flash somente para edição gráfica do projeto. Para isso é necessário que tenhamos o Flex SDK que pode ser encontrado em:

FLEX 3 SDK : http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk

Dentro do pacote nos iremos encontrar os compiladores, o framework do Flex, e os players 9 e 10 (Flex 3.4 SDK) – o pacote tem aproximadamente 200MB descompactado.
O arquivo que procuramos é o mxmlc.exe localizado dentro de “bin”, este é o arquivo que irá compilar nosso arquivo “.as” e transformá-lo em um “swf”. Se quiser comprovar o funcionamento do mesmo é só arrastar um arquivo “.as” para o executável e ele irá criar o swf baseado neste script.

O Segundo passo é preparar o SciTE, iremos necessitar o SciTE e do arquivo API e .properties para que o SciTe tenha suporte “auto-completion” para AS3.
O SciTE pode ser baixado gratuitamente em:

SciTE(2.01) : http://www.scintilla.org/SciTE.html

Os arquivos api e properties podem ser encontrados aqui:

SciTE AS3 : http://arthurdick.com/projects/as3/

Para utilizar a api AS3 pro Scite é necessário adicionar um linha no seu arquivo de configuração:

import actionscript
(supondo que o seu arquivo actionscript.properties está no mesmo diretorio que o SciTE caso contrário use: “import diretorio/actionscript” onde “diretorio” é onde seu arquivo actionscript.properties está)

Pronto neste ponto você já é capaz de utilizar autocompletion ao editar arquivos AS3.
Agora a parte importante: Fazer o SciTE utilizar o mxmlc.exe para compilar o script “.as”. No meu caso eu adicionei algumas linhas no arquivo actionscript.properties:

#location of FlashPlayers
flashplayer10=caminho_para_o_flex_sdk_3.4\runtimes\player\10\win\FlashPlayer.exe
flashplayer9=caminho_para_o_flex_sdk_3.4\runtimes\player\win\FlashPlayer.exe

#location of mxmlc
mxmlc=caminho_para_o_flex_sdk_3.4\flex_sdk_3.4\bin\mxmlc.exe

e editei algumas linhas de ações do menu:

#disable default flash commands
command.go.subsystem.*.as=1
command.compile.$(file.patterns.actionscript)=$(mxmlc) $(FileNameExt)
command.go.$(file.patterns.actionscript)=$(flashplayer10) $(FileName).swf

Pronto! Agora é só usar Crtl+F7 para compilar o arquivo e F5 para executá-lo usando o flashplayer 9 ou 10.

Depois de fazer esse “trajeto” todo eu ainda queria o papervision, o qual quero muito utilizar:

Papervision : http://code.google.com/p/papervision3d/

Neste ponto já é fácil incluir este framework junto com o Flex, só é preciso baixar o arquivo compilado .swc (Papervision3D_2.0.883.swc na data deste post) e copiá-lo para dentro do diretório frameworks\libs (que também contém o framework do flex)

So far so good…
Neste ponto o SciTE já é capaz de compilar scripts AS3 sem precisar do flash e utilizar o framework PaperVision3D. Só pra testar utilizei o mesmo script que já havia postado aqui e funcionou normalmente.

Começando com o Papervision3d.

O papervision3d é uma engine open source para o Flash, é um projeto mantido por um pequeno grupo de desenvolvedores e está disponível em http://code.google.com/p/papervision3d/ .

Na página do projeto encontra-se respostas para algumas perguntas frequentes e também um roteiro para instalação e utilização do papervision no flash, e é isto o que será tratado neste post.

Baixar a ultima versão do papervision e configurar o Flash

No roteiro, a versão do papervision é baixada via SVN, então vamos fazer o mesmo, assim teremos sempre a versão atualizada do papervision. Primeiramente é preciso baixar e instalar um cliente SVN, utilizaremos o mesmo: “tortoise for windows” ( http://tortoisesvn.tigris.org/ ).

Após instalado, provavelmente será preciso reiniciar o computador. Ao retornar ao sistema você perceberá que o cliente SVN se integra com o Explorer, então para usá-lo siga estes passos.

1. Crie um novo diretório/pasta(ex:”snv”) e clique com o botão direito do mouse e escolha  “svn checkout”.
   
2. Na janela que irá aparecer cole este endereço: http://papervision3d.googlecode.com/svn/trunk/
   
3. Ao clicar em “OK” o tortoise irá baixar o papervision para o seu computador.
4. Depois de baixar o papervision é necessário configurar o Flash.
5. Abra o Flash, vá em “Edit>Preferences>Actionscript” e clique em “Actionscript 3.0 settings”
   
6. Clique na pasta indicada na imagem acima e navegue até a pasta onde você baixou o papervision (vide 1) e siga encontre o diretório “as3/trunk/src” e clique em OK.
7. Pronto, já temos o papervision adicionado ao Flash, agora vamos testar: Abra um novo documento no flash.
8. No Flash com o novo documento aberto, olhe no painel “Preferences” do nosso documento e no campo “Class” (Flash CS4) digite “Cubo” sem aspas, este será o nome da classe que utilizaremos como exemplo para o teste.
   
9. Agora salve o documento onde preferir.
10. Em seguida crie um novo documento, dessa vez um novo arquivo actionscript (new Actionscript File) e salve-o com o nome “Cubo” no mesmo lugar onde foi salvo o documento flash que criamos anteriormente.
11. Agora volte ao documento flash e clique no lápis ao lado da caixa de texto onde adicionamos a nome “Cubo” no item 8. O arquivo “Cubo.as” deverá ser aberto.
12. Com o “Cubo.as” aberto cole este código e salve-o.
13. Salve o flash e o script e execute o movie(crtl+Enter), tudo deve estar funcionando, bom agora é só ir experimentando outros exemplos. Have fun! =)

Se você seguiu os passos corretamente, verá esta animação: Paper Vision Cube (clique com o mouse e arraste para mover o cubo).

Referências:

http://code.google.com/p/papervision3d/wiki/Getting_Started_FAQ

http://pv3d.org/2009/01/15/dragging-an-object-to-rotate/