Flash の描画について(Flash 6 以降)
描画関連の機能について
■描画関連の機能について
MovieClip クラスには、描画を行う以下の機能があります。
■線の描画スタイル
メソッド名 | 説明 |
lineStyle() | 線の描画スタイルを指定。(単一色) |
lineGradientStyle() | 線の描画スタイルを指定。(グラデーション) |
■面の描画スタイル
メソッド名 | 説明 |
beginFill() | 面の描画スタイルを指定。(単一色) |
beginGradientFill() | 面の描画スタイルを指定。(グラデーション) |
beginBitmapFill() | 面の描画スタイルを指定。(テクスチャ) |
■パス指定による描画
メソッド名 | 説明 |
moveTo() | 新しい描画パスを開始する |
lineTo() | 直線を描画する |
curveTo() | 2次ベジェ曲線を描画する |
endFill() | 描画パスを閉じて、面の塗りつぶしを確定する |
■描画編集
メソッド名 | 説明 |
clear() | 描画した物をすべてクリアする。 |
■新しい描画パスを開始する
moveTo() メソッドを使用します。
開始位置を指定します。
MovieClip.moveTo( x , y ) :Void
引数 | Number | 開始位置となる、x 座標を指定する |
引数 | Number | 開始位置となる、y 座標を指定する |
戻り値 | Void | なし |
■描画パスを閉じて、面の塗りつぶしを確定する
endFill() メソッドを使用します。
このメソッドを呼び出すと、面の描画スタイルは、リセットされます。
MovieClip.endFill( ) :Void
引数 | Void | なし |
戻り値 | Void | なし |
■描画パスが暗黙的に閉じられる場合
描画パスは、他の手段でも閉じる事ができます。
ただし、「面の塗りつぶし」は確定しません。
■「面の塗りつぶし」を確定させなかった場合
描画パスがねじれて重なった場合、面の有無は反転します。
この仕様が、2つの面が重なった場合にも、継続して適用され続けます。
面が、偶数回重なった場合、面無し状態に変化します。
面が、奇数回重なった場合、面有り状態に変化します。
■グラデーションの行列について
■グラデーションを矩形の中に収める形式 (Flash 7 以前)
新規にオブジェクトを作成し、以下のプロパティを追加します。
プロパティ名 | 型 | 説明 |
matrixType | String | "box" を指定 |
x | Number | x 座標(基点は左上端) |
y | Number | y 座標(基点は左上端) |
w | Number | グラデーションの幅 |
h | Number | グラデーションの高さ |
r | Number | グラデーションの角度(単位:ラジアン) |
グラデーションを矩形の中に収める形式
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var mtx = new Object();
// ------------------------------------------------------------
// 行列のタイプ
// ------------------------------------------------------------
mtx.matrixType = "box";
// ------------------------------------------------------------
// グラデーションの矩形
// ------------------------------------------------------------
mtx.x = 0; // x 座標
mtx.y = 0; // y 座標
mtx.w = 400; // 幅
mtx.h = 300; // 高さ
// ------------------------------------------------------------
// グラデーションの角度(ラジアン)
// ------------------------------------------------------------
mtx.r = 60 * (Math.PI / 180);
■グラデーションを矩形の中に収める行列 (Flash 8 以降)
Matrix クラスの、createGradientBox() メソッドを使用します。
Flash のグラデーション塗り専用の特殊仕様です。
Matrix.createGradientBox ( width , height , rotation , tx , ty ) :Void
第01引数 | Number | グラデーションの幅 |
第02引数 | Number | グラデーションの高さ |
第03引数(略可) | Number | グラデーションの角度(単位:ラジアン) |
第04引数(略可) | Number | x 座標(基点は左上端) |
第05引数(略可) | Number | y 座標(基点は左上端) |
戻り値 | Void | なし |
グラデーションを矩形の中に収める行列 (AS2.0)
import flash.geom.Matrix;
// ------------------------------------------------------------
// 行列を作成
// ------------------------------------------------------------
var mtx:Matrix = new Matrix();
// ------------------------------------------------------------
// グラデーションを矩形の中に収める行列を生成
// ------------------------------------------------------------
mtx.createGradientBox(
400, // 幅
300, // 高さ
60 * (Math.PI / 180), // 角度(ラジアン)
0, // x 座標
0 // y 座標
);
■任意の行列を指定する( Flash 7 以前)
新規にオブジェクトを作成し、a ~ i プロパティを追加します。
(a , b) ベクトルが、グラデーションの x 軸成分に相当します。
(d , e) ベクトルが、グラデーションの y 軸成分に相当します。
(g , h) ベクトルが、グラデーションの中心座標に相当します。
c, f, i プロパティは、使用しません。省略可能です。
単位行列の状態で、グラデーションの幅は、1.0 です。
例えば、スケール成分が 256.0 である場合、実際のピクセル幅も 256.0 です。
Flash 7 以前の行列の形式
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var mtx = new Object();
// ------------------------------------------------------------
// 単位行列化
// ------------------------------------------------------------
mtx.a = 1.0; mtx.b = 0.0; mtx.c = 0.0;
mtx.d = 0.0; mtx.e = 1.0; mtx.f = 0.0;
mtx.g = 0.0; mtx.h = 0.0; mtx.i = 1.0;
■任意の行列を指定する( Flash 8 以降)
Matrix クラスを使用します。
単位行列の状態で、グラデーションの幅は、1638.4 です。
例えば、スケール成分が (256.0/1638.4) である場合、実際のピクセル幅は 256.0 です。
Flash 8 以降の行列の形式 (AS2.0)
import flash.geom.Matrix;
// ------------------------------------------------------------
// 行列を作成
// ------------------------------------------------------------
var mtx:Matrix = new Matrix();
// 単位行列化
mtx.identity();
// 拡大縮小成分を乗算
mtx.scale( 1.0/1638.4 , 1.0/1638.4 );
// 角度成分を乗算
mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
mtx.translate( 0.0 , 0.0 );
描画した物をすべてクリアする
■描画した物をすべてクリアする
clear() メソッドを使用します。
このメソッドを呼び出すと、描画スタイルの設定もリセットされます。
MovieClip.clear( ) :Void
引数 | Void | なし |
戻り値 | Void | なし |
■使用例
描画済みグラフィックをすべてクリアする (AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle(10 , 0x000000 , 100);
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( 10.0 , 10.0 );
// 終了位置
mc.lineTo ( 100.0 , 50.0 );
// ------------------------------------------------------------
// 描画済みグラフィックをすべてクリアする
// ------------------------------------------------------------
mc.clear();
線の描画スタイルについて
■線に「単一色塗り」スタイルを指定する
lineStyle() メソッドを使用します。
第04引数以降の設定は、Flash 8 から対応しています。
MovieClip.lineStyle ( 太さ , RGBカラー , 透明度 , ヒンディング? , "スケールモード" , "先の種類" , "角の種類" , マイター限度 ) :Void
第01引数(略可) | Number | 線の太さ (0 ~ 255) (0 で極細線) |
第02引数(略可) | Number | 線の色 (RGBカラー値) |
第03引数(略可) | Number | 線の透明度 (0 ~ 100) |
第04引数(略可) | Boolean | ヒンティングの有無 |
第05引数(略可) | String | スケールモード |
第06引数(略可) | String | 線先の種類 |
第07引数(略可) | String | 角の種類 |
第08引数(略可) | Number | マイターの尖りの延長サイズ (1.0 ~) |
戻り値 | Void | なし |
■第04引数 ヒンディング
有効にすると、クッキリと表示されるように補正されます。
線の太さや位置が、微修正されます。
デフォルトは、false です。
true | false |
■第05引数 スケールモードの種類
スケールモードの種類です。
デフォルトは、"normal" です。
文字列 | 説明 |
"normal" | 拡大縮小で線の太さが変わります |
"horizontal" | 横方向のみ拡大縮小で線の太さが変わります |
"vertical" | 縦方向のみ拡大縮小で線の太さが変わります |
"none" | 拡大縮小で線の太さは変わりません |
■第06引数 線先の種類
線先の種類です。
デフォルトは、"round" です。
文字列 | 説明 |
"none" | 線の先にキャップなし |
"round" | 線の先に丸いキャップ |
"square" | 線の先に四角いキャップ |
"none" | "round" | "square" |
■第07引数 角の種類
角(結合部)の種類です。
デフォルトは、"round" です。
文字列 | 説明 |
"miter" | 角をマイター結合 |
"bevel" | 角をベベル結合 |
"round" | 角をラウンド結合 |
"miter" | "bevel" | "round" |
■第08引数 マイター限度
第07引数で、"miter" を指定した場合に効果があります。
マイターの尖りの延長サイズを 1.0 ~ で指定します。
実際のサイズは、(第01引数 * 第08引数) です。
最小 (1.0) | 最大 |
■使用例
線に「単一色塗り」スタイルを指定する(簡易)(AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle (10 , 0x000000 , 100);
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( 10.0 , 10.0 );
// 直線を描画
mc.lineTo ( 100.0 , 50.0 );
■使用例(Flash 8 以降)
線に「単一色塗り」スタイルを指定する(詳細)(AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線の単一色塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness = 20;
// 線の色 (RGBカラー値)
var line_color = 0x000000;
// 線の透明度 (0 ~ 100)
var line_alpha = 100;
// ヒンティングの有無
var pixel_hinting = true;
// スケールモード
var scale_mode = "normal";
// 線先の種類
var caps_style = "square";
// 角の種類
var joints_style = "miter";
// マイターの尖りの延長サイズ (1.0 ~)
var miter_limit = 255;
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle ( thickness , line_color , line_alpha , pixel_hinting , scale_mode , caps_style , joints_style , miter_limit );
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( 20.0 , 20.0 );
// 直線を描画
mc.lineTo ( 200.0 , 100.0 );
// 直線を描画
mc.lineTo ( 20.0 , 100.0 );
線に「単一色塗り」スタイルを指定する(詳細)(AS2.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc:MovieClip = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線の単一色塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 20;
// 線の色 (RGBカラー値)
var line_color:Number = 0x000000;
// 線の透明度 (0 ~ 100)
var line_alpha:Number = 100;
// ヒンティングの有無
var pixel_hinting:Boolean = true;
// スケールモード
var scale_mode:String = "normal";
// 線先の種類
var caps_style:String = "square";
// 角の種類
var joints_style:String = "miter";
// マイターの尖りの延長サイズ (1.0 ~)
var miter_limit:Number = 255;
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle ( thickness , line_color , line_alpha , pixel_hinting , scale_mode , caps_style , joints_style , miter_limit );
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( 20.0 , 20.0 );
// 直線を描画
mc.lineTo ( 200.0 , 100.0 );
// 直線を描画
mc.lineTo ( 20.0 , 100.0 );
■線に「グラデーション塗り」スタイルを指定する (Flash 8 以降)
lineGradientStyle() メソッドを使用します。
事前に、lineStyle() メソッドも呼び出す必要があります。
MovieClip.lineGradientStyle ( "グラデーションの種類" , [カラー] , [透明度] , [配分] , 行列 , "スプレッド" , "補間" , 焦点 ) :Void
第01引数 | Number | グラデーションの種類 |
第02引数 | Array | グラデーションの RGB カラー (0xFFFFFF) を、配列に格納して指定。 |
第03引数 | Array | グラデーションの透明度 (0 ~ 100) を、配列に格納して指定。 |
第04引数 | Array | グラデーションの配分 (0 ~ 255) を、配列に格納して指定。 |
第05引数(略可) | Object | グラデーションの姿勢を、行列で指定。 |
第06引数(略可) | String | スプレッドの種類 |
第07引数(略可) | String | 補間の種類 |
第08引数(略可) | Number | 焦点位置 (-1.0 ~ 1.0) |
戻り値 | Void | なし |
■第01引数 グラデーションの種類
グラデーションの種類です。
文字列 | 説明 |
"linear" | 線状グラデーション |
"radial" | 円状グラデーション |
"linear" | "radial" |
■第02引数 グラデーションのカラー
RGB カラー(0xFFFFFF) を、必要な数だけ配列に格納して指定します。
■第03引数 グラデーションの透明度
透明度 (0 ~ 100) を、配列に格納して指定します。
配列の要素数は、第02引数と一致している必要があります。
第02引数のカラーリストの順序で、透明度を設定します。
■第04引数 グラデーションの配分
グラデーションの配分(配置)を、配列に格納して指定します。
0 ~ 255 の数値を指定します。昇順で格納します。
配列の要素数は、第02~03引数と一致している必要があります。
■第05引数 グラデーションの姿勢
グラデーションの姿勢を、行列で指定します。
指定可能な形式については、こちらで解説しています。
単位行列を指定した場合、以下の様な姿勢となります。
単位行列の線形グラデーションの幅は、1638.4 です。
単位行列の円形グラデーションの直径は、1638.4 です。
線形グラデーション | 円形グラデーション |
■第06引数 スプレッドの種類
スプレッドの種類です。
デフォルトは、"pad" です。
文字列 | 説明 |
"pad" | 端のカラーを引き伸ばし |
"reflect" | 反転して繰り返し |
"repeat" | 同じカラーで繰り返し |
"pad" | "reflect" | "repeat" |
■第07引数 補間の種類
補間の種類です。
デフォルトは、"rgb" です。
文字列 | 説明 |
"linearRGB" | 線形でRGB補間 |
"rgb" | RGBの補間 |
"linearRGB" | "rgb" |
■第08引数 焦点位置
グラデーションの焦点位置を、自身の x 軸方向にずらす事ができます。
-1.0 ~ 1.0 までの数値を指定します。
デフォルトは、0.0 です。
-1.0 ~ | ~ 0.0 ~ | ~ 1.0 |
■使用例
グラデーションと行列の関係を確認する (AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線のグラデーション塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness = 30;
// グラデーションの種類
var gradient_type = "radial";
// グラデーション
var gradient_colors = [ 0xff0000 , 0x00ff00 , 0x0000ff ]; // RGB カラーリスト
var gradient_alphas = [ 100 , 100 , 100 ]; // 透明度リスト
var gradient_ratios = [ 0 , 127.5 , 255 ]; // 配分リスト
// グラデーションの行列
var gradient_mtx = new flash.geom.Matrix();
// スプレッドの種類
var spread_method = "pad";
// 補間の種類
var interpolation_method = "linearRGB";
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio = 0.0;
// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
// 単位行列化
gradient_mtx.identity();
// 拡大縮小成分を乗算
gradient_mtx.scale( 256/1638.4 , 256/1638.4 );
// 角度成分を乗算
gradient_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
gradient_mtx.translate( 128.0 , 128.0 );
// ------------------------------------------------------------
// 線の基礎的なスタイルを指定する
// ------------------------------------------------------------
mc.lineStyle( thickness );
// ------------------------------------------------------------
// 線に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineGradientStyle( gradient_type , gradient_colors , gradient_alphas , gradient_ratios , gradient_mtx , spread_method , interpolation_method , focal_point_ratio );
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
var i = 0;
for(i=0;i < 8;i++){
var pos_y = i * 32.0 + 16.0;
// 開始位置
mc.moveTo ( 0.0 , pos_y );
// 直線を描画
mc.lineTo ( 256.0 , pos_y );
}
グラデーションと行列の関係を確認する (AS2.0)
import flash.geom.Matrix;
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc:MovieClip = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線のグラデーション塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 30;
// グラデーションの種類
var gradient_type:String = "radial";
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ]; // RGB カラーリスト
var gradient_alphas:Array = [ 100 , 100 , 100 ]; // 透明度リスト
var gradient_ratios:Array = [ 0 , 127.5 , 255 ]; // 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = "pad";
// 補間の種類
var interpolation_method:String = "linearRGB";
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;
// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
// 単位行列化
gradient_mtx.identity();
// 拡大縮小成分を乗算
gradient_mtx.scale( 256/1638.4 , 256/1638.4 );
// 角度成分を乗算
gradient_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
gradient_mtx.translate( 128.0 , 128.0 );
// ------------------------------------------------------------
// 線の基礎的なスタイルを指定する
// ------------------------------------------------------------
mc.lineStyle( thickness );
// ------------------------------------------------------------
// 線に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineGradientStyle( gradient_type , gradient_colors , gradient_alphas , gradient_ratios , gradient_mtx , spread_method , interpolation_method , focal_point_ratio );
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
var i:Number = 0;
for(i=0;i < 8;i++){
var pos_y:Number = i * 32.0 + 16.0;
// 開始位置
mc.moveTo ( 0.0 , pos_y );
// 直線を描画
mc.lineTo ( 256.0 , pos_y );
}
■2点間にグラデーション線を配置する例
線の太さにグラデーションをフィットさせる (AS2.0)
import flash.geom.Point;
import flash.geom.Matrix;
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc:MovieClip = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 2つの座標
// ------------------------------------------------------------
var pos_a:Point = new Point( Stage.width/2 , Stage.height/2 );
var pos_b:Point = new Point( 0 , 0 );
// ------------------------------------------------------------
// 線のグラデーション塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 100;
// グラデーションの種類
var gradient_type:String = "linear";
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ]; // RGB カラーリスト
var gradient_alphas:Array = [ 0 , 100 , 0 ]; // 透明度リスト
var gradient_ratios:Array = [ 0 , 127.5 , 255 ]; // 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = "pad";
// 補間の種類
var interpolation_method:String = "linearRGB";
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
mc.onEnterFrame = function ():Void{
// ------------------------------------------------------------
// 座標Bにマウス座標をセット
// ------------------------------------------------------------
pos_b.x = _root._xmouse;
pos_b.y = _root._ymouse;
// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
// 差分ベクトル
var vec:Point = pos_b.subtract(pos_a);
// 法線ベクトルの角度
var rad:Number = Math.atan2(vec.y , vec.x) + Math.PI * 0.5;
// 単位行列化
gradient_mtx.identity();
// 拡大縮小成分を乗算
gradient_mtx.scale(thickness/1638.4 , 1.0);
// 角度成分を乗算
gradient_mtx.rotate(rad);
// 移動成分を乗算
gradient_mtx.translate(pos_a.x , pos_a.y);
// ------------------------------------------------------------
// 描画済みグラフィックをすべてクリアする
// ------------------------------------------------------------
mc.clear();
// ------------------------------------------------------------
// 線の基礎的なスタイルを指定する
// ------------------------------------------------------------
mc.lineStyle( thickness );
// ------------------------------------------------------------
// 線に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineGradientStyle(
gradient_type,
gradient_colors,
gradient_alphas,
gradient_ratios,
gradient_mtx,
spread_method,
interpolation_method,
focal_point_ratio
);
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( pos_a.x , pos_a.y );
// 直線を描画
mc.lineTo ( pos_b.x , pos_b.y );
};
線の長さにグラデーションをフィットさせる (AS2.0)
import flash.geom.Point;
import flash.geom.Matrix;
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc:MovieClip = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 2つの座標
// ------------------------------------------------------------
var pos_a:Point = new Point( Stage.width/2 , Stage.height/2 );
var pos_b:Point = new Point( 0 , 0 );
// ------------------------------------------------------------
// 線のグラデーション塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 100;
// グラデーションの種類
var gradient_type:String = "linear";
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x0000ff ]; // RGB カラーリスト
var gradient_alphas:Array = [ 100 , 100 ]; // 透明度リスト
var gradient_ratios:Array = [ 0 , 255 ]; // 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = "pad";
// 補間の種類
var interpolation_method:String = "rgb";
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
mc.onEnterFrame = function ():Void{
// ------------------------------------------------------------
// 座標Bにマウス座標をセット
// ------------------------------------------------------------
pos_b.x = _root._xmouse;
pos_b.y = _root._ymouse;
// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
// 差分ベクトル
var vec:Point = pos_b.subtract(pos_a);
// 中間座標
var pos:Point = Point.interpolate(pos_a , pos_b , 0.5);
// ベクトルの角度
var rad:Number = Math.atan2(vec.y , vec.x);
// ベクトルの長さ
var len:Number = vec.length;
// 単位行列化
gradient_mtx.identity();
// 拡大縮小成分を乗算
gradient_mtx.scale(len/1638.4 , 1.0);
// 角度成分を乗算
gradient_mtx.rotate(rad);
// 移動成分を乗算
gradient_mtx.translate(pos.x , pos.y);
// ------------------------------------------------------------
// 描画済みグラフィックをすべてクリアする
// ------------------------------------------------------------
mc.clear();
// ------------------------------------------------------------
// 線の基礎的なスタイルを指定する
// ------------------------------------------------------------
mc.lineStyle( thickness );
// ------------------------------------------------------------
// 線に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineGradientStyle(
gradient_type,
gradient_colors,
gradient_alphas,
gradient_ratios,
gradient_mtx,
spread_method,
interpolation_method,
focal_point_ratio
);
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( pos_a.x , pos_a.y );
// 直線を描画
mc.lineTo ( pos_b.x , pos_b.y );
};
■線の描画スタイルをリセットする
■使用例
線の描画スタイルをリセットする (AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle (10 , 0x000000 , 100);
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( 20.0 , 10.0 );
// 直線を描画
mc.lineTo ( 420.0 , 10.0 );
// ------------------------------------------------------------
// 線の描画スタイルをリセットする(引数を省略した場合)
// ------------------------------------------------------------
mc.lineStyle ();
// ------------------------------------------------------------
// 面に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.beginFill ( 0xff8800 , 100 );
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
mc.moveTo ( 20.0 , 20.0 );
mc.lineTo ( 420.0 , 20.0 );
mc.lineTo ( 420.0 , 320.0 );
mc.lineTo ( 20.0 , 320.0 );
面の描画スタイルについて
■面に「単一色塗り」スタイルを指定する
beginFill() メソッドを使用します。
MovieClip.beginFill ( RGBカラー , 透明度 ) :Void
第01引数 | Number | 面の色 (RGBカラー値) |
第02引数(略可) | Number | 面の透明度 (0 ~ 100) |
戻り値 | Void | なし |
■使用例
面に「単一色塗り」スタイルを指定する (AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 面に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.beginFill ( 0xff8800 , 100 );
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
mc.moveTo ( 20.0 , 20.0 );
mc.lineTo ( 420.0 , 20.0 );
mc.lineTo ( 420.0 , 320.0 );
mc.lineTo ( 20.0 , 320.0 );
■面に「グラデーション塗り」スタイルを指定する
beginGradientFill() メソッドを使用します。
第06引数以降の設定は、Flash 8 から対応しています。
MovieClip.beginGradientFill ( "グラデーションの種類" , [カラー] , [透明度] , [配分] , 行列 , "スプレッド" , "補間" , 焦点 ) :Void
第01引数 | Number | グラデーションの種類 |
第02引数 | Array | グラデーションの RGB カラー (0xFFFFFF) を、配列に格納して指定。 |
第03引数 | Array | グラデーションの透明度 (0 ~ 100) を、配列に格納して指定。 |
第04引数 | Array | グラデーションの配分 (0 ~ 255) を、配列に格納して指定。 |
第05引数 | Object | グラデーションの姿勢を、行列で指定。 |
第06引数(略可) | String | スプレッドの種類 |
第07引数(略可) | String | 補間の種類 |
第08引数(略可) | Number | 焦点位置 (-1.0 ~ 1.0) |
戻り値 | Void | なし |
■第01引数 グラデーションの種類
グラデーションの種類です。
文字列 | 説明 |
"linear" | 線状グラデーション |
"radial" | 円状グラデーション |
"linear" | "radial" |
■第02引数 グラデーションのカラー
RGB カラー(0xFFFFFF) を、必要な数だけ配列に格納して指定します。
■第03引数 グラデーションの透明度
透明度 (0 ~ 100) を、配列に格納して指定します。
配列の要素数は、第02引数と一致している必要があります。
第02引数のカラーリストの順序で、透明度を設定します。
■第04引数 グラデーションの配分
グラデーションの配分(配置)を、配列に格納して指定します。
0 ~ 255 の数値を指定します。昇順で格納します。
配列の要素数は、第02~03引数と一致している必要があります。
■第05引数 グラデーションの姿勢
グラデーションの姿勢を、行列で指定します。
指定可能な形式については、こちらで解説しています。
単位行列を指定した場合、以下の様な姿勢となります。
単位行列の線形グラデーションの幅は、1638.4 です。
単位行列の円形グラデーションの直径は、1638.4 です。
線形グラデーション | 円形グラデーション |
■第06引数 スプレッドの種類
スプレッドの種類です。
デフォルトは、"pad" です。
文字列 | 説明 |
"pad" | 端のカラーを引き伸ばし |
"reflect" | 反転して繰り返し |
"repeat" | 同じカラーで繰り返し |
"pad" | "reflect" | "repeat" |
■第07引数 補間の種類
補間の種類です。
デフォルトは、"rgb" です。
文字列 | 説明 |
"linearRGB" | 線形でRGB補間 |
"rgb" | RGBの補間 |
"linearRGB" | "rgb" |
■第08引数 焦点位置
グラデーションの焦点位置を、自身の x 軸方向にずらす事ができます。
-1.0 ~ 1.0 までの数値を指定します。
デフォルトは、0.0 です。
-1.0 ~ | ~ 0.0 ~ | ~ 1.0 |
■使用例
グラデーションと行列の関係を確認する (Flash 6 以降) (AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 面のグラデーション塗り設定
// ------------------------------------------------------------
// グラデーションの種類
var gradient_type = "radial";
// グラデーション
var gradient_colors = [ 0xff0000 , 0x00ff00 , 0x0000ff ]; // RGB カラーリスト
var gradient_alphas = [ 100 , 100 , 100 ]; // 透明度リスト
var gradient_ratios = [ 0 , 127.5 , 255 ]; // 配分リスト
// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
var gradient_mtx = new Object();
// 行列のタイプ
gradient_mtx.matrixType = "box";
// グラデーションの矩形
gradient_mtx.x = 0; // x 座標
gradient_mtx.y = 0; // y 座標
gradient_mtx.w = 256; // 幅
gradient_mtx.h = 256; // 高さ
// グラデーションの角度(ラジアン)
gradient_mtx.r = 0.0 * (Math.PI / 180);
// ------------------------------------------------------------
// 面に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
mc.beginGradientFill( gradient_type , gradient_colors , gradient_alphas , gradient_ratios , gradient_mtx );
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
var i = 0;
for(i=0;i < 8;i++){
var pos_y = i * 32.0;
// 矩形を描画
mc.moveTo ( 0.0 , pos_y + 0.0 );
mc.lineTo ( 256.0 , pos_y + 0.0 );
mc.lineTo ( 256.0 , pos_y + 30.0 );
mc.lineTo ( 0.0 , pos_y + 30.0 );
}
グラデーションと行列の関係を確認する (Flash 8 以降) (AS2.0)
import flash.geom.Matrix;
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc:MovieClip = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 面のグラデーション塗り設定
// ------------------------------------------------------------
// グラデーションの種類
var gradient_type:String = "radial";
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ]; // RGB カラーリスト
var gradient_alphas:Array = [ 100 , 100 , 100 ]; // 透明度リスト
var gradient_ratios:Array = [ 0 , 127.5 , 255 ]; // 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = "pad";
// 補間の種類
var interpolation_method:String = "linearRGB";
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;
// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
// 単位行列化
gradient_mtx.identity();
// 拡大縮小成分を乗算
gradient_mtx.scale( 256/1638.4 , 256/1638.4 );
// 角度成分を乗算
gradient_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
gradient_mtx.translate( 128.0 , 128.0 );
// ------------------------------------------------------------
// 面に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
mc.beginGradientFill( gradient_type , gradient_colors , gradient_alphas , gradient_ratios , gradient_mtx , spread_method , interpolation_method , focal_point_ratio );
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
var i:Number = 0;
for(i=0;i < 8;i++){
var pos_y:Number = i * 32.0;
// 矩形を描画
mc.moveTo ( 0.0 , pos_y + 0.0 );
mc.lineTo ( 256.0 , pos_y + 0.0 );
mc.lineTo ( 256.0 , pos_y + 30.0 );
mc.lineTo ( 0.0 , pos_y + 30.0 );
}
■グラデーションを矩形内に描画する例
グラデーションを矩形内にフィット描画する (Flash 6 以降) (AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 矩形
// ------------------------------------------------------------
var rect = {
x:10,
y:10,
width :Stage.width - 20,
height:Stage.height - 20
};
// ------------------------------------------------------------
// 面のグラデーション塗り設定
// ------------------------------------------------------------
// グラデーションの種類
var gradient_type = "radial";
// グラデーション
var gradient_colors = [ 0xff0000 , 0x00ff00 , 0x0000ff ]; // RGB カラーリスト
var gradient_alphas = [ 100 , 100 , 100 ]; // 透明度リスト
var gradient_ratios = [ 0 , 127.5 , 255 ]; // 配分リスト
// グラデーションの行列
var gradient_mtx = new Object();
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
mc.onEnterFrame = function (){
// ------------------------------------------------------------
// 矩形の右下端をマウス座標にフィット
// ------------------------------------------------------------
rect.width = _root._xmouse - rect.x;
rect.height = _root._ymouse - rect.y;
// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
gradient_mtx.matrixType = "box";
gradient_mtx.x = rect.x;
gradient_mtx.y = rect.y;
gradient_mtx.w = rect.width;
gradient_mtx.h = rect.height;
gradient_mtx.r = 0.0 * (Math.PI / 180);
// ------------------------------------------------------------
// 描画済みグラフィックをすべてクリアする
// ------------------------------------------------------------
mc.clear();
// ------------------------------------------------------------
// 面に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
mc.beginGradientFill(
gradient_type,
gradient_colors,
gradient_alphas,
gradient_ratios,
gradient_mtx
);
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
mc.moveTo ( rect.x + 0.0 , rect.y + 0.0 );
mc.lineTo ( rect.x + rect.width , rect.y + 0.0 );
mc.lineTo ( rect.x + rect.width , rect.y + rect.height );
mc.lineTo ( rect.x + 0.0 , rect.y + rect.height );
};
グラデーションを矩形内にフィット描画する (Flash 8 以降) (AS2.0)
import flash.geom.Rectangle;
import flash.geom.Matrix;
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc:MovieClip = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 矩形
// ------------------------------------------------------------
var rect:Rectangle = new Rectangle( 10 , 10 , Stage.width - 20 , Stage.height - 20 );
// ------------------------------------------------------------
// 面のグラデーション塗り設定
// ------------------------------------------------------------
// グラデーションの種類
var gradient_type:String = "radial";
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ]; // RGB カラーリスト
var gradient_alphas:Array = [ 100 , 100 , 100 ]; // 透明度リスト
var gradient_ratios:Array = [ 0 , 127.5 , 255 ]; // 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = "pad";
// 補間の種類
var interpolation_method:String = "linearRGB";
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
mc.onEnterFrame = function ():Void{
// ------------------------------------------------------------
// 矩形の右下端をマウス座標にフィット
// ------------------------------------------------------------
rect.width = _root._xmouse - rect.x;
rect.height = _root._ymouse - rect.y;
// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
// 中間座標
var pos_x:Number = rect.x + rect.width * 0.5;
var pos_y:Number = rect.y + rect.height * 0.5;
// 単位行列化
gradient_mtx.identity();
// 拡大縮小成分を乗算
gradient_mtx.scale(rect.width/1638.4 , rect.height/1638.4);
// 角度成分を乗算
gradient_mtx.rotate(0.0 * (Math.PI / 180));
// 移動成分を乗算
gradient_mtx.translate(pos_x , pos_y);
// ------------------------------------------------------------
// 描画済みグラフィックをすべてクリアする
// ------------------------------------------------------------
mc.clear();
// ------------------------------------------------------------
// 面に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
mc.beginGradientFill(
gradient_type,
gradient_colors,
gradient_alphas,
gradient_ratios,
gradient_mtx,
spread_method,
interpolation_method,
focal_point_ratio
);
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
mc.moveTo ( rect.x + 0.0 , rect.y + 0.0 );
mc.lineTo ( rect.x + rect.width , rect.y + 0.0 );
mc.lineTo ( rect.x + rect.width , rect.y + rect.height );
mc.lineTo ( rect.x + 0.0 , rect.y + rect.height );
};
■面に「テクスチャ塗り」スタイルを指定する (Flash 8 以降)
beginBitmapFill() メソッドを使用します。
MovieClip.beginBitmapFill ( BitmapData , 行列 , リピート? , スムーズ? ) :Void
第01引数 | BitmapData | テクスチャを BitmapData オブジェクトで指定。 |
第02引数(略可) | Matrix | テクスチャの姿勢を行列で指定。 |
第03引数(略可) | Boolean | テクスチャのタイリング描画の有無を指定。 |
第04引数(略可) | Boolean | スムージングの有無を指定。 |
戻り値 | Void | なし |
■第01引数 BitmapData
テクスチャとして使用する、ビットマップを指定します。
BitmapData クラスについては、こちらで解説しています。
■第02引数 テクスチャの姿勢
テクスチャの姿勢を、行列で指定します。
単位行列を指定した場合、基点は左上端で、等倍で表示されます。
■第03引数 タイリング描画
false を指定した場合、外周1ドットが無限に引き伸ばされます。
true を指定した場合、テクスチャは繰り返されます。
デフォルトは、true です。
false | true |
■第04引数 スムージング
false を指定した場合、ニアレストネイバーで表示されます。
true を指定した場合、バイリニアフィルタで表示されます。
デフォルトは、false です。
false | true |
■使用例
テクスチャと行列の関係を確認する (AS1.0)
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 埋め込んだ画像ファイルから、BitmapData オブジェクトを作成する (リンケージ識別子 "my_bitmap" )
// ------------------------------------------------------------
var bitmap_data = flash.display.BitmapData.loadBitmap("my_bitmap");
// ------------------------------------------------------------
// 面のテクスチャ塗り設定
// ------------------------------------------------------------
// テクスチャの行列
var texture_mtx = new flash.geom.Matrix();
// タイリング描画の有無
var texture_repeat = false;
// スムージングの有無
var texture_smooth = true;
// ------------------------------------------------------------
// テクスチャの行列
// ------------------------------------------------------------
// 単位行列化
texture_mtx.identity();
// 拡大縮小成分を乗算
texture_mtx.scale( 1.0 , 1.0 );
// 角度成分を乗算
texture_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
texture_mtx.translate( 0.0 , 0.0 );
// ------------------------------------------------------------
// 面に「テクスチャ塗り」スタイルを指定する
// ------------------------------------------------------------
mc.beginBitmapFill( bitmap_data , texture_mtx , texture_repeat , texture_smooth );
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
var i = 0;
for(i=0;i < 16;i++){
var pos_y = i * 32.0;
// 矩形を描画
mc.moveTo ( 0.0 , pos_y + 0.0 );
mc.lineTo ( 512.0 , pos_y + 0.0 );
mc.lineTo ( 512.0 , pos_y + 30.0 );
mc.lineTo ( 0.0 , pos_y + 30.0 );
}
テクスチャと行列の関係を確認する (AS2.0)
import flash.display.BitmapData;
import flash.geom.Matrix;
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc:MovieClip = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 埋め込んだ画像ファイルから、BitmapData オブジェクトを作成する (リンケージ識別子 "my_bitmap" )
// ------------------------------------------------------------
var bitmap_data:BitmapData = BitmapData.loadBitmap("my_bitmap");
// ------------------------------------------------------------
// 面のテクスチャ塗り設定
// ------------------------------------------------------------
// テクスチャの行列
var texture_mtx:Matrix = new Matrix();
// タイリング描画の有無
var texture_repeat:Boolean = false;
// スムージングの有無
var texture_smooth:Boolean = true;
// ------------------------------------------------------------
// テクスチャの行列
// ------------------------------------------------------------
// 単位行列化
texture_mtx.identity();
// 拡大縮小成分を乗算
texture_mtx.scale( 1.0 , 1.0 );
// 角度成分を乗算
texture_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
texture_mtx.translate( 0.0 , 0.0 );
// ------------------------------------------------------------
// 面に「テクスチャ塗り」スタイルを指定する
// ------------------------------------------------------------
mc.beginBitmapFill( bitmap_data , texture_mtx , texture_repeat , texture_smooth );
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
var i:Number = 0;
for(i=0;i < 16;i++){
var pos_y:Number = i * 32.0;
// 矩形を描画
mc.moveTo ( 0.0 , pos_y + 0.0 );
mc.lineTo ( 512.0 , pos_y + 0.0 );
mc.lineTo ( 512.0 , pos_y + 30.0 );
mc.lineTo ( 0.0 , pos_y + 30.0 );
}
直線を描画する
サンプルをダウンロード
線描画の事前処理について
■描画スタイルを設定する
線の描画スタイルを設定します。
直線を描画する
1.開始位置を指定する
moveTo() メソッドを使用します。
2.直線を描画する
lineTo() メソッドを使用します。
直前の描画パスと、今回の描画パスとの間に、直線を描画します。
MovieClip.lineTo( x , y ) :void
第01引数 | Number | x 座標を指定する |
第02引数 | Number | y 座標を指定する |
戻り値 | void | なし |
3.直線を連続して描画する
lineTo() メソッドを繰り返し実行すると、連続して直線を描画できます。
途中で、線の描画スタイルを変更する事もできます。
使用例
座標(20,40)から(200,100)まで線を引く
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle (1 , 0x000000 , 100);
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( 20.0 , 40.0 );
// 直線を描画
mc.lineTo ( 200.0 , 100.0 );
連続で線を引く
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle (1 , 0x000000 , 100);
// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
mc.moveTo ( 20.0 , 40.0 );
// 直線を描画
mc.lineTo ( 100.0 , 100.0 );
// 直線を描画
mc.lineTo ( 200.0 , 80.0 );
// 直線を描画
mc.lineTo ( 300.0 , 150.0 );
曲線を描画する
サンプルをダウンロード
線描画の事前処理について
■描画スタイルを設定する
線の描画スタイルを設定します。
2次ベジェ曲線を描画する
1.開始位置を指定する
moveTo() メソッドを使用します。
2.二次ベジェ曲線を描画する
curveTo() メソッドを使用します。
2次ベジェ曲線は、「始端」「制御」「終端」の3つの座標で制御します。
MovieClip.curveTo( 制御X , 制御Y , 終端X , 終端Y ) :void
第01引数 | Number | (制御座標) x 座標を指定する |
第02引数 | Number | (制御座標) y 座標を指定する |
第03引数 | Number | (終端座標) x 座標を指定する |
第04引数 | Number | (終端座標) y 座標を指定する |
戻り値 | void | なし |
3.曲線を連続して描画する
curveTo() メソッドを繰り返し実行すると、連続して曲線を描画できます。
途中で、線の描画スタイルを変更する事もできます。
使用例
2次ベジェ曲線を描画する
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle (1 , 0x000000 , 100);
// ------------------------------------------------------------
// 2次ベジェ曲線を描画する
// ------------------------------------------------------------
// 3つの座標
var pos0 = { x: 20.0 , y:280.0 };
var pos1 = { x:150.0 , y: 20.0 };
var pos2 = { x:400.0 , y:150.0 };
// 開始位置
mc.moveTo ( pos0.x,pos0.y );
// 2次ベジェ曲線を描画
mc.curveTo ( pos1.x,pos1.y , pos2.x,pos2.y );
マウスで自由に線を描く
サンプルをダウンロード
■マウスで自由に線を描く
1.マウスボタンの押下状態を取得する
以下のイベントを使用して、マウスボタンの状態を監視します。
イベントプロパティ | 解説 |
onMouseDown | マウスの左ボタンを押した |
onMouseUp | マウスの左ボタンを離した |
2.マウスカーソルの位置を取得する
こちらで解説しています。
3.ドラッグ操作中に直線を描画する
ドラッグ操作中であれば、「以前の位置」と「現在の位置」との間に、直線を描画します。
■実装例
ドラッグ操作で、線を描く
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
(function(){
// マウス座標のリスト
var mouse_pos_list = new Array();
// ------------------------------------------------------------
// マウスの左ボタンを押すと実行されるイベント
// ------------------------------------------------------------
mc.onMouseDown = function (){
// マウスカーソルの位置を取得
var pos = { x:mc._xmouse , y:mc._ymouse };
// 座標リストを初期化 (要素数:1)
mouse_pos_list = [pos];
};
// ------------------------------------------------------------
// マウスの左ボタンを離すと実行されるイベント
// ------------------------------------------------------------
mc.onMouseUp = function (){
// 座標リストをクリア (要素数:0)
mouse_pos_list = new Array();
};
// ------------------------------------------------------------
// マウスカーソルを移動すると実行されるイベント
// ------------------------------------------------------------
mc.onMouseMove = function (){
// ドラッグ操作中か
if(mouse_pos_list.length < 1) return;
// マウスカーソルの位置を取得
var pos = { x:mc._xmouse , y:mc._ymouse };
// 座標リストに追加
mouse_pos_list.push(pos);
};
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
mc.onEnterFrame = function(){
// ------------------------------------------------------------
// 座標リストの総数
// ------------------------------------------------------------
var num = mouse_pos_list.length
if(num < 2) return;
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
mc.lineStyle ( 5 , 0x000000 , 100 );
// ------------------------------------------------------------
// 開始位置を指定する
// ------------------------------------------------------------
var pos = mouse_pos_list[0];
mc.moveTo ( pos.x , pos.y );
// ------------------------------------------------------------
// 連続で直線を描画する
// ------------------------------------------------------------
var i;
for(i=1;i < num;i++){
pos = mouse_pos_list[i];
// 直線を描画する
mc.lineTo ( pos.x , pos.y );
}
// ------------------------------------------------------------
// 座標リストを初期化する
// ------------------------------------------------------------
mouse_pos_list = [pos];
};
}).call();
描画パスで囲んで面を描画する
面描画の事前処理について
■描画スタイルを設定する
描画パスで囲んで面を描画する
1.描画パスを開始する
moveTo() メソッドを使用します。
2.描画パスを指定する
描画パスを指定する方法は、以下の種類があります。
何度か呼び出して、好きなだけ描画パスを増やします。
3.描画パスを閉じる
endFill() メソッドを使用します。
最後と最初に指定した描画パスは繋がれ、面となります。
描画パスで囲んだ内側は、塗りつぶされます。
使用例
描画パスで囲んで面を描画する
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
mc.lineStyle (5 , 0x000000 , 100);
// 面に「単一色塗り」スタイルを指定する
mc.beginFill (0x808080 , 100);
// ------------------------------------------------------------
// 描画パスで囲んで面を描画する
// ------------------------------------------------------------
// 描画パスを開始する
mc.moveTo ( 25.0 , 100.0 );
// 描画パスを指定して囲む
mc.lineTo ( 75.0 , 35.0 );
mc.lineTo ( 165.0 , 55.0 );
mc.lineTo ( 325.0 , 25.0 );
mc.lineTo ( 375.0 , 95.0 );
mc.lineTo ( 265.0 , 165.0 );
mc.lineTo ( 205.0 , 135.0 );
mc.lineTo ( 75.0 , 165.0 );
// 描画パスを閉じて、塗りつぶしを確定する
mc.endFill ();
パスで囲んで図形を描画する
■円を描画する
円を描画する
// ------------------------------------------------------------
// 円を描画する関数
// ------------------------------------------------------------
function MovieClipDrawCircle ( mc , x , y , radius ) {
var q = 8; // 品質(8 で Flash の図形と同等)
var i;
var t;
var r = -Math.PI * 0.5;
var a = 1 / q * Math.PI * 2;
var p0;
var p1;
p0 = {
x:Math.cos(r) * radius,
y:Math.sin(r) * radius
};
mc.moveTo (
x + (p0.x),
y + (p0.y)
);
for(i=0;i < q;i++){
r += a;
p1 = {
x:Math.cos(r) * radius,
y:Math.sin(r) * radius
};
t = -(p1.x * p0.x + p1.y * p0.y - (p1.x * p1.x + p1.y * p1.y)) / (p1.x * (-p0.y) + p1.y * p0.x);
mc.curveTo(
x + ((p0.x) + t * (-p0.y)),
y + ((p0.y) + t * ( p0.x)),
x + (p1.x),
y + (p1.y)
);
p0 = p1;
}
return true;
}
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
mc.lineStyle (5 , 0x000000 , 100);
// 面に「単一色塗り」スタイルを指定する
mc.beginFill (0x808080 , 100);
// ------------------------------------------------------------
// 円を描画する
// ------------------------------------------------------------
MovieClipDrawCircle ( mc , 120.0 , 150.0 , 100.0 );
MovieClipDrawCircle ( mc , 350.0 , 150.0 , 80.0 );
■楕円を描画する
楕円を描画する
// ------------------------------------------------------------
// 楕円を描画する関数
// ------------------------------------------------------------
function MovieClipDrawEllipse ( mc , x , y , width , height ) {
var q = 8; // 品質(8 で Flash の図形と同等)
var i;
var t;
var r = -Math.PI * 0.5;
var a = 1 / q * Math.PI * 2;
var p0;
var p1;
var sx;
var sy;
var radius;
if(width > height){
sx = width / height;
sy = 1.0;
radius = height * 0.5;
}else{
sx = 1.0;
sy = height / width;
radius = width * 0.5;
}
x += width * 0.5;
y += height * 0.5;
p0 = {
x:Math.cos(r) * radius,
y:Math.sin(r) * radius
};
mc.moveTo (
x + (p0.x) * sx,
y + (p0.y) * sy
);
for(i=0;i < q;i++){
r += a;
p1 = {
x:Math.cos(r) * radius,
y:Math.sin(r) * radius
};
t = -(p1.x * p0.x + p1.y * p0.y - (p1.x * p1.x + p1.y * p1.y)) / (p1.x * (-p0.y) + p1.y * p0.x);
mc.curveTo(
x + ((p0.x) + t * (-p0.y)) * sx,
y + ((p0.y) + t * ( p0.x)) * sy,
x + (p1.x) * sx,
y + (p1.y) * sy
);
p0 = p1;
}
return true;
}
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
mc.lineStyle (5 , 0x000000 , 100);
// 面に「単一色塗り」スタイルを指定する
mc.beginFill (0x808080 , 100);
// ------------------------------------------------------------
// 楕円を描画する
// ------------------------------------------------------------
MovieClipDrawEllipse ( mc , 50.0 , 20.0 , 100.0 , 250.0 );
MovieClipDrawEllipse ( mc , 200.0 , 50.0 , 300.0 , 150.0 );
■矩形を描画する
矩形を描画する
// ------------------------------------------------------------
// 矩形を描画する関数
// ------------------------------------------------------------
function MovieClipDrawRect ( mc , x , y , width , height ) {
mc.moveTo ( x + 0.0 , y + 0.0 );
mc.lineTo ( x + width , y + 0.0 );
mc.lineTo ( x + width , y + height );
mc.lineTo ( x + 0.0 , y + height );
return true;
}
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
mc.lineStyle (5 , 0x000000 , 100);
// 面に「単一色塗り」スタイルを指定する
mc.beginFill (0x808080 , 100);
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
MovieClipDrawRect ( mc , 50.0 , 20.0 , 100.0 , 250.0 );
MovieClipDrawRect ( mc , 200.0 , 50.0 , 300.0 , 150.0 );
■角丸矩形を描画する
角丸矩形を描画する
// ------------------------------------------------------------
// 角丸矩形を描画する関数
// ------------------------------------------------------------
function MovieClipDrawRoundRect ( mc , x , y , width , height , ellipseWidth , ellipseHeight ) {
if(ellipseHeight === undefined) ellipseHeight = ellipseWidth;
if(ellipseWidth > width ) ellipseWidth = width;
if(ellipseHeight > height) ellipseHeight = height;
var px;
var py;
var w0 = ellipseWidth * 0.5;
var h0 = ellipseHeight * 0.5;
var w1 = 0.707106781186548 * w0;
var h1 = 0.707106781186548 * h0;
var w2 = 0.414213562373095 * w0;
var h2 = 0.414213562373095 * h0;
px = x + width - w0;
py = y + h0;
mc.moveTo ( px , py - h0 );
mc.curveTo ( px + w2 , py - h0 , px + w1 , py - h1 );
mc.curveTo ( px + w0 , py - h2 , px + w0 , py );
py = y + height - h0;
mc.lineTo ( px + w0 , py );
mc.curveTo ( px + w0 , py + h2 , px + w1 , py + h1 );
mc.curveTo ( px + w2 , py + h0 , px , py + h0 );
px = x + w0;
mc.lineTo ( px , py + h0 );
mc.curveTo ( px - w2 , py + h0 , px - w1 , py + h1 );
mc.curveTo ( px - w0 , py + h2 , px - w0 , py );
py = y + h0;
mc.lineTo ( px - w0 , py );
mc.curveTo ( px - w0 , py - h2 , px - w1 , py - h1 );
mc.curveTo ( px - w2 , py - h0 , px , py - h0 );
return true;
}
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
mc.lineStyle (5 , 0x000000 , 100);
// 面に「単一色塗り」スタイルを指定する
mc.beginFill (0x808080 , 100);
// ------------------------------------------------------------
// 角丸矩形を描画する
// ------------------------------------------------------------
MovieClipDrawRoundRect ( mc , 50.0 , 20.0 , 100.0 , 250.0 , 20 , 20 );
MovieClipDrawRoundRect ( mc , 200.0 , 50.0 , 300.0 , 150.0 , 40 , 60 );
■正多角形を描画する
正多角形を描画する
// ------------------------------------------------------------
// 正多角形を描画する関数
// ------------------------------------------------------------
function MovieClipDrawRegularPolygon ( mc , x , y , radius , vertex , angle ) {
if(vertex < 3) return false;
angle -= Math.PI * 0.5;
mc.moveTo (
x + Math.cos(angle) * radius,
y + Math.sin(angle) * radius
);
var a = 1 / vertex * Math.PI * 2;
var i;
for(i=0;i < vertex;i++){
angle += a;
mc.lineTo(
x + Math.cos(angle) * radius,
y + Math.sin(angle) * radius
);
}
return true;
}
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
mc.lineStyle (5 , 0x000000 , 100);
// 面に「単一色塗り」スタイルを指定する
mc.beginFill (0x808080 , 100);
// ------------------------------------------------------------
// 正多角形を描画する
// ------------------------------------------------------------
MovieClipDrawRegularPolygon ( mc , 120.0 , 150.0 , 100.0 , 5 , 15.0 * (Math.PI/180) );
MovieClipDrawRegularPolygon ( mc , 350.0 , 150.0 , 80.0 , 7 , 0.0 * (Math.PI/180) );
■星を描画する
星を描画する関数
// ------------------------------------------------------------
// 星を描画する関数
// ------------------------------------------------------------
function MovieClipDrawStar ( mc , x , y , radius , vertex , angle , indent ) {
if(vertex < 3) return false;
vertex *= 2;
angle -= Math.PI * 0.5;
mc.moveTo (
x + Math.cos(angle) * radius,
y + Math.sin(angle) * radius
);
var a = 1 / vertex * Math.PI * 2;
var r;
var i;
for(i=0;i < vertex;i++){
angle += a;
r = (i % 2) ? (radius):(radius * indent);
mc.lineTo(
x + Math.cos(angle) * r,
y + Math.sin(angle) * r
);
}
return true;
}
// ------------------------------------------------------------
// ムービークリップを作成
// ------------------------------------------------------------
var mc = _root.createEmptyMovieClip("new_mc" , 0);
// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
mc.lineStyle (5 , 0x000000 , 100);
// 面に「単一色塗り」スタイルを指定する
mc.beginFill (0x808080 , 100);
// ------------------------------------------------------------
// 星を描画する
// ------------------------------------------------------------
MovieClipDrawStar ( mc , 120.0 , 150.0 , 100.0 , 5 , 15.0 * (Math.PI/180) , 0.5 );
MovieClipDrawStar ( mc , 350.0 , 150.0 , 80.0 , 7 , 0.0 * (Math.PI/180) , 0.8 );