tweenmax

Flover Cow – A.K.A. Cover Flow Knockoff

Saturday, January 31st, 2009 | examples, requests | Comments

I’ll do a tutorial on this later. For know, download the source and play with the example.


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

package {
	import de.polygonal.ds.DLinkedList;
	import de.polygonal.ds.DListNode;
 
	import gs.TweenMax;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class FloverCow extends BasicView
	{
		private static const SPACING:Number = 400;
		private static const NUMBER_OF_PLANES:int = 10;
		private static const TIME:Number = .5;
		private static const Z_FOCUS:Number = -500;
		private static const ROTATION_Y:Number = 45;
 
		private var planeList:DLinkedList = new DLinkedList();
 
		public function FloverCow()
		{
			viewport.interactive = true;
 
			for(var i:int = 0; i < NUMBER_OF_PLANES; i++)
			{
				var randomColor:Number = Math.random() * 0xffffff;
				var colorMaterial:ColorMaterial = new ColorMaterial(randomColor);
				colorMaterial.interactive = true;
				var plane:Plane = new Plane(colorMaterial, 400, 400, 4, 4);
				plane.x = i * SPACING;				
 
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
 
				planeList.append(plane);
				scene.addChild(plane);
			}
 
			flow(plane);
 
			startRendering();
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var plane:Plane = Plane(event.target);
			flow(plane);			
		}
 
		private function flow(plane:Plane):void
		{
			var xPosition:Number = 0;
			TweenMax.to(plane, TIME, {x:xPosition, z:Z_FOCUS, rotationY:0});
 
			var current:DListNode = planeList.nodeOf(plane).node;
 
			var walkLeft:DListNode = current.prev;
			while(walkLeft)
			{
				plane = Plane(walkLeft.data);
				xPosition -= SPACING;
				TweenMax.to(plane, TIME, {x:xPosition, z:0, rotationY:-ROTATION_Y});
				walkLeft = walkLeft.prev;
			}
 
			xPosition = 0;
			var walkRight:DListNode = current.next;
			while(walkRight)
			{
				plane = Plane(walkRight.data);
				xPosition += SPACING;
				TweenMax.to(plane, TIME, {x:xPosition, z:0, rotationY:ROTATION_Y});
				walkRight = walkRight.next;
			}
		}
	}
}

Tags: , ,

Tweening rotated planes to you

Sunday, January 11th, 2009 | examples | Comments

I just got back from a week long trip to Los Angeles for work. I wrote this on the plane on the way home. It’s kind of the opposite of the camera tweening thing I wrote a little while ago. I probably need to add some more comments, but I just wanted to post it before I get settled in and relax for a bit.


source

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
	import gs.easing.Cubic;
 
	import org.papervision3d.core.math.Quaternion;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class TweenPlanesToYou extends BasicView
	{
		[Embed(source="assets/1.jpg")]
		private var oneAsset:Class;
		[Embed(source="assets/2.jpg")]
		private var twoAsset:Class;
		[Embed(source="assets/3.jpg")]
		private var threeAsset:Class;
		[Embed(source="assets/4.jpg")]
		private var fourAsset:Class;
		[Embed(source="assets/5.jpg")]
		private var fiveAsset:Class;
		[Embed(source="assets/6.jpg")]
		private var sixAsset:Class;
 
		private var assets:Array = [oneAsset, twoAsset, threeAsset, fourAsset, fiveAsset, sixAsset];
 
		private static const NUM_PLANES:int = 40;
		private static const TWEEN_TIME:Number = 2;
 
		private var previousPlane:PlaneWithSlerp;
 
		private var startQuaternion:Quaternion = null;
		private var endQuaternion:Quaternion = null;
		private var currentQuaternion:Quaternion = null;
 
		public function TweenPlanesToYou()
		{
			setupPapervision3D();			
			setupBackground();
			setupPlanes();
 
			startRendering();
		}
 
		private function setupPapervision3D():void
		{
			viewport.interactive = true;
		}
 
		private function setupBackground():void
		{
			//the background is for the "click outside" events
			var backgroundSprite:Sprite = new Sprite();
 
			backgroundSprite.graphics.beginFill(0x000000);
			backgroundSprite.graphics.drawRect(0, 0, width, height);
			backgroundSprite.graphics.endFill();
 
			addChildAt(backgroundSprite, getChildIndex(viewport));
 
			backgroundSprite.addEventListener(MouseEvent.CLICK, backgroundSprite_clickHandler);
		}
 
		private function setupPlanes():void
		{
			for(var i:int = 0; i < NUM_PLANES; i++)
			{
				var bitmapMaterial:BitmapMaterial = createRandomBitmapMaterial();
				bitmapMaterial.interactive = true;
				bitmapMaterial.doubleSided = true;
				bitmapMaterial.precise = true;
 
				var plane:PlaneWithSlerp = new PlaneWithSlerp(bitmapMaterial);
 
				plane.x = Math.random() * 5000 - 2500;
				plane.y = Math.random() * 5000 - 2500;
				plane.z = Math.random() * 2500;
				plane.originalX = plane.x;
				plane.originalY = plane.y;
				plane.originalZ = plane.z;
				plane.rotationX = Math.random() * 180 -90;
				plane.rotationY = Math.random() * 180 -90;
				plane.rotationZ = Math.random() * 180 -90;
				plane.slerp = 0;
 
				scene.addChild(plane);
 
				singleRender();			
				plane.startQuaternion = Quaternion.createFromMatrix(plane.transform);	
				plane.endQuaternion = Quaternion.createFromMatrix(DisplayObject3D.ZERO.transform);	
 
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
			}
		}
 
		private function createRandomBitmapMaterial():BitmapMaterial
		{
			//grab a bitmapAsset from the array (this is very ugly, but not important to the concept :) )
			var bitmap:Bitmap = Bitmap(new assets[Math.floor(Math.random() * assets.length)]);
			var bitmapMaterial:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData);
 
			return bitmapMaterial;
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			tweenPreviousPlane();
 
			var plane:PlaneWithSlerp = PlaneWithSlerp(event.target);
			if(previousPlane != plane)
			{
				tweenForward(plane);
			}
			if(plane.isAtStartingPoint)
			{
				previousPlane = null; 
			}else
			{
				previousPlane = plane;
			}
		}
 
		private function tweenPreviousPlane():void
		{
			if(previousPlane && !previousPlane.isAtStartingPoint)tweenBack(previousPlane);
		}
		private function backgroundSprite_clickHandler(event:MouseEvent):void
		{
			tweenPreviousPlane();
		}
 
		private function tweenForward(plane:PlaneWithSlerp):void
		{
			plane.isAtStartingPoint = false;
 
			var tweenObject:Object = {};
			tweenObject.x = 0;
			tweenObject.y = 0;
			tweenObject.z = 0;
			tweenObject.slerp = 1;
 
			tweenObject.bezierThrough = [{x:-plane.x/4, y:-plane.y/4, z:700}];
			tweenObject.ease = Cubic.easeInOut;
 
			tweenObject.onUpdate = plane_updateCallback;
			tweenObject.onUpdateParams = [plane];
 
			TweenMax.to(plane, TWEEN_TIME, tweenObject);
		}
 
		private function tweenBack(plane:PlaneWithSlerp):void
		{
			plane.isAtStartingPoint = true;
 
			var tweenObject:Object = {};
			tweenObject.x = plane.originalX;
			tweenObject.y = plane.originalY;
			tweenObject.z = plane.originalZ;
			tweenObject.slerp = 0;
 
			tweenObject.bezierThrough = [{x:-plane.x/4, y:-plane.y/4, z:700}];
			tweenObject.ease = Cubic.easeInOut;
 
			tweenObject.onUpdate = plane_updateCallback;
			tweenObject.onUpdateParams = [plane];
 
			TweenMax.to(plane, TWEEN_TIME, tweenObject);
		}
 
		private function plane_updateCallback(plane:PlaneWithSlerp):void
		{
			plane.currentQuaternion = Quaternion.slerp(plane.startQuaternion, plane.endQuaternion, plane.slerp);
			plane.transform.copy3x3(plane.currentQuaternion.matrix);
		}
	}
}
 
//a helper class whose sole purpose is to add the slerp property
//I use this for the sake of brevity, but for production code
//you would move this into a new ActionScript file
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.core.math.Quaternion;
class PlaneWithSlerp extends Plane
{
	public var slerp:Number = 0;
	public var startQuaternion:Quaternion = new Quaternion();
	public var endQuaternion:Quaternion = new Quaternion();
	public var currentQuaternion:Quaternion = new Quaternion();
	public var originalX:Number = 0;
	public var originalY:Number = 0;
	public var originalZ:Number = 0;
	public var isAtStartingPoint:Boolean = true;
	public function PlaneWithSlerp(material:MaterialObject3D)
	{
		super(material);
	}
}

Tags: ,

Tweening the Camera and Tweening lookAt()

Saturday, January 3rd, 2009 | examples | Comments

This example shows how to make a target object (in this case “lookAtMe”) and have the camera target it using camera.target = lookAtMe. Also, the arrow will behave similarly by calling arrow.lookat(lookAtMe) in onRenderTick. For added effect, the light follows around lookAtMe.


source

package
{
	import flash.events.Event;
 
	import gs.TweenMax;
	import gs.easing.Cubic;
 
	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.shadematerials.GouraudMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;
	import org.pv3d.objects.Arrow;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class TweeningLookAt extends BasicView
	{
 
		private var arrow:Arrow;
		private var light:PointLight3D;
		private var lookAtMe:DisplayObject3D;
		private var lookAtTarget:DisplayObject3D;
 
		public function TweeningLookAt()
		{
			viewport.interactive = true;
 
			light = new PointLight3D();
 
			var material:MaterialObject3D;
			material = new GouraudMaterial(light, 0xdddddd, 0xcc0000, 10);
 
			arrow = new Arrow(material);
			arrow.scale = .5;
			scene.addChild(arrow);	
 
			for(var i:int = 0; i < 20; i++)
			{
				var randomColor:Number = Math.random() * 0x555555;
				var lightColor:Number = 0xdddddd;
				material = new FlatShadeMaterial(light, lightColor, randomColor, 10);
				material.interactive = true;
 
				var sphere:Sphere = new Sphere(material, 200, 6, 6);
				sphere.x = Math.random() * 4000 - 2000;				
				sphere.y = Math.random() * 4000 - 2000;				
				sphere.z = Math.random() * 2000 + 300;				
 
				scene.addChild(sphere);
 
				sphere.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, sphere_objectClickHandler);
 
				sphere.lookAt(arrow);
			}
 
			lookAtMe = new DisplayObject3D();
			lookAtMe.z = 1000;
			lookAtTarget = new DisplayObject3D();
 
			camera.target = lookAtMe;
 
			scene.addChild(lookAtMe);
 
			startRendering();	
		}
 
		private function sphere_objectClickHandler(event:InteractiveScene3DEvent):void
		{	
			lookAtTarget.copyTransform(event.displayObject3D);
			lookAtTarget.moveForward(500);
 
			var time:Number = 1;
			var tweenObject:Object = {};
			tweenObject.x = lookAtTarget.x;
			tweenObject.y = lookAtTarget.y;
			tweenObject.z = lookAtTarget.z;
			tweenObject.ease = Cubic.easeInOut;
			TweenMax.to(lookAtMe, time, tweenObject);	
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			light.x = lookAtMe.x;
			light.y = lookAtMe.y;
			light.z = lookAtMe.z;
			arrow.lookAt(lookAtMe);
			super.onRenderTick(event);
		}
	}
}

Tags: , ,

Click then Tween Camera to Plane

Sunday, December 28th, 2008 | examples | Comments

I posted a similar example in the archive over a year ago now that turned out to be quite popular. Since that’s now outdated, here’s a quick n’ dirty updated version:

All images come from dryicons.com/


source

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
	import gs.easing.Cubic;
 
	import org.papervision3d.core.math.Quaternion;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class TweenToSpatialPlanes extends BasicView
	{
		[Embed(source="assets/1.jpg")]
		private var oneAsset:Class;
		[Embed(source="assets/2.jpg")]
		private var twoAsset:Class;
		[Embed(source="assets/3.jpg")]
		private var threeAsset:Class;
		[Embed(source="assets/4.jpg")]
		private var fourAsset:Class;
		[Embed(source="assets/5.jpg")]
		private var fiveAsset:Class;
		[Embed(source="assets/6.jpg")]
		private var sixAsset:Class;
 
		private var assets:Array = [oneAsset, twoAsset, threeAsset, fourAsset, fiveAsset, sixAsset];
 
		private static const NUM_PLANES:int = 40;
		private static const TWEEN_TIME:Number = 2;
		private static const DISTANCE_FROM_PLANE:Number = 500;
 
		private var cameraWithSlerp:CameraWithSlerp = new CameraWithSlerp();
 
		private var cameraStart:DisplayObject3D = new DisplayObject3D();
		private var cameraTarget:DisplayObject3D = new DisplayObject3D();
 
		private var startQuaternion:Quaternion = null;
		private var endQuaternion:Quaternion = null;
		private var currentQuaternion:Quaternion = null;
 
		public function TweenToSpatialPlanes()
		{
			setupPapervision3D();			
			setupBackground();
			setupPlanes();
 
			singleRender();
		}
 
		private function setupPapervision3D():void
		{
			viewport.interactive = true;
			cameraWithSlerp.target = null;
			cameraWithSlerp.slerp = 0;
			cameraStart.z = -1000;
			scene.addChild(cameraStart);
		}
 
		private function setupBackground():void
		{
			//the background is for the "click outside" events
			var backgroundSprite:Sprite = new Sprite();
 
			backgroundSprite.graphics.beginFill(0x000000);
			backgroundSprite.graphics.drawRect(0, 0, width, height);
			backgroundSprite.graphics.endFill();
 
			addChildAt(backgroundSprite, getChildIndex(viewport));
 
			backgroundSprite.addEventListener(MouseEvent.CLICK, backgroundSprite_clickHandler);
		}
 
		private function setupPlanes():void
		{
			for(var i:int = 0; i < NUM_PLANES; i++)
			{
				var bitmapMaterial:BitmapMaterial = createRandomBitmapMaterial();
				bitmapMaterial.interactive = true;
				bitmapMaterial.doubleSided = true;
				bitmapMaterial.precise = true;
 
				var plane:Plane = new Plane(bitmapMaterial);
 
				plane.x = Math.random() * 5000 - 2500;
				plane.y = Math.random() * 5000 - 2500;
				plane.z = Math.random() * 2500;
				plane.rotationX = Math.random() * 180 -90;
				plane.rotationY = Math.random() * 180 -90;
				plane.rotationZ = Math.random() * 180 -90;
 
				scene.addChild(plane);
 
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
			}
		}
 
		private function createRandomBitmapMaterial():BitmapMaterial
		{
			//grab a bitmapAsset from the array (this is very ugly, but not important to the concept :) )
			var bitmap:Bitmap = Bitmap(new assets[Math.floor(Math.random() * assets.length)]);
			var bitmapMaterial:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData);
 
			return bitmapMaterial;
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var plane:Plane = Plane(event.target);
			//put the target behind the plane
			cameraTarget.copyTransform(plane);
			cameraTarget.moveBackward(DISTANCE_FROM_PLANE);
 
			createTween(cameraTarget);
		}
 
		private function backgroundSprite_clickHandler(event:MouseEvent):void
		{
			createTween(cameraStart);
		}
 
		private function createTween(displayObject3d:DisplayObject3D):void
		{
			//when "slerping", this value is a range from 0 to 1
			//0 being the starting total rotation (AKA transformation)
			//1 being the ending total rotation
			cameraWithSlerp.slerp = 0;
 
			var tweenObject:Object = {};
			tweenObject.x = displayObject3d.x;
			tweenObject.y = displayObject3d.y;
			tweenObject.z = displayObject3d.z;
			tweenObject.bezierThrough = [{x:0, y:0, z:0, slerp:.1}];
			tweenObject.ease = Cubic.easeInOut;
			tweenObject.slerp = 1;
			tweenObject.onUpdate = camera_updateCallback;
 
			startQuaternion = Quaternion.createFromMatrix(cameraWithSlerp.transform);
			endQuaternion = Quaternion.createFromMatrix(displayObject3d.transform);
 
			TweenMax.to(cameraWithSlerp, TWEEN_TIME, tweenObject);
		}
 
		private function camera_updateCallback():void
		{
			currentQuaternion = Quaternion.slerp(startQuaternion, endQuaternion, cameraWithSlerp.slerp);
			cameraWithSlerp.transform.copy3x3(currentQuaternion.matrix);
			singleRender();
		}
 
		override public function singleRender():void
		{
			renderer.renderScene(scene, cameraWithSlerp, viewport);
		}
	}
}
 
//a helper class whose sole purpose is to add the slerp property
//I use this for the sake of brevity, but for production code
//you would move this into a new ActionScript file
import org.papervision3d.cameras.Camera3D;
class CameraWithSlerp extends Camera3D
{
	public var slerp:Number = 0;
}

Tags: , ,

« Previous Entries Next Entries »

 Subscribe to the pv3d.org feed!

Follow me on Twitter

Visit the Papervision3D Forum

Search

Recommended Books

Speaking at FITC Toronto

 

May 2012
M T W T F S S
« May    
 123456
78910111213
14151617181920
21222324252627
28293031  

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