FC2ブログ
プロフィール

ライブ星人

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

ブロとも申請フォーム

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

smile!


パラパラアニメの作り方(その1)
一番簡単な作り方です。

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

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

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

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

全てのファイルを同じフォルダーに入れたらsmile.htmlを開いて動けばOK!
あとは、下記のルールに従って自分の画像に差し替えれば出来上がりです。

太い文字の部分が必要な設定です。
青のid: このタグが1つのスプライトになります。
緑のid: このタグがスプライト内の子要素になります
赤の数値: この数字のタイミングで指定した子要素を表示します。
数字は1が40ミリ秒(1/25秒)です。一般的なアニメのフレーム数?
スプライトの子要素を適当に増やして、フレーム数も適当に増やして
自分の絵を動かしてみてください。
-----------------------------------------------------------
<html>
<head>
<title>smile</title>
<script type="text/javascript" src="palapala.js"></script>
</head>
<body>
<h1>smile!</h1>
<div id="smile">
   <img id="smile1" src="smile1.png" />
   <img id="smile2" src="smile2.png" />
   <img id="smile3" src="smile3.png" />
</div>
<script type="text/javascript">
var sprites = {
   "smile": {
       0: { "id": "smile1" },
      20: { "id": "smile2" },
      25: { "id": "smile1" },
      50: { "id": "smile3" },
      60: { "id": "smile3" }
   }
};
palapala( sprites );
</script>

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

これならJavascriptとか知らない人でも
動かせるのではないかな…
是非一度、自分の絵を動かしてみてください。
それなりに楽しいです。
,とか、}とか忘れがちで動かなくなるので要注意
あと、chromeで動いてもIEで動かないこともあるので
IEでの確認はした方がよいです。
なぜかfc2ブログのプレビューでは動きません。

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