GIFアニメーション同士を重ね合わせる(合成する)のはAviUtlで簡単に出来るんです

最近GIFアニメーションの記事を多数書いておりますが、今回は……

GIFアニメーション同士を重ね合わせる(合成する)

簡単な方法を解説してみます。

弊ブログでは、もう既に何度も何度もしつこいくらいに(笑)……

動画や写真(静止画)とGIFアニメーションを合成するのに、どちらのファイルも一旦バラバラにコマ画像に分解して、動画(静止画)側のコマ画像にGIFアニメの1コマ1コマを貼り合わせて、それらの大量な合成静止画をもう一度GIFアニメに組み立てるなんて気の遠くなるような作業をしている人達が大勢いらっしゃるようなんですが、そういう超面倒で腱鞘炎でも起こしそうなくらいに疲れる編集作業方法はもう止めにしましょう(笑)

と唱えて来てます(笑)
そう、もう今の時代はバカチョン(死語ですかね~(笑))的にそのような合成は 『 AviUtl(エーブイアイ・ユーティル) 』 で出来てしまうのですよ。
それは、弊記事タイトルのように「GIFアニメーション同士の合成」でも同じことなんです。

今回も、サンプルGIFアニメを交えて解説して行きます。

AviUtl(Windows・無料) は公式サイトAviUtlのお部屋から入手出来ます。

さて、それではとりあえず今回GIFアニメーション同士を重ね合わせた(合成した)、その元となったGIFアニメーションをご覧下さい。

出典①: 「夕焼け空2a gifアニメ
夕焼け空2a gifアニメーション
出典②: 「犬と飛行機
犬と飛行機のGIFアニメーション

この2つをお借りしてAviUtlで重ね合わせ(合成)して、1つのGIFアニメーションに作ってみました。
その結果が……

合成したGIFアニメーション
[ 画像クリックで GO & STOP ]

これなんです~(笑) どうです? しっかり合成出来てるでしょ ヽ(^^ ) ヨシヨシ


GIFアニメーション同士を重ね合わせる(合成する)

AviUtl でGIFアニメーションを動かす設定をする

え゛~~~?? AviUtlじゃGIFアニメって動かせないよね~!
  読み込んだら静止画になっちゃうよね~!
って言う方達が多いんですけど、実は動かせるんです。
AviUtlをインストールしたままのデフォルトでは動かせませんが、魔法の呪文(笑)をある部分にチョイと書き込むだけで編集画面上でもGIFアニメが動くように出来るのです。

さて、その方法は……

exedit.iniファイルのある場所

AviUtlをパソコンにインストールした先のフォルダ内にある『exedit.ini』と言うファイルにその魔法の呪文を書き込むのです(笑)
正確には「書き換える」んですが、、、。
この『exedit.ini』と言うファイルは設定ファイルなんですが、AviUtlのバージョンによっては所在する位置が違うようですので、インストール先フォルダ内を探してみて下さい(バージョンは違っても必ず存在しておりますから)。

でもAviUtl って、どこにインストールしたんだっけ? (^_^; アハハ…

えっ? そもそもAviUtlって、いったい何処にインストールしたんだっけ? って方が殆どでしょう(笑)
そういう方は、あなたのパソコンでAviUtlを起動する時のショートカットアイコン AviUtlショートカットアイコンの様子 を右クリックして下さい。
そしてプロパティをクリックすると、私のパソコンの場合には……

D:\Program Files\aviutl_plus_20120619\aviutl.exe

こんな場所にインストールしてあることを知ることが出来ます。
つまり Dドライブ→Program Filesフォルダ→aviutl_plus_20120619フォルダ にインストールしてある訳です。
普通は、何も考えないでインストール先を無指定でアプリをインストールすると、大抵のパソコンは「Cドライブ(起動ドライブ)」にインストールされます。

exedit.ini ファイルの中身を書き換えるには

さあ、exedit.ini ファイルにその魔法の呪文を書きましょう(笑)
ただ、このような ○○○.ini と言う拡張子のファイルは、普通は単にクリックしても開けません。
普段より「テキストエディタ」と呼ばれるエディタアプリを使い慣れてる人でしたら、恐らくは既にこのようなファイルに関連付けしてあって、クリック1発でそのエディタアプリが立ち上がって開けると思いますが、そのような知識のない方は今回の場合はとりあえずは「メモ帳」でも大丈夫ですから、メモ帳を起動してそこに……

exedit.iniファイルをメモ帳にコピーした様子

上図のように exedit.ini ファイルをドラッグ&ドロップして下さい。
そして
gif=画像ファイル となっている部分だけを gif=動画ファイル となるように書き換えてからメモ帳メニューの「ファイル(F)」→「上書き保存(S)」をクリックして保存して下さい。
魔法の呪文書き(笑)はこれで終了で、これでAviUtl編集画面上でGIFアニメが動かせるようになります。
同ファイルの他の部分は弄らないで下さい。

■ 追記 2020/02/27
尚、上記設定をした・してあるにも関わらずまだエラーが出る(ポップアップ)場合には、もう1つの原因が考えられますので、下記ブログカードをクリックした先の記事の「 原因 その2 」をご参照ください。

Webテク倉庫のアイキャッチ画像

AviUtl にGIFアニメーションを読み込めない2つの原因と対処方法はこれ

弊ブログでは、カテゴリ「 GIFアニメーションの作り方 」の記事を多数書いておりますが、そこに『 AviUtl GIFアニメーションが読み込めない 』とググって、弊ブログ記事にアクセスしてくださる方がとても多いんです。...


さて、もう1つ事前に大事な作業が必要です。
それは、GIFアニメーション同士を合成して完成したものを「GIFアニメーションとして保存する」為に必要な初期設定作業ですが、これも簡単に出来ます。

GIFアニメーションとして保存する為の初期設定

メニュー Animated GIF Export 表示の様子

このようにAviUtl本体画面上部のメニューの「ファイル」→「プラグイン出力」→「Animated GIF Export」とクリックして、保存ファイル名を設定して保存するのですが、AviUtlをインストールしたデフォルトのままでは、実はこの「Animated GIF Export」メニューは存在してないのです。
要は、AviUtlのデフォルトのままでは、保存出来るファイルは「○○○.avi」のように動画ファイルだけなのです。
ですから、GIFアニメーションとしての保存を実現するには 「Direct Animated GIF Export Plugin」 というプラグイン機能を追加導入する必要があるのです。
AviUtlはこのように、多彩な機能のプラグイン追加によって、どんどん優れものアプリに成長出来るのです。

動画ファイルとして保存するのでしたら、このプラグインの追加は必要ありません。

AviUtlに Direct Animated GIF Export Plugin を追加する方法は

さて、それではOne Driveサイトにある Direct Animated GIF Export Plugin ← をクリックしてプラグインをあなたのパソコンのデスクトップにでもダウンロードして下さい。

AGifExportPack.7zファイル画像
 

このような「AGifExportPack.7z」という圧縮ファイルがダウンロードされますから、それを解凍すると……

AGifExportPack.7zファイルを解凍した様子

このようなファイル群が展開しますので、その中の「Src」フォルダと「readme.txt」ファイルは不要で、それ以外の17個のファイル全部をAviUtlをインストールした時の「aviutl.exe」ファイルと同じ場所にコピーもしくは移動して下さい。
下図のように、ファイルを複数選択状態にするにはキーボードのCtrlキーを押さえたままで、各ファイルにマウスポインタを次々と乗せて行くと出来ます。
全選択出来たらCtrlキーから指を離して、まるごとドロップすれば簡単ですね。

必要ファイル群をコピー移動した様子

こんな具合です。
この設定をすることによって、AviUtlでGIFアニメーションとしてファイル保存が出来るようになります。

具体的な合成方法の解説

先ずはAviUtlを起動して、合成する「夕焼け空2a gifアニメ」と「犬と飛行機」のGIFアニメーションを読み込みます。
読み込む場所は……

2つのGIFアニメメを拡張編集レイヤーに読み込む様子

このように、AviUtlの本体画面(編集画面)ではなく「拡張編集」という、レイヤー欄に読み込みます(ドラッグ&ドロップする)
そうすると、編集画面には……

AviUtl編集画面に重なり合って表示された2つのGIFアニメの様子

このように重なり合って表示されます。
編集画面上にはそれぞれがセンタリングされて表示されますから、縦横サイズが小さい「犬と飛行機」GIFアニメが中央になっております。
そしてその「犬と飛行機」のGIFアニメの周り(背景)が黒くなってしまっておりますが、これは、「犬と飛行機」のGIFアニメが透過処理(背景を透明にする処理)されている為にこのようになります。
でも、このままですと、最終的に完成するGIFアニメもこの部分は真っ黒に表示されてしまいますので、それを避けるためには……

アルファチャンネルを読み込む にチェックを入れた様子

この操作欄(設定ダイアログ)下部の「アルファチャンネルを読み込む」にチェックを入れると、瞬時に背景が透明になります。

「犬と飛行機」のGIFアニメに動きを与える

さてそれでは背景用の「夕焼け空2a gifアニメ」の上に重なっている「犬と飛行機」のGIFアニメに、AviUtlの多彩な機能を駆使して動きを与える編集をします。
飛行機ですから、空を飛んで行く様子を表現したいですよね(笑)
とりあえず先ずはこのGIFアニメーションをご覧下さい。

2つのGIFアニメを編集している様子のGIFアニメーション
[ 画像クリックで GO & STOP ]

これは編集過程の一部をGIFアニメにしたのですが「犬と飛行機」が移動して行くコースをご覧のように設定しているシーンなんです。
この編集画面本体以外のところでは……

動作編集メニュー「曲線移動」の様子

「中間点を追加」のメニューの様子

こんな操作を行っております。

上図アニメーション解説で、画面中央の「犬と飛行機」のGIFアニメの背景が黒い状態から「アルファチャンネルを読み込む」にチェックを入れて透明化してから、左上角に飛行機をマウスで移動させ、そこで「曲線移動」を選択しております。
そしてから、マウスでス~っと右下角に移動させた時に、細いラインで繋がっているのが分かるでしょう。
つまり、これからこの飛行機を飛ばす為の「終点」と「始点」の位置をあらかた設定したのです(後で位置の移動は出来ます)

次に「拡張編集」で飛行機のレイヤーで「中間点の追加」をクリックすると、編集画面本体に破線の四角形が2つ(2回追加してるので)現れました。
そして、飛行機経路に曲線を描かせる為に、その破線の四角形をマウスで任意に移動させると、曲線を描いてコースが変わって行くのが分かったと思います。
「曲線移動」とは、このような表現でして「直線移動」を選択すれば直線的コースを描くことになります。
ですから「回転」を使えばこの飛行機を宙返りさせることも出来るのです(笑)
また「拡大率」を使えば、飛行機が飛んで行って遠くなった時に「小さく見える」ようにすることも出来る訳です。

要は飛行コース上の遠近感を表現することも出来てしまうのです。

それらの編集操作を含めたGIFアニメーションの完成形が……

合成が完成したGIFアニメの様子
[ 画像クリックで GO & STOP ]

こんな感じです(笑)
そうそう、宙返り(笑)は含めてはありませんが、飛行機が空に舞い上がって行く過程で飛行機の機首の角度が変わって行ってる様子や、遠く小さくなって行く細かな表現もお分かり戴けることでしょう(笑)

さあ、みなさん、AviUtlを駆使して、あなたはどんなGIFアニメーション同士の合成をなさるんでしょうね~(笑)

端折った解説になりましたので、きっと解りにくい部分もあるかと思いますがご容赦くださいね。

GIFアニメーションに再生ボタンを付与するジフクリック(GifClick)

GIFアニメーションに「再生ボタン」を付与して、閲覧ユーザーが任意にGIFアニメーションを起動することが出来る「ジフクリック(GifClick)」を作成しましたので、下記リンクカードをクリックしてご参照ください。

関連する記事
きき湯
2021/06/16 (Wed) 17:53

No title

初めまして、AviUtlでGIF合成したくてこのページに検索でたどり着きました。
Direct Animated GIF Export Pluginを追加する部分ですがファイル構成が画像とかなり違いました。
更新で変わっているのでしょうか?何を追加したらいいのか教えていただければ幸いです

ぼっちん
ぼっちん
2021/06/16 (Wed) 19:32

To きき湯さん

きき湯さん、はじめまして。

> Direct Animated GIF Export Pluginを追加する部分ですがファイル構成が画像とかなり違いました。

もしかして、それは記事欄の 【 AviUtlに Direct Animated GIF Export Plugin を追加する方法は 】
の項の下の
『 Direct Animated GIF Export Plugin 』のリンクにアクセスした時の様子を言っているのでしょうか?
現在は、このリンクにアクセスすると OneDrive の中が
https://blog-imgs-148.fc2.com/o/o/p/oops0011/OneDrive-1.png
このように見えておりますから、その中の赤枠で囲った圧縮ファイル「AGifExportPack.7z」のみを、きき湯さんのパソコンにダウンロードしてください。
そして、それを解凍すると、そのフォルダの中身が
https://blog-imgs-148.fc2.com/o/o/p/oops0011/folder-1.png
このようになりますから、これは、記事に示してありますファイル群と同じです。

ですから、あとは記事に書いてありますように取り扱ってください。
以上です ^^

[ コメント投稿に関するご案内 ]

弊ブログでは、コメント主さんがご自身のサイトURLを記入してくださると、コメント一覧にご自身のアイコンが表示されるようになっております。

コメント投稿時には、入力必須項目お名前・ご自身のサイトURL・コメント本文」の三項目を入力すると、送信ボタンが表示されます。

コメントは管理人承認後に表示されます。

更新順
GIFアニメーション