Action Scriptの初歩

Action Scriptは、Flashでムービー制御やブラウザとの連動などに使われるプログラミング言語です。Action Scriptを使用することによってより高度なFlashムービーを作成することができるようになります。本格的な勉強をすれば、高度なゲームなどを作ることもできますが、ここではごく簡単なところだけ勉強します。

Action Scriptを本格的に勉強したい人はFlash Action Scriptを読んでみてください。

また、Flash CS5では、標準で「ActionScript3.0」のバージョンのAction Scriptを使用しますが、わかりにくいため、ここでは「ActionScript2.0」で説明します。

ActionScript2.0では「命令」をフレームやボタンやムービークリップに記述します。この命令のことを「プログラム」と呼びます。Action Scriptの場合には、「アクション」と呼ぶこともあります。

ActionScript3.0ではフレームにしかアクションが記述できません。必ず、下記のバージョン変更を行ってください。

Action Scriptのバージョン変更

作成しているFlashムービーのAction Scriptのバージョンは、パブリッシュ設定で変更できます。

以下の操作で、Action Script2.0に設定してください。

  1. 「ファイル」メニューから「パブリッシュ設定」を選択します。
  2. 「Flash」タブをクリックします。
  3. 「スクリプト」欄を「ActionScript 2.0」にします。
  4. 「OK」ボタンを押します。

ムービーの停止 stop()

stop()命令をフレームに記述してムービーを停止します。

フレームに記述するアクションのことをフレームアクションといいます。フレームアクションはそのフレームが再生されると実行されます。

  1. 再生を停止したいキーフレームをクリックして選択します。キーフレームになっていない場合には、 いずれかのレイヤーをキーフレームに変換します。
  2. アクションパネルを開きます。アクションパネルに「アクション−フレーム」と書かれているのを確認します。
  3. 一行目に「stop();」と入力します。

以前に作成したアニメーションの最終フレームにstop()命令を入れてみましょう。

ボタンの作成

ムービーの停止・再生等のユーザーのクリック操作をつける場合には、ボタンを作成します。

ボタンシンボルの作成

ムービークリックシンボルの作成と同様にして作成します。

  1. ボタンにしたいのオブジェクトを描画します。
  2. オブジェクトを選択し、右クリックして「シンボルに変換」を選択します。
  3. シンボル名を適当に入力し、「タイプ」を「ボタン」にします。
  4. 「OK」ボタンを押します。

ボタンシンボルの編集

ボタンをダブルクリックして編集することができます。

ボタンシンボルは、「アップ」「オーバー」「ダウン」「ヒット」の4つのフレームから成ります。必要な箇所にキーフレームを挿入することで画像を変更することができます。

ボタンシンボルのフレーム

  • アップ：　通常時のボタンの状態を表します。
  • オーバー：　マウスを載せた時のボタンの状態を表します。
  • ダウン：　クリックした時のボタンの状態を表します。
  • ヒット：　マウスの反応する範囲を描画します。省略時は「アップ」の画像と同じ大きさになります。

ダウンフレームにサウンドを埋め込むことで、クリックした際に音の出るボタンをつくることもできます。（参考：NANO SOUND ボタン音）

ボタン作成の注意

  • ボタン内に他のボタンを置かない

    内側にあるボタンにもスクリプトをつけておかないと反応しない領域ができてしまいます。また、ユーザーインターフェイス的にも、内と外のボタンのどちらが押されるのかユーザーに判断しづらくなりますから、お勧めできません。

  • ボタン内のテキストは「静止テキスト」にする。

ボタンアクションの追加

ボタンの動作をボタンに記述します。

ボタンに記述するアクションをボタンアクションといいます。 ボタンアクションはボタンをユーザーが操作した際に実行されます。

  1. ボタンをクリックして選択します。
  2. アクションパネルを開きます。アクションパネルに「アクション−ボタン」と書かれているのを確認します。
  3. ボタンアクションを入力します。一般的には以下の形をしています。 
    on(release) {
    ボタンの動作
}

１行目と３行目のon(release) { }は、「ボタンを離したら{}の間のアクションを実行する」という命令です。 {}の中の部分を変えるといろいろな機能のボタンを作ることができます。

例　停止ボタン

アニメーションを途中で停止するためのボタンを作ります。

  1. 一番上に新規レイヤーを作成します。他のレイヤーと長さを併せるようにフレームを挿入します。
  2. 作ったレイヤー上にボタンシンボルを作成します。
  3. 作ったボタンに下記のボタンアクションをつけます。 
    on(release) {
    stop();
}

{}の中がstop();命令ですから、「ボタンを話したらムービーが停止する」プログラムになります。

例　再生ボタン

停止したアニメーションを再生するボタンを作ります。

  1. 上記の停止ボタンと同じレイヤーに新しく再生用のボタンシンボルを作ります。
  2. 作ったボタンに下記のボタンアクションをつけます。 
    on(release) {
    play();
}

{}の中は「ムービーを再生する」意味のplay();命令です。

例　最初から再生ボタン

最終フレームにstop();命令を入れたアニメーションを再び再生するための ボタンを作ります。

  1. 新規レイヤーの最終フレームにキーフレームを作成します。
  2. ボタンシンボルを作成します。
  3. 作ったボタンに下記のボタンアクションをつけます。 
    on(release) {
    gotoAndPlay(1);
}

２行目のgotoAndPlay(1)は、「1フレームへ飛んで再生する」という命令です。 数字の部分を書き換えれば任意のフレームを再生することができます。

これを利用してメニュー、クイズ、タイプ診断といったものが作成できます。

例　リンクボタン

URLへのリンクを作ります。

  1. ボタンシンボルを作成します。
  2. 作ったボタンに下記のボタンアクションをつけます。 
    on(release) {
    getURL("URLアドレス");
}

２行目の「URLアドレス」を書き換えて使用します。

  • URLアドレス：　外部サイトのURLアドレス
  • パス/ファイル名：　自分のサイト内の別ページや別ファイルへのリンク

確認する場合には、「パブリッシュプレビュー」の「HTML」を使用します。

課題

  1. サムネイルで３つの画像を表示し、クリックされた画像を大きく写すようなコンテンツを作成せよ。
    画像ビュアー
    • キーフレームを４つ作る。各フレームにstop();命令を入れ、再生が止まるようにする。
    • １フレーム目にメニュー画面を作る。サムネイルでボタンを３つ作り、それぞれ２，３，４のフレームに飛ぶようにする。
    • ２〜４フレーム目にはボタンに対応する画像を貼り、メニュー画面に戻るためのボタンを作る。
  2. 前回の情報メディアセンター紹介に以下のボタンを作成せよ。
    • 再生ボタン、停止ボタン
    • 各教室への頭出しボタン（ヒント： gotoAndPlay()でフレーム数を指定すればよい。）
  3. リンクボタンを作成せよ。下記の2種類を作ること。
    • 常磐大学のWebサイト（http://www.tokiwa.ac.jp）
    • 自分のサイト内の別ページ

Flash

Valid HTML 4.01 Strict

正当なCSSです!