DisplayObject クラスについて
ディスプレイオブジェクトとは？
■ DisplayObject とは？
DisplayObject は、Flash画面上に配置できるインスタンスの基となるクラスです。
スプライト、ムービークリップ、ボタン、テキストフィールドなどの種類があります。
DisplayObject クラスからは、座標、角度、拡大縮小などの姿勢の変更を行う事ができます。
また、色を付けたり、ブレンドやフィルタを適用することもできます。
■ DisplayObject クラスの派生について
ディスプレイオブジェクトは以下のクラスから派生しています。ここで解説してない分はリンク先に解説がありますので合わせてご覧下さい。
| Object |
| ↓派生 |
| EventDispatcher |
| ↓派生 |
| DisplayObject |
関連のあるクラス(主なクラスを抜粋)
インスタンスを移動する
サンプルをダウンロード
■インスタンスを移動する
インスタンスを移動するには、
x プロパティと y プロパティを使用します。
x を変更すると x 座標が変化します。
y を変更すると y 座標が変化します。
設定例です。
インスタンス mc の位置を 座標(100,200) に変更する
mc.x = 100;
mc.y = 200;
インスタンス mc の位置を少しずつ右下に移動する
mc.addEventListener(Event.ENTER_FRAME,function(event){
mc.x += 1;
mc.y += 1;
});
インスタンスを回転する
サンプルをダウンロード
■インスタンスを回転する
インスタンスを回転するには、rotation プロパティを使用します。
一周を 360 度とした、角度の値を指定します。
設定例です。
インスタンス mc の角度を 50 に変更する
mc.rotation = 50;
インスタンス mc を時計回りに少しずつ回転する
mc.addEventListener(Event.ENTER_FRAME,function(event){
mc.rotation += 1;
});
インスタンスを拡大縮小する
サンプルをダウンロード
■インスタンスをパーセント指定で拡大縮小する
インスタンスをパーセントで指定して拡大縮小するには、
scaleX プロパティ と scaleY プロパティ を使用します。
scaleX を変更すると x 方向の拡大率が変化します。
scaleY を変更すると y 方向の拡大率が変化します。
単位は 1.0 で 100%表示になります。
設定例です。
インスタンス mc を x方向に 80% y 方向に120% 拡大表示する
mc.scaleX = 0.8;
mc.scaleY = 1.2;
インスタンス mc を少しずつ拡大する
mc.addEventListener(Event.ENTER_FRAME,function(event){
mc.scaleX += 0.01;
mc.scaleY += 0.01;
});
■インスタンスをピクセル指定で拡大縮小する
インスタンスをピクセルで指定して拡大縮小するには、
width プロパティ と height プロパティ を使用します。
width を変更すると x 方向のサイズがピクセル値で変化します。
height を変更すると y 方向のサイズがピクセル値で変化します。
単位はピクセルです。
現在描画されているグラフィックのサイズによって拡大縮小値が決定します。
グラフィックが存在しない状態で、あらかじめ幅と高さを設定しておく事はできません。
また、マイナス値を設定することはできません。
設定例です。
インスタンス mc を x方向に 120 y 方向に240 拡大表示する
mc.width = 120;
mc.height = 240;
インスタンス mc を１ピクセルずつ拡大する
mc.addEventListener(Event.ENTER_FRAME,function(event){
mc.width += 1;
mc.height += 1;
});
rotation が指定されている場合、『角度適用後の形状』を元に全体がスケーリングされます。幅か高さのどちらかを変更した場合、もう片方も自動的に補正されてしまう事になります。
『角度適用前の形状』を元に幅と高さを変更したい場合は、いったん rotation を 0 にするとよいでしょう。
『角度適用前の形状』を元に幅と高さを変更したい場合は、いったん rotation を 0 にするとよいでしょう。
幅と高さを指定してから回転する
mc.rotation = 0; // いったん角度を 0 にしておく
mc.width = 50;
mc.height = 150;
mc.rotation = 30; // 幅と高さを設定した後で角度を設定
インスタンスを反転する
サンプルをダウンロード
■インスタンスを反転する
インスタンスを反転して表示するには、
拡大縮小用の scaleX プロパティ と scaleY プロパティ にマイナスの値を設定します。
インスタンス mc を x 方向に反転する
mc.scaleX *= -1;
インスタンス mc を y 方向に反転する
mc.scaleY *= -1;
■ピクセル指定してインスタンスを反転する
まず、正の値で、width ,height を設定します。
これで、拡大率 scaleX ,scaleY も自動的に変化するので、
反転したい方向に -1.0 を乗算します。
インスタンス mc を横に100ピクセルサイズで反転して表示する
mc.width = 100;
mc.scaleX *= -1;
インスタンスを半透明にする
サンプルをダウンロード
■インスタンスを半透明にする
インスタンスを半透明にするには、
alpha プロパティ を使用します。
0.0 ～ 1.0 までの値を指定します。
設定例です。
インスタンス mc の透明度を 50 に変更する
mc.alpha = 0.5;
インスタンス mc を少しずつ透明にする
mc.addEventListener(Event.ENTER_FRAME,function(event){
mc.alpha *= 0.98;
});
インスタンスにマスクをかける
サンプルをダウンロード
■インスタンスにマスクをかける
インスタンスにマスクをかけるには、
mask プロパティを使用します。
mask プロパティにムービークリップなどの他のインスタンスをセットします。セットしたインスタンスの形状をソースとしてマスクがかかります。
| "mc" | "source" | mc.mask = source; | ||
| ＋ |
| → |
|
| マスクする絵 | マスク範囲用の絵 | 合成後の絵 |
ただし、線データが含まれる場合正常にマスクがかからないようです。マスクのソースは面データだけで構成しましょう。
設定例です。
インスタンス mc に インスタンス source の形状でマスクをかける
mc.mask = source;
インスタンスに名前をつける
サンプルをダウンロード
■インスタンスに名前を付ける
インスタンスに名前を付けるには、name プロパティに文字列をセットします。静的に配置したインスタンスの名前を変更する事はできません。
すでに存在する名前を付けると、アクセスできなくなる事があるのでユニーク（唯一）な名前を付けましょう。
スプライトのインスタンス名を instance にする
var sprite : Sprite = new Sprite();
sprite.name = "instance";
インスタンスをビットマップキャッシュ化する
サンプルをダウンロード
■ビットマップキャッシュとは？
通常、 Flash 画面上に表示されているものは、毎サイクル「描画の計算」が行われます。
ビットマップキャッシュを使用すると、描画された結果がルメモリ上に退避されるようになります。
次のサイクルで、グラフィックに変化が無く再描画の必要が無い場合、「描画の計算」は行われずキャッシュに退避させたデータを使って描画されます。
よって、ベクターなどのグラフィックであれば、高速に動作するようになります。
では、「再描画の必要が無い」条件とはどのようなケースでしょうか。
■再描画される条件
再描画の必要がある条件は、前回のサイクルから絵が変わったり、回転したり、スケールが変化したり、色が変わったり、ブレンド、フィルタが変化した場合です。
再描画の必要が無い条件は、前回のサイクルから座標しか変化していないときです。
「再描画の必要が無い」条件は移動のみなので限定された場面になりそうですが、もし頻繁に再描画される状態にあるにもかかわらずビットマップキャッシュを使ってしまうとどうなるのでしょうか。
■ビットマップキャッシュの注意点
ビットマップキャッシュを使用している状態で、頻繁に再描画されると
「描画計算」と「描画結果をメモリに退避する」という２つの処理が常に行われます。
ビットマップキャッシュを使っていない時より処理が増える事になります。さらにメモリも無駄にに消費します。
ベクターグラフィックで絵が頻繁に変わらず、座標しか変化しない場合のみ、ビットマップキャッシュを使用するといいでしょう。
それ以外のケースで使用すると、通常より余計に重くなる恐れがあります。
■ビットマップキャッシュが使用できる条件
FlashPlayer9 以前は、幅と高さが 2880 ピクセルまでのグラフィックに適用できます
FlashPlayer10 以降は、幅と高さが 8192 ピクセルまでのグラフィックに適用できますが、総ピクセル数は 16777216 までとなります。(幅が 8192 なら高さは 2048 まで)
ビットマップキャッシュ化したいグラフィックのサイズが、この範囲を超えてしまうとビットマップキャッシュが動作しません。
■インスタンスをビットマップキャッシュ化する
インスタンスをビットマップキャッシュ化するには、各インスタンスのプロパティにある cacheAsBitmap をtrue に変更します。
ブレンドやフィルタを適用している場合は自動的に true になります。
インスタンス mc をビットマップキャッシュ化する
mc.cacheAsBitmap = true
■抜き部分に色を付ける
さらに、インスタンスの描画矩形の抜きに当たる透明な部分に色をつければ、アルファブレンディング処理が省かれ、ほんの少し高速に描画する事ができます。
インスタンスの抜きに色を付けるには、各インスタンスのプロパティにある opaqueBackground に RGB カラーを指定します。
この矩形を表示することにより描画の面積を可視化する事ができます。この面積をいかに減らすかが、描画負荷の軽減を知るポイントになります。
インスタンス mc の抜き部分に色(FF0000)を付ける
mc.opaqueBackground = 0xFF0000;
インスタンスにブレンドを適用する
サンプルをダウンロード
■インスタンスにブレンドを適用する
インスタンスにブレンドを適用するには、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" | ハードライト |
設定例です。
インスタンス mc を加算でブレンドする
mc.blendMode = BlendMode.ADD;
mc.blendMode = "add";
インスタンス mc を減算でブレンドする
mc.blendMode = BlendMode.SUBTRACT;
mc.blendMode = "subtract";
■ブレンドの種類
■標準 "normal"
ブレンドを適用していない状態です。通常の表示です。
| 素材 | ⇒ | 結果 |
 |
|
■レイヤー "layer"
複数のレイヤーを持つムービークリップに半透明を適用すると、すべてのレイヤーにそれぞれ半透明が適用されるので重なる部分が透けて見えてしまいます。
| 素材 | ⇒ | 半透明を適用 |
|
 |
ブレンドで「レイヤー」を適用すると、ムービークリップの描画結果に対して半透明がかかるようになります。重なる部分が透ける事はありません。
| 素材 | ⇒ | 半透明を適用 |
|
 |
■乗算 "multiply"
シャドウや深度効果に使用します。
ブレンドの各成分は「0 から 255 まで」ありますが、この値を「0.0 から 1.0 まで」の小数値と考えます。
背景の成分と小数値を乗算して結果を出力します。
ブレンドの値が、白であるほど結果に影響はありません。黒であるほど結果が黒に近づきます。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
 |
 |
 |
■スクリーン "screen"
ハイライトなどに使用します。
乗算は黒に近づける効果がありますが、スクリーンは白に近づける効果があります。
ブレンドの値が、黒であるほど結果に影響はありません。白であるほど結果が白に近づきます。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■比較（明） "lighten"
背景の値とブレンドの値を比較して、大きい方を採用して出力します。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■比較（暗） "darken"
背景の値とブレンドの値を比較して、小さい方を採用して出力します。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■差の絶対値 "difference"
背景のピクセル値とブレンドのピクセル値を比較します。
大きい値から、小さい値を減算して結果を出力します。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
 |
|
 |
■加算 "add"
光源の効果に利用します。
背景の値とブレンドの値を加算して出力します。
計算した結果 255 より大きくなる場合は、255 となります。
ブレンドの値が、黒であるほど結果に影響はありません。白であるほど結果が白に近づきます。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■減算 "subtract"
背景の値とブレンドの値を減算して出力します。
計算した結果 0 より小さくなる場合は、0 となります。
ブレンドの値が、黒であるほど結果に影響はありません。白であるほど結果が黒に近づきます。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■反転 "invert"
背景を反転して結果を出力します。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■アルファ "alpha"
このブレンドを利用するには、親のムービークリップのブレンドモードが "layer" (レイヤー) である必要があります。
背景の値に、ブレンドのアルファ成分値を適用して出力します。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■消去 "erase"
このブレンドを利用するには、親のムービークリップのブレンドモードが "layer" (レイヤー) である必要があります。
背景の値に、ブレンドの反転したアルファ成分値を適用して出力します。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■オーバーレイ "overlay"
背景の値を調べます。
背景の値が 127 以下であれば、乗算として動作します。
背景の値が 129 以上であれば、スクリーンとして動作します。
背景の値が、128 であるほど結果に影響はありません。黒であるほど結果が黒に近づき、白であるほど結果が白に近づきます。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
■ハードライト "hardlight"
ブレンドの値を調べます。
ブレンドの値が 127 以下であれば、乗算として動作します。
ブレンドの値が 129 以上であれば、スクリーンとして動作します。
ブレンドの値が、128 であるほど結果に影響はありません。黒であるほど結果が黒に近づき、白であるほど結果が白に近づきます。
| 背景 | ＋ | ブレンド | ⇒ | 結果 |
|
|
 |
インスタンスにフィルタを適用する
サンプルをダウンロード
■インスタンスにフィルタを適用する
インスタンスにフィルタを適用するには、filters プロパティを使用します。
filters プロパティにフィルタオブジェクトを指定する事になりますが、そのまま渡すのではなく配列に格納してからセットします。
フィルタオブジェクトを配列に格納してまとめて渡すことにより複数のフィルタを同時に指定できます。
フィルタの種類です。
| クラス名 | 効果 |
| BlurFilter | ブラー |
| BevelFilter | べベル |
| GradientBevelFilter | グラデーションべベル |
| GlowFilter | グロー |
| GradientGlowFilter | グラデーショングロー |
| DropShadowFilter | ドロップシャドウ |
| ColorMatrixFilter | カラーマトリックス |
| ConvolutionFilter | コンボリューション |
| DisplacementMapFilter | ディスプレイスメントマップ |
設定例です。
インスタンス mc にブラーを適用する
var blur : BlurFilter = new BlurFilter();
mc.filters = [blur];
インスタンス mc にブラーとドロップシャドウを適用する
var blur : BlurFilter = new BlurFilter();
var drop : DropShadowFilter = new DropShadowFilter();
mc.filters = [blur,drop];
インスタンスにカラーを適用する
サンプルをダウンロード
■カラー変換用のパラメータを設定する
まず ColorTransform クラスをインスタンス化して、カラートランスフォームオブジェクトを作りパラメータを設定します。
カラートランスフォームを作成する
var color : ColorTransform = new ColorTransform();
color.redMultiplier = 1;
color.blueMultiplier = 0;
color.greenMultiplier = 0;
color.alphaMultiplier = 1;
color.redOffset = 0;
color.greenOffset = 0;
color.blueOffset = 0;
color.alphaOffset = 0;
引数で指定してカラートランスフォームを作成する
var color : ColorTransform = new ColorTransform(1,0,0,1,0,0,0,0);
プロパティは以下の通りです。
| プロパティ名 | 効果 | プロパティ名 | 効果 |
| redMultiplier | 乗算赤 | redOffset | 加算赤 |
| blueMultiplier | 乗算緑 | greenOffset | 加算緑 |
| greenMultiplier | 乗算青 | blueOffset | 加算青 |
| alphaMultiplier | 乗算透過 | alphaOffset | 加算透過 |
カラートランスフォームは、以下の変換式を経て描画されます。すべてのピクセルに対してこの変換が適用されます。
カラートランスフォームの変換式
新しい赤色 = (現在の赤色 * redMultiplier) + redOffset; 新しい緑色 = (現在の緑色 * greenMultiplier) + greenOffset; 新しい青色 = (現在の青色 * blueMultiplier) + blueOffset; 新しい透過色 = (現在の透過色 * alphaMultiplier) + alphaOffset;
■インスタンスにカラーを適用する
インスタンスにカラーを適用するには、transform.colorTransform プロパティにカラートランスフォームオブジェクトをセットします。
インスタンス mc にカラートランスフォームを適用する
var color : ColorTransform = new ColorTransform(1,0,0,1,0,0,0,0);
mc.transform.colorTransform = color;
インスタンスに行列を適用する
サンプルをダウンロード
■変換用のパラメータを設定する
行列を使うとインスタンスの、移動、回転、スケーリング、せん断等の姿勢制御を行う事ができます。
まず、Matrixクラスをインスタンス化して行列を作成します。
正規化された行列を作成する
var m : Matrix = new Matrix(1,0,0,1,0,0);
Matrix のメソッドを順番に呼び出して姿勢を設定します。
縦方向に80% 横方向に120%、30 度回転し、座標(200,50)に移動する行列を作成する
var m : Matrix = new Matrix();
m.identity(); // 正規化
m.scale(0.8,1.2); // 行列 *= スケーリング
m.rotate(Math.PI / 180 * 30); // 行列 *= 回転
m.translate(200,50); // 行列 *= 平行移動
■インスタンスに行列を適用する
インスタンスに行列を適用するには、transform.matrix プロパティ にマトリックスオブジェクトをセットします。
プロパティからマトリックスオブジェクトの中身を、直接書き換えても反映されません。必ず代入して渡します。
インスタンス mc に行列を適用する
var m : Matrix = new Matrix();
m.identity(); // 正規化
m.scale(0.8,1.2); // 行列 *= スケーリング
m.rotate(Math.PI / 180 * 30); // 行列 *= 回転
m.translate(200,50); // 行列 *= 平行移動
mc.transform.matrix = m;
インスタンスが表示リストから外れたか調べる
■インスタンスが不要になる瞬間を調べる
AS3.0のクラスには、デストラクタがない為、インスタンスが破棄される瞬間を調べることはできません。
しかし DisplayObject インスタンスのような表示を行うインスタンスは、
大抵の場合、画面から表示が消えた時に不要となります。
よって、インスタンスが表示リストから外れたかを取得する事ができれば、インスタンスが不要になる瞬間を調べることができそうです。
■自分が親の表示リスからが外れた瞬間を調べる
Event.REMOVED_FROM_STAGE イベントを使用すると、自分が表示リストから外れた瞬間を調べることができます。
このイベントは、自分が画面に表示されなくなった時に呼び出されます。
「親の親」が表示リストから外れたとしても、「親の親の親の親」が表示リストから外れたとしても呼び出されます。
親との表示リストが外れた瞬間を調べる
// ムービークリップを作成
var mc0 = new MovieClip();
var mc1 = new MovieClip();
var mc2 = new MovieClip();
var mc3 = new MovieClip();
var mc4 = 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){
trace("表示リストが外れた:" + e.currentTarget.name);
}
mc0.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFunc);
mc1.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFunc);
mc2.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFunc);
mc3.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFunc);
mc4.addEventListener(Event.REMOVED_FROM_STAGE,RemovedFunc);
// mc1 から mc2 を外す
mc1.removeChild(mc2);
■自分か自分の子のインスタンスが表示リスからが外れた瞬間を調べる
Event.REMOVED イベントを使用すると、自分か、自分の子のインスタンスが表示リストから外れた瞬間を調べることができます。
引数から、Event.currentTarget プロパティから自分のインスタンス、Event.target プロパティから外れる対象のインスタンスを取得することができます。
このイベントは、「親の親の親の親」が表示リストから外れていたとしても、「自分の親」との表示リストが外れていなければ呼び出されません。
自分が画面から表示されなくなったらといって必ず呼び出されるわけではありません。
表示リストが外れた瞬間を調べる
// ムービークリップを作成
var mc0 = new MovieClip();
var mc1 = new MovieClip();
var mc2 = new MovieClip();
var mc3 = new MovieClip();
var mc4 = 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){
trace("表示リストが外れた ---");
trace(" 自分:" + e.currentTarget.name);
trace(" ターゲット:" + e.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);
問答収集
