自分のブログNoTechnoNoLifeのタイトルFlashを「どうやって作っているの？」とコメントで質問されましたので、たいしたFlashではないのですが、ざっくり紹介してみようと思います。
ブログにアニメーションするFlashを導入する場合、一番気になるのがHTMLのレンダリングに邪魔されてFlashのアニメーションがカクカクしちゃうということですが、
これに関してはdelay（遅延）を使ってある程度防ぐ方法にしています。
とくに動画を紹介しているサイトだと結構重くなるので、そうゆうときがこれまた難しいですね。
JavaScriptからDomContentLoadedのタイミングを受け取って、そのときにアニメーションを開始するなんて方法も使えそうですが、ExtarnalInterfaceを使いたくなかったので、こうゆう方法は使っていないです。
サンプルページ
まずはサンプルとなるページを用意したので、こちらをご覧ください。
NoTechnoNoLife/test.html
初めにタイトルとなるNoTechnoNoLifeの画像を表示しておいて、2秒ほど遅延させます。
その後に足やフラワーがアニメーションし始めます。
レイヤーの説明
これを表現するのに、今回は3枚のレイヤーを作っています。
タイトル画像を持つBaseLayer 足の部分を持つLegLayer そして最後に上から降りてくるflowerLayer
このFlashをクリックすると、自分の画面をリロードするのですが、これはflowerLayerにリンク機能を付けて実現しています。
なので、flowerLayerが降りて来ない限りクリックしても無反応になっています。（これはこれで問題かな。。。）
リンク機能もいろいろあって、JavaScriptのlocation.hrefを呼び出すとかあるのですが、微妙にクロスブラウザの処理が必要なので、
こんな風にnavigateToURLメソッドを使うようにしています。
これだとどのブラウザでクリックしても同じ挙動でした。
そしてこれらを順番にSpriteにaddChildしていき、それっぽくdelayをかけてアニメーションさせています。
使っているライブラリ
アニメーションの部分ではTweenerを使っていて、モザイクの機能も足したかったので、@24Log » Blog Archive » Tweenerでモザイク処理できるようにしてみたからモザイク用のライブラリを拝借して使っています。
いや〜助かります！
ソースコード
ブログに貼付けるにはちょっとコード量が多かったので、以下に置いておきます。
まとめ
完全に自分用に作ったActionScriptなので、とっても恥ずかしいのですが、誰かのWeb制作の手助けになれば幸いです。
あと気分で画像やアニメーションを変えることがあると思いますので。。
- Newer: スケボーからTwitterにPost - Twitter SK8
- Older: JavaScript - HelloWorld
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1216
- Listed below are links to weblogs that reference
- NoTechnoNoLifeのタイトルFlashの解説 from HouseTect, JavaScriptな情報をあなたに
