19 Replies Latest reply on Aug 18, 2011 10:46 AM by posit-labs

    Molehill and MXML

    posit-labs

      Has anyone tried making a molehill flex project?

       

      I'm using Away3D4, and I can get the swf to run fine if it's an AS3 project.

       

      When I try running it as a flex project, it doesn't show any of the 3D content. I don't get any compiler or runtime errors...so I think it's just that the spark SpriteVisualElement is incapable of rendering molehill 3D content.

       

      There has to be some way around this!

        • 1. Re: Molehill and MXML
          jaddessi

          It seems that the Flex application covers up the 3D content.  You can set visible="false" to confirm that the 3D content is actually there.  I was able to get the right results by applying a mask to my application where I wanted the 3D content to show through.

          1 person found this helpful
          • 2. Re: Molehill and MXML
            posit-labs Level 1

            That's so weird. Setting the application's visibility to false shows the 3D

            content, but hides all of the UI.

             

            If you'd like to avoid using a mask, just set the application's

            backgroundAlpha to 0. Works just the same, but lets the ui show.

             

            Thanks for the help Jaddessi!

            • 3. Re: Molehill and MXML
              Flex harUI Adobe Employee

              I'm pretty sure molehill draws "behind" the app, just like stage video.  It

              really isn't on the display list.  In mx:Application, backgroundAlpha=0 is

              probably a reasonable thing.  In Spark, I believe you should customize the

              skin to not draw a background.

              • 4. Re: Molehill and MXML
                Sharkow Level 1

                Dissapointing

                Could you share any ideas? What should we do with skins?

                I'm quite new to flash, what's better to read about skins first to fix it?

                Thank you.

                • 5. Re: Molehill and MXML
                  posit-labs Level 1

                  If you just need to see the 3D content of an MXML application, setting the application's backgroundAlpha to 0 works fine.

                   

                  If you need content to extend past the bounds of the 3D content, use a mask on the application

                  • 6. Re: Molehill and MXML
                    Sharkow Level 1

                    posit-labs, do you work with mx or spark? I use spark, and backgroundAlpha=0 doesn't help, as setting visible="false" to the application.

                     

                    Oh well, yes, I need to have other interface besides the 3D content. Could you explain a bit, what is the mask? Just something, I will read about it myself.

                    • 7. Re: Molehill and MXML
                      posit-labs Level 1

                      I'm using Spark. Are you instantiating your game and adding it to a SpriteVisualElement?

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <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"
                          creationComplete="startup()" backgroundAlpha="0">
                          <fx:Script>
                              <![CDATA[

                       

                                  public static var game : CrossBaller;

                       

                                  private function startup() : void {
                                      game = new CrossBaller();
                                      gameContainer.addChild(game);


                                  }

                       

                              ]]>
                          </fx:Script>

                       

                          <s:SpriteVisualElement id="gameContainer"/>

                       

                      </s:Application>

                       

                      Read about masks here

                       

                      You only need to use a mask if you need your UI to extend past the 3D content. If it will just overlap the 3D content, you don't need to worry about it.

                      • 8. Re: Molehill and MXML
                        Sharkow Level 1

                        Strange, I should have seen my scene then. Well, maybe there's smth wrong in my away3D class. Masks will be usefull, thank you.

                        • 9. Re: Molehill and MXML
                          posit-labs Level 1

                          If you post the source somewhere, I'd be glad to help you with it.

                           

                          Or you could email it to me at josh.beckwith AT gmail.com

                          • 10. Re: Molehill and MXML
                            Sharkow Level 1

                            Oh, that would be great. Cause I really have no ideas

                            Here's my code.

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <sh:GDApplication 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:sh="GalleryDraftPack.*"
                                           width="640" height="480" frameRate="60"
                                           backgroundAlpha="0"
                                           creationComplete="application1_creationCompleteHandler(event)"
                                           xmlns:ViewersPack="GalleryDraftPack.ViewersPack.*">
                                <fx:Script>
                                    <![CDATA[
                                        import GalleryDraftPack.ViewersPack.*;
                                        import mx.events.FlexEvent;
                                       
                                        protected function application1_creationCompleteHandler(event:FlexEvent):void
                                        {
                                            var a:A3DViewerBaseClass = new A3DViewerBaseClass();
                                            cont.addChild(a);
                                        }

                                    ]]>
                                </fx:Script>

                             

                                <s:SpriteVisualElement id="cont"/>   


                            </sh:GDApplication>

                            _______________________________________________________

                             

                            public class A3DViewerBaseClass extends Sprite
                                {
                                   
                                    private var view:View3D;
                                    private var material:ColorMaterial;
                                   
                                    public function A3DViewerBaseClass()
                                    {
                                        super();
                                        view = new View3D();
                                        view.x=640/2;
                                        view.y=480/2;
                                        view.camera.z=-500;
                                        view.camera.lookAt(new Vector3D(0, 0, 0));
                                        addChild(view);
                                        view.width=640;
                                        view.height=480;
                                        material = new ColorMaterial(0xe4972a);
                                       
                                        view.scene.addChild(new Sphere(material));
                                       
                                        view.render();
                                    }

                                 }

                             

                            I've also tried visible="false" for the application. I've tried to extend SpriteVisualElement or UIComponent instead of Sprite.

                             

                            Always get a white screen

                            • 11. Re: Molehill and MXML
                              posit-labs Level 1

                              I found the problem! You just have to make it render every frame, not just

                              once when it initializes.

                               

                              package {

                                  import flash.events.Event;

                               

                                  import away3d.containers.View3D;

                                  import away3d.materials.ColorMaterial;

                                  import away3d.primitives.Sphere;

                               

                                  import flash.display.Sprite;

                               

                                  public class A3DViewerBaseClass extends Sprite {

                                      private var view : View3D;

                                      private var material : ColorMaterial;

                               

                                      public function A3DViewerBaseClass() {

                                          super();

                                          view = new View3D();

                                          view.camera.z = -500;

                                          addChild(view);

                                          material = new ColorMaterial(0xe4972a);

                               

                                          view.scene.addChild(new Sphere(material));

                               

                              •            addEventListener(Event.ENTER_FRAME, render);*

                                      }

                               

                              •        private function render(e : Event) : void {

                                          view.render();

                                      }*

                                  }

                              }

                              • 12. Re: Molehill and MXML
                                Sharkow Level 1

                                Omg. I've tried it many times in other implementations with no result, and now this was the only thing missing...

                                Did't manage to avoid a foolish question, exuse me

                                Many thanks 

                                • 13. Re: Molehill and MXML
                                  Arun Viiswanathan

                                  I have the same issue with the 3D content in MXML.I am using a BorderContainerand and I want to add the 3D content on top of the BorderContainer(backgroundColor="#FFFFFF" ).if we use backgroundAlpha=0 then the object loaded at the bottom of the

                                  BorderContainer.I tried to use the mask but not successfull.Can any one please tell me how we can

                                  customise the skin to not draw a background?or how to solve this issue

                                  • 14. Re: Molehill and MXML
                                    Sharkow Level 1

                                    Any Molehill content is always drawn behind all Flex components. We have to live with this

                                    If you want to have controls behind some objects on your 3D scene, it's better to use sprites and implement custom controls.

                                    • 15. Re: Molehill and MXML
                                      Arun Viiswanathan Level 1

                                      Hi Sharkow,

                                                       Is this sprites and cutom controls working for you? I also want to have controls behind some objects on 3D scene. If its working for you could you please give a sample custom control for this..

                                      • 16. Re: Molehill and MXML
                                        posit-labs Level 1

                                        What exactly are you trying to do? I'm having trouble imagining a situation

                                        where controls would need to be rendered behind 3D content.

                                         

                                        If you're just trying to add a border to the 3D content (and the mask isn't

                                        working), why not add a border with css?

                                        • 17. Re: Molehill and MXML
                                          Arun Viiswanathan Level 1

                                          Thanks for your quick responce. I am not trying to give any border to my canvas.

                                           

                                          I am working on Flex 4.5 and my application has the following outline (as shown in attached image):

                                          Main App -> Border Container -> HBox+BorderContainer(3DContentLoader)

                                           

                                          I am adding 3D objects to a last borderContianer. The Hbox has some buttons also.

                                           

                                          The problem is that the 3D objects are getting loaded at the backside of the borderContainer (on top of the main application window). I can see this only when I set the backgroundAlpha of the main application to "0". By this, I am not able to see some of my other 2D components(buttons, labels, etc...); that is another prolem. Any solution to load the 3D objects to the last borderContainer? and also to make the 2D components in main application visible?

                                           

                                          Thanks in advance....

                                           

                                          Arun_3DApplication.JPG

                                          • 18. Re: Molehill and MXML
                                            Sharkow Level 1

                                            Now I can't get you.

                                            So on your picture there's an Application window with the backgroundAlpha set to 0.

                                             

                                            1) If you can't see the 3D content, just set the backgroundAlpha of the corresponding BorderContainer to 0. (In my app I have also the contentBackgroundAlpha=0, but I can't remember, what is that for ). You can do it

                                            in MXML or

                                            by setStyle("backgroundAlpha", 0);

                                            or by defining a transparent backgroundFill in AS.

                                             

                                            2)

                                            I can see this only when I set the backgroundAlpha of the main application to "0". By this, I am not able to see some of my other 2D components(buttons, labels, etc...);

                                            What do you mean? On your picture all of the components are visible. Or are there some, that are not? Where?

                                            Or do you mean, that when the 3D content is displayed, it covers Flex components in the main Application window? It can't be. Are you sure, you are using a Molehill engine?

                                            Anyway you can define an area of the Molehill content on the screen so that it fits your BorderContainer, for example. But the way to do so depends on what engine you are using. Also Adobe has changed some ViewPort principles in FP11 beta, I'm not familiar with them so far.

                                            • 19. Re: Molehill and MXML
                                              posit-labs Level 1

                                              Yeah, basically you can't load 3D content into containers. If you really

                                              want to keep the borderContainer element, then you'll have to use images as

                                              a preview of the 3D models to load - then hide the preview area once the

                                              object is loaded.

                                               

                                              If you can lose the borderContainer, then why not just position the 3D model

                                              on the screen relative to the camera's position?