コンポーネントスタイルで作ってみた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の表示、ブラウザでの表示位置の調整

• 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の読み方がわかれば理解できるのかな。

→ 完成サンプル

Flash CS3で作成したシンボルをキャスティングしてみる。Flashのブラシツールで「HelloWorld」と描いたものをキャスティングする。

新規にシンボルを作成

• Flash ファイル（AS 3.0）を新規作成する
• 新規シンボルを作成し、クラス名を「ContentIndex」とする

• ブラシツールで「HelloWorld」と描く

swc形式で書き出し

• ライブラリ内の「ContentIndex」を右クリックし「SWCファイル書き出し」を選択する

• 「Casts」と名前を付けて「HelloWorld」プロジェクトの「libs」フォルダに保存する（この命名でいいのかは自信がありません...）
• 「UI.swc」という名前で「src」フォルダに保存する

• flaファイルは適当に「Casts.fla」のような名前を付けて「HelloWorld」プロジェクトの「src」フォルダに保存する
• flaファイルは「ui.fla」と名前を付けて「HelloWorld」プロジェクトフォルダの直下に保存する

イベントの設定

FlashDevelop を起動する。

Projectパネルを確認すると、libsフォルダに「Casts.swc」srcフォルダに「UI.swc」が追加されている。UI.swcを右クリックし「Add To Library」を選択する。

IndexScene.asを編集

「IndexScene.as」を以下のように編集する。強調部分を修正した。

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: ContentIndex;
        /**
         * 新しい IndexScene インスタンスを作成します。
         */
        public function IndexScene() 
        {
            // シーンタイトルを設定します。
            title = "HelloWorld こんにちは！";
            // ContentIndexを作成
            page = new ContentIndex();
        }

        /**
         * シーン移動時に目的地がシーンオブジェクト自身もしくは子階層だった場合に、階層が変更された直後に送出されます。
         * このイベント処理の実行中には、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(
            );
        }

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

パブリッシュする

パブリッシュ（右上の再生ボタンをクリック）して確認する。

HTML/CSSでの制作におけるFireWorksの役回りをFlashでやった、そんな感じでした。

Progression - Framework for Flash >>> クラススタイルガイド を参考に「HelloWorld」を表示してみる。

※コンポーネントスタイルでの制作経験有を前提知識とする。

既存の環境（MacOSX/FlashCS3/Progerssion3）は残しておきたいので、VMWare Fusion に FlashDevelop をインストールして利用した。以下の記事を参考にさせていただいた（どちらも解説が丁寧で、とてもわかりやすかったです）。

• MacでFlashDevelop | さわいじり
• 無料でFlashの制作環境が整えられる! FlashDevelopとFlex SDK 3のインストール方法(ビデオ付き) | ClockMaker Blog
• FlashDevelopの使い方 (16)Flash無しでProgression 4を使用するためのプロジェクトテンプレート - 独学ActionScript

独学ActionScriptさん作のProgression 4用のプロジェクトテンプレートを利用させていただくことで、とても簡単に制作にとりかかることができる。多謝！

プロジェクトの新規作成

• メニューの「Project」から「New Project」を選択
• 「New Project」パネルが開く
• Installed Templatesから「AS3 Project with Progression 4」を選択
• Nameに「HelloWorld」と入力
• プロジェクトの保存先を入力
• OKボタンを押す

プロジェクトの保存先は、あらかじめ VMWare Fusion でMacとの「共有フォルダ」を作成し、その中に保存する。筆者は、ブラウザでの確認を簡易にするため、以下の手順でプロジェクトの保存先を準備した。

• ホーム＞サイトの中に「FlashDevelop」フォルダを作成
• この「FlashDevelop」フォルダを VMWare Fusion で共有フォルダに設定
• 「FlashDevelop」フォルダ内に「projects」フォルダを作成

上記の準備後、FlashDevelopの「New Project」パネルで、プロジェクトの保存先に「projects」フォルダを指定した。

新規にプロジェクトの作成ができたら、FlashDevelopの使い方 (16)Flash無しでProgression 4を使用するためのプロジェクトテンプレート - 独学ActionScriptの「使い方」に従って、Progression 4用のプロジェクト（HelloWorld.as3proj）とプリローダープロジェクト（Preloader.as3roj）をパブリッシュしておき、projectパネルが下のような画面の状態であることを確認する。

もしprojectパネルに「HelloWorld.as3proj」が表示されていたら、それをダブルクリックすれば上の画面になる。

初期化する

projectパネル内の「srcフォルダ」内の「Index.as」を開く。

41行目についているコメントを外し、ブラウザとの同期機能を有効化する。

シーンを作成する

今回は、テンプレートとして書き出された「IndexScene.as」だけを利用するので、新たに作成するシーンはない。

ブラウザとの同期を確認するため、シーンタイトルを設定してみる。

27行目のtitleを「HelloWorld」から「HelloWorldこんにちは！」とした。

キャストの作成

「HelloWorld」という文字を作成する。今回は、ActionScriptだけで生成する。

• projectパネルで「src」フォルダを右クリック
• 「Add」の中から「New Class...」を選択
• Nameに「HelloWorld」と入力しOKボタンを押す

左側のエディタに新しくパネルが開く。「HelloWorld.as」の編集を以下のようにする。

引用元：ブラウザだけでできる！wonderflではじめるFlash制作：第1回　wonderflでFlashのHello World!をつくる｜gihyo.jp ... 技術評論社

package  
{
    import flash.display.Sprite;
    import flash.text.TextField;

    public class HelloWorld extends Sprite
    {

        public function HelloWorld() 
        {
            var tf :TextField = new TextField;
            tf.text = "Hello World!";
            addChild(tf);
        }

    }

}

イベントの設定

一番最初のシーン「IndexScene」に「HelloWorld」をキャスティングする。

今回は「そのシーンに到着した際に表示する」という設定だけで良い。

「IndexScene.as」を以下のように編集する。強調部分を追加した。

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:HelloWorld;
        /**
         * 新しい IndexScene インスタンスを作成します。
         */
        public function IndexScene() 
        {
            // シーンタイトルを設定します。
            title = "HelloWorld こんにちは！";
            // HelloWorldを作成
            page = new HelloWorld();
        }

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

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

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

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

※上記コードについては、筆者がまだ十分に理解していないため、解説は省略する。ごめんなさい。

パブリッシュする

パブリッシュ（右上の再生ボタンをクリック）して確認する。

成功！

ブラウザでも表示してみる。Macの場合、以下の設定で簡単に確認できる（ただし、FlashDevelopのプロジェクトを先述した「サイト」の中に保存にしておく必要がある）。

• システム環境設定の「共有」の「Web共有」をONにする
• ブラウザで http://localhost/~コンピュータ名/flashdevelop/projects/HelloWorld/bin/ を開く

title要素も、ちゃんとシーンの定義通りに変更されている。