Flashゲーム講座 & アクションスクリプトサンプル集

 

描画関連の機能について

 


■描画関連の機能について

 
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なし
 
■描画パスが暗黙的に閉じられる場合
 
描画パスは、他の手段でも閉じる事ができます。
 
ただし、「面の塗りつぶし」は確定しません。
 
moveTo() メソッドを呼び出すと、以前の描画パスは閉じられます。
 
面の描画スタイルを変更すると、以前の描画パスは閉じられます。
 
■「面の塗りつぶし」を確定させなかった場合
 
描画パスがねじれて重なった場合、面の有無は反転します。
 
この仕様が、2つの面が重なった場合にも、継続して適用され続けます。
 
面が、偶数回重なった場合、面無し状態に変化します。
 
面が、奇数回重なった場合、面有り状態に変化します。
 

■グラデーションの行列について

 
■グラデーションを矩形の中に収める形式 (Flash 7 以前)
 
新規にオブジェクトを作成し、以下のプロパティを追加します。
 
プロパティ名説明
matrixTypeString"box" を指定
xNumber x 座標(基点は左上端)
yNumber y 座標(基点は左上端)
wNumberグラデーションの幅
hNumberグラデーションの高さ
rNumberグラデーションの角度(単位:ラジアン)
 
グラデーションを矩形の中に収める形式

// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
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 );

};
 

■線の描画スタイルをリセットする

 
lineStyle() メソッドを使用します。
 
引数をすべて省略します。
 
■使用例
 
線の描画スタイルをリセットする (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引数 Numberx 座標を指定する
第02引数 Numbery 座標を指定する
戻り値 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.描画パスを指定する
 
描画パスを指定する方法は、以下の種類があります。
 
何度か呼び出して、好きなだけ描画パスを増やします。
 
メソッド名 説明
lineTo() 直線を描画する
curveTo() 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 );