Flexでのエフェクトの使用

Flexでエフェクトの使用もちょっとなれてきたので、エフェクトをふんだんに入れてみました。
http://moeten.info/flex/20080327_moetenBeta/bin-release/
＃音声出るので注意！

エフェクトはFlexで用意されているものだけでできてます。
ポイントはバネみたいに動作する easingFunction="Back.easeOut" です。
mx:move にはとりあえずつけておくと動きがそれっぽくなります。
こんな感じに書きます。

//ActionScriptにて追加クラスをインポートしておく
//import mx.effects.easing.*;
<mx:move xFrom="-100" xTo="100" easingFunction="Back.easeOut"/>

そして、左に表示されるツリーで子の数を表示する方法
mxlmにラベル用にファンクションを指定

<mx:Tree id="shopTree" showRoot="false" labelField="@name" labelFunction="tree_labelFunc">
</mx:Tree>

ActionScriptでラベル用ファンクションを作成。「ラベル」⇒「ラベル（子の数）」に変換

private function tree_labelFunc(item:XML):String {
    var children:ICollectionView;
    var suffix:String = "";
    if (shopTree.dataDescriptor.isBranch(item)) {
        children = shopTree.dataDescriptor.getChildren(item);
        suffix = " (" + children.length + ")";
    }
    return item[shopTree.labelField] + suffix;
}

ラベルファンクションはこちらのサイトを参考にさせていただいております。
http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/
英語ですが、ソース＋実際の動作となっており、中身もシンプルですので、購読するとお得です。
すべてのソースはこちら。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FF97F9, #FFFFFF]" color="#BF00A6" fontSize="14"
    creationComplete="init()"
     xmlns:reflector="com.rictus.reflector.*"
     horizontalScrollPolicy="off"
    verticalScrollPolicy="off"
    xmlns:local="*"
      viewSourceURL="srcview/index.html">
<mx:Style>
Panel {
   borderStyle: none;
   borderColor: #ffffff;
   borderAlpha: 1;
   roundedBottomCorners: false;
   cornerRadius: 5;
   headerHeight: 26;
   backgroundAlpha: 1;
   highlightAlphas: 1, 0.58;
   headerColors: #ff3366, #ff99ff;
   dropShadowEnabled: false;
}
VScrollBar {
   cornerRadius: 16;
   highlightAlphas: 1, 1;
   fillAlphas: 0.79, 0.64, 0.48, 0.33;
   fillColors: #ff00cc, #cc3399, #ff66cc, #ff6699;
   trackColors: #cc66ff, #cc33ff;
   themeColor: #cc3366;
   borderColor: #cc00cc;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ICollectionView;
import mx.events.ListEvent;
import mx.effects.easing.*;
private function init():void{
    myEffect.play();
    shopTreeService.send();
}
public function treeChanged(event:Event):void {
    shopSearch.send({
        "tid":Tree(event.target).selectedItem.@tid,
        "cid":Tree(event.target).selectedItem.@cid,
        "sid":Tree(event.target).selectedItem.@sid
    });
    shopData.visible = false;
}
private function tree_itemClick(evt:ListEvent):void {
    onSoundPlay("xbn_funerk.mp3");
    shopDetail.visible = false;
    shopData.visible = false;
    var item:Object = Tree(evt.currentTarget).selectedItem;
    if ( shopTree.dataDescriptor.isBranch(item)) {
        shopTree.expandItem( item , !shopTree.isItemOpen(item), true);
    }
}
private function tree_labelFunc(item:XML):String {
    var children:ICollectionView;
    var suffix:String = "";
    if (shopTree.dataDescriptor.isBranch(item)) {
        children = shopTree.dataDescriptor.getChildren(item);
        suffix = " (" + children.length + ")";
    }
    return item[shopTree.labelField] + suffix;
}
private function onSoundPlay(f:String):void{
    var urlr:URLRequest = new URLRequest(f);
    var sound:Sound = new Sound(urlr);
    sound.play();
}
private function onBgmPlay():void{
    var urlr:URLRequest = new URLRequest("Fm-Friday-10.mp3");
    var sound:Sound = new Sound(urlr);
    sound.play(0,100);
}
]]>
</mx:Script>
<mx:Sequence id="myEffect" effectStart="{myBg.visible=true;}">
    <mx:Parallel effectStart="{onSoundPlay('sf-slap.mp3')}">
        <mx:Parallel target="{logo1}">
            <mx:Fade alphaFrom="0" alphaTo="1"/>
            <mx:Rotate angleFrom="-360" angleTo="0" easingFunction="Back.easeInOut" />
            <mx:Blur blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" />
            <mx:Glow blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" color="0xff0000" />
        </mx:Parallel>
        <mx:Parallel target="{logo2}">
            <mx:Zoom zoomHeightFrom="0" zoomHeightTo="1" zoomWidthFrom="0" zoomWidthTo="1" easingFunction="Back.easeOut" />
            <mx:Blur blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" />
        </mx:Parallel>
    </mx:Parallel>
    <mx:Pause duration="600" />
    <mx:Parallel targets="{[logo1,logo2]}">
        <mx:Zoom zoomWidthTo="2" zoomHeightTo="0" easingFunction="Back.easeInOut"/>
        <mx:Blur blurXFrom="20" blurXTo="20" blurYFrom="20" blurYTo="20" />
        <mx:Fade alphaFrom="1" alphaTo="0" />
    </mx:Parallel>
    <mx:Pause effectStart="{myCanvas.visible =false;myImage.visible=false;myPanel.visible=false}" duration="0"/>
    <mx:Sequence>
        <mx:Parallel target="{myBg}" duration="600" effectStart="{onSoundPlay('sf-softsmack.mp3')}"
             effectEnd="{onBgmPlay()}">
            <mx:Fade alphaFrom="1" alphaTo="0"/>
            <mx:Move yTo="{myBg.height}"/>
        </mx:Parallel>
        <mx:Pause effectStart="{myCanvas.visible=true}" duration="300"/>
    </mx:Sequence>
    <mx:Pause effectStart="{myImage.visible=true;}" duration="600"/>
    <mx:Pause effectStart="{myPanel.visible=true;}" duration="600"/>
</mx:Sequence>
<mx:Sequence id="myShow"   effectStart="{onSoundPlay('xbn_werkyuz.mp3')}"  >
    <mx:Parallel>
        <mx:Zoom zoomHeightFrom="0.9" zoomHeightTo="1" zoomWidthFrom="0.9" zoomWidthTo="1" easingFunction="Back.easeInOut"/>
        <mx:Blur blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" />
        <mx:Fade alphaFrom="0" alphaTo="1"/>
    </mx:Parallel>
    <mx:Glow blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" color="0xff0000" />
</mx:Sequence>
<mx:Sequence id="myShow2"   effectStart="{onSoundPlay('xk-62-frogr2.mp3')}">
    <mx:Move xFrom="500" xTo="{shopData.x}" easingFunction="Back.easeOut"/>
    <mx:Glow blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" color="0xff0000"/>
</mx:Sequence>
<mx:Parallel id="myHide2" effectStart="{onSoundPlay('xk-62-frogr2.mp3')}">
    <mx:Glow blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" color="0xff0000"/>
    <mx:Move xTo="500" easingFunction="Back.easeIn" />
</mx:Parallel>
<mx:Sequence id="myShow3">
    <mx:Parallel>
        <mx:Move yFrom="600" yTo="10" easingFunction="Back.easeOut" />
        <mx:Fade alphaFrom="0" alphaTo="1"/>
    </mx:Parallel>
    <mx:Glow blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" color="0xff0000"/>
</mx:Sequence>
<mx:Sequence id="myHide3">
<!--    <mx:Move yFrom="0" yTo="600" />-->
</mx:Sequence>
<!--都道府県リスト-->
<mx:HTTPService id="shopTreeService" url="http://moeten.info/maidcafe/?m=flex&amp;type=shoplist"
    useProxy="false" resultFormat="e4x" showBusyCursor="true"/>
<!--お店リスト-->
<mx:HTTPService id="shopSearch" url="http://moeten.info/maidcafe/?type=shop&amp;m=api"
    method="GET" useProxy="false" resultFormat="e4x" showBusyCursor="true" result="{shopData.visible = true;}" />
<mx:Canvas id="myCanvas" showEffect="myShow" dropShadowEnabled="true"  dropShadowColor="0xff0000" width="824" height="537"
    cornerRadius="14" backgroundColor="#FFFFFF" borderStyle="solid" borderThickness="2" borderColor="#FF14EC"
    color="#FF08D9" fontSize="14" alpha="1.0" backgroundAlpha="0.3" x="100" y="47"
    horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Image id="myImage" showEffect="myShow" x="244.5" y="0" source="image/top/moeten_title.gif"/>
    <mx:Panel id="myPanel" showEffect="myShow" x="10" y="84" width="796" height="429" layout="absolute"
          horizontalScrollPolicy="off" backgroundColor="0xffccff"  verticalScrollPolicy="off">
        <mx:Canvas backgroundImage="@Embed(source='bg.gif')" width="776" height="406"/>
        <mx:Tree id="shopTree" width="218" height="371"
            showRoot="false"
            labelField="@name"
               labelFunction="tree_labelFunc"
            change="treeChanged(event)"
            itemClick="tree_itemClick(event);"
            dataProvider="{shopTreeService.lastResult.node}" x="10" y="10">
        </mx:Tree>
        <mx:TileList rowHeight="100" width="530" height="371" id="shopData" itemClick="{shopDetail.visible=true}"
             horizontalScrollPolicy="off" dataProvider="{shopSearch.lastResult.item}" x="236" visible="false"
              showEffect="myShow3" hideEffect="myHide3" backgroundAlpha="0.8"
              y="10">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox verticalGap="0" horizontalGap="0" verticalAlign="top" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                        <mx:Image source="{data.image.image1}" width="100" height="100" />
                        <mx:VBox verticalGap="0" horizontalGap="0">
                            <mx:Text text="{data.shopname}" width="400" textAlign="left" fontSize="14" />
                            <mx:TextArea  text="{data.setumei}" width="400" editable="false" height="70" verticalScrollPolicy="off" backgroundAlpha="0" textAlign="left" borderStyle="solid" borderThickness="0" />
                        </mx:VBox>
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:TileList>
        <mx:TileList alpha="0.9" id="shopDetail" click="{shopDetail.visible=false}" width="530" height="371" rowCount="1" columnCount="1" showEffect="myShow2" hideEffect="myHide2"
             horizontalScrollPolicy="off" dataProvider="{shopData.selectedItem}" x="236" visible="false" y="10">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox verticalGap="0" horizontalGap="0" verticalAlign="top" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                        <mx:Image source="{data.image.image1}" width="200" height="300" />
                            <mx:VBox verticalGap="0" horizontalGap="0">
                            <mx:Text text="{data.shopname}" width="300" textAlign="left" fontSize="14" />
                            <mx:TextArea text="{data.setumei}" width="300" editable="false" height="250"
                                verticalScrollPolicy="off" backgroundAlpha="0" textAlign="left" borderStyle="solid" borderThickness="0" />
                        </mx:VBox>
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:TileList>
    </mx:Panel>
</mx:Canvas>
<mx:Canvas id="myBg" width="100%" height="100%" backgroundColor="0xffccff"  x="0" y="0" visible="false"
    >
<mx:Image x="377" y="213" source="logo1.png" id="logo1"/>
<mx:Image x="328.5" y="334" source="logo2.png" id="logo2"/>
</mx:Canvas>
</mx:Application>

音声の前後にできる空白（たぶんギャップ）はどうしたらいいんだろう？