title: Integrate Flare3D into a Flex application
body: <p>I'm building an application with the <a href="http://flex.org/" rel="nofollow">Flex</a> framework and the 3D graphics library <a href="http://www.flare3d.com/" rel="nofollow">Flare3D</a>.<br>
  I want to be able to embed my 3D scene into an MXML application and still have the mouse events dispatched to the 3D scene.</p>
  
  <p>Here is my code:<br>
  - The MXML app:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                 xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:mx="library://ns.adobe.com/flex/mx"
                 xmlns:views="views.*"
                 minWidth="955" minHeight="600" 
                 backgroundAlpha="0"&gt;
  
  &lt;s:HGroup width="100%" height="100%"&gt;
  
      &lt;s:Panel width="250" height="100%"&gt;
      &lt;/s:Panel&gt;
      &lt;views:MyView 
          id="myView" 
          width="100%" height="100%" /&gt;
  
  &lt;/s:HGroup&gt;
  &lt;/s:Application&gt;
  </code></pre>
  
  <p>The UIComponent responsible of the 3D rendering (just a cube).</p>
  
  <pre><code>package views
  {
  
  import flare.basic.Scene3D;
  import flare.basic.Viewer3D;
  import flare.core.Camera3D;
  import flare.primitives.Cube;
  
  import flash.display.Stage3D;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.events.Event;
  
  import mx.controls.Alert;
  import mx.core.UIComponent;
  
  public class MyView extends UIComponent
  {
  
      private var scene:Scene3D;
      private var stage3D:Stage3D;
  
      private var cube:Cube;
  
      public function MyView()
      {
          super();
          this.addEventListener(Event.ADDED_TO_STAGE, init);
      }
  
      public function init(event:Event):void 
      {
          stage.scaleMode = StageScaleMode.NO_SCALE;
          stage.align = StageAlign.TOP_LEFT;
          //stage.focus = null;
          //stage.getChildAt(0).visible = false;
  
          scene = new Viewer3D(stage);
          scene.setViewport(250, 0);
          scene.addEventListener(Scene3D.PROGRESS_EVENT, progressEvent);
          scene.addEventListener(Scene3D.COMPLETE_EVENT, completeEvent);
  
          scene.camera = new Camera3D();
          scene.camera.setPosition(150, 150, -300);
          scene.camera.lookAt(0, 0, 0);
  
          cube = new Cube("cube");
          scene.addChild(cube);
      }
  
      protected function progressEvent(e:Event):void {}
      protected function completeEvent(e:Event):void {}
  
  }
  }
  </code></pre>
  
  <p>The problem is that the 3D rendering is done by default in a "layer" that is behind the 2D layer (where we can put MXML components).<br>
  By default, if we mix 3D and 2D elements, we can't see 3D elements.<br>
  So I added <code>backgroundAlpha="0"</code>. This solved the problem of showing the 3D view.
  But now I have another problem, I can't move the cube (which is the default behaviour) when I click on the scene and move the mouse.
  I understand that this is because the 3D view is behind the 2D view.  </p>
  
  <p>Is it possible to give the 3D view the focus for mouse events (when it's needed) ?<br>
  Or is there a different way of doing what I want ?
  The only hack I figured out is to uncomment this <code>//stage.getChildAt(0).visible = false;</code> which make the 2D view invisible. But I want to mix 2D elements and 3D view, so it's not a solution.</p>
  
  <p>Thanks for any help.</p>