MovieMaterial with UIComponent
Papervision3D with FLEX
In the next few lines of this post I’ll show how to use MovieMaterial class in PV3D with UIComponents. At a first glance it might look quite challenging and lots of frustration might occur, I had it too until I found this small resolution.
Basically, all that’s needed is that the component that’s passed in as the movieAsset parameter for the MovieMaterial constructor must be on the stage (that is, must be in the display list of a container and displaying).
The code that’s following is using Papervision3D 2.0.883 swc which can be found http://papervision3d.googlecode.com/files/Papervision3D_2.0.883.swc. The flex app is an Air application, so if if you don’t have Air installed, you can just simply change from WindowedApplication to Application
test.mxml
<mx:WindowedApplication applicationComplete=”initPV3D();” xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute” verticalScrollPolicy=”off” horizontalScrollPolicy=”off“>
<mx:Script>
<![CDATA[
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
private var scene:Scene3D;
private var camera:Camera3D;
private var material:MovieMaterial;
private var plane:Plane;
private var render : BasicRenderEngine;
private var viewPort : Viewport3D;
private function initPV3D():void
{
// create an instance of our component
// note that the component can be already present, created and displaying
// there's no need to be created now
var testComp1 : testComp = new testComp();
// set it's position to be out of the display area (we canno make it
// invisible nor transparent, as any visual changes would show in 3D)
// if you set the layout other than "absolute" then this might not work
testComp1.x = -1000;
// add it to the display list
this.addChild(testComp1);
// create the scene
scene = new Scene3D();
// create the camera
camera = new Camera3D();
// create the renderer
render = new BasicRenderEngine();
// create the viewport
viewPort = new Viewport3D();
// set the viewport to be interactive so that our UIComponent in 3D is interactive
viewPort.interactive = true;
// add the viewport to the display list
this.rawChildren.addChild(viewPort);
// create our movie material: we make it transparent and <b>animated</b>
// (if it's not animated, we won't see responsiveness on mouse or keyboard
// action nor any changes in display)
material = new MovieMaterial(testComp1, true, true);
// set it to be interactive
material.interactive = true;
// let's set it to be double sided
material.doubleSided = true;
// create the plane that will hold our component
plane = new Plane(material,900,900,5,5);
// rotate the plane a bit to appear 3D
plane.rotationY = 30;
// add the plane to the scene's display list
scene.addChild(plane);
// listen for the ENTER_FRAME event so that you can render our scene
addEventListener(Event.ENTER_FRAME, enterFrameEvent);
}
private function enterFrameEvent(event:Event):void
{
render.renderScene(scene, camera, viewPort);
}
]]>
</mx:Script>
</mx:WindowedApplication>
testComp.mxml
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
width=”250” height=”250” backgroundColor=”#FFEA00“>
<mx:Button label=”Button” width=”80” x=”85” y=”33” click=”youClicked(‘button’);”/>
<mx:HSlider x=”10” y=”78” width=”230” change=”youClicked(’slider’);”/>
<mx:CheckBox x=”10” y=”109” label=”Checkbox” change=”youClicked(‘checkbox’);”/>
<mx:RadioButton x=”10” y=”155” label=”Radio” change=”youClicked(‘radioButton’);”/>
<mx:Script>
<![CDATA[
private function youClicked(text : String) : void
{
trace("youClicked: "+text);
}
]]>
</mx:Script>
</mx:Canvas>
On test.mxml horizontalScrollPolicy and verticalScrollPolicy are set to “off” because when we move off stage our component scrollBars will appear, and since we want our component to not show, we don’t want to show scrollbars.
however you mai leave them on when you need them.
Thanks a lot!
The thing I searched for quite a time…
The slider control is buggy but this is a minor problem.
Thanks a lot!