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

[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. );

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

 

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

 

関連する投稿

Comments:2

taka:nium 08-11-18 (火) 0:08

こんにちわー。

DoTweener コマンド実行前に初期位置に戻すのであれば、
addCommand() メソッドの手前で普通に実行してしまうのも手だと思います。
もしくは Prop コマンドを使用するか、Func コマンドを使いつつ this を使用しないというのもいけますね。

// addCommand() の手前で初期位置に戻す
x = 640;

addCommand(
　//初期位置に戻す
　new Prop( this, { x:640 } ),
　function():void {
　　x = 640;
　},
　//移動
　new DoTweener(this, { x:120, time:0.5, transition:”EaseOutExpo” } )
);

こんな感じでいけると思います。

kanariia 08-11-18 (火) 1:19

わーｗ
お忙しいのに回答ありがとうございます(ﾉ´∀｀*)

>DoTweener コマンド実行前に初期位置に戻すのであれば、
addCommand() メソッドの手前で普通に実行してしまうのも手だと思います。
あ、そんな方法が！！
今後これ使いますっ♪

>もしくは Prop コマンドを使用するか、Func コマンドを使いつつ this を使用しないというのもいけますね。
thisを使用しなければ大丈夫だったんですね。。
それもやってみたらよかった（；＞＜）

Comment Form
Remember personal info

Trackbacks:3

Trackback URL for this entry
http://kanariia.com/blog/archives/71/trackback
Listed below are links to weblogs that reference
[progression勉強]階層のあるサイトを作ってみる from kanariia.com blog
pingback from blog.progression.jp» ブログアーカイブ » [お知らせ] 今週の Progression 関連エントリー（2008/11/15 ～ 2008/11/21） 08-11-21 (金) 16:37

[...] kanariia.com blog / [progression勉強]階層のあるサイトを作ってみる [...]

pingback from Progression 孫階層まで作成してみる。 « FlashとかActionScriptとか 08-12-28 (日) 23:56

[...] kanariiaさんの記事 [...]

pingback from AS3:Progressionはじめてみました – mooco | webdesign 10-01-02 (土) 17:10

[...] →フルFlashサイトをProgressionで作り始める時にまず読むべき16の記事 →[progression勉強]階層のあるサイトを作ってみる →[AS]progression [...]

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

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

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

Return to page top