プロフィール

ライブ星人

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

ブロとも申請フォーム

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- ] | スポンサー広告

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

smile! 4







パラパラアニメの作り方(その4)
初めての方は(その1)から見てください。
(その4)では、スプライトの透明度を変更しています。

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

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

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

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

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

今回のポイントは、スプライトの透明度を変更していることです。

紫色の部分が透明度を変更する為の設定です。
1) 透明度を0.1~1.0の範囲で設定してください。
 ※なぜか0.0の指定はうまくゆきません。?
2) opacityの指定があるときだけスプライトをその透明度へ変更します。
 指定がないときはそのままの透明度を保持します。
3) 透明度を変更するときもposition:absolute(ピンク色のところ)を指定してください。
 ieの透明度をjavascriptで変更する為にはこのおまじないが必要(下記サイト参照)
 http://d.hatena.ne.jp/onozaty/20070316/p1

-----------------------------------------------------------
<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! 4</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", opacity: 0 },
       5: { id: "smile1", opacity: 0.1 },
       10: { id: "smile1", opacity: 0.2 },
       15: { id: "smile1", opacity: 0.3 },
       20: { id: "smile1", opacity: 0.4 },
       25: { id: "smile1", opacity: 0.5 },
       30: { id: "smile1", opacity: 0.6 },
       35: { id: "smile1", opacity: 0.7 },
       40: { id: "smile1", opacity: 0.8 },
       45: { id: "smile1", opacity: 0.9 },
       50: { id: "smile1", opacity: 1 },
       60: { id: "smile2", opacity: 1 },
       65: { id: "smile1", opacity: 1 },
       70: { id: "smile3", opacity: 0.8 },
       75: { id: "smile3", opacity: 0.6 },
       80: { id: "smile3", opacity: 0.4 },
       85: { id: "smile3", opacity: 0.2 },
       90: { id: "smile3", opacity: 0.1 },
       120: { id: "smile3", opacity: 0.1 }
   }
};
palapala( sprites );
</script>

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


[ 2012/09/15 ] | パラパラアニメの作り方 | CM(0) | TB(0)
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://20thcboy.blog10.fc2.com/tb.php/87-7dbee853
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。