chapter1-2

ActionScript の基本 ─ 図形の描画─

線を引いてみる

まずは、ActionScript で線を引いてみましょう。wonderfl にログインし、トップページの中段にある「Build from scratch」をクリックし、編集画面に入ります。

図1「Build from scratch」→編集画面に入る

img1-2-1.png

img1-2-2.png

コードエリアは作成直後はデフォルトで下記の表示になっています。

コード01 新規編集のコードエリア、デフォルトの表示

package {
    import flash.display.Sprite;
    public class FlashTest extends Sprite {
        public function FlashTest() {
            // write as3 code here..
            
        }
    }
}

この「// write as3 code here..」以下にコードを書いていくことになります。最初に、この2 行を書いてみます。

コード02 線を引く010201

コメント

行頭に「//」があると、それ以降行末までコメント(プログラムでは処理されないテキスト)として扱われます。このような形式のコメントを行コメントといいます。その他、「/*」?「*/」で囲んでコメントとするブロックコメントがあります。
自分自身も含め、あとでコードを読む人にとって理解しやすいように、コードの意図やこのコードが必要になった背景を書くとよいでしょう。

graphics.lineStyle(2,0x000000);
graphics.lineTo(100,100);

図2 コンテンツエリアに線が描画される

5 行めの lineStyle で、線の太さと色を設定しています。

lineStyle(太さ,)

色の指定は16 進数での指定となります
※ただし、行頭は「#」ではなく「0x」です。

コード02 のように書くと、自動で保存され右側のコンテンツエリアに左上から斜めに線が引かれていると思います。

6 行めのlineTo で指定された場所まで線を描いています。

lineTo (x, y)

このように、命令とそれを行うための指示(線の太さや色であったり、線をどこまで描くかであったり)を書くことで、プログラムに実行させます。1 つの命令をステートメントと呼び、その終わりは「;」で示します。また、graphics.lineTo のように「.」でつないで表記し、graphics という大きなくくりの中のlineTo という命令を呼び出しています。

詳しくは後で説明しますので、ここではできるだけスクリプトにさわって、まずは動かすことを楽しんでください。

今回のコードでは線の開始位置を設定していないため、デフォルトの(x:0, y:0)の位置(左上端)から先ほど指定した(x:100, y:100)の位置へ黒の細い線が引かれます。

うまく線が引けたら、lineTo の行をコピーして5 行くらいに増やしてみましょう。どうですか? 行を増やしたままでは何も変化ありませんね。今度は、graphics.lineTo(100,100) の100,100 の部分をいろいろな値に変えてみましょう。すると、線の長さや向きが変化します。

変数を使う

ここまでいくつもの数値を指定していましたが、たとえば同じ値を使う場合、変数というものを使うことによって、何度も同じ値を指定する手間を省けます。値を変えたい場合、変数を設定している1行を変えることで、すべての場所で値を変更できます。

変数とは値を記憶し、取り出せるようにする箱のようなものです。

コード05 変数の宣言の例1

var myNumber:Number = 100;

ここでは変数の宣言代入を行っています。まず、どんな変数にするのか名前を決めます。任意の名前を自由に付けてかまわないのですが、その変数の中身を示すような名前がよいでしょう。なお、ActionScript では大文字、小文字が区別されます。また、AS がもともと持っている変数名とかぶらないように設定します。ここでは「myNumber」としました。そして、その変数にどんなものを入れられるのかという型指定を行い、= で値を代入します。

var 変数名:型 = 値

型とはなんでしょうか? ここでは、大まかに変数を入れる箱の種類ととらえてください。コード05 では、myNumber の型をNumber に設定しました。これで、この変数にはNumber(数値)しか入れることができません。数値の範囲など、細かい話もありますが、現在はこのような認識でかまいません。

次に、携帯電話の電話帳を例にしてみましょう。

コード06 変数の宣言の例2

var nakano:String = "08011112222";
var hidaka:String = "09033334444";

変数nakano とhidaka に、それぞれ「中野」と「日高」の電話番号を入れておきます。たとえば電話をかけるという、call() 関数があったとします。すると、中野に電話をかけたい場合はcall(nakano) を、日高に電話をかけたい場合はcall(hidaka) を実行すればいいですね。もし中野の電話番号が変わった場合は新しい電話番号を登録(代入)し直してあげればいいわけです。変数nakano を呼ぶことで、中野の電話番号を値として使うことができるのです。

このとき、変数nakano とhidaka には電話番号しか登録できないようにしたいので、Stringで型宣言します。こうしておくことで、値を利用する際、間違った値が入っていないかのチェックを省くことができ、不用意なエラーを防ぐことができます。

変数の型

型の種類にはいくつかあり、使用する状況により使い分けます。必要に応じて覚えていけばよいと思いますが、数値を扱う型として、Number 型、int 型、unit 型が、数値以外を扱う型としてBoolean 型、String 型、Array 型などがあります。

表1 主な変数の型

概要
Number整数(-2,147,483,648 ?2,147,483,647)
int整数(-9,007,199,254,740,992 ?9,007,199,254,740,992)、符号なし整数、浮動小数点数
uint整数(0 ?4,294,967,295)
Booleantrue, false のどちらかの値を持つ
Stringtrue, false のどちらかの値を持つ
Array配列を扱う
Date日付けを扱う

この続きは書籍のほうでご覧いただけます

ここでは「複数の星を簡単に描く」方法として「機能をまとめる」関数やクラスについて解説していきます。

より詳しい内容をご覧になりたい方は書籍の方をお買い求めください。

ブラウザで無料ではじめるActionScript 3.0 ―It's a wonderfl world―

円を描く その1

次に、円を描いてみます。一番簡単な書き方は、Graphics.drawCircle です。

コード17 drawCircleで円の描く010210

package {
	import flash.display.Sprite;
	public class DrawCircle extends Sprite {
		public function DrawCircle() {
			graphics.lineStyle(10, 0xFFD700, 1)
			graphics.drawCircle(200,200,50)
		
		}
	}
}

図6 円が描画される

線のスタイルを決めてから、drawCircle(X, Y, 半径R)のメソッドを呼ぶだけです。簡単ですね。コンパスで円を書いている感じです。Flash で図形を描くにはGraphics クラスがあり、円のほかにも楕円を描くdrawEllipse、角丸矩形を描くdrawRoundRect という便利なメソッドが用意されています。前述のlineStyle、lineTo、moveTo もGraphics クラスの関数です。このように、Flash はあらかじめ多くのクラス(ビルドインクラス)を持っています。それによって、必要な機能を容易に呼び出せるようになっています。010210をFORK して、Graphics クラスの他の関数を使っていろいろな図形を描いてみましょう。

この続きは書籍のほうでご覧いただけます

ここでは「円を書く その2」を通して「for文」、「while文」、また「三角関数」などを取り扱っていきます。

より詳しい内容をご覧になりたい方は書籍の方をお買い求めください。

ブラウザで無料ではじめるActionScript 3.0 ―It's a wonderfl world―

▲Page top

wonderfl