online.sg #12 「Progression 4で行うFull Flashサイト制作入門」事前準備

8/1(日) 14:00くらいからやります．
詳細は公式で第12回テーマ「Progression 4で行うFull Flashサイト制作入門」 - Online.sg

で，準備するものとか必要なもの

FlashBuilder or FlexBuilder

学生は無料でもらえます．また60日の体験版があるのでそちらを使って貰ってもOK

Progression.swc

コーディングでｶﾞﾘｶﾞﾘ作ってくわけですが,FB/FX上でProgressionいじれるように,
Progression.swcを公式から落としてきておいてください．(クラスライブラリみたいなもんです)
http://progression.jp/ja/download/
ここからその他の環境ってとこにあるSWCパッケージってやつ

事前準備

Progressionでページを作っていく作業だけを講座中ではいじるんですが,FB/FXだとその段階までもっていくのに色々設定とか準備が必要です．

その事前準備を紹介するんで，当日までに準備しておいてください．

~~~やること~~~

新規プロジェクト作成

ファイル → 新規プロジェクト → 新規Flexプロジェクトを選択
プロジェクト名任意(ex.Prog)
保存場所任意
アプリケーションの種類 → webアプリケーション

次へ→次へ→ライブラリパスの設定

SWCフォルダの追加 → 落として解凍した,Progression4-swcのフォルダを選択

完了．

これでプロジェクトは完成．
以下，ファイルやフォルダの追加について．
面倒な方は一番下まで読み飛ばしてくださいな。

作成されたプロジェクトのソース書き加え

プロジェクトの内訳はこんなかんじ

srcフォルダのの中に,プロジェクト名.mxmlというファイルがあり，それを書き換えていきます．
また,実際に制作していくなかで，多くのActionScriptファイルを使用するため，それぞれフォルダで分けてパッケージングしておきましょう．
srcフォルダのなかに"scene"フォルダと"As"フォルダを制作してください．(srcフォルダ右クリック→新規→フォルダ)

mxml変更

さて，それではプロジェクト名.mxmlを変更するわけですが，1行付け加えるだけです

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:my="As.*" layout="absolute" minWidth="640" minHeight="480" backgroundColor="#FFFFFF" >
    <my:EntryPoint />
</mx:Application>

これが全コード.(後に必要なコードまとめてupしてあります．)

EntryPoint.as生成

そして，srcフォルダ内のAsフォルダ(さっき作ったやつ)の中に新しい.asファイルを作ります(フォルダを右クリック→新規→asファイル)
ファイル名を EntryPoint.as とします.
中身は以下

package As
{
    import jp.progression.Progression;
    import jp.progression.config.WebConfig;
    import jp.progression.debug.Debugger;
    
    import mx.core.Application;
    import mx.events.FlexEvent;
    
    import scene.indexScene;

    public class EntryPoint
    {
        public function EntryPoint()
        {
            Application.application.addEventListener(FlexEvent.APPLICATION_COMPLETE, this._appCompleteEventHandler);
            
            Progression.initialize(new WebConfig());
        }
        
        private function _appCompleteEventHandler(event:FlexEvent):void
        {   
            var progression:Progression = new Progression("index", Application.application.systemManager.stage, indexScene);
            
            Debugger.addTarget(progression);
            progression.sync = true;
            progression.autoLock = false;
            progression.goto(progression.syncedSceneId);            
        }
    }
}

Hello.as生成

また,同じAsフォルダ内にもうひとつ.asファイルを作ります．
ファイル名は Hello.as (今回の準備がうまくいっているか確認するためのものです)
中身は以下

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

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

indexScene.as生成

そして，sceneフォルダの中に.asファイルを作成．
ファイル名は indexScene.as
中身は以下

package scene
{
    import jp.progression.casts.*;
    import jp.progression.commands.display.*;
    import jp.progression.commands.lists.*;
    import jp.progression.commands.managers.*;
    import jp.progression.commands.media.*;
    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.loader.*;
    import jp.progression.*;
    import jp.progression.scenes.*;
    
    import As.Hello;
    public class indexScene extends SceneObject
    {
        public var page:Hello;

        public function indexScene(name:String=null, initObject:Object=null)
        {   
            title = "hello";
            page = new Hello();
        }
        
        protected override function atSceneLoad():void 
        {
            addCommand(
            );
        }

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

        protected override function atSceneGoto():void 
        {
            addCommand(
            );
        }

        protected override function atSceneUnload():void 
        {
            addCommand(
            );
        }
    }
}

以上で完了です．
最終的なフォルダ構造は以下の通り

動作確認

以上の準備ができたら，プロジェクトをビルドして実行してみてください．
実行 → (プロジェクト名)を実行

上に書いたことが全て出来ていれば，新規ウィンドウが開かれ,左上にHello,World!という文字列が表示されるはずです．

以上で，事前準備完了．
当日は，今回の準備で作ったフォルダの中にasファイルを加えていき,それらを関連づけさせ，ページを作っていきます．

今回のせたコードの内容は,講座を受ける上ではまったく触れない＆必要ない，あくまで環境を整える為の準備ですので，理解する必要はないです．

必要なもの.zip

onsg#12.zip
一応動作するものを上げておきます．
この中身をコピペして自分のプロジェクトの中のファイルと入れ替えれば,動きます．

なので，上記の作業が面倒な方は新規プロジェクト制作 → 作られたプロジェクト用のフォルダ内のsrcの中身をアップしたファイルに置き換える

だけで準備完了です．

ただ，当日はFB/FXを操作しつつ進めていくので，上記の内容をこなして,使い方に慣れておくことをお勧めします(コードはコピペでいいよ！)

参考

FlexBuilderでProgressionをいじるための準備については，
眠るシーラカンスと水底のプログラマー(旧) - livedoor Blog（ブログ）
こちらのサイトに書かれている内容を参考にさせていただきました．

大変感謝致します＞＜
(なんか不適切と言うか問題あったら消します)

itsukichang

フロントエンドが得意なエンジニア．ダーツと旅行とギターが好き