アニメーションといえばFlashですが、iPhoneがサポートしないことですっかり下火となってしまいました。
その後、Flashは、CreateJSをサポートすることで、FlashからHTML5ベースのコンテンツとして書き出すことができるようになり、統合的な制作環境としては残っていきそうです。
一方、プラグインを必要としない「アニメーションGIF」(GIFアニメ、animated GIF)の人気が、ここ数年復活しています。
なお、GIFは「ギフ」でなく、「ジフ」と読みます(こちらも参照)。
Flash | アニメーションGIF | |
---|---|---|
キーフレーム | ![]() | ![]() |
フレーム | ![]() | ![]() |
ベクトルの扱い | ![]() | ![]() |
音声 | ![]() | ![]() |
インタラクティブ | ![]() | ![]() |
プラグイン | 必要 | 不要 |
このように比べると、なんか劣っているように見える半面、「どんな環境でも、ほぼほぼ動く」というのは強いこと、また、単なる劣化版でなく、非常にアーティスティックな、というか、不思議な感覚が残る「シネマグラフ」という手法が、注目が高まった理由のひとつです。
シネマグラフ
「シネマグラフ」とは、一見すると写真のように見えながら、一部のみが動くという手法。百聞は一見にしかず。こちらをご覧ください。
- Cinemagraphs
- 写真の一部分が動く「シネマグラフ」が魅力的 | Think Happy
- 写真の一部だけが動く「不思議な感覚になる画像」 - NAVER まとめ
- 思わず見とれる「一部だけが動く写真」16選 | Pouch[ポーチ]
さらに新しい動き
そのほか、TumblrされまくったGuillaume Kurkdjianというイラストレーターの方の作品や
Oamul Luさん(卤猫 | keep running)など、イラストをベースにしたものも、とてもステキです。
昔ながらのアニメGIF
改めて、昔ながらのアニメーションGIFも、改めて見ると、なんか味があります。
GIFアニメと3D
そして、そして、昨日から話題になっているのがコレ!
縦線の奥行きでの位置(Y)を決めて、その前後に物をはみ出させたり引っ込めたりすることによって、人間の目があたかも本当に奥行きがあるかのように錯覚してしまうんですねぇ。
なんかすごくないですか!?
制作環境
GifCam、Mothereffing animated gif、GifCamなど、フリーウェア、オンラインアプリなどもあるのですが、DTP Transitとしては、Fireworksと比較しつつ、Photoshopでの制作について解説します。
Photoshopでの動画編集は2種類
Photoshop CS4までは[アニメーション]パネルを使ってフレームアニメーションのみ対応していましたが、Photoshop CS5 Extendedでビデオ編集に対応しています。
Photoshop CS6以降は[アニメーション]パネルが[タイムライン]パネルと名前を変え、フレームアニメーションと動画編集を切り替えて行うようになっています。
フレーム アニメーション | ビデオ編集 | 操作するパネル | |
---|---|---|---|
Photoshop CS3 | ![]() | ![]() | [アニメーション]パネル |
Photoshop CS4 | ![]() | ![]() | [アニメーション]パネル |
Photoshop CS5 | ![]() | ![]() | [アニメーション]パネル |
Photoshop CS5 Extended | ![]() | ![]() | [アニメーション]パネル |
Photoshop CS6 | ![]() | ![]() | [タイムライン]パネル |
Photoshop CC | ![]() | ![]() | [タイムライン]パネル |