5 月 22

HTMLへFlashを埋め込む際、いろいろな埋め込み方がありますが、
僕はaflax.jsを使うのが好きです。理由はコードが少なくてすっきりするからですが P2a

まぁ、実物を見た方が理解は早いと思うので、こちらを見て下さい。

実行環境
aflax.js ver1.1
flash actionscript3.0


Open this html



HTMLにjsファイルをインクルードします。
prototype.jsは0004.jsで使っています。

<script type="text/javascript" src="lib/prototype/prototype.js"></script><br /> <script type="text/javascript" src="lib/AFLAX/aflax.js"></script><br /> <script type="text/javascript" src="js/0004.js"></script>



HTMLにFlashを埋め込むソースは1行だけです。

<script>aflax.insertFlash(500, 150, "#000000", "swfLoaded");</script>

insertFlash()で指定している”swfLoaded“は、
0004.js(下で説明)に記述されたメソッドです。
Flashがロードされた時に、FlashからswfLoaded()をコールしてもらうように、ここで指定します。
insertFlashがコールされるとaflax.jsでは、flashアプリに対してGETコマンドを投げてFlashを呼び出します(下記のようなURL)。

swf/location.swf?callback=swfLoaded

flashアプリはこのクエリを解析し、callback=の後のswfLoadedをコールバック関数とみなし、コールバックをコールしているようです。

※aflax.jsのサンプルだと、aflax.swf?callback=goとなっていて、goという名前のコールバックメソッドをここではswfLoadedという名前に変更しています。





あとは0004.jsを用意します。

/**
 * Road swf
 */
var flashpath = "swf/logoaction.swf";
var aflax = new AFLAX(flashpath);
onload=init;

// swfがロードされた際にswf側からコールするメソッド
function swfLoaded(){
	$('debug').innerHTML = "swfのロードがFlashから通知されました。5秒後にJavascriptがFlashのテキストを更新します。";
	setTimeout( function(){ updateText(); },5000);
}

// swf側のテキストを更新するメソッド
function updateText(){
	aflax.callFunction("updateDisplay","Set to JavaScript");
	$('update_form').style.visibility = 'visible';
}

// HTMLロード時にコールされるメソッド
function init(){
	$('update_form').style.visibility = 'hidden';
	$('update_button').onclick = updateText2;
}

// 更新ボタンが押下された際にコールされるメソッド
function updateText2(){
	var value = $('update_text').value.substr(0,16);
	aflax.callFunction("updateDisplay",value);
}



最後にFlashを用意します。
Flashアプリロード時にJavascript側で指定してきたコールバック関数(swfLoaded())をコールするため、
RootDocumentClass(ドキュメントクラス)のコンストラクタの最後でjscall(”callback”)というメソッドをコールしています。
このメソッドは、location.swf?callback=swfLoaded というクエリからswfLoadedを抜き出し、
swfLoadedをjavascriptのコールバック関数とみなして、実行します。
jscall()をコールしている位置は、どこでもよいと思います。
Flashアプリのロードが完了したと思う位置に入れればよいと思います。
ここではRootDocumentClassのコンストラクタで指定しているため、
描画の開始と同時にcallbackが呼ばれることになります。

package{
    import flash.ui.*;
    import flash.events.*;
    import flash.net.*;
    import flash.display.*;
    import flash.system.*;
    import flash.external.ExternalInterface;

    public class RootDocumentClass extends Sprite {

        // 変数
        public var container_mc:BackGroundContainer;

        //コンストラクタ
        function RootDocumentClass(){
            // javascript側からコールする関数を宣言
            ExternalInterface.addCallback("updateDisplay", updateDisplay);
            jscall("callback");
        }

        // jsのコールバック関数をコールする
        // location.swf?callback="name"のnameをjsのコールバック関数とみなす
        public function jscall(name:String){
            var param:Object=LoaderInfo(this.loaderInfo).parameters;
            if(param[name] != null){
                ExternalInterface.call(param[name]);
            }
        }

        public function updateDisplay(value:String){
            container_mc.setTextB(value);
        }
    }
}



5 月 21

ホームページに画像を表示する際、何か良いJavascriptのライブラリはないかと探してみて、
一番使えそうだったのが、Highslide JSでした。


Open this html

使う際、CSSの読み込みで若干はまったので、覚書します。


ファイルパス

以下の構成でHTMLを作成するとします。

http://localhost/labo/0001.html (表示するHTMLのパス)
http://localhost/labo/lib/highslide/highslide-full.js
http://localhost/labo/lib/highslide/highslide.css


highslide-full.jsの読み込み方法

highslideのjsファイルはhighslide-full.jsを指定して下さい。

<script src="lib/highslide/highslide-full.js" type="text/javascript"></script>


highslide.cssの読み込み方法

CSSを指定して下さい。

<link rel="stylesheet" href="/labo/lib/highslide/highslide.css" type="text/css" />


hs.graphicsDirの書き方

hs.graphicsDirには「’lib/highslide/graphics/’」を指定します。

<script type="text/javascript"> hs.graphicsDir = 'lib/highslide/graphics/'; hs.align = 'left'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = ’rounded-white’;  hs.wrapperClassName = ’white’; hs.fadeInOut = true; //hs.dimmingOpacity = 0.75; // 背景を暗くする </script>