クリックして四角形を描画するActionscript
新規にレイヤーを作成し、「action」と名前をつけます。レイヤー「action」の1フレーム目に以下のActionscriptを記述してください。clickCount = 0;
drawCount = 0;
myColor = new Array(0xff0000,0x99FF00,0x00CCFF,0xFF00FF,0xFFCC00,0x6600CC);
_root.onMouseDown = function(){
if(clickCount == 0){
_root.canvas0.beginFill(myColor[drawCount],100);
_root.canvas0.moveTo(_root.canvas0._xmouse, _root.canvas0._ymouse);
clickCount ++;
}else if(clickCount <3){
_root.canvas0.lineTo(_root.canvas0._xmouse, _root.canvas0._ymouse);
clickCount ++;
}else{
_root.canvas0.lineTo(_root.canvas0._xmouse, _root.canvas0._ymouse);
_root.canvas0.endFill();
clickCount = 0;
if(drawCount < myColor.length-1){
drawCount ++;
}else{
drawCount = 0;
}
}
}
stop();
長文ですので、分解して詳しく見ていきます。まず以下の部分で各種初期設定を行っています。
clickCount = 0; drawCount = 0; myColor = new Array(0xff0000,0x99FF00,0x00CCFF,0xFF00FF,0xFFCC00,0x6600CC);1行目の変数「clickCount」は、画面を何回クリックしたかを管理する変数です。今回は四角形を描画したいので、初期値は0、最大値は4ということになります。
2行目の変数「drawCount」は何回描画を行ったかを管理する変数です。今回は描画する回数を特に制限しませんが、何個目は何色という形で毎回色を変えるために利用します。
3行目では配列「myColor」を生成しています。 配列の要素は16進数の色で、6個の色を収録しました。この色を呼び出すには「mycolor[0]」という形に0から5までの整数を渡すことで呼び出すことが出来ます。
以降の行は全て「_root.onMouseDown」つまり画面全体をクリックした際の関数です。変数「clickCount」、つまりクリックされた回数によってif文で条件分岐しています。
まず、四角形を描画するために最初にクリックされた場合が以下の部分です。
if(clickCount == 0){
_root.canvas0.beginFill(myColor[drawCount],100);
_root.canvas0.moveTo(_root.canvas0._xmouse, _root.canvas0._ymouse);
clickCount ++;
}else if(clickCount <3){
まず、四角形を描画するために最初にクリックされた場合が上記の部分です。2行目で塗りのスタイルを指定しています。色は配列「myColor」の「drawCount」個目という微妙な表現ですが、1個目の四角形を描画する場合は配列の0個目、2個目の四角形を描画する場合は配列の1個目を呼び出すことになります。不透明度は「100」を指定しています。
3行目で四角形の始点を指定しています。X座標、Y座標共に、クリックした場所の座標を取得しています。
4行目に変数「clickCount」に「1」を足しています。これで次回クリックされたときはこのif文は読み飛ばされるという仕組みです。
では次の条件である、変数「clickCount」が「3未満」である場合を見ていきましょう。
}else if(clickCount <3){
_root.canvas0.lineTo(_root.canvas0._xmouse, _root.canvas0._ymouse);
clickCount ++;
}else{
ここでは既に塗りのスタイルは宣言されている場合と考えて良いので、スタイルの宣言は行いません。2行目で、図形の角となる点をクリックされたときのマウスの座標より指定しています。3行目では先程と同様にクリックされたということを管理する変数「clickCount」に「1」を足しています。
最後に、4回クリックされた場合の処理は以下の部分です。
}else{
_root.canvas0.lineTo(_root.canvas0._xmouse, _root.canvas0._ymouse);
_root.canvas0.endFill();
clickCount = 0;
if(drawCount < myColor.length-1){
drawCount ++;
}else{
drawCount = 0;
}
}
まず2行目は他の条件と同様、クリックされた点を描画する座標として加えています。3行目の「endFill()」は描画を終了し、塗りのスタイルを適用する記述です。
4行目でクリック回数を管理する変数「clickCount」に「0」を代入し初期化しています。
その後のif文は塗りの色を変化させるための変数「drawCount」つまり何個四角形を描画したかを管理する部分なのですが、条件は「drawCount < myColor.length-1」となっています。「配列名.length」で配列のデータ個数が取得出来るので、「drawCount < myColor.length-1」で、配列の最大個数より1つ少ない場合という意味なので、この記述で配列の全データを余すことなく使い切ることが出来るわけです。配列の全データを使用しきった場合は「draw = 0」として初期化しています。
最後の行で「stop()」を記述して、フレームの再生を停止しています。
次のページでは描画したインスタンス「canvas0」を複製し万華鏡を作っていきます。
