日本語:始めに
From Gaia Framework Wiki
Contents |
ダウンロードとインストール
まず始めに、最新のGaia Framework MXPファイルをダウンロードし、インストールしてください。 Gaiaをインストールしたら、Flashを起動し、トップメニューの Windows > Other Panels > Gaia Framework を選択してください。 必要であれば、ASOファイルをクリアしてください。
準備は整いましたでしょうか？さあ、始めましょう！
Gaiaプロジェクトの作成
新しいGaiaプロジェクトを作成する際の最初のステップとして、まず、あなたが使用したいAcrion Scriptのバージョンを選択します。 Create AS3 か Create AS2 をクリックします。 その後、プロジェクトパネルが表示されます。
プロジェクトパネル
最初に、プロジェクト名を指定します。プロジェクト名は、後でいつでも変更できます。
プロジェクトフォルダ
次に、プロジェクトの中に作成するために、フォルダを選択します。 フォルダは、先に作っておくことも、後で、ボタンをクリックして開かれるダイアログの中でも作成することができます。
プロパティ
プロジェクト名を設定し、フォルダを選択したら、次に、基本プロパティの設定をします。 そこでは、ディメンジョン、アライメント、フレームレート、ステージカラーを設定できます。 これらの設定情報は、後でいつでも変更でき、ワンクリックで、Gaiaが変更した値をあなたの全てのFlashファイルに設定します。
フォルダパス
最後のステップとして、任意に変更できるプロジェクトのフォルダパスに関してです。 デフォルトで、Gaiaは業界標準のフォルダパスを使用します。
* lib - .fla ファイル * bin - .swf ファイル, .html等 * src - .as ファイル (クラス)
別な方法として、
* src - .fla ファイル * src/classes - .as ファイル * deploy - .swf ファイル, .html等
人によっては、"flash"をFlashファイル用にしたり、クラスファイルを"flash/classes"のように同じフォルダに入れたり、"www"をパブリッシュフォルダパスにしたいかも知れません。
Gaiaは、そのようなあなたのお好みに十分に対応します。
また、どこにsite.xmlがあるかをカスタマイズできますが、今は、ブランクにしておきましょう。
Create New Projectをクリックすると、Gaiaが新しいプロジェクトを作成します。 そして、自動的にタブが選択されます。 後でここに戻ることにして、今は、Gaiaが作成したファイルを見てみましょう。
プロジェクトファイル
Gaiaがパネルの中にあるフォルダパスの中に、全てのフォルダセットを以下のように作成します。
- lib フォルダ: main.fla, preload.fla
- bin フォルダ: パブリッシュされたファイル
- src フォルダ: フレームワーク用の全てのクラスファイル
- templates フォルダ: template fla とクラスファイル
- project.gaia フォルダ: 全てのプロジェクト情報が記述されているxmlコンフィグファイル
binフォルダを開きます。
現在、binフォルダには、index.html、preload.swf、site.xmlがあります。 また、jsフォルダには、SWFObjectとSWFAddressがあります。
index.htmlを開くと、FlashがすでにSWFObjectを使って埋め込まれていることが確認できます。 また、全てのディメンジョン、アライメントもすでに含まれいることも確認できます。
それでは、site.xmlを見てみましょう。
サイトXML
Gaiaは、サイト構造をsite.xmlで定義します。 site.xmlをあなたの好みのテキストエディタで開きます。 初期のsite.xmlは、このようになっています。
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
ブランチ
Gaiaは、サイト構造のメタファーとして、ブランチ(ツリー構造)を使用します。 ブランチは、フォルダパスやURLのように各ページIDごとにスラッシュ(/)で分割されて動作します。
上記のxmlは、単純なブランチ "index/nav/home" です。
ブランチは、ページノードから成り立っており、各ノードは、その子ノードとして、他のページノードをいくつでも持つことができます。 各ページノードは、Flashがそのページノードのブランチの部分を読み込むことを表わしています。
Gaiaは、全てのブランチを、読み込みます。 全てのブランチというのは、indexページから各シングルブランチ(末端のページ)の最後のページまでを意味します。
上記の例の場合、ブランチ"index/nav"を読み込むことができません。 それは、"nav"ページが少なくとも１つの子(id=home)を持っているからです。 もし、"index/nav"を読み込もうとする場合、Gaiaが自動的に"index/nav/home"を読み込みます。
この振る舞いは、landing attribute in the page nodeを使うことによって、オーバーライドできます。
site.xmlのノードと属性の詳細は、ドキュメントのSite XMLセクションにあります。
XMLツリー構造
site.xmlをカスタマイズする前に、site.xmlの構造とGaiaがコンテンツ内でsite.xmlをどう読み込むのかを見てみましょう。 Gaiaがブランチの上から順番に(Flashが子クリップが親クリップに積み重なるように)、ファイルを読み込みます。 この振る舞いは、以下の用に示されたdepth属性を使用してオーバーライドできます。
サイトノード
site.xmlのルートノードは、<site>です。<site>ノードは、必須属性はなく、任意のタイトルとメニュー属性セットになります。
インデックスページ
<site>ノードの最初の子ノードは、id="index"を持つ<page>ノードです。
Gaiaの少ない決まりの一つとして、最初のページを"index"と命名します。 また、"index"ページは、特別です。それは、次の２つの理由からです。 ・読み込まれた他のどのページよりも前に、自分自身によって読み込まれ、他のページに遷移する。 ・他のページの後にデフォルトで読み込む。
ページ
site.xmlのテンプレート内で、"index"ページの最初の子は、id="nav"を持つpageノードです。 "nav"ページは、グローバルナビゲーションとして機能するためにセットアップされています。
グローバルナビゲーション: 任意の"depth"属性を"top"に設定することにより、全てのページで読み込まれます。 さらに、この設定において、これは、永続です。 なぜなら、"index"ページの唯一の子だからです。したがって、それより下のツリー内の全てのブランチの一部分になります。
次の子ページは、この例でのブランチの最後のページ、"home"です。 このページは、"Home"と設定されたtitle属性を持っています。 これは、siteノードの属性タイトル中の文字列記号 %PAGE% にあるように、ブラウザーのタイトルバーに表示されます。 これはまた要するに、ブランチ内の最後の子として、"最終ページ"として知られます。
単に、ブランチの最終ページに(landing="true"を持つページ)、ブラウザーのタイトルバーにそのタイトルが表示されます。 なので、単に最終ページにタイトルをセットするするだけで、%PAGE% 記号の部分に置き換えられます。
プリローダーは、進行中のイベント上に読まれている個別のページのタイトルに渡します。 なので、この目的のために、どのページ上にもタイトルをセットしたいなら、できます。 このトピックは、ドキュメントのプリローダーセクションに書かれています。
サイトXMLにページを追加する
たった１つのブランチしかないサイトは、ちょっと物足りないので、ページをいくつか追加してみましょう！
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="people" src="people.swf">
<page id="friends" title="Friends" src="friends.swf" menu="true"/>
<page id="family" title="Family" src="family.swf" menu="true">
<page id="tree" title="The Family Tree" src="familytree.swf"/>
</page>
</page>
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
３つの巨大な？ブランチをゲットしました！それらは。。
- "index/nav/people/friends"
- "index/nav/people/family/tree"
- "index/nav/home"
注意: それぞれのブランチの最後の子だけ、タイトルがあります。 そして、<site>ノードと特定ページのノードに属性があることに、注意してください。
もし、あなたのサイトをナビゲートするための右クリックコンテキストメニューを使いたい場合、 "menu"属性をsiteノードに加えて、それを"true"にセットしてください。
もし、特定のページだけに右クリックコンテキストメニューを使いたい場合、 ページノード上でmenu="true"にセットし、そのページにタイトルもセットしてください。
注意: タイトルがないページは、コンテキストメニューに表示されません。
また、ご覧の通り、ファミリーページノードは、コンテキストメニューを持っています。 しかし、ブランチのファイルページではありません。 それは、問題ありません。なぜなら、Gaiaが"Family"とコンテキストメニューの中に表示するからです。 しかし、"index/nav/people/family/tree"にナビゲートします。
足場となるためのサイト構造は十分にできました。 それでは、上記のXMLをsite.xmlにコピー&ペーストして、保存してください。
枠組み(Scaffold)
それでは、ここがエキサイティングな部分である、枠組み(Scaffold)を作りましょう!
クラスパッケージ
Flashに戻り、Gaiaフレームワークパネルを開きます。 Scaffoldタブが既に選択済みで、クラスパッケージの入力フィールド"pages"には、既にが入力されているか思います。
もし、あなたがクラスパッケージに関してよくわからなくても、ご心配なく。簡単です！ 後に続く基本的なルールとして、クライアントのWebサイトドメインを取って来て、順番を逆にしてください。 そして、プロジェクト名を追加してください。
例えば、クライアントのWebサイトドメインがcompany.comである場合、それをサイト名にし、パッケージクラス名は、com.company.websiteになります。 今回の場合、クラスパッケージはデフォルトの"pages"にしておきましょう。
プロジェクトの枠組み(Scaffold)
単に、Scaffold Projectボタンをクリックするだけで、Gaiaがプロジェクトの枠組みを自動生成してくれます！
Gaia Scaffoldingは、site.xmlで命名された.swfファイル名を元に、このサイト用の全てのFLAを作成します。
Publish パスをPublishフォルダ(bin)にセットアップし、それぞれのページファイルをPublish Panelに追加し、 各ページ用にクラスファイルを作成し、そして、各Flashページのドキュメントクラスとしてクラスをセットします。
AS2 scaffolding は、劇的にswfファイルサイズを減らすために、各フラッシュページファイル用にexclude.xml を作成します。
一度、全てのサイトファイルが作られたら、Publishタブが使用できるようになります。 Gaiaは、サイト全体をパブリッシュし、main.flaを実行します。
右クリックメニューを使用して、サイトをナビゲートしたり、セクションの遷移をあなたがするように出たり入ったりして、見ることができます。
libとbinフォルダを開いて、全てのFlashとswfファイルを見ることができます。 そして、"pages"フォルダ用のsrcフォルダの中や、Gaiaが作成した全てのページクラスを見ることができます。
おめでとうございます！
あなたは、たった数分でご自身のGaiaフレームワークサイト作ることができました。
