目次

1. 課題！
   
2. ImageReady のアニメの原理
   
3. ImageReady の起動方法
   
4. 重要な３つのウィンドウ
   
5. 作業の手順
   
6. 理屈面での補足
   

---

課題！


次の課題を「画像」について勉強した成果として、作成して欲しい。

GIFアニメーションを制作する。制作ソフトは何を使っても構わない。

条件

1. アニメのコマ数（フレーム数）は２つとする。
   
2. サイズは 100 pixel × 100 pixel とする。
   
3. フレームの提示の時間間隔は任意。速いアニメだけが良いとは限らないから、表現意図にしっかりと合った時間間隔を見つける。
   
4. 原則として、無限に繰り返すアニメにする。
   

---

ImageReady のアニメの原理



ImageReady は Adobe 社が開発したGIFアニメ制作ソフトであり、Adobe 社の看板ソフトである Photoshop と操作にかなりの互換性がある。Photoshop に馴れていれば、操作自体は比較的簡単である。

GIFアニメの原理は、複数の絵を定められた時間で切替えていくことである。つまり、１つのファイルに複数の絵を持っており、それらを切替える「イ
ンターバル時間」の情報を持っているのである。ということは、ImageReady は複数の絵を管理する何らかの方法を持っているのである。

Photoshop
というペイント系画像加工ソフトの特徴は、「レイヤー」があることである。「レイヤー（層）」とは、あたかもアニメを作るときのように、背景が透明なセル
に絵を描き、それを重ねて表示することで、１枚の絵を作り上げる。つまり、複数のレイヤーに絵を描き、それらを重ね合わせ、位置を微調整して１枚の完成し
た絵を作り上げるのである。

Photoshop の子供に当る ImageReady は、この「レイヤー」を転用して GIFアニメを作る。つまり、アニメの１コマ（フレーム）が１つのレイヤーに相当する。つまり、

1. １コマ目はフレーム１を表示
   
2. ２コマ目はフレーム２を表示
   
3. ......
   

のように、複数のレイヤーを切り替えて表示して、アニメを実現するのである。だから、ImageReady では、レイヤーを単位として作業をしていく。このことを今しっかりと理解して欲しい。

---

ImageReady の起動方法


本学コンピュータラボにインストールされている ImageReady の起動方法は次の通り。
[スタートボタン] → [すべてのプログラム] → [Adobe] → [Adobe ImageReady 7.0.1]


である。起動したら通常は、[ファイル]メニューから定石通り「新規」を選ぶ。ここで次のダイアログボックスが開く。
[You must be registered and logged in to see this image.]

課題条件の通り、「幅」と「高さ」にそれぞれ100を入れる。

---

重要な３つのウィンドウ



そうすると、いくつものウィンドウが開いている。そのうち、重要なのは３つである。

[You must be registered and logged in to see this image.]

●描画ウィンドウ まず、直接画像を描くことができるウィンドウがこれである。この解説では「描画ウィンドウ」と呼んでおこう。 描画ウィンドウに描画をすると、同じ絵が他のウィンドウにも現われる。まず、

[You must be registered and logged in to see this image.]

●レイヤーウィンドウ である。つまり、描画ウィンドウに描かれた絵は、実際にはどれかのレイヤーに描かれている。どのレイヤーに描くのか、どのレイヤーを表示するのかを制御す るのが、この「レイヤーウィンドウ」である。このウィンドウは Photoshopにもあるので、知っている人もいるかも知れない。

[You must be registered and logged in to see this image.]

●アニメーションウィンドウ

このアニメーションウィンドウは ImageReady 独自のウィンドウである。つまり、アニメーションを制御するウィンドウである。しかし、活躍はもう少し後である。

さて、これで重要なウィンドウはすべて解説した。

---

作業の手順



実際の作業は、想像の通り、まず「描画ウィンドウ」に１枚目の絵を描くところから始まる。描画ウィンドウに描かれた絵は、「レイヤーウィンドウ」「アニメーションウィンドウ」にも反映していることは述べた通りである。
１枚目の絵が描けたら、２枚目の絵に移るわけである。ということは新しいレイヤーを作って、そこに描くのである。アニメなので普通は、１枚目の絵と
２枚目の絵は大変似ている場合が多い。だから、１枚目のレイヤーを２枚目のレイヤーにコピーして作るのが良いだろう。この複製操作は「レイヤーウィンド
ウ」で行う。
[You must be registered and logged in to see this image.]
レイヤーウィンドウの右上にある小さな三角のマークをクリックすると、上の図で示すメニューが現われる。ここで、「レイヤーの複製」を選ぶ。

[You must be registered and logged in to see this image.]

そうすると、「レイヤーウィンドウ」に新しいレイヤーが現われる。そして、その状態で「描画ウィンドウ」に絵を描くと、新しいレイヤーに描かれることになる。 どこで見分けるの？

さて、これで２枚の絵が完成した。今からこれらをアニメーションにする。ここで今まで登場しなかった「アニメーションウィンドウ」が登場する。今か
らすることは、「レイヤーをアニメーションのフレームに変換する」ことである。これもやはり、「アニメーションウィンドウ」の右上の小さな三角をクリック
すると、メニューが現われる。このメニューの「レイヤーからフレームを作成」を選択すると....
[You must be registered and logged in to see this image.]

「レイヤーからフレームを作成」機能は、自動的にレイヤーをフレームに変換し、２つのフレームが「アニメーションウィンドウ」に現われる。ここで
「アニメーションの再生」のチップが示す三角印を押すと、アニメがスタートする。つまり、「描画ウィンドウ」にアニメが表示される。
[You must be registered and logged in to see this image.]
また、「アニメーションウィンドウ」では、２つの絵の切り替わりの時間を設定することができる。各フレームの下の「0[]」のような記号をクリックすると、設定する時間のメニューが現われる。ここで表現意図に合わせた時間を見つけて欲しい。
[You must be registered and logged in to see this image.]

さて、出来上がったのならば、GIFアニメとして保存する。

[You must be registered and logged in to see this image.]

超重要！！！ 間違えないように！ [ファイル]メニューから選択するのは、「保存」ではなくて、「最適化ファイルを別名で保存」である。これでないと、GIFアニメとしては保存されない。よく学生が「保存」で名前だけ.gifで保存して、「何で動かないんでしょう？」と質問に来るケースが過去によくあったから、皆さんも気をつけるように。 保存したら、「ImageReadyは終了せずに」、ＩＥなどのブラウザを起動し、ブラウザの中に今作成したファイルをドラッグ＆ドロップして確認するのが手順的には良かろう。

---

理屈面での補足


「描画ウィンドウ」と「レイヤーウィンドウ」の関係について、もうすこし補足する。「レイヤーウィンドウ」は「どのレイヤーが表示され」「どのレイヤーに描かれる」のかを制御するのが役割である。
[You must be registered and logged in to see this image.]
「眼」のマークが付いているレイヤーが、現在表示されているのである。表示は複数フレームが重ね合わせになる場合もあるので、複数のレイヤーが同時
に表示されることもある。しかし、レイヤーには上下関係があるので、今回のように不透明な背景を使っている場合には、下のレイヤーを表示しても、上のレイ
ヤーを消さない限り表示は変わらない。

[You must be registered and logged in to see this image.]
「筆」のマークで示されるレイヤーが現在描画がなされるレイヤー、つまり「描画ウィンドウ」で絵を描くと、それが描かれるレイヤーである。どのレイヤーに描いているのか注意して描画すると良かろう。]