How to swap your children

This post was written by jimrobson on June 3, 2007
Posted Under: Flex

Have you run into issues when trying to swap your children? Rest assured - you are not alone.

The Flex 2 docs boast about how much easier depth management is in ActionScript 3. However, they don’t seem to mention that swapChildren() and swapChildrenAt() are buggy.

I was going crazy trying to manage the depth of some UI components till I discovered this Flexcoders post by Gordon Smith, which mentions the bug and a workaround.

The workaround suggested by Gordon, while somewhat klugy, does seem to work reliably. The basic idea is to use removeChild() and addChild() instead of swapChildren(). There is a gotcha here, though. You have to be careful to remove and add the children in the correct order, or you’ll be slapped with out-of-range errors at runtime. I put together a simple app to illustrate the bug and demonstrate the workaround. You can view the app here (right-click to download the source).

I’m feeling somewhat nostalgic for the days of Flash 8 and below, when you could put a movie clip at any depth that you felt like putting it. It didn’t matter whether or not there was anything at depth 9,999; you could still have your pop-up float around at 10,000. With the new display list approach, you no longer have that flexibility.

However, the ability to traverse the display list is a big advantage, and once Adobe gets all of the kinks worked out the new system will probably be far better than the old.

  • View sample here (when the app opens, right-click to view and download the source). (UPDATED LINK)

Reader Comments

Okay, first off…
I was really disturbed by the title. I thought you were launching some new reality TV show sequel to “wife swap”. (Can you imagine the problems such a show might incur… “I want to keep this child. I don’t want mine back!”) Alas, my first child is due in a couple of weeks. I think I will keep her for a while and not swap for a different one.
That said…
- How does one determine what is the correct order and can you change the order?
- Do you know if the swapChildren has been fixed in Flex 3?

#1 
Written By The Saj on June 18th, 2007 @ 12:30 pm

Absolutely keep her. I have three hers and a him, and I wouldn’t trade any of them for anything.

Regarding the order - you need to remove the highest child first, or the Flash player will interpret it that you’re trying to remove something that’s not there. Here’s what I mean:

Suppose you have objects up through depth 10, and you want to swap the objects at depths 9 and 10. With ActionScript 3 the Flash player no longer allows you to have empty layers, so if you remove the object at depth 9 first, the Flash player moves the object at depth 10 down one to fill up the empty slot: As a result you now have objects only up through depth 9. Therefore, when you try to remove the object at depth 10, the Flash player tells you (correctly) there’s nothing at that depth.

Similarly, you need to restore the objects starting at the lowest depth; otherwise you’ll be trying to add something at depth 10 when depth 9 is empty, and that’s no longer allowed (sigh…).

#2 
Written By jimrobson on June 18th, 2007 @ 1:02 pm

Okay, I see now…

So AS3 essentially collapses the array/list of depths. So if you have 10 objects at depths 1-10 and you remove the 7th object, Flash will now automatically reduce the array/list elements by one and move 8, 9, and 10 down one level.

Can you clarify what happens if I add a child at depth level 4. Would the movieclip already at level 4 be moved up up to level 5 and so on and so on. Or would the movieclip simply over-write the prior level 4 object.

It would seem advantageous if one were able to insert and have all the others bumped up.

- Saj

#3 
Written By The Saj on June 18th, 2007 @ 2:29 pm

The former: when you add a display object at a specified depth using addChildAt(), any display objects at that depth and higher are bumped up one, and nothing is lost.

#4 
Written By jimrobson on June 18th, 2007 @ 4:20 pm

My child has just turned 1. I don’t want to swap her. But I wouldn’t mind reading more posts by Jim Robson.

;)

#5 
Written By Jason The Saj on July 28th, 2008 @ 4:48 pm

OK but if we do that to reorder our canvas in Air application

Canvas 1, Canvas 2 are two window we want to bring these
in front or back of each other,

What are the mechanism, are swap work on this???

#6 
Written By Tahir Alvi on December 26th, 2009 @ 5:09 am

thank!

#7 
Written By rarlvorgoge on March 7th, 2010 @ 12:23 pm

You example link is dead. Would be great to have it back.

#8 
Written By Arend on September 22nd, 2010 @ 7:18 am

Trackbacks

  1. Jim Robson » MAX 2007, Day 1  on October 2nd, 2007 @ 3:52 am
Next Post: Fun with bubbles