tweenmax

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:

Tweening a “moveForward()” behavior

Tuesday, May 26th, 2009 | examples | Comments


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

package
{
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
 
	import org.papervision3d.core.math.Matrix3D;
	import org.papervision3d.core.math.Number3D;
	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.objects.primitives.Arrow;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")]
	public class TweeningMoveForward extends BasicView
	{
		private var arrow:Arrow;
 
		public function TweeningMoveForward()
		{
			super(900, 480);
			opaqueBackground = 0x000000;
 
			camera.y = 2000;
 
			var material:MaterialObject3D = new WireframeMaterial(0xff0000, 1, 2);
			arrow = new Arrow(material);
			arrow.rotationX = 30;
			arrow.rotationY = 30;
			scene.addChild(arrow);
 
			startRendering();
 
			stage.addEventListener(MouseEvent.CLICK, stage_clickHandler);
		}
 
		protected function stage_clickHandler(event:MouseEvent):void
		{
			var distance:Number = 3000;
			var forwardAxis:Number3D = new Number3D(0, 0, 1);
 
			Matrix3D.rotateAxis(arrow.transform, forwardAxis);
 
			var target:Number3D = new Number3D();
			target.x = distance * forwardAxis.x + arrow.x;
			target.y = distance * forwardAxis.y + arrow.y;
			target.z = distance * forwardAxis.z + arrow.z;
 
			TweenMax.to(arrow, 1, {x:target.x, y:target.y, z:target.z});
		}
	}
}

Tags:

The Spotlight Effect (Dimming the unselected)

Saturday, May 16th, 2009 | ActionScript 3, examples | Comments

Sorry for the long bout of blogging silence. I’m still trying to get used to my new traveling schedule.


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

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.utils.Dictionary;
 
	import gs.TweenMax;
	import gs.plugins.ColorMatrixFilterPlugin;
	import gs.plugins.RemoveTintPlugin;
	import gs.plugins.TintPlugin;
	import gs.plugins.TweenPlugin;
 
	[SWF(width="400", height="400", backgroundColor="0x000000", frameRate="30")]
	public class Spotlight extends Sprite
	{
		private static const CIRCLE_RADIUS:Number = 10;
 
		private static const COLUMN_MAX:uint = 10;
		private static const ROW_MAX:uint = 10;
 
		private static const COLUMN_SPACING:Number = 20;
		private static const ROW_SPACING:Number = 20;
 
		private static const PADDING_X:Number = 110;
		private static const PADDING_Y:Number = 110;
 
		private var spotlightDict:Dictionary = new Dictionary();
		private var sprites:Array = [];
 
		private var isSpotlit:Boolean = false;
 
		public function Spotlight()
		{
			//@see http://blog.greensock.com/v11Beta/
			TweenPlugin.activate([ColorMatrixFilterPlugin]);
 
			var total:uint = COLUMN_MAX * ROW_MAX;
			for(var i:int = 0; i < total; i++)
			{
				var sprite:Sprite = new Sprite();
				with(sprite.graphics)
				{
					beginFill(0xcc0000);
					drawCircle(0, 0, CIRCLE_RADIUS);
					endFill();
				}
 
				sprite.x = COLUMN_SPACING * (i % COLUMN_MAX) + PADDING_X;
				sprite.y = ROW_SPACING * Math.floor(i / ROW_MAX) + PADDING_Y;
 
				addChild(sprite);
 
				sprites.push(sprite);
 
				sprite.addEventListener(MouseEvent.MOUSE_OVER, sprite_mouseOverHandler);
			}
 
			stage.addEventListener(MouseEvent.CLICK, stage_clickHandler);
		}
 
		protected function sprite_mouseOverHandler(event:MouseEvent):void
		{
			var sprite:Sprite = event.target as Sprite;
			var highlight:TweenMax = new TweenMax(sprite, 0, {colorMatrixFilter:{colorize:0xffffff, brightness: 5}});
			spotlightDict[sprite] = true;
		}
 
		protected function stage_clickHandler(event:MouseEvent):void
		{
			if(isSpotlit)
			{
				clear();
			}
			else
			{
				dimUnselected();
			}
 
			isSpotlit = !isSpotlit;
		}
 
		protected function clear():void
		{
			for each(var sprite:Sprite in sprites)
			{
				TweenMax.to(sprite, 0, {colorMatrixFilter:{colorize:0x000000, amount:0}});
				delete spotlightDict[sprite];
			}
		}
 
		protected function dimUnselected():void
		{
			for each(var sprite:Sprite in sprites)
			{
				if(!spotlightDict[sprite])
				{
					TweenMax.to(sprite, .5, {colorMatrixFilter:{colorize:0x000000, amount:0.7}});
				}
			}
		}
	}
}

Tags:

Sliced Cube

Thursday, April 9th, 2009 | examples | Comments

This is kind of combination of my last two examples which turned out pretty nicely.

I’m sorry the code is a big pile of crap. I’m too lazy right now to clean it up :)


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
103
104
105
106
107
108
109
110
111
112
113

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
 
	import gs.TweenMax;
	import gs.easing.Quad;
 
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="0xffffff", frameRate="31")]
	public class SlicedCube extends BasicView
	{
		[Embed(source="/assets/car.jpg")]
		private var carAsset:Class;
 
		[Embed(source="/assets/back.jpg")]
		private var backAsset:Class;
 
		[Embed(source="/assets/brabus.jpg")]
		private var brabusAsset:Class;
 
		[Embed(source="/assets/ferrari.jpg")]
		private var ferrariAsset:Class;
 
		private var mouseDownX:Number = 0;
		private var targetRotation:Number = 0;
 
		private var NUM_SLICES:int = 5;
 
		private var cubes:Array = [];
 
		public function SlicedCube()
		{
			super(900, 480);
 
			opaqueBackground = 0x000000;
			camera.focus = 100;
			camera.zoom = 10;
			camera.ortho = false;
 
			for(var i:int = 0; i < NUM_SLICES; i++)
			{
				var materialsList:MaterialsList = new MaterialsList();
				var sliceWidth:Number = 900 / NUM_SLICES;
				var sliceX:Number = sliceWidth * i;
 
 
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(carAsset, sliceX, sliceWidth, true), "front");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(backAsset, sliceX, sliceWidth), "back");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(brabusAsset, sliceX, sliceWidth), "top");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(ferrariAsset, sliceX, sliceWidth, true), "bottom");
				materialsList.addMaterial(new ColorMaterial(0xffffff), "right");
				materialsList.addMaterial(new ColorMaterial(0xffffff), "left");
 
				var cube:Cube = new Cube(materialsList, sliceWidth, 480, 480);
				cube.x = sliceX - 450 + sliceWidth / 2;
				cube.z = 240;
 
				scene.addChild(cube);
 
 
				cubes.push(cube);
			}
 
			startRendering();
 
			addEventListener(MouseEvent.CLICK, mouseDownHandler);
		}
 
		private function createSlicedBitmapMaterialFromAsset(asset:Class, sliceX:Number, sliceWidth:Number, isFlipped:Boolean = false):BitmapMaterial
		{
			var bitmap:Bitmap = new asset() as Bitmap;
			var bitmapData:BitmapData = new BitmapData(sliceWidth, 480, false, 0xcc0000);
			if(isFlipped)
			{
				var sliceMatrix:Matrix = new Matrix();
				sliceMatrix.translate(-180, -240);
				sliceMatrix.rotate(Math.PI);
				sliceMatrix.translate(sliceX, 240);
				bitmapData.draw(bitmap, sliceMatrix);
			}
			else
			{
				bitmapData.copyPixels(bitmap.bitmapData, new Rectangle(sliceX, 0, sliceWidth, 480), new Point());
			}
			var material:BitmapMaterial = new BitmapMaterial(bitmapData, true);
 
			return material;
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			targetRotation += 90 % 360;
			cubes.forEach(cubes_forEachCallback);
		}
 
		private function cubes_forEachCallback(cube:Cube, index:int, array:Array):void
		{
			index++;
			var time:Number = .3 * index;
			TweenMax.to(cube, time, {rotationX:targetRotation, ease:Quad.easeInOut});
		}
	}
}

Tags: , , ,

« Previous Entries

 Subscribe to the pv3d.org feed!

Follow me on Twitter

Visit the Papervision3D Forum

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 ...