examples
AsyncCommand with Robotlegs, Signals, Flight, MinimalComps
I watched Jesse Warden’s presentation at FATC over the weekend on Gaia + Robotlegs. It was a great presentation and he was a bit rushed so he didn’t get to explain the importance of his AsyncCommand slide. I threw this together to show my typical approach:

Watch the AsyncCommand Video Tutorial
Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.
*note – I recorded in 1280×720 to upload to YouTube HD hosting, but they rejected it since it’s a little over 10 minutes.
Libraries used:
Robotlegs
Signals
signals-extensions-CommandSignal
Flight
MinimalComps
Yahoo Astra WebAPIs
TweenMax – Tweening a timeline (Advanced Tweening)
It’s been a really busy week doing a lot of interactive motion work, so no time to work on my Theme Designer, but here’s a little trick I picked up this past week from Jack. Tweening a timeline allows you to create multiple tweens and then apply one ease to the whole group. Neat trick, eh?
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 | package { import com.greensock.TimelineMax; import com.greensock.TweenMax; import com.greensock.easing.Linear; import com.greensock.easing.Quart; import flash.display.Sprite; /** * @author John Lindquist */ [SWF(width="900", height="480", frameRate="31")] public class EasingATimeline extends Sprite { private var square:Sprite; private static const STEP_DURATION:Number = 1; public function EasingATimeline() { square = new Sprite(); square.graphics.beginFill(0xcc0000); square.graphics.drawRect(0, 0, 50, 50); square.graphics.endFill(); square.x = 100; square.y = 50; addChild(square); //set all the eases of your steps to Linear.easeNone var step1:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 700, y: 50, ease: Linear.easeNone}); var step2:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 700, y: 350, ease: Linear.easeNone}); var step3:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 100, y: 350, ease: Linear.easeNone}); var step4:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 100, y: 50, ease: Linear.easeNone}); var timeline:TimelineMax = new TimelineMax(); timeline.append(step1); timeline.append(step2); timeline.append(step3); timeline.append(step4); //pause your timeline timeline.pause(); //tween your timeline with whatever ease you want TweenMax.to(timeline, timeline.totalDuration, {currentTime: timeline.totalDuration, ease: Quart.easeInOut, repeat: -1}); } } } |
Robotlegs + Flight + Union Platform
So, I was distracted from finishing my FDT theme generator by a discussion on the Robotlegs mailing list suggesting the possibility of merging Robotlegs with Flight. It sounded like an interesting challenge, so the above chat room is my initial attempt at it. Go ahead and click the “Connect” button to try it out!
The full source code is here:
http://github.com/johnlindquist/flight-demos/tree/master/FlightAndRobotLegsUnion/ (if you’re not familiar with git, there’s a download button on that page which will download all the source. It’s an FDT project, so you’ll have to fiddle with it a bit to get it set up in whatever environment you’re using)
I’m considering making a beast of a tutorial (probably around a half hour) explaining how this all links together, but I have to finish my FDT Theme generator first!
Huge thanks to the Union Platform for providing the test chat service that doesn’t require an API key!
MorphController – Mighty Morphing Papervision3D
I’ll do an in-depth tutorial on the MorphController later. I just wanted to get this up before I go to sleep.
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 | package { import flash.events.Event; import gs.TweenMax; import gs.easing.Elastic; import org.papervision3d.core.controller.MorphController; import org.papervision3d.core.geom.TriangleMesh3D; import org.papervision3d.events.FileLoadEvent; import org.papervision3d.lights.PointLight3D; import org.papervision3d.materials.shadematerials.EnvMapMaterial; import org.papervision3d.objects.parsers.DAE; import org.papervision3d.view.BasicView; [SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")] public class MightyMorphingPapervision3D extends BasicView { [Embed(source="assets/cached.dae", mimeType="application/octet-stream")] private var cachedAsset:Class; [Embed(source="assets/twisty.dae", mimeType="application/octet-stream")] private var twistyAsset:Class; [Embed(source="assets/235.jpg")] private var textureAsset:Class; private var cached:DAE = new DAE(); private var twisty:DAE = new DAE(); private var dummyMorph:TriangleMesh3D; private var cachedChild:TriangleMesh3D; private var twistyChild:TriangleMesh3D; private var morphController:MorphController; private var light:PointLight3D; private var tweenDummy:Object; public function MightyMorphingPapervision3D() { super(900, 480); cached.addEventListener(FileLoadEvent.LOAD_COMPLETE, cached_loadCompleteHandler); cached.load(new cachedAsset()); } protected function cached_loadCompleteHandler(event:Event):void { twisty.addEventListener(FileLoadEvent.LOAD_COMPLETE, twisty_loadCompleteHandler); twisty.load(new twistyAsset()); } protected function twisty_loadCompleteHandler(event:Event):void { cached.scale = 50; twisty.scale = 50; cachedChild = cached.getChildByName("pSphere1", true) as TriangleMesh3D; twistyChild = twisty.getChildByName("pSphere1", true) as TriangleMesh3D; dummyMorph = cachedChild.clone() as TriangleMesh3D; dummyMorph.scale = 50; light = new PointLight3D(); light.x = -1000; light.y = 1000; var material:EnvMapMaterial = new EnvMapMaterial(light, new textureAsset().bitmapData); cachedChild.material = material; twistyChild.material = material; dummyMorph.material = material; morphController = new MorphController(dummyMorph); morphController.addMorphTarget(cachedChild, 0); morphController.addMorphTarget(twistyChild, 1); scene.addChild(dummyMorph); startRendering(); tweenDummy = {}; tweenDummy.dummyProp = 0; TweenMax.to(tweenDummy, 1, {dummyProp:1, ease:Elastic.easeInOut, loop:true, yoyo:true}); } override protected function onRenderTick(event:Event=null):void { dummyMorph.rotationX += 1; dummyMorph.rotationY += .5; morphController.weights[0] = 1- tweenDummy.dummyProp; morphController.weights[1] = tweenDummy.dummyProp; morphController.update(); light.x = Math.cos(dummyMorph.rotationY / 10) * 1000; super.onRenderTick(event); } } } |
Search
Recommended Books
Speaking at FITC Toronto
Recent Posts
- Moving to johnlindquist.com
- AsyncCommand with Robotlegs, Signals, Flight, MinimalComps
- Search Widget – Robotlegs, Signals, Flight, Minimal Comps, Yahoo Astra
- FDT Super Awesome March Deal
- haXe Tutorial
- AS3 Signals Tutorial
- Preferred Video Tutorial Resolution?
- TweenMax – Tweening a timeline (Advanced Tweening)
- Robotlegs + Flight + Union Platform
- Back in the saddle
- Eclipse Theme Designer Preview
- RobotLegs Hello World Video Tutorial
- 10 Things Every Senior Flash Developer Should Know
- Efflex – 3D Effects for Flex
- MorphController – Mighty Morphing Papervision3D
Recent Comments
- Hosting company on archive
- aanbae on Back in the saddle
- Domain registration on Looking around the inside of a Sphere
- website designing company on Looking around the inside of a Sphere
- Honda Motor on Augmented Reality – Recursive Webcam
- Zena on Augmented Reality – Recursive Webcam
- web hosting on Augmented Reality – Recursive Webcam
- web hosting on Twitter + Papervision3D (using Tweetr)
- web hosting on Efflex – 3D Effects for Flex
- web hosting on TweenMax – Tweening a timeline (Advanced Tweening)
Categories
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « May | ||||||
| 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 | ||||
Archives
Preferred Video Tutorial Resolution
- 1024x768 (53%, 85 Votes)
- 1280x1024 (15%, 24 Votes)
- 1920x1080 (15%, 24 Votes)
- 800x600 (13%, 20 Votes)
- 480x320 (4%, 6 Votes)
- 640x480 (0%, 2 Votes)
Total Voters: 160


