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


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
Suzuka 基礎・基本 マスクでトランジション

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

 

 

 サンプルを見てもらえばわかると思いますが,ここで言うトランジション(トランジッション)とは,画面を切り替えるときに使うアレです。
 作成するときに,一々効果の名称なんて気にしていませんし,分類するとさらに細分化できると思いますが,ワイプ効果とか,Power Point で言うところの ディゾルブ など呼ばれるものも含んでいると思います。

 一応,マスクを使った4数種類の効果を用意しました。

トランジションの流れ

 上のように,仮に「トランジション1」〜「トランジション4」という名前を付けるとすると,「トランジション1」〜「トランジション3」はほとんどスクリプトなしの単なるマスクのトゥイーンです。
 また,このページの説明やサンプルでの本題です。
 「トランジション1」〜「トランジション3」で使っている ActionScript は,スプライト内の stop(); くらいで,スプライトを理解した上で,その構造さえ考えてしてしまえば,簡単に無数のトランジション効果が作成できます。

 こういう感じのものは,すごいスクリプトを組まなければできないものだと思いこんでいる方もいらっしゃるかもしれませんが,これらはマスクというものが Flash に出没した当初(Flash の最初のバージョンからマスクはあったかも) から使用されていた古典的技法で,スクリプトなどは使わなくても簡単にできます。

 「トランジション1」〜「トランジション3」については,だいたい次のようなしくみになっています。図のサンプルは「トランジション1」のレイヤー構造です。

マスク用スプライトの構造

 「子マスク用スプライト」の中でドロー画像をモーショントゥイーンで大きくしておいて,それを「親マスク用スプライト」の中にたくさん並べるというだけのものです。
 場合によっては,上の図の「トランジション1」のように,「親スプライト」内でズラして登場させる場合もありますし,そうでない場合もあります。

 そして,このように作成しておいた「親子マスク用スプライト」をマスクとして次の画像にかけるだけで出来上がりです。

 ここで説明するよりも,ダウンロード用に用意した実際の CSF ファイルを見ていただく方が早いと思います。

 

 「トランジション1」〜「トランジション3」のような感じのものばかり作成し続けてもあまり参考にならないかと思いましたので,最後の 「トランジション4」 に関してだけは,ActionScript を補助的に入れてみました。
 しかし,補助的に ActionScript を使用してみたというだけで,マスクの原理自体は全く同じ物です。

  「トランジション4」 用の 「子マスク用スプライト」 のレイヤー構造は次のようになっています。

マスク用子スプライトの構造

 フレーム1 に何も置かず, stop(); とだけ書いておいて,フレーム2 にのみ 25×25px のドロー画像を配置してます。

 そして,その 「子マスク用スプライト」 192個を 「親マスク用スプライト」 内にびっしりと配置して,「msk_mc0」〜「msk_mc191」 というインスタンス名も手動で付けています。
 当然,手動で配置したり,手動でインスタンス名を付けなくても,MovieClip.attachMovie メソッド や,MovieClip.duplicateMovieClip メソッド を使えば自動で配置できますが,ActionScript を使って配置した場合は作成状態の CSF ファイルを見ても現物を見ることができません。
 これは説明のためのサンプルですから,スプライトは目で見えた方がわかりやすいと思ったので,一応 192個 のスプライトを手動で配置しました。

 と言っても,192個のスプライトを手動で配置&命名するくらいのことは大した手間でもありません。
 サンプルの作成などでいつも思うことですが,Suzuka でする作業より ParaDraw で絵を描く作業の方がずっと大変ですし,時間もかけています。
 お絵描き作業に比べれば,手動で配置&命名することくらいは楽な物です。

 

 そして,「親マスク用スプライト」の フレーム1 には次のようなスクリプトを書いています。

// マスクの個数
n = 192;
// 変数 cnt0 の初期化
cnt0 = 0;
// 重複しない乱数発生用配列 ranArr の作成
ranArr = new Array();
// 配列 ranArr の要素に初期値を代入(連番)
for (i=0; i<n; i++) {
	ranArr[i] = i;
}
// 重複しない乱数要素の配列の作成
for (i=0; i<n; i++) {
	// 0 以上 n-i 未満の整数の乱数を取得
	j = Math.floor(Math.random()*(n-i));
	// ranArr[n-1-i] と ranArr[j] を入れ替える
	k = ranArr[n-1-i];
	ranArr[n-1-i] = ranArr[j];
	ranArr[j] = k;
}
// 1フレーム進む時間毎に随時実行
this.onEnterFrame = function() {
	if (cnt0<n) {
		cnt1 = cnt0;
		while (cnt0<cnt1+4) {
			this["msk_mc"+ranArr[cnt0]].gotoAndStop(2);
			cnt0++;
		}
	} else {
		delete this.onEnterFrame;
	}
};

 基礎・基本とは呼べないかもしれないスクリプトも入っているかもしれませんが,一応ランダムに次の絵が出没するようにしたかったので上のようなものにしてみました。
 「msk_mc0」〜「msk_mc191」をランダムに gotoAndStop(2); させています。

 こういうランダムな場合は,単に 192個 の整数の乱数を発生させるだけではできません。 単に 192個 の整数の乱数を発生させても,何度も同じ数が重複して出没したり,いくら待っても出没しない数が出てきてしまいます。

 したがって,同じ数が2度出ないように,また,いつまで待っても出ない数がないように,ランダムシャッフルする必要があります。その一例が上の配列を利用した重複を許さない乱数の順列の作成方法です。

 配列のエレメント数を変えるようなスクリプトにすると,人間の見た目はもっとスッキリするのですが,もっと大きな計算をさせた場合,その方法では計算が遅くなるので,配列外に変数を用意してエレメントを入れ替えるというしくみにしています。
 このような 「重複しないランダムな整数の順列を求める方法」 は,これ以外にも色々なときに使えると思います。

 しかし,何にしても,この 「トランジション4」 のスクリプト自体はマスクを使ったトランジション効果そのものとは直接関係はありません。
 ActionScript をこのように使ってみても良いかもしれないという単なる一例サンプルで, 「トランジション4」 はあまり気にしなくても良い物です。
 本題は,最初の 「トランジション1」〜「トランジション3」 です。

 

 

 

サンプルダウンロード
PDRファイル・CSFファイル在中
「kiso121.zip」 10.5 KB (10,844 バイト)