NEWS

2016.09.02 「Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)」を更新しました。

  • Web creators

ActionScript

マウスオーバーで変化するボタン

概要

Flashで作成できるシンボルは「ムービークリップ」の他に「ボタン」タイプもあり、これを利用すると簡単にボタンを作成することができます。
しかし「ボタン」タイプのシンボルはモーショントゥイーンなどアニメーション処理などができません。
そこで、「ボタン」ではなく「ムービークリップ」でボタンを作成し、動きのあるボタンを作成する方法について紹介します。
尚、今回の作成方法は"ボタンの作成2 (『on』)"を流用し、ActionScript3.0で作成しています。ActionScript2.0以前で作成する場合は下記を参照してください。 [参考:ボタンの作成2 (『on』)]

サンプル解説

真ん中のボタンにマウスカーソルを合わすと色が変わり、マウスカーソルが外れると元に戻ります。

作成法

(1)ボタンとなる素材を用意

・ボタンの画像を用意。
(「button_01.png」は通常時、「button_02.png」はマウスオーバー時)

ボタン画像

・ムービークリップ「ボタン_01」を作成し、画像「button_01.png」を配置
・ムービークリップ「ボタン_02」を作成し、画像「button_02.png」を配置

ボタン画像を配置

(2)ボタンシンボルを作成

・ムービークリップ「設置ボタン」を作成

設置するボタンシンボルを作成

・レイヤー「Action」を作成
・レイヤー「Flag」を作成
・レイヤー「マウスオーバー」を作成
・レイヤー「通常時」を作成
・レイヤー「Action」を20フレームまで延長し、2、10、11フレーム目にキーフレームを挿入 ・レイヤー「Action」の1、10フレームに以下のActionScriptを設定

01
this.stop();

・レイヤー「Flag」を20フレームまで延長し、2、11フレーム目にキーフレームを挿入
・レイヤー「Flag」の2フレーム目をラベル「START」を設定
・レイヤー「Flag」の2フレーム目をラベル「END」を設定
・レイヤー「通常時」を20フレームまで延長し、シンボル「ボタン_01」を配置 ・レイヤー「マウスオーバー」を20フレームまで延長し、シンボル「ボタン_02」を配置
(「ボタン_01」が隠れるように「ボタン_02」を配置、「ボタン_02」が前方に来るようにするため、先に「ボタン_01」を配置)
・レイヤー「マウスオーバー」の10、20フレーム目にキーフレームを挿入
・レイヤー「マウスオーバー」の1、20フレーム目の「ボタン_02」のアルファを0%にする

アルファの設定

・最終的に設定した「設置ボタン」のタイムラインは下記となる

シンボルの構成

(3)ステージに配置

・レイヤー「Action」を作成
・ムービークリップ「設置ボタン」をレイヤー「レイヤー 1」のステージに配置
・ムービークリップ「設置ボタン」のインスタンス名を「mc_button」と設定

ステージにシンボルを配置

(4)ActionScriptの設定

・レイヤー「Action」に以下のActionScriptを設定。

01
02
03
04
05
06
07
mc_button.addEventListener(MouseEvent.ROLL_OVER, function(e){
  mc_button.gotoAndPlay("START");
});

mc_button.addEventListener(MouseEvent.ROLL_OUT, function(e){
  mc_button.gotoAndPlay("END");
});

解説

このサンプルはActionScript2.0で作成した"ボタンの作成2 (『on』)"を流用しています。
異なる点は、ActionScript2.0ではステージに配置したシンボルそれぞれにActionScriptを設定できていたものがActionScript3.0からはタイムライン上のみとなった点です。
そのため、シンボル自身がマウスアクションなどを検知していた「on」の変わりに、ステージ上で検知する「addEventListener」を利用しています。
「ボタン_02」の最初と最後のアルファを0%にすることでその下に配置した「ボタン_01」が見えるようになり、マウスオーバーすることにより「ボタン_02」のアルファが100%に近づき、10フレーム目でストップします。
マウスアウトすると11フレーム目から開始され、「ボタン_02」が透明になっていくことで色が変わっているように演出します。

ページ上部へ