GIMPでGIFアニメ（GIMP 2.8.22）

nezumi.pngをGIMPでGIFアニメにしてみよう。

1. nezumi.pngをGIMPで開く。
2. 「背景」レイヤーの複製を3っつ作成する。
3. レイヤーの名前を分かりやすいように、下から順番に、1、2、3、4に変更する。レイヤーの名前の変更には、右クリックして《レイヤー名の変更...》を選ぶか、レイヤー名をダブルクリックしても可能。
4. 「2」のレイヤーを選択し、《ツール》→《変形ツール》→《回転》を選択する。
5. 「回転」ダイアログボックスで、右に90度回転にして、[回転]ボタンをクリックする。
6. 「3」のレイヤーと「4」のレイヤーも同様にして、180度、-90度回転する。
7. 《フィルター》→《アニメーション》→《再生》を選択する。
8. [再生]ボタンをクリックして、回転方向のチェックをする。
9. レイヤーを表示する時間間隔を0.5秒にし、他のレイヤーを隠すために、各レイヤーの名前を、1(500ms)(replace)、2(500ms)(replace)、3(500ms)(replace)、4(500ms)(replace)、に変更する。
10. 《フィルター》→《アニメーション》→《再生》を選択し、[再生]ボタンをクリックして確認する。
11. ここで後でやり直しができるように、《ファイル》→《名前を付けて保存...》を選択し、nezumi.xcfとしてGIMPファイルとして保存しておく。
12. 《フィルター》→《アニメーション》→《GIF用最適化》を選択する、「名称未設定」で新しいウィンドウが表示される。
13. この新しいウィンドウで、《ファイル》→《名前を付けてエクスポート...》を選択する。
14. ファイル形式としてGIF画像を選択し、nezumi_r.gifという名前にして、[エクスポート]ボタンをクリックする。
15. 「ファイルのエクスポート」ダイアログボックスで、「アニメーションとしてエクスポート」をチェックして、[エクスポート]ボタンをクリックする。

同様にして、左回転するGIFアニメを作成して、nezumi_l.gifとする。HTMLファイルの"nezumi.png"を"nezumi_r.gif"と"nezumi_l.gif"に書き換えて完成である。

DOMで画像を変更

画像を変更するときは、img要素の場合srcプロパティで画像ファイルを指定して変更できる。 ネズミのimg要素を子要素として含むdiv要素がelementで与えられている場合は、childNodes[]プロパティでリストを参照できる。

var chldnode = element.childNodes[1];
chldnode.src = "nezumiswimming.gif";

のように、chldnodeがimg要素のとき、srcプロパティで画像ファイルを変更できる。

chldnodeがimg要素か否かをチェックするために、以下を試してみると良い。

var chldnode = element.childNodes[1];
alert(chldnode);

としてみると、[object HTMLImageElement]と表示される。

因みに、

var chldnode = element.childNodes[0];
alert(chldnode);

としてみると、[object Text]と表示される。 これは、

<div id="Nezumi1" class="icon" style="top:300px; left:200px;" >
[ここにテキストが書ける]
<img src="nezumi_r.gif" onmouseUp=... >
</div>

となっているので、<div>直下の部分の[ここにテキストが書ける]部分がchildNodes[0]で、その次の<img>がchildNodes[1]になっていることがわかる。

ネズミが池に落ちた時の処理

(2015-07-06追加)

ネズミが池に落ちても消えないで、池の中で溺れている画像を表示するために、ネズミの画像を変更するだけではなく、下の画像のようにして、z-indexプロパティを5から1へ変更することで、背景画像（z-index: 2）と背景色(z-index: 0)の中間に来るようにしている。

また、ネズミが池に落ちているか否かは、ネズミのz-indexプロパティが、1か否かで判断するようにした。そのために、

var nezumi2 = document.getElementById("Nezumi2");

で、id="Nezumi2"の要素をnezumi2に格納する。 そして、nezumi2.style.zIndexの値でz-indexプロパティを得ることができることを使った。具体的には、move2cheese(element, Delta)関数で、

	if(element.style.zIndex == "1" ){
		return;
	}

としている。これにより、チーズを動かしても、池に落ちたネズミは動かなくなっている。

池に落ちたネズミをクリックしても動かないのは、池に落ちたネズミのz-indexが1なのに、穴の領域のz-indexが3である（更に、背景画像のz-indexが2なので、穴からはみ出していても同じこと）ので、ネズミをクリックしているつもりでも、穴の領域（或いは背景画像）をクリックしているため、ネズミがクリックできなくなっているからである。これは少しトリッキーな処理の仕方であるが、コードを少なくする工夫の一つである。