Home > Tags > progression

progression

[progression勉強]実制作でつまづいたとこをQ&A形式でまとめてみた

最近、仕事の案件でflash案件がきた（てかflashにした）ので、
初めてprogressionを使って制作してました。

まだprogressionでの制作方法やas3のことすら、熟知していないのでいろんなところで
つまづいきました。。

ちょっとしたとこでつまづいても解決法をみつけだすのに長時間悩んだりすることが結構あったので、
実制作でprogressionを使ってみて私が躓いたとこや疑問に思ったことと、ググったりして知った答えを
書きとめていたものを、 Q&A形式でまとめてみました！

Q.Castのコンストラクタからステージを参照できない

ステージリサイズで位置とかサイズとか可変させようと思ってコンストラクタで、
リサイズ時実行させる関数をstageにaddEventListenerさせようとしたらコンパイルエラー。

stageの参照は _onCastAddedの中なら可能です。
要は表示オブジェクトコンテナに追加されたタイミングではじめて参照出来るようになるってことですね。

よく考えたらわかることなのですが、なんでエラーが返ってくるのか理解できずに躓いてました。。。

PLAIN TEXT
Actionscript:
  1. protected override function _onCastAdded():void {
  2.             stage.addEventListener( Event.RESIZE, onResizeHandler);
  3.             onResizeHandler(null);
  4.             addCommand(
  5.                 // 任意のコマンドを記述してください。
  6.                 new Trace(stage.stageWidth);               
  7.             );
  8.         }

これでOK！

Q異なるシーン間で値の受け渡しがしたい！

progressionのget~系メソッドがいいらしい！
http://www.northprint.net/2009/03/progressionget.html

私は名前つけるのめんどくさかったのでgetSceneBySceneId使いました！
http://flabaka.com/blog/?p=577

たとえばIndexSceneの_testという値を参照する。

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
trace(a._test);

これは表示リストに追加されてからでないと無理なので、コンストラクタではなく、_onCastAddedの中でやること！
あとIndexSceneのインポートを忘れずに！

Q.progressionのrootはどうやって参照？

trick7さんの記事を参考に！
http://www.trick7.com/blog/2008/12/09-114334.php

Q.castButtonを追加したときも何か動かしたい！

castButton用castSpriteを作ってやる方法を参考にさせてもらいました！
http://narayama.heteml.jp/2008/09/castbuttoncastsprite.html

Q.あれ？onLoadとonInitの違いは何やったっけ？

これ、初歩的ですが、何度も何度もnorthprintさんのgihyoの記事に掲載されてたこの図で確認してます。。。

Q.tweeneerのコマンドはあるけど、tweensyのコマンドは用意されてないの？

コミッターの seyself さんが、 tweensy をコマンドとして使用できる DoTweensy コマンドを作成してくださっているそうです。
http://trac.progression.jp/browser/experiments/sayself/extensions/classes/com/seyself/extras/progression

Q.castButtonでsceneIdを指定してじゃなく次のシーンに飛ばすにはどうするの？

次のシーンのsceneIdを取得するには

progression.current.next.sceneId;

前のシーンのsceneIdを取得するには

progression.current.previous.sceneId;

ということで、やってみる。

IndexSceneで関数nextSceneId,prevSceneIdを用意しといて、
子シーンオブジェクトの_onInitとかで

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
a.nextSceneId=progression.current.next.sceneId;
a.prevSceneId=progression.current.previous.sceneId;

と書き換えておいて

その子シーンオブジェクトの中のCastBtn(_nextBtnと_prevBtn)のsceneIdを書き換えてやる。

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
_nextBtn.sceneId=a.nextSceneId;
_prevBtn.sceneId=a.prevSceneId;

これが一番良い方法かわからないですが、参考程度に。

Q.castButtonでhtmlページにリンクさせるにはどうするの？

castButtonのプロパティにhrefがあるから、以下のような記述をコンストラクタにする。

href="http://kanariia.com/blog/";

sceneId プロパティと href プロパティが両方とも設定されている場合には、href プロパティの設定が優先されるそうな。

あと、windowTargetプロパティも用意されてるので、以下のように使える。いやーさすが。

href="http://kanariia.com/blog/";
windowTarget="_blank";

Q.castImageLoaderで読み込んだ画像をスムージングしたい

ExImageLoaderのプロパティにsmoothingというのがあるので、
コンストラクタで

smoothing=true;

でOK。
castImageLoaderはExImageLoaderのサブクラスなので。

ちなみにリサイズの際、縦横比を維持したい場合は

ratio=true;

でOK。

Q.castButtonの_onCastRollOverと_onCastRollOutにDoTweenerを設定したが、超速でのせたりはずしたりするとエラーがかえってくる。

こんなエラーがよくでて困ったことありませんか。

[ERROR] <DoTweener : command_2031> コマンドで CommandTimeOutError エラーが発生。


原因はコマンドが実行中なのに同じインスタンスに他のコマンドが上書きされるからだと思われる。
実行中のコマンドを中断してやることが必要。

コマンドを中断するためにどうすればよいか、でみつけたのがinterrupt()メソッド。
これを使うためにはexecute()メソッドでコマンドを実行する必要があるらしい。

じゃあaddCommand使わないでやってみよーてことで、こんな感じ。


PLAIN TEXT
Actionscript:
  1. package myproject.btn {
  2.     import jp.progression.casts.*;
  3.     import jp.progression.commands.*;
  4.     import jp.progression.events.*;
  5.     import jp.progression.loader.*;
  6.     import jp.progression.*;
  7.     import jp.progression.scenes.*;
  8.    
  9.     /**
  10.      * ...
  11.      * @author kanariia
  12.      */
  13.     public class TestBtn extends CastButton {
  14.        
  15.         private var _rollOver:SerialList;
  16.         private var _rollOut:SerialList;
  17.        
  18.         /*======================================================================*//**
  19.          * コンストラクタ
  20.          */
  21.         public function TestBtn( initObject:Object = null ) {
  22.             super( initObject );
  23.         }   
  24.        
  25.         /*======================================================================*//**
  26.          * ユーザーが CastButton インスタンスにポインティングデバイスを合わせたときに送出されます。
  27.          * このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
  28.          */
  29.         protected override function _onCastRollOver():void {
  30.             if (_rollOut) {
  31.                 //_rollOutのコマンドをすべて解除する
  32.                 _rollOut.interrupt();
  33.             }
  34.            
  35.             _rollOver = new SerialList();
  36.             _rollOver.addCommand(
  37.             new DoTweener(this, { alpha:0.5, time:0.5, transition:"easeOutExpo" } )
  38.             );
  39.             //コマンド実行
  40.             _rollOver.execute();           
  41.            
  42.         }
  43.        
  44.         /*======================================================================*//**
  45.          * ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
  46.          * このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
  47.          */
  48.         protected override function _onCastRollOut():void {
  49.             if (_rollOver) {
  50.                 //_rollOverのコマンドをすべて解除する
  51.                 _rollOver.interrupt();
  52.             }
  53.            
  54.             _rollOut = new SerialList();
  55.             _rollOut.addCommand(
  56.             new DoTweener(this, { alpha:1, time:0.5, transition:"easeOutExpo" } )
  57.             );
  58.             //コマンド実行
  59.             _rollOut.execute();   
  60.         }
  61.     }
  62. }

スマートじゃないかもしれないけど、こうすればエラーはとまります！

Q.CastButtonの無効化はどうするの？

いつものようにenabled=false;にしても、無理だったので調べました。

ボタン有効・無効を設定する
buttonEnabledプロパティが用意されていたので、

buttonEnabled=false;

でいけるみたい！

Q.ページタイトルはどうやって変えるの？

http://blog.img8.com/archives/2008/11/004207.html

SceneObjectにはtitleというプロパティがあります。
prog.sync=true;じゃないと作動しないらしい。
あと、index.htmlのタイトルがIndexSceneにたどりつくまで
表示されるので、直しておくべし。

sceneObjectのコンストラクタとかに

title="テストサイト"

みたいな感じで書けばOK。

indexSceneでほかのシーンも作ってる場合は

aboutScene.title="about｜テストサイト";

て感じでOK。

IndexSceneで子・孫シーンをonLoadで一気に追加しておけば、
こんな設定も超簡単にすむｗ

ひとこと

自分用のメモみたいな感じなんで、きれいにまとまってるわけじゃないけど、
同じことで躓いてる人がこのエントリで救われるといいなー

関連する投稿

[progression勉強]CastImageLoaderのロード中にCastMovieClipを表示してみる

今日はこの前作ったサンプルのソースを基に、
サムネイルをCastImageLoaderでロード中にアニメーションを入れてみたいと思います。

ということで、ググる。

apeirophobia: progression検証 #15 CastImageLoaderをコマンドで監視編
このエントリ、コメントを読んでると、
castImageLoaderにはデフォルトで読み込み状況を取得するイベントはない様子。

ということでこちら
CastImageLoaderを使ってみる - Is It So Easy?
を参考にCastImageLoaderのサブクラスを作成してみる。

CastImageLoaderではロードの進捗は監視できないけど、
_onCastLoadStart():voidでロード開始時
_onCastLoadComplete():voidでロード完了時
のイベントが受け取れるから、
ロードし始めたらローディングするMCをCastMovieClipにしたものをaddChildして、
ロードが完了したらremoveChildしてやって、それらしく見せてみようと思います。

この前作ったサンプルのクラス以外に、追加で作ったクラス

  • MyImgLoader.as(CastImageLoaderのサブクラス)
  • LoadImg.as(CastMovieClipのサブクラス)

LoadImg.asを作成
コンストラクタはこんな感じ。

PLAIN TEXT
Actionscript:
  1. public function LoadImg( initObject:Object = null ) {
  2.             super(initObject);
  3.             //loaderの中央に表示
  4.             this.x = (initObject.loaderW - this.width) / 2;
  5.             this.y = (initObject.loaderH - this.height) / 2;
  6.             //透明にする
  7.             alpha = 0;
  8.         }

Index.flaの中にロード中に表示するMCを作る
ローディングはアニメGIFを使用。
こちらのサイトからダウンロードしたものを、
そのままライブラリにインポート。
できたMCにLoadImgクラスを設定するだけ。

 

MyImgLoader.asを作成
こんな感じ。

PLAIN TEXT
Actionscript:
  1. package myproject { 
  2.     import jp.progression.casts.*; 
  3.     import jp.progression.commands.*; 
  4.     import jp.progression.events.*; 
  5.     import jp.progression.loader.*; 
  6.     import jp.progression.*; 
  7.     import jp.progression.scenes.*; 
  8.     import myproject.LoadImg;
  9.    
  10.     /**
  11.      * ...
  12.      * @author kanariia
  13.      */
  14.     public class MyImgLoader extends CastImageLoader {
  15.        
  16.         private var _container:CastButton;
  17.         private var _loadImg:LoadImg;
  18.        
  19.         /*======================================================================*//**
  20.          * コンストラクタ
  21.          */
  22.         public function MyImgLoader(initObject:Object=null) {
  23.             super(initObject );
  24.             //縦横比を固定
  25.             this.ratio = true;
  26.             //リサイズ
  27.             this.width = initObject.valueW;
  28.             this.height = initObject.valueH;
  29.             //表示リストは呼び出し元のCastButtonを参照する
  30.             _container = initObject.container;
  31.             //ロード中に表示するMCを作成
  32.             _loadImg = new LoadImg({loaderW:initObject.valueW,loaderH:initObject.valueH});
  33.            
  34.         }
  35.         /*======================================================================*//**
  36.         /*Load開始時*/
  37.         protected override function _onCastLoadStart():void
  38.         {
  39.             addCommand(
  40.                 //_loadImgを表示リストに追加
  41.                 new AddChild(_container, _loadImg),
  42.                 new Trace("読み込み開始")
  43.             )
  44.         }
  45.         /*Load完了時*/
  46.         protected override function _onCastLoadComplete():void
  47.         {
  48.             this.alpha = 0;
  49.             addCommand(
  50.             //_loadImgを表示リストから削除   
  51.             new RemoveChild(_container, _loadImg),
  52.             new Trace("読み込み完了"),
  53.             //loaderを表示リストに追加、アルファ100にする
  54.             [new AddChild(_container, this),
  55.             new DoTweener(this,{alpha:1,time:2})]
  56.             );
  57.         }   
  58.        
  59.     }
  60.    
  61. }

MyBtn.asを修正
コンストラクタを大幅に修正

PLAIN TEXT
Actionscript:
  1. public function MyBtn( initObject:Object = null ) {
  2.             super( initObject );   
  3.        
  4.             //リンク先設定
  5.             sceneId = new SceneId( "/index/photo"+initObject.num);     
  6.            
  7.             //画像のサイズ
  8.             var loaderW:Number = 80;
  9.             var loaderH:Number = 60;           
  10.            
  11.             //loaderの作成
  12.             _loader = new MyImgLoader( { container:this, valueW:loaderW, valueH:loaderH } );
  13.            
  14.             //画像を読み込み 
  15.             _loader.load(new URLRequest(initObject.url),new LoaderContext(true,null, null));           
  16.  
  17.         }

前のソースのままでは MyBtn.asの中で_loaderの座標を指定して
btnの位置が変わっているように見えていただけだったことに気づき、
(↑このままではloadImgが画面左上にくる)
_loaderの位置指定を消してIndexScene.asでbtnの位置を設定するように修正。

 

で、できたのがこれ！

 

気づいたこと
MyImgLoaderでload完了時、
自分をaddhildしてからDoTweenerしようとしたが、
エラーは出ないがTweenerが動作せず、ちょっとハマる。
結果、[ ]で囲んでParallelListにしたら、動いた！

//loaderを表示リストに追加、アルファ100にする
[new AddChild(_container, this), new DoTweener(this,{alpha:1,time:2})]

addChildのあとにはコマンドがきかないということなのか‥？

関連する投稿

[progression勉強]CastImageLoaderで他サイトの画像を読み込みリサイズできない件


前回の記事でローカルではCastImageLoaderのリサイズが効くのに、
サーバーにアップしたらリサイズが効かない!!と嘆いていたのですが、
Is It So Easy?のnorthprintさんのご好意によりコードを解析いただいて、
原因がわかりました！

画像をFrickrから読み込んでいたのですが、crossdomainあたりの設定だったようで。。。

前回の使った
シーンの共通表示作成クラスMyPage.as(CastSpriteを継承)のコンストラクタを例にあげると、
CastImageLoaderへの読み込み指示は、

_loader.load(new URLRequest(initObject.url));

こう書いていたのですが、下記のようにLoaderContextを書く必要があったようです。
import flash.system.LoaderContext;と書いた上で、

_loader.load(new URLRequest(initObject.url),new LoaderContext(true,null, null));

でOK。

成功したサンプルはこれ！

LoaderContextとはなんぞや？と調べてみました。

LoaderContext - ActionScript 3.0 コンポーネントリファレンスガイド

LoaderContextの第一引数のcheckPolicyFileプロパティがの初期値はfalseですが、

イメージ (JPEG、GIF、または PNG) を呼び出し元 SWF ファイル自体のドメイン外からロードし、そのイメージのコンテンツに ActionScript からアクセスする必要がある場合に、 trueにする必要がある

ということのようです！

いやぁすごく勉強になりました。
このことはよく覚えとかないと！

私なんかのソースを見てくれて、問題を検証してくださった、
Is It So Easy?のnorthprintさん、本当にありがとうございました(*´∀｀)！！

関連する投稿

[progression勉強]外部画像データをXMLで読み込んでシーンに貼り付け

今回はXMLによる外部データ読み込みをやってみます。
CastImageLoaderで画像を読み込んでSceneObjectに貼り付けて、
フォトギャラリーみたいな感じになったらいいなーというかんじです。

CastImageLoaderについて参考にしたサイト

まず、画像のパスを格納するXMLを作成します。
こんな感じ。

PLAIN TEXT
XML:
  1. <photolist>
  2. <photo url="http://farm4.static.flickr.com/3269/3020887992_9de4220109.jpg">photo1</photo>
  3. <photo url="http://farm4.static.flickr.com/3070/2642213778_9886cee9da.jpg">photo2</photo>
  4. <photo url="http://farm4.static.flickr.com/3233/2616211855_6ce07f1f25.jpg">photo3</photo>
  5. <photo url="http://farm4.static.flickr.com/3174/3027030848_f282d05845.jpg">photo4</photo>
  6. <photo url="http://farm4.static.flickr.com/3054/3014909628_3235985fde.jpg">photo5</photo>
  7. <photo url="http://farm4.static.flickr.com/3269/3020887992_9de4220109.jpg">photo6</photo>
  8. </photolist>

次にIndexScene.asのonLoadでXMLを読み込みます。
匿名関数内にthis.latestDataと書くと
直近に読み込んだデータを参照することができる
ので、匿名関数を使ってXMLオブジェクトを生成します。
XMLを読み込んでからシーン数とボタン数を決めるので、
コンストラクタじゃなくてonLoadでシーンとボタンを追加します。

PLAIN TEXT
Actionscript:
  1. protected override function _onLoad():void {
  2.             addCommand(
  3.             new AddChild(progression.container, _page),
  4.             // XML ファイルを読み込みます。
  5.             new LoadURL( new URLRequest( "photo.xml")),
  6.             //匿名関数(this.latestDataが使える)
  7.             function():void {
  8.                 //読んだデータをxmlオブジェクトに
  9.                 _photolist = new XML(this.latestData);
  10.                 //xmlの要素の数をシーン数とする
  11.                 sceneNum=_photolist.children().length()
  12.                 //読み込む画像urlを指定してボタンとシーンをnewする
  13.                 for (var i = 0; i <= sceneNum; i++ ) {
  14.                     //シーン
  15.                     _scene = new MyScene("photo" + (i+1), { url:_photolist.photo.@url[i] } );
  16.                     addScene(_scene);
  17.                     //ボタン
  18.                     _btn = new MyBtn( { num:i+1, url:_photolist.photo.@url[i] } );
  19.                     progression.container.addChild(_btn)
  20.                     trace(progression.container.getChildIndex(_btn))
  21.                 }
  22.             }
  23.             );
  24.         }

シーンの共通クラスはこんな感じ。
MyPageクラス（シーンの共通表示作成）とMyBackBtn(indexへ戻るボタン)をaddChild。

PLAIN TEXT
Actionscript:
  1. public function MyScene(name:String=null, initObject:Object = null ) {
  2.             super( name, initObject );
  3.             trace(initObject.url)
  4.             _page = new MyPage( { url:initObject.url } );
  5.             _btn = new MyBackBtn();
  6.         }

シーンの共通表示作成クラスMyPage.as(CastSpriteを継承)のコンストラクタはこんな感じ。
InitObjectで受け取った画像のURLをCastImageLoaderで読み込んで、
640*480にリサイズして表示してます。

PLAIN TEXT
Actionscript:
  1. public function MyPage( initObject:Object = null ) {
  2.             super( initObject );
  3.             _loader = new CastImageLoader();
  4.             _loader.x = 0;
  5.             _loader.y = 0;
  6.             //縦横比固定
  7.             _loader.ratio = true;
  8.             //画像をリサイズする
  9.             _loader.width = 640;
  10.             _loader.height = 480;
  11.             _loader.load(new URLRequest(initObject.url));
  12.             addChild(_loader)
  13.             alpha = 0;
  14.         }

ボタンの共通クラスMyBtn.as(CastButtonを継承)のコンストラクタはこんな感じ。
シーンの共通クラス同様、
InitObjectで受け取った画像のURLをCastImageLoaderで読み込んで、
80*60にリサイズして表示してます。これでサムネイル風ボタンのできあがり！
サムネイル読み込み中のローディングはまた今度。。

PLAIN TEXT
Actionscript:
  1. public function MyBtn( initObject:Object = null ) {
  2.             super( initObject );
  3.             //リンク先設定
  4.             sceneId = new SceneId( "/index/photo"+initObject.num);
  5.             //画像を読み込み
  6.             _loader = new CastImageLoader();
  7.             _loader.x = 110 * (initObject.num-1);
  8.             _loader.y = 300;
  9.             //縦横比固定
  10.             _loader.ratio = true;
  11.             //画像をリサイズする
  12.             _loader.width = 80;
  13.             _loader.height = 60;
  14.             _loader.load(new URLRequest(initObject.url));
  15.             addChild(_loader)
  16.         }

写真を押したらindexへ戻るボタンMyBackBtn.asを別途作成。
こんなん。
写真と同じサイズにして、アルファ0にした状態。透明ボタンを追加する方法が正しいのかはわからないけど、これしか思いつかないので。。。本当はCastButtonクラスで表示も作成して、ボタン機能もつけたかったけど、CastButtonクラスだとonCastAdded(表示リストに追加されたとき)のコマンドがオーバーライドできないようなので、表示はCastSpriteでボタン機能はCastButtonで別途作成。

PLAIN TEXT
Actionscript:
  1. public function MyBackBtn( initObject:Object = null )
  2.         {
  3.             super( initObject );
  4.             //リンク先設定
  5.             sceneId = new SceneId( "/index");
  6.             //表示を作成する
  7.             _shape = new Shape;
  8.             _shape.graphics.beginFill(0x000000)
  9.             _shape.graphics.drawRect(0, 0, 640, 480);
  10.             _shape.graphics.endFill();
  11.             addChild(_shape);
  12.             alpha = 0;
  13.     }

よーし、できたっ！てテストアップしたところ…
あれ、画像のリサイズが効いてない（；＞＜）何で？何で？
ローカルだとちゃんといけてるのに…！！
てゆーかアップしてバグってたら致命的やん(；ﾟДﾟ)
いろいろやってみたけど、自分の力ではもうわかりませーん！
何でだぁ～


テストアップしてるのはこれ↓
http://kanariia.com/blog/sample/081126/

ローカル確認用zipデータはこれ↓
http://kanariia.com/blog/sample/081126.zip

 

おバカなつまづき

最初MyBtn.asのコンストラクタでシリアルリストでxmlを読もうとしたら、
xmlは読めるけどノードにアクセスできない。。
だいぶおこられました。。
Spriteのサブクラスではノードにアクセスできないってことかな？
結局、シーンオブジェクトでxml読み込み。
てか、それが正しいんやろなぁ！  

 

追記
画像のリサイズが効かない件、解決！！
[progression勉強]CastImageLoaderで他サイトの画像を読み込みリサイズできない件

関連する投稿

[progression勉強]階層のあるサイトを作ってみる

progressionのasDocやら、as3事体理解しきれてないので、この本を見たりしながら、
ちょこちょここの前のサンプルをベースにいじっていますが、
スピードは超スローで、
本当どうってことないとこでひっかかったりしてます。。。
が、めげずにぼちぼちやってきます！

この前のエントリのサンプルを基に、
シーンの中にさらに子シーン（ポップアップして閉じるような）を追加したものを作りたいと思います。

Scene1の中に子シーンChild1,Child2,Child3を作成してみます。
Child～はボタンを押したらScene1内でポップアップしてChild～内の閉じるボタンで元に戻るっていうイメージです。

ちょこちょこ前のサンプルを修正していますが、

新たに作成したクラスは

  • 子シーンの共通クラス MyChildScene.as(SceneObjectを継承)
  • 子シーンの中の表示要素 MyChildPage.as(CastSpriteを継承)

これだけ。

Scene1～3の共通クラスMyScene.asのコンストラクタに、
Scene1のときだけさらに子シーンとボタンを追加するように記述。

PLAIN TEXT
Actionscript:
  1. //コンストラクタ
  2. public function MyScene( name:String = null, initObject:Object = null ) {
  3.     super( name, initObject );
  4.  
  5.     //ページを作成します。
  6.     _page = new MyPage( { myPageNum:initObject.mySceneNum } );
  7.  
  8.     //scene1の子シーン・ボタンを作成
  9.     if (initObject.mySceneNum == 1) {
  10.         var myChildNum:int = 3;
  11.         for (var i:int = 1; i <= myChildNum; i++) {
  12.             //シーン
  13.             var myChildScene:MyChildScene = new MyChildScene("child" + i, { myChildSceneNum:i } );
  14.             addScene(myChildScene);
  15.             //ボタン
  16.             var btn:MyBtn = new MyBtn({myname:"child"+i,sceneNum:initObject.mySceneNum,childNum:i} );
  17.             btn.x = 110 * i;
  18.             btn.y = 250;
  19.  
  20.             _page.addChild(btn);
  21.  
  22.         }
  23.     }
  24. }

これで追加OK。

次は子シーン(ポップアップさせたいページ)の表示をMyChildPage.asで定義。

PLAIN TEXT
Actionscript:
  1. //コンストラクタ
  2. public function MyChildPage( initObject:Object = null ) {
  3.     super( initObject );
  4.     // 表示を作成する
  5.     var myShape:Shape = new Shape();
  6.     myShape.graphics.beginFill(0xFCFCFC);
  7.     myShape.graphics.drawRect(0, 0, 400, 300);
  8.     myShape.graphics.endFill();
  9.     addChildAt(myShape,0);
  10.  
  11.  
  12.     _txt = new TextField();
  13.     _txt.mouseEnabled = false;
  14.     _txt.textColor = 0x000000;
  15.     _txt.text = "child" + initObject.myChildPageNum;
  16.  
  17.     this.x = 200;
  18.     this.y = 100;
  19.  
  20.     this.alpha = 0;
  21. }


 

あと、MyBtn.asのコンストラクタのSceneId設定を修正

PLAIN TEXT
Actionscript:
  1. // クリック時の移動先を設定する
  2. if (!initObject.sceneNum) {
  3.     sceneId = new SceneId( "/index" );
  4.     if (initObject.back) {
  5.         sceneId = new SceneId( "/index/myScene1");
  6.     }
  7. } else if (!initObject.childNum) {
  8.     sceneId = new SceneId( "/index/" + "myScene" + initObject.sceneNum );
  9. } else {
  10.     sceneId = new SceneId( "/index/" + "myScene" + initObject.sceneNum+"/child"+initObject.childNum);
  11. }

ちょっとこのへん効率悪い書き方な気するけど、initObjectの値で移動先を振り分けてるってかんじです。

そんなこんなで、できたのはこれです。
ちゃんとurlも変わってくれてます！

 

さらに遷移のモーションを変えようとしたところ、気づいた点がいくつか。 

 

1.ナビゲーションが最前面にきていない

前のサンプルではIndex.asでボタンを作成していたけど、表示リストには追加されるものの、IndexSceneの背面にきてしまうので、
今回はindexScene.asのコンストラクタに以下を追記

PLAIN TEXT
Actionscript:
  1. // ボタンを作成する
  2. var btnId:Array=["index","scene1","scene2","scene3"];
  3. for (var j:int = 0; j <= 3; j++) {
  4.     var btn:MyBtn = new MyBtn({myname:btnId[j], sceneNum:j } );
  5.     btn.x = 10;
  6.     btn.y = 60 * j;
  7.     trace(btn);
  8.     progression.container.addChildAt(btn,100*j);
  9. }

progression.container.addChildAt(btn,100*i); 

IndexSceneではほかの子シーンもaddSceneするので、かぶらないようにaddChildAtでいきなり表示リストの100番代においてやります(←このいきなり番号とばすのはprogressionだからこそできるみたい)。

 

2.addCommand内でthis.x=○○とかは無理

シーンの遷移方法を左から右にスーッって感じにしたかったんやけど、遷移する前に位置を戻したくて、
this.x=○○って書いてみたけど、「xというプロパティはありません」ってゆうかんじのエラー。
たぶんこれ、as3わかってたら当たり前なんやろうけど、
深いとこわかってないので、エラーなくなるまでとりあえずいろいろやってみた。
funcコマンドの中に書いてみたりとかも無理。
結局、DoTweenerはいけるから、それ使ってやってみよ！と思ったけど、
位置もどしたいだけやしに時間は指定いらんよなーって考えてて、じゃあどう記述したらいいのかわからんくて、
ちょっと悩み、結果「time:0」でもいけるんじゃ？と思って書いてみたところいけた！
こんな感じで。(MyPage.asの_onCastAdded)

PLAIN TEXT
Actionscript:
  1. addCommand(
  2. //初期位置に戻す
  3. new DoTweener(this,{x:640,time:0}),
  4. //移動
  5. new DoTweener(this, { x:120, time:0.5, transition:"EaseOutExpo" } )
  6. );

たぶんもっといい方法があるんやろうけど、今回はとりあえずこれで。。。誰か教えてください(；´Д｀)

 

う～んうまく文にできない（；^ω^）
今度は外部データの読み込みやってみるかな。

 

関連する投稿

Home > Tags > progression

Twitter
Follow @kanariia (238 followers)
recent article
arcive
category
bookmark
nakanohito

あわせて読みたい
あわせて読みたいブログパーツ

Return to page top