ムービークリップについて
ムービークリップについて
■MovieClip クラスについて
MovieClip クラスは、Flash に配置して表示できるオブジェクトの1つです。
Flash アニメーションを再生する事ができます。
多くの機能が MovieClip クラスに実装されています。
このページでは、ムービークリップの生成と、姿勢制御について解説しています。
■MovieClip クラスを継承したカスタムクラスの作成方法について
■プロトタイプベース(Flash 6 以降、ActionScript 1.0)
任意のシンボルに、コンストラクタ関数を割り当てるには、Object.registerClass() メソッドを使用します。
詳しくは、こちらで解説しています。
■カスタムクラス(Flash 7 以降、ActionScript 2.0)
MovieClip クラスを継承した、カスタムクラスを用意します。
カスタムクラス "MyClass" の作成例です。
MyClass.as という名前のクラスファイルを用意する
// ------------------------------------------------------------
// MyClass クラス
// ------------------------------------------------------------
class MyClass extends MovieClip {
// ------------------------------------------------------------
// プライベート変数
// ------------------------------------------------------------
private var value:Number;
// ------------------------------------------------------------
// コンストラクタ
// ------------------------------------------------------------
public function MyClass() {
trace("コンストラクタが実行された");
value = 100;
}
// ------------------------------------------------------------
// 公開メソッド
// ------------------------------------------------------------
public function getValue() :Number {
return value;
}
public function setValue(v:Number) :Void {
value = v;
}
}
パブリッシュ設定の、ActionScript 設定から、クラスファイルへのパスを追加します。
ライブラリパネルから、任意のシンボルを選択します。
リンケージプロパティの、『AS 2.0 クラス』から、"MyClass" を指定します。
ムービークリップのプロパティについて
■MovieClip クラスのプロパティ一覧
姿勢制御関連
プロパティ名 | 型 | 説明 |
_x | Number | x 座標(水平方向)の位置 |
_y | Number | y 座標(垂直方向)の位置 |
_rotation | Number | 0 から 360 までの角度 |
_xscale | Number | x 軸方向(水平方向)の拡大率 (100 で等倍) |
_yscale | Number | y 軸方向(垂直方向)の拡大率 (100 で等倍) |
_width | Number | 水平方向の大きさ(ピクセル単位) |
_height | Number | 垂直方向の大きさ(ピクセル単位) |
_alpha | Number | 0 から 100 までの透明度 (100 で通常表示) |
_visible | Boolean | 可視表示の設定 |
transform | Transform | アフィン行列やカラー行列などの変換機能 |
描画関連
プロパティ名 | 型 | 説明 |
_quality | String | 画質を設定する(実際に変化するのはグローバルの画質) |
cacheAsBitmap | Boolean | ビットマップキャッシュの有無を設定。 |
opaqueBackground | Number | 抜き部分に色を付けたい場合、RGB カラー (0xFFFFFF) を指定。 |
blendMode | Object | ブレンドモードを設定 |
filters | Array | フィルタを配列に格納して設定 |
scrollRect | Rectangle | 描画範囲を限定したい場合、矩形を指定する。 |
scale9Grid | Rectangle | スライス9を有効にしたい場合、矩形を指定する。 |
forceSmoothing | Boolean | 自身に画像を読み込んだ場合、画像のスムージングの有無を設定。 |
タイムライン関連
プロパティ名 | 型 | 説明 |
_currentframe | Number | 現在のタイムラインの位置を取得する。(読み取り専用) |
_totalframes | Number | タイムラインの最大位置を取得する。(読み取り専用) |
読み込み関連
プロパティ名 | 型 | 説明 |
_framesloaded | Number | 再生可能な最大位置を取得する。(自身が読み込み途中である場合) |
_soundbuftime | Number | ストリーミングサウンド用のバッファ時間を設定する。(単位:秒) |
_url | String | 自身の swf ファイルの URL アドレスを取得する。(読み取り専用) |
ノード関連
プロパティ名 | 型 | 説明 |
_parent | Object | 自身から1つ上の親インスタンスを取得する。 |
_target | String | 自身の絶対位置を、スラッシュシンタックス表記で取得する。 |
_name | String | 自身のインスタンス名を設定する。 |
_lockroot | Boolean | 自身の子孫に対して、自身を _root(最上位)と解釈させるかの設定。 |
UI 関連
プロパティ名 | 型 | 説明 |
enabled | Boolean | 自身のインスタンスの有効無効を設定する |
_xmouse | Number | マウスカーソルの x 座標を取得する (自身のローカル座標系) |
_ymouse | Number | マウスカーソルの y 座標を取得する (自身のローカル座標系) |
trackAsMenu | Boolean | 外部からドラッグを開始して自身にドロップした場合でも、マウス関連のイベントを発火させたい場合 true を指定。 |
_droptarget | String | 自身がドラッグ中である場合、現在のマウス直下に存在するインスタンスをスラッシュシンタックス表記で取得する。 |
useHandCursor | Boolean | マウスオーバー時に、マウスカーソルをハンドに変更するかの設定。 |
hitArea | Object | 当たり判定を、自身ではなく別のインスタンスに変更したい場合に指定。 |
tabIndex | Number | 「自動タブ順」の順番を、数値で設定する。 |
tabEnabled | Boolean | 自身のインスタンスを、「自動タブ順」に含めるかの設定。 |
tabChildren | Boolean | 自身の子孫インスタンスを、「自動タブ順」に含めるかの設定。 |
_focusrect | Boolean | 自身にフォーカスが与えられた場合、黄色の矩形を描画するかの設定。 |
menu | ContextMenu | コンテキストメニューの設定。 |
ムービークリップを移動する
サンプルをダウンロード
■ムービークリップの位置を変更する
ムービークリップの位置を制御するには、以下のプロパティを使用します。
プロパティ名 | 型 | 説明 |
_x | Number | x 座標(水平方向)の位置。右方向が正。 |
_y | Number | y 座標(垂直方向)の位置。下方向が正。 |
ムービークリップ "mc" の座標を変更する
// 位置を設定する
mc._x = 100;
mc._y = 200;
■ムービークリップを少しずつ移動する
ムービークリップの _x と _y プロパティを、少しだけ増減させます。
この処理を毎フレーム実行すると、ムービークリップを少しずつ移動することができます。
ムービークリップを少しずつ右下に移動する
// ------------------------------------------------------------
// 初回に一度だけ実行されるイベント
// ------------------------------------------------------------
onClipEvent (load) {
_x = 100;
_y = 200;
}
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
onClipEvent (enterFrame) {
_x += 1;
_y += 1;
}
ムービークリップ "mc" を少しずつ右下に移動する (Flash 6 以降)
// ------------------------------------------------------------
// 空のムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 矩形を描画
// ------------------------------------------------------------
mc.lineStyle (5, 0xAA0000, 100);
mc.beginFill (0xFF4444, 100);
mc.moveTo ( -50 , -50 );
mc.lineTo ( -50 , 50 );
mc.lineTo ( 50 , 50 );
mc.lineTo ( 50 , -50 );
mc.endFill();
// ------------------------------------------------------------
// 初期化処理
// ------------------------------------------------------------
mc._x = 100;
mc._y = 200;
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
mc.onEnterFrame = function (){
this._x += 1;
this._y += 1;
};
ムービークリップを回転する
サンプルをダウンロード
■ムービークリップを回転する
ムービークリップを回転するには、_rotation プロパティを使用します。
0 から 360 までの数値(角度)を指定します。
それ以外の数値を指定すると、自動的に 0 ~ 360 の範囲に丸められます。
数値を増加させると、時計回りに回転します。
ムービークリップ "mc" の角度を変更する
// 角度を設定する
mc._rotation = 32;
■ムービークリップを少しずつ回転する
ムービークリップの _rotation プロパティを、少しだけ増減させます。
この処理を毎フレーム実行すると、ムービークリップを少しずつ回転することができます。
ムービークリップを少しずつ時計回りに回転する
// ------------------------------------------------------------
// 初回に一度だけ実行されるイベント
// ------------------------------------------------------------
onClipEvent (load) {
_rotation = 15;
}
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
onClipEvent (enterFrame) {
_rotation += 1;
}
ムービークリップ "mc" を少しずつ反時計回りに回転する (Flash 6 以降)
// ------------------------------------------------------------
// 空のムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 矩形を描画
// ------------------------------------------------------------
mc.lineStyle (5, 0xAA0000, 100);
mc.beginFill (0xFF4444, 100);
mc.moveTo ( -50 , -50 );
mc.lineTo ( -50 , 50 );
mc.lineTo ( 50 , 50 );
mc.lineTo ( 50 , -50 );
mc.endFill();
// ------------------------------------------------------------
// 初期化処理
// ------------------------------------------------------------
mc._x = 200;
mc._y = 200;
mc._rotation = 15;
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
mc.onEnterFrame = function (){
this._rotation -= 1;
};
ムービークリップを拡大縮小する
サンプルをダウンロード
■拡大率を指定してスケーリングする
ムービークリップの拡大率を制御するには、以下のプロパティを使用します。
拡大率をパーセント値で指定します。100 で等倍となります。
プロパティ名 | 型 | 説明 |
_xscale | Number | x 軸方向(水平方向)の拡大率 (100 で等倍) |
_yscale | Number | y 軸方向(垂直方向)の拡大率 (100 で等倍) |
ムービークリップ "mc" の拡大率を変更する
mc._xscale = 50;
mc._yscale = 150;
■幅と高さをピクセル単位で指定する
ムービークリップの大きさを、ピクセル単位で変更するには、以下のプロパティを使用します。
マイナス値を指定することはできません。
ムービークリップ "mc" の幅と高さを変更する
mc._width = 50;
mc._height = 150;
■グラフィック要素が存在しない場合
このプロパティは、描画矩形のサイズを基準にしてスケールされます。
よって、グラフィック要素が存在しない場合、設定することができません。
■すでに角度が設定されている場合
ムービークリップに角度が設定されている場合、『角度適用後の描画矩形』が基準となります。
幅か高さのどちらかを変更した場合、もう片方も変化してしまいます。
『角度適用前の描画矩形』を基準として、幅と高さを変更したい場合は、いったん角度を 0 に戻す必要があります。
角度を 0 にしてから、幅と高さを設定する
// 角度を変数に残す
var rotate = mc._rotation;
// 角度を 0 に設定する
mc._rotation = 0;
// 幅と高さを設定する
mc._width = 50;
mc._height = 150;
// 角度を戻す
mc._rotation = rotate;
ムービークリップを反転する
サンプルをダウンロード
■拡大率にマイナスを指定して反転する
ムービークリップの拡大率にマイナス値を指定すると、ムービークリップが反転します。
ムービークリップの拡大率を制御するには、以下のプロパティを使用します。
100 で等倍となります。-100 で等倍の反転となります。
プロパティ名 | 型 | 説明 |
_xscale | Number | x 軸方向(水平方向)の拡大率 (100 で等倍) |
_yscale | Number | y 軸方向(垂直方向)の拡大率 (100 で等倍) |
ムービークリップ "mc" を水平方向に反転させる
mc._xscale = -100;
ムービークリップ "mc" を垂直方向に反転させる
mc._yscale = -100;
■ピクセル値指定でムービークリップを反転する
まず、正の値で、_width ,_height を設定します。
拡大率 _xscale ,_yscale も自動的に変化するので、そのまま -1.0 を乗算して符号を反転します。
ムービークリップ mc を水平方向に -100 ピクセルで表示する
mc._width = 100;
mc._xscale *= -1;
ムービークリップを半透明にする
サンプルをダウンロード
■ムービークリップの透明度を設定する
ムービークリップを半透明に設定するには、_alpha プロパティを使用します。
透明度をパーセント値で指定します。0 ~ 100 までの数値を指定します。
0 で完全に透明になり、100 で通常表示となります。
ムービークリップ "mc" の透明度を 50% に設定する
mc._alpha = 50;
■ムービークリップの可視表示を設定する
ムービークリップの可視表示を設定するには、_visible プロパティを使用します。
true を指定すると、「可視表示」となります。通常の状態です。
false を指定すると、「非表示」となります。
ムービークリップ "mc" を、非表示に設定する
mc._visible = false;
ムービークリップ "mc" を、可視表示に設定する
mc._visible = true;
ムービークリップにマスクを適用する(Flash 6 以降)
サンプルをダウンロード
■ムービークリップにマスクをかける
ムービークリップにマスクをかけるには、setMask() メソッドを使用します。
MovieClip.setMask ( インスタンスの参照 ) :Void
第01引数 | Object | マスクの形状となるインスタンスの参照か、インスタンス名を指定します。 |
戻り値 | Void | なし |
■第01引数 マスクの形状ソース
引数に、マスクの形状となるグラフィックを持つ、インスタンスを指定します。
インスタンスの参照や、インスタンス名を指定できます。
マスク用のグラフィックは、面(塗り)データだけで構成します。
線データが含まれていると、正常にマスクがかかりません。
"mc" | "source" | mc.setMask(source); | |||
+ | → | ||||
マスクする絵 | マスク範囲用の絵 | 合成後の絵 |
■使用例
ムービークリップ "mc" に ムービークリップ "source" の形状でマスクをかける
mc.setMask( source );
ムービークリップ "mc_a" に ムービークリップ "mc_b" の形状でマスクをかける (Flash 6 以降)
// ------------------------------------------------------------
// ムービークリップAを作成
// ------------------------------------------------------------
var mc_a = _root.createEmptyMovieClip("new_mc_a" , 0);
// 矩形を描画
mc_a.lineStyle (5, 0xAA0000, 100);
mc_a.beginFill (0xFF4444, 100);
mc_a.moveTo ( -50 , -50 );
mc_a.lineTo ( -50 , 50 );
mc_a.lineTo ( 50 , 50 );
mc_a.lineTo ( 50 , -50 );
mc_a.endFill();
// ------------------------------------------------------------
// ムービークリップBを作成
// ------------------------------------------------------------
var mc_b = _root.createEmptyMovieClip("new_mc_b" , 1);
// 矩形を描画
mc_b.beginFill (0x000000, 100);
mc_b.moveTo ( -50 , -50 );
mc_b.lineTo ( -50 , 50 );
mc_b.lineTo ( 50 , 50 );
mc_b.lineTo ( 50 , -50 );
mc_b.endFill();
// ------------------------------------------------------------
// マスクを設定する
// ------------------------------------------------------------
mc_a.setMask( mc_b );
// ------------------------------------------------------------
// 初期化
// ------------------------------------------------------------
var rot = 0;
mc_a._x = 100;
mc_a._y = 100;
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
mc_b.onEnterFrame = function (){
rot += 1;
var rad = rot * Math.PI / 180;
this._x = Math.cos(rad) * 25 + mc_a._x;
this._y = Math.sin(rad) * 25 + mc_a._y;
this._rotation = rot;
};
ムービークリップにインスタンス名を付ける
■ムービークリップにインスタンス名をつける
インスタンス名を設定するには、_name プロパティを使用します。
ユニーク(唯一)な名前を付ける必要があります。
もし同じ階層上に、同名のインスタンスが存在している場合、ドットシンタックス「_root.インスタンス名.インスタンス名.…」を使ってアクセスできなくなります。
ムービークリップ "mc" のインスタンス名を "rename" に変更する
mc._name = "rename";
配置済みのムービークリップを複製する
サンプルをダウンロード
■配置済みのムービークリップを複製する
配置されているインスタンスを複製する
配置されているムービークリップインスタンスを複製するには、duplicateMovieClip() メソッドを使用します。
複製したいムービークリップから呼び出します。
複製先は、同じ階層のみです。違う階層に複製する事はできません。
MovieClip.duplicateMovieClip ( "新しいインスタンス名" , 深度 , [初期化パラメータ] ) :MovieClip
第01引数 | String | 複製して新しく作成されるインスタンスの名前 |
第02引数 | Number | 複製して新しく作成されるインスタンスの深度 |
第03引数(略可) | Object | [Flash 6 以降]初期化したいパラメータをオブジェクト型で渡す |
戻り値 | MovieClip | [Flash 5] なし、[Flash 6以降] 新しく作成されたムービークリップの参照 |
■第01引数 新しいインスタンス名
第01引数には、ユニーク(唯一)となる名称を指定します。
■第02引数 深度
第02引数には、深度を指定します。
指定した深度に、すでにインスタンスが存在する場合は、古いインスタンスが消滅します。
深度については、こちらで解説しています。
■使用例
ムービークリップ _root.mc を複製する。(複製後のインスタンスは _root.new_mc 、深度は 1)
// ------------------------------------------------------------
// _root.mc を複製する
// ------------------------------------------------------------
_root.mc.duplicateMovieClip("new_mc" , 1);
// アクセステスト
trace(_root.new_mc);
初期化パラメータを指定する例(Flash 6 以降)
// ------------------------------------------------------------
// 初期化パラメータ(MovieClip クラスのプロパティと一致させる)
// ------------------------------------------------------------
var init_obj = {
_x:100,
_y:50,
_rotation:60
};
// ------------------------------------------------------------
// _root.mc を複製する
// ------------------------------------------------------------
var mc_obj = _root.mc.duplicateMovieClip("new_mc" , 1 , init_obj);
// アクセステスト
trace(mc_obj);
for 文を使ってまとめて複製する例
for 文を使って複数のインスタンスを作成する場合、インスタンス名を連番にすると便利です。
深度が重複しないように注意します。
動的にインタンスの参照を取得するには、ドットシンタックスと配列アクセス演算子を組み合わせます。
ムービークリップ _root.aaa.mc を 100 個複製する。(複製後のインスタンス名は "new_mc+連番"、深度は 0~99)
var i;
var num = 100;
// ------------------------------------------------------------
// 複製したいムービークリップの参照
// ------------------------------------------------------------
var source_mc = _root.aaa.mc;
// ------------------------------------------------------------
// ムービークリップをまとめて複製する
// ------------------------------------------------------------
for(i=0;i < num;i++){
// 複製後のインスタンス名
var name = "new_mc" + i;
// 複製後の深度
var depth = i;
// ムービークリップを複製する
source_mc.duplicateMovieClip(name , depth);
}
// ------------------------------------------------------------
// 複製後のムービークリップにまとめてアクセスする
// ------------------------------------------------------------
for(i=0;i < num;i++){
// 配列アクセス演算子を使用して、インスタンスの参照を取得する
var mc_obj = source_mc._parent["new_mc" + i];
// 出力テスト
trace(mc_obj);
// 各プロパティにアクセス
mc_obj._x = Math.random() * 400;
mc_obj._y = Math.random() * 400;
}
■複製したインスタンスを破棄する
複製したインスタンスを破棄するには、 removeMovieClip() メソッドを使用します。
深度が 0 より小さい場合、破棄することはできません。
ムービークリップ "mc_obj" を破棄する
mc_obj.removeMovieClip();
■duplicateMovieClip() メソッドの注意点
タイムラインの再生位置は、コピーされません。
複製されたインスタンスは、タイムラインの 1 フレーム目から再生されます。
「on ハンドラ」「onClipEvent ハンドラ」「イベントハンドラ」などのイベント用スクリプトはコピーされます。
ライブラリから動的にムービークリップを作成する
サンプルをダウンロード
■ swf ファイルにシンボルデータを埋め込む
ムービークリップシンボルを、 swf ファイルに埋め込む事ができます。
埋め込んだシンボルは、動的にインスタンス化する事ができます。
1.ライブラリウィンドウを開く
ライブラリウィンドウを開きます。
埋め込みたいシンボルを選択し、『リンケージプロパティ』を選択します。
2.リンケージプロパティを設定する
リンケージプロパティというダイアログが開きます。
識別子に、好きな名称を付けます。
ここでは、"my_mc" と名前を付けます。
Flash 5 の場合は、『このシンボルに書き出す』にチェックを付けます。
Flash MX 以降の場合は、『ActionScript に書き出し』と『最初のフレームに書き出し』にチェックを付けます。
3.リソースが埋め込まれているか確認する
この状態で、Flash を書き出します。
すると、swf ファイルにデータが埋め込まれるようになります。
プロファイラ機能を使用すると、データが埋め込まれたか確認できます。
タイムラインの1フレーム目のサイズが増えているでしょう。
埋め込んだシンボルをインスタンス化し、配置する
attachMovie() メソッドを使用します。
配置したい親ムービークリップから呼び出します。
MovieClip.attachMovie ( "識別子" , "新しいインスタンス名" , 深度 , 初期化パラメータ ) :MovieClip
第01引数 | String | リンケージプロパティで設定した識別子 |
第02引数 | String | 新しく作成されるインスタンスの名前 |
第03引数 | Number | 新しく作成されるインスタンスの深度 |
第04引数(略可) | Object | [Flash 6 以降]初期化したいパラメータをオブジェクト型で渡す |
戻り値 | MovieClip | [Flash 6 以降]新しく作成されたムービークリップの参照 |
■第01引数 識別子
第01引数に、リンケージプロパティで設定した、識別子を指定します。
■第02引数 新しいインスタンス名
第02引数には、ユニーク(唯一)となる名称を指定します。
■第03引数 深度
第03引数には、深度を指定します。
指定した深度に、すでにインスタンスが存在する場合は、古いインスタンスが消滅します。
深度については、こちらで解説しています。
■使用例
"my_mc" という識別子のシンボルを、インスタンス化して配置する。(生成後のインスタンスは _root.new_mc 、深度は 1)
// ------------------------------------------------------------
// "my_mc" という識別子のシンボルを、インスタンス化して配置する
// ------------------------------------------------------------
_root.attachMovie("my_mc" , "new_mc" , 1);
// アクセステスト
trace(_root.new_mc);
初期化パラメータを指定する例(Flash 6 以降)
// ------------------------------------------------------------
// 初期化パラメータ(MovieClip クラスのプロパティと一致させる)
// ------------------------------------------------------------
var init_obj = {
_x:100,
_y:50,
_rotation:60
};
// ------------------------------------------------------------
// "my_mc" という識別子のシンボルを、インスタンス化して配置する
// ------------------------------------------------------------
var mc_obj = _root.attachMovie("my_mc" , "new_mc" , 1 , init_obj);
// アクセステスト
trace(mc_obj);
for 文を使って、まとめてインスタンスを生成する例
インスタンス名を連番にすると便利です。
深度が重複しないように注意します。
配列アクセス演算子を使用すると、動的にインスタンスの参照を取得できます。
"my_mc" という識別子のシンボルを 100 個生成して、_root.aaa に配置する。(生成後のインスタンス名は "new_mc+連番"、深度は 0~99)
var i;
var num = 100;
// ------------------------------------------------------------
// 親となるムービークリップの参照
// ------------------------------------------------------------
var parent_mc = _root.aaa;
// ------------------------------------------------------------
// ムービークリップをまとめて作成する
// ------------------------------------------------------------
for(i=0;i < num;i++){
// 新しいインスタンス名
var name = "new_mc" + i;
// 配置する深度
var depth = i;
// "my_mc" という識別子のシンボルをインスタンス化する
parent_mc.attachMovie("my_mc" , name , depth);
}
// ------------------------------------------------------------
// 生成後のムービークリップにまとめてアクセスする
// ------------------------------------------------------------
for(i=0;i < num;i++){
// 配列アクセス演算子を使用して、インスタンスの参照を取得する
var mc_obj = parent_mc["new_mc" + i];
// 出力テスト
trace(mc_obj);
// 各プロパティにアクセス
mc_obj._x = Math.random() * 400;
mc_obj._y = Math.random() * 400;
}
■生成したインスタンスを破棄する
生成したインスタンスを破棄するには、 removeMovieClip() メソッドを使用します。
深度が 0 より小さい場合、破棄することはできません。
ムービークリップ "mc_obj" を破棄する
mc_obj.removeMovieClip();
■シンボルの埋め込みの問題点
シンボルの埋め込みは、基本的に1フレーム目に格納されます。
1フレーム目の読み込みが完了するまでは、画面は一切表示されません。
例えば、Flash の総サイズのうち、60% が埋め込みデータだった場合、60% の読み込みが完了するまで、一切の絵を表示する事ができません。
もしロード画面を実装している場合、ほぼ機能しなくなるでしょう。
■ロード用の Flash を別途用意する
ロード専用の Flash を表示し、そこにメインの swf ファイルを読み込みます。
Flash を読み込んで表示する方法については、こちらで解説しています。
■シンボルデータを、任意のフレームに埋め込む
リンケージプロパティを開いて、『最初のフレームに書き出し』のチェックを外します。
次に、シンボルを任意のフレームに静的に配置します。
その任意のフレームを、最低でも1回だけ再生します。
これで、attachMovie() メソッドで利用できるようになります。
空のムービークリップを作成する(Flash 6 以降)
■空のムービークリップを作成して配置する
createEmptyMovieClip() メソッドを使用します。
MovieClip.createEmptyMovieClip ( "新しいインスタンス名" , 深度 ) :MovieClip
第01引数 | String | 新しく作成されるインスタンスの名前 |
第02引数 | Number | 新しく作成されるインスタンスの深度 |
戻り値 | MovieClip | 新しく作成されたムービークリップの参照 |
■第01引数 新しいインスタンス名
ユニーク(唯一)となる名称を指定します。
■第02引数 深度
第02引数には、深度を指定します。
指定した深度に、すでにインスタンスが存在する場合は、古いインスタンスが消滅します。
深度については、こちらで解説しています。
■使用例
空のムービークリップオブジェクトを生成して、_root に配置する。(生成後のインスタンスは _root.new_mc 、深度は 1)
// ------------------------------------------------------------
// 空のムービークリップオブジェクトを生成して、_root に配置する
// ------------------------------------------------------------
var mc_obj = _root.createEmptyMovieClip("new_mc" , 1);
// アクセステスト
trace(mc_obj);
■生成したインスタンスを破棄する
生成したインスタンスを破棄するには、 removeMovieClip() メソッドを使用します。
深度が 0 より小さい場合、破棄することはできません。
ムービークリップ "mc_obj" を破棄する
mc_obj.removeMovieClip();
ムービークリップにブレンドを適用する(Flash 8 以降)
■ムービークリップにブレンドを適用する
ムービークリップにブレンドを適用するには、blendMode プロパティを使用します。
以下の表にある、文字列か数値を指定します。
ブレンドの詳細については、こちらで解説しています。
文字列 | 番号 | 名称 |
"normal" | 1 | 標準 |
"layer" | 2 | レイヤー |
"multiply" | 3 | 乗算 |
"screen" | 4 | スクリーン |
"lighten" | 5 | 比較(明) |
"darken" | 6 | 比較(暗) |
"difference" | 7 | 差の絶対値 |
"add" | 8 | 加算 |
"subtract" | 9 | 減算 |
"invert" | 10 | 反転 |
"alpha" | 11 | アルファ |
"erase" | 12 | 消去 |
"overlay" | 13 | オーバーレイ |
"hardlight" | 14 | ハードライト |
ムービークリップ "mc" を加算でブレンドする
mc.blendMode = "add"; // 文字列で指定する場合
ムービークリップ mc を減算でブレンドする
mc.blendMode = "subtract"; // 文字列で指定する場合
ムービークリップにフィルタを適用する(Flash 8 以降)
■ムービークリップにフィルタを適用する
ムービークリップにフィルタを適用するには、 filters プロパティを使用します。
Filter 系のオブジェクトを、配列に格納してから渡します。
配列で指定するので、複数のフィルタを順番に適用することができます。
■フィルタの一覧
フィルタについては、こちらで解説しています。
クラス名 | 効果 |
BlurFilter | ブラー(ぼかし) |
BevelFilter | ベベル |
GradientBevelFilter | グラデーションベベル |
GlowFilter | グロー |
GradientGlowFilter | グラデーショングロー |
DropShadowFilter | ドロップシャドウ |
ColorMatrixFilter | カラーマトリックス |
ConvolutionFilter | コンボリューション |
DisplacementMapFilter | ディスプレイスメントマップ |
■1つのフィルタを適用する例
ムービークリップ "mc" にブラーを適用する(AS1.0)
// ブラーフィルタオブジェクトを作成
var blur_filter = new flash.filters.BlurFilter();
// ムービークリップ mc に、フィルタを適用
mc.filters = [blur_filter];
ムービークリップ "mc" にブラーを適用する(AS2.0)
import flash.filters.BlurFilter;
// ブラーフィルタオブジェクトを作成
var blur_filter : BlurFilter = new BlurFilter();
// ムービークリップ mc に、フィルタを適用
mc.filters = [blur_filter];
■複数のフィルタを適用する例
ムービークリップ "mc" にブラーとドロップシャドウを適用する(AS1.0)
// ブラーフィルタオブジェクトを作成
var blur_filter = new flash.filters.BlurFilter();
// ドロップシャドウフィルタオブジェクトを作成
var drop_filter = new flash.filters.DropShadowFilter();
// ムービークリップ mc に、フィルタを適用
mc.filters = [blur_filter,drop_filter];
ムービークリップ "mc" にブラーとドロップシャドウを適用する(AS2.0)
import flash.filters.BlurFilter;
import flash.filters.DropShadowFilter;
// ブラーフィルタオブジェクトを作成
var blur_filter:BlurFilter = new BlurFilter();
// ドロップシャドウフィルタオブジェクトを作成
var drop_filter:DropShadowFilter = new DropShadowFilter();
// ムービークリップ mc に、フィルタを適用
mc.filters = [blur_filter,drop_filter];
ムービークリップに行列を適用する(Flash 8 以降)
サンプルをダウンロード
■ムービークリップに行列を適用する
ムービークリップに行列を適用するには、 transform.matrix プロパティを使用します。
このプロパティに、マトリックスオブジェクトを渡します。
transform.matrix プロパティの Matrix オブジェクトからメソッドを呼び出しても効果はありません。
必ず、マトリックスオブジェクトを渡す必要があります。
ムービークリップ mc に行列を適用する(AS1.0)
// マトリックスオブジェクトを作成する
var mtx = new flash.geom.Matrix();
// 単位行列化
mtx.identity();
// スケーリング行列を乗算
mtx.scale(0.8,1.2);
// 回転行列を乗算
mtx.rotate(Math.PI / 180 * 30);
// 平行移動行列を乗算
mtx.translate(200,50);
// ムービークリップ "mc" に、マトリックスオブジェクトを渡す
mc.transform.matrix = mtx;
ムービークリップ mc に行列を適用する(AS2.0)
import flash.geom.Matrix;
// マトリックスオブジェクトを作成する
var mtx : Matrix = new Matrix();
// 単位行列化
mtx.identity();
// スケーリング行列を乗算
mtx.scale(0.8,1.2);
// 回転行列を乗算
mtx.rotate(Math.PI / 180 * 30);
// 平行移動行列を乗算
mtx.translate(200,50);
// ムービークリップ "mc" に、マトリックスオブジェクトを渡す
mc.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つのパラメータにより、位置の要素が決定します。