4/4 Flash万華鏡にチャレンジ！ [Flash] All About

万華鏡を制御するActionscriptを記述する

万華鏡を制御するActionscriptは以下の通りです。

for(i = 1;i <= 5;i ++){
	canvas0.duplicateMovieClip("canvas" + i , i );
}

for(i = 0;i <= 5;i ++){
	this["canvas"+ i]._rotation = 60*i;
	this["canvas"+i]._x = 200;
	this["canvas"+i]._y = 150;
	this["canvas"+i].setMask(this["mask"+i]);
}

_root.onEnterFrame = function(){
	for(i = 0;i <= 5;i ++){
		this["canvas"+ i]._rotation += 1;
	}
}

stop();

いくつかのfor文が目立つ内容ですね。部分的に抜き出して詳しく見ていきます。

まずは最初のfor文である以下の部分に注目しましょう。

for(i = 1;i <= 5;i ++){
	canvas0.duplicateMovieClip("canvas" + i , i );
}

「duplicateMovieClip()」が記述されています。ここでは四角形が描画されたインスタンス「canvas0」を複製し、「canvas1」～「canvas5」という名前のインスタンスに複製しています。

次のfor文を見ていきます。

for(i = 0;i <= 5;i ++){
	this["canvas"+ i]._rotation = 60*i;
	this["canvas"+i]._x = 200;
	this["canvas"+i]._y = 150;
	this["canvas"+i].setMask(this["mask"+i]);
}

今度は繰り返しの条件は0～5、つまりオリジナルの「canvas0」にも「{　}」の処理が適用されるのに注意してください。
2行目は、インスタンスの「_rotation」つまり、角度を「60度*i」に変更しています。ここでは「i」は0～5なので、角度は「0度、60度、120度…300度」と変更され、重なることなく、円を埋めます。
3行目、4行目は、今回のステージサイズの中心にインスタンスを移動しています。
5行目の「setMask(インスタンス名)」で、(　)で指定したインスタンスをマスクとして適用します。これは前頁で用意したマスクがそれぞれ適用されるということですね。

それでは最後の部分を見ていきましょう。

_root.onEnterFrame = function(){
	for(i = 0;i <= 5;i ++){
		this["canvas"+ i]._rotation += 1;
	}
}

stop();

この部分はフレームが1進む時間が経過する度に実行する「onEnterFrame」の関数となります。
2行目からのfor文では、先程複製したインスタンス「canvas0～5」に対して、「._rotation += 1」の変更が加えられています。
つまり、四角形を描画されているインスタンス全てが少しずつ回転することになります。

これで完成です！
完成したファイルをダウンロード

実際の万華鏡の仕組みはもっと違うものですが、Flashで難しく再現しても仕方ありません。複雑そうですが平たく言うと、「描画して」、「複製して」、「マスクかけて」、「回すだけ」ですので、難しく考えず作成すれば何てことはなかったのではないでしょうか。

「Flash万華鏡」というジャンルはFlash創世記から様々なクリエイターがチャレンジしているジャンルです。皆さんもオリジナルの改良を加えた作品を発表してみてはいかがでしょうか？