yoppa.org


Webアニメーション 2010

ActionScript (3) : ムービープレーヤーを作る

本日の内容

  • ActionScript 3.0 を用いたより実践的なプログラミングに挑戦する
  • より具体的な機能をもったユーザーインタフェイスを作成してみる
  • ムービプレーヤーを作成する
    • Webで動画を表示・操作することのできる、簡単なムービプレーヤーを作成する
    • コンポーネントを効果的に使用すると、意外と容易に作成可能

完成イメージ

制作テンプレートのダウンロード

まず最初に制作のためのテンプレートを下記からダウンロードしてください。

ムービープレーヤーの作成手順

FLVPlayerの配置
  • ウィンドウ → コンポーネント を開く
  • Videoの中からFLVPlaybackを選択して、ステージ上に配置する
  • FLVPlayqバックを選択して、プロパティウィンドウのパラメータのタブを選択して下記のように設定する
    • インスタンス名:theVideo
    • autoPlay : true
    • scaleMode : noScale
    • skin : パラメータのコラムを選択した状態で、右側の虫めがねのアイコンをクリックする
      • skinの選択画面が表示されるので、リストから SkinUnderPlayStopSeekMuteVol.swf を選択
    • source : パラメータのコラムを選択した状態で、右側の虫めがねのアイコンをクリックする
      • 再生するムービーファイルのコンテンツパスを設定する画面が表示される
      • Popeye_forPresiden768K_000.flv を指定する
  • この状態で一旦ムービーのプレビューをしてみる
    • 画面上でオープニングのムービーが再生されるはず
シーン選択ボタンの配置
  • コンポーネントウィンドウを開く (ウィンドウ → コンポーネント)
  • User Intreface から Buttonを選択
  • ステージ上に、6つボタンを配置する
  • それぞれのボタンのパラメータを次のように設定する
    • インスタンス名: scene0、Label : Scene 0
    • インスタンス名: scene1、Label : Scene 1
    • インスタンス名: scene2、Label : Scene 2
    • インスタンス名: scene3、Label : Scene 3
    • インスタンス名: scene4、Label : Scene 4
    • インスタンス名: scene5、Label : Scene 5
スクリプトの記述
  • actionsのレイヤーに移動して、フレーム内に下記のフレームスクリプトを記述する

[code language=”javascript”]
//それぞれの動画の再生ボタンのリスナーを設定
this.scene0.addEventListener(MouseEvent.CLICK, showScene0);
this.scene1.addEventListener(MouseEvent.CLICK, showScene1);
this.scene2.addEventListener(MouseEvent.CLICK, showScene2);
this.scene3.addEventListener(MouseEvent.CLICK, showScene3);
this.scene4.addEventListener(MouseEvent.CLICK, showScene4);
this.scene5.addEventListener(MouseEvent.CLICK, showScene5);

//動画0を再生
function showScene0(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_000.flv";
}

//動画1を再生
function showScene1(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_001.flv";
}

//動画2を再生
function showScene2(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_002.flv";
}

//動画3を再生
function showScene3(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_003.flv";
}

//動画4を再生
function showScene4(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_004.flv";
}

//動画5を再生
function showScene5(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_005.flv";
}
[/code]

完成!
  • 画面タイトルなどをデザインしたら完成!