Table of contents
- How To Use FIVe3D In Flex
- How To Use FIVe3D And Tweening in Flex
In a previous article I explained how to use FIVe3D with Flex and because fl.motion is not included into the Flex Framework we had to find out a workaround. I commented out the lines that referenced fl.motion but Kelvin Luck found another way: “copy the classes from Flash CS3 Actionscript framework into the project”. So this time the FIVe3D framework is untouched and fl.motion is included into the project.
Lets skip the intro and get into it… In this article I added some tweening to the example from the previous article. The framework I used are:
- TweenLite - http://blog.greensock.com/tweenliteas3/
- fl.transition - taken from Flash CS3 Actionscript 3 Framework
- Tweener - http://code.google.com/p/tweener/
These are the tree tweening frameworks we will add but from all of them TweenLite seems to be the easiest to use.
There is no visible difference between TweenLite, fl.transition and Tweener but in the future I may add some benchmarks.
Now take a look at the code and you can choose what tweenning library you’ll use.
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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[#dddddd,#dddddd]" layout="absolute" width="500" height="600" creationComplete="start()"> <mx:UIComponent id="mainUI" width="500" height="500"/> <mx:Script> <![CDATA[ import five3D.typography.HelveticaBold; import five3D.utils.Drawing; import five3D.display.Scene3D; import five3D.display.DynamicText3D; import five3D.display.Shape3D; import five3D.display.Sprite3D; import gs.TweenLite; import caurina.transitions.Tweener; import fl.transitions.Tween; // we will use Exponential.easeOut // function in tweening import mx.effects.easing.Exponential; private var scene3D:Scene3D; private var sprite3D:Sprite3D; private var star3d:Shape3D; private var flexerWord:DynamicText3D; private var hiWord:DynamicText3D; // start drawing private function start():void { // create the scene scene3D = new Scene3D(); scene3D.x = 250; scene3D.y = 250; // create the round rectangle/square sprite3D = new Sprite3D(); sprite3D.graphics3D.beginFill(0x000000); sprite3D.graphics3D.drawRoundRect(-150,-150,300,300,40,40); sprite3D.graphics3D.endFill(); // rotate the round rectangle/square randomly sprite3D.rotationX = Math.random()*100-50; sprite3D.rotationY = Math.random()*100-50; sprite3D.rotationZ = Math.random()*100-50; // create the star star3d = new Shape3D(); Drawing.star(star3d.graphics3D,20,60,50,0,0x6699cc); star3d.x = 120; star3d.y = -80; // rotate the start star3d.addEventListener(Event.ENTER_FRAME, function (event:Event):void { // rotate on Z axe event.target.rotationZ++; } ); // "fxr" word flexerWord = new DynamicText3D(HelveticaBold); flexerWord.size = 45; flexerWord.color = 0xFFFFFF; flexerWord.text = "Fxr"; flexerWord.x = 88; flexerWord.y = -110; // "hi" word hiWord = new DynamicText3D(HelveticaBold); hiWord.size = 100; hiWord.color = 0x555555; hiWord.text = "Hi!"; hiWord.x = -112; hiWord.y = -34; // click event on the round rectangle/square sprite3D.addEventListener(MouseEvent.CLICK,handleSquareClick); sprite3D.mouseChildren = false; sprite3D.buttonMode = true; // adding scene to the main UI component mainUI.addChild(scene3D); // adding round rectangle/square to the scene scene3D.addChild(sprite3D); // adding the start to the round rectangle/square sprite3D.addChild(star3d); // adding "fxr" word to the round rectangle/square sprite3D.addChild(flexerWord); // adding "hi" word to the round rectangle/square sprite3D.addChild(hiWord); } private function handleSquareClick(event:MouseEvent):void { // rotate the round rectangle/square randomly // all 3 axes switch (whichTween.selectedValue) { case "notween": { // no tween event.target.rotationX = Math.random()*100-50; event.target.rotationY = Math.random()*100-50; event.target.rotationZ = Math.random()*100-50; break; } case "tweenlite": { // using TweenLite TweenLite.to( // target object event.target, // duration 1.5, { // target property: value rotationX:Math.random()*100-50, // target property: value rotationY:Math.random()*100-50, // target property: value rotationZ:Math.random()*100-50, // easing function ease:Exponential.easeOut } ); break; } case "tweener": { // using Tweener Tweener.addTween( // target object event.target, { // target property: value rotationX:Math.random()*100-50, // target property: value rotationY:Math.random()*100-50, // target property: value rotationZ:Math.random()*100-50, // duration time:1.5, // easing function transition:"easeoutexponential" } ); break; } case "fltransition": { // using fl.transition from Flash // CS3 Actionscript 3 Framework var xTween:Tween = new Tween( event.target /* target object */, "rotationX" /* target property */, Exponential.easeOut /* easing function */, event.target.rotationX /* start point */, Math.random()*100-50 /* end point */, 1.5 /*duration in seconds */, true /* use seconds */ ); xTween.start(); var yTween:Tween = new Tween( event.target /* target object */, "rotationY" /* target property */, Exponential.easeOut /* easing function */, event.target.rotationY /* start point */, Math.random()*100-50 /* end point */, 1.5 /*duration in seconds */, true /* use seconds */ ); yTween.start(); var zTween:Tween = new Tween( event.target /* target object */, "rotationZ" /* target property */, Exponential.easeOut /* easing function */, event.target.rotationZ /* start point */, Math.random()*100-50 /* end point */, 1.5 /*duration in seconds */, true /* use seconds */ ); zTween.start(); break; } } } ]]> </mx:Script> <mx:RadioButtonGroup id="whichTween"/> <mx:RadioButton x="10.0" y="572" label="No Tween" groupName="whichTween" value="notween" selected="true"/> <mx:RadioButton x="105" y="572" label="TweenLite" groupName="whichTween" value="tweenlite"/> <mx:RadioButton x="202" y="572" label="fl.transition" groupName="whichTween" value="fltransition"/> <mx:RadioButton x="307" y="572" label="Tweener" groupName="whichTween" value="tweener"/> </mx:Application> |
This is all for now… the source files are available to download.
Some additional resources regarding tweening: TweenLite, Tweener, TweenLite Basic Tutorial, Tweens tutorial and fl.transition at LiveDocs
| ||
|
Tags: 3D, ActionScript, five3d, Tweening
This post was written by Andrei Ionescu
Views: 5484
Articles
Hi, just try a simple test: make your SWF with a low frame-rate and test it with the Tween frameworks above.
Erick, I tried what you said and of course if you lower the frame rate the transition will be jerky but the processor will have less work to do and if you will rise the frame rate the transition will be smoother but the processor will have more load. That is because everything in flash player is based on the frame rate.
Do you know of any way to change the pivot(rotation) point or a Sprite3D object? Everything wants to rotate around a middle point.
I’m trying to add a number of objects to a scene and rotate them individually but on an edge axis. I’m hoping he’ll have documentation available soon, it’s been tough to find information on the class.