シンプルなウェブサイトを作る その1 - ページを切り替える

コンポーネントスタイルで作ってみた3ページのシンプルなサイトと同じ構成のものを、クラススタイルで作ってみました。

手探り状態のところもあるので、「こうした方がいいよ！」というアドバイスがありましたらぜひお願いいたします。 m(_ _)m

→ 完成サンプル

Progression公式サイトの「クラススタイルガイド」を参考にさせていただきました。

制作環境

• Flash CS3 ... UIの作成
• FlashDevelop + Progression 4 beta ... コーディング、コンパイル
  • 独学ActionScriptさんによる「FlashDevelop用 Progression 4.0.1 Public Beta 1.1 プロジェクトテンプレート」

↓FlashDevelop用 Progression 4 プロジェクトテンプレートの最新版はこちらからダウンロードできます
Downloads - flashdevelopjp - Project Hosting on Google Code

制作手順

1. 画面の設計、UIの作成
2. プロジェクトの新規作成、初期化
3. シーンの作成
4. イベントにコマンドを設定
5. ボタンの作成
6. UIの表示、ブラウザでの表示位置の調整

画面の設計、UIの作成

• Flash ファイル（AS 3.0）を新規作成する
  • プロジェクトの生成はFlashDevelopでやるので、「Progressionプロジェクト」パネルは使わない

インターフェース（ボタンやページ）をFlashで作成する

ボタンやページを新規シンボルとして作成していく。

• ボタンのクラス名は「IndexButton_UI」「AboutButton_UI」「DiaryButton_UI」とする

• ページの背景は全ページ共通とするので、「PageBg_UI」を作成しておく

• ページのクラス名は「IndexPage_UI」「AboutPage_UI」「DiaryPage_UI」とする

• ページの背景はシーンの移動に関係なく常時表示しておくためそれぞれのムービークリップに含めなくて良いが、ないと編集しづらいので、レイヤーを「ガイド」に設定し、そこに背景となるシンボルのインスタンスを配置しておくと良い

※クラス名に「_UI」を付与したのは、「Flashからswc形式で書き出したUIを、FlashDevelop側で作成したキャストオブジェクトやシーンオブジェクトにaddChildする」という手法をとるため。公式サイトのチュートリアルのように、FlashのみでProgressionを扱う場合は「_UI」を付与しない。

レイアウトの調整

• 「UI」という名前でシンボルを作る
• レイヤー名をシーン名に変更し、そのシーンで表示するシンボルを配置する
• 背景やボタンは、すべてのシーンで表示されるので、別途レイヤーに配置する
• レイアウトの調整をする
• レイアウトが決まったら、各インスタンスの座標をメモっておく

SWC形式で書き出し

※ここから先の工程は、後述する「プロジェクトの新規作成」後に実施する。

• 「ライブラリ」パネル内のシンボル「UI」を右クリックし「SWCファイルの書き出し」を選択
• 名前は「UI.swc」とし、当プロジェクトフォルダ内の「src」フォルダに保存する。

※UIを変更したい場合は、都度swcファイルを書き出せばよい。

以上で、Flashでの編集はおわり。flaファイルは「ui.fla」という名前でプロジェクトフォルダの直下に保存しておく。

プロジェクトの新規作成、初期化

ここからFlashDevelop + Progressionでの制作。プロジェクト名は「SimpleSite」とする。プロジェクトの新規作成と初期化の方法はHelloWorldを表示する1を参照。

swcファイルをライブラリ追加

• Projectパネル内のui.swcを右クリックし「Add To Library」を選択する

ステージサイズの設定

• メニューの「Project」＞「Properties」で設定する
• Flashで作成したUIに合わせて、幅640px、高さ480pxに設定した

シーンの作成

シーンの構成は

• index
  • about
  • diary

とする。SceneObject クラスを利用し、各シーンを定義していく。

SceneObject クラスの作成

シーンindexを定義する「IndexScene.as」は最初からsrcフォルダに用意されている。シーンaboutとdiaryを定義する「AboutScene.as」と「DiaryScene.as」は、templatesフォルダ内の「mySceneObject.as」を複製して作成する。

複製は、FlashDevelopのProjectパネルで行っても、Finderで行っても、どちらでも良い。複製後はFlashDevelopのProjectパネルをRefreshして最新の状態を表示する。

IndexScene.as

強調部分を追記・修正した。

• AboutSceneとDiarySceneを作成（addSceneする）
• IndexPageを作成（※今回のサンプルでは単に表示するだけなのでIndexPage_UIを使用する）
• 各イベントにコマンドを設定（※後述する）

package 
{
    import jp.progression.casts.*;
    import jp.progression.commands.display.*;
    import jp.progression.commands.lists.*;
    import jp.progression.commands.net.*;
    import jp.progression.commands.tweens.*;
    import jp.progression.commands.*;
    import jp.progression.data.*;
    import jp.progression.events.*;
    import jp.progression.executors.*;
    import jp.progression.scenes.*;

    /**
     * ...
     * @author mathatelle
     */
    public class IndexScene extends SceneObject 
    {
        public var page:IndexPage_UI;
        /**
         * 新しい IndexScene インスタンスを作成します。
         */
        public function IndexScene() 
        {
            // AboutScene を作成
            var about:AboutScene = new AboutScene();
            about.name = "about";
            addScene( about );
            // DiaryScene を作成
            var diary:DiaryScene = new DiaryScene();
            diary.name = "diary";
            addScene( diary );

            // シーンタイトルを設定します。
            title = "SimpleSite";
            // IndexPageを作成
            page = new IndexPage_UI();
            page.y = 60;
        }

        /**
         * シーン移動時に目的地がシーンオブジェクト自身もしくは子階層だった場合に、階層が変更された直後に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneLoad():void 
        {
            addCommand(
            );
        }

        /**
         * シーンオブジェクト自身が目的地だった場合に、到達した瞬間に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneInit():void 
        {
            addCommand(
                new AddChild( container, page ) // 画面にページを表示
            );
        }

        /**
         * シーンオブジェクト自身が出発地だった場合に、移動を開始した瞬間に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneGoto():void 
        {
            addCommand(
                new RemoveChild( container, page ) // 画面からページを削除
            );
        }

        /**
         * シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に、階層が変更される直前に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneUnload():void 
        {
            addCommand(
            );
        }
    }
}

AboutScene.as

強調部分を追記・修正した。

• クラス名とコンストラクタ名をファイル名のAboutSceneに修正
• シーンタイトルを修正
• AboutPageを作成（※今回のサンプルでは単に表示するだけなのでAboutPage_UIを使用する）
• 各イベントにコマンドを設定（※後述する）

package  
{
    import jp.progression.casts.*;
    import jp.progression.commands.*;
    import jp.progression.events.*;
    import jp.progression.loader.*;
    import jp.progression.*;
    import jp.progression.scenes.*;
    import jp.progression.commands.display.*;

    /**
     * ...
     * @author mathatelle
     */
    public class AboutScene extends SceneObject 
    {
        public var page:AboutPage_UI;

        /**
         * 新しい MySceneObject インスタンスを作成します。
         */
        public function AboutScene( name:String = null, initObject:Object = null ) 
        {
            // 親クラスを初期化する
            super( name, initObject );

            // シーンタイトルを設定します。
            title = "About - SimpleSite";
            // AboutPageを作成
            page = new AboutPage_UI();
            page.y = 60;
        }

        /**
         * シーン移動時に目的地がシーンオブジェクト自身もしくは子階層だった場合に、階層が変更された直後に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneLoad():void 
        {
        }

        /**
         * シーンオブジェクト自身が目的地だった場合に、到達した瞬間に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneInit():void 
        {
            addCommand(
                new AddChild( container, page ) // 画面にページを表示
            );
        }

        /**
         * シーンオブジェクト自身が出発地だった場合に、移動を開始した瞬間に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneGoto():void 
        {
            addCommand(
                new RemoveChild( container, page ) // 画面からページを削除
            );
        }

        /**
         * シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に、階層が変更される直前に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneUnload():void 
        {
        }
    }
}

DiaryScene.as

追記・修正箇所はAboutSceneと同じ。

package  
{
    import jp.progression.casts.*;
    import jp.progression.commands.*;
    import jp.progression.events.*;
    import jp.progression.loader.*;
    import jp.progression.*;
    import jp.progression.scenes.*;
    import jp.progression.commands.display.*;

    /**
     * ...
     * @author mathatelle
     */
    public class DiaryScene extends SceneObject 
    {
        public var page:DiaryPage_UI;

        /**
         * 新しい MySceneObject インスタンスを作成します。
         */
        public function DiaryScene( name:String = null, initObject:Object = null ) 
        {
            // 親クラスを初期化する
            super( name, initObject );

            // シーンタイトルを設定します。
            title = "Diary - SimpleSite";
            // DiaryPageを作成
            page = new DiaryPage_UI();
            page.y = 60;
        }

        /**
         * シーン移動時に目的地がシーンオブジェクト自身もしくは子階層だった場合に、階層が変更された直後に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneLoad():void 
        {
        }

        /**
         * シーンオブジェクト自身が目的地だった場合に、到達した瞬間に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneInit():void 
        {
            addCommand(
                new AddChild( container, page ) // 画面にページを表示
            );
        }

        /**
         * シーンオブジェクト自身が出発地だった場合に、移動を開始した瞬間に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneGoto():void 
        {
            addCommand(
                new RemoveChild( container, page ) // 画面からページを削除
            );
        }

        /**
         * シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に、階層が変更される直前に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atSceneUnload():void 
        {
        }
    }
}

イベントにコマンドを設定

3つのシーンすべてに、

• シーンに到着したときに、ページを表示する（SceneEvent.INIT イベントで、AddChildコマンドを実行）
• シーンを出発したときに、ページを削除する（SceneEvent.GOTO イベントで、RemoveChildコマンドを実行）

という設定をした。

protected override function atSceneInit():void 
{
    addCommand(
        new AddChild( container, page ) // 画面にページを表示
    );
}

protected override function atSceneGoto():void 
{
    addCommand(
        new RemoveChild( container, page ) // 画面からページを削除
    );
}

コマンドはカンマ区切りで、各コマンドの処理終了を待った連続実行ができる。今回はひとつだけにしておく。

ボタンの作成

CastButton オブジェクトを使用して、ボタンの機能を設定する。

templatesフォルダ内の「MyCastButton.as」を複製し、srcフォルダ内に「IndexButton.as」「AboutButton.as」「DiaryButton.as」 を作成する。

IndexButton.as

強調部分を追記・修正した。

• クラス名とコンストラクタ名をファイル名の IndexButton に修正
• Flashで作成した indexButton_UI を表示（※公式サイトのチュートリアルのように、FlashのみでProgressionを扱う場合は、この部分は追記しない）

package  
{
    import jp.progression.casts.*;
    import jp.progression.commands.display.*;
    import jp.progression.commands.lists.*;
    import jp.progression.commands.net.*;
    import jp.progression.commands.tweens.*;
    import jp.progression.commands.*;
    import jp.progression.data.*;
    import jp.progression.events.*;
    import jp.progression.scenes.*;

    /**
     * ...
     * @author mathatelle
     */
    public class IndexButton extends CastButton 
    {

        /**
         * 新しい MyCastButton インスタンスを作成します。
         */
        public function IndexButton( initObject:Object = null ) 
        {
            // 親クラスを初期化します。
            super( initObject );

            // 移動先となるシーン識別子を設定します。
            sceneId = new SceneId( "/index" );

            // 外部リンクの場合には href プロパティに設定します。
            //href = "http://progression.jp/";

            // indexButton_UI を表示
            var indexButton_UI:IndexButton_UI = new IndexButton_UI();
            addChild( indexButton_UI );
        }

        /**
         * IExecutable オブジェクトが AddChild コマンド、または AddChildAt コマンド経由で表示リストに追加された場合に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastAdded():void 
        {
        }

        /**
         * IExecutable オブジェクトが RemoveChild コマンド、または RemoveAllChild コマンド経由で表示リストから削除された場合に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRemoved():void 
        {
        }

        /**
         * Flash Player ウィンドウの CastButton インスタンスの上でユーザーがポインティングデバイスのボタンを押すと送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastMouseDown():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastMouseUp():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスにポインティングデバイスを合わせたときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRollOver():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRollOut():void 
        {
        }
    }
}

AboutButton.as

強調部分を追記・修正した。

• クラス名とコンストラクタ名をファイル名の AboutButton に修正
• 移動先のシーンidを設定
• Flashで作成した AboutButton_UI を表示

package  
{
    import jp.progression.casts.*;
    import jp.progression.commands.display.*;
    import jp.progression.commands.lists.*;
    import jp.progression.commands.net.*;
    import jp.progression.commands.tweens.*;
    import jp.progression.commands.*;
    import jp.progression.data.*;
    import jp.progression.events.*;
    import jp.progression.scenes.*;

    /**
     * ...
     * @author mathatelle
     */
    public class AboutButton extends CastButton 
    {

        /**
         * 新しい MyCastButton インスタンスを作成します。
         */
        public function AboutButton( initObject:Object = null ) 
        {
            // 親クラスを初期化します。
            super( initObject );

            // 移動先となるシーン識別子を設定します。
            sceneId = new SceneId( "/index/about" );

            // 外部リンクの場合には href プロパティに設定します。
            //href = "http://progression.jp/";

            // AboutButton_UI を表示
            var aboutButton_UI:AboutButton_UI = new AboutButton_UI();
            addChild( aboutButton_UI );
        }

        /**
         * IExecutable オブジェクトが AddChild コマンド、または AddChildAt コマンド経由で表示リストに追加された場合に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastAdded():void 
        {
        }

        /**
         * IExecutable オブジェクトが RemoveChild コマンド、または RemoveAllChild コマンド経由で表示リストから削除された場合に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRemoved():void 
        {
        }

        /**
         * Flash Player ウィンドウの CastButton インスタンスの上でユーザーがポインティングデバイスのボタンを押すと送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastMouseDown():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastMouseUp():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスにポインティングデバイスを合わせたときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRollOver():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRollOut():void 
        {
        }
    }
}

DiaryButton.as

追記・修正箇所はAboutButtonと同じ。

package  
{
    import jp.progression.casts.*;
    import jp.progression.commands.display.*;
    import jp.progression.commands.lists.*;
    import jp.progression.commands.net.*;
    import jp.progression.commands.tweens.*;
    import jp.progression.commands.*;
    import jp.progression.data.*;
    import jp.progression.events.*;
    import jp.progression.scenes.*;

    /**
     * ...
     * @author mathatelle
     */
    public class DiaryButton extends CastButton 
    {

        /**
         * 新しい MyCastButton インスタンスを作成します。
         */
        public function DiaryButton( initObject:Object = null ) 
        {
            // 親クラスを初期化します。
            super( initObject );

            // 移動先となるシーン識別子を設定します。
            sceneId = new SceneId( "/index/diary" );

            // 外部リンクの場合には href プロパティに設定します。
            //href = "http://progression.jp/";

            // DiaryButton_UI を表示
            var diaryButton_UI:DiaryButton_UI = new DiaryButton_UI();
            addChild( diaryButton_UI );
        }

        /**
         * IExecutable オブジェクトが AddChild コマンド、または AddChildAt コマンド経由で表示リストに追加された場合に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastAdded():void 
        {
        }

        /**
         * IExecutable オブジェクトが RemoveChild コマンド、または RemoveAllChild コマンド経由で表示リストから削除された場合に送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRemoved():void 
        {
        }

        /**
         * Flash Player ウィンドウの CastButton インスタンスの上でユーザーがポインティングデバイスのボタンを押すと送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastMouseDown():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastMouseUp():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスにポインティングデバイスを合わせたときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRollOver():void 
        {
        }

        /**
         * ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
         * このイベント処理の実行中には、ExecutorObject を使用した非同期処理が行えます。
         */
        protected override function atCastRollOut():void 
        {
        }
    }
}

UIの表示、ブラウザでの表示位置の調整

index.as UI（ボタン、ページの背景）の表示

強調部分を追記・修正した。

• ボタンを表示
• ページの背景を表示

package  
{   
    import jp.progression.casts.*;
    import jp.progression.commands.display.*;
    import jp.progression.commands.lists.*;
    import jp.progression.commands.net.*;
    import jp.progression.commands.tweens.*;
    import jp.progression.commands.*;
    import jp.progression.config.*;
    import jp.progression.data.*;
    import jp.progression.debug.*;
    import jp.progression.events.*;
    import jp.progression.scenes.*;


    /**
     * ...
     * @author mathatelle
     */
    public class Index extends CastDocument 
    {

        /**
         * 新しい Index インスタンスを作成します。
         */
        public function Index() 
        {
            // 自動的に作成される Progression インスタンスの初期設定を行います。
            // 生成されたインスタンスにアクセスする場合には manager プロパティを参照してください。
            super( "index", IndexScene, new WebConfig() );
        }

        /**
         * SWF ファイルの読み込みが完了し、stage 及び loaderInfo にアクセス可能になった場合に送出されます。
         */
        protected override function atReady():void 
        {   
            // 開発者用に Progression の動作状況を出力します。
            Debugger.addTarget( manager );

            // 外部同期機能を有効化します。
            manager.sync = true;

            // 最初のシーンに移動します。
            manager.goto( manager.syncedSceneId );

            // IndexButton を作成
            var indexButton:IndexButton = new IndexButton();
            indexButton.x = 60;
            addChild( indexButton );
            // AboutButton を作成
            var aboutButton:AboutButton = new AboutButton();
            aboutButton.x = 240;
            addChild( aboutButton );
            // DiaryButton を作成
            var diarydButton:DiaryButton = new DiaryButton();
            diarydButton.x = 420;
            addChild( diarydButton );
            // PageBg （ページの背景）を作成
            var pageBg:PageBg_UI = new PageBg_UI();
            pageBg.y = 40;
            addChild( pageBg );
        }
    }
}

index.html 表示位置の調整

パブリッシュしてブラウザで表示して見ると、左上に表示されている。

中央に表示されるようindex.html内に記述のあるprogression.embedSWFメソッドを修正する。

強調部分を修正（コメントアウト）した。

progression.embedSWF( {
    version:"9.0.45",
    url :"preloader.swf",
    width:640,
    height:480,
    halign:"center",
    valign:"middle",
    //hscale:"window", 
    //vscale:"window", 
    bgcolor:"#FFFFFF",
    params:{},
    attributes  :{},
    flashvars   :{}
} );

疑問

• hscaleとvscaleにはコメントアウトによってデフォルト値が適用されたが、そもそもデフォルト値はなんなんだろう？ 「progression.embedSWF hscale」でググったら、当ページ1ページだけでした.....。 progression.jsの読み方がわかれば理解できるのかな。

→ 完成サンプル