weGLへの実装フロー

AEで制作した2DアニメーションをwebGLでサイトに実装する流れや、効率的な方法を知りたいです。

This topic has been closed for replies.

Community Expert

After Effects で作成したアニメーションは、H.264などの動画形式のファイルに書き出すだけで、WebGLの実装は、Adobe Animateなどのオーサリングソフトが使用されます。
WebGL の作成

Adobe Premiere Pro および After Effect の Animate との統合（注意：SWFやFLVという表記がありますが、これらは現在ブラウザが対応していないので使用できません）

webサイトのアニメーションは、数十年前からAnimate（旧名: Flash）で作成されることが多かったと思います。

After Effects の書き出しについては、WebM形式に書き出せるプラグインがあります。
なお、WebMのアルファチャンネルは、iPhoneで無効になると思います。

vgn77Author

Known Participant

ご返信いただき誠に有難うございます。

とても参考になり、大変感謝しております。

AEとAnimateの連携に関しては、

基本的にAnimateのデータをAEに持っていくという流れで、逆のAEからAnimateへデータを持っていく流れはできない認識で合っていますでしょうか。

WebM形式で書き出せるプラグインは教えていただいたものをダウンロードし、使用できましたが、その後の流れをどうしようかと悩んでおります。

書き出し（変換）装置としてAnimateを使うことは良いですが、編集そのものはAEのみで完結したいと考えておりますが、それは難しいでしょうか。

Community Expert

After EffectsのプロジェクトファイルをAnimateに持っていくことは出来ないので、その通りです。

WebMもレンダリングしたファイルになるので、H.264などと同じような使い方になると思います。

検索したところ、下記サイトの管理者がWebGLで動作させる方法を研究されている様なので、参考にしてみてはどうでしょう。
AfterEffectsアニメーションをWebGLで動かす - Qiita

WebGLではありませんが、文中に記載されている「Lottie」を使ってアニメーションを公開しているユーザーは、多いかもしれません。
LottieもAnimateと同じようにベクター画像がメインのアニメーションになるため、使用できるAfter Effectsの機能は制限されています。

Sign up