烏でもわかるAnimateで作るCanvas 2羽目

#今回の課題
マウスオーバーで画像が暗くなるボタンがつくりたい。
マウスオーバーすると光る！とかでもよかったけど、めんどくさいかなって思ったので暗くなります。
マウスアウトで、もとの明るさに戻ります。



![yahagi-animation.gif](https://qiita-image-store.s3.amazonaws.com/0/43453/da14240f-7ca4-3e04-563d-68cb008ab31f.gif)

#つくってみる
##実現方法
選択状態と非選択状態の画像を2枚用意し、選択状態の画像の不透明度を0→100％にすることで、暗くなったように見せます。
ボタンと言いながら、今回はボタンオブジェクトはつかいません。
ムービークリップだけでゴリゴリつくっていきます。

##用意するもの
1. 適当な画像
2. 1の画像を暗くしたもの(画像編集ソフトでつくっておきましょう)

画像1は非選択状態、画像2は選択状態となります。

##ライブラリの最終的な状態
今回は矢矧さんを使ったので、名付けはyahagi_hogehoge,YAHAGI_hogehogeとします。

すごいざっくりですが、
ビットマップを置いたシンボルは小文字、
ムービークリップを置いたシンボルは大文字、
そのシンボルのインスタンスは同名の小文字。

- YAHAGI_BUTTON
    - YAHAGI_ANIMATION(yahagi_button)
        - yahagi_over 
            - 画像2
        - yahagi_up
            - 画像1 
    - yahagi_up(yahagi_hit)

括弧内はインスタンス名。

##手順
###準備した画像をシンボルに変換する
基本的な動作なのですっとばします。
シンボル名は、画像1を置いたものをyahagi_over、画像2を置いたものをyahagi_upとしました。

###アニメーションをつくる
今回のメインです。
シンボル(ムービークリップ)を新規作成します。YAHAGI_ANIMATIONとします。

####レイヤーをつくる
タイムラインで、レイヤーを新規作成します。
ActionsはコードスニペットをつかうとAnimate側で勝手につくってくれます。
ので、今回は、Flag,over,defaultをつくります。

<img width="174" alt="スクリーンショット 2018-10-19 14.03.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/9f736bfb-4a9b-4eed-6a4b-814dea00b4e1.png">

- Actions：コードを記述する
- Flag：ラベルをつける
- over：yahagi_overを設置
- default：yahagi_upを設置


####レイヤーにシンボルを配置
- overにyahagi_over
- defaultにyahagi_up

を配置します。
このとき、yahagi_upがyahagi_overの後ろに隠れるように(ぴったり重ねて)配置します。
ドラッグアンドドロップで配置した後、一度カットして、中央にペーストするとよいでしょう。

<img width="1040" alt="スクリーンショット 2018-10-19 14.17.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/3694ed59-3428-8ca3-395c-ae81d34d2ca5.png">
overを非表示にすると、yahagi_upがあります。<img width="1038" alt="スクリーンショット 2018-10-19 14.17.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/4a653e58-65f8-e0d4-6b85-a50bc45c8d29.png">



####タイムラインにフレームを追加する
- Flagの2フレーム目、11フレーム目に「キーフレームの挿入」、20フレーム目に「フレームを挿入」
- overの10,20フレーム目に「キーフレームの挿入」
- defaultの20フレーム目に「フレームを挿入」

####Flagのキーフレームにラベルをつける
Flagの2フレーム目に「OVER」、11フレーム目に「OUT」というラベルをつけます。
ラベルはプロパティからつけられます。
<img width="991" alt="スクリーンショット 2018-10-19 14.25.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/31183a08-5927-1de5-f7ec-560c9d56f7fa.png">

####オブジェクトにカラー効果を適用
1. overの1フレーム目を選択
2. 配置してあるオブジェクトを選択
3. プロパティから「カラー効果」→スタイル「アルファ」を選択し、0％に

<img width="298" alt="スクリーンショット 2018-10-19 14.29.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/a277466f-b47d-c5e7-bb63-147fd1c42b1b.png">
同様に、10フレーム目のオブジェクトを選択し、アルファ値を100％、20フレーム目は0％に設定します。

####クラシックトゥイーンを作成
1. overの1フレーム目を選択
2. 右クリック→「クラシックトゥイーンを作成」
3. overの10フレーム目を選択
4. 右クリック→「クラシックトゥイーンを作成」

<img width="997" alt="スクリーンショット 2018-10-19 14.36.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/3522df54-ccd3-0f61-958b-3644ba1d172e.png">

これでアニメーションは完成です。
タイムライン左下の再生ボタンを押してみて、オブジェクトが明→暗→明となっていればOK。

####コードスニペットを適用
1. 1フレーム目を選択
2. コードスニペットから、「HTML5 Canvas」→「タイムラインナビゲーション」→「このフレームで停止」を適用

これでActionsレイヤーが作成されたと思います。
10フレーム目にも「このフレームで停止」を適用しておきます。

YAHAGI_ANIMATIONのタイムライン最終形態はこんなかんじ。
<img width="990" alt="スクリーンショット 2018-10-19 14.45.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/6ddb5160-dcda-884d-17f8-8a72dae701ff.png">


###ボタンをつくる
シンボル(ムービークリップ)を新規作成します。YAHAGI_BUTTONとします。

####レイヤーをつくる

- Actions：コードを記述
- animation：YAHAGI_ANIMATIONを配置
- hit：アタリの役目のオブジェクトを配置

例のごとくActionsは勝手につくってくれますので、どちらでもよい。

####オブジェクトを配置してインスタンス名をつける
- animationにYAHAGI_ANIMATION
- hitにyahagi_up

を配置します。オブジェクト同士がピッタリ重なるように配置しましょう。

- YAHAGI_ANIMATIONにyahagi_button
- yahagi_upにyahagi_hit

というインスタンス名をつけます。
後ろのオブジェクトを選択するときは、レイヤーを非表示にするとよいです。
yahagi_hitはアタリの役割となります。

####マウスオーバーイベントを適用
※ 残念ながらここからコードしか書きません。苦手な人はコピペで。

1. yahagi_hitを選択
2. コードスニペットから「HTML5 Canvas」→「イベントハンドラー」→「マウスオーバーイベント」を選択

```js

/* マウスオーバーイベント
シンボルインスタンス上にマウスが移動すると、独自のカスタムコードを追加できる関数が実行されます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
   シンボルインスタンス上にマウスが移動すると、コードが実行されます。
frequency は、イベントをトリガーする回数です。
*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.yahagi_hit.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
	// カスタムコードを開始
	// このコード例では、出力パネルに "マウスオーバー" という用語が表示されます。
	alert("マウスオーバー");
	// カスタムコードを終了
}
```

これを書き換えていきます。
####書き換えたコード
```js

var frequency = 3;
stage.enableMouseOver(frequency);
//yahagi_hitにアタリをつける
this.yahagi_hit.addEventListener("mouseover", yahagi_fl_MouseOverHandler);

//追加
//関数内ではthisの参照が変わるので必須
yahagi_root = this;

//マウスオーバーするとこの関数が呼び出される
function yahagi_fl_MouseOverHandler()
{
	//追加
	//YAHAGI_ANIMATION(yahagi_button)のOVERラベルから再生
	yahagi_root.yahagi_button.gotoAndPlay("OVER");
}
```

量産することを考えて、関数にもyahagi_をつけておきます。いらない気もする。

####マウスアウトイベントを適用、書き換え
マウスアウトイベントも同様に、

```js
//つづき

//yahagi_hitにアタリをつける
this.yahagi_hit.addEventListener("mouseout", yahagi_fl_MouseOutHandler);

//マウスオーバーするとこの関数が呼び出される
function yahagi_fl_MouseOutHandler()
{
	//追加
	//YAHAGI_ANIMATION(yahagi_button)のOUTラベルから再生
	yahagi_root.yahagi_button.gotoAndPlay("OUT");
}
```


ボタン(ジャンプしないけど)の完成です。
クリックでどこかのフレームに飛ばしたい場合は、yahagi_hitにアクションを追加してください。

###メインタイムラインに配置
メインタイムラインに配置しましょう。
1フレーム目に「このフレームで停止」を適用(おまじない)

完成です。

#おわりに
このボタンつくってたら、なんでもできるような気がしてきました。
きっと気の所為ですけど、初級のいい練習だと思います。


#参考文献
とても参考にさせていただいたサイト
[マウスオーバーで変化するボタン(ActionScript)](http://flashrave.org/as/button_03/index.html)