96's blog

WEBサイト制作科 6ヶ月コース

ActionScript02(動く絵とボタン:7/19の内容)

ActionScriptの勉強の入門編として、Flashで動く絵と、それを止めたり動かしたりするボタンを作る。

ここでの作業は、

  • 動かすものやボタンの絵(シンボル)を描く作業
  • フレームやアクションで絵の動き(シーン)を設定する作業

の2つ。

作業しているスペースの枠の右上のところに、シーンとシンボルのアイコンがあるので、切り替えて作業する。

左上には今なんの作業をしているのか名前が出ている。

1)動かすものを描く

  • 挿入→新規シンボルの作成、名前と種類:グラフィック。
  • 絵を描く。

2)絵を動かす

  • シーン1に切り替えて、ライブラリから絵をドラッグしてくる。
  • レイヤー1を選択してモーショントゥイーンを追加し、最後のフレームで絵を移動させる。

3)絵を自動で動かないようにする

  • アクション用にレイヤーを追加する。
  • 1フレーム目を選択してウインドーメニュー→アクション。this.stop();を記述。

4)startボタンを作る

  • 挿入→新規シンボルの作成、名前と種類:ボタン。
  • 絵と文字を入力。ライブラリからプロパティに切り替えると色やフォントを編集できる。
  • レイヤーのアップを選択して右クリックメニューでキーフレームの挿入を選択する。
  • オーバー、ダウン、ヒットにキーフレームを挿入したら、ボタンの色をそれぞれ変える。

5)startボタンを使えるようにする

  • シーン1に切り替えて、ボタン用のレイヤーを追加して、ライブラリからボタンをドラッグしてくる。
  • ボタンを選択し、ウインドウ→アクションを開く。
  • on (release) {play();} を記述。

ctrl+enterで動作確認。

6)stopボタン、backボタンを作成する

  • ライブラリの名前欄にあるstartボタンの項目で右クリックメニューから複製。
  • 作業スペース右上の「シンボルを編集」を切り替え、startボタンを各ボタンに作り換えていく。
  • シーン1に切り替え、ボタン用レイヤーを選んだ状態でそれぞれライブラリから持ってくる。
  • stopにはon (release) {stop();}を記述。
  • backにはon (release) {gotoAndStop(1);}を記述。