FC2ブログ
プロフィール

ライブ星人

Author:ライブ星人
性別:宇宙人
血液型:普通にA型
出身地:ライブ星
出没地:渋谷
職業:遊び人
出没するサイト:
東京ライブネット
ライブ東京 - ライブハウス東京

ブロとも申請フォーム

パラパラアニメの作り方(その3)

smile! 3







パラパラアニメの作り方(その3)
初めての方は(その1)から見てください。
(その3)では、スプライトの表示位置を動かしています。

<遊び方>
PCに作業用のフォルダーを作りそこに以下のファイルを保存してください。

(1)画像ファイル3つ(smile1.png, smile2.png, smile3.png)
smile1.png
smile2.png
smile3.png

(2)palapala.jsファイル
palapala.js

(3)smile3.htmlファイル
smile3.html

全てのファイルを同じフォルダーに入れたらsmile3.htmlを開いて動けばOK!
サンプルをいろいろいじって遊んでみてください。

今回のポイントは、スプライトの表示位置を動かしていることです。

紫色の部分が動かす為の設定です。
1) スプライトのタグにスタイルのposition:absolute属性を設定してください。
2) Javascrptのオブジェクトでは、スプライトの親要素の左上からの位置を
 leftとtopで指定してください。
3) leftやtopの指定があるときだけスプライトをその位置へ移動します。
 指定がないときはそのままの位置を保持します。
※例には無いですがスプライトの親タグにはposition:relative属性を設定してください。
-----------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>smile</title>
<script type="text/javascript" src="palapala.js"></script>
</head>
<body>
<h1>smile! 3</h1>
<div id="smilestyle="position:absolute">
   <img id="smile1" src="smile1.png" />
   <img id="smile2" src="smile2.png" />
   <img id="smile3" src="smile3.png" />
</div>
<br>
<script type="text/javascript">
var sprites = {
   smile: {
       0: { id: "smile1", top: 20, left: 200 },
       2: { id: "smile1", top: 20, left: 180 },
       4: { id: "smile1", top: 20, left: 170 },
       6: { id: "smile1", top: 20, left: 160 },
       8: { id: "smile1", top: 20, left: 150 },
      10: { id: "smile1", top: 20, left: 140 },
      12: { id: "smile1", top: 20, left: 130 },
      14: { id: "smile2", top: 20, left: 120 },
      16: { id: "smile2", top: 20, left: 110 },
      18: { id: "smile1", top: 20, left: 100 },
      20: { id: "smile1", top: 20, left: 90 },
      22: { id: "smile1", top: 20, left: 80 },
      24: { id: "smile1", top: 20, left: 70 },
      26: { id: "smile1", top: 20, left: 60 },
      28: { id: "smile1", top: 25, left: 50 },
      30: { id: "smile1", top: 30, left: 40 },
      32: { id: "smile1", top: 40, left: 30 },
      34: { id: "smile3", top: 50, left: 20 },
      50: { id: "smile3" }
   }
};
palapala( sprites );
</script>

</body>
</html>
-----------------------------------------------------------


[ 2012/09/13 ] | パラパラアニメの作り方 | CM(0) | TB(0)
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://20thcboy.blog10.fc2.com/tb.php/86-2a540456
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック