アニメーション・動画の作り方

【パラパラ漫画タイプ】

　自分で作る場合に一番簡単なアニメーションの作り方はパラパラ漫画の作り方でコマ数(画像ファイル数)を増やすほど細かなアニメーションになります。

　特にgif(やjpg)画像を入れ替えるgifアニメは、作り方そのものがパラパラ漫画と同じなので直観的にわかり易いかもしれません。

　但し、この方法では、1コマの画像ファイルサイズが小さく、かつ、コマ数が少ない場合には有効ですが、コマ数が増えるほど画像ファイルサイズが大きくなり、処理も重くなるので注意が必要です。

【パーツ分割タイプ】

　次に自分で作る方法としては、「背景と動作対象物など複数のパーツに分割して動きが必要な部分だけ動かす作り方」があり、この手法で広く知られているアプリケーションソフトとしては、Adobe system社ののFlashがあります。

　因みに2008年には、JavaFXというデスクトップ・ウェブ・モバイル・テレビ・情報家電等の用途用のアプリケーション作成プログラムが発表されました。

　こうしたアプリケーションは、RIA(リッチ・インターネット・アプリケーション)と呼ばれ、ブラウザ上で視覚的にも操作性や表現力にも優れたアプリケーションとして注目を集めています。

【分割処理タイプ】

　自分で作る場合に、最も知識とテクニックを必要とするアニメーションの作り方は、「前後の画像(コマ)で(色などの)変更のある部分だけをプログラムで変化させる作り方」です。

　画像そのものにおける知識としては『2値画像』『濃淡画像』『閾値処理』『ラベリング処理』『エッジ処理』『雑音処理』『最近傍法』『4-近傍』『8-近傍』『線形補間法』・・・といったキーワードとその内容の概念は少なくとも抑えておく必要があります。

　更にこれらを理解する中で、基礎解析、代数幾何、微分積分、サイン、コサイン、タンジェントなど高校数学を彷彿とさせるものも多々出てきますので(管理人も含め)文系の方はギョッとする事もあるかもしれません。

　ただ、こうした高校数学分野の処理に関しては、Visual C#等を利用するとほとんどクラス化されているのでVisual C#等のプログラミング言語を習得していれば、どのクラスを使うとどうなるのかという部分は残りますが、知識量としては比較的軽減されるでしょう。

---

gifアニメ

　gifアニメーションを一から自分で作る場合には、画像処理の知識が必要になり、結果的にその為のソフトやプログラムを自作する事になりますが、gifアニメを作成するフリーウェアやシェアウェアを利用すると簡単に作成できます。

　また、画像編集・合成ソフトなどでgifアニメを作成する機能を持つものもあり、フリーソフトウェア／オープンソースのGIMPやImageMagick、市販のPhotoshopなどでも作成できます。

　例えば、GIMPならレイヤーとして複数の画像を開き、画像の上で右クリックし、基本的には、

1.[フィルタ] >> [アニメーション] >> [GIF用最適化]

としてから

2.[フィルタ] >> [アニメーション] >> [再生]

とすればGIFアニメが再生されますし、レイヤーボックスでレイヤーをダブルクリックして出てきたダイアログボックス内、またはレイヤー名をダブルクリックしてそこで名称の横に丸カッコで括って表示スピードを入れるとスピードの調整ができ、保存する場合には、

といった流れでGIFアニメを保存できます。

　ImageMagickでは、Windows移植版でもコマンドライン操作になりますが、convertコマンド(例えば表示遅延時間は-delayオプション)で簡単にgifアニメを作成することが可能で最後に指定するファイル名がgifアニメ画像名となります。

　但し、gifアニメは、小さな画像数枚でもファイルサイズが大きくなりがちなので枚数が多ければ多いほど注意が必要です。

JavaScriptアニメーション

　JavaScriptでのアニメーションの作り方では比較的簡単に作る事ができるパラパラ漫画的な作り方で1枚1枚の画像ファイルサイズを小さくする事でシンプルなアニメなら比較的軽快に動作します。

　JavaScriptでもリンク先の作成例とは違う作り方、パラパラ漫画タイプではなくパーツ分割タイプ、分割処理タイプとなるようにコーディングすれば、先の作成例よりも負荷を低減したアプリケーションとなりますが、もしその場合にも「JavaScriptならトコトン追及するけど他の言語覚える気にならない！！！」「どうしてもJavaScriptじゃないと！！！」という理由がない限りは、他のより簡易なテクニックを利用するといいでしょう。

　但し、閲覧する方がJavaScriptをOFFにしているとせっかくのアニメーションも見てもらう事ができません。

　また、1枚の画像ファイルサイズが大きい場合はもちろん、カラフルな画像を数十枚、数百枚・・・とか、比較的長い長編アニメーションを作る場合には、その分負荷がかかる為、処理速度が著しく低下し、作り手はもとより、閲覧者の端末のスペックが低ければ低いほどその負荷が与える影響は大きくなります。

JavaFXアニメーション

　JavaFXは、Sun Microsystems社のJava系のウェブアプリケーション、特にユーザーインタフェース部分の作成において前述のようにデスクトップ・ウェブ・モバイル・テレビ・情報家電等の用途を想定したオープンソースのRIA/Rich Internet Applicationです。

　JavaFX1.0/1.1は、ウィンドウ／ブラウザ表示用のRIAでしたが、JavaFX2.0からはJava APIとしてJavaアプリケーションの一部となるようですから結果的にJavaFX APIを使って作ったJavaアプリはJava Appletとして使えるということになるでしょう。

Java Appletアニメーション

　Java Appletは、Sun Microsystems社のJavaアプリケーション(.javaをjavacでコンパイルした.classファイル)をHTML/XHTMLのappletタグ(非推奨)/objectタグを使ってページに埋め込むことでアニメーションを実行することができる仕様です。

Scalable Vector Graphicsアニメーション

　W3C勧告となったSVG/Scalable Vector Graphics(初版1.0は2001年勧告、以後も策定継続中)を利用したアニメーションの実装も可能です。

　HTML5/CSS3などHTML/CSSのバージョンアップに伴い、一層仕様が充実しています。

　動画再生についてもHTML5のvideoタグ(音楽再生ならaudioタグ)周辺とCSS3のSpeech仕様(CSS2.1までのAural仕様拡張)関連を組み合わせることで実装できるよう考慮されています。

Flashアニメーション

　Flash/ActionScriptやFlashのようなその他フリーウェア・シェアウェア・商用アプリを利用すると比較的簡単にグラフィカルなインタフェースを利用してアニメーションを作る事ができます。

　但し、従来のFlashは、比較的動作が重いという短所があります。

Silverlightアニメーション

　Silverlightは、Microsoft社の開発したRIA開発環境で、やはり、様々なメディアに対応していますし、更なる拡張も検討されています。

　また、.NET クラスライブラリを活用する事ができ、.NET開発者であれば抵抗なく導入できる上、ユーザーインタフェースデザイナとロジック開発者の作業を明確に分けつつ共同作業ができる利便性があり、画像についてはPhotoshopで作成した既存資産(.psd)も利用できます。

　開発言語としては、JScript、IronRuby、IronPython、VB.NET、C#が利用できます。

　Silverlightにおける.NET APIは、.NET Frameworkと互換性があり、LINQ、WCF、およびADO.NETなどもサポートしており、SilverlightのAPIでHTMLやAJAXを.NET と統合することもできるとの事なので前述のJavaFXの<a href=""></a>もシンプルに利用できそう？な雰囲気です。

　開発環境としては、Visual Web Developer/Silverlight Tools for Visual Studio/Microsoft Expression Blendが必要なようです。

　Visual Web Developerは、ウェブ用のVisual Studio開発環境で(評価版は無償)、Silverlight Tools for Visual Studioは、Visual StudioにおけるSilverlightプラグイン、Microsoft Expression Blendは、Silverlightの表現を設計する為の代表的なツールという位置づけのようです。

　表示時間や処理に関しては、Flash並みにかなり遅い印象です。