NEWS

2017.10.21 「バージョンごとの機能比較」を更新しました。

  • Web creators

ActionScript

ボタンの作成2 (『on』)

概要

ActionScriptを使用することで動きのあるボタン作成が可能になります。

サンプル解説

マウスがボタンに接すると動作します。
また、マウスをボタンから離すと元の位置に戻ります。

作成法

(1) シンボルの作成
  ・ボタンの背景を作成。(下図では画像を使用)
ボタンの背景の作成
  ・動作するパーツを作成。
動作するパーツの作成
  ・ボタン本体をムービークリップ属性で作成
ムービークリップ属性で作成
(2) ボタン本体にアニメーションの設定
  ・ActionScriptを設定するレイヤー作成する(レイヤー名をActionとする)
  ・フラグを設定するレイヤー作成する(レイヤー名をFlagとする)
  ・背景を設置するレイヤーを作成し、ボタンの背景を設置(レイヤー名を背景とする)
  ・レイヤー1に下図のように動作するパーツを設置
パーツの作成
  ・Actionレイヤーの1フレーム目と10フレーム目にActionScriptを設定
 
01
stop();
  ・Flagレイヤーの2フレーム目から10フレーム目までを「START」とフレーム名を設定
  ・Flagレイヤーの11フレーム目から20フレーム目までを「END」とフレーム名を設定
(3) シンボルをステージに配置
  ・作成したボタンをステージに設置
  ・作成したボタンのインスタンス名を「BU_01」と設定
ステージへ設置
(4) 設置したボタン選択し、ActionScriptを設定
 
01
02
03
04
05
06
07
on (rollOver) {
 _root.BU_01.gotoAndPlay("START");
}
 
on (rollOut) {
 _root.BU_01.gotoAndPlay("END");
}

解説

(2)の1フレーム目は何もしていない時の動作で、2から10フレーム目はマウスがボタンに接した時の動作です。
ActionScriptでストップ設定しているので、途中で止まります。
11から20フレーム目はマウスがボタンから離れた時の動作で、最終的には1フレーム目に戻り止るようになっています。
また、Flagフレームに「START」や「END」と設定しているのは、(4)で意図したフレームにジャンプするための設定となっています。
(4)で『on (press)』等も使用すればクリックした時の動作も加えることが可能です。

ページ上部へ