Web動画表現 2010
ActionScript 3.0 – 変数、くりかえし
変数と型
プログラムで、値を記憶して必要なときに利用するには、変数(variable)を使います。変数を直感的に理解するには、1つの値を格納することのできる箱をイメージすると良いでしょう。この箱を利用するためには、まず箱の名前と箱の中にいれるデータの種類を決めます。これを「変数の宣言」といいます。箱が用意できたら、この箱の中に実際のデータを格納し箱の名前と関連づけます。このデータを箱の中に入れる操作を「代入」といいます。一度箱の中に入れたら、後は箱の名前を指定することで、箱の中身を見ることが可能となります。この箱の名前からデータの中身を見ることを変数の「参照」といいます。
変数の宣言とデータ型
変数を宣言する際には、プログラムの中でどのような名前で変数を用いるのかという名前の宣言と、どのような種類の変数を用いるのかたという情報をあわせて宣言します。この変数の種類のことを「データ型」と呼びます。ActionScript 3.0でよく用いられるデータ型としては以下のようなものがあります。
- int – 整数（-2,147,483,648〜2,147,483,647）
- uint – 符号なし整数（0〜4,294,967,295）
- Number – 整数、符号なし整数、浮動小数点数int、uintの範囲外の値に使う。
- String – ストリング(文字列)
- Boolean – trueまたはfalse
変数を使用するにはまず変数名と型を指定して宣言する必要があります。ActionScript 3.0で変数を宣言するには、以下のような書式を使用します。
[sourcecode language=”as3″]
var 変数名:型;
[/sourcecode]
例えば、以下のように使用します。
[sourcecode language=”as3″]
var i:int;
var str:String;
var bTest:Boolean;
[/sourcecode]
代入
宣言した変数に値を代入するには、代入演算子「=」を用います。代入演算子は数学でいう等号とは意味が異るので注意が必要です。数学での等号は、イコール「=」を挟んで左辺と右辺は等しいという意味になります。しかし、プログラミングにおいては、イコール「=」を挟んだ場合、右辺の値を左辺の変数に代入する、という意味となります。
変数の代入の例
[sourcecode language=”as3″]
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
// 整数型の変数xを宣言
var x:int;
// 実数型の変数yを宣言
var y:Number;
// 整数の代入：変数xに10を代入
x=10;
// 式の代入：xに0.5加えた値をyに代入、結果として、y = 10.5 となる
y=x+0.5;
// y自身を更新：変数yに2を加える
y=y+2;
// 結果：x = 10, y = 12.5 になるはず
trace("x = " + x + ", y = " + y);
}
}
}
[/sourcecode]
変数を利用して図形を描く
次に変数を利用して図形を描いてみましょう。
まず、先週の授業でやった方法で、FLAファイル(AS3)を作成し、ドキュメントクラスを「Main」に設定します。その上で新規にムービークリップを作成して円を描き、作成したムービークリップにMyCircleというクラスを設定します。
次に、ActionScript 3.0ファイルとして、Main.asをFLAファイルと同じ場所に新規に作成します。以下のようなプログラムを作成してみましょう。
Main.as
[sourcecode language=”as3″]
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
//変数を宣言
var locX:Number;
var locY:Number;
var circleAlpha:Number;
//変数の初期値を設定
locX=150;
locY=200;
circleAlpha=1.0;
//円1を描画
var circle1:MyCircle = new MyCircle();
circle1.x=locX;
circle1.y=locY;
circle1.alpha=circleAlpha;
addChild(circle1);
//変数を更新
locX=locX+80;
circleAlpha=circleAlpha-0.2;
//円2を描画
var circle2:MyCircle = new MyCircle();
circle2.x=locX;
circle2.y=locY;
circle2.alpha=circleAlpha;
addChild(circle2);
//変数を更新
locX=locX+80;
circleAlpha=circleAlpha-0.2;
//円3を描画
var circle3:MyCircle = new MyCircle();
circle3.x=locX;
circle3.y=locY;
circle3.alpha=circleAlpha;
addChild(circle3);
//変数を更新
locX=locX+80;
circleAlpha=circleAlpha-0.2;
//円4を描画
var circle4:MyCircle = new MyCircle();
circle4.x=locX;
circle4.y=locY;
circle4.alpha=circleAlpha;
addChild(circle4);
}
}
}
[/sourcecode]
宣言した変数の値(locX：X座標、locY：Y座標、circleAlpha：透明度)を更新しながら円をくりかえし描画することで、すこしずつ変化する円を順番に描いています。
/wp-content/uploads/2010/10/Main1.swf, 550, 400
繰り返し
現状のサンプルのプログラムを注意深く観察すると、似たような記述の繰り返しになっていることに気がつきます。10回程度までの繰り返しであれば、ここまでのやり方のように繰り返しの数だけ似たような命令を記述しても良いのですが、例えばこれが100回の繰り返し、1000回の繰り返しといったように、繰り返しの数を増やしていった場合、現在のやり方では破綻してしまいます。
この似通った繰り返しの部分を、プログラミングの記述を工夫してすっきりとまとめることが可能です。ActionScript 3.0では、「for文」という文を用いて、繰り返しの構造を記述します。
for文の基本的な構文は以下のようになります。
[sourcecode language=”as3″]
for(《初期化》; 《ループの継続条件》; 《カウンタ変数の更新》){
《文》
}
[/sourcecode]
例えば、カウンター変数「i」を用意して、iが0から99まで、合計100回くりかえして同じ処理をする繰り返し文を書く場合は、以下のような構文となります。
[sourcecode language=”as3″]
var i:int;
for(i = 0; i < 100; i = i + 1){
《繰り返す処理の内容》
}
[/sourcecode]
カウンタ変数」とは、for文が繰り返されるたびにその繰り返し回数を記録するカウンタのような役割を果たす変数です。
この時変数iは、for文の中で繰り返し処理が1回行われるごとに、1つ増加していきます。この変数iを効果的に用いることで、繰り返し回数に応じて、パラメータを変化させることも可能となります。
さきほどの変数を用いた円の描画のプログラムを注意深く眺めてみると、同じ操作のくりかえしになっている部分があることに気付くでしょう。
- 円を描く
- 円のx座標(locX)に80を足す
- 円の透明度(circleAlpha)から0.2を引く
この、くりかえしの部分をfor文を用いて短く書き直してみたいと思います。
Main.cpp
[sourcecode language=”as3″]
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
//変数を宣言
var locX:Number;
var locY:Number;
var circleAlpha:Number;
var i:int;
//変数の初期値を設定
locX=50;
locY=200;
circleAlpha=1.0;
//10回くりかえし
for (i = 0; i < 10; i = i + 1) {
//円を描画
var circle:MyCircle = new MyCircle();
circle.x=locX;
circle.y=locY;
circle.alpha=circleAlpha;
addChild(circle);
//変数を更新
locX=locX+50;
circleAlpha=circleAlpha-0.1;
}
}
}
}
[/sourcecode]
/wp-content/uploads/2010/10/Main2.swf, 550, 400
くりかえしを使用した表現
もう少し工夫して、くりかえしを効果的に使用した表現についてトライしてみましょう。
単純な四角形ではなく、下記のような図形を描いて、「MyMc」というクラス名でムービークリップを作成します。
この図形のX座標を少しずつ左から右に変化させながら、少しずつ回転をしていきたいと思います。
Main.as
[sourcecode language=”as3″]
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
//カウンタ用の変数iを宣言
var i:int;
//200回くりかえす
for (i = 0; i < 200; i++) {
//MyMcのインスタンスを生成
var mc:MyMc = new MyMc();
//ムービクリップの位置と回転角度を設定
mc.y=200;
mc.alpha=0.7;
mc.x=5*i;
mc.rotation=6*i;
//ステージに表示
addChild(mc);
}
}
}
}
[/sourcecode]
このスクリプトを実行すると、変化させる回転角度に応じて様々なパターンが描きだされます。
X座標の増加：5pixel、角度の増加：6度
/wp-content/uploads/2010/10/Main5.swf, 550, 400
X座標の増加：5pixel、角度の増加：45度
/wp-content/uploads/2010/10/Main3.swf, 550, 400
くりかえしを、くりかえす
回転しながら横に移動するサンプルをさらに繰り返して、上から下に描くことで、空間を埋めつくすようにパターンを描くことができます。くりかえしをくりかえすには、for文を2重に入れ子状にすることで実現可能です。
Main.cpp
[sourcecode language=”as3″]
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
var i:int;
var j:int;
for (j = 0; j<10; j++) {
for (i = 0; i < 200; i++) {
var rect:MyRect = new MyRect();
rect.alpha=0.7;
rect.x=5*i;
rect.y=80*j;
rect.rotation=93*i;
addChild(rect);
}
}
}
}
}
[/sourcecode]
/wp-content/uploads/2010/10/Main4.swf, 550, 400
サンプルファイルのダウンドーロ
今日とりあげたサンプルは全て下記からダウンロード可能です。