A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: setChildIndex | simple depth issue

  1. #1
    Junior Member
    Join Date
    Jul 2006
    Posts
    21

    setChildIndex | simple depth issue

    Hello, I am creating multiple sprites on the stage using structured classes as shown below, I would like every time I click on one of these sprites to make it go on top of all previously created sprites. I would also like to know if this can be implemented from within the last class "class c" onMouseDown function.

    PHP Code:
    package com.project.A
    {
        public class 
    extends Sprite
        
    {
            var 
    b1:= new B();
            var 
    b2:= new B();
            var 
    b3:= new B();        
        }
    }

    package com.project.B
    {
        public class 
    extends Sprite
        
    {
            var 
    c:= new C();
        }
    }

    package com.project.C
    {
        [ 
    Embed(source="data/images/image.png") ]
        public static const 
    myImage:    Class;
            
        public var 
    image:        DisplayObject;
        
        public class 
    extends Sprite
        
    {
            
    image addChild(new myImage());
            
            
    addEventListenerMouseEvent.MOUSE_UPonMouseUp);            
            
    addEventListenerMouseEvent.MOUSE_DOWNonMouseDown );        
        }
        
        
    internal function onMouseDownevent:MouseEvent ):void
        
    {        
            
    //this sets the index of the display objects created within this sprite only, 
            //but what about with respect to all other sprites created on the stage, how do I tell it in here to go ontop of all other sprites?
            
    setChildIndex(imagenumChildren 1);            
            
            
    startDrag();
        }    

    Thank you

  2. #2
    Junior Member
    Join Date
    Jul 2006
    Posts
    21
    disregard, its parent.parent.setChildIndex( parent, parent.parent.numChildren - 1);

  3. #3
    Member
    Join Date
    Jan 2004
    Posts
    33
    What does this line do ?

    Code:
     [ Embed(source="data/images/image.png") ]

  4. #4
    Junior Member
    Join Date
    Jul 2006
    Posts
    21
    [ Embed(source="data/images/image.png") ]

    What does this line do ?
    this line dynamically embeds the "image.png" within the the swf.

  5. #5
    Member
    Join Date
    Jan 2004
    Posts
    33
    Quote Originally Posted by Flexer
    this line dynamically embeds the "image.png" within the the swf.
    How do I then 'use' this image in my code and why is it between [ ] ?
    (couldn't find anything about 'Embed' in the live docs )

  6. #6
    Registered User
    Join Date
    Oct 2010
    Posts
    1
    parent.parent.setChildIndex( parent, parent.parent.numChildren - 1);

    please explain this staement.

  7. #7
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    Edit: Oh, *******. I didn't look at the posting dates. Why did you bump a 4 year old thread?

    The embed directive is used by the flex compiler (I'm not sure if it's available in Flash, where you have a library for essentially the same purpose) to embed an asset in a way that allows you to treat it as a class. The line following the Embed is the class that will be associated with that asset.

    parent.parent.etc is a terrible way to do this. Never reach up the display hierarchy when there are better alternatives. In this case, you can dispatch an event from your C and catch it in A to handle this. From your parent.parent statement, it looks like you're trying to move the B which holds the C which was mouseDowned. This is a little annoying because there's no direct reference to the correct B in the event so you either have to set such a reference in C or use parent, or do a catch-and-release style of event handling. I think this is due to the odd way the requirement is stated. You say you want to bring the sprite that was clicked on on top of all other sprites, but the display list is not flat, it is a tree. Moving b2 to the top of A's children will not affect the relative depth of b2's children (in this case there's only one C in b2, but there could conceivably be more, and your setchildindex wouldn't handle that). You could move the C to be the top of it's B's children, then move the B to be the top of A's. That sounds most like what you want. So we'll use a ladder of event handlers.

    Code:
    package com.project.A
    {
        public class A extends Sprite
        {
            var b1:B = new B();
            var b2:B = new B();
            var b3:B = new B();        
            addEventListener("bringToTop", bringToTop);
        }
    
        private function bringToTop(e:Event):void{
           var b:DisplayObject = DisplayObject(e.target);
           addChild(b);
        }
    }
    
    package com.project.B
    {
        public class B extends Sprite
        {
            var c:C = new C();
            c.addEventListener("bringToTop", bringToTop);
        }
    
        private function bringToTop(e:Event):void{
           c:DisplayObject = DisplayObject(e.currentTarget);
           addChild(c);
           //dispatch a bubbling event so we can listen for it once in A
           dispatchEvent(new Event("bringToTop", true);
        }
    }
    
    package com.project.C
    {
        [ Embed(source="data/images/image.png") ]
        public static const myImage:    Class;
            
        public var image:        DisplayObject;
        
        public class C extends Sprite
        {
            image = addChild(new myImage());
            
            addEventListener( MouseEvent.MOUSE_UP, onMouseUp);            
            addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown );        
        }
        
        private function onMouseDown( event:MouseEvent ):void
        {   
            //addChild on something that's already a child will bring it to the top.
            addChild(image);
            dispatchEvent(new Event("bringToTop");
            startDrag();
        }    
        private function onMouseUp( event:MouseEvent ):void
        {       
            stopDrag();
        } 
    }
    Now, if you'd like to abstract that and make it work recursively, bringing each ancestor to the top of its sibling list, we can do that too:

    Code:
    package com.project.A
    {
        public class A extends Sprite
        {
            var b1:B = new B();
            var b2:B = new B();
            var b3:B = new B();        
            addEventListener("bringToTop", bringToTop);
        }
    
        private function bringToTop(e:Event):void{
           var kid:DisplayObject = DisplayObject(e.target);
           var p:DisplayObjectContainer = kid.parent;
           while(p != this.parent){
             //put kid on top of all its siblings
             p.addChild(kid);
             //make kid variable kid's parent
             kid = p;
             //make p variable its parent
             p = p.parent;
           }
        }
    }
    
    package com.project.B
    {
        public class B extends Sprite
        {
            var c:C = new C();
        }
    
    }
    
    package com.project.C
    {
        [ Embed(source="data/images/image.png") ]
        public static const myImage:    Class;
            
        public var image:        DisplayObject;
        
        public class C extends Sprite
        {
            image = addChild(new myImage());
            
            addEventListener( MouseEvent.MOUSE_UP, onMouseUp);            
            addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown );        
        }
        
        private function onMouseDown( event:MouseEvent ):void
        {   
            //addChild on something that's already a child will bring it to the top.
            addChild(image);
            //dispatch bubbling event
            dispatchEvent(new Event("bringToTop", true);
            startDrag();
        }    
        private function onMouseUp( event:MouseEvent ):void
        {       
            stopDrag();
        } 
    }
    Last edited by 5TonsOfFlax; 10-22-2010 at 10:32 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center