ステップ5：EasyCasting機能でサイトのシーン表示をコントロールする

コンテンツのパーツやページを作成し、コンポーネントで各種機能を実装した後は、EasyCasting機能を使ってサイト表示のコントロールを行います。EasyCasting機能では、XMLファイルでサイトの各シーンにどのパーツを表示するかなどを定義して、EasyCasting Loaderコンポーネントを使用してそのXMLファイルをSWFファイルに読み込みます。

XMLファイルの作成

Progression Framework 2で、使用するXMLのタグは以下の3種類です。

タグ	属性	内容
prml		htmlタグのように、必須となるタグ。
	version	prmlのバージョンを記述します（現在は2.0.0）
scene		各シーンの設定をするタグです。
	name	シーンの名前を設定する。この名前を使用して、RollOverButtonコンポーネントなどから移動するシーンを指定するので必ずユニークな名前を付ける必要があります。
	title	Webブラウザに表示するタイトルを設定する。
cast		表示するオブジェクトの設定をするタグ。
ERROR点	cls	表示するクラス名を設定する。はじめに設定したリンケージ設定のクラス名で指定する。
	index	表示するオブジェクトの深度を設定する。数字が大きいほど上になる。

では、このタグを使って、簡単なサイトの構造例を書いてみましょう。

<?xml version="1.0" encoding="UTF-8" ?>

<prml version="2.0.0">

<scene name="index" title="ALAN SMITHEE">


<cast cls="TopPage" index="5" />

<cast cls="Navigation" index="10" />

<cast cls="Footer" index="1" />


 <scene name="profile" title="profile | ALAN SMITHEE">

  <cast cls="ProfilePage" index="5" />


  <cast cls="Navigation" index="10" />

  <cast cls="Footer" index="1" />


  </scene>

  </scene>

  </prml>  

この例のサイト表示を説明すると、indexシーンとprofileシーンの2つのシーンがあって、indexシーンではTopPageを表示し、profileシーンではProfilePageを表示しています。各シーンでは共通してNavigationオブジェクトとFooterオブジェクトを表示します。1つのシーンでしか指定されていないオブジェクトは、指定されていないシーンに移動する際に自動で消去されます。sceneタグは入れ子にすることができるので、複雑な構造のサイトでも簡単に構造を作ることができますが、1つだけ注意点があります。prmlタグの直下にはsceneタグは1つしかおけないので、第一階層のsceneタグは1つだけになります。

では、今回のサンプルサイトのXMLファイルを作成します。サイト構造を再度確認しておきましょう。これを元にXMLファイルを作成し、ファイル名を「easycasting.xml」とします。

ParentButtonコンポーネントには、以下の表にあるパラメータが用意されています。ParentButtonコンポーネントはRollOverButtonコンポーネントの派生で、一つ上の階層に戻る機能を実現します。

<?xml version="1.0" encoding="UTF-8" ?>

  <prml version="2.0.0">


<scene name="index" title="ALAN SMITHEE">

<cast cls="TopPage" index="5" />

<cast cls="Navigation" index="20" />


<cast cls="Footer" index="1" />



<scene name="profile" title="profile | ALAN SMITHEE">

<cast cls="ProfilePage" index="5" />


<cast cls="Navigation" index="20" />

<cast cls="Footer" index="1" />

</scene>




<scene name="gallery" title="gallery | ALAN SMITHEE">

<cast cls="GalleryPage" index="5" />

<cast cls="Navigation" index="20" />


<cast cls="Footer" index="1" />



<scene name="photo1">

<cast cls="Photo1Page" index="15" />


<cast cls="GalleryPage" index="5" />

<cast cls="Navigation" index="20" />

<cast cls="Footer" index="1" />


</scene>



<scene name="photo2">

<cast cls="Photo2Page" index="15" />

<cast cls="GalleryPage" index="5" />


<cast cls="Navigation" index="20" />

<cast cls="Footer" index="1" />

</scene>




<scene name="photo3">

<cast cls="Photo3Page" index="15" />

<cast cls="GalleryPage" index="5" />


<cast cls="Navigation" index="20" />

<cast cls="Footer" index="1" />

</scene>




<scene name="photo4">

<cast cls="Photo4Page" index="15" />

<cast cls="GalleryPage" index="5" />


<cast cls="Navigation" index="20" />

<cast cls="Footer" index="1" />

</scene>




<scene name="photo5">

<cast cls="Photo5Page" index="15" />

<cast cls="GalleryPage" index="5" />


<cast cls="Navigation" index="20" />

<cast cls="Footer" index="1" />

</scene>




<scene name="photo6">

<cast cls="Photo6Page" index="15" />

<cast cls="GalleryPage" index="5" />


<cast cls="Navigation" index="20" />

<cast cls="Footer" index="1" />

</scene>


</scene>



<scene name="contact" title="contact | ALAN SMITHEE">

<cast cls="ContactPage" index="5" />


<cast cls="Navigation" index="20" />

<cast cls="Footer" index="1" />

</scene>


</scene>

</prml>

これで、XMLファイルでのシーンの設定は完了です。なお、今回はムービークリップのXY座標は Flash IDE上で調整しているため省略していますが、下記のようにXMLでXY座標を指定できます。

<cast cls="ContactPage" index="5" x="15" y="20" />

なお、xやyの属性が省略されている場合は、ステージの原点（左上）に配置されます。

次に、XMLファイルによるシーン設定を読み込むEasyCasting Loaderコンポーネントを配置します。

ノート : XML で指定したクラスがきちんとリンケージ設定されているか確かめましょう。リンケージ設定がされていない場合は、表示されません。

EasyCasting Loaderコンポーネント

EasyCasting Loaderコンポーネントには、以下の表にあるパラメータが用意されています。

アイコン	パラメータ	内容
	XMLファイルのURL	サイトの構造を記したXMLファイルのURLを記述する。
	XMLファイルの自動読み込み	自動で読み込むかどうか。
	オンライン上でブラウザ
	キーボードショートカット
	シーン移動をロック
	シーン移動中は自動的に

EasyCasting Loaderコンポーネントの設置

ルートにEasyCasting Loaderコンポーネントを設置します。

図 21. XMLファイルのURL」に先ほど作った「easycasting.xml」を指定して、その他のパラメーターはデフォルトのままにします

以上ですべての設定は完了です。メニューから「制御／ムービーのプレビュー 」を選んで、swfを書き出して、動作確認を行います。正常に動作したら、swfと easycasting.xmlとswfを埋め込んだhtmlファイルをサーバにアップします。

まとめ

Progression Framework 2はいかがでしたでしょうか。説明だけ読んでいるとちょっと複雑で面倒なように感じるかもしれませんが、実際に使ってみると今まで面倒だった基礎部分のほとんどをProgression Framework 2がカバーしてくれることがわかると思います。今回は初級編ということで一切ActionScriptを使わずに構築しましたが、中級編、上級編という形で今回とは違う実装方法について説明したいと思います。

ページ 6 / 6

前のページ