写真の動かし方いろいろ

動く画像を見せる方法にはいろいろあるけど、どの方法がいいのかな？
いくつかある方法を比較しました。

ファイルサイズ比較

  320×240の解像度の画像で、ファイルサイズを比較してみました。

画素数

ファイル
拡張子

ファイル
サイズ

加工の手間

動画（15秒）

.MPG

5,329KB

加工不要

アニメーションGIF
（10枚)

.GIF

495KB

ツールが必要

HTMLコマ送り
（10枚）

.JPG

134KB

難しい

やはり、メールで送ったり、ホームページにのせるなら、HTMLコマ送りがベスト。特別なツールがなくても作れるのもうれしい。


でも、難しいから、自分にはとても無理、とあきらめるのはまだ早い。
次に紹介する方法なら、きっとあなたにもできるはず。だまされたと思って挑戦してみてね。

写真を動かす

コマ送り写真を撮ったら動かしたい。メモ帳を使って、写真を動かすHTMLをつくって、友達をびっくりさせよう。

1.前準備

作業用のフォルダに、必要なファイルを全部集めます。

(1)作業用のフォルダを作ります。

(2)アニメーションしたい画像ファイルをフォルダの下にコピーします。
    それぞれのファイルは、同じサイズに縮小しておきます。

(3)ファイル名を変更します。
アニメーションする順番にしたがって、XXX0.jpg XXX1.jpg、、、という名前にしてください。（ファイル名を変更するには、ファイルを右クリックして、「名前の変更」メニューを選択してから、ファイル名を入力します。）
一度にファイル名を付け替えるには、フリーソフトの「リネーム君」を使うと便利です。

(4)amime.htmをダウンロードします。
《ここ》を右クリックして,「対象をファイルに保存」メニューを選びます。
保存先のフォルダは、(1)のフォルダを指定してください。

(5)loading.gifをダウンロードします。
《ここ》を右クリックして、「対象をファイルに保存」メニューを選びます。
保存先のフォルダは(1)のフォルダを指定してください。

こんな風になりましたか？

020104test
            +-takeoff1.jpg
            +-takeoff2.jpg
            +-takeoff3.jpg
            +-loading.gif
            +-anime.htm

2.HTMLを編集します。

ＨＴＭＬを編集します。

(1)メモ帳を起動して「ファイル」「開く」メニューでanime.htmを開きます。

(2)以下のような内容が出てくるので、以下の指示に従って修正します。

<html>

<head>
<title>ここにタイトルをいれてください</title>
<SCRIPT Language="JavaScript1.2">
<!---

function Animation(filename, fileext, filenum, loopflag) {
　：
（中略）
　：

anime_takeoff=new Animation("takeoff", ".jpg", 28, 0);

//---->
</SCRIPT>
</head>

<body>
ここにタイトルを入れてください。
<hr>
<p>ここにアニメーション１の説明をいれてください。(画像をクリックしてね)</p>
<img border="0" name="imgtakeoff" src="takeoff0.jpg" onClick="anime_takeoff.StartStop(this)" onLoad="setTimeout('anime_takeoff.Change()',500)" >

</body>
</html>

(3)修正が終わったら、「ファイル」「上書き保存」メニューで保存します。

こんな風になりましたか？

<html>

<head>
<title>９月１９日</title>
<SCRIPT Language="JavaScript1.2">
<!---

function Animation(filename, fileext, filenum, loopflag) {
　：
（中略）
　：

anime_takeoff=new Animation("takeoff", ".jpg", 28, 0);

//---->
</SCRIPT>
</head>

<body>
９月１９日　
<hr>
<p>空港に友達を見送りに行きました。画像をクリックして、いっしょにお見送り気分を味わってね。</p>
<img border="0" name="imgtakeoff" src="takeoff0.jpg" onClick="anime_takeoff.StartStop(this)" onLoad="setTimeout('anime_takeoff.Change()',500)" >

</body>
</html>

3.HTMLを確認します。

HTMLファイルをダブルクリックします。

エクスプローラが起動して、説明文と画像が表示されます。<サンプルはこちら>

画像をクリックすると、アニメーションが始まります。もう一度クリックすると止まります。

4.メールで送ります。

フォルダの下のファイルを全部メールで送ります。

初めて送る人には、以下のように写真の見かたを教えてあげよう。

「どこかのフォルダに、添付ファイルを全部保存してから、
保存したファイルのうちのanime.htmをダブルクリックしてね。」

Copyright © 2002-2003 Koppe. All rights reserved.