WEBデザイナーズNEXT

Webデザイナー

引数を使って関数を操作する┃Adobe Animate CC (HTML5 Canvas)

カテゴリー:AnimateCC
Pocket

引数を使って関数を操作

スクリプトを書く上で引数や関数の操作は必須です。

同じようなアクションをさせるのに、その都度定義していくのは面倒だし、負荷がかかりますしね。
今回はAnimateCCで引数を使って関数を操作するあれこれをまとめてみました。

スポンサードリンク

同じような関数を沢山作らず、引数を使ってスッキリさせる

同じような動きをさせる時や、とび先だけ違ったり、一部分だけ違う処理などを書くときに、一つずつ定義をする事は避けたいんです。
ソースは汚くなるし、そもそも負荷がかかってしまいます。

簡潔にできるところはできるだけスッキリ書いた方がいいんです。

引数を使わないで、一つずつ関数を定義する

例えばAnimateCC(旧FLASH)ではフレームの移動をする処理をよく使います。

ここに来たら2フレーム目に飛ばしたい。
ここに来たら3フレーム目に飛ばしたい。

こういう処理をよく使いますよよね。

単純に1つずつ書いていくと以下のような感じになります。

<script>


 

こんな感じでしょうか。
ほとんど同じ処理なのに、一つずつ定義していっています。
2つ程度であればまぁまぁ…いいとしても100個とかになるともう大変です。

それをスッキリさせるために引数を使います。

引数を使ってスッキリとまとめる

<script>


 

このように書けば、同じような処理の時に定義は1回で済みます。引数はいくつも設定できるので、
複数設定したい場合は以下のように書けばよいでしょう。

<script>


 

最初のjump_eventでは、mainを1フレーム目に飛ばし、main.boxを5フレーム目に飛ばす…という書き方です。
これでスッキリですね。

ボタン操作の時も引数を使ってスッキリさせる

Aというボタンを押したら1フレーム目に飛ばし、Bというボタンを押したら2フレーム目に飛ばす…というような処理の場合です。

<script>


 

btnをマウスでクリックしたら、mainが2フレーム目に飛ぶというものを書いてみました。
このような書き方をすれば同じような処理をさせたいボタンをいくつ増やしても定義は一回で済みます。

シンボルの操作も引数で行う

このあたりが中々わかりずらかったです。基本的に私はAnimateCCでコンテンツを作る時はJavaScriptの情報を参考にしていたのですが、
フレームとかシンボル、インスタンス名とかってActionScript(Flah)特有のものなイメージなんですよね。

調べても調べても出てこない…。でも、ActionScriptを書いていた時の事を思い出してなんとなくやってみたらできました。

以下のような書き方で大丈夫でしょう。

<script>


 

mainにあるev1_1をマウスでクリックすると、mainにあるev1_1が2フレーム目からgotoAndPlayするという書き方ですね。

まとめ

引数を使うとスッキリ

アニメーション系の書き方はFlashとほとんど変わらないので問題ないとして、ボタン操作や引数、関数の使い方がある程度わかるようになれば、そこそこのものを作れるようになると思います。

個人的にはFlash(ActionScript)なら書けるのに…phpなら書けるのに…jsなら書けるのに…という事もまだまだいっぱいありますけどね、、、。

Flashのフレーム操作は1からはじまるのに、なぜAnimateだと0からなんだ~っていうのも気になります。これは慣れるまで時間がかかりそうですね。

まぁ…はっきり言ってAnimateCCは慣れるまでに扱いづらい点が沢山あります。
ただ、アニメーションが手軽に書けるAnimateCCはとっても魅力的に感じています。

HTML5はしばらく続きそうなので、HTML5、Canvasのコンテンツ制作スキルはもっともっと上げていきたいと思っています。

Animate CCを使用してゲームコンテンツを作っているので、下の記事も読んでみてくださいね。

スポンサードリンク

Pocket

カテゴリー:AnimateCC
WEBデザイナーズNEXT TOP