ブログに桜の花びらが舞うパーツを作ろう

2009年2月27日(金)
山下 美緒

注意点とブログへの貼り付け

 まず、注意点として、フローティング領域で表示するswfのアニメーションが非表示の間は、必ず動きを止めておくように注意してください。フローティング領域が非表示になっていて実際には動きが見えない状態の間も、裏側でスクリプトは動き続けており、再生しているマシンに多大な負荷がかかってしまいます。

 例えば、今回のサンプルでは、桜の花びらのムービークリップを多数生成して、ステージ上で動かしています。フローティングのswf上で閉じるボタンをクリックした際には、これらの生成したムービークリップをすべて消去しています。

 最後にブログページへ貼り付けれるようにファイルを整えます。ファイルの構成やフローティングさせる仕組みについては、前回の記事(http://thinkit.jp/article/858/2/)で作成したフローティングブログパーツと基本的には同様です。

 今回は、サイドバー部分をFlashで作成していますので、その部分だけが違います。次の(a)から(f)のファイルをブログパーツ提供元のサーバーへ配置し、(f)のタグをユーザーへ配布します。

(a)サイドバー表示用の画像ファイル(sidebar.swf)
(b)フローティング型のブログパーツ本体のFlashファイル一式(cherry.swf)
(c)ブログパーツを表示するJavaScriptファイル(kuru2_sample_base.js)
(d)フローティング用のブログパーツを表示するJavaScript(kuru2_sample_float.js)
(e)レイヤーの生成やサイズ調整を行うJavaScriptライブラリ(js_lib/SWFLayer.js)
(f)ブログページへの貼り付け用HTMLタグ(blog.html)

ブログパーツの表現を広げよう

 これまでブログパーツの作り方について解説してきたように、Flashを使ったブログパーツを作るときには、JavaScriptで動的にブログページに貼り付けを行う仕組みの理解ができると、通常のFlashコンテンツで実現可能なことはほとんど実装することが可能です。

 第2回で取り上げたように、さまざまなAPIやブログのRSSなど、外部ファイルと連携したマッシュアップや、PHPなどのサーバーサイドのプログラムやデータベースとの連携によるアプリケーションの作成など、ブログパーツの幅が一気に広がるでしょう。

 また、ブログの主役はあくまでも記事本文であり、ブログパーツはその脇を飾るパーツではありますが、そのギミックやアイデアは、まだまだいっぱい残っていると思います。ぜひ、面白いブログパーツを作ってどんどん公開してみてください。

株式会社ピクルス
大学卒業後、JAの金融窓口の事務を2年間行った後、一念発起しWebの世界へ飛び込む。eラーニングコンテンツの制作会社やWeb系の制作会社を経て、2007年より(株)ピクルスに勤務。現在は、広告キャンペーン系のサイトの企画/制作、特にFlashやXHTML/CSSなどのWebコンテンツ全般の実装を行っている。ブログパーツを中心としたデジタルアイテムの配信サイト「くるくるパーツ(http://parts.kuru2jam.com/)」も運営中。最近は、上越線が気になっています。
http://www.pickles.tv/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています