techtalk

FlashDevelopで作ってみた(1) ニコニコ風タグクラウド
AddThis Social Bookmark Button  Date:2008年06月24日  Category:Flash  Author:岡村

FlashDevelopだけでニコニコ風タグクラウド作ってみました。
…ので公開してみます。

ふじ
表示例

お好きな画像の上にお好きなサイズで、表示することができます。
ちなみに millon.jp 用に作りました。
millon
millon


■ダウンロード
NicoCloud ダウンロード

■置き方

  1. <div style="position:relativewidth:画像の縦サイズpxheight:画像の横サイズpx">
  2. <img src="背景画像" width="画像の幅サイズ" height="画像の縦サイズ" />
  3. <div style="position:absolutetop:0left:0">
  4. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="画像の横サイズ" height="画像の縦サイズ" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="id" value="NicoCloud" />
  5. <param name="wmode" value="transparent" />
  6. <param name="src" value="NicoCloud.swf?url=タグファイルXML&minSpeed=最低スピード&maxSpeed=最高スピード"/>
  7. <!-- FireFox用 -->
  8. <embed id="NicoCloud" type="application/x-shockwave-flash" width="画像の横サイズ" height="画像の縦サイズ" src="NicoCloud.swf?url=タグファイルXML&minSpeed=最低スピード&maxSpeed=最高スピード" wmode="transparent"></embed>
  9. </object>
  10. </div>
  11. </div>

画像のサイズや、画像ファイル名は該当する値に変えてください。
ダウンロードファイル内にサンプルあります。
値を省略した場合はそれぞれ、以下の値に置き換えられます。

url=tags.xml
minSpeed=5
maxSpeed=10

表示するタグは以下のようなXMLファイルで用意します。

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <root>
  3.   <item>
  4.     <tag>ざわ…</tag>
  5.     <size>10</size>
  6.     <url>/dummy/1</url>
  7.   </item>
  8.   <item>
  9.     <tag>ざわ…</tag>
  10.     <size>10</size>
  11.   </item>
  12.   <item>
  13.     <tag>ざわ…</tag>
  14.     <size>12</size>
  15.   </item>
  16. </root>

tagには タグの名前
sizeには タグのフォントサイズ
urlには、タグをクリックした際のジャンプ先のリンクを記述します。
urlが省略された場合、タグクリックでジャンプしません。

なお、スピードを大きくしたり、表示するタグの数が多いと、、、重くなります、、、

次のエントリで、ソースコード公開しようと思います。

←PHPUnitのレポート表示でテストケースの注釈を表示させる方法 Topに戻る Drupalのモジュールの作成→
カテゴリー
全て
Flash
PHP
雑記