【高度】Flash Action ScriptコミュのFlex2のremovedEffectで謎

みなさん、こんばんわ。初めて投稿します、takumaと申します。

ただいま、Flex2でアプリケーション作りにチャレンジしています。
・・・が、原因がよくわからない不具合（？）に悩まされております。なにかアドバイスをいただけると幸甚です。

写真のような四角が円軌道上をぐるぐる回るアプリケーションを作ろうとしています。
この四角を削除（removeChild）するときのエフェクト（removedEffect）を設定しているのですが、うまく消えたり消えなかったりで安定しません。
四角の重なりを制御するために、ソート（setChildIndex）しているのですが、これがどうもいけないようです。ソートの処理（関数rotateRingの、sortAll()）をコメントアウトすると、うまく動作するので。

ソースは以下の2つがあります。

■メインアプリ：FlexSandBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()" >
<mx:Script>
<![CDATA[
private var ringCount_:Number = 7;
private function init():void {
createRing();
addEventListener(flash.events.Event.ENTER_FRAME,rotateRing);
}
private function createRing():void {
for (var k:Number = 0; k < ringCount_; k++) {
var p:Panel = new Panel();
p.x = 0;
p.y = 0;
p.name = "panel-" + k;
canvas_.addChild(p);
}
}
private function removeRing():void {
for (var i:Number = 0; i < ringCount_; i++) {
var p:Panel = Panel(canvas_.getChildByName("panel-" + i));
if (p == null) continue;
canvas_.removeChild(p);
}
}
private var deg_:Number = 0;
private var center_:Number = 150;
private var r_:Number = 80;
private function rotateRing(event:Event):void {
deg_ += 0.2;
var pie:Number = (2 * Math.PI) / ringCount_;
for (var i:Number = 0; i < ringCount_; i++) {
var p:Panel = Panel(canvas_.getChildByName("panel-" + i));
if (p == null) continue;
p.x = center_ + r_ * Math.cos(deg_ + i * pie);
p.y = center_ + r_ * Math.sin(deg_ + i * pie);
}
sortAll();
}
private function sortAll():void {
var panels:Array = canvas_.getChildren();
for (var i:Number = 0; i < panels.length; i++) {
canvas_.setChildIndex(panels[i], panels.length - (i + 1));
}
}
]]>
</mx:Script>
<mx:Canvas id="canvas_" x="0" y="0" width="800" height="600" />
<mx:Button click="removeRing()" x="10" y="340" width="100" height="24" label="remove"/>
</mx:Application>

■四角キャンバス：Panel.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="100" cornerRadius="5"
borderColor="#ff00ff" borderStyle="solid" alpha="1.0"
borderThickness="2" backgroundColor="#ff80ff" backgroundAlpha="1.0"
removedEffect="{myFade}" >
<mx:Fade id="myFade" duration="500" />
</mx:Canvas>

これを実行すると写真のような画面が出てきます。
ぐるぐる回っている状態で「remove」ボタンを押すと、フェードしてちゃんと消えるときと、消えないときがあります。
デバッグ用のプラグインで再生すると、エラーダイアログが出てきます。

その内容は、

RangeError: Error #2006: 指定したインデックスが境界外です。
at flash.display::DisplayObjectContainer/addChildAt()
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::$addChildAt()
at mx.core::Container/addChildAt()
at mx.effects::EffectManager$/::removedEffectHandler()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/::callLaterDispatcher2()
at mx.core::UIComponent/::callLaterDispatcher()

などですが、removedEffectHandler()とやらが裏で何をやっているのかわかりません。
コード的には、境界外のインデックスを参照しているつもりはないのですが。

なにか解決 or 回避のヒントをいただけるとありがたいです。。。

よろしくお願いいたします。