LotosLabo

プログラミング技術とか気になった情報を載せていきます

ActionScript3.0について

ActionScript3.0とは


基本的にはFlashに対して動きなどをつけるためのスクリプトです。
初代は正式なオブジェクト指向の機能がありませんでしたが、2.0や3.0では大規模なオブジェクト指向言語を搭載しています。


開発環境

環境には FlashDevelopというのを使っていきます。こちらよりインストールできます。
4.60の現時点では最新版です。

http://www.flashdevelop.org/community/viewtopic.php?f=11&t=11611

フォーラムの記事にあるdownloadよりインストールが出来ます。
インストーラーの方をダウンロードして下さい。

すべてのインストールが終了したら、.exeファイルのショートカットをデスクトップに移して起動します。


プロジェクトの作成

上のタブよりプロジェクトを選択し、新規プロジェクトを選びます。
ActionScript3より、AS3 Projectを選びます。

名前は今回は Hello Worldとします。
場所はデスクトップでいいと思います。
パッケージはなんでもいいです。今回はLotosLaboとしました。
最後にプロジェクトフォルダを作成するにチェックを入れます。


これでフォルダが作成されました。


次にコードを書いていきます。
右端にプロジェクトという項目があるのでそこから、
src -> LotosLabo -> Main.as を選びます。

もしプロジェクトが表示されていない場合は、表示からプロジェクトマネージャを選択すると表示されます。

f:id:lo25131:20140403180025j:plain


これで準備は整いましたのでコードを書いていきます。

ActionScriptを始める


まず Hello Worldと表示させていきます。

初期状態はこんなかんじでコードが表示されていると思います。

package LotosLabo
{
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author LotosLabo
	 */
	public class Main extends Sprite 
	{
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
		}
		
	}
	
}

これを邪魔なところを削除して文字を表示させます。

文字を表示、コンソールに表示するには trace() というのを使います。

文字を表示

trace()

public class Main extends Sprite 
	{
		
		public function Main()
		{
			trace("Hello World")
            trace('Hello World')
		}
		
	}



Mainのところをこのように表示させました。
なお、ActionScriptは最後にセミコロンを使わなくてもいいようになっています。
それは改行がプログラムの終わりと判断しますので、もし改行して続けて書きたい場合は最後にセミコロンを付けます。


これで上にある再生ボタンを押すと、Flash画面が立ち上がると同時にコンソール画面に
Hello World と表示されます。

数字の扱い

今回は数字の表示、演算をしていきます。後、コメントの使いかたについても説明します。

public function Main()
		{
			/* 数字の表示 */
			trace(10)
			trace( -10)
			
			/* 演算 */
			trace (10 + 4) // 14
			trace ("10" + 4)  // 104
			trace("10" +  "4") // 104
			trace('10' + '4') // 104
			
		}



コメントには複数行のものと、1行のみの二つの方式があります。

数字を表示させるにはクォーテーションがいりません。
また演算は + - * / % も使えます。
クォーテーションで囲むと文字として扱います。


変数の扱い

変数を使っていきます。

var 変数名:型名;

という順番で作ります。

public function Main()
		{
			/* 変数の格納 */
			var number:int
			var color:int = 3
			var a:int = 0, b:int = 1
			
			/* 値の代入 */
			number = 3
			
			/* 表示 */
			trace(number)
			trace(number + 5)
			
			/* 改行して続けるにはセミコロン */
			trace(color 
			+ number);
			
		}



ちょこっと応用も入れて書いていきました。
変数の格納には上で書いたようにやっていきます。
またintしか使いませんでしたが、Stringも使えます。
ちなみにActionScriptの小数型はNumberという型になります。

表示するには変数をtrace()の中に入れれば大丈夫です。計算も出来ます。

型変換

型名(変数名)

整数値を文字列に変えたりとかをしてみます。

例:

var num:int = 10
var str:String = String(num)



出力結果は特に変わりありませんが、このようにして型変換できます。

数値と文字列の結合

数値と文字列を合体させることが出来ます。

var str:Stirng = "ActionScript"
var num:Number = 3.0
trace(str + num)



ちなみにNumber型の0は0の表示以下に1とかいう数字がないと表示されません。

定数

const 変数:型名

例:

const num:int = 10
trace(num)
>||
<br>
なお、定数は途中で変更できないという特性があります。
代入してもエラーになります。


* 代入演算子とインクリメント、デクリメント

<b>代入演算子</b>は特に説明するまでもありませんが、このような感じです。

num = num + 3 を <b>num+= 3 </b>にしたものです。

>||
var num:int = 5
num += 3
trace(num) //8


インクリメント

変数++ することで+1されます

var num:int = 0
num++
trace(num) // 1


デクリメント

変数-- することで-1されます

var num:int = 1
num--
trace(num) // 0


比較演算子と論理演算子

まずは種類を上げておきます。

・比較演算子
  ==
  !=
  <
  >
  <=
  >=

・論理演算子

 論理積 A && B

 論理和 A || B

if文

if (条件式)
{
trueの場合
}

例:

var a:int = 3

if (a == 3)
{
  trace("ok")
}


if else文

if (条件式)
{
trueの場合
}else{
それ以外の場合
}

例:

var a:int = 4
if (a == 3)
{
  trace("ok")
} else {
  trace("ng")
}



ifの中にif

if (条件式)
{
  trueの場合
if(条件式)
{
trueの場合
}
}

例:

var a:int = 4
var b:int = 4
if (a == 4)
{
    trace("ok")
   if(b == 4)
  {
    trace("ok2")
   }
}


for文

for (条件式 繰り返し)
{
三回処理を行う
}

例:

for (var i:int = 0; i < 3; i++)
{
   trace(4 + 3)
}


while文

while (条件式)
{
処理
}

例:

var i:int = 0;
while (i <= 5)
{
	trace(i)
	i++
}



0から5まで出力

do-while文

do
{
処理
}
while(条件式)

例:

var i:int = 0;
do
{
	trace(i)
	i++
}
while(i <= 5)



0から5まで出力


break


for (条件式)
{
処理
break
}
処理


例:

for (var i:int =0; i < 5; i++)
{
	if (i == 3)
         break
}
trace(i)



3のみ出力

continue

for (条件式)
{
処理 continue
 処理
}


例:

for (var i:int = 0; i < 5; i++)
{
	if (i == 3) 
        continue
	trace(i)
}



0 1 2 4 と出力


配列の作成

var 変数名:Array = new Array(数字)

例:

var score:Array = new Array(5)
var color :Array = new Array([1, 2, 3, 4, 5])
			
score[0] = 3
score[1] = 5
score[2] = 20
score[3] = 10
score[4] = 30
			
trace(score)
trace(score[0])
trace(color)



色々なやり方があります。

関数

function 関数名()
{
処理
}

関数名()

例:

function score()
{
     trace("おはよう")
}
score()


描画処理

次からは実際にFLASHの画面に描画する処理をしていきます。

円を描く

サンプルを紹介します。

// Spriteを作成
var canvas:Sprite = new Sprite()
// 描画初め 色を赤に
canvas.graphics.beginFill(0xFF0000)
// 円を描画
canvas.graphics.drawCircle(100, 100, 100)
// 描画終了
canvas.graphics.endFill()

// 画面に表示
addChild(canvas)


f:id:lo25131:20140403204140j:plain


いろいろな形を描く


●四角形

 var canvas:Sprite = new Sprite()
 canvas.graphics.beginFill(0xED1A3D)
 canvas.graphics.drawRect(0,0,100,100)
 canvas.graphics.endFill()
 addChild(canvas)



f:id:lo25131:20140403204306j:plain


●楕円形

var canvas:Sprite = new Sprite();
canvas.graphics.beginFill(0xED1A3D);
canvas.graphics.drawEllipse(0, 0, 150, 100);
canvas.graphics.endFill();
addChild(canvas);



f:id:lo25131:20140403204505j:plain


線を描画

// 線のスタイル
graphics.lineStyle(1.0, 0x0)
// 線の開始地点
graphics.moveTo(100, 100)
// 線の終了地点
graphics.lineTo(200, 200)
graphics.lineTo(380, 0)


moveToは書かないと(0,0)から始まります。
lineStyleには指定できる引数がたくさんあります。

①線の太さ
②色
③透明度
④線を綺麗に見せる幅を自動調整 true か false
⑤オブジェクトが拡大表示された時
normal デフォルト
none 何もしない
vertical 線が拡大縮小 xの時
horizontal 線が拡大縮小 yの時

⑥線の終端部分
none
round
square

⑦接続点の形
round
bevel
miter

⑧角

描画したオブジェクトの削除

clear() を使います

graphics.beginFill(0x0)
graphics.drawRect(0, 0, 100, 100)
graphics.endFill()
graphics.clear()



最後にクリアするので何も表示されません。

オブジェクトのコピー

サンプル

var canvasA:Sprite = new Sprite()
canvasA.graphics.beginFill(0xED1A3D)
canvasA.graphics.drawRect(0,0,100,100)
canvasA.graphics.endFill()
addChild(canvasA)
var canvasB:Sprite = new Sprite()
canvasB.graphics.copyFrom(canvasA.graphics)
canvasB.x = 120
addChild(canvasB)



最初にcanvasAを作成して、続いてAのオブジェクトをBにコピーして表示します。


曲線を描く

graphics.lineStyle(2.0, 0x0);
graphics.moveTo(200, 200); // 始点xy
graphics.curveTo(300, 0, 400, 200); // 制御点x,y 終点x,y


f:id:lo25131:20140403211154j:plain