Using flex components within a papervision3d application

Question

I am in the process of designing a 3D panorama viewer using papervision3d for the 3D library. I am coding entirely in ActionScript3 using FlashDevelop. I am at the point now where I need to add simple components (button, dropdown menu, toolbar, etc.) I know that using mxml it is easy to create UIs. Does anyone have any experience with creating UIs in mxml and then using them within a papervision3d object? Basically, I want to put a button specified by an mxml file in the middle of my panorama and I have no idea how to do this. Thanks for any help.

Answer 1

I'm doing something very similar: I have been developing a 3D panorama viewer with Papervision3D, with Flex controls added as an interface. (You can check out the current status of the viewer at http://www.panocast.com)

What I did here was exactly the opposite of what you request: I wrapped the Papervision3D view inside a UIComponent, and placed that into an MXML file. By putting it in a Canvas, I was able to position the controls on top of it. Here's how:

<mx:Canvas width="100%" height="100%">
 <!-- the main panoarama player object -->
 <pp:PanoViewer id="pv" width="100%" height="100%" />

 <!-- horizontal control bar -->
 <mx:HBox id="controls" bottom="10" left="10" right="10">
  <!-- rewind & play/pause buttons -->
  <mx:ButtonBar id="playbackButtons" buttonWidth="26">
   <mx:dataProvider>
    <mx:Array>
     <mx:Object icon="@Embed(source='../../../../assets/rewind.png')" toolTip="Rewind video" name="rewind" />
     <mx:Object icon="{playIcon}" toolTip="Play video (space)" name="play" />
    </mx:Array>
   </mx:dataProvider>
  </mx:ButtonBar>
 ...

etc.