tommmmyの思う、WEB標準に準拠した(X)HTMLやCSS・デザイン・Mac・phpのTipsなど

www.flickr.com

Tips

BOX2D FLASH AS3とXMLを使ったFlashBlog

先日のFPS2008、申込が遅れてしまってキャンセル待ちをしていたのですが、都合がつかなくなった方よりお譲りいただきまして、行かせていただきました!T内さん本当にありがとうございました!!

で、FPSのレポートも後日しますが、とりいそぎ、前回も紹介した今アツいBOX2Dを使ったFlashBlog。

BOX2Dって?

詳しくは、技評さんの特集:Box2DでActionScript物理プログラミングで書かれていますが、

ようは、わたしたちがフツーに生きている中でフツーにありえる物理的な現象。たとえば、上からなにかモノを落としたり、落としたときにモノがはずんだり、ぶつかって跳ね返ったり、重力の関わる現象。それを、ちょちょちょーっといじるだけで簡単に実装できるライブラリがBOX2D。

どんなもの?

まず、サンプル↓↓(画像をクリックすると、別ウィンドウが立ち上がります)

box2d.jpg

ね、どさどさーっと画像がおちてきましたよね。でもこれだけじゃなくて、マウスでドラッグして離してみてください。放り投げれます。(あんまり放り投げすぎると、どっかいって返ってこないwww)

そうしたら今度は、写真をダブルクリックしてみてください。その写真に対する説明がつらつらと出てきます。左上の「close」ボタンで閉じます。こちらのダブルクリックしたら詳細がでる、というのはBOX2Dとは関係なく、ブログを使ってカスタマイズされています。

どうなってるの?

まず、次の3つを使っています。

  • (1)BOX2Dを設定したswfファイル
  • (2)XMLファイル
  • (3)上記XMLを吐き出すためのMovableType

基本的には、(1)のswfからXMLを参照し、その中身を取り出して表示させています。そして、XMLの更新を楽にするために、MovableTypeを使っています。

今回、このswfの作成者はtommmmyのFlashの師匠、秋葉秀樹氏。「デザイナーさんのためのAS3」やその他Web制作関連Tipsをブログにて掲載。BOX2Dについてはこちらの記事を参照です。

秋葉氏がMT4用に作ったものを、tommmmyがMT3.3にて試用(いい加減バージョンアップしないといけないんだけど…汗)、うまく設定さえすれば問題なく使えました。

設定方法

まず、FlashBlogにしたいカテゴリを改めてひとつ作成します。そして、その名前をXMLに設定、記事はそのカテゴリにアップしていくことになります。

XMLの設定

このswfに適用させるためには、オリジナルのフォーマットでXMLを吐き出さなければなりません。こちらのフォーマットは、後日秋葉氏より配布(されるはず)。

swfとXMLをアップロード

そうしたら、swfとXMLが同階層になるようにアップロードします。そうすることにより、swfからXMLを参照できるようになります。

MTで記事をアップ

最後に、MTでフツーに記事を書きます。ただ、これもフォーマットにそって書きます。今回の場合は、「タイトル」に記事タイトル、「内容」に記事の内容、そして「追記」に写真のソースを貼付けます。
写真ソースの貼付けは、「画像のサムネイルを作成」にチェック、ここでサムネイルの大きさ=トップに表示されるサムネイルの大きさとなります。そしてポップアップではなく埋め込みにて作成し、貼付けます。

以上!
これで、swfを見てみると、もうFlashBlogのできあがり!
クライアントさんでも簡単に更新のできるFlashBlog、使っているのはAS3の処理速度ならではのBOX2Dと、AS3から楽ちん〜に使えるようになったXMLの呼び出し。
もちろんAS2のときからこういった作例はありましたが、AS3になってからならではの簡単さ、楽ちんさがありますね。

(参考)このブログをフツーのテンプレートで見てみると?

フツーですよね。ひっぱってきている元のものは同じなので、ただ単に見栄えが変わっているだけです。オモロー!

Tags: , ,

by tommmmy at 2008-09-20-Sat 01:14 in Tipsこのエントリーをはてなブックマークする このエントリーを含むはてなブックマーク

TrackBack(0)

TrackBack URI:

▲pageTop

Comments(3)

男宝 said...

リドスプレー:www.newtrendsshop.com/p212.html
ビグレックス:www.newtrendsshop.com/p198.html
VigRx:www.newtrendsshop.com/p198.html
VigRx:www.newtrendsshop.com/p198.html
VigRx:www.newtrendsshop.com/p198.html
vigrxプラス:www.newtrendsshop.com/p198.html
Wenick Man:www.newtrendsshop.com/p192.html
五便宝:www.newtrendsshop.com/p238.html
RU486:www.newtrendsshop.com/p59.html
RU486:www.newtrendsshop.com/p59.html
RU486:www.newtrendsshop.com/p59.html
RU486:www.newtrendsshop.com/p59.html
男宝:www.newtrendsshop.com/p329.html
蔵八宝:www.newtrendsshop.com/p430.html
新一粒神:www.newtrendsshop.com/p429.html
MaxMan:www.newtrendsshop.com/p152.html
壮天根:www.newtrendsshop.com/p55.html

at 2014-01-24-Fri 20:07

花之欲 said...

淫インモラル:www.yahookanpou.com/product/innmolaru.html
淫インモラル:www.yahookanpou.com/product/innmolaru.html
淫インモラル:www.yahookanpou.com/product/innmolaru.html
淫インモラル:www.yahookanpou.com/product/innmolaru.html
蒼蝿水:www.yahookanpou.com/product/cangyshui.html
蒼蝿水:www.yahookanpou.com/product/cangyshui.html
蒼蝿水:www.yahookanpou.com/product/cangyshui.html
蒼蝿水:www.yahookanpou.com/product/cangyshui.html
花之欲:www.yahookanpou.com/product/huazhiyuyeti.html
花之欲:www.yahookanpou.com/product/huazhiyuyeti.html
花之欲:www.yahookanpou.com/product/huazhiyuyeti.html
花之欲:www.yahookanpou.com/product/huazhiyuyeti.html
美人豹:www.yahookanpou.com/product/mrbkfy.html
美人豹:www.yahookanpou.com/product/mrbkfy.html
美人豹:www.yahookanpou.com/product/mrbkfy.html
美人豹:www.yahookanpou.com/product/mrbkfy.html
威哥王:www.yahookanpou.com/product/weigwang.html
威哥王:www.yahookanpou.com/product/weigwang.html
威哥王:www.yahookanpou.com/product/weigwang.html
威哥王:www.yahookanpou.com/product/weigwang.html
威哥王:www.yahookanpou.com/product/weigwang.html
妻之友:www.yahookanpou.com/product/qizhiyouwy.html
妻之友:www.yahookanpou.com/product/qizhiyouwy.html
妻之友:www.yahookanpou.com/product/qizhiyouwy.html
妻之友:www.yahookanpou.com/product/qizhiyouwy.html

at 2014-01-24-Fri 20:08

Daniel said...

Hi there! I know this is kind of off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having difficulty finding one? Thanks a lot!

at 2016-10-20-Thu 00:06

Post a Comment

▲pageTop

hands in handsとは?

"hands in hands"とは、もともと「手を携えて」という意味です。仕事をしていく上で、もっと言えば生きていく上で必ず必要な仲間、人の手。そのつながりを大切にしつつ、お仕事のアウトプットをしていくブログです。

search

  • 人気ブログランキング - hands in hands
  • このフィードをはてなRSSに追加する
  • テクノラティジャパンに追加する
  • powered by Movable Type3.34
  • Creative Commons License