ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
Suzuka 基礎・基本 MovieClip.attachMovieメソッド

 誰かの趣味がとうとう脳内に伝染してしまったようなアニメーションですが...,
 草が生えます... wWw (ノ_・、) wWw

注:自動的に枯れる種類の草なので草をむしる必要はありません。
爆撃機や火炎放射器も持ってくる必要はありませんのでご安心を。

 

 サンプル作成に使用した ParaDraw のバージョンは Ver.0.3a4, Suzuka のバージョンは Ver. 0.7.4.1[RichEdit版] です。

 サンプルのプロジェクトファイル(SCFファイル)を見ていただければすぐにわかると思いますが,キャンバス上に草は配置していません。
 「草が生えてやがて枯れる」 というアニメーション入りのスプライトがシンボルリストにあるでけで,そのスプライトを MovieClip.attachMovie で,シンボルリストから呼びだしてきてランダムな場所に配置しています。
 つまり,草を生やしているのは attachMovie() です。ゲームなどでは,必ずと言って良いほどよく使われるメソッドです。

 シンボルリストからスプライトを呼びだして来るには,まずスプライトシンボルの設定が必要です。

 とりあえずはスプライトを作成した段階で,そのシンボルリスト内にあるスプライトをダブルクリックします。
 すると,次の図のように「スプライトのプロパティ」パネルが出てきますから,「識別子」に何か名前を付けます。
 このサンプルではスプライトに 「kusa」 という識別子を付けています。

attachMovieの識別子の付け方

 そして,
  □ このシンボルを書き出す
 にもチェックを入れて 「OK」 します。

 スプライトに識別子を付けて,SWF 内に書き出すようにしておくと,ActionScript によって,そのスプライトを呼びだせて,ステージ(キャンバス)上に配置することができるようになります。

 つまり,状況に応じて任意の場所に動的にスプライトを表示できるようになるということです。
 そのときに使うメソッドが MovieClipクラス の attachMovie() です。

 メインのタイムラインの フレーム1 には次のようなスクリプトを書いています。

// 変数 cnt の初期化
cnt = 0;

// 草を生やす関数の定義
function growGrass() {
	// もし cnt が 1000 未満であれば
	if (cnt<1000) {
		// cnt に 1 を加算
		cnt++;
	} else {
		// 1000 に達したら cnt を 0 に戻す
		cnt = 0;
	}
	// ★_root に 識別子 kusa のインスタンスを
	//  kusa1〜? というインスタンス名で
	//  深度cnt に attachMovie
	_root.attachMovie("kusa", "kusa"+cnt, cnt);
	// x座標 はステージ(キャンバス)の横幅でランダムな場所
	_root["kusa"+cnt]._x = Math.random()*Stage.width;
	// y座標 はステージ(キャンバス)の上に160px空けてランダムな場所
	_root["kusa"+cnt]._y = Math.random()*(Stage.height-160)+160;
}

// setInterval で上記関数を 0.7秒ごとに実行
myID = setInterval(growGrass, 700);

 本題は,★の付いた1行,
  _root.attachMovie("kusa", "kusa"+cnt, cnt);
 です。

 このサンプルでは,繰り返し繰り返し草を生やし続けるので,ユーザ定義関数 growGrass() の中に attachMovie() を入れて,
 その ,ユーザ定義関数 growGrass() を setInterval で繰り返し実行させるようにしています。
 attachMovie の基本的な構文は次のようになっています。

  MovieClip.attachMovie("識別子", "インスタンス名", 深度)

 

 また,草スプライトシンボル内の最終フレームには,

this.removeMovieClip();

 と書いています。
 これによって,ステージ上に呼びだされたスプライトインスタンスは削除できます。
 つまり,草が枯れた後は,自動的に消滅するので,いつまでもそのインスタンスがステージ上に残ることによってメモリを食いつくすというようなことは起こらなくなります。

 

 アニメーション的な話になりますが,
 「草が生えて枯れるアニメーション」は,普通の トゥイーン と モーフィング(Adobe Flash で言うシェイプトゥイーン) の組合せによって動かしています。
 Suzuka の モーフィング は制約が厳しいのでなかなか使えませんが,このサンプルのように,
 モーフィング元とモーフィング先の PDR 画像の,
  「パスの数を同じにする」
  「アンカーポイントの数を等しくする」
  「アンカーポイントの種類も変えないようにする」
 という感じで意図的に モーフィング できるように作図すると,なんとか綺麗に モーフィング してくれるようです。

 ヘルプにも書いてありますが,シンボルのプロパティでモーフィングの設定をするとき,「線と塗りを正しく表示する」にチェックを入れておくと,重なったパスどうしの下側のパスの線は消えてくれます。

モーフィングの設定

 今回の場合は,SWF のファイル容量より,CPUへの描画処理の負担を軽くしたかったので,チェックを入れてみて作成もしてみましたが,CPUへの負担はどっこいどっこいで大差はないように見えましたので,「線と塗りを正しく表示する」にチェックははずしています。

 本当はもう少し,草をたくさん生やしたかったのですが,
 このモーフィングを使ったせいか,草を増やすと低スペックな(CPUが低い)マシンでは,動きがかなりにぶくなりましたので,同時に生えている草の本数は減らして上のサンプルのような状態にしてます。

 

 あと,お絵描きや作図の話になりますが,
 「草が生えて枯れる」だけのアニメーションではなんとなくもの足りなかったので,太陽の光(フレア=flare というものか?)をかざりで入れてみました。
 Adobe の Illustrator(略称イラレ) には,フレアツールというものが付いていて,フレアを自動的に作成する機能があります。
 ParaDraw にはそんな機能はありませんが,なくても大したことではありません。
 このサンプルにある Illustrator のフレアモドキは ParaDraw で自作した(描いた)ものです。

 また,このフレアはスプライトの中に入れて,スプライト内のフレーム1に,
  this.swapDepths(2000);
 と書いて,出没するときに 深度2000 に上げています。
 これによって,フレアが草の下に表示されることはなくなります。

 

 

 

サンプルダウンロード
PDRファイル・CSFファイル在中
「kiso351.zip」 6.13 KB (6,283 バイト)