First off, I’ll just say that this kind of work is enough to cause you to go barking mad. Just set yer hair on fire and start running the halls naked now.
I’ll start off by archiving what I found, then go into “best practices” on how to create a plane using a movieclip that has UIComponents in it.
Findings:
- VirtualMouse has a weird issue when stage quality is set to anything other than LOW and you use coordinate conversion on the values passed in. When set to LOW, it works as expected, but when set to any other setting, the UIComponents only lit up when you moused over the label of a component, not the drawn area and the basic movieclip I had in my test with rollover events didn’t even fire. Only when I moved the movieclip to 0,0, then did getObjectsUnderPoint did it work perfectly under all quality settings. Oye – I don’t know why I’m afraid. But in testing in a pure flash IDE test, quality settings didn’t cause any issues with getObjectsUnderPoint() – so, it’s obviously a VirtualMouse issue.
- When you have a scrollRect defined on a movieclip, getObjectsUnderPoint() does not return any values IF you move the movieclip THEN call getObjectsUnderPoint. Only AFTER the displayList is updated does it work with the movieclip moved. That kinda sucked for what I had to accomplish with PV3D unfortunately. But fortunately, a new feature JUST implemented by Carlos makes this a non issue altogether. I know, you’re asking, why in the WORLD would you be doing such a thing, but it’ll make sense later on as I explain how to use UIComponents with movies used for materials.
-
You might think that if a movieclip/sprite is invisible (visible = false), that it’s not being rendered and therefore, you’re saving on the CPU – this maybe true to a certain extent of course, but if you right click and show redraw regions in the flash player, you can clearly see that if there ARE any visual changes like an animation or rollover state in your movieclip/sprite, you’ll see a redraw region show up right where the animation/visual change is taking place. Now, I’m not at all sure what this means in terms of how much processing is taken up because of it, but it IS causing the flash player to consider that are for SOME type of work.
Now, on to why I’m actually writing this post: How to use UIComponents in materials used on 3D objects with Papervision3D.
Initially, we have to realize what’s happening with UIComponents and what the initial problems are. The UIComponents are, when first added to a movieclip have a certain size, but it’s not the expected/anticipated size you might see when you add them to the Flash IDE stage at design time. What you see is a nice rendered component at design time, but at runtime, if you have *not* added the components to the displayList, you won’t see anything but the component labels, and they’ll be a size you didn’t anticipate.
This is simply because they don’t initialize until ADDED_TO_STAGE event is fired and the Stage property is set. So, for Papervision3D, this poses some problems right off the bat, since we don’t really want the movie clip and components sitting on stage AND wrapped around our 3D object. This means we have to use MovieMaterial and add the movieclip to the stage. Oh, and by the way, there’s another issue – timing. You *can* create movieclip, put it on stage, then create the MovieMaterial and just go on down the list, but there will be the possibility that the user would see this until the components are initialized AND another render has taken place AND the material is told to update:
One thing you’ll notice in this screenshot is that there is a black are at the bottom and the original movieclip is squished. That’s because the original size of the components is much different than after their initialized. In the screen grab below, I’ve put all of the Flash IDE UIComponents on stage and drawn a green bounding box before they intialize and a white bounding box after they initialize. You can see that their sizes change quite drastically and because my checkbox and radiobutton are at the bottom of the movieclip material, the dimensions of the movieclip are thrown off:
You can see in the pic above that checkbox and radiobutton are much taller than their final render and that textArea really never reflects what you visually see. I’m not sure what’s causing it’s size to remain that way, but it is. And the progressbar, slider and color picker don’t have any visual assets until their initialized as you can see.
Ok so what’s the solution to all these issues?!?! I’ll just step down the list in order, post the code and you can play 
- Create your movie clip and then move it off stage where it can’t be seen. In the code below, I move it to -10000. I did some speed tests and it turns out that just simply setting x/y values is faster than using coordinate conversion methods. So, virtualMouse will move your movie to 0,0, then get the objects it needs, then move it back to it’s original location. Since this executes between frame renders, it doesn’t impact the displayList and you never see it happen.
- Create a method like parseComponents() below. The idea is that you go through all of your components, addEventListeners to when they’re added to stage, THEN when they’re all added, create the MovieMaterial and Plane objects.
[as]
// import UIComponent:
import fl.core.UIComponent;
// later…
var cls:Class = getDefinitionByName(“Mc”) as Class;
movie = new cls() as Sprite;
movie.x = movie.y = -10000;
parseComponents();
addChild(movie);
protected function parseComponents():void
{
uiCounter = 0;
for( var i:int = 0; i<movie.numChildren; i++)
{
var mc:DisplayObject = DisplayObject(movie.getChildAt(i));
if( mc is UIComponent )
{
mc.addEventListener(Event.ADDED_TO_STAGE, handleComponentReady, false, 0, true);
uiCounter++;
}
}
trace(uiCounter);
}
protected function handleComponentReady(e:Event):void
{
var uiComponent:UIComponent = UIComponent(e.currentTarget);
uiComponent.removeEventListener(Event.ADDED_TO_STAGE, handleComponentReady);
uiCounter–;
if( uiCounter == 0 ) createPlane();
}
[/as]
NOTE: if you’re working in FlexBuilder or Eclipse, you’ll need to add the fl classes so that you can add the UIComponent import
- Now, after we’re sure all components are loaded, create the MovieMaterial and apply it to your 3D object and pass one more NEW argument: Rectangle:
[as]
protected function createPlane():void
{
movieMat = new MovieMaterial( movie, false, true, false, new Rectangle(0,0,256,256) );
movieMat.oneSide = false;
movieMat.setQuality(StageQuality.HIGH, stage, true);
movieMat.interactive = true;
movieMat.smooth = true;
plane = new Plane(movieMat,256,256,6,6);
plane.yaw(-20);
view.scene.addChild(plane);
}[/as]
Now, one extra cool thing to note here is, that the checkbox and radiobutton are STILL to low and actually cause a hairline black area to be drawn on the material. So, to be even MORE dogmatic about making sure our material stays the same dimensions, you can now pass in a rectangle object to the MovieMaterial. The great thing about this is, it’s used that the time the bitmapData object is created from the source movieclip. Soooooooooooo the scrollRect issue I mentioned earlier is no longer an issue, and you don’t have to incure that cost on your movieclip just for the sake of making sure the UIComponents don’t have inappropriate relations with your dimensions 
Final code:
[as]
package
{
import fl.core.UIComponent;
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageQuality;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.utils.getDefinitionByName;
import org.papervision3d.cameras.CameraType;
import org.papervision3d.materials.MovieAssetMaterial;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
import org.papervision3d.view.stats.StatsView;
public class ComponentMaterialTest extends Sprite
{
public var mc :MovieClip;
public var view :BasicView = new BasicView(0,0, true, true, CameraType.FREE);
public var plane 
lane;
public var mat :MovieAssetMaterial;
public var movieMat :MovieMaterial;
public var movie :Sprite;
public var uiCounter :Number = 0;
public function ComponentMaterialTest()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
}
protected function init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
stage.quality = StageQuality.MEDIUM;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
var cls:Class = getDefinitionByName(“Mc”) as Class;
movie = new cls() as Sprite;
movie.x = movie.y = -10000;
parseComponents();
addChild(movie);
view.camera.zoom = 1;
view.camera.focus = 1100;
addChild(view);
addChild(new StatsView(view.renderer));
addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
}
protected function createPlane():void
{
movieMat = new MovieMaterial( movie, false, true, false, new Rectangle(0,0,256,256) );
movieMat.oneSide = false;
movieMat.setQuality(StageQuality.HIGH, stage, true);
movieMat.interactive = true;
movieMat.smooth = true;
plane = new Plane(movieMat,256,256,6,6);
plane.yaw(30);
view.scene.addChild(plane);
}
protected function loop(e:Event):void
{
view.singleRender();
}
protected function handleComponentReady(e:Event):void
{
var uiComponent:UIComponent = UIComponent(e.currentTarget);
uiComponent.removeEventListener(Event.ADDED_TO_STAGE, handleComponentReady);
uiCounter–;
if( uiCounter == 0 ) createPlane();
}
protected function parseComponents():void
{
uiCounter = 0;
for( var i:int = 0; i<movie.numChildren; i++)
{
var mc:DisplayObject = DisplayObject(movie.getChildAt(i));
if( mc is UIComponent )
{
mc.addEventListener(Event.ADDED_TO_STAGE, handleComponentReady, false, 0, true);
uiCounter++;
}
}
trace(uiCounter);
}
}
}
[/as]
