Solved It!

I have been having A LOT of trouble trying to get my Papervision3D to run a tween just after loading. I spent a good part of the weekend trying to get it to work with no avail. Today I decided that it was time to use a process of elimination with event listeners to work it out, luckly for me it was the third event FlashDevelop's drop down list. Here is the code "view" is a BasicView and "zoomCamera" is the function called after loading view:

view.addEventListener(Event.ADDED_TO_STAGE, zoomCamera);

Adding Interactivity to Papervision 3D

There are two types of Interactivity in this demo the first is controlling the camera and the second the 3D Animation i.e. making the panels spin when you click them. Controlling the Camera Controlling the camera is pretty simple in this example all you need to do is track the mouse movement and translate it into camera movement. To do this simply add the following code into your Event.ENTER_FRAME listener, where view is the Papervision View you are using.

view.camera.x += (((stage.mouseX - (stage.stageWidth * .5)) * 2) - view.camera.x ) * .02;
view.camera.y += (((stage.mouseY - (stage.stageHeight * .5)) * 2) - view.camera.y ) * .02;

Controlling 3D Animation The easiest what to control 3D animation is to use tweener. Basically Tweener helps you move things around on the screen using only code, instead of the timeline. Tweener has no idea about Papervision 3D and in fact it only changes a variable over time which means that you can change any variable as long as it is a number.

To do this you first need to set the view to interactive, then add event listeners to the 3D objects.

var controlPlane:Plane = new Plane();
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane1Clicked);
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane1Rollover);
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane1Rollout);

Then create functions and use tweener to manipulate the 3D objects

private function plane1Rollover (myEvent:InteractiveScene3DEvent):void {     
    //moves the panel back on roll over
    Tweener.addTween(myEvent.currentTarget, { z:120, time:.5, transition:"easeInOutQuint" } );
}

private function plane1Rollout (myEvent:InteractiveScene3DEvent):void {
    //moves the panel froward to its original position on roll out.
    Tweener.addTween(myEvent.currentTarget, { z:100, time:.5, transition:"easeInOutQuint" } );
}
        
private function plane1Clicked (myEvent:InteractiveScene3DEvent):void {
    //Resets the panels X rotation
    myEvent.currentTarget.rotationX = 0;
    //Flips the panel 360
    Tweener.addTween(myEvent.currentTarget, { rotationX:360, time:1, transition:"easeInOutQuint" } );
}

Follow this link to view a demo and as usual to view the full source right click the demo.

Plane Projection in Silverlight 3

The latest Silverlight 3 release has included Plane Projection transformations that allow 2 dimensional controls to be projected in 3 dimensions. An excellent article to read to get a feel on how to use the transformations to create psuedo 3d effects -> http://blogs.msdn.com/jaimer/archive/2009/06/03/silverlight3-planeprojection-primer.aspx A quick example emulating this flash template using the Silverlight 3 PlaneProjection can be found here

Embedding Flex Components

Ok, so before I start I have to say that the control is not actually embedded, all I managed it to do is get control as an image and apply it as a material to the plane. Click the image to the right to see the demo you can view the source by right clicking the demo. I am working on getting the material to update when the control updates but that may be a while before it is working perfectly, as this is all I need for the project template.

Reflection

Ok step two was the reflection and now it is done, click on the image below too see the demo.

The source is available if you right click the demo

Using an Embedded Flex Image in Papervision3D

One of the problems had setting up the demo in the previous post was using embedded flex images for materials in the Papervision 3D scene, here is the solution. Create a variable for with the embedded image and the variable for the material.

[Embed(source="assets/earthmap.jpg")]
public var earthMap:Class;
private var moonMaterial:BitmapMaterial;

Create a new BitmapAsset variable cad cast the image class to it.

var earthAsset:BitmapAsset = new earthMap() as BitmapAsset;

Finally assign the new variable as a material.

earthMaterial = new BitmapMaterial(earthAsset.bitmapData);

Papervision3D

Ok so I have started and the first thing I realised when I looked at the template is that it was doing stuff in 3D so I figured that I probably need to learn how to do that. The template was called Ultra biz papervision 3d flash I figured that Papervision3D is what was doing all the 3D heavy lifting it turns out I was right. I downloaded the swc and tried to work it out, this is what I managed.

To view the source right click the movie and select view source.

Project Template

A few weeks ago after spending ages trying to make a cross browser Javascript application and ending up with two lots of code one for IE 7 and one for the rest of the browsers, I decided that there must be a better way enter flex.

I spent a week doing the flex in a week and then it was time to come up with an project to see how this flex thing really works. This is where the contest I won came into play I won $100 of templates and got this template so I figured what better way to learn flex that to try and recreate it using flex instead of boring old flex so project template was born, I will update here as I work through it with all source code included.