Nesse tutorial vamos trabalhar com Tweenlite + Papervision, para trabalhar com esse esquema é bastante simples, basta importar as classe do Tweenlite e + Papervision para o nosso projeto, que ficará da seguinte forma :

Papervision a pasta : org
O link para baixar as classes do papervision clique aqui.
Tweenlite a pasta : gs
O link para baixar as classes do Tweenlite clique aqui.
Para mais detalhes sobre papervision veja os posts:
TUTORIAL PAPERVISION 3D 2.0
PAPERVISON 3D – OBJECTS PRIMITIVE
PAPERVISION 3D – MATERIALS(MATERIAIS)
Para mais detalhes sobre Tweenlite veja os posts:
TWEEN LITE
Para desenvolver esse tutorial vou trabalhar com flash IDE(bom e velho cs3) + flash develop, mas você pode utilizar só o flash, jogando direto no fla o código ou criando um arquivo AS3, mas para códificação eu indico o flashdevelop.
Voltando para na nossa ide vou criar três movieClips: letraM, letraA, letraR; para os três vou utilizar o mesmo nome para o linkage: letraM, letraA, letraR, como na imagem abaixo:

Vou criar uma class “Interatividade.as” e agora vamos para o código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | package { import flash.display.Scene; import flash.display.Sprite; import flash.events.Event; import org.papervision3d.view.Viewport3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.materials.MovieAssetMaterial; import org.papervision3d.objects.primitives.Plane; import gs.TweenLite; import gs.easing.*; /** * ... * @author Fellyph Cintra * @link http://fellyph.com.br/blog/ * */ public class Interatividade extends Sprite{ // criar os objetos chave para trabalhar com papervision private var _viewport :Viewport3D; private var _cena :Scene3D; private var _camera :Camera3D; // meu renderizador private var _renderizador :BasicRenderEngine; // os planos que eu vou trabalhar private var _m :Plane; private var _a :Plane; private var _r :Plane; //os materiais que vão compor meus planos(Plane) private var material_m :MovieAssetMaterial; private var material_a :MovieAssetMaterial; private var material_r :MovieAssetMaterial; // o construtor da minha classe que executar o código public function Interatividade() { _viewport = new Viewport3D(450, 300, false, true); addChild(_viewport); // inicializando os objetos chave; _cena = new Scene3D(); _camera = new Camera3D(); _renderizador = new BasicRenderEngine(); // inicializando meus materiais "MovieAssetMaterial" lembrando // MovieAsset trabalha com o linkage dos movieclips criados no // meu arquivo ".fla" material_m = new MovieAssetMaterial("letraM", true, true); material_a = new MovieAssetMaterial("letraA", true, true); material_r = new MovieAssetMaterial("letraR", true, false); //adicionando os materiais a cada respectivo Plane _m = new Plane(material_m, 100, 94, 8, 8); _a = new Plane(material_a,100, 94, 8, 8); _r = new Plane(material_r, 100, 94, 8, 8); //Adicionando o Plane a Cena _cena.addChild(_m); _cena.addChild(_a); _cena.addChild(_r); //Abaixo vou trabalhar com as propriedades dos meus planos //para em seguida executar a animação _m.x = 10; _a.x = 100; _r.x = 200; _m.rotationY = 90; _a.rotationY = 90; _r.rotationY = 90; _m.rotationX = 90; _a.rotationX = 90; _r.rotationX = 90; // Adicionando o evento ENTER_FRAME para renderizar meu arquivo addEventListener(Event.ENTER_FRAME, onRender); // E por fim executamos as animações nos planos // Revisando: // TweenLite.to( objeto a ser animado, tempo , {propriedades da animação}); TweenLite.to(_m, 4, { rotationX:0, rotationY:0, z:-500, ease:Expo.easeOut } ); TweenLite.to(_a, 4, { rotationX:0, rotationY:0, z: -400, ease:Expo.easeOut , delay:0.3 } ); TweenLite.to(_r, 4, { rotationX:0, rotationY:0, z:-300, ease:Expo.easeOut , delay:0.6} ); } public function onRender(e:Event):void { //renderizando _renderizador.renderScene(_cena, _camera, _viewport); } } } |
Para testar nosso filme temos que atrelar nossa classe ao arquivo fla.
no meu exemplo eles estão na mesma pasta, fla e as então utilizamos como na imagem abaixo

o código acima já está comentado, a estrutura é a mesma inicializa os objetos, aplica os materiais aos Objetos primitivos, adiciona os objetos a cena e por fim renderiza o filme. O adicional é que no final do construtor utilizamos a Classe TweenLite. E o resultado que temos é o seguinte :
Lembrando a classe de Tween sem a renderização não funciona.
Esse post é bastante simples, vamos tentar complicar nos próximos posts.
Até breve…
Bom tutorial
É incrivel o que pode ser feito com a pv3d mesmo.. muito bala.
Notei que tu usa o flashdevelop, bom programa
olha só, ta afim de fazer uma parceria? podemos trocar um banner. também tenho um blog sobre flash, as3, etc..
abração