ロールオーバーアクション

トップページに配置されているボタン「HomeButton」「⁠AboutButton」「⁠GalleryButton」にロールオーバーのアクションを加えましょう。

まず，ロールオーバー時の効果の画像を定義します。[src]→[pages]にテンプレート「MyCastSprite」をコピーし，ファイル名を「Effect」としてください。「⁠Effect」クラスを設定します。

public class Effect extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/effect.png")]
  private var Emb:Class;
  /**
   * 新しい Effect インスタンスを作成します。
   */
  public function Effect( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

次に「HomeButton」ファイルを開き，「⁠Effect」クラスのインスタンスを生成し，イベント「atCastRollOver」内に表示処理を設定します。また，イベント「atCastRollOut」内に削除処理を設定します。アニメーションには「DoTweener」コマンドを使用します。

public class HomeButton extends CastButton {
  private var effect:Effect;
  public function HomeButton( initObject:Object = null ) {
    // インスタンスを生成します。
    effect = new Effect();
    effect.x = -70;
    effect.alpha = 0;
  }
  
  override protected function atCastRollOver():void {
    // アニメーションと表示処理を設定します。
    addCommand(
      new AddChild( this , effect ),
      new DoTweener( effect , { alpha:1 , x:0 , time:.2 , transition:"easeOutCirc" } )
    );
  }
  
  override protected function atCastRollOut():void {
    // アニメーションと削除処理を設定します。
    addCommand(
      new DoTweener( effect , { alpha:0 , x: -70 , time:.2 , transition:"easeInCirc" } ),
      new RemoveChild( this , effect )
    );
  }
}

同様の設定を，「⁠AboutButton」クラスと「GalleryButton」クラスにも行ってください。

設定が完了したらムービーを書き出して確認しましょう。ボタンにポイントが合った時に，画像が表示されるはずです。

プリローダーの作成

プリローダーを作成します。プロジェクトを[Project_sdk]から[Preloader]に変更してください。「⁠Preloader.as」を開き，第3回のプリローダーの項目を参照して，作成してください。ソースの中身は全く一緒で構いません。ソースを記述したら，ムービーを書き出して確認しましょう。

リリースビルド書き出し

ここまで完了したら，FlashDevelop.jpの「リリースビルド書き出し」に記載されている方法でリリースビルドを書き出し，「⁠bin」の中にある「index.html」を開き，ブラウザで確認を行ってください。ブラウザでの確認が完了したら，成功です。

まとめ

今回は結構早足で進めましたが，冒頭で言及したように，サンプルサイトやProgressionについての詳しい説明は以前の回を参照してください。

Flashを使用せずに開発を行う際に注意すべきことは，Flashではシンボルとして扱っていたものもすべてクラスで定義する必要があること，画像を埋め込む時はEmbedタグを使用すると便利である，使用する際はパスに気をつける，などが挙げられます。Flex SDK では Flash に付属の機能はもちろん使用できませんが，Flash を導入しなくても Progression を使用できるのは非常に魅力的だと思います。

なお，今回のソースはこちらからダウンロードできます。フォルダ名は[src_sdk]です。

また，今回はアニメーションを使用していませんが，簡単なアニメーション付きのサンプルコードはこちらからダウンロードできます。プロジェクト名は[Project_sample]です。サンプルコードもFlex SDKを利用しています。