Next2D NoCode ToolでJavaScriptを使う[初級編]

Last updated at 2021-12-12Posted at 2021-12-07

NoCode Toolは、JavaScriptを使用した動的なアニメーション制御も可能です。
JavaScriptの制御はキーフレームと同じく、フレーム毎に追加が可能で、主にアニメーションやムービーを反応させたり、タイムライン上でDisplayObjectを制御させたりすることができます。

今日はタイムラインを制御するコードを紹介できればと思います。

事前の情報共有

NoCode ToolのJavaScriptのスコープ(this)はJavaScriptを実行するMovieClipをスコープとして設定しています。

this.play();
this.stop();
this.gotoAndPlay(1);
this.gotoAndStop("EndFrame");

上記のように、スコープ(this)がないと正しく起動しませんのでご注意ください。

それ以外は通常のJavaScriptと何も変わらないため、これまでの記述でもES6記述でも動かす事が可能です。

ムービークリップのタイムライン内で再生ヘッドを移動します。

this.play();

ムービークリップ内の再生ヘッドを停止します。

this.stop();

タイムラインの指定フレームに任意のラベル名を追加する事ができ、追加したラベルの文字列をキーに指定のフレームに移動する事ができます。

サンプル画像では、10フレーム目にJavaScriptを埋め込んでいます。
以下のサンプルコードは同じフレーム番号を指定している事と同義になります。

指定されたフレーム番号もしくはラベル名のフレームから再生を開始します。

下記のJavaScriptを10フレーム目に追加すると、15フレーム目に移動して再生を継続します。

this.gotoAndPlay(15);

下記のJavaScriptを10フレーム目に追加すると、ラベルからフレーム番号を認識して15フレーム目に移動して再生を継続します。

this.gotoAndPlay("target");

指定されたフレーム番号もしくはラベル名のフレームに再生ヘッドを送り、そこで停止させます。

下記のJavaScriptを10フレーム目に追加すると、15フレーム目に移動して、そこで再生を停止させます。

this.gotoAndStop(15);

下記のJavaScriptを10フレーム目に追加すると、ラベルからフレーム番号を認識して15フレーム目に移動して再生を停止させます。

this.gotoAndStop("target");

次のフレームに再生ヘッドを送り、停止します。

this.nextFrame();

直前のフレームに再生ヘッドを戻し、停止します。

this.prevFrame();

如何だったでしょうか？
もし、この記事を見て、興味が出た方はこちらか動作確認ができます。
NoCode Tool

また、その他の関数に関しては、Next2D PlayerのAPI Docsから閲覧できます。

明日はこれらの制御関数や、マウス・タップのイベント制御を行うJavaScriptのサンプルコードを紹介ができればと思います。