3 Replies Latest reply on Apr 11, 2009 2:36 PM by ergo_eleven

    layered images (noob help)

      Hi all...

       

      A little preface:  I'm absolutely new to FLEX and ActionScript 3.  I'm a designer by trade with fairly extensive PHP programming experience, but almost none when it comes to javaScript.  I'm working on a small project to get myself familiar with FLEX and some ActionScript.  I've been going through video tutorials, all the manuals and books I can find, however I'm not finding the right resources I need (Maybe I'm looking in the wrong places?).  Honestly, I learn by doing rather than being shown how to do it, but I've run out of resources and none of my developer friends know AS or FLEX.

       

      The project I'm working on has many images layered on top of each other.  There's a png that mimics rounded corners to the application, a mask which is applied to a photograph (pulled from XML) and a series of photographs that will rotate under the first masked photo (also pulled from XML).  I can not, for the life of me, figure out how to layer and order the layer of graphics appropriately.

       

      For example:

      I created a canvas container that houses the rounded corners, which should always be on top and visible.  Then I created another nested canvas container that houses the first photo.  This photo always renders on top of the rounded corners and the corners get lost behind it.

       

      How on earth do I set the image layer order in FLEX so that items at the bottom are always rendered behind the items at top?

       

      In my reading, I suspect that I need to make the photo a child object of the container... I can't quite figure this out.  How would I go about doing this if this is the case?

       

      Thanks in advance for any help on this!

       

      md

        • 1. Re: layered images (noob help)
          ergo_eleven

          All display objects in Flex are organized into Display List. You may think this like STACK, in which first added item appears on back and last appears on front.

          Every DisplayObject has methods:

          addChild()

          addChildAt()

          removeChild()

          removeChildAt()

          removeAllChildren()

           

          Also DisplayObjectContainer has:

          contains()

          getChildByName()

          getChildIndex()

          setChildIndex()

          swapChildren()

          swapChildrenAt()

           

          In flex you usualy works with Canvas, HBox, VBox containers.

           

          For more info see http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Liv eDocs_Parts&file=00000148.html

          1 person found this helpful
          • 2. Re: layered images (noob help)
            Level 1

            Thanks!

             

            Reorganizing my containers seems to solved the render order problem.

             

            md

            • 3. Re: layered images (noob help)
              ergo_eleven Level 1

              In Flex there is a common task: layouting components. You takes controls (Button, Checkbox, Image, etc) and puting them into containers (Canvas, HBox, VBox). HBox and VBox arranges (layouts) its children horizontaly or verticaly respectively (avoiding overlapping). Canvas layout its own chidren accordigly its x, y OR top, left, right, bottom attributes.

               

              I guess you added images directly into application (using this.addChild()) rather than adds them into Canvas. You code must looks like:

               

              <mx:Canvas id="container">

                   <mx:Image id="img1" source="file_name1.jpg" />

                   <mx:Image id="img2" source="file_name2.jpg" />

                   <mx:Image id="img3" source="file_name3.jpg" />

              </mx:Canvas>

               

              Or:

              container.addItem(img1);

              container.addItem(img2);

              container.addItem(img3);

               

              Good luck!