Home > Web | 技術 > NoTechnoNoLifeのタイトルFlashの解説

NoTechnoNoLifeのタイトルFlashの解説

NoTechnoNoLifeのタイトルFlashの解説

自分のブログ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でモザイク処理できるようにしてみたからモザイク用のライブラリを拝借して使っています。

いや〜助かります!

ソースコード

ブログに貼付けるにはちょっとコード量が多かったので、以下に置いておきます。

gist: 204756 - GitHub

まとめ

完全に自分用に作ったActionScriptなので、とっても恥ずかしいのですが、誰かのWeb制作の手助けになれば幸いです。

あと気分で画像やアニメーションを変えることがあると思いますので。。

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な情報をあなたに

Home > Web | 技術 > NoTechnoNoLifeのタイトルFlashの解説

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top