Swapping a Plane with a MovieClip

Thursday, December 11th, 2008 | examples, tutorials

The idea here is to setup your material as normal and bring the plane front and center. When the plane reaches front and center, you put your regular 2d object on top and start it playing (or start interaction, etc.). Then when it’s time to go back into plane form, use plane.material.bitmap.draw(embeddedVideo) to update your material to the latest snapshot of where the video left off.

Don’t get too hung up on the tweening code. It’s not important to the concept.

The .swf is about 2 megs, so be patient while it loads.

source

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.text.TextFormat;
 
	import gs.TweenMax;
	import gs.easing.Quad;
	import gs.events.TweenEvent;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class SwappingPlanesWithMovieClips extends BasicView
	{
		private var embeddedVideo:MovieClip = new theoffice();
		private var plane:Plane;
 
		private var moveForwardTween:TweenMax;
		private var moveBackTween:TweenMax;
 
		private var moveBackObject:Object;
		private var moveForwardObject:Object;
 
		private var isMovingForward:Boolean = true;
 
		public function SwappingPlanesWithMovieClips()
		{
			camera.focus = 10;
			camera.zoom = 100;
 
			viewport.interactive = true;
 
			embeddedVideo.visible = false;
			embeddedVideo.stop();
			embeddedVideo.addEventListener(MouseEvent.CLICK, embeddedVideo_clickHandler);
			viewport.addChild(embeddedVideo);
 
			var initialMovieMaterial:MovieMaterial = new MovieMaterial(embeddedVideo);
			initialMovieMaterial.interactive = true;
 
			plane = new Plane(initialMovieMaterial);	
			plane.x = 500;
			plane.y = 500;
			plane.z = 3000;
			plane.rotationY = 40;
			plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
 
			scene.addChild(plane);
 
			moveForwardObject = {x:0, y:0, z:0, rotationY:0, ease:Quad.easeInOut};
			var time:Number = 2;
			moveForwardTween = new TweenMax(plane, time, moveForwardObject);
			moveForwardTween.addEventListener(TweenEvent.COMPLETE, moveForwardTween_completeHandler);
 
 
			startRendering();
		}
 
		private function toggleDirection():void
		{
			isMovingForward = !isMovingForward;
		}
 
		private function moveForwardTween_completeHandler(event:TweenEvent):void
		{
			if(isMovingForward)
			{
				embeddedVideo.visible = true;
				embeddedVideo.play();
				toggleDirection();
			}
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			toggleDirection();
			moveForwardTween.reverse();
		}
 
		private function embeddedVideo_clickHandler(event:MouseEvent):void
		{
			plane.material.bitmap.draw(embeddedVideo);
 
			embeddedVideo.visible = false;
			embeddedVideo.stop();
 
			moveForwardTween.reverse();
		}
	}
}

Also, you can watch that clip of “The Office” here: http://www.hulu.com/watch/47992/the-office-the-surplus—magic-tricks

Gabriel.Wang(From China)

hi,I found your website and it helps me a lot.
But I have a question about this tutorial. Is that a real video plane?

Is it can play the video on the Material of the plane?

Daniel

hi,

i copied and pasted you example, made a square movieclip class name theoffice... i'm using flash and what i see is that when the videio is visible is in the topLeft, but the plane tweens to the center of the screen. Any ideas on why this is happening?

Kyle Burke

But MovieMaterial creates the Bitmap from the DisplayObject for me. ;) I haven't mastered Flex/Flash yet but it seems tweens on native text, which naturally the Panels contain, don't always work well (e.g. alpha tweens). I will continue to look at it and post any noob revelations. Thanks.

John Lindquist

Well, technically, a Bitmap is a DisplayObject. So a BitmapMaterial should be fine if you don't need any animation.

I've never actually snapshotted a UIComponent into a BitmapMaterial before. I imagine you would have to wait for one of the Flex framework's events to fire off before you could pull out the proper BitmapData from the panel.

If I get some time, I'll play around with the idea, I'm pretty slammed with work right now though :(

Kyle Burke

Hi John,
Using Flex, I want to add tunnel-like navigation, using Panel objects. User clicks the bitmap copy in the background, it moves forward, the real Panel is displayed and the bitmap copy is hidden. I am having trouble getting the bitmap copy to display initially but the question is: Would I also use a MovieMaterial for this, since it appears to be the only material that accepts a DisplayObject?

John Lindquist

@Kyle - Yeah, I know, I'm an idiot.

I was playing around with a moving the plane a bunch of different directions, but decided to simplify to just moving forward for the example. isMovingForward is kind of the leftover roadkill from that mess :P

Kyle Burke

Great examples. Thanks! You could have also just done this in toggleDirection():

private function toggleDirection():void{
isMovingForward = !isMovingForward;
}

Josh

Ahhh... I found this http://www.actionscript.org/re... ...........further down the rabbit hole.......

John Lindquist

I'll add that to my list of examples to make. I need to get my hosting working on my files first.

Josh

I am trying to wrap my head around the idea of using this class on multiple mc's in the same screen.
How do I override or re-use this class and apply it to other mc's? Say the override only changing the plane.x, plane.y, plane.z, the embededVideo var and whatever else differentiates the new object.

I want to place about six planes on the stage each in its own space with unique attributes, when clicked they perform a tween then the swap in your class, to bring up my main site areas.