FC2ブログ
プロフィール

ライブ星人

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

ブロとも申請フォーム

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

smile! 2


 
みなさんこんにちは!
アニメーションで遊ぼうよ!

パラパラアニメの作り方(その2)
初めての方は(その1)から見てください。
(その2)では、スプライトを2個(smile, hello)に増やして台詞を表示しています。

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

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

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

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

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

今回のポイントは、スプライトが2個になっていることです。
スプライトは何個でも増やせます。(CPUの処理が追いつく限りは)
スプライト内の子要素のタグの種類は何でもOKです。
(インライン要素はやめたほうが良いかもしれない…)
今回はimgタグとdivタグを使っています。

いじるときのポイントは、
1) idが必ずユニーク(1つだけ)になっていること。
2) Javascrptのオブジェクト間の「,」を忘れないこと。
いじってうまく動かないときはこの2点をチェックしてみてください。

-----------------------------------------------------------
<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!2</h1>
<div id="smile">
   <img id="smile1" src="smile1.png" />
   <img id="smile2" src="smile2.png" />
   <img id="smile3" src="smile3.png" />
</div>
<div id="hello">
   <div id="hello0"></div>
   <div id="hello1">みなさんこんにちは!</div>
   <div id="hello2">アニメーションで遊ぼうよ!</div>
</div>
<script type="text/javascript">
var sprites = {
   smile: {
       0: { id: "smile1" },
      20: { id: "smile2" },
      25: { id: "smile1" },
      70: { id: "smile3" },
      90: { id: "smile1" },
      100: { id: "smile1" }
   },
   hello: {
       0: { id: "hello0" },
      10: { id: "hello1" },
      50: { id: "hello2" },
      90: { id: "hello0" }
   }
};
palapala( sprites );
</script>

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


[ 2012/09/12 ] | 未分類 | CM(0) | TB(0)
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://20thcboy.blog10.fc2.com/tb.php/85-59dd4125
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック