 2019/08/07
複数枚の GIF画像をパラパラ漫画の様に次々と表示させる様に合成してまとめた GIF画像です それぞれの画像の表示時間は 10mS単位で個別に設定できます GIF画像の特徴・制約 GIF は256色以下の画像を扱うことができる可逆圧縮形式のファイルフォーマット 圧縮形式の特性上、同一色が連続する画像の圧縮率が高くなるため、 イラストやボタン画像など、使用色数の少ない画像への使用に適している 自然色画像をそのまま 256色に減色すると(等高線の様な)不自然な画像になる これを避けるため、自然色画像を 256色に減色する時、ディザリング処理を行う ディザを行うと「同一色が連続」しなくなるため画像の圧縮率は低くなります 透過GIF：特定色を透明化し、画像の背景を透過表示することが出来る GIFアニメーション：複数画像を1つのファイルに収録してアニメーション表示する 画像ファイルの容量に付いて 複数枚の GIF画像を合成して作成しますので、できた画像サイズは 個々の画像の合計より大きいサイズになります 滑らかな動きをさせるためには、個々の画像の変化を少なく、画像枚数を多くします 画像枚数が多ければ、合成した画像サイズは大きくなります 自然色の元画像から 256色に減色した場合は圧縮率が小さいため画像サイズは大きくなります
１．必要な道具 (１)「Animation GIF Maker」  gifan071.exe (フリーソフト)私は製作者のＨＰからダウンロードしましたが、現在はサポートされていないため 本サイトからダウンロードして下さい 営利目的以外の転載、再配布は自由となっています。 現在はサポートされていませんのでくれぐれも製作者に迷惑を掛けない様お願いします 再配布サイトからもダウンロードできます (２)ペイント  mspaint.exe (Windowsに付属) 256色、背景色を透明にして画像を作成「Excel」などがインストールしてあれば、GIF画像で保存できるはずです GIF画像で保存できない場合は、「PhotoShop」等GIF画像に変換できるソフトを準備する 私の場合、メモ帳  notepad.exe(Windowsに付属)で文字をインプットしてそのまま画面をキャプチャしてペイントに貼り付けて使っています 作る画像のサイズが小さいので表示→拡大→800%(最大)としてドット単位の加工をします ２．作成手順 文字の場合は「ペイント」「メモ帳」など使い慣れたソフトで作成します (１)パラパラ漫画の元画像を作成する
作成した画像      (２)パラパラ漫画を再生する順序とそれぞれの表示時間を指定して合成する 画像が準備できたら「Animation GIF Maker」を起動して元画像を選択→追加する パラメータ画面でディレイ：20として→更新 表示速度：10mS×20(パラメータの値)×5画面＝約１秒 文字の色が0.2秒毎に(左から右へ流れる様に)変り、５枚を約１秒で繰り返します パラメータの設定ができたら合成(保存)して、動作を確かめる パラメータ設定画面  合成した画像  ３．作成の留意点、作例 (１)色に付いて 自然色から256色に減色する場合「ペイント」ではかなり色化けしますので 「PhotoShop」を使っています 明るさや色が連続的に変化する(グラデーション)部分は、 そのまま 256色に減色すると(等高線の様な)不自然な画像になってしまいます これを避けるため、自然色画像を 256色に減色する時、ディザリング処理を行います (２)画像のファイルサイズに付いて 当然ですが画像の大きさは小さい程、駒数や色数は少ない程、作成したGIF画像が小さくなります JPEG等から取込んだ画像は色数が多く圧縮伸長に伴うゴミも多いので適しません どうしても自然色の画像を使いたい場合はなるべく小さな画像を用います (３)その他 せっかくGIFアニメにするからには、動きや色の変化に工夫をしたいものです 動きがあると注目が集まりますので、注目させたい所や注意を与えたい所に使います ４．製作例 （私の場合、小さなものが主です） (１)イラスト・ボタン・ロゴなどの画像
(２)自然色から作成した例（こんなものも出来ると言う事例） 動画キャプチャし256色(白黒は256階調)に減色、滑らかに動くには10駒以上／秒が必要です (１)「アトムの誕生シーン」約３秒 データを間引くとギクシャクしますが容量を小さくできます
[こんな失敗しました] 動画からキャプチャして、成り行きの画像サイズで GIFアニメを製作したらファイルサイズが 大きくなって、サーバーに転送できる最大サイズ(1MByte) をはるかに超えてしまいました 画像サイズを縮小したり、再生時間を短くしたり、再生コマ数を減らしたり 全て、ファイルサイズと再生品質とのトレードオフ(兼ね合い)となります いろいろと試して実験的に決めました (２)「Beach Runner」 １コマの長さを伸ばせばスローモーション再生になります
(３)「レンズの繰り出し動作」を紹介するために作成した動画 使用例：３Ｄレンズ の 改造  (750×330×5枚, 356KB) 約2.4秒間の動画の繰り返し 元画像の構成 画像のファイルサイズを小さくするため、動きのある部分のみを書き換える構造としました
作成画面（作成時のパラメータ）  画像の内容 固定焦点ステレオレンズ (Panasonic Lumix H-FT012 12.5mm F12×2)に ヘリコイド(焦点調節機構)を付けた様子(左)、 右は無改造品 撮影は、三脚にカメラを固定、フォーカス・露出も固定にして ヘリコイド(約90度回転)を４等分した角度で５枚撮影して、減色・合成しました [こんな失敗しました] 撮影時に少しづつ回転させる時、レンズの位置が微妙にずれてしまい 合成して動きを見るまで気づかず、撮影からやり直しました この例の場合は、底面を両面テープなどで固定しておけば失敗が少ないと思います | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
