DisplayObject クラスについて
ディスプレイオブジェクトとは?
■ディスプレイオブジェクトとは?
■表示オブジェクトとは?
ステージ上に配置して表示できるオブジェクトを、表示オブジェクトといいます。
■表示オブジェクトとなる条件
DisplayObject クラスから派生しているクラスであれば、表示オブジェクトとなります。
■表示オブジェクトの種類
以下のクラスは、表示オブジェクトの一種です。(一部抜粋)
■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;
■表示オブジェクトを少しずつ移動する
表示オブジェクトの x と y プロパティを、少しだけ増減させます。
この処理を毎フレーム実行すると、表示オブジェクトを少しずつ移動することができます。
スプライトを少しずつ右下に移動する
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" | 標準 |
BlendMode. | "layer" | レイヤー |
BlendMode. | "multiply" | 乗算 |
BlendMode. | "screen" | スクリーン |
BlendMode. | "lighten" | 比較(明) |
BlendMode. | "darken" | 比較(暗) |
BlendMode. | "difference" | 差の絶対値 |
BlendMode. | "add" | 加算 |
BlendMode. | "subtract" | 減算 |
BlendMode. | "invert" | 反転 |
BlendMode. | "alpha" | アルファ |
BlendMode. | "erase" | 消去 |
BlendMode. | "overlay" | オーバーレイ |
BlendMode. | "hardlight" | ハードライト |
BlendMode. | "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引数(略可) | Number | redMultiplier プロパティに相当 |
第02引数(略可) | Number | greenMultiplier プロパティに相当 |
第03引数(略可) | Number | blueMultiplier プロパティに相当 |
第04引数(略可) | Number | alphaMultiplier プロパティに相当 |
第05引数(略可) | Number | redOffset プロパティに相当 |
第06引数(略可) | Number | greenOffset プロパティに相当 |
第07引数(略可) | Number | blueOffset プロパティに相当 |
第08引数(略可) | Number | alphaOffset プロパティに相当 |
戻り値 | ColorTransform | ColorTransform オブジェクト |
カラートランスフォームオブジェクトを作成する
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引数 | Boolean | true で表示オブジェクトの形状通りに当たり判定を調べる。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("当たりなし");
}
});