Skip to main content
vgn77
Known Participant
August 25, 2023
질문

weGLへの実装フロー

  • August 25, 2023
  • 1 답변
  • 431 조회

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

이 주제는 답변이 닫혔습니다.

1 답변

Community Expert
August 25, 2023

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

 

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

 

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


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

WebM for Premiere 

vgn77
vgn77작성자
Known Participant
August 28, 2023

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

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

 

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

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

 

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

 

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

Community Expert
August 28, 2023

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

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


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

 

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