====== Flashを動的に表示してアクティブ化する - FlushFlash ======

コメントと更新履歴は[[http://0-oo.net/log/category/flush-flash/|ゼロと無限の間のログ » FlushFlash]]でどうぞ。

{{javascript:flash-3d.png|}}

object/embedタグで表示しただけでは、クリックしないとアクティブにならないFlashを、動的に描き出すことにより表示と同時にアクティブ化するJavaScript。

それなら[[http://code.google.com/p/swfobject/|SWFObject]]でいいじゃないかとも思ったけどちょっとオーバースペック？三輪車には三輪車の車輪を。

ところで、ある程度Flashを表示するWebサイトの場合は[[http://d.hatena.ne.jp/Mug/20060411/1144761874|MSIEのパッチKB912945の対応案 - 新しいJavaScriptの使い方を考える]]のやり方がスマートだと思える今日この頃 ^_^


===== 使い方の例 =====
その場に描き出す場合
<code javascript>
var flush = new FlushFlash("/path/to/swf", 400, 300);
flush.write();
</code>

idを指定してそこに埋め込む場合
<code javascript>
var flush = new FlushFlash("/path/to/swf", 400, 300, {bgcolor: "#ffffff"}); //最後のパラメータでparamを追加できる
flush.setTransparent(); //いくつかのparamは関数呼び出しでセットできる
flush.into("element-id"); //普通は空のdiv要素を用意してそのidを指定する
</code>

メソッドチェーンもできる
<code javascript>
new FlushFlash("/path/to/swf", 400, 300).avoidCache().allowAccess().write();
</code>



===== ソースコード =====
<code javascript>
/**
 *  FlushFlash
 *  @see       http://0-oo.net/sbox/javascript/flush-flash
 *  @version   0.1.1a
 *  @copyright 2008 dgbadmin@gmail.com
 *  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 */

/**
 *  コンストラクタ
 *  @param  String  path    swfのパス
 *  @param  Number  width   幅
 *  @param  Number  height  高さ
 *  @param  Object  options (省略可) param要素として指定する値
 */
FlushFlash = function(path, width, height, options) {
    this.path = path;
    this.w = width;
    this.h = height;
    this.params = options || {};
    this.params["movie"] = path;
};
/**
 *  ブラウザキャッシュのSWFを使わずに、SWFを強制リロードする
 *  @return self
 */
FlushFlash.prototype.avoidCache  = function() {
    if (this.path.match(/\?/)) {
        this.path += "&";
    } else {
        this.path += "?";
    }
    this.path += "dummyToAvoidCache=" + new Date().getTime();
    return this;
};
/**
 *  透過にする （※透過にするとテキストボックス等でIMEが使えなくなるので注意）
 *  @return self
 */
FlushFlash.prototype.setTransparent = function() {
    this.params["wmode"] = "transparent";
    return this;
};
/**
 *  背景色を指定する （#ffffff形式で指定する。#fff形式は使えない）
 *  @param  String  color
 *  @return self
 */
FlushFlash.prototype.setBgColor = function(color) {
    this.params["bgcolor"] = color;
    return this;
};
/**
 *  外部ドメインにアクセスできるようにする
 *  @return self
 */
FlushFlash.prototype.allowAccess = function() {
    this.params["allowScriptAccess"] = "always";
    return this;
};
/**
 *  FlashVarsを渡す
 *  @param  String  vars
 *  @return self
 */
FlushFlash.prototype.setFlashVars = function(vars) {
    this.params["FlashVars"] = vars;
    return this;
};
/**
 *  object要素を生成する
 *  @return string  object要素
 */
FlushFlash.prototype.build = function() {
    var o = "";
    o += '<object data="' + this.path + '" width="' + this.w + '" height="' + this.h + '"';
    o += ' type="application/x-shockwave-flash">';
    var params = this.params;
    for (var i in params) {
        o += '<param name="' + i + '" value="' + params[i] + '" />';
    }
    o += '</object>';
    return o;
};
/**
 *  その場にswfを描き出す
 */
FlushFlash.prototype.write = function() {
    document.write(this.build());
};
/**
 *  要素の中にswfを描き出す
 *  @param  String  elementId
 */
FlushFlash.prototype.into = function(elementId) {
    document.getElementById(elementId).innerHTML = this.build();
};
</code>