examples

TweenMax – Tweening a timeline (Advanced Tweening)

Friday, December 18th, 2009 | ActionScript 3, examples | Comments

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});
        }
    }
}

Tags:

Robotlegs + Flight + Union Platform

Saturday, December 12th, 2009 | ActionScript 3, examples | Comments

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

Friday, July 3rd, 2009 | examples | Comments

I’ll do an in-depth tutorial on the MorphController later. I just wanted to get this up before I go to sleep.


source

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);
		}
	}
}

Tags: , ,

Test if a plane is within the view of the camera (aka testing if culled)

Wednesday, July 1st, 2009 | examples | Comments

Once a plane leaves the camera’s view, it will turn red. So the next time you see it, you will be able to see that it has been culled before. Hit the space bar to reset all to green.


source

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
package {
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
 
	import org.papervision3d.cameras.CameraType;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")]
	public class TestIfCulled extends BasicView
	{
		public function TestIfCulled()
		{
			super(900, 480, true, false, CameraType.DEBUG);
 
			//sidenote: if you don't want objects culled, disable culling
			//camera.useCulling = false;
 
			var length:int = 120;
			for(var i:int = 0; i < length; i++)
			{
				var greenMaterial:ColorMaterial = new ColorMaterial(0x00cc00);
				var plane:Plane = new Plane(greenMaterial);
				plane.x = Math.random() * 6000 - 3000;
				plane.y = Math.random() * 6000 - 3000;
				plane.z = Math.random() * 6000;
 
				scene.addChild(plane);
			}
 
			startRendering(); 
 
			trace("hit the space bar to reset visible planes to green");
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
		}
 
		protected function keyDownHandler(event:KeyboardEvent):void
		{
			//reset all the visible to green when you hit space
			if(event.keyCode == Keyboard.SPACE)
			{
				for each(var plane:Plane in scene.children)
				{
					plane.material.fillColor = 0xc00cc00;
				}	
			}
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			super.onRenderTick(event);
 
			for each(var plane:Plane in scene.children)
			{
				//if it's culled change to red
				if(plane.culled)
				{
					plane.material.fillColor = 0xcc0000;
				}
			}	
		}
	}
}

Tags: ,

Search

Recommended Books

Speaking at FITC Toronto

 

March 2010
M T W T F S S
« Jan    
1234567
891011121314
15161718192021
22232425262728
293031  

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

Loading ... Loading ...