Saio agora pouco um path da Away3D muito interessante, que possibilita você instalar e usar a nova tecnologia sem muito esforço.
Você vai precisar de:
Adobe Flex SDK 4.5.0.19786 ou superior
flashplayer_inc_playerglobal_022711.swc
molehill_away3d_path.zip
e Flash Develop
A versão de incubadora do flash player
Qualquer duvida vejam a vídeo aula do blog que originou essa matéria (em inglês) http://johnlindquist.com/2011/02/28/quickstart-for-molehill-and-away3d/
Instalação do player para Molehill
- Desinstale o flashplayer atual (Painel de controle / desinstalar programa)
- Instale o novo flashplayer
- Extraia o Adobe Flex SDK para uma pasta qualquer no C: de preferência.
- Pegue o arquivo flashplayer_int_playerglobal_022711.swc e renomeie para playerglobal.swc
- Vá na pasta c:\FlexSDK4.5.0.19786\frameworks\libs\player
- Nela você cria uma pasta e dê o nome de 10.1
- Cole o playerglobal.swc nela
- Extraia os arquivos do molehill_away3d_path.zip e cole os na pasta c:\FlexSDK4.5.0.19786
- Notara que ele irá pedir para substituir alguns arquivos, marque SIM para todos
- Crie um novo projeto AS3 no Flash Develop
- Na árvore do projeto clique no index.html para abrir o arquivo e olhe a linha 19
bgcolor: "#FFFFFF", // <- linha 19. nao esqueca a virgula wmode: "direct" // <- parametro para molehill
- Salve e feche esse arquivo
- Clique em Project e escolha Properties
- Deixe como na imagem
- Para p "Custom Command" clique em Edit e digite bin/index.html
- Clique em "Compiler Options"
- Clique do lado de Aditional Compiler Options vai aparecer um botão com "..." clique nele
- Digite essa linha:
- Dê Ok
package
{
// Primeiro de tudo os imports, que são os componentes usados
// pelo Away3D, utilizando uma IDE como o FlashDevelop essas
// linhas são preenchidas altomaticamente então não se preocupe
// com elas.
import away3d.lights.DirectionalLight;
import away3d.materials.ColorMaterial;
import away3d.primitives.Cube;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import away3d.containers.View3D;
import flash.text.TextField;
import flash.utils.setInterval;
/**
* Teste para Away3D vs 4 e Molehill
* para o blog http://tutoriaisedesenvolvimento.blogspot.com/
*
* base
* http://ultravisual.co.uk/blog/2011/03/22/more-molehill-away3d-fun/
* http://johnlindquist.com/2011/02/28/quickstart-for-molehill-and-away3d/
*
* @author Marcos Augusto Bitetti ( marcosbiteti [at] gmail.com )
*/
public class Main extends Sprite
{
// criamos alguns objetos, para o Away3D. O único realmente
// importante é o View3D.
// o objeto view é onde ocorre a renderização 3D
private var view:View3D;
// vamos animar um cubo
private var cube:Cube;
// um campo de texto apenas para exibir estatísticas
private var inf:TextField;
// nota: aos iniciantes, essas são variáveis de controle
// elas não são os objetos que seus nomes sugerem
// mas iremos crialos e adicionalos à elas adiante
/***
* Este é um construtor, aqui o nosso filme se inicia.
* Usamos ele para definir alguns valores básicos mas nada
* realmente visual é bom fazer aqui, isto porque nosso objeto
* acabou de ser criado, mas ainda não esta no palco!
***/
public function Main():void
{
// o Flashdevelop já cria essas linhas por padrão
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
/***
* Como o nome já diz aqui iniciaremos o nosso filme.
* todo o necessário para a Away3D vem agora.
***/
private function init(e:Event = null):void
{
// remove evento, essa linha também é colocada pelo FlashDevelop
removeEventListener( Event.ADDED_TO_STAGE, init );
// Primeiro vamos dizer que o swf não deve sofrer alteração no seu
// formato (largura x altura), para não haver distorção
stage.scaleMode = StageScaleMode.NO_SCALE;
// em seguida alinhamos o swf no canto esquerdo da janel
stage.align = StageAlign.TOP_LEFT;
// criamos nossa view
view = new View3D();
// e adicionamos ela no palco
addChild(view);
// vamos criar uma luz
var light:DirectionalLight = new DirectionalLight(0, -1, 1);
// vamos dar uma cor para ela, quanto mais pura for a cor mais
// forte a fonte de luz irá aparecer
light.color = 0xaaaa30;
// pronto, adicionamos ela na cena.
// nota: o objeto view (View3D) possui uma cena incorporada e nela
// inserimos os objetos.
view.scene.addChild(light);
// vamos criar um material, na versão 4 da Away3D tudo que precisamos
// é de um ColorMaterial.
// Damos a cor 0xff0000 (vermelho) e o alfa 1 (opaco);
var mat:ColorMaterial = new ColorMaterial(0xff0000, 1);
// definimos o valor da cor specular (brilho)*/
mat.specular = 1.0;
// definimos a quantidade de cor ambiente que afeta o objeto
// em geral considere isso a luz neutra do ambiente
mat.ambient = 0.6;
// geralmente a cor ambiente é um cinza (luz branca tenue)
mat.ambientColor = 0x555555;
// e adicionamos a luz que criamos anteriormente ao material
// sem isso ele não renderiza a luz
mat.lights = [light];
// nota: até aqui é muito familiar aos programas 3D, só que
// setamos os valores na mão no lugar de potenciômetros
// agora criamos o cubo
cube = new Cube(mat);
// e o colocamos na cena
view.scene.addChild(cube);
// agora um campo de texto para exibir dados
inf = new TextField();
// setamos a cor do texto para branco
inf.textColor = 0xffffff;
// adicionamos ao palco, como ele esta sendo inserido após
// o view ele vai aparecer imediatamente acima da vista 3D
// pois o flash sobrepões os objetos em camadas
addChild(inf);
// agora registramos o evento ENTER_FRAME e apontamos a
// função anim nele. Toda vez que um frame for atualizar
// essa função sera chamada.
addEventListener( Event.ENTER_FRAME, anim );
// criamos também uma chamada à função updateFramerate
// para atualizar o contador de quadros.
// ela sera disparada a cada 1/10 de segundo (1 seg = 1000)
setInterval( updateFramerate, 100 );
}
/**
* Esta é a função que será chamada a cada frame (30 no nosso swf)
* por padrão quando usamos o sistema de eventos da AS3 ele manda
* sempre uma cópia do evento para a função.
* @param e
*/
private function anim( e:Event ):void
{
// só para ilustrar vamos rodar o Cubo pelos seus eixos
// ele vai fazer um movimento semelhante a um gimbau
cube.rotationY += 5;
cube.rotationZ += 2;
cube.rotationX += 3;
// agora atualizamos a view para aparecer nossa imagem
view.render();
// incrementamos o contador de frames para vermos a performance
frm ++;
}
/**
* NOTA: Daqui em diante não é importante para usar Molehill
*/
// ** variáveis de apoio **
// contador de frames desenhados
private var frm:int = 0;
// marcador de tempo
private var oTime:Date = new Date();
/**
* Atualiza o mostrador de framerate
*/
private function updateFramerate():void
{
// t é igual a data atual
var t:Date = new Date();
// pegamos a diferença em milisegundos entre a data atual
// e oTime que é a ultima data analizada e jogamos em d
var d:Number = t.getTime() - oTime.getTime();
// colocamos em oTime a data atual para ser usada na próxima vez
oTime = new Date();
// calculamos a quantidade de frames por segundo
var fr:Number = frm * (1000 / d);
// jogamos no campo de texto inf
inf.text = fr.toFixed(2).toString() + " / " + stage.frameRate ;
// zeramos o contadoe de frames para começar o processo de novo
frm = 0;
// nota: é comum programadores usarem nas funções que são
// chamadas por setInterval uma função chamada
// updateAfterEvent() no entanto não há necessidade
// de usala aqui já que ela forçaria uma atualização
// desnecessária da tela, afinal o framerate já é bem
// alto, não precisa gastar processamento atoa.
}
}
}
Arquivos do tutorial
http://www.4shared.com/file/it_S0Wwe/molehill_tutorial.html
Nota sobre o framerate
Em 99,9% dos casos uma boa taxa de quadros (framerate) não deve ser superior a 30fps.
Usamos 60fps nesse tutorial com o fim de analizar a performace.
Nenhum comentário:
Postar um comentário