NORIのFlashユーザのためのMovable Type講座 gihyo.jp版

第8回 Flashコンテンツを公開する

この記事を読むのに必要な時間:およそ 8 分

Flashコンテンツを公開するために今回は,MTでhtmlを出力します。

通常であれば,Flashが出力するhtmlでも十分かもしれません。しかし,今回はコンテンツ(写真画像やタイトル)をMTで管理しているので, 検索エンジン対策も兼ねてダイナミックに変化するhtmlを提供したいと思います。

これを実現するには,SWFObjectを使用して,Flashに置き換わる<div>要素の部分にも,情報を出力します。

また,今回のコンテンツは,フォトアルバムということで,個々の写真のURLを指定できるようにSWFAddressを利用します。

まず「SWFAddressの導入によるFlashの修正」をし,次は「MTによるSWFObjectを利用したhtmlの作成」について紹介します。

SWFAddressの利用

SWFAdressは,Flashとブラウザ間で,URLやタイトルの情報をやりとりする仕組みを提供します。

これを利用すると,Flashで次のことが可能になります。

  • アドレスバーの文字列を取得する(URLが変更されるとFlash内にイベントが流れます)。
  • ブラウザのアドレスバーやタイトルを変更する。

今回のフォトアルバムでいえば,画像ごとにURLとタイトルを変更できます。 つまり個別の画像に対して,固有のタイトルでのブックマークが可能になります。

 個別のURLとタイトル

図 個別のURLとタイトル

SWFAdressは,以下で配布されていますので,ダウンロードしておきます。

 SWFAdressサイト

図 SWFAdressサイト

SWFAdressに対応したFlashを作成する際に,必要な機能は次の通りです。

  • アドレスバーが変更されたら、アドレスバーの文字列にしたがって画像を読み込む
  • アドレスバー,タイトルバー,ステータスバーをスクリプトで変更する。

大きな修正として,従来はXMLを読み込んでからFlash内部で関数を呼んで画像を表示していましたが,SWFAddressではアドレスバーの変更がすべてのきっかけになるため,アドレスバーの変更→XMLのチェック→画像の表示となります。

このとき重要なのは,XMLがまだ読み込み終わっていない場合を想定してロジックを組み立てないといけないことです。

また,クリックして次の画像を表示するフローが,クリックしたらアドレスバーを変更するフローに変わります。アドレスバーの変更はFlash内のイベントを呼び起こし,次の画像を読み込むというフローに繋がります。

アドレスバーの変更イベントは,一番最初にFlashを表示した時も発生します。

SWFAddressの準備

SWFAddressでは,2つのasファイルが提供されています。

今回作成しているFlashは,AS3なので,ダウンロードし解凍したフォルダのsrc/as/3にある2つのasファイルが必要です。

  • SWFAddress.as
  • SWFAddressEvent.as

とりあえず,Flaファイルと同じフォルダにコピーしておきましょう。

 2つのASは,同じフォルダに置く

図 2つのASは,同じフォルダに置く

では,URLを読み取る部分から作成しましょう。

URLの読み取り

SWFAddressでは,URLのアドレスが~.html#/○○となる場合の,○○をFlash側で知ることができます。

そこで,今回のフォトアルバムでは,次のような仕様にしています。

「URLを~.html#/<entryID>とし,ユーザが~.html/#1とアクセスすると,entryID=1の画像を表示する」

SWFAddrressでは,アドレスバーが変更されると SWFAddressEvent.CHANGE というイベントが発生します。

そこで,次のようにすることで関数onChangeSWFAddress()がその都度,実行されます。

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChangeSWFAddress);

関数の引数であるSWFAddressEventの value には,#以降の文字列が入ってきます。

ここからentryIDだけを取り出して,前回まで使っていたshowPicture()という関数に渡すのですが,実は,showPicture()は順番を元に表示する画像を特定しているため,そのまま数値を渡してもエラーになってしまいます。

そこで,一度,showPicture()を実行する前にentryIDから順番を求めるshowPictureByID()関数を作成しました。

それを利用して,表示すべき画像を特定しています。

showPictureByID()という関数では,渡されたentryIDから,配列image_arrayの中にあるオブジェクト1つ1つと照らし合わせて順番を割り出すgetNumFromID()関数を実行しています。

そうすることで,アドレスバーのURLの#/以降にentryIDを指定すると,正しくentryIDの画像が表示されるようになります。

//SWFAddress で得られたID  (ex. "/8")
var givenID:String

// SWFAddressに変化があると呼ばれる関数
function onChangeSWFAddress(e:SWFAddressEvent) {
    givenID=e.value;
    //実際のURLを仮定してテスト
    //givenID="/8";
    //まだXMLが読み込み完了してなければ・・・常に最初は「そう」
    if (image_array.toString()=="") {
        //XML読み込み実行
        myLoader.load(myURLRequest);
    } else {
        //XMLの読み込みが完了していれば、画像をIDで指定する
        showPictureByID(givenID);
    }
}

//イベント設定
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChangeSWFAddress);

//id番号で指定すると、showPicture用のナンバーに置き換えて実行する
function showPictureByID(e:String):void {
    trace("showPictureByID",e);
    var num:uint;
    if (e!="/") {
        var t_array=e.split("/");
        num=getNumFromID(t_array[1]);
    } else {
        num=0;
    }
    try {
        showPicture(num);
    } catch (e:Error) {
        //showPictureの引数が不正な時用
        trace("e:",e.message);
    }
}
//IDから、num番号を探し出す
function getNumFromID(id:String):int {
    var len:uint=image_array.length
    for (var num:uint = 0; num<len; num++) {
        var targetObj=image_array[num];
        if (String(targetObj.id)==id) {
        //idと一致したら、numを使用するので、ループ処理から抜ける
            break;
        }
    }
    return num;
}

著者プロフィール

NORI(伊藤のりゆき)

Twitter:@nori_togoru

有限会社トゴル・カンパニー代表。Flashアクセシビリティをきっかにアクセシビリティ全般に興味を持つ。UIデベロッパとして企業用WebアプリケーションのUIデザインを行う。写真集「Snap or Nothing写真集」(iTunes AppStoreにて)をリリースするなど写真家としても活動している。

コメント

コメントの記入