fig05_01-04a.jpg

swfを試す。

 キャストオブジェクトはインスタンスidとインスタンスグループで参照と抽出ができます。インスタンスidはidプロパティ、インスタンスグループはgroupプロパティで設定します。

 次のサンプルでは、BallCastSpriteクラスで円形のキャストスプライト、BoxCastSpriteクラスでは四角形のキャストスプライトを作り、合計20個のキャストスプライトをステージに交互に並べています。このとき、BallCastSpriteクラスで作ったキャストスプライトにはグループidとして"ball"を付け(22行目)、BoxCastSpriteクラスで作ったキャストスプライトにはグループidとして"box"を付けます(28行目)。同時に個々を区別する"sp0"〜"sp19"のインスタンスidも付けます(21、27行目)。

 続いてキャストスプライトにアニメーションを付けるコマンドリストを作成します。まず1つ目のアニメーションとして、getInstancesByGroup("ball")でインスタンスグループballのキャストスプライトを配列ballListに参照を取り出し(40行目)、1個ずつ順に弾むように拡大するアニメーションをDoTweenerコマンドで作りシリアルリストのanimeList1に追加します。

 同様に2つ目のアニメーションはgetInstancesByGroup("box")でインスタンスグループboxのキャストスプライトを配列boxListに参照を取り出し(47行目)、すべてが同時にぐるんと90度回転するアニメーションをDoTweenerコマンドで作りパラレルリストanimeList2に追加します。

 3つ目のアニメーションでは、今度はランダムに選んだidのキャストスプライトをgetInstanceById("sp"+no)を使って1個だけ取り出し(54行目)、そのキャストスプライトが拡大縮小を繰り返すアニメーションをループリストanimeList3を使って作ります。

 3種類のアニメーションの準備ができたので、最後にこれらを順に実行します(59行目)。実行はシリアルリストになるので、animeList1が完了したならばanimeList2、最後にanimeList3という順で再生されます。

[:script:]グループとインスタンスidでインスタンスを選択してアニメーションする
package {
 import jp.progression.commands.display.*;
 import jp.progression.commands.*;
 import jp.progression.scenes.*;
 import jp.progression.casts.getInstanceById;
 import jp.progression.casts.getInstancesByGroup;
 import jp.progression.commands.tweens.DoTweener;
 import jp.progression.commands.lists.*;
 import pages.*
 
 public class IndexScene extends SceneObject {
  public function IndexScene() {
   //ブラウザのタイトル。
   title = "Top";
   //コンテンツ
   var castSp:*;
   for (var i:int=0;i < 20;i++){
    if(i%2){
     //偶数番のキャストを作る
      castSp = new BallCastSprite();
      castSp.id = "sp"+i; //インスタンスid
      castSp.group = "ball";//インスタンスグループ
      castSp.scaleX=castSp.scaleY=0.4;
     }else{
      //奇数番のキャストを作る
      castSp = new BoxCastSprite();
      castSp.id = "sp"+i;//インスタンスid
      castSp.group = "box";//インスタンスグループ
     }
     //キャストをコンテナに並べる
     castSp.x = i%5*100+40;
     castSp.y = int(i/5)*90+40;
     (new AddChild(container, castSp)).execute();
   }

  }
  //このシーンをロードしたらアニメーションを開始する
  protected override function atSceneLoad():void {
   //インスタンスグループballのアニメーションのコマンドリストを作る
   var ballList:Array = getInstancesByGroup("ball");
   var animeList1:SerialList = new SerialList();
   for (var i:int=0;i < ballList.length;i++){
    animeList1.addCommand( new DoTweener(ballList[i],{scaleX:1,scaleY:1,time:0.5,transition:"easeOutElastic"}));
    animeList1.addCommand( new DoTweener(ballList[i],{scaleX:0.4,scaleY:0.4,time:0.5,transition:"easeOutElastic"}));
   };
   //インスタンスグループboxのアニメーションのコマンドリストを作る
   var boxList:Array = getInstancesByGroup("box");
   var animeList2:ParallelList = new ParallelList();
   for (var j:int=0;j < boxList.length;j++){
    animeList2.addCommand( new DoTweener(boxList[j],{rotation:90,time:1,transition:"easeOutElastic"}));
   }
    //インスタンスidを1個選んでアニメーションをループさせる
    var no:int = Math.floor(Math.random()*20);
    var sp:* = getInstanceById("sp"+no) ;
     var animeList3:LoopList = new LoopList();
    animeList3.addCommand(new DoTweener(sp,{scaleX:1.5,scaleY:1.5,time:1,transition:"easeOutElastic"}));
    animeList3.addCommand(new DoTweener(sp,{scaleX:0.4,scaleY:0.4,time:1,transition:"easeOutElastic"}));  
   //コマンドリストの実行
    addCommand(animeList1, animeList2, animeList3);
  }
 }
}

親シーンからの到着、親シーンへの移動で発生するイベント
fig03_01-02.jpg



子シーンからの到着、子シーンへの移動で発生するイベント
fig03_01-03.jpg



現在のシーンを通過する場合に発生するイベント
fig03_01-04.jpg



同じ親シーンをもつ子シーンの間で移動する場合に発生するイベント
親シーンではイベントが発生しない点に注意
fig03_01-05.jpg



「従兄弟→叔父→親→現在」と移動する場合に発生するイベント
祖父シーンではイベントが発生しない点に注意
fig03_01-06.jpg



「現在→親→叔父→従兄弟」と移動する場合に発生するイベント
祖父シーンではイベントが発生しない点に注意
fig03_01-07.jpg

通称wonderfl本に参加しました!

|

ご存じ面白法人カヤックのwonderflを利用してActionScript 3を始めようという新しい試みの本の執筆に参加しました。その名も「ブラウザで無料ではじめるActionScript 3.0 ―It's a wonderfl world―」。

ブラウザで無料ではじめるActionScript 3.0 ―It's a wonderfl world―
4862670776


執筆陣も内容も豪華です!
面白法人カヤックFlashチーム(大塚雅和、小林太郎、道家陽介、中野総子、原真人、日高一明、村井孝至)、野中文雄、大重美幸、高輪知明nutsu、イズカワタカノブkatamari、村山健undefined、梅原宗士水玉製作所、小林陽介ローハイド、池田泰延clockmaker、吉川佳一BOW、小林茂yapan.org(敬称略)

clockmakerこと池田 泰延さんがPapervision3Dの入門書を出しました!
これは迷わず買いでしょう!


Flash3Dコンテンツ制作のためのPapervision3D入門
Flash3Dコンテンツ制作のためのPapervision3D入門

公式のPapervison3D日本語フォーラムてのができましたよ。

TheFlashBlog iPhoneカテゴリ

|

Adobe TheFlashBlogにFlash CS5で作るiPhone Appについてのエントリーがぼちぼち出てきましたよ。ときどき、チェックしよう!

TheFlashBlog iPhoneカテゴリ

リキッドレイアウトに対応

|

リキッドレイアウトに対応したバージョンを作りました。なんか結果オーライのような感じですが、今日の所はこれでOKということで、改めてスマートな方法を考えたいと思います。そろそろ次のテーマに移ります。

swfを試す。

サンプルファイル一式→ LiquidLayout_1.zip

なお、このバージョンはProgression 4.0.1 Public Beta1.2で作ってあります。1.1ではNextSceneボタンとPreviousSceneボタンが正しく動作しません。

そうそう、シーンを進めると一瞬だけ上に現れるバーはプログレスバーなんですけどね。ちゃんと動いていいるのかな??って感じです。

niumさんから最適解をもらいました。こういうやり方がよいということです。
ステージリサイズには対応してませんが、これでステージ中央に表示されます。プログレスバーにも対応できますね。

[:script:] ThePageクラス
package pages{
  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 flash.display.Loader;
  import flash.net.URLRequest;
  
  /**
   * ...2009.10.27b
   * @author ...oshige
   */
  public class ThePage extends CastMovieClip {
    private var _url:String;
    
    public function ThePage(url:String, initObject:Object=null) {
      _url = url;
      // 親クラスを初期化します。
      super(initObject);
    }
    
    protected override function atCastAdded():void {
      addCommand(
         new Prop(this,{y:-stage.stageHeight}),
         //swf読み込み
        new LoadSWF(new URLRequest(_url), null, {
          onProgress:function():void {
            trace(this.bytesLoaded + " / " + this.bytesTotal + " (" + this.percent + "%)" );
          },
          onComplete:function():void{
            var ld:Loader = this.loader;
            self.addChild(ld);trace("self=",self);
            ld.x=(stage.stageWidth-ld.width)/2;
            ld.y=(stage.stageHeight-ld.height)/2;
          }
        }),
         new DoTweener( this, {y:0,time:1, transition:"easeinoutsin"} )
      );
    }
    
    protected override function atCastRemoved():void {
      addCommand(
          new DoTweener( this, { y:stage.stageHeight, time:1, transition:"easeinoutsin"} ),
          //読み込んだswfを消すために行う
          new RemoveAllChildren(this)
      );
    }
  }
}

この変更にともなって、ThePageクラスを呼び出すTheSceneクラスとIndexSceneクラスを少し変更。

swfを試す。

サンプルファイル一式→ LoadSWF_pages4.zip

さらにLoadSWF()が続く

|
しつこく、まだやってます (^ ^;;
読み込んだloaderの座標をtweenせずに、ページ全体をtweenさせるのならば、loaderのページ内での座標さえフィックスできればいいというわけで、スクリプトが少し簡単になりました。

package pages{
	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 flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.net.URLRequest;
	/**
	 * ...2009.10.27
	 * @author ...oshige
	 */
	public class ThePage extends CastMovieClip {
		private var _url:String;
		private var page:CastMovieClip;
		public function ThePage(initObject:Object=null) {
			// 親クラスを初期化します。
			super(initObject);
			_url = initObject.url;
			page = this;
		}
		
		protected override function atCastAdded():void {
			var list:SerialList = new SerialList();
			list.addCommand(
				new Prop(page,{y:-stage.stageHeight}),
				new LoadSWF(new URLRequest(_url)),
				function():void {
					var loader:Loader = Loader( this.latestData );
					list.insertCommand(
						new Prop(loader, {x:(stage.stageWidth-loader.width)/2,y:(stage.stageHeight-loader.height)/2}),
						new AddChild(page, loader)
					)
				},
				new DoTweener( page, { y:0,time:1, transition:"easeinoutsin"} )
			)
			list.execute();
		}
		
		protected override function atCastRemoved():void {
			addCommand(
		 	 	new DoTweener( page, { y:stage.stageHeight, time:1, transition:"easeinoutsin"} ),
		  		//読み込んだswfを消すために行う
		  		 new RemoveAllChildren(this)
			);
		}
	}
}

で、残った問題は読み込み中のプログレスバーの表示とかいろいろです。
スクリプトがだいぶ変わってしまいますが、次のようにしてみました。いまココです。

package pages{
	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 flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.net.URLRequest;
	/**
	 * ...2009.10.27
	 * @author ...oshige
	 */
	public class ThePage extends CastMovieClip {
		private var _url:String;
		private var page:CastMovieClip;
		public function ThePage(initObject:Object=null) {
			// 親クラスを初期化します。
			super(initObject);
			_url = initObject.url;
			page = this;
		}
		
		private function loadSWF():void {
			//pageコンテンツをURLから読み込む(swf、画像)
			var ldswf:LoadSWF = new LoadSWF(new URLRequest(_url));
			ldswf.onProgress = function():void {
			 	trace(ldswf.bytesLoaded + " / " + ldswf.bytesTotal + " (" + ldswf.percent + "%)" );
			};
			ldswf.onComplete = function():void{
				var ld:Loader = this.loader;
				 page.addChild(ld);
				ld.x=(stage.stageWidth-ld.width)/2;
				ld.y=(stage.stageHeight-ld.height)/2;
			};
			ldswf.execute();
		}

		protected override function atCastAdded():void {
			addCommand(
			   new Prop(page,{y:-stage.stageHeight}),
			   //swf読み込み
			   new Func(loadSWF),
			   new DoTweener( page, {y:0,time:1, transition:"easeinoutsin"} )
			);
		}
		
		protected override function atCastRemoved():void {
			addCommand(
		 	 	new DoTweener( page, { y:stage.stageHeight, time:1, transition:"easeinoutsin"} ),
		  		//読み込んだswfを消すために行う
		  		 new RemoveAllChildren(this)
			);
		}
	}
}

addCommandとinsertCommand

|
LoadSWFがらみでSerialListのinsertCommand()をnorthorintさんに教えてもらいました。northorintさんのblogに記事がありますが(1年前にこれやってるんですね)、これを参考にaddCommandとinsertCommandの実行順をテストしてみました。なるほど!

[:script:]addCommandとinsertCommandの実行順をテストする
var list:SerialList = new SerialList();
list.addCommand(  
 new Trace("コマンドスタート"),  
 function ():void{  
    list.addCommand(new Trace("addCommand1のタイミング"));
    list.insertCommand(new Trace("insertCommandのタイミング"));  
    list.addCommand(new Trace("addCommand2のタイミング")); 
 },  
    new Trace("コマンド終わり!")  
) 
trace("executeの前----------");
list.execute();
trace("executeの後----------");

出力結果は次のようになります。
executeの前----------
コマンドスタート
insertCommandのタイミング
コマンド終わり!
addCommand1のタイミング
addCommand2のタイミング
executeの後----------