yoppa.org


Web動画表現技法 2009

第9回:ActionScript3.0:ムービープレーヤーを作る

本日の内容

  • 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のレイヤーに移動して、フレーム内に下記のフレームスクリプトを記述する

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