ホームページなどで、待ち時間が発生するような操作をした時に、くるくる回るアニメーションが表示されるのをよく見かける。これってどうやって作ってるのかなーと思って調べてみた。どうやら、パラパラ漫画のように数枚の絵(画像)を一定の間隔で連続して表示することで、動いているように見せることができるようだ。
もくじ
Fireworks CS6 で作ってみた
きっと色々な作り方があるのでしょうが、今回は、未熟者の私でも比較的簡単に作ることができたFireworksのステートを使って作ってみた。
ステートとは、Fireworks CS4 より前のバージョンでは「フレーム」と呼ばれていたものらしい。ページの時間軸のようなもので、アニメーションを作成するには、このステートを複数作成し、各ステートのページのデザインを変える。そして、ステートを上から順番に連続して表示(再生)することで、アニメーションができあがるのだ。
ステートについて詳しくは、Adobeホームページ(Fireworks/ステート)をどうぞ。
また、ご参考までにステートとページとレイヤーの関係については、こちらの記事をどうぞ。英語だけど、図を見るだけでも関係が(なんとなく)分かるはず。
1.ベースとなる画像を作成する
まずは、ベースとなる画像を作成する。今回は、◯がくるくる回るアニメーションを作成したいので、とりあえず色付きの◯を8つ描いて円形に並べる。色はご自由に。
![maru8](https://orangeolive.jp/myblog/wp-content/uploads/518d0704dd2e8337ba293eaee64038cb.png)
次に、◯ひとつひとつに少しずつ変化を付けていく。今回は、色はそのままで、不透明度のみ変えることにする。一番上の◯を基準にして、反時計回りに徐々に色が薄くなるよう(不透明度を)設定していく。
ちなみに、不透明度の設定は、プロパティインスペクタの下記部分で変えることができる。
![tomeido](https://orangeolive.jp/myblog/wp-content/uploads/tomeido.png)
例えば、基準となる◯の不透明度を100%のままとして、次の◯を80%、その次を40%・・・という具合に残り7つの◯に変化を加えていく。
![maru8-tomeido](https://orangeolive.jp/myblog/wp-content/uploads/ec640d18b0e266e10ea55a05df910199.png)
ベースとなる画像のできあがり。
2.ステートを複製する
次に、ステートパネル(よくページパネルやレイヤーパネルとくっついている)を見ると、既にステート1が作成されている。(新規にページが作成された時点で、一緒に作成されている)
![panel](https://orangeolive.jp/myblog/wp-content/uploads/d68f9982c8a6390bfaa857df8d0d7395.png)
ステートパネルが表示されていない場合は、「メニューバー」→「ウインドウ 」→「ステート」で表示。
このステート1のページのデザインが、先ほど作成したベースとなる画像という訳だ。この画像を少しずつ変えることで、アニメーションを作っていくので、ベースとなるステート1を必要な数だけコピーする。
![copy](https://orangeolive.jp/myblog/wp-content/uploads/0839f47d70af6c75f130fd13b29279a0.png)
ステート1を右クリックして、「ステートを複製…」を選択する。この時、[ステートを追加…]を選択してしまうと、ページのデザインがコピーされないので注意。
![kazu](https://orangeolive.jp/myblog/wp-content/uploads/kazu.png)
「ステートを複製」ダイアログが開くので、ステートをコピーする数、どこに挿入するかを選択する。今回は、数:「7」、新規ステートを挿入:「現在のステートの後に挿入」を選択する。
![copy7](https://orangeolive.jp/myblog/wp-content/uploads/0f0477721389f840910fc5222e45ec44.png)
ステートが7つコピーされ、計8つになった。ステート2〜8をクリックしてみると、ステート1の画像(ページのデザイン)も一緒にコピーされているのがわかる。
3.複製したステートの画像を作成する
ステート2〜8の画像(ページのデザイン)をそれぞれ作成する。すでにベースとなる画像はコピーされているので、ステート2から順番に少しずつ変化をつけていく。
◯が時計回りにくるくる回るアニメーションにしたいので、1つ前のステートと比較して、◯の不透明度の設定をひとつずつ右にずらして設定する。それをステート8まで繰り返す。
ステート2
![st2](https://orangeolive.jp/myblog/wp-content/uploads/e8b65764eca29416a626996b00b33464-300x178.png)
ステート3
![st3](https://orangeolive.jp/myblog/wp-content/uploads/3b1d839b890262be8f9b448ab631f96e-300x164.png)
ステート4
![st4](https://orangeolive.jp/myblog/wp-content/uploads/0e6c723367cc3d9786e84e8f18d1e113-300x163.png)
ステート5
![st5](https://orangeolive.jp/myblog/wp-content/uploads/af2d7b7c2471e0ac967600035dd3d519-300x164.png)
ステート6
![st6](https://orangeolive.jp/myblog/wp-content/uploads/3f4806f0413006f5725ecd502fe0e781-300x163.png)
ステート7
![st7](https://orangeolive.jp/myblog/wp-content/uploads/bcf0f2ad5ddea20e8774721289d4a9ca-300x163.png)
ステート8
![st8](https://orangeolive.jp/myblog/wp-content/uploads/bb11d64b4c01d932e2d45be85d577ef5-300x164.png)
各ステートの画像(ページのデザイン)のできあがり。
4.動作確認をする
実際に動かしてみて、アニメーションとして問題ないかを確認する。
ドキュメントウインドウの右下にあるステートコントロール(小さくてとっても見つけにくい…)の「▷(再生・停止)」ボタンをクリックすると、作成したアニメーションGIFがカンバス上で動き出す。
![cnt](https://orangeolive.jp/myblog/wp-content/uploads/cnt.png)
動きに問題がなければ、くるくるアニメーションGIFのできあがり!
くるくる回る速度を変えたい時は
動作確認をしてみて、くるくる回る速度が「早いな」「遅いな」と感じたら、各ステートがドキュメントウィンドウに表示される時間の長さ(秒数)を変更して調整する。
ステートパネルより、各ステートの右側にある数字(初期値は「7」)をダブルクリックすると、「ステートディレイ」ダイアログが開く。この数値を、より大きい数値にすると回る速度が遅くなり、より小さい数値にすると回る速度が早くなる。
![speed](https://orangeolive.jp/myblog/wp-content/uploads/speed.png)
アニメーションGIFの書き出し
当たり前だが、「PNG」や「JPEG」などのファイル形式で書き出しても、書き出されたファイルの画像はくるくる回らない。書き出す前に、ファイル形式を設定しておかないといけないのだ。
最適化パネルより、ファイル形式を「アニメーションGIF」に変更する。
![gif](https://orangeolive.jp/myblog/wp-content/uploads/gif-207x300.png)
最適化パネルが表示されていない場合は、「メニューバー」→「ウインドウ 」→「最適化」で表示。
そして、「メニューバー」→「ファイル 」→「書き出し…」をクリックし、ファイル名を付けて保存する。書き出されたアニメーションGIFファイルは、Webブラウザにドラッグするだけで動作確認することができる。
![kurukuru](https://orangeolive.jp/myblog/wp-content/uploads/kurukuru.gif)
Webブラウザ上で、くるくる回っていれば、OK!アニメーションGIFのできあがり。
※一部のiPhone / AndroidブラウザではアニメーションGIFは動かないようです。動いて見えない皆様、ごめんなさい。