9 アニメーション

9.1 JPEGの圧縮原理

JPEGは，(1)元画像を8×8のブロックに分け，(2)各ブロックごとに処理（デジタル化と圧縮）をします．そのため，圧縮率が高くなる（保存時のQualityを下げる）と各ブロックの境目がスムーズにつながらなくなり，いわゆるブロックノイズが目立つようになります．

JPEGは見た目の印象に重要な部分は高い精度でデジタルデータに変換し，そうでない部分は大まかにデジタル化します．（JPEGは変化が激しい部分を重要でない部分とみなすので，文字のようにエッジが重要なデータは境目がぼやけてしまいます．）JPEG保存時のQualityを下げると重要でない部分からデジタル化の精度が下がっていき，最後は重要でない部分自体を捨ててしまいます．そうして全体をデジタル化した後でデータを圧縮します．

保存時のQualityが1の場合でも圧縮はしていますので，データ量はかなり小さくなります．Qualityを下げて保存すると，この圧縮＋重要でない要素のデジタル化をサボるという形での情報の廃棄が行われて，全体としてさらにデータ量が小さくなります．

9.2 宿題の講評

「JPEG圧縮に関するHTMLレポート提出状況」（要パスワード）

• 自信がない人は，Netscapeで，http://www-local.twcu.ac.jp/~ユーザ名/compA2.htmlで正しく表示されるかどうかもう一度確認
• タグの閉じ忘れが多い．例；<center>はあるのに</center>がない．同様に</h2>や</font>を忘れている人もあった．
• 画像へのリンクがない人もいる．
• 1回目の期限までに出来ていない人を対象に今週の金曜日に2回目のチェックをするので，まだ出来ていない人はそれまでに作っておくこと．

9.3 写真の編集 (photo retouch)

スキャンした静止画像などを修正するソフトがいわゆるフォトレタッチソフトです．GIMPでもかなりのことができますが，MMLにいけばAdobe社などの優れた市販ソフトを自由に使うことができます．これらのソフトの詳細はMMLで学習してください．

9.4 Webでアニメーション

Webでアニメーションを表示する方法はいくつもありますが，ここでは古くから使われているGIFアニメーションと，Javaスクリプトによるアニメーションの2つを紹介します．いずれの場合もあらかじめ用意した複数の連続画像を自動的に切り替えて表示することにより，まるで動いているかのように見せかけます．

なお，アニメーションなどの動く要素が目立つWebページは目障りで読みにくくなる事が多いので，アニメーションを使うときは注意が必要です．

9.4.1 GIFアニメーションの原理

元画像
GIFアニメ（5回ループ）

9.4.2 JavaScriptによるアニメーション

「JavaScriptによる簡単なアニメーションの例」

この授業ではJavaScriptの説明はしません．興味がある人は自分で勉強してください．

9.5 GIFアニメーション製作

Gimpを使ってGIFアニメーションを作ります．Gimpの場合は，元画像を何枚も作る代わりにレイヤーという性質を使います．レイヤー（層）とは重ね絵のようなものです．ひとつの絵を複数のレイヤーの重ね合わせとして作ることができるのです．そこで一枚の絵を複数のレイヤーを使って作成し，その各レイヤーを独立した元画像のように扱ってGIFアニメーションを作ります．GIFアニメーションにするときに，各絵の切り替え間隔やループさせるかどうかなども指定できます．

では，ひらがなの「あ」の書き順を説明するGIFアニメーションを作ってみましょう：

1. 端末エミュレータを開く．
2. cd compA [Enter]でcompAディレクトリに移動．
3. gimp & [Enter]でGIMPを起動．
4. GIMPの「File」メニューから「New」を選び，適当な大きさ（128×128でよい）のキャンバスを用意する．
5. 絵の上で右クリックして「Image」->「Indexed」を選ぶ（前に説明したようにGIFはインデックスカラーを使います．）と「Indexed Color Conversion」ダイアログボックスが現れるので，Palette Optionの「Use WWW-optimized palette」ラジオボタンをクリックしてONにしておく．最後にOKボタンをクリックしてこのダイアログボックスを閉じる．
6. ではいよいよお絵かきです．まず，「あ」の第1画目の横線を書いてください．
7. 絵の上でマウスの右ボタンをクリックして「Layers」->「Layers & Channels」を選ぶと「Layers & Channels」ダイアログボックスが出てきます．
8. このダイアログボックスの下から2行目に横6列に並んでいるアイコンがありますが，右から3つ目の紙が2枚重なっているアイコン（Duplicate Layer）をクリックします．すると，最初に書いた絵をコピーした2つ目のレイヤーができます．
9. 元の絵に戻って「あ」の2画目の縦棒を書いてください．
10. さきほどのダイアログボックスに戻って，Duplicate Layerアイコンをクリックします．すると今書いた絵をコピーした3つ目のレイヤーが作られます．
11. 元の絵に戻って「あ」の3画目を書いてください．これで絵は完成です．
12. 絵の上で右クリックして「File」->「Save」で「Save Image」ダイアログボックスを開き，拡張子をgifとした適当なファイル名（たとえばa_animt.gif）で保存します．
13. すると，「Save as GIF」ダイアログボックスが現れるので，このダイアログボックス下半分のAnimated GIF Optionで，Loopさせるかどうかや各フレームの時間間隔（defaultは100miliiseconds＝0.1秒）を選んでからOKをクリック.
14. これで完成です.

この方法は，先に書いた絵をそのまま次の絵に使っていますが，違う絵にしたい場合もあります.その場合は，(1)「Layers & Channels」ダイアログボックスではDuplicate Layerのアイコンではなくて左端のアイコンを押して新規のレイヤーを作り，(2)最後の保存時の「Save as GIF」ダイアログボックスのAnimated GIF Optionの「default disposal where unspecified」を「One frame per layer」にしてください．

なお，MMLなら，GIFBuilderというアプリケーションを使って，複数のGIF画像からGIFアニメーションを作ることもできます．詳細は「小田先生のページ」の下の方に書いてある情報を参照してください．