The example uses BasicView as the superclass to ensure all things all already setup for you (camera, width, height, scene, viewport,…).

Here is the final example running:

You can explore and download the source coder here.

The following is the sorce code of the main class. Hope you find it interesting:

package {
	import flash.display.BitmapData;
	import flash.display.GradientType;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.NetStatusEvent;
	import flash.filters.BlurFilter;
	import flash.geom.Matrix;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;

	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.VideoStreamMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;

    [SWF(backgroundColor="#FFFFFF")]
	public class VideoOnPlane extends BasicView
	{
		private var ns:NetStream;
		private var v:Video;
		private var plane:Plane;
		private var reflectionPlane:Plane;
		private var vm:VideoStreamMaterial;
		private var bm:BitmapMaterial;
		private var matrix:Matrix;
		private var gradientMask:Sprite;

		private function initVideo():void {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			var nc:NetConnection = new NetConnection();
			nc.connect(null);

			ns = new NetStream(nc);
			ns.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
			ns.play("video/phone.flv");

			v = new Video();
			v.attachNetStream(ns);
		}

		public function VideoOnPlane(viewportWidth:Number=400, viewportHeight:Number=300, scaleToStage:Boolean=true, interactive:Boolean=false, cameraType:String="CAMERA3D")
		{
			super(viewportWidth, viewportHeight, scaleToStage, interactive, cameraType);

			camera.focus = 400;
			camera.zoom = 2;

			initVideo();			

			vm = new VideoStreamMaterial(v, ns, true);
			vm.smooth = true;
			vm.doubleSided = true;

			plane = new Plane(vm, v.width, v.height);
			scene.addChild(plane);

			bm = new BitmapMaterial(new BitmapData(v.width, v.height), true);
			bm.doubleSided = true;

			reflectionPlane = new Plane(bm, v.width, v.height);
			reflectionPlane.rotationX = 180;
			reflectionPlane.y = -v.height
			scene.addChild(reflectionPlane);

			reflectionPlane.createViewportLayer(viewport, false).filters = [new BlurFilter()];

			matrix = new Matrix();
			matrix.createGradientBox(v.width, v.height, (90/180)*Math.PI, 0, 90);

			gradientMask = new Sprite();
			gradientMask.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], [1, 0.4], [0, 255], matrix);
			gradientMask.graphics.drawRect(0,0,v.width, v.height);
			gradientMask.graphics.endFill();
			gradientMask.cacheAsBitmap = true;

			startRendering();
		}

		protected override function onRenderTick(event:Event = null):void {
			//plane.yaw(1);
			//reflectionPlane.yaw(-1);

			plane.rotationY = -35;
			reflectionPlane.rotationY = -35;

			reflectPicture();

			super.onRenderTick(event);
		}

		private function reflectPicture():void {
			bm.bitmap.draw(plane.material.bitmap);
			bm.bitmap.draw(gradientMask);
		}

		private function onNetStatus(e:NetStatusEvent):void {
			switch (e.info.code) {
        		case "NetConnection.Connect.Success":
	            	trace("successfully connected");
	       	     	break;
				case "NetStream.Play.StreamNotFound":
	            	trace("Unable to locate video: ");
	            	break;
				case "NetStream.Buffer.Full":
					trace("buffer full");
					break;
				case "NetStream.Buffer.Empty":
					trace("buffer empty");
					break;
				case "NetStream.Play.Stop":
					trace ("video finished");
					ns.seek(0);
					ns.pause();
					break;

        	}
		}
	}
}

Hope you enjoy this example and start trying Papervision3D to show us what you can do!

Let’s go with the next part of this article

You can see the whole example working here. Press right button -> View Source to see the full source code.

MOUSE EVENTS

I assume you have already worked with Actionscript events. However, let’s explain it just in case you don’t remember.
You can listen to any events dispatched by an Actionscript object just by writing this code:

object.addEventListener (eventType, eventHandler)

The eventHandler is a function that will be executed everytime the event is dispatched.

For example:

object.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownEventHandler);

private function mouseDownHandler (event : MouseEvent) : void {
…
}

The event object we receive as a parameter contains useful information to handle the event and perform some actions.

In our example, we will use these events:

• MouseEvent.MOUSE_DOWN: it happens when we press the left button of the mouse
• MouseEvent.MOUSE_UP: it happens when we release the left mouse button
• MouseEvent.MOUSE_OUT: it is dispatched when we move the cursor out of the component
• MouseEvent.MOUSE_MOVE: it is dispatched when we move the cursor along the component.

If we create an empty component and try to listen to mouse events, we will see that no event is dispatched. This happens because they will only be dispatched if we have drawn something inside the component. So, in order to catch the mouse events, I have drawn a transparent sprite on top of the component that will listen to the mouse events (cristal).

COMPONENT STATES

When creating our component, there are some rules that we should keep in mind:

• Update the visualization of the component only in the updateDisplayList function.
• Never call directly to the updateDisplayList function. We should call the invalidateDisplayList function instead.

This is a very simple component. If we create more complex components showing complex data, it will be necessary to use the commitProperties function.
The easiest way to handle the diferent states of our component is to store the current state in a variable (blackboardState).
We will use three states:

• BASE
• STARTING_PICTURE: the user is starting a new shape inside the blackboard
• DRAWING: the user is drawing

Whenever we want to make a change to the component, we will change the state variable and call the invalidateDisplayList function if the visualization of the component must be refreshed.

THE CODE

Enough explanation. Let’s see the code:

package comp
{
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;

	import mx.controls.Alert;
	import mx.controls.Button;
	import mx.core.UIComponent;

	public class Blackboard extends UIComponent
	{
		/* BLACKBOARD AVAILABLE STATES */
		private static const BASE : String = "";
		private static const STARTING_PICTURE : String = "startingPicture";
		private static const DRAWING : String = "drawing";

		// The state variable will store the current state of the variable
		private var blackboardState : String = BASE;

		// We will use a transparent Sprite that will be displayed on top of the blackboard and will
		// capture mouse events
		private var cristal : Sprite;
		// The background
		private var background : Shape;

		// Reference to the shape we are working with
		private var currentShape : BlackboardShape;
		// The location of the mouse cursor
		private var cursorPosition : Point;

		public function Blackboard()
		{
			super();
		}

		// In this method we create the children of this component and make sure everything is correctly initialized
		override protected function createChildren():void {
			cristal = new Sprite ();
			cristal.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			cristal.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			cristal.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
			cristal.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

			background = new Shape ();
		}

		// When we detect a mouseDown event, it means the user is starting a new drawing
		private function mouseDownHandler (event : MouseEvent) : void {
			blackboardState = STARTING_PICTURE;
			cursorPosition = new Point (event.localX, event.localY);
			currentShape = new BlackboardShape ();
			currentShape.x = cursorPosition.x;
			currentShape.y = cursorPosition.y;
			currentShape.addPoint (cursorPosition.x - currentShape.x, cursorPosition.y - currentShape.y);
			invalidateDisplayList();
		}

		// When we capture a mouseUp, it means the user stops drawing, so my component will return to the base state
		private function mouseUpHandler (event : MouseEvent) : void {
			blackboardState = BASE;
		}

		// If the user moves the mouse out of this component, the component will return to the base state
		// and the shape the user was drawing is finished
		private function mouseOutHandler (event : MouseEvent) : void {
			blackboardState = BASE;
		}

		// If the user was drawing a shape and moves the mouse, we must register a new point in the shape
		private function mouseMoveHandler (event : MouseEvent) : void {
			if (blackboardState==DRAWING) {
				cursorPosition = new Point (event.localX, event.localY);
				currentShape.addPoint (cursorPosition.x - currentShape.x, cursorPosition.y - currentShape.y);
				invalidateDisplayList();
			}
		}

		// This method configures the minimum and default size of the component
		override protected function measure():void {
			minHeight = measuredMinHeight = 300;
			minWidth = measuredMinWidth = 400;
		}

		// This method renders changes in the visualization of the component when necessary
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			background.graphics.clear();
			background.graphics.beginFill(0xFFFFFF, 1);
			background.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
			background.graphics.endFill();
			if (!this.contains(background)) {
				this.addChild(background);
			}

			if (blackboardState==STARTING_PICTURE) {
				this.addChildAt(currentShape, this.numChildren - 1);  // We make sure not to add the shape on top of the cristal that dispatches mouseEvents
				blackboardState = DRAWING;
			}

			// Update the cristal size to capture events. Just in case the size of the component has changed, I redraw it
			cristal.graphics.clear();
			cristal.graphics.beginFill(0xFFFFFF, 0);
			cristal.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
			cristal.graphics.endFill();
			if (!this.contains(cristal)) {
				this.addChild(cristal);
			}

		}

	}
}

You can see the whole example working here. Press right button -> View Source to see the full source code.

Creating Flex components is very easy, but you must know some things about the Flex Component Framework.

Bitmap Caching

The graphical performance of the Flash Player gets improved thanks to the bitmap caching feature. It enables the Flash Player to render the visual elements just when needed. If a visual element doesn’t change during the execution of the application, a bitmap representation of that element will be shown in every frame instead of rendering it once and again. Only the visual elements marked as “dirty” will be redrawn.

More information on Bitmap Caching here.

Graphic Primitives

When developing custom Flex Components, we will make intense use of graphic primitives. In a future post, I will talk about creating skinnable components, and it will allow us not to draw programatically, but using assets.

We will build a very simple blackboard component. We will achieve this:

We are going to create two actionscript components:

• BlackboardShape: it respresents every independent shape a user draws. It is made of different points connected with lines.
• Blackboard: the canvas where the users draws. It does all the event catching work.

First of all, we will focus on the BlackboardShape, wich is a very simple Flex component.

This is the source code for that component:

package comp
{
	import comp.common.BlackboardPoint;

	import flash.filters.BevelFilter;

	import mx.core.UIComponent;

	public class BlackboardShape extends UIComponent
	{
		private var pointArray : Array;
		private var color : Number;

		public function BlackboardShape()
		{
			super();
			pointArray = new Array ();
			color = Math.random() * 0xFFFFFF;	  // This sets the color. We choose a random color.
			this.filters = [new BevelFilter ()];  // This adds a bevel filter to the shape wich will
							 	  // add that "ketchup" look
		}

		// Add a new point to the shape
		public function addPoint (x : Number, y : Number) : void {
			pointArray.push (new BlackboardPoint (x, y, false));
			// There is a new Point, so the shape must be redrawn. We call invalidateDisplayList, so
			// the framework will call updateDisplayList at the right time
			// in order to draw the next frame
			invalidateDisplayList();
		}

		// This method updates the visualization of the component.
		// You should NEVER call this method directly.
		// If you have to update the visualization of your component, call invalidateDisplayList ()
		// instead and the Flex Component Framework will call updateDisplayList for you at right time.
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			var previousPoint : BlackboardPoint = new BlackboardPoint (0, 0, true);
			var point : BlackboardPoint;
			this.graphics.lineStyle(15, color);
			// We process every point in the shape.
			// We use graphic primitives to draw lines between the points
			for each (point in pointArray) {
				if (!point.processed) {
					if (previousPoint) {
						this.graphics.moveTo(previousPoint.x, previousPoint.y);
					}
					this.graphics.lineTo(point.x, point.y);
					point.processed = true;
				}
				previousPoint = point;
			}
		}
	}
}

There is a public method addPoint that will be used by the Blackboard component when capturing mouse events. If you read that code you will see there are no graphic instructions: we only add a record to our Point Array. The pointArray property stores the points that define the shape. At the end of the method, we call invalidateDisplayList to notify that this component is dirty and it has to be redrawn.

At the right time, the framework will attempt to refresh every “dirty” component by calling the updateDisplayList Method. We will add all the graphical logic here. In this example, we just iterate the points and draw lines between them. Note that a lot of optimizations could be added to this code but its easier to understand keeping it simple.

Now we will create a test Flex Application for this component to see it running:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
		horizontalAlign="center" verticalAlign="middle" xmlns:comp="comp.*">
	<comp:BlackboardShape id="shape" width="200" height="200"/>
	<mx:Button label="Draw!" click="shape.addPoint(Math.random() * 200, Math.random()*200)"/>
</mx:Application>

It should work like this:

In my next post, I will show you the Blackboard component.

We are focused mainly on RIAs build with the Flash Platform and JEE backends. Of course, we will write about Flash, Flex and Java, but we want not limit our post and will share all things we consider helpful and interesting (maybe Linux?, PHP?, Rails?). We will talk here about our upcoming own technology that we are finishing in this days called RIAlity.

This blog will be written in English (opposite to my classic spanish blog) and hope we’ll update this space with regularity.

With this blog, I hope you’ll find some gems written by talented people within our studio that has many things to share with the community.

Thanks for reading and hope you’ll think in syndicate our feed in your favourite RSS reader.

Best,

Carlos Rovira.