AIRチュートリアル Flash 第５回 より効率的に開発しよう！～Flexを利用したASのインクルードとはじめてのMXML～

FlashのメインタイムラインのActionScriptを移行する

さて、次の手順です。
Flashの第4回までに完成したアプリケーションをFlexに移行、といきたいのですが、少々複雑な事情が発生しそうな予感です。そこで今回は話をシンプルにするために「第2回」の完成品をベースに移行する、というシナリオで進めていきたいと思います。

1. 「第2回」のサンプルを用意します。手元にない方は、以下のリンクからダウンロードして、ZIPファイルを解凍しておいてください。
   【AIRチュートリアル・Flash 第２回　インターネット上の情報を使ってみよう！～ホットペッパーAPIを利用する～】
2. Flex BuilderでActionScriptのファイルを新規に作成します。[Chapter5]プロジェクトのsrcフォルダを選択し、右クリックします。そのメニューから、[新規]、[ActionScriptファイル]と選択します。
3. 「新規ActionScriptファイル」ダイアログボックスで、「ファイル名：」に"Air01.as"と指定をして、[終了]ボタンをクリックします。
   
4. 元の画面で、Flexナビゲータビューに「Air01.as」ファイルが作成されていることと、エディタビューでファイルが開いていることを確認してください。
   
   
5. 「Hotpepper001.fla」ファイルを、Flash CS3 Professionalで開きます。
6. 「Script」レイヤーの1フレーム目を選択し、ActionScriptエディタを開きます。そして、すべてのコードをコピーします。
7. Flex Builderに切り替え、「Air01.as」ファイルに貼り付けます。
   
   さて、いかがでしょうか？
   コードのキーワードの色づけなんかもついたぐらいにして、いい感じで移行できたようです。
   
   しかし、Flexではこれでは動作しません。
   「Flexにはタイムラインという概念がない」
   ため、このままではちょっとだけダメなのです。
   Flashでは、時間軸の進行に合わせてActionScriptを実行できるという「フレームアクション」という考え方があります。（今回は、たまたまメインタイムラインの1フレームのみで実行されているだけですが）
   
   Flexでは、「タイムライン」が存在しないのでどうするかというと、
   「イベントの発生するタイミング」で
   ActionScriptを実行する、ということをします。
   
   まず、移行したコード全体をくくってinit()という名前の関数にします。このinit()関数を、Flexアプリケーション初期化終了時に発生するイベント（※）である、creationCompleteイベントで呼び出します。これで、Flashで作成したときの1フレームで実行するのと同じ状態になります。
   （※）イベント、というと
   • 「マウスでクリックした」とか、「キーボードで入力した」とか、「ユーザーのマウスやキーボードのアクションに対応するイベント」
   • 「enterFrame」などのように、Flash Playerでアプリケーションを実行最中に「しかるべきタイミングで自動的に発生するイベント」
   とがあります。Flexでは、前者を「ユーザーイベント」、後者を「システムイベント」といい、今回使用する "creationComplete"は、後者のシステムイベントの仲間です。
8. 以下のコードを参考にして、init()関数でくくります。
   

   // ActionScript file
    
   //まず必要なパッケージをインポートします
   import flash.display.*;
   import flash.events.*;
   import flash.net.*;
   import flash.system.Security;
   import flash.system.SecurityPanel;
   import fl.controls.*;
    
   	function init():void{
    
   	//必要なインスタンスを生成しておきます。
   	var loader : URLLoader = new URLLoader();
   	var url:String = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&large_area=Z011&count=16";
   	var request:URLRequest = new URLRequest(url);
   	var col:int = 1;
   	var row:int = 1;
   	var w:int = 110;
   	var h:int = 110;
   	var wrap_at:int = 5;
   	var current_shop_view:ShopView;
    
   	//XMLをリクエストするファンクション。XMLのリクエストに成功し、XMLが取得できたらxmlCompfuncを実行するようになっています。
   	function loadXML(url:String) :void{        
   		loader.addEventListener(Event.COMPLETE, xmlCompfunc);
   		loader.load(request);
   	}
    
   	//ロードしたXMLからサムネイルを生成するファンクション(各サムネイルのx座標、y座標を決定します)
   	function xmlCompfunc(event:Event):void {
   		//XMLにあるネームスペースを回避します
   		namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
   		use namespace ns;
   		//取得できたXMLをfor eachで回します。
   		var results:XML = new XML(loader.data);
   		var itm:XML;
   		for each( itm in results.shop ){
   			var thumbnail_x:int = w * (col - 1) + 10;
   			var thumbnail_y:int = h * (row - 1) - 10;
   			var thumb:Thumb = make_shop_thumb( itm, thumbnail_x, thumbnail_y );
   			Cont.addChild( thumb );
   			col++;
   			if( col == wrap_at ){
   				row++;
   				col = 1;
   			}                
   		}
   	}
   	//各サムネイルに対して必要な情報を当て込みます
   	function make_shop_thumb (itm:XML, thumbnail_x:int, thumbnail_y:int ):Thumb {
   		//XMLにあるネームスペースの回避
   		namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
   		use namespace ns;
   		//ThumbというムービークリップにXMLの要素を当て込みます
   		var thumbnail:Thumb = new Thumb(itm);
   		thumbnail.x = thumbnail_x;
   		thumbnail.y = thumbnail_y;
    
   		//サムネイルがクリックされた場合、その詳細画面が表示されるようにします。
   		thumbnail.addEventListener(MouseEvent.CLICK, thumbnail_click);
   		function thumbnail_click (event:Event):void {
   			make_shop_view( itm );
   		}
   		return thumbnail;
   	}
    
   		//サムネイルがクリックされたあと、shopviewというクラスが表示されるファンクション。
   		function make_shop_view ( itm:XML ):Boolean {
   		if( current_shop_view ){
   			removeChild( current_shop_view );
   		}
   		var shopview:ShopView = new ShopView( itm );
   		addChild( shopview );
   		shopview.x = 450;
   		shopview.y = 50;
   		current_shop_view = shopview;        
   		return true;
   	}
    
   	loadXML(url);
   }

9. 「Air01.as」ファイルを上書き保存します。
10. 「Chpater05.mxml」ファイルに切り替えます。
    （※）エディタビューの上部がタブになっており、表示するファイルを切り替えることができます。
    
11. <mx:WindowedApplication ・・・>と</mx:WindowedApplication>の間に以下のコードを入力してください。
    

    <mx:Script source="Air01.as"/>

    これで、「Air01.as」というActionScriptのファイルをインクルードした状態になります。「Air01.as」ファイル内の変数アクセスや関数呼び出しができるようになります。
    さて、入力の仕方ですが、
    

    <

    とキーボードから入力し始めたタイミングで、「コード補完の候補」がリストで表示されます。さらに、
    

    <mx:S

    と入力すると、今回入力すべきを含む候補で絞られます。あとは、キーボードの上下カーソルキーで選択して、[Enter]キーを押下します。こんな調子で入力していけばいいのですが、
    

    <s

    と入力するだけでも、コード補完の候補がリストされます。つまり、「mx:」とまで入力しなくても、また、タグの大文字・小文字の区別を意識しなくてもよい（※）、ということになります。
    こんな小さなTipsですが、覚えておくとプログラミングの効率向上に役立ちます。
    （※）もちろんコード補完機能を使用してコード入力を行うときのみです。ソースコード上では、大文字・小文字を区別しますし、しかるべきつづりでスペルを入力しないとコンパイルエラーになります。
    
    さらに続けて、sourceプロパティの指定を入れます。
    

    <mx:Script>

    の　「<mx:Script」 の続きで、スペースキーを入力すると今度は、プロパティの補完候補がリスト表示されます。
    source の sou ぐらいまで入力すると、先ほどと同じように sourceプロパティを含む補完候補が絞られます。
    
    もう少し、細かい話をさせてください。
    

    <mx:Script source="Air01.as"/>

    を記述する位置ですが、 <mx:WindowedApplication ・・・>と</mx:WindowedApplication>の間でしたらどこでもかまいません。 しかし、HTMLタグを入れるときのように、あとでコードが見やすくなるように（コードの可読性をあげるために）、適切な改行や[Tab]キーによるインデントを入れてコードのレイアウトを意識しながら入力するとよいでしょう。
12. 次に<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">の部分に、以下のようにcreationComplete="init()"と追加します。
    以下のようなコードになっているはずです。上書き保存をしておいてください。
    

いかがでしょうか？
Flex側でActionScript（.as）ファイルを作成しておき、そこにコピー＆ペースト、そして、Flex側のインクルードとイベントの追加で移行完了です。

ページ 3 / 9

前のページ

次のページ