ゆっくりのデスクトップマスコットを作る4(フォント指定、Fadeエフェクトなど)

時計とタイマー機能が完成。あと、文字のフォントとか変えてみました。
まずはフォント変更のやり方を解説します。

こんな風に書きます。

<mx:Style>
        @font-face 
        {
            font-family: Copacetix;
            src: url("nagurip.ttf");
        }

        .MyTextStyle 
        { 
            font-family: Copacetix; 
            font-size: 20pt;    
        }
</mx:Style>

<mx:TextArea styleName="MyTextStyle"/>

これでこのTextAreaにはタグ内のsrcで指定したnaguri.ttfのフォントになります。
font-familyとかはよく知りません。

次に時計や吹き出しなどを出現させたり消したりするのにFadeエフェクトを使っているので、その使い方

private function showClock():void{
                var fadeIn:Fade = new Fade;
                fadeIn.alphaTo = 1;
                fadeIn.alphaFrom = clock.alpha;
                fadeIn.play([clock]);
                clock.visible = true;
}

FadeエフェクトはalphaFromからalphaToへ指定したオブジェクトのalpha値を徐々に変化させます。
これは時計を出現させる処理なのでalphaToを１に指定しています。
playで実行です。引数にはエフェクトを適用するオブジェクトを指定します。

また、エフェクトが終了したときにイベントを設定したい場合はこのようになります。

private function closeClock():void{
                var fadeOut:Fade = new Fade;
                fadeOut.alphaTo = 0;
                fadeOut.alphaFrom = clock.alpha;
                fadeOut.play([clock]);
                fadeOut.addEventListener(EffectEvent.EFFECT_END, function():void{ clock.visible=false;});
}

Fadeエフェクトが終わったときにclockのvisibleをfalseにするという処理です。

時計とタイマーの解説はソースを参照してください。

最後に今回一番勉強になったところはコンポーネントなどの重なり順の変更
このプログラムでは吹き出し画像の上にタイマーや時計を乗せるとうかたちで実装しているので、必ず吹き出しは最下層になくてはならい。
吹き出しや時計などを出現させたり消したりでvisibleプロパティをいじると重なり順が変わってしまって表示が思ったようにいかなくなる。

こんなコードでそれを改善できた

private function showHukidashi():void{
                //Fadeエフェクト
                var fadeIn:Fade = new Fade;
                fadeIn.alphaTo = 1;  //現在のアルファから１に徐々に近づける
                fadeIn.alphaFrom = hukidashiImg.alpha;
                fadeIn.play([hukidashiImg]);
                hukidashiImg.visible = true;
                this.setChildIndex(hukidashiImg, 0);  //吹き出しのレイヤーを一番底にする。
}

これは吹き出しを出現させるメソッド
setChildIndexで吹き出し画像が位置する層を変更している。0が一番底。

ソース