Flashゲームプログラミング講座 for ActionScript3.0

 

ディスプレイオブジェクトとは?

 

■ディスプレイオブジェクトとは?

 
■表示オブジェクトとは?
 
ステージ上に配置して表示できるオブジェクトを、表示オブジェクトといいます。
 
■表示オブジェクトとなる条件
 
DisplayObject クラスから派生しているクラスであれば、表示オブジェクトとなります。
 
■表示オブジェクトの種類

以下のクラスは、表示オブジェクトの一種です。(一部抜粋)
 
Stage , Document , MovieClip , Sprite , Shape , TextField , Bitmap , Video , Loader
 
■DisplayObject クラスの機能
 
DisplayObject クラスには、表示オブジェクトを制御するための、基本的な機能がまとまっています。
 
座標、角度、拡大縮小などの、姿勢の制御を行う事ができます。
 
また、色を付けたり、ブレンドやフィルタを適用することもできます。
 

■ DisplayObject クラスの派生について


DisplayObject クラスは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Object
↓派生
EventDispatcher
↓派生
DisplayObject
 


 

表示オブジェクトを移動する

 

サンプルをダウンロード
 

■表示オブジェクトを移動する


表示オブジェクトの位置を制御するには、以下のプロパティを使用します。
 
x プロパティで x 座標(水平方向)の位置を変更します。
 
y プロパティで y 座標(垂直方向)の位置を変更します。
 
x 座標(水平方向)を増加させると、右に移動します。
 
y 座標(垂直方向)を増加させると、下に移動します。
 
表示オブジェクト mc の位置を 座標(100,200) に変更する

// 座標を変更する
mc.x = 100;
mc.y = 200;
 
スプライトの位置を 座標(100,200) に変更する

import flash.display.Sprite;
import flash.display.Graphics;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-20,-20,40,40);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 200;
 

■表示オブジェクトを少しずつ移動する

 
表示オブジェクトの xy プロパティを、少しだけ増減させます。
 
この処理を毎フレーム実行すると、表示オブジェクトを少しずつ移動することができます。
 
スプライトを少しずつ右下に移動する

import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.Event;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-20,-20,40,40);

// スプライトの初期位置をセット
sprite.x = 50;
sprite.y = 50;

// 毎フレーム実行されるイベント
sprite.addEventListener(Event.ENTER_FRAME , function (e:Event):void{

	// スプライトの座標を加算
	sprite.x += 1;
	sprite.y += 1;

});
 


 

表示オブジェクトを回転する

 

サンプルをダウンロード
 

■表示オブジェクトを回転する


表示オブジェクトを回転するには、rotation プロパティを使用します。
 
-180 から 180 までの数値(角度)を指定します。
 
それ以外の数値を指定すると、自動的に -180 ~ 180 の範囲に丸められます。
 
数値を増加させると、時計回りに回転します。
 
表示オブジェクト mc の角度を 50 に変更する

mc.rotation = 50;
 
スプライトの角度を 50 に変更する

import flash.display.Sprite;
import flash.display.Graphics;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-20,-20,40,40);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;

// スプライトの角度を変更する
sprite.rotation = 50;
 

■表示オブジェクトを少しずつ回転する

 
表示オブジェクトの rotation プロパティを、少しだけ増減させます。
 
この処理を毎フレーム実行すると、表示オブジェクトを少しずつ回転することができます。
 
スプライトを少しずつ時計回りに回転する

import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.Event;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-20,-20,40,40);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;

// スプライトの初期角度をセット
sprite.rotation = 15;

// 毎フレーム実行されるイベント
sprite.addEventListener(Event.ENTER_FRAME , function (e:Event):void{

	// スプライトの角度を加算
	sprite.rotation += 1;

});
 

 
 

表示オブジェクトを拡大縮小する

 

サンプルをダウンロード
 


■拡大率を指定してスケーリングする

 
表示オブジェクトの拡大率を制御するには、以下のプロパティを使用します。
 
scaleX プロパティで x 軸方向(水平方向)の拡大率を変更します。
 
scaleY プロパティで y 軸方向(垂直方向)の拡大率を変更します。
 
拡大率を倍率で指定します。1.0 で等倍となります。
 
表示オブジェクト mc を x方向に 80% y 方向に120% 拡大表示する

mc.scaleX = 0.8;
mc.scaleY = 1.2;
 
スプライトを x方向に 80% y 方向に120% 拡大表示する

import flash.display.Sprite;
import flash.display.Graphics;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-20,-20,40,40);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;

// スプライトの拡大率を変更する
sprite.scaleX = 0.8;
sprite.scaleY = 1.2;
 

■幅と高さをピクセル単位で指定する

 
表示オブジェクトの大きさを、ピクセル単位で変更するには、以下のプロパティを使用します。
 
width プロパティで 水平方向の大きさをピクセル単位で変更します。
 
height プロパティで 垂直方向の大きさをピクセル単位で変更します。
 
このプロパティは、描画矩形のサイズを基準にしてスケールされます。
 
よって、グラフィック要素がまったく無い場合、設定することができません。
 
マイナス値を指定することはできません。
 
表示オブジェクト mc の幅と高さを変更する

mc.width = 50;
mc.height = 150;
 
スプライトの幅と高さを変更する

import flash.display.Sprite;
import flash.display.Graphics;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-20,-20,40,40);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;

// スプライトの幅と高さを設定する
sprite.width = 50;
sprite.height = 150;
 
■角度が設定されている場合は要注意
 
表示オブジェクトに角度が設定されている場合、『角度適用後の描画矩形』が基準となります。
 
幅か高さのどちらかを変更した場合、もう片方も変化してしまいます。
 
 
『角度適用前の描画矩形』を基準として、幅と高さを変更したい場合は、いったん角度を 0 に戻す必要があります。
 
角度を 0 にしてから、幅と高さを設定する

import flash.display.Sprite;
import flash.display.Graphics;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-20,-20,80,40);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;

// スプライトの角度を変更する
sprite.rotation = 15;

// ------------------------------------------------------------
// 幅と高さを設定する
// ------------------------------------------------------------
// 角度を変数に残す
var r:Number = sprite.rotation;

// 角度を 0 に設定する
sprite.rotation = 0;

// 幅と高さを設定する
sprite.width = 50;
sprite.height = 150;

// 角度を戻す
sprite.rotation = r;
 

 
 

表示オブジェクトを反転する

 

サンプルをダウンロード
 

■拡大率にマイナスを指定して反転する

 
表示オブジェクトの拡大率にマイナス値を指定すると、表示オブジェクトが反転します。
 
表示オブジェクトの拡大率を制御するには、以下のプロパティを使用します。
 
scaleX プロパティで x 軸方向(水平方向)の拡大率を変更します。
 
scaleY プロパティで y 軸方向(垂直方向)の拡大率を変更します。
 
拡大率を倍率で指定します。
 
1.0 で等倍となります。-1.0 で等倍の反転となります。
 
表示オブジェクト mc を水平方向に反転させる

mc.scaleX = -1.0;
 
表示オブジェクト mc を垂直方向に反転させる

mc.scaleY = -1.0;
 
スプライトを水平方向に反転させる

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginGradientFill ( GradientType.LINEAR , [0xFF4444,0xFFCCCC] , [1.0,1.0] , [0,255] , new Matrix(100/1638.4,0,0,1,-50,-50));
g.drawRect (-50,-50,100,100);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;

// スプライトを水平方向に反転させる
sprite.scaleX = -1.0;
 

■ピクセル値指定で表示オブジェクトを反転する


まず、正の値で、width ,height を設定します。
 
拡大率 scaleX ,scaleY も自動的に変化するので、そのまま -1.0 を乗算して符号を反転します。
 
表示オブジェクト mc を水平方向に -100 ピクセルで表示する

mc.width = 100;
mc.scaleX *= -1;
 


 

表示オブジェクトを半透明にする

 

サンプルをダウンロード
 

■表示オブジェクトの透明度を設定する

 
表示オブジェクトを半透明に設定するには、alpha プロパティを使用します。
 
0.0 ~ 1.0 までの数値を指定します。
 
0.0 で完全に透明になり、1.0 で通常表示となります。
 
表示オブジェクト mc の透明度を 50% に設定する

mc.alpha = 0.5;
 
スプライトを少しずつ透明にする

import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.Event;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-20,-20,40,40);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;

// スプライトの初期透明度をセット
sprite.alpha = 1.0;

// 毎フレーム実行されるイベント
sprite.addEventListener(Event.ENTER_FRAME , function (e:Event):void{

	// スプライトの透明度を 0 に近づける
	sprite.alpha *= 0.98;

});
 

■表示オブジェクトの可視表示を設定する

 
表示オブジェクトの可視表示を設定するには、visible プロパティを使用します。
 
true を指定すると、「可視表示」となります。通常の状態です。
 
false を指定すると、「非表示」となります。
 
表示オブジェクト mc を、非表示に設定する

mc.visible = false;
 
表示オブジェクト mc を、可視表示に設定する

mc.visible = true;
 


 

表示オブジェクトにマスクをかける

 

サンプルをダウンロード
 

■表示オブジェクトにマスクをかける

 
表示オブジェクトにマスクをかけるには、mask プロパティを使用します。
 
引数に、マスクの形状となるグラフィックを持つ、表示オブジェクトの参照を指定します。
 
マスク用のグラフィックは、面(塗り)データだけで構成します
 
線データが含まれていると、正常にマスクがかからないようです。
 
"mc" "source" mc.setMask(source);
マスクする絵 マスク範囲用の絵 合成後の絵
 
表示オブジェクト mc に、表示オブジェクト source の形状でマスクをかける

mc.mask = source;
 
スプライトAに、スプライトB の形状でマスクをかける

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;

var g:Graphics;

// ------------------------------------------------------------
// スプライトA
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite_a:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite_a);

// 矩形を描画
g = sprite_a.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginGradientFill ( GradientType.LINEAR , [0xFF4444,0xFFCCCC] , [1.0,1.0] , [0,255] , new Matrix(200/1638.4,0,0,1,0,0));
g.drawRect (0,0,200,200);


// ------------------------------------------------------------
// スプライトB
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite_b:Sprite = new Sprite();

// ステージに配置
//stage.addChild(sprite_b);

// 円を描画
g = sprite_b.graphics;
g.beginFill (0x000000, 1.0);
g.drawCircle (0,0,50);

// スプライトの座標を変更する
sprite_b.x = 100;
sprite_b.y = 100;


// ------------------------------------------------------------
// マスクの設定
// ------------------------------------------------------------
// スプライトAに、スプライトBの形状でマスクをかける
sprite_a.mask = sprite_b;
 


 

表示オブジェクトに名前をつける

 
サンプルをダウンロード
 

■表示オブジェクトに名前を付ける


表示オブジェクトにインスタンス名を付けるには、name プロパティ を使用します。
 
ユニーク(唯一)な名前を付ける必要があります。
 
静的に配置した表示オブジェクトは、インスタンス名を変更する事ができません
 
動的に生成した表示オブジェクトは、ドットシンタックスを使ってアクセスすることができません。
 
 
スプライトAとスプライトBにインスタンス名を付ける

import flash.display.Sprite;

// ------------------------------------------------------------
// スプライトA
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite_a:Sprite = new Sprite();

// "my_sprite_a" というインスタンス名を付ける
sprite_a.name = "my_sprite_a";

// ステージに配置
stage.addChild(sprite_a);


// ------------------------------------------------------------
// スプライトB
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite_b:Sprite = new Sprite();

// "my_sprite_b" というインスタンス名を付ける
sprite_b.name = "my_sprite_b";

// ステージに配置
stage.addChild(sprite_b);


// ------------------------------------------------------------
// インスタンス名から表示オブジェクトを取得
// ------------------------------------------------------------
// インスタンス名を指定して表示オブジェクトを取得する
var a:Sprite = stage.getChildByName("my_sprite_a");
var b:Sprite = stage.getChildByName("my_sprite_b");

// トレーステスト
trace(a.name);
trace(b.name);
 


 

表示オブジェクトをビットマップキャッシュ化する

 
サンプルをダウンロード
 

■ビットマップキャッシュとは?


ビットマップキャッシュについては、こちらで解説しています。
 

■表示オブジェクトをビットマップキャッシュ化する


ビットマップキャッシュを有効にするには、cacheAsBitmap プロパティに true をセットします。
 
ブレンドやフィルタを使用している場合は、自動的に true になります。
 
表示オブジェクト mc のビットマップキャッシュを有効に設定する

mc.cacheAsBitmap = true
 

■抜き部分に色を付ける


表示オブジェクトの描画矩形の抜きに当たる透明な部分に、色をつけることができます。
 
アルファブレンディング処理が省かれ、ほんの少し高速に描画する事ができます。
 
 
ムービークリップの抜きに色を付けるには、opaqueBackground プロパティを使用します。
 
RGB カラーを指定します。
 
表示オブジェクト mc の抜き部分に色(FF0000)を付ける

mc.opaqueBackground = 0xFF0000;
 
スプライトの抜き部分に色(FF0000)を付ける

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;

// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 円を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawCircle (0,0,50);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;

// スプライトの抜き部分に色を付ける
sprite.opaqueBackground = 0x0000FF;
 


 

表示オブジェクトにブレンドを適用する

 

サンプルをダウンロード
 

■表示オブジェクトにブレンドを適用する


表示オブジェクトにブレンドを適用するには、blendMode プロパティを使用します。
 
以下の表にある、定数をセットします。
 
ブレンドの詳細については、こちらで解説しています。
 
定数 文字列 名称
BlendMode.NORMAL "normal" 標準
BlendMode.LAYER "layer" レイヤー
BlendMode.MULTIPLY "multiply" 乗算
BlendMode.SCREEN "screen" スクリーン
BlendMode.LIGHTEN "lighten" 比較(明)
BlendMode.DARKEN "darken" 比較(暗)
BlendMode.DIFFERENCE "difference" 差の絶対値
BlendMode.ADD "add" 加算
BlendMode.SUBTRACT "subtract" 減算
BlendMode.INVERT "invert" 反転
BlendMode.ALPHA "alpha" アルファ
BlendMode.ERASE "erase" 消去
BlendMode.OVERLAY "overlay" オーバーレイ
BlendMode.HARDLIGHT "hardlight" ハードライト
BlendMode.SHADER "shader" シェーダー (Flash 10 以降)
 
表示オブジェクト mc を加算でブレンドする

import flash.display.BlendMode;

mc.blendMode = BlendMode.ADD;
 
表示オブジェクト mc を減算でブレンドする

import flash.display.BlendMode;

mc.blendMode = BlendMode.SUBTRACT;
 
 

 

表示オブジェクトにフィルタを適用する

 
サンプルをダウンロード
 

■表示オブジェクトにフィルタを適用する

 
表示オブジェクトにフィルタを適用するには、 filters プロパティを使用します。
 
Filter 系のオブジェクトを、配列に格納してから渡します。
 
配列で指定するので、複数のフィルタを順番に適用することができます。
 
■フィルタの一覧
 
フィルタについては、こちらで解説しています。
 
クラス名効果
BlurFilter ブラー
BevelFilter ベベル
GradientBevelFilter グラデーションベベル
GlowFilter グロー
GradientGlowFilter グラデーショングロー
DropShadowFilter ドロップシャドウ
ColorMatrixFilter カラーマトリックス
ConvolutionFilter コンボリューション
DisplacementMapFilter ディスプレイスメントマップ
ShaderFilter シェーダー
 
■1つのフィルタを適用する例
 
スプライトにブラーを適用する

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;
import flash.filters.BlurFilter;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 円を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawCircle (0,0,50);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;


// ------------------------------------------------------------
// フィルタ
// ------------------------------------------------------------
// ブラーフィルタオブジェクトを作成
var blur_filter:BlurFilter = new BlurFilter();


// ------------------------------------------------------------
// フィルタを適用
// ------------------------------------------------------------
// スプライトに、フィルタを適用
sprite.filters = [blur_filter];
 
■複数のフィルタを適用する例
 
スプライトにブラーとドロップシャドウを適用する

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;
import flash.filters.BlurFilter;
import flash.filters.DropShadowFilter;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 円を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawCircle (0,0,50);

// スプライトの座標を変更する
sprite.x = 100;
sprite.y = 100;


// ------------------------------------------------------------
// フィルタ
// ------------------------------------------------------------
// ブラーフィルタオブジェクトを作成
var blur_filter:BlurFilter = new BlurFilter();

// ドロップシャドウフィルタオブジェクトを作成
var drop_filter:DropShadowFilter = new DropShadowFilter();


// ------------------------------------------------------------
// フィルタを適用
// ------------------------------------------------------------
// スプライトに、フィルタを適用
sprite.filters = [blur_filter,drop_filter];
 
 

 

表示オブジェクトにカラーを適用する

 

サンプルをダウンロード
 
 


■表示オブジェクトを着色する

 
1.ColorTransform オブジェクトを作成する
 
new 演算子を使って、ColorTransform クラスをインスタンス化します。
 
カラートランスフォームオブジェクトを作成する

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();
 
2.RGB カラー (0xFFFFFF) をセットする
 
単一のカラーで着色するには、color プロパティを使用します。
 
RGB カラー (0xFFFFFF) をセットします。
 
カラートランスフォームオブジェクトに RGB カラーをセットする

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();

// RGB カラーを設定する
color_transform.color = 0xFF8822;
 
3.表示オブジェクトにカラートランスフォームを適用する
 
表示オブジェクトにカラーを適用するには、transform.colorTransform プロパティを使用します。
 
このプロパティに、カラートランスフォームオブジェクトを渡します。
 
スプライトに RGB カラーを設定する

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;
import flash.geom.ColorTransform;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginGradientFill ( GradientType.LINEAR , [0xFFCCCC,0xCCCCFF] , [1.0,1.0] , [0,255] , new Matrix(300/1638.4,0,0,1,0,0));
g.drawRect (0,0,300,300);


// ------------------------------------------------------------
// カラートランスフォーム
// ------------------------------------------------------------
// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();

// RGB カラーを設定する
color_transform.color = 0xFF8822;


// ------------------------------------------------------------
// カラーを適用
// ------------------------------------------------------------
// スプライトに、カラートランスフォームオブジェクトを渡す
sprite.transform.colorTransform = color_transform;
 

■表示オブジェクトに詳細な色を設定する

 
1.ColorTransform オブジェクトを作成する
 
new 演算子を使って、ColorTransform クラスをインスタンス化します。
 
ここでは、引数の説明は省略します。
 
new ColorTransform ( redMultiplier , greenMultiplier , blueMultiplier , alphaMultiplier , redOffset , greenOffset , blueOffset , alphaOffset ) :ColorTransform
第01引数(略可)NumberredMultiplier プロパティに相当
第02引数(略可)NumbergreenMultiplier プロパティに相当
第03引数(略可)NumberblueMultiplier プロパティに相当
第04引数(略可)NumberalphaMultiplier プロパティに相当
第05引数(略可)NumberredOffset プロパティに相当
第06引数(略可)NumbergreenOffset プロパティに相当
第07引数(略可)NumberblueOffset プロパティに相当
第08引数(略可)NumberalphaOffset プロパティに相当
戻り値 ColorTransformColorTransform オブジェクト
 
カラートランスフォームオブジェクトを作成する

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();
 
2.ColorTransform オブジェクトの各プロパティを設定する
 
ColorTransform オブジェクトには、以下のプロパティがあります。
 
プロパティ名効果
redMultiplier Number 赤色の乗算成分 (倍率を指定) デフォルトは 1.0
blueMultiplier Number 緑色の乗算成分 (倍率を指定) デフォルトは 1.0
greenMultiplier Number 青色の乗算成分 (倍率を指定) デフォルトは 1.0
alphaMultiplier Number 透過色の乗算成分 (倍率を指定) デフォルトは 1.0
redOffset Number 赤色の加算成分 (-255 ~ 255 の値を指定) デフォルトは 0
greenOffset Number 緑色の加算成分 (-255 ~ 255 の値を指定) デフォルトは 0
blueOffset Number 青色の加算成分 (-255 ~ 255 の値を指定) デフォルトは 0
alphaOffset Number 透過色の加算成分 (-255 ~ 255 の値を指定) デフォルトは 0
 
このパラメータは、『詳細』カラー設定の、以下の部分に相当します。
 
 
カラートランスフォームは、以下の計算が行われます。
 
この計算は、1ピクセルごとに行われ、全ピクセルが変換されます。
 
カラートランスフォームの変換式

新しい赤色   = (元の赤色   * redMultiplier)   + redOffset;
新しい緑色   = (元の緑色   * greenMultiplier) + greenOffset;
新しい青色   = (元の青色   * blueMultiplier)  + blueOffset;
新しい透過色 = (元の透過色 * alphaMultiplier) + alphaOffset;
 
「RGB カラー」と「濃淡」を指定して、着色する例です。
 
「RGB カラー」と「濃淡」指定で着色する

import flash.geom.ColorTransform;

// RGB カラー(0xFFFFFF)を指定
var color_rgb:uint = 0xFF8800;

// 濃淡 (0.0 ~ 1.0)
var shade:Number = 0.5;

// カラートランスフォームオブジェクトを作成
var color_transform : ColorTransform = new ColorTransform();

color_transform.redMultiplier   = 1.0 - shade;
color_transform.greenMultiplier = 1.0 - shade;
color_transform.blueMultiplier  = 1.0 - shade;
color_transform.redOffset   = ((color_rgb >> 16) & 0xFF) * shade;
color_transform.greenOffset = ((color_rgb >>  8) & 0xFF) * shade;
color_transform.blueOffset  = ((color_rgb >>  0) & 0xFF) * shade;
 
明度を変更する例です。
 
明度を変更する

import flash.geom.ColorTransform;

// 明度 (-1.0 ~ 1.0)
var lightness:Number = 0.5;

// カラートランスフォームオブジェクトを作成
var color_transform : ColorTransform = new ColorTransform();

if(lightness < 0){
	color_transform.redMultiplier   = 1.0 + lightness;
	color_transform.greenMultiplier = 1.0 + lightness;
	color_transform.blueMultiplier  = 1.0 + lightness;
	color_transform.redOffset   = 0;
	color_transform.greenOffset = 0;
	color_transform.blueOffset  = 0;
}else{
	color_transform.redMultiplier   = 1.0 - lightness;
	color_transform.greenMultiplier = 1.0 - lightness;
	color_transform.blueMultiplier  = 1.0 - lightness;
	color_transform.redOffset   = 255 * lightness;
	color_transform.greenOffset = 255 * lightness;
	color_transform.blueOffset  = 255 * lightness;
}
 
ネガポジ反転する例です。
 
ネガポジ反転する

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成
var color_transform : ColorTransform = new ColorTransform(-1.0,-1.0,-1.0,1.0,255,255,255,0);
 
3.表示オブジェクトにカラートランスフォームを適用する
 
表示オブジェクトにカラーを適用するには、transform.colorTransform プロパティを使用します。
 
このプロパティに、カラートランスフォームオブジェクトを渡します。
 
スプライトにカラートランスフォームを適用する

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;
import flash.geom.ColorTransform;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginGradientFill ( GradientType.LINEAR , [0xFFCCCC,0xCCCCFF] , [1.0,1.0] , [0,255] , new Matrix(300/1638.4,0,0,1,0,0));
g.drawRect (0,0,300,300);


// ------------------------------------------------------------
// カラートランスフォーム
// ------------------------------------------------------------
// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();

// カラートランスフォームを設定する
color_transform.redMultiplier = 0.5;
color_transform.greenMultiplier = 1.0;
color_transform.blueMultiplier = 0.5;
color_transform.alphaMultiplier = 1.0;
color_transform.redOffset = 0;
color_transform.greenOffset = 0;
color_transform.blueOffset = 0;
color_transform.alphaOffset = 0;


// ------------------------------------------------------------
// カラーを適用
// ------------------------------------------------------------
// スプライトに、カラートランスフォームオブジェクトを渡す
sprite.transform.colorTransform = color_transform;
 
 

 

表示オブジェクトに行列を適用する

 

サンプルをダウンロード
 


■表示オブジェクトに行列を適用する

 
表示オブジェクトに行列を適用するには、 transform.matrix プロパティを使用します。
 
このプロパティに、マトリックスオブジェクトを渡します。
 
transform.matrix プロパティの Matrix オブジェクトからメソッドを呼び出しても効果はありません。
 
必ず、マトリックスオブジェクトを渡す必要があります。
 
スプライトに行列を適用する

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// ステージに配置
stage.addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginGradientFill ( GradientType.LINEAR , [0xFF4444,0xFFCCCC] , [1.0,1.0] , [0,255] , new Matrix(100/1638.4,0,0,1,-50,-50));
g.drawRect (-50,-50,100,100);


// ------------------------------------------------------------
// マトリックスオブジェクトを用意
// ------------------------------------------------------------
// マトリックスオブジェクトを作成する
var mtx : Matrix = new Matrix();

// 単位行列化
mtx.identity();
// スケーリング行列を乗算
mtx.scale(0.8,1.2);
// 回転行列を乗算
mtx.rotate(Math.PI / 180 * 30);
// 平行移動行列を乗算
mtx.translate(100,100);


// ------------------------------------------------------------
// マトリックスオブジェクトを適用
// ------------------------------------------------------------
// スプライトに、マトリックスオブジェクトを渡す
sprite.transform.matrix = mtx;
 

■行列の各パラメータについて

 
Matrix クラスには、a , b , c , d , tx , ty という、6つのプロパティがあります。
 
6つのパラメータによって、回転、拡大、位置、せん断といった姿勢を表現する事ができます。
 
 
赤いベクトルが、 x 軸成分を表しており ( a , b ) ベクトルとなります。
 
青いベクトルが、 y 軸成分を表しており ( c , d ) ベクトルとなります。
 
赤と青の2つのベクトルの交わる点は、座標成分を表していて (tx, ty) 位置ベクトルとなります。
 
a , b , c , d の4つのパラメータの組み合わせにより、回転、拡大、せん断といった要素が決定します。
 
tx, ty の2つのパラメータにより、位置の要素が決定します。
 
 

 

表示オブジェクトが表示リストから外れたか調べる

 
 


■デストラクタの代用として使用する


ActionScript3.0 のクラスには、デストラクタに相当する機能がありません。
 
表示オブジェクトは、大抵の場合、ステージから消えた時に不要となります。
 
Event.REMOVED_FROM_STAGE イベントを使用することで、デストラクタの代用として使用できます。
 

■表示オブジェクトが、ステージから消えたか調べる


表示オブジェクトが、ステージから消えたか調べるには、Event.REMOVED_FROM_STAGE イベントを使用します。
 
「ステージ」から「表示オブジェクト」までの、表示リストの繋がりが途切れたときに呼び出されます。
 
表示オブジェクトが、ステージから消えたか調べる

import flash.display.MovieClip;
import flash.events.Event;

// ムービークリップオブジェクトを作成
var mc0:MovieClip = new MovieClip();
var mc1:MovieClip = new MovieClip();
var mc2:MovieClip = new MovieClip();
var mc3:MovieClip = new MovieClip();
var mc4:MovieClip = new MovieClip();

// ムービークリップに名前をつける
mc0.name = "mc0";
mc1.name = "mc1";
mc2.name = "mc2";
mc3.name = "mc3";
mc4.name = "mc4";

// 表示リストに登録 (stage-mc0-mc1-mc2-mc3-mc4)
stage.addChild(mc0);
mc0.addChild(mc1);
mc1.addChild(mc2);
mc2.addChild(mc3);
mc3.addChild(mc4);

// 表示オブジェクトが、ステージから消えた瞬間に実行されるイベント
function RemovedFromStageFunc(e:Event):void{
	var current:MovieClip = e.currentTarget as MovieClip;

	trace("ステージから消えた表示オブジェクト:" + current.name);
}

// 関数を登録
mc0.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFromStageFunc);
mc1.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFromStageFunc);
mc2.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFromStageFunc);
mc3.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFromStageFunc);
mc4.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFromStageFunc);

// mc1 から mc2 を外す
mc1.removeChild(mc2);
 

■「自身の表示オブジェクト」か「自身の子である表示オブジェクト」が、表示リストから外れたか調べる


「自身の表示オブジェクト」か「自身の子である表示オブジェクト」が、表示リストから外れたか調べるには、Event.REMOVED イベントを使用します。
 
登録した関数の引数から得られる Event オブジェクトの target プロパティから、外れた表示オブジェクトが取得できます。
 
このイベントは、表示オブジェクトがステージから消えたからといって、必ず呼び出されるとは限りません。
 
表示リストから外れた瞬間を調べる

import flash.display.MovieClip;
import flash.events.Event;

// ムービークリップオブジェクトを作成
var mc0:MovieClip = new MovieClip();
var mc1:MovieClip = new MovieClip();
var mc2:MovieClip = new MovieClip();
var mc3:MovieClip = new MovieClip();
var mc4:MovieClip = new MovieClip();

// ムービークリップに名前をつける
mc0.name = "mc0";
mc1.name = "mc1";
mc2.name = "mc2";
mc3.name = "mc3";
mc4.name = "mc4";

// 表示リストに登録 (stage-mc0-mc1-mc2-mc3-mc4)
stage.addChild(mc0);
mc0.addChild(mc1);
mc1.addChild(mc2);
mc2.addChild(mc3);
mc3.addChild(mc4);

//「自身の表示オブジェクト」か「自身の子である表示オブジェクト」が、表示リストから外れた瞬間に実行される関数
function RemovedFunc(e:Event):void{
	var current:MovieClip = e.currentTarget as MovieClip;
	var target:MovieClip = e.target as MovieClip;
	
	trace("表示リストが外れた ---");
	trace(" イベントが発生した表示オブジェクト:" + current.name);
	trace(" 表示リストから外れた表示オブジェクト:" + target.name);
}

// 関数を登録
mc0.addEventListener(Event.REMOVED,RemovedFunc);
mc1.addEventListener(Event.REMOVED,RemovedFunc);
mc2.addEventListener(Event.REMOVED,RemovedFunc);
mc3.addEventListener(Event.REMOVED,RemovedFunc);
mc4.addEventListener(Event.REMOVED,RemovedFunc);

// mc2 から mc3 を外す
mc2.removeChild(mc3);
 

 
 

表示オブジェクトとステージとで座標変換する

 
 


■座標系の名称について


任意の表示オブジェクトの座標系を、ローカル座標系とします。
 
ステージの座標系を、グローバル座標系とします。
 
 

■任意の表示オブジェクトの座標系から、ステージの座標系に変換する(座標変換)


ローカル座標系にある座標を、グローバル座標系に変換するには localToGlobal() メソッドを使用します。
 
任意の表示オブジェクトから呼び出します。
 
DisplayObject.localToGlobal ( ローカル座標 ) :Point
第01引数 Pointローカル座標を指定
戻り値 Point変換後のグローバル座標
 
スプライト上のローカル座標を、グローバル座標系に変換する

import flash.display.Sprite;
import flash.geom.Point;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトを生成
var sprite:Sprite = new Sprite();

// 適当に姿勢を変更
sprite.x = 40;
sprite.y = 90;
sprite.rotation = -30;

// ステージに配置
stage.addChild(sprite);


// ------------------------------------------------------------
// 座標変換
// ------------------------------------------------------------
// ローカル座標を用意
var pos_local : Point = new Point(10,20);

// スプライトのローカル座標からグローバル座標に変換
var pos_global : Point = sprite.localToGlobal(pos_local);

// 出力テスト
trace("x : " + pos_global.x + " y : " + pos_global.y);
 

■任意の表示オブジェクトの座標系から、ステージの座標系に変換する(ベクトルの変換)


ローカル座標系にあるベクトルを、グローバル座標系に変換するには、Matrix クラスを使って計算します。
 
任意の表示オブジェクトの、グローバル行列を取得するには、transform.concatenatedMatrix プロパティを使用します。
 
座標を変換するには、Matrixクラスの transformPoint() メソッドを使用します。
 
ベクトルを変換するには、Matrixクラスの deltaTransformPoint() メソッドを使用します。
 
スプライト上の座標とベクトルを、グローバル座標系へ変換する

import flash.display.Sprite;
import flash.geom.Point;
import flash.geom.Matrix;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトを生成
var sprite:Sprite = new Sprite();

// 適当に姿勢を変更
sprite.x = 40;
sprite.y = 90;
sprite.rotation = -30;

// ステージに配置
stage.addChild(sprite);


// ------------------------------------------------------------
// 座標変換
// ------------------------------------------------------------
// ローカル座標を用意
var pos_local : Point = new Point(10,20);

// ローカルベクトルを用意
var vec_local : Point = new Point(1,0);

// スプライトのグローバル行列を取得
var mtx_global : Matrix = sprite.transform.concatenatedMatrix;

// スプライト上のローカル座標をグローバル座標に変換
var pos_global : Point = mtx_global.transformPoint(pos_local);

// スプライト上のローカルベクトルをグローバルベクトルに変換
var vec_global : Point = mtx_global.deltaTransformPoint(vec_local);

// 出力テスト
trace("pos x:" + pos_global.x + " y:" + pos_global.y);
trace("vec x:" + vec_global.x + " y:" + vec_global.y);
 

■ステージの座標系から、任意の表示オブジェクトの座標系に変換する(座標の変換)


グローバル座標系にある座標を、ローカル座標系に変換するには globalToLocal() メソッドを使用します。
 
任意の表示オブジェクトから呼び出します。
 
DisplayObject.globalToLocal ( グローバル座標 ) :Point
第01引数 Pointグローバル座標を指定
戻り値 Point変換後のローカル座標
 
ステージ上のグローバル座標を、スプライト上のローカル座標系に変換する

import flash.display.Sprite;
import flash.geom.Point;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトを生成
var sprite:Sprite = new Sprite();

// 適当に姿勢を変更
sprite.x = 40;
sprite.y = 90;
sprite.rotation = -30;

// ステージに配置
stage.addChild(sprite);


// ------------------------------------------------------------
// 座標変換
// ------------------------------------------------------------
// グローバル座標を用意
var pos_global : Point = new Point(10,20);

// ステージ上のグローバル座標からスプライト上のローカル座標に変換
var pos_local : Point = sprite.globalToLocal(pos_global);

// 出力テスト
trace("x : " + pos_local.x + " y : " + pos_local.y);
 

■ステージの座標系から、任意の表示オブジェクトの座標系に変換する(ベクトルの変換)


グローバル座標系にあるベクトルを、ローカル座標系に変換するには、Matrix クラスを使って計算します。
 
任意の表示オブジェクトの、グローバル行列を取得するには、transform.concatenatedMatrix プロパティを使用します。
 
逆行列変換するには、Matrixクラスの invert() メソッドを使用します。
 
座標を変換するには、Matrixクラスの transformPoint() メソッドを使用します。
 
ベクトルを変換するには、Matrixクラスの deltaTransformPoint() メソッドを使用します。
 
ステージ上の座標とベクトルを、スプライトのローカル座標系へ変換する

import flash.display.Sprite;
import flash.geom.Point;
import flash.geom.Matrix;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトを生成
var sprite:Sprite = new Sprite();

// 適当に姿勢を変更
sprite.x = 40;
sprite.y = 90;
sprite.rotation = -30;

// ステージに配置
stage.addChild(sprite);


// ------------------------------------------------------------
// 座標変換
// ------------------------------------------------------------
// グローバル座標を用意
var pos_global : Point = new Point(10,20);

// グローバルベクトルを用意
var vec_global : Point = new Point(1,0);

// スプライトのグローバル行列を取得
var mtx : Matrix = sprite.transform.concatenatedMatrix;

// グローバル行列を逆行列に変換する
mtx.invert();

// グローバル座標をスプライト上のローカル座標に変換
var pos_local : Point = mtx.transformPoint(pos_global);

// グローバルベクトルをスプライト上のローカルベクトルに変換
var vec_local : Point = mtx.deltaTransformPoint(vec_global);

// 出力テスト
trace("pos x:" + pos_local.x + " y:" + pos_local.y);
trace("vec x:" + vec_local.x + " y:" + vec_local.y);
 

 
 

表示オブジェクトとの当たり判定を調べる

 
 


■表示オブジェクトと座標との当たり判定を調べる

 

サンプルをダウンロード
 
任意の表示オブジェクトと座標との当たり判定を調べるには、hitTestPoint() メソッドを使用します。
 
任意の表示オブジェクトから呼び出します。
 
DisplayObject.hitTestPoint ( x 座標 , y 座標 , 形状通りに当たり判定を調べるか? ) :Boolean
第01引数 Number x 座標
第02引数 Number y 座標
第03引数 Booleantrue で表示オブジェクトの形状通りに当たり判定を調べる。false で矩形として当たり判定を調べる。
戻り値 Boolean当たっていれば true 当たっていなければ false
 
■第03引数 形状通りの当たり判定を調べるか?

true を指定すると、形状通りの当たり判定を調べます。
 
false を指定すると、矩形として当たり判定を調べます。
 
true false
 
使用例です。
 
スプライトとマウス座標とで当たり判定を調べる

import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;

// ------------------------------------------------------------
// スプライト
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite:Sprite = new Sprite();

// スプライトの設定
sprite.x = 200;
sprite.y = 200;

// 円を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawCircle (0,0,50);

// ステージの表示リストの最後尾に登録する
stage.addChild(sprite);


// ------------------------------------------------------------
// マウスカーソルが移動したときに呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(MouseEvent.MOUSE_MOVE, function (e:MouseEvent):void{

	// スプライトとマウスカーソルの座標とで当たり判定を調べる
	var check:Boolean = sprite.hitTestPoint(stage.mouseX,stage.mouseY,true);

	if(check){
		trace("当たりあり");
	}else{
		trace("当たりなし");
	}

});
 

■表示オブジェクト同士の当たり判定を調べる

 

サンプルをダウンロード
 
表示オブジェクト同士の当たり判定を調べるには、hitTestObject() メソッドを使用します。
 
「1つ目の表示オブジェクト」から呼び出します。
 
引数に、「2つ目の表示オブジェクト」を指定します。
 
DisplayObject.hitTestObject ( 表示オブジェクト ) :Boolean
第01引数 DisplayObject「2つ目の表示オブジェクト」を指定
戻り値 Boolean当たっていれば true 当たっていなければ false
 
表示オブジェクト同士の当たり判定は、描画矩形での判定となります。
 
 
使用例です。
 
スプライトAとスプライトBとで当たり判定を調べる

import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;

var g:Graphics;

// ------------------------------------------------------------
// スプライトA
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite_a:Sprite = new Sprite();

// スプライトの設定
sprite_a.x = 200;
sprite_a.y = 200;

// 円を描画
g = sprite_a.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawCircle (0,0,50);

// ステージの表示リストの最後尾に登録する
stage.addChild(sprite_a);


// ------------------------------------------------------------
// スプライトB
// ------------------------------------------------------------
// スプライトオブジェクトを作成
var sprite_b:Sprite = new Sprite();

// 矩形を描画
g = sprite_b.graphics;
g.lineStyle (5, 0x0000AA, 1.0);
g.beginFill (0x4444FF, 1.0);
g.drawRect (-50,-50,100,100);

// ステージの表示リストの最後尾に登録する
stage.addChild(sprite_b);


// ------------------------------------------------------------
// マウスカーソルが移動したときに呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(MouseEvent.MOUSE_MOVE, function (e:MouseEvent):void{

	// スプライトBを移動
	sprite_b.x = stage.mouseX;
	sprite_b.y = stage.mouseY;

	// スプライトAとスプライトBとの当たり判定を調べる
	var check:Boolean = sprite_a.hitTestObject(sprite_b);

	if(check){
		trace("当たりあり");
	}else{
		trace("当たりなし");
	}

});