本日の内容

• 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]

完成!

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