ボタンによるコントロール(ActionScript2.0)

ボタンにアクションスクリプトを書いて特定のフレームに移動します。

このページはwindows版CS3で制作しています。アクションスクリプトは2.0を使用します。参考アクションスクリプト3.0

  1. 新規ドキュメントを作成しますこの時Flashファイル（AS2.0）を選択します。今回はActionScript2.0を使用します。新規ドキュメントを作成しますこの時Flashファイル（AS2.0）を選択します。
  2. キャンパスを設定します。リンク先1から5。キャンパスサイズは画像のサイズにより変更します。
  3. メニューバーのファイル→読み込み→ステージに読み込みで用意した画像を読み込みます。
  4. 読み込んだ画像をキャンバスにドラッグします。ガイドにピッタリと合わせ配置します。読み込んだ画像をキャンバスにドラッグ
  5. シンボルに変換レイヤー1の1フレーム目に配置されました。この画像をクリックして選択した状態にしてメニューバーの修正→シンボルに変換で画像をシンボルに変換します。任意の名前をつけます。タイプはムービークリップを選択
  6. レイヤーの追加レイヤーを追加します。タイムラインパネルの下にレイヤーの追加ボタンがあるのでクリックします。新規レイヤーが作成されるのでレイヤー名の上でダブルクリックしてわかりやすいレイヤー名に変更しておきます。（レイヤー1がmv1、レイヤー2がmv2）
  7. 追加したレイヤーにの1フレーム目を選択して2つ目の画像を配置し、ムービークリップのシンボルに変換しておきます。
  8. 30フレーム（任意のフレーム）で右クリックしてキーフレームに変換を選択。1フレームにあるシンボルと同じものが29フレーム目まで配置されます。30フレームにあるシンボルも1フレーム目と同じものですがキーフレームなので独立しています。レイヤーが2つあるので両方とも同じ操作をしておきます。この時shiftキーを押しながら別のフレームを選択すると複数フレームが選択できるので1度の操作で複数フレームに同じ操作を適用できます。
  9. 30フレーム目にあるシンボルを左に移動します。上下がずれないようにshiftキーを押したままドラッグします。動きの最終位置になります。最終位置に画像を移動
  10. このままでは1から29フレーム目まで同じ表示で30フレーム目で急に画像の位置が変わります。（任意のフレームをクリックして表示を確認してください。）
  11. プロパティインスペクターからモーショントゥイーンを選択1フレームを選択しプロパティインスペクタのプロパティータブのトゥイーンからモーションを選択します。2フレームから29フレームまでが1フレームと30フレームの位置の違いをなだらかに補完してくれます。1フレームから30フレームにかけて画像が横にスライドするようになりました。1フレーム目をクリックし選択状態でenterキーををすとムービーを確認することが可能です。このままでは上にあるレイヤーの動きしか見ることができません。
  12. スライドしていくところを連続して見せるため下のムービーのフレームをずらします。1フレーム目をクリックし選択状態にしたら30フレーム目にマウスポインタを移動しshiftキーを押しながらマウスクリックをします。1フレーム目から30フレーム目が選択されます。shiftキーから手を離し選択フレームをドラッグして31フレーム目に移動します。ムービーのフレームをずらします
  13. 連続して再生されますが上のレイヤーの画像がスライドしていく間、下のスライドには画像がありませんのでキャンバスの白地が見えてしまいます。
  14. レイヤーを追加します。追加したレイヤーのレイヤー名のあたりをドラッグし一番下になるようにレイヤーを移動します。移動したレイヤーにわかりやすい名前をつけます。（ここではbk）
  15. 上のレイヤーの動きが見えている間はその次のレイヤーの画像を、下のレイヤーの動きが見ている間は上のレイヤーの画像が下にあるように見せるため下の31フレーム目（下のレイヤーの画像のあるところ）を右クリックしてコピーします。今作ったレイヤーの1フレーム目に張り付けます。1フレーム目（上のレイヤーの画像のあるところ）を右クリックしてコピーし今作ったレイヤーの31フレーム目に張り付けます。1から30、31から60フレーム目にトゥイーンが効いていたらフレーム間で右クリックしトゥイーンを削除します。
  16. ここまででflashの動きの部分は完成です。次にマウスポインタが上に来た時に動きを制御するためのボタンを1つのボタンごとに新規レイヤーを作成し1フレーム目に画像を配置し、画像をクリックして選択した状態にしてメニューバーの修正→シンボルに変換で画像をシンボルに変換します。タイプはボタンです。ボタンの配置
  17. ボタンによるフレームの移動の目安にするためフレームに名前をつけます（フラグを立てるといいます）。名前を付ける（フラグを立てる）ためのレイヤーを新規で作成します。作成したレイヤーの31フレームをキーフレームに変換します。（右クリックのメニューから選択）1フレーム目は最初からキーフレームなので1と31フレームがキーフレームになります。
  18. フラグを立てる1フレーム目を選択しプロバティインスペクターのフレームに任意の名前をつけます。今回はmv1とつけました。同様に31フレームも任意の名前 mv2をつけます。
  19. onハンドラのrollOver（マウスポインタがボタン上に移動した場合）を使用します。
  20. アクション・ボタン先ほど配置したボタンをクリックして選択します。アクションパネルを開きます。この時タブがアクション・ボタンになっていることを確認します。アクション・フレームだとうまくいきません。一度違うところを選択し、再度ボタンをクリックし、アクション・ボタンになるようにします。ActionScript1.0&2.0になっているのを確認し
    on(rollOver){
    gotoAndPlay("フラグ名");
    }
    を入力します（改行は任意）。"フラグ名"にはマウスが上に来た時に移動したい先のフラグ名を記述します。もう一方のボタンも同様にします。
  21. リンクの設定クリックしたときにリンクをかけたい場合はアクションパネルの同じ場所に
    on(release){
    getURL("リンク先URL");
    }
    を記述しておきます。
  22. パブリッシュして完成です。