AdobeAnimateのCREATE.JSとREACTを合わせて使う最も簡単な方法

Reactで作ったWEBにAdobeAnimateが作成したCreate.jsベースのJSファイルを合わせて使う方法のまとめです。

Create.jsとは?

Create.jsAdobeAnimateと呼ばれるAdobe社のオーサリングソフトから吐き出されるJSで使われているライブラリですが、Adobe社の専用ライブラリという意味ではないです。AdobeAnimateは元々はFlashと呼ばれていたソフトでアニメーションをタイムラインベースで作成するソフトです。

Adobe社のAfterEffectsもタイムラインベースのアニメーション制作に使えるソフトですが、書き出しは映像ファイルです。一方、AdobeAnimateはエフェクトをかけないシンプルなトゥイーンベースのアニメーションには便利で、このAdobeAnimateからはhtml5のcanvas向けのアニメーションとしてhtmlとJavascriptを書き出せます。WEB利用には使い所によっては便利です。

https://createjs.com

ReactでAdobeAnimateを使いたい

WEBを立ち上げ、そこでゴリゴリのアニメ表現を使うケースは今の時代にはほとんどありません。UIにギミックとして使うフェード表現やバウンスやイースアニメでアテンションを付ける程度でしょう。一方、表現を追求したクリエイティブなサイトなら、unityやcanvasベースでゼロから2Dや3Dプログラミングする方が適切といえそうです。

WEBはこうあるべきだというお作法や流儀はWEB2.0と言われだした頃から大手IT企業が率いる形で流行り廃りを決めていますが、サイネージのようなクローズドなケースでは話が変わってきます。自由が効きます。

ReactでAdobeAnimateのアニメーションを使う場合は以下が便利です。

https://github.com/bibixx/react-adobe-animate

使い方

基本的なコードはライブラリのサイトを見ればいいので、補足だけをします。

import { AnimateCC, GetAnimationObjectParameter } from "react-adobe-animate";
const [paused, setPaused] = useState(false);
const [animationObject, getAnimationObject] = useState(null);
const composition = "0E53BB0E5E624ACC8312A443C2A94834";
const animationName = "basic";
<AnimateCC
        className="top-animation"
        animationName={animationName}
        composition={composition}
        getAnimationObject={getAnimationObject}
        paused={paused}
      />

animationObjectがMovieClipとなる

これはどこにも書いていないことなので重要です。このanimationObject経由でドキュメントに書いてあるメソッドやプロパティにアクセスすればいいということでした。たとえば、ステージに3つ何かが置いてあって三つ目の透明度をいじる場合は以下となります。

animationObject.children[2].alpha=.2

イベントリスナーをつけて、クリックを感知し、ステージのタイムラインを走らせるケースはこのようにかけます。

animationObject.children[2].addEventListener("click", () => {
              animationObject.play();
            })

https://createjs.com/docs/easeljs/classes/MovieClip.html

コメントを残す