Flash 存続と一緒に HTML 5 CANVAS 移行についての

問い合わせもいただいているので、そのあたりを少し補完しておきます。

Adobe Animate 2018 における Flash と HTML 5 CANVAS の違い、

ワークフレームはほぼ一緒ですので、抑えておくべき点だけお話しします。

動力

★ HTML 5 CANVAS と FLASH の動力比較

FLASH と HTML 5 CANVAS（以下 CANVAS ）を比べると3倍の動力差があります。

一番の理由は GPU（Graphics Processing Unit）使用の有無です。

FLASH では可能だった複雑な多重アニメーションは CANVAS では高負荷となり、

恐らくまともに動作しませんので、対応として可能な限り材料や処理を削り、

動作確認しながら作成していきます。

ベクターパス〈SVG〉

★ パス制限

左図のような複雑なパスはプレビューの段階で表示されても、

パブリッシュ後パス制限にかかり、非表示になる場合があります。

マスク使用も同様ですので、対応として右図のように表示されるようになるまで

パス量を減らして調整します。

★放射型（円型）グラデーションの崩れ

イラレなどで作成した放射型グラデーションパスを、そのまま CANVAS へインポートして

パブリッシュすると、下図のような円形に沿わない不正確なグラデーションで表示されます。

対応として変形していない正円の放射型グラデーションは

問題なく表示されますので、その正円を CANVAS へインポートし、

バウンディングボックスで変形をかけます。

これでパブリッシュ後、正常に表示されます。

それでも正常に表示されない場合

イラレのグラデーション設定で角度を0、と天地方向を90（100以下）に設定します。

これをANIMATEへインポートすれば正しく表示されます。

基準点（PIVOT）

★ 基準点の設定違い

基準点とはそのオブジェクトの軸となる位置を示します。

例えば FLASH でオブジェクトの中心を基準にしたい場合、

オブジェクト全層をベースボードの中央に置きます。

CANVASの場合、バウンディングボックスに表示される「中央点」が基準となります。

最上層オブジェクトのバウンディングボックスを展開し、

中央点を移動して基準点を設定します。

効果（レンダリング）

★ 使用不可

効果メニュー FLASH（左）と CANVAS（右）、

ご覧の通り CANVAS はあまり用途のない加算のみです。

一般的に使用率の高い「乗算」や「消去」が使えないのが残念です。

特に「消去」は透明度（アルファ）0% でオブジェクトを配置・認識でき、

表示負荷を抑えられることから重宝されていました。

ちなみに CANVAS で透明オブジェクトを認識させるためには、

透明度を 1 %（以上）に設定します。

シェイプトゥイーン

★ 使用不可

FLASHのアイデンティティとも言えるシェイプトゥイーン機能は CANVAS では使えません。

対応として FLASH のタイムライン上で作成されたシェイプトゥイーンの

対象フレーム全てをキーフレーム変換し、その後シェイプトゥイーンを解除することで、

パラパラ漫画のように1フレームごとに絵柄が別れ、

これを CANVAS ドキュメントのタイムラインへそのままコピペすれば、

FLASH と同じようなシェイプトゥイーンが再現されます。

ストリーミング（同期）

★ 使用不可

Flash には映像と音声を同期させたり、1つの音声をトラック化させて分割する

便利なストリーミング機能があります。

残念ながらCANVAS にその機能はなく、映像作品などは作成しづらいと思います。

使用環境によってBGMと映像とのタイミングが変わることから、

YOUTUBEの動画プレイヤーのように正確な時間管理を行う処理を組み込めれば

なんとかなるかもしれません。

スクリプト

★ 一般的なJAVAと異なる

JAVA SCRIPT であることは間違いないのですが、少し異なる文体を用います。

JAVA SCRIPT を標準語とした場合、CANVAS SCRIPT は少し方言が混じった感じでしょうか。

サンプルスクリプト〈ボタンを押す〉

▷ JAVA SCRIPT

Btn.addEventListener("click", Clickon);

function Clickon(e){

//処理

}

　　　　　　▼

▷ HTML 5 CANVAS SCRIPT

this.Btn.addEventListener("click", Clickon.bind(this));

function Clickon(){

//処理

}

CANVAS SCRIPT の場合、先頭に「this」、リスナーの最後に「bind(this)」が入ります。

このように本来の JAVA SCRIPT に少し加筆する必要があり、

一般的なサイトを参考にしてしまうと正常に動作しないことがあります。

一応 Adobe サイトに CANVAS への移行方法と SCRIPT が記載されているのですが、

正常に動作しないものも多いので、海外版ですが下記フォーラムをオススメします。

Adobe フォーラム海外版

▷ https://forums.adobe.com/community/animate

せっかくなので FLASH の ACTION SCRIPT 3、2と、UNITY C言語でも記載しておきます。

▷ FLASH ACTION SCRIPT 3

Btn.addEventListener(MouseEvent.CLICK, Clickon);

function Clickon(e:MouseEvent){

//処理

}

▷ FLASH ACTION SCRIPT 2

//MCに直接設置

on (press) {

//処理

} 

▷ UNITY

if (Input.GetMouseButtonDown(0)){

//処理

}

ACTION SCRIPT 2 と UNITY は割と簡単です。

4 言語使いこなせるようになると、広く考察できるようになります。（笑）

まとめ

現在の FLASH PLAYER のバージョンは 32 です。

CANVAS の動力や機能などを考察した上で、その基準からバージョンを推測すると、

Ver. 7

約 15 年前の FLASH PLAYER 7 のスペック相当すると思います。

Windows2000 で Windows10 を動作させる、

いや、今のスマホアプリを昔のガラケーで動作させる、そんなイメージです。

最近 HTML 5 で作られたゲームを見かけますが、

残念ながら以前のようなリッチな映像表現はなく、なんとなく後退した寂しさ感じています。

今後動力の改善は見込めないでしょうし、

UNITYと比べると、どうしてもパワー不足を感じてしまうことから、

HTML 5 CANVAS には過度な期待をせず、割り切ってサイトなどの映像作成ツールとして

活用していけばいいかなと考えています。

またご質問あればお答えします。