2012-01-26

Flash学習(16) addChild, ソースファイル分割

それでは『ActionScript 3.0 アニメーション』を読んでいこう。
ActionScript 3.0 アニメーションActionScript 3.0 アニメーション

作者：KeithPeters
出版社／メーカー：ボーンデジタル
発売日：2007-10-30
メディア：単行本
目次は https://www.borndigital.co.jp/book/detail.php?id=29 にある。
Part 1 ActionScriptによるアニメーションの基本
　Chapter 1 アニメーションの基本的な概念
　Chapter 2 アニメーションに使用するActionScript 3.0の基本
　Chapter 3 アニメーションで使う三角関数
　Chapter 4 レンダリングテクニック
Part 2 基本的なモーション
　Chapter 5 速度と加速度
　Chapter 6 跳ね返りと摩擦
　Chapter 7 ユーザーインタラクション：オブジェクトの移動
Part 3 高度なモーション
　Chapter 8 イージングとバネ
　Chapter 9 衝突判定
　Chapter 10 座標回転と角度に対する跳ね返り
　Chapter 11 ビリヤードボールの物理
　Chapter 12 引き合うパーティクルと引力
　Chapter 13 フォワードキネマティックス：物体を歩かせる
　Chapter 14 インバースキネマティックス：ドラッグとリーチ
Part 4 3Dアニメーション
　Chapter 15 3Dの基本
　Chapter 16 3Dの線と塗り
　Chapter 17 陰面消去と3D照明
Part 5 さらなるテクニック
　Chapter 18 行列の数学
　Chapter 19 ヒントとトリック
ふむふむ。500ページ以上あるのか。厚い本だな。ていうか高い！　高価な本だ。

Chapter 1

Chapter1は「frame フレーム」に関する考察。frameっていうのは要するに動画をきりとった1静止画。1秒4コマのリミテッドアニメ、というときのコマのこと。

Chapter 2

  • この本は Flash 9(Flash CS3, Flash Player 9)と、Flex2向けの本。ActionScript3.0専用の本。
  • classとは ひな形。ファイル名はクラス名.as
  • packageとは クラスをまとめる
  • import 必ず記述する必要あり
  • constructor 初期化。クラスと同名のfunction
  • 継承 extends override
  • MovieClipクラス / Spriteクラス（Timelineを持たないMovieClip)
  • DocumentClass AS3で新しく導入された。このクラスから始まる Main()
  • Flash CS3/Flex builder2/Flex2 SDKの使い方
  • metadata compilerに与える情報 -default-size=800,600 のコマンドラインでオプションの代わりに、[width="800",height="600"]と指定
  • trace("warn") / Logger.debug("warn")
    • Movieをブラウザのサイズに伸縮させない　stage.scaleMode=,.. stage.align
  • loop ただのforループでは画面更新しない。
    • Flash5ではFrameLoop‥‥Frame1で初期化、Frame2に実処理、Frame3でgotoAndPlay(2);
    • Flash5のClipEvent‥‥AS3では削除された
      • MovieClipに与えるコード
        onClipEvent(load){初期化;}
        onClipEvent(enterFrame){実処理;}
        on(イベント名){}
    • Flash6以降のEventHandler‥‥AS2以前とAS3でやりかたが異なる。大事な2つとは‥‥
      • Listener‥‥ EventをListen(聞き耳を立てる)オブジェクト。Eventを監視する、もっと正確に言うとEventを通知される
      • Handler‥‥ Eventが起きたときHandling(処理する)関数
        • addEventListener(Event.ENTER_FRAME, enterFrameHandler);
        • 特定のSpriteだけでeventを監視する mySpriteButton.addEventListener(Mouse.MOUSE_DOWN, spriteHandler);
        • Handler関数はAS2ではonEnterFrameとか決まっていた
        • removeEventListener(Event.ENTER_FRAME, enterFrameHandler); で受信をやめることかできる
        • AS2ではスコープの問題があった。AS3解決
    • enterFrameはFlashに再生ヘッドを移動させるタイミングを教えている
  • 表示リスト‥‥Movie内のVisualObjectすべてのtree構造
    • tree‥‥ Stage - MovieClip/Text/Shape - MovieClip という階層構造
    • AS2ではMovieClip作成時にtree上の場所を指定する必要あり。AS3では必要ないが、明示的にaddChild()が必要。
    • AS2で必要だった深度指定は、AS3では自動で行われる（指定も可能）
    • 親.addChild(子) というObject関係。
    • removeChildしても消滅ではなく表示リストから外れるだけ。表示リストに再び戻せる、しかも別の場所にでもOK
    • 別の親にaddChildすると、前の親からは自動的にremoveChild
addChildで親を付け替える実例
Flash swf: ステージ(Flash画面のどこでも)をクリックすると、子のballは、親parent1と親parent2にaddChild、次に親からremoveChild。

ソース:
package 
{
 import flash.display.SpreadMethod;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 [SWF(backgroundColor="0xfcfcfc", width="320",height="240", frameRate="15")]
 /**
  * ... 
  * @author itouhiro
  */
 public class Main extends Sprite 
 {
  private var parent1:Sprite;
  private var parent2:Sprite;
  private var ball:Sprite;
  private var i:int = 0;
  
  public function Main():void 
  {
   if (stage) init();
   else addEventListener(Event.ADDED_TO_STAGE, init);
  }
  
  private function init(e:Event = null):void 
  {
   removeEventListener(Event.ADDED_TO_STAGE, init);
   // entry point
   parent1 = new Sprite();
   addChild(parent1);
   parent1.graphics.lineStyle(1, 0);
   parent1.graphics.drawRect( -50, -50, 100, 100);
   parent1.x = 60;
   parent1.y = 60;
   
   parent2 = new Sprite();
   addChild(parent2);
   parent2.graphics.lineStyle(1, 0);
   parent2.graphics.drawRect( -50, -50, 100, 100);
   parent2.x = 170;
   parent2.y = 80;
   
   ball = new Sprite();
   ball.graphics.beginFill(0xff0000);
   ball.graphics.drawCircle(0, 0, 40);
   ball.graphics.endFill();
   
   stage.addEventListener(MouseEvent.CLICK, ballHandler);
  }
  
  private function ballHandler(e:MouseEvent):void 
  {
   i = (i + 1) % 3;
   if (i==1) {
    parent1.addChild(ball);
   }else if(i==2) {
    parent2.addChild(ball);
   }else {
    parent2.removeChild(ball);
   }
  }
  
 }
 
}
このソースには同じ処理を2回している箇所がある。共通化するため、クラスを使う。以下のようにファイル分割して、classを作る。

ソース ParentBox.as:
package 
{
 import flash.display.Sprite;
 public class ParentBox extends Sprite
 {
  public function ParentBox()
  {
   init();
  }
  
  private function init():void 
  {
   graphics.lineStyle(1, 0);
   graphics.drawRect( -50, -50, 100, 100);
  }
 }
}
ソース Main.as:
package 
{
 import flash.display.SpreadMethod;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 [SWF(backgroundColor="0xfcfcfc", width="320",height="240", frameRate="15")]
 /**
  * ... mtm
  * @author itouhiro
  */
 public class Main extends Sprite 
 {
  private var parent1:ParentBox;
  private var parent2:ParentBox;
  private var ball:Sprite;
  private var i:int = 0;
  
  public function Main():void 
  {
   if (stage) init();
   else addEventListener(Event.ADDED_TO_STAGE, init);
  }
  
  private function init(e:Event = null):void 
  {
   removeEventListener(Event.ADDED_TO_STAGE, init);
   // entry point
   parent1 = new ParentBox();
   addChild(parent1);
   parent1.x = 60;
   parent1.y = 60;
   
   parent2 = new ParentBox();
   addChild(parent2);
   parent2.x = 170;
   parent2.y = 80;
   
   ball = new Sprite();
   ball.graphics.beginFill(0xff0000);
   ball.graphics.drawCircle(0, 0, 40);
   ball.graphics.endFill();
   
   stage.addEventListener(MouseEvent.CLICK, ballHandler);
  }
  
  private function ballHandler(e:MouseEvent):void 
  {
   i = (i + 1) % 3;
   if (i==1) {
    parent1.addChild(ball);
   }else if(i==2) {
    parent2.addChild(ball);
   }else {
    parent2.removeChild(ball);
   }
  }
  
 }
}
できあがるFlash swfは先ほどと同じなので省略。
時刻:
ラベル:

0 件のコメント:

コメントを投稿

人気記事

  • Install FontForge20160404 on ArchLinux201607
    FontForge 20160404 をArchLinux 201607にインストールします。 普通にインストールするなら pacman -S fontforge で終わりですが、FontForgeに日本語パッチを当てたいので、パッケージのビルドはこちらでやり、ビルド中にパッチ...
  • [Flash] Starling MovieClip CS6 SpriteSheet
    [Flash] Starlingの学習 MovieClipを表示する。Flash Pro CS6でSpriteSheetを作成
  • Actionscript3.0で状態遷移
    状態遷移についてGoogle検索で調べたところ、 http://flash-scope.com/scene_change_with_function_call.html のソースコードが単純でわかりやすかった。