Flash画面遷移フレームワーク「Progression 4」公式ガイド

第4回 Flex SDK環境における,Progressionを使ったWebサイト構築

この記事を読むのに必要な時間:およそ 18 分

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

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

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

リスト37 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」コマンドを使用します。

リスト38 ロールオーバー設定

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」クラスにも行ってください。

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

図18 ロールオーバーアクションの確認

図18 ロールオーバーアクションの確認

プリローダーの作成

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

図19 プリローダーの確認

図19 プリローダーの確認

リリースビルド書き出し

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

まとめ

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

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

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

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

著者プロフィール

青木健至(あおきたけし)

株式会社CLOQUE. 所属。Flash歴半年。Progression歴半年。Progression無しでのFlash制作は不可。2009年にFlashの技術を会得するために上京し,Progressionプロダクトマネージャーの阿部氏に師事。日々精進中。

http://twitter.com/ichikaku1
URL株式会社CLOQUE