DVIOUT

Transcription

1 GIFアニメーションを 作 ろう! 幸 山 直 人 著 インターネット 公 開 版 富 山 大 学 理 学 部 数 学 教 室

2 商 標 Windows は Microsoft Corporation の 登 録 商 標 です 本 テキストの 著 作 権 について 本 テキストの 一 部 または 全 部 を 著 作 権 法 の 定 める 範 囲 を 超 え 許 可 なく 複 写 転 載 複 製 テープ 化 ファイルに 落 とすことを 禁 じます ただし 本 テキストの 表 紙 に インターネット 公 開 版 1 と 記 載 してあるものについては 個 人 的 な 利 用 に 限 り 一 部 または 全 部 の 内 容 を 改 変 する ことなく 再 配 布 複 写 複 製 ファイルに 落 とすことを 許 可 します 1 本 テキストの インターネット 公 開 版 は ホームページ 等 で 公 開 すると 著 作 権 法 に 違 反 する 可 能 性 のある 情 報 を 取 り 除 いたものです

3 GIFアニメーションを 作 ろう! ホームページや 携 帯 メールで 利 用 できる 標 準 的 な 画 像 形 式 には JPEG と GIF の 2 種 類 があり ます 特 に GIF は 透 過 色 を 指 定 することで 背 景 を 透 明 にしたり パラパラマンガの 要 領 でア ニメーションにすることができます 本 テキストでは ホームページや 携 帯 メールで 使 える 動 画 の 作 り 方 を 紹 介 します みなさんもオリジナルな 動 画 を 作 成 し ホームページや 携 帯 メールで 活 用 しましょう 動 画 (GIF アニメーション) の 作 成 手 順 としては まず グラフィック 作 成 ソフトを 用 いてア ニメーションの 各 コマとなる 画 像 を 描 き GIF ファイルとして 保 存 します 次 に フリーソフト Giam を 使 って 各 コマとなる GIF ファイルを 結 合 し GIF アニメーション (アニメーション になった GIF ファイル) を 作 成 します JPEG: JPEG (Joint Photograph Experts Group) は 24 ビットカラー (1670 万 色 ) まで 扱 うことができ 多 くの 色 数 を 必 要 とする 写 真 などの 表 現 に 向 いています この フォーマットのファイル 圧 縮 の 仕 組 みは 明 るさの 変 化 に 比 べ 色 調 の 変 化 には 比 較 的 鈍 感 という 人 間 の 目 の 性 質 を 利 用 して 色 調 変 化 の 部 分 のデータを 捨 てることで ファイル 容 量 を 小 さくしています ( 不 可 逆 圧 縮 ) GIF: GIF (Graphics Interchange Format) は 最 大 8 ビットカラー (256 色 ) まで 扱 う ことができ 色 数 をあまり 必 要 としないロゴ リンクボタン アイコン アニメ 調 のイ ラストなど 特 に 単 色 ベタ 面 を 多 く 含 む 平 坦 な 画 像 に 向 いています このフォーマッ トのファイル 圧 縮 の 仕 組 みは たとえば を 01 5 などのように 圧 縮 する LZW (Lempel Ziv Wilch) 圧 縮 法 が 用 いられています ( 可 逆 圧 縮 ) ただし こ の 圧 縮 方 法 には 米 国 Unisys 社 の 特 許 技 術 が 含 まれていたため GIF の 利 用 にあたって 特 許 料 の 問 題 を 抱 えていました しかしながら 米 国 で 2003 年 6 月 20 日 日 本 でも 2004 年 6 月 20 日 に 特 許 の 有 効 期 限 が 切 れたため GIF を 自 由 に 利 用 することができ るようになりました 次 に 紹 介 する Giam もシェアウェアからフリーウェア (フリー ソフト; フリーソフトウェア) として 復 活 しています

4 2 GIF アニメーションの 各 コマとなる 画 像 の 作 成 各 コマとなる 画 像 の 作 成 には Windows に 標 準 で 付 属 する ペイント というソフトウェアを 利 用 することにしましょう ( 使 い 慣 れたソフトウェアがあればそちらを 利 用 してもよい) ペイン トは スタート メニューから スタート プログラム アクセサリ ペイント の 順 にたどって 起 動 します 起 動 すると 図 1 のようなウインドウが 起 動 します ペイントの 詳 し い 使 い 方 については 解 説 しませんが 使 用 方 法 が 不 明 な 場 合 は ヘルプ メニューを 参 照 してく ださい ( 習 うより 慣 れろ!) なお 画 像 サイズや 透 過 色 を 指 定 する 場 合 は 変 形 メニューか ら キャンバスの 色 とサイズ を 選 び 適 切 な 値 を 設 定 してください ( 図 2 参 照 ) なお 背 景 色 に 透 明 を 使 用 を 利 用 する 場 合 は 一 度 GIF ファイルとして 保 存 してください 図 1: ペイント の 初 期 ウインドウ 図 2: キャンパスの 色 とサイズ ウインドウ

5 3 次 に アイデアとかセンスは 別 にして 図 3 のように 少 しずつ 内 容 の 異 なる 各 コマとなる 画 像 を 作 成 します 図 3: 各 コマとなる 画 像 各 コマとなる 画 像 を 保 存 する 場 合 は 図 4 のようにファイルの 種 類 を GIF 形 式 に 変 更 してく ださい 図 4: 名 前 を 付 けて 保 存 ウインドウ

6 4 フリーソフト Giam を 使 って GIF アニメーションの 作 成 GIF アニメーションの 作 成 には 古 溝 剛 (ふるみぞ つよし) 氏 が 提 供 するフリーソフト Giam を 利 用 します まず 古 溝 剛 氏 のホームページ ( か ら 圧 縮 ファイル giam206.lzh ( 図 5) をダウンロードし 適 当 な 場 所 に 保 存 します 今 回 はディ スクトップに 保 存 しましょう 続 いて ダウンロードした 圧 縮 ファイルを 展 開 します 展 開 する とディスクトップにディレクトリ giam206 が 現 れるので ディレクトリを 開 き ディレクト リ 内 にある Giam のアイコン ( 図 6) をダブルクリックし Giam を 起 動 します 図 7 のようなウ インドウが 開 き GIF アニメーションを 作 成 する 環 境 が 整 います 図 5: 圧 縮 ファイル giam206.lzh 図 6: Giam のアイコン それでは Giam を 使 って GIF アニメーションを 作 成 して 行 きましょう Giam を 起 動 したら 各 コマとなる GIF ファイルを 逆 順 に 図 7 の1の 部 分 にドラッグ&ドロップし 各 コマとなる 画 像 を 登 録 します 登 録 された 各 コマとなる 画 像 は 図 7 の2の 部 分 に 一 覧 として 表 示 されます ( 図 8 参 照 ) 図 7: Giam の 初 期 ウインドウ

7 5 図 8: 各 コマとなる 画 像 (GIF ファイル) の 登 録 次 に 2の 上 にあるスクロールバーを 動 か して 正 しい 順 番 に 登 録 されているかチェッ クし 間 違 っている 場 合 は 上 移 動 と 下 移 動 のボタンを 使 って 修 正 してくだ さい 正 しいことが 確 認 できたら 右 上 の 再 生 ボタン I をクリックしてみてくださ い 図 9 のような View ウインドウが 現 れ アニメーションの 出 来 栄 えを 確 認 する ことができます 背 景 色 ボタンを 使 うと 背 景 の 色 が 変 えられ 特 に 透 過 色 を 指 定 した 場 合 に 透 けて 見 える 背 景 の 色 とのバラ ンスを 確 認 することができます もし ア ニメーションの 出 来 が 気 に 入 らない 場 合 は 図 8 の3と4の 領 域 にあるアニメーション のオプションを 設 定 しなおしてください 次 のページにオプションの 詳 しい 説 明 を 載 せておくので 参 考 にしてください 図 9: 確 認 のための View ウインドウ

8 6 気 に 入 った 作 品 ができたら ファイル メニューから 上 書 き 保 存 (または 名 前 を 付 けて 保 存 ) を 選 択 し 保 存 すれば 完 成 です 保 存 する 前 に GIF の 書 き 込 みオプション ウインドウ ( 図 10) が 現 れますが 今 回 はそのまま OK ボタンをクリックしてください 図 10: GIF の 書 き 込 みオプション ウインドウ 最 後 に 図 8 の 右 側 にあるアニメーションのオプションについて 簡 単 な 説 明 をつけておきます 読 者 のみなさんもいろいろ 試 してみてください 3 領 域 ( 全 体 に 関 わるオプション): 全 体 の 幅 全 体 の 高 さ アニメーションを 表 示 するときの 背 景 の 大 きさを 設 定 します 繰 り 返 しセット アニメーションを 繰 り 返 し 表 示 する 場 合 に 設 定 します 繰 り 返 し 回 数 または 永 久 に 繰 り 返 す を 設 定 することができます チェックが 外 れている 場 合 は 1 順 のアニメーションとなります コメント 全 体 に 関 するコメントを 設 定 します 4 領 域 ( 個 々のコマに 関 わるオプション): 基 本 的 には2から 1 コマ 選 択 し そのコマに 対 してオプションを 設 定 します 1 コマの 幅 1 コマの 高 さ 各 コマの 大 きさを 表 示 しています 大 きさを 変 更 することは できません 左 端 の 位 置 上 端 の 位 置 全 体 の 幅 全 体 の 高 さを 基 準 に 各 コマの 表 示 位 置 を 設 定 し ます 透 過 色 の 設 定 各 コマの 透 過 色 を 設 定 します この 項 目 のみコマの 複 数 選 択 ができませ ん 1 コマずつ 設 定 してください ウエイト 有 り アニメーションの 進 行 速 度 を 設 定 します 1/100 秒 から 設 定 できます 消 去 手 段 次 のコマを 表 示 する 際 に 前 のコマをどのように 削 除 するかを 設 定 します 何 もしない そのまま 残 す 背 景 色 でつぶす 直 前 の 画 像 に 戻 す が 設 定 できます 透 過 色 を 設 定 した 場 合 は 背 景 色 でつぶす に 設 定 しておかないと 前 のコマが 見 えて しまいます コメント 各 コマに 関 するコメントを 設 定 します * 詳 しくは Giam の ヘルプ メニューを 参 照 してください

9 7 サンプル GIF アニメーション (その 2) 星 状 化 20 面 体 の GIF アニメーション (Mathematica で 作 成 ) small.gif

10 本 テキストに 関 するご 意 見 ご 質 問 ご 指 摘 等 は 返 信 用 の 電 子 メールアドレスを 明 記 の 上 下 記 の 著 者 電 子 メールアドレスへお 願 いします なお 本 テキストの 内 容 を 逸 脱 すると 思 われる お 問 い 合 わせや 筆 者 のスキルの 及 ばない 範 囲 のお 問 い 合 わせについては お 答 えいたしかねま すのでご 了 承 ください GIF アニメーションを 作 ろう! 2007 年 11 月 13 日 第 1 版 著 者 : 幸 山 直 人 (こうやま なおと) 電 子 メールアドレス: nkouyama@sci.u-toyama.ac.jp ホームページアドレス: 発 行 : 富 山 大 学 理 学 部 数 学 教 室 ホームページアドレス: c 2007 幸 山 直 人