🙆‍♀️

Animate で プログラミングしてみよう Part1 自分で作ったボタンに動きを付けてみよう

2022/04/20に公開

みてもらえたら参考になるかもしれない方

・いきなりプログラミングじゃないけど動きをいれたい
・photoshopとanimateを覚えてアニメーションだけはできるよ

こんなステップだよ

次の画面へ遷移するボタンを作ってみよう

ボタンを作ってみよう

ボタンを選択

各ボタンのアニメーションを設定しよう

マウスを近づけた時、クリックした場合をそれぞれ設定できます
1.ボタンの中身のキーフレームをそれぞれ選択をして「キーフレームの挿入」をクリックします。

ボタンの初期状態

マウスをボタンの上に乗せた時

マウスをクリックしたとき


フラッシュの実行形式で確認してみよう

制御 → プレビューをクリック

ボタン作成結果

ボタン選択をして、クリックするときに色が変わるよ。
https://youtu.be/Fdunc4zluD8

ボタンをクリックして、ダンジョンに入るよ

今回はちょっと発展させて次の動画のような機能を作成してみます。

https://youtu.be/IhJ-QFp5vFs

移動先のシーンを作るよ

挿入→シーンをクリック

移動先のダンジョンが作成される

ボタンをクリックしたときのひな形を設定するよ

「 <> 」をクリック

今回はダンジョン突入ボタン

イベントハンドラー→マウスクリックを選択

アクションにソースコードが追加される

利用したいボタンのイベント追加のひな形が用意される

シーンへの移動処理に差し替える

作成したシーンの名前を「Scene2に差し替えた後に、「function fl_MouseClickHandler(event:MouseEvent):void」の中身を以下のように変更

// ダンジョンシーンへ遷移する
MovieClip(root).gotoAndStop(1,"Scene2");

ここまでのオタク道

参考元資料

ボタン作成詳細説明

公式
https://helpx.adobe.com/jp/animate/using/creating-buttons.html

ボタンのスクショベースで参考にさせていただきました

https://www.ipentec.com/document/adobe-animate-implement-click-event-on-button-symbol

シーン移動関数の詳細

https://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/display/MovieClip.html

Discussion