HAKUHIN's home page
更新履歴
 
 



描画した物をすべてクリアしたい
 
 


■描画した物をすべてクリアする
 
描画したものをすべて消すには clear () メソッドを呼び出します。
ただしこのメソッドは、色や線の太さなどの スタイルの情報もすべてクリアされるので、このメソッドを呼び出した後はスタイルを再設定する必要があります。
 
MovieClip.clear ();
第01引数 なし
戻り値 なし
 
ムービークリップ "mc" に描画したものをすべて消す

mc.lineStyle (1, 0x000000, 100);
mc.moveTo (20, 40);
mc.lineTo (100, 200);


mc.clear ();			// すべてクリア
mc.lineStyle (1, 0x000000, 100);	// スタイルを再設定
 




線のスタイルについて
 
 


■線のスタイルについて
 
線のスタイルは、線の太さやカラーの種類を設定することができます。線のスタイルには単一カラーとグラデーションカラーの2種類あります。デフォルトでは null になっているため なんらかのスタイルを設定しないと、描画されません。
 


 



■単一色カラーのラインスタイル
 
単一色カラーでラインスタイルの設定をするには、lineStyle メソッドを使用します。
 
MovieClip.lineStyle ( 太さ , 線の色 , 透明度 , ヒンディング , "スケールモード" , "線の先の種類" , "線の角の種類" , マイター限度 );
第01引数 線の太さ 0 ~ 255 ( 0 = 極細線)
第02引数(略可)カラー 0xFFFFFF
第03引数(略可)透明度 0 ~ 100
第04引数(略可)線をヒンティングするかをBoolean型で指定(Flash 8 以降)
第05引数(略可)スケールモードを文字で指定(下に解説あり) (Flash 8 以降)
第06引数(略可)線の先の種類を文字で指定(下に解説あり) (Flash 8 以降)
第07引数(略可)角の種類を文字で指定(下に解説あり) (Flash 8 以降)
第08引数(略可)第07引数をマイターに設定した時に、角の切り取られる限度 (0 ~ 255)(Flash 8 以降)
戻り値 なし
 
■第05引数 スケールモードの種類(Flash 8 以降)
 
第05引数で設定するスケールモードの種類です。
 
文字説明
"normal"拡大縮小で線の太さが変わります
"horizontal"横方向のみ拡大縮小で線の太さが変わります
"vertical"縦方向のみ拡大縮小で線の太さが変わります
"none"拡大縮小で線の太さは変わりません
 
■第06引数 線の先の種類(Flash 8 以降)
 
第06引数で設定する線の先の種類です。
 
文字説明
"none"線の先にキャップなし
"round"線の先に丸いキャップ
"square"線の先に四角いキャップ
 
"none""round""square"
 
■第07引数 角の種類(Flash 8 以降)
 
第06引数で設定する線の先の種類です。
 
文字説明
"miter"角をマイター結合
"bevel"角をベベル結合
"round"角をラウンド結合
 
"miter""bevel""round"
 
_root 上に単一色でラインを描画

_root.lineStyle (10, 0xFF0000, 100);	// 線のスタイル
_root.moveTo (0, 0);
_root.lineTo (100, 100);
 
_root 上に単一色でラインを描画(Flash 8 以降)

_root.lineStyle (20, 0x00FF00, 100,true, "none", "round", "miter", 90);	// 線のスタイル
_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo ( 50, 150);
_root.lineTo (200, 150);
 



■グラデーションカラーのラインスタイル(Flash 8 以降)
 
グラデーションカラーでラインスタイルの設定をするには、lineGradientStyle メソッドを使用します。
事前にlineStyle メソッドを呼び出してラインスタイルを設定する必要があります。ラインスタイルを設定してない状態で lineGradientStyle() メソッドを呼び出しても何も起こりません。
 
MovieClip.lineGradientStyle (
"種類" , [カラー] , [透明度] , [配分] , 行列 , "スプレッド" , "補完" , 焦点 );
第01引数 グラデーションの種類 (下に解説あり)
第02引数 カラーを配列にして指定 (0xFFFFFF) (下に解説あり)
第03引数 透明度を配列にして指定 (0 ~ 100) (下に解説あり)
第04引数 比率配分 (0 ~ 255、昇順にする) (下に解説あり)
第05引数(略可)Matrix オブジェクト (下に解説あり)
第06引数(略可)スプレッドの種類を文字で指定(下に解説あり)
第07引数(略可)補完の種類を文字で指定(下に解説あり)
第08引数(略可)焦点位置 (-1.0 ~ 1.0)(下に解説あり)
戻り値 なし
 
■第01引数 グラデーションの種類
 
第 01 引数で設定するグラデーションの種類です。
 
文字説明
"linear"線状グラデーション
"radial"円状グラデーション
 
■第02引数 カラーの設定
 
グラデーションで使用するカラーの数だけ配列を確保して、0xFFFFFF 形式で指定します。例えば下の画像のように5つカラーを持つグラデーションを作りたい場合は以下のようなパラメータになります。
 
 
 
第02引数で設定するカラー成分

[0xFF3333, 0xFFFF33, 0x33FF33, 0x33FFFF, 0x3333FF]
 
■第03引数 透明度の設定
 
第02引数で設定したカラーと同じ順番で、今度は透明度を指定します。範囲は 0 ~ 100 となっています。
 
 
 
第03引数で設定する透明度成分

[     0 ,     25 ,      50 ,     75 ,      100]
 
■第04引数 レシオの設定
 
第02引数で設定したカラーと同じ順番で、今度はグラデーションの位置を指定します。下の画像のように、左であるほど 0 中央であるほど 127 右であるほど 255 として、 どのカラーがどの場所にくるかを指定します。順番は左から昇順になっている必要があります。
 
 
 
第04引数で設定するレシオ成分

[0, 64, 128, 196, 255]
 
■第05引数 行列の設定
 
正規化された行列では以下のようなカラーの姿勢をとることになります。
 
赤い線が x 成分のベクトル、 青い線が y 成分のベクトル、線の接点が座標です。線形グラデーションでは、y 軸方向にグラデーションが伸びます。
 
線形グラデーション円形グラデーション
 
この行列情報を元にカラーグラデーションが Flash 上に配置されます。
 
正規化されている場合、原点に配置され、線状グラデーションの場合 x 方向の幅が 1638.4 ピクセルのサイズになり、 放射状グラデーションの場合直径 1638.4 ピクセルのサイズになります。 (※資料が無いので正確な数値は不明ですが 1638.4 でちょうど一致するようです)
 
四角形が Flash Player のサイズ
長細い円柱が今回描きたい線
 
そしてこの状態で図のように線を引いたとしたら、このグラデーション位置にくる色が写し取られるように描画されます。
 
実際に描画された状態
 
このスタイルを使って線をたくさん引いてみると、グラデーションが浮かび上がることからもわかります。
 
同じスタイルで複数の線を引く
 
例えば、線状グラデーションで以下の例のように行列を作成した場合に描画されるグラデーションは下の図のようになります。
 
 
x方向の幅 100 高さ200 で、60度回転し、座標(50,100)に移動する行列 (matrixType に box 指定時)

var m = {
	matrixType:"box",	// マトリックスの種類
	x:0,		// x座標
	y:0,		// y座標
	w:100,		// 幅
	h:200,		// 高さ
	r:60 * Math.PI / 180	// 角度
};
 
オブジェクトによる行列の指定

var m = {
	a:1.0 * 1638.4, b:0.0,          c:0.0,
	d:0.0,          e:1.0 * 1638.4, f:0.0,
	g:100.0,        h:200.0,        i:1.0
};
 
x方向に0.1倍 y 方向に1.0倍拡大して、60度回転し、座標(100,200)に移動する行列(Matrix オブジェクトによる指定)(Flash 8 以降)

var m = new flash.geom.Matrix();
m.identity();		// 正規化
m.scale(0.1,1.0);		// 行列 *= スケーリング
m.rotate(Math.PI / 180 * 60);	// 行列 *= 回転
m.translate(100,200);		// 行列 *= 平行移動
 
■第06引数 スプレッドの種類
 
第 06 引数で設定するスプレッドの種類です。
 
文字説明
"pad"端のカラーを引き伸ばし
"reflect"反転して繰り返し
"repeat"同じカラーで繰り返し
 
"pad""reflect""repeat"
 
■第07引数 補完の種類
 
第 07 引数で設定する補完の種類です。
 
文字説明
"linearRGB"線形でRGB補間
"rgb"RGBの補間
 
"linearRGB""rgb"
 
■第08引数 焦点位置を設定
 
グラデーションの焦点位置を行列の x 軸方向にずらします。 -1.0 ~ 1.0 までの数値で指定します。
 
-1.0 ~~ 0.0 ~~ 1.0
 
使用例です。
 
グラデーションでラインを描画(MatrixType:"BOX" 指定)

var m = {
	matrixType:"box",	// マトリックスの種類
	x:0,		// x座標
	y:0,		// y座標
	w:100,		// 幅
	h:200,		// 高さ
	r:60 * Math.PI / 180	// 角度
};

_root.lineStyle (10, 0x000000, 100);	// 線の太さ
_root.lineGradientStyle (
	"radial",
	[0xFF0000 , 0xFFFF00 , 0x00FF00 , 0x00FFFF , 0x0000FF],	// カラー
	[       0 ,       25 ,       50 ,       75 ,      100],	// アルファ
	[       0 ,       64 ,      127 ,      192 ,      255],	// 位置配分(0 ~ 255)
	m,			// 行列
	"pad",
	"linearRGB",
	0.0
);

_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo ( 50, 150);
_root.lineTo (200, 150);
 
グラデーションでラインを描画(Matrix オブジェクト指定)

var m = new flash.geom.Matrix();
m.identity();			// 正規化
m.scale(0.2,0.2);			// 行列 *= スケーリング
m.rotate(Math.PI / 180 * 60);		// 行列 *= 回転
m.translate(50,50);			// 行列 *= 平行移動

_root.lineStyle (10, 0x000000, 100);	// 線の太さ
_root.lineGradientStyle (
	"radial",
	[0xFF0000 , 0xFFFF00 , 0x00FF00 , 0x00FFFF , 0x0000FF],	// カラー
	[       0 ,       25 ,       50 ,       75 ,      100],	// アルファ
	[       0 ,       64 ,      127 ,      192 ,      255],	// 位置配分(0 ~ 255)
	m,			// 行列
	"pad",
	"linearRGB",
	0.0
);

_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo ( 50, 150);
_root.lineTo (200, 150);
 


 

塗りのスタイルについて
 


■塗りのスタイルについて
 
塗りのスタイルには単一カラーとグラデーションカラーとテクスチャの3種類あります。デフォルトでは null になっているため なんらかのスタイルを設定しないと、描画されません。
 



 



■単一色カラーのフィルスタイル
 
単一色カラーでフィルスタイルの設定をするには、beginFill メソッドを使用します。
 
MovieClip.beginFill ( 色 , 透明度 );
第01引数 カラー 0xFFFFFF
第02引数(略可)透明度 0 ~ 100
戻り値 なし
 
単一カラーで面を描画

_root.beginFill (0xFF0000, 100);	// 単一色のスタイル設定

_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo (200, 150);
_root.lineTo ( 50, 150);
_root.endFill();
 



■グラデーションカラーのフィルスタイル
 
グラデーションカラーでフィルスタイルの設定をするには、beginGradientFill メソッドを使用します。
 
MovieClip.beginGradientFill ( "種類" , [カラー] , [透明度] , [配分] , 行列 , "スプレッド" , "補完" , 焦点 );
第01引数 グラデーションの種類 (下に解説あり)
第02引数 カラーを配列にして指定 (0xFFFFFF) (下に解説あり)
第03引数 透明度を配列にして指定 (0 ~ 100) (下に解説あり)
第04引数 比率配分 (0 ~ 255、昇順にする) (下に解説あり)
第05引数(略可)Matrix オブジェクト (下に解説あり)
第06引数(略可)スプレッドの種類を文字で指定(下に解説あり)(Flash 8 以降)
第07引数(略可)補完の種類を文字で指定(下に解説あり)(Flash 8 以降)
第08引数(略可)焦点位置 (-1.0 ~ 1.0)(下に解説あり)(Flash 8 以降)
戻り値 なし
 
■第01引数 グラデーションの種類
 
第 01 引数で設定するグラデーションの種類です。
 
文字説明
"linear"線状グラデーション
"radial"円状グラデーション
 
■第02引数 カラーの設定
 
グラデーションで使用するカラーの数だけ配列を確保して、0xFFFFFF 形式で指定します。例えば下の画像のように5つカラーを持つグラデーションを作りたい場合は以下のようなパラメータになります。
 
 
 
第02引数で設定するカラー成分

[0xFF3333, 0xFFFF33, 0x33FF33, 0x33FFFF, 0x3333FF]
 
■第03引数 透明度の設定
 
第02引数で設定したカラーと同じ順番で、今度は透明度を指定します。範囲は 0 ~ 100 となっています。
 
 
 
第03引数で設定する透明度成分

[     0 ,     25 ,      50 ,     75 ,      100]
 
■第04引数 レシオの設定
 
第02引数で設定したカラーと同じ順番で、今度はグラデーションの位置を指定します。下の画像のように、左であるほど 0 中央であるほど 127 右であるほど 255 として、 どのカラーがどの場所にくるかを指定します。順番は左から昇順になっている必要があります。
 
 
 
第04引数で設定するレシオ成分

[0, 64, 128, 196, 255]
 
■第05引数 行列の設定
 
正規化された行列では以下のようなカラーの姿勢をとることになります。
 
赤い線が x 成分のベクトル、 青い線が y 成分のベクトル、線の接点が座標です。線形グラデーションでは、y 軸方向にグラデーションが伸びます。
 
線形グラデーション円形グラデーション
 
この行列情報を元にカラーグラデーションが Flash 上に配置されます。
 
正規化されている場合、原点に配置され、線状グラデーションの場合 x 方向の幅が 1638.4 ピクセルのサイズになり、 放射状グラデーションの場合直径 1638.4 ピクセルのサイズになります。 (※資料が無いので正確な数値は不明ですが 1638.4 でちょうど一致するようです)
 
四角形が Flash Player のサイズ
長細い円柱が今回描きたい線
 
そしてこの状態で図のように線を引いたとしたら、このグラデーション位置にくる色が写し取られるように描画されます。
 
実際に描画された状態
 
このスタイルを使って線をたくさん引いてみると、グラデーションが浮かび上がることからもわかります。
 
同じスタイルで複数の線を引く
 
例えば、線状グラデーションで以下のように行列を作成した場合に描画されるグラデーションは下の図のようになります。
 
 
x方向の幅 100 高さ200 で、60度回転し、座標(50,100)に移動する行列 (matrixType に box 指定時)

var m = {
	matrixType:"box",	// マトリックスの種類
	x:50,		// x座標
	y:50,		// y座標
	w:150,		// 幅
	h:100,		// 高さ
	r:60 * Math.PI / 180	// 角度
};
 
オブジェクトによる行列の指定

var m = {
	a:1.0 * 1638.4, b:0.0,          c:0.0,
	d:0.0,          e:1.0 * 1638.4, f:0.0,
	g:100.0,        h:200.0,        i:1.0
};
 
x方向に0.1倍 y 方向に1.0倍拡大して、60度回転し、座標(100,200)に移動する行列(Matrix オブジェクトによる指定)(Flash 8 以降)

var m = new flash.geom.Matrix();
m.identity();		// 正規化
m.scale(0.1,1.0);		// 行列 *= スケーリング
m.rotate(Math.PI / 180 * 60);	// 行列 *= 回転
m.translate(100,200);		// 行列 *= 平行移動
 
■第06引数 スプレッドの種類(Flash 8 以降)
 
第 06 引数で設定するスプレッドの種類です。
 
文字説明
"pad"端のカラーを引き伸ばし
"reflect"反転して繰り返し
"repeat"同じカラーで繰り返し
 
"pad""reflect""repeat"
 
■第07引数 補完の種類(Flash 8 以降)
 
第 07 引数で設定する補完の種類です。
 
文字説明
"linearRGB"線形でRGB補間
"rgb"RGBの補間
 
"linearRGB""rgb"
 
■第08引数 焦点位置を設定(Flash 8 以降)
 
グラデーションの焦点位置を行列の x 軸方向にずらします。 -1.0 ~ 1.0 までの数値で指定します。
 
-1.0 ~~ 0.0 ~~ 1.0
 
使用例です。
 
グラデーションで面を描画(MatrixType:"BOX" 指定)

var m = {
	matrixType:"box",	// マトリックスの種類
	x:50,		// x座標
	y:50,		// y座標
	w:150,		// 幅
	h:100,		// 高さ
	r:60 * Math.PI / 180	// 角度
};

_root.beginGradientFill (
	"radial",
	[0xFF0000 , 0xFFFF00 , 0x00FF00 , 0x00FFFF , 0x0000FF],	// カラー
	[       0 ,       25 ,       50 ,       75 ,      100],	// アルファ
	[       0 ,       64 ,      127 ,      192 ,      255],	// 位置配分(0 ~ 255)
	m,			// 行列
	"pad",
	"linearRGB",
	0.0
);

_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo (200, 150);
_root.lineTo ( 50, 150);
_root.endFill();
 
グラデーションで面を描画(Matrix オブジェクト指定)

var m = new flash.geom.Matrix();
m.identity();			// 正規化
m.scale(0.1,0.2);			// 行列 *= スケーリング
m.rotate(Math.PI / 180 * 60);		// 行列 *= 回転
m.translate(125,100);			// 行列 *= 平行移動

_root.beginGradientFill (
	"radial",
	[0xFF0000 , 0xFFFF00 , 0x00FF00 , 0x00FFFF , 0x0000FF],	// カラー
	[       0 ,       25 ,       50 ,       75 ,      100],	// アルファ
	[       0 ,       64 ,      127 ,      192 ,      255],	// 位置配分(0 ~ 255)
	m,			// 行列
	"pad",
	"linearRGB",
	0.0
);

_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo (200, 150);
_root.lineTo ( 50, 150);
_root.endFill();
 



■テクスチャ塗りのフィルスタイル(Flash 8 以降)
 
テクスチャ塗りでフィルスタイルの設定をするには、beginBitmapFill メソッドを使用します。
 
MovieClip.beginBitmapFill ( BitmapData , Matrix , テクスチャの繰り返し , スムージング );
第01引数 テクスチャのソースとなるBitmapData インスタンスを指定
第02引数(略可)行列を指定
第03引数(略可)true = テクスチャを繰り返す、false = テクスチャの端の 1 ドットを引き伸ばす
第04引数(略可)true = スムージングあり(補間) , false = スムージングなし
戻り値 なし
 
■第02引数 行列の設定
 
正規化された行列では、テクスチャの左上の座標が原点に配置され、x 方向の成分と y 方向の成分の長さが 1 の状態で テクスチャが等倍のサイズになります。
 
 
例えば、以下のように行列を作成した場合に描画されるテクスチャは下の図のようになります。四角い枠がFlashの画面で円の枠が今回描きたい面の範囲です。

赤の線が行列のx方向の成分で青の線が行列の y 方向の成分です。赤と青の交点が、行列の座標成分になります。
 
 
x方向に2.0倍 y 方向に1.0倍拡大して、60度回転し、座標(300,100)に移動する行列

var m : Matrix = new Matrix();
m.identity();			// 正規化
m.scale(2.0,1.0);			// 行列 *= スケーリング
m.rotate(Math.PI / 180 * 60);	// 行列 *= 回転
m.translate(300,100);		// 行列 *= 平行移動
 
■第03引数 繰り返しの設定
 
テクスチャを繰り返して張るか、端の1ドットを引き伸ばして張るかを指定します。
 
truefalse
 
ビットマップデータを使って面を描画(AS1.0)

var bmpData = new flash.display.BitmapData(20,20,false,0xFF8800);
var matrix = new flash.geom.Matrix();
matrix.identity();	// 正規化

_root.beginBitmapFill ( bmpData , matrix , false , true );
_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo (200, 150);
_root.lineTo ( 50, 150);
_root.endFill();

ビットマップデータを使って面を描画(AS2.0)

import flash.display.BitmapData;
import flash.geom.Matrix;

var bmpData : BitmapData = new BitmapData(20,20,false,0xFF8800);
var matrix : Matrix = new Matrix();
m.identity();	// 正規化

_root.beginBitmapFill ( bmpData , matrix , false , true );
_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo (200, 150);
_root.lineTo ( 50, 150);
_root.endFill();
 
 

 

直線を描画したい
 

サンプルをダウンロード
 


■直線を引く
 
直線を描画するには lineTo() メソッドを使用します。
 
1.線のスタイルを指定

事前処理として、
「線のスタイルについて」から好きな線のスタイルを設定します。
 
2.開始位置を指定

moveTo()メソッドを呼び出すと、線の開始点を指定することができます。
 
MovieClip.moveTo ( x座標 , y座標 );
第01引数 x 座標
第02引数 y 座標
戻り値 なし
 
3.開始位置から指定した座標まで線を引く

lineTo()を呼び出すと、開始点から終了点まで線を引きます。そして指定した位置が次の開始位置となります。この後lineTo()メソッドを何度も呼び出すと連続して直線を引くことができます。
 
MovieClip.lineTo ( x座標 , y座標 );
第01引数 x 座標
第02引数 y 座標
戻り値 なし
 
座標(20,40)から(100,200)まで線を引く

_root.lineStyle (1, 0x000000, 100);
_root.moveTo (20, 40);
_root.lineTo (100, 200);
 
座標(0,0)から(100,200)まで、座標(100,200)から(400,300)まで線を引く

_root.lineStyle (5, 0x0000FF, 100);
_root.moveTo ( 50,  50);
_root.lineTo (200,  50);
_root.lineTo ( 50, 200);
_root.lineTo (200, 200);
 
線の方向にそってグラデーションを描画する(Flash 8 以降)

// 開始座標
var p_x1 = 70;
var p_y1 = 120;

// 終了座標
var p_x2 = 240;
var p_y2 = 190;

var border = 30;	// 線の太さ
var rad = Math.atan2(p_y2 - p_y1 , p_x2 - p_x1) - 90 * Math.PI / 180;	// 線の方向の角度

var m = new flash.geom.Matrix();
m.identity();               		// 正規化
m.scale(1.0 / 1638.4 * border,1.0);	// 行列 *= スケーリング
m.rotate(rad);			// 行列 *= 回転
m.translate( p_x1,p_y1);		// 行列 *= 平行移動


_root.lineStyle (border, 0x000000, 100);	// 線の太さ
_root.lineGradientStyle (
	"linear",
	[0xFF0000 , 0x00FF00 , 0x0000FF],
	[     100 ,      100 ,      100],
	[       0 ,      127 ,      255],
	m
);

_root.moveTo (p_x1, p_y1);
_root.lineTo (p_x2, p_y2);
 
 

 

曲線を描画したい
 

サンプルをダウンロード
 


■曲線を引く
 
曲線を引くには curveTo() メソッドを使用します。アルゴリズムは二次ベジェ曲線になります。3つの制御点で曲線を描画します。

自前で曲線を引きたい場合はこちらを参考にどうぞ。
 
1.線のスタイルを指定

事前処理として、
「線のスタイルについて」から好きな線のスタイルを設定します。
 
2.開始位置を指定

moveTo() メソッドを呼び出すと、線の開始点を指定することができます。
 
MovieClip.moveTo ( x座標 , y座標 );
第01引数 描画の開始 x 座標
第02引数 描画の開始 y 座標
戻り値 なし
 
3.開始位置からコントロールポイントと指定した座標まで曲線を引く

curveTo() を呼び出すと、制御点と終了点を使って曲線を引きます。

第三引数、第四引数で指定した位置が次の開始位置となり、この後 curveTo() メソッドを何度も呼び出すと連続して曲線を引くことができます。
 
MovieClip.curveTo ( x 座標 , y 座標, x 座標 , y 座標 );
第01引数 コントロールポイントの x 座標
第02引数 コントロールポイントの y 座標
第03引数 曲線の終点である x 座標
第04引数 曲線の終点である y 座標
戻り値 なし
 
(50,40)から(100,80)を成分として(150,40)まで曲線を引く

_root.lineStyle (3, 0x00FF00, 100);
_root.moveTo  ( 50, 40);
_root.curveTo (100, 80, 150, 40);
 
(50,40)から(100,80)を成分として(150,40)まで、(150,40)から(200,0)を成分として(250,40)まで、曲線を引く

_root.lineStyle (3, 0xFFFF00, 100);
_root.moveTo  ( 50, 40);
_root.curveTo (100, 80, 150, 40);
_root.curveTo (200,  0, 250, 40);
 
 

 

マウスで自由に線を引きたい
 

サンプルをダウンロード
 


■マウスで自由に線を引く
 
マウスで線を自由に引くには1フレーム前のマウスカーソルの座標から現在のマウスカーソルまで線を引く作業を繰り返します。
 
1.マウスが押されているか調べる

変数 m_on を用意して、マウスが押された時に true マウスが離された時に false を格納するようにします。
 
マウスが押されているか調べる

onClipEvent (load) {
	m_on = false;	// マウスの状態
}

onClipEvent(mouseDown){
	m_on = true;	// 押された
}

onClipEvent(mouseUp){
	m_on = false;	// 離された
}

マウスが押されているか調べる (FlashMX以降)

var m_on = false;	// マウスの状態

onMouseDown = function(){
	m_on = true;	// 押された
};
onMouseUp = function(){
	m_on = false;	// 離された
};
 
2.マウスが移動している時にマウスカーソル座標を退避する

変数 x_oldy_old を用意しマウスカーソルが移動中にマウスカーソルの座標を代入します。
 
マウスカーソル移動中は座標を変数に退避する

onClipEvent (load) {
	m_on = false;	// マウスの状態
	x_old = _root._xmouse;
	y_old = _root._ymouse;
}

onClipEvent (mouseMove) {
	x_old = _root._xmouse;
	y_old = _root._ymouse;
}

onClipEvent(mouseDown){
	m_on = true;	// 押された
}

onClipEvent(mouseUp){
	m_on = false;	// 離された
}

マウスカーソル移動中は座標を変数に退避する(Flash MX 以降)

var m_on = false;	// マウスの状態
var x_old = _root._xmouse;
var y_old = _root._ymouse;

onMouseMove = function(){
	x_old = _root._xmouse;
	y_old = _root._ymouse;
};
onMouseDown = function(){
	m_on = true;	// 押された
};
onMouseUp = function(){
	m_on = false;	// 離された
};
 
3.クリック中に線を引く

さらにマウスカーソルが移動中にマウスが押されていれば、1フレーム前のマウスカーソルの座標から現在のマウスカーソルの座標まで線を引きます。
 
マウスが押されている間は線を引く

onClipEvent (load) {
	m_on = false;	// マウスの状態
	x_old = _root._xmouse;
	y_old = _root._ymouse;
}

onClipEvent (mouseMove) {
	if(m_on){
		_root.lineStyle (1, 0x000000, 100);
		_root.moveTo (x_old , y_old);
		_root.lineTo (_root._xmouse, _root._ymouse);
		updateAfterEvent();
	}
	x_old = _root._xmouse;
	y_old = _root._ymouse;
}

onClipEvent(mouseDown){
	m_on = true;	// 押された
}

onClipEvent(mouseUp){
	m_on = false;	// 離された
}

マウスが押されている間は線を引く(Flash MX 以降)

var m_on = false;	// マウスの状態
var x_old = _root._xmouse;
var y_old = _root._ymouse;

onMouseMove = function(){
	if(m_on){
		_root.lineStyle (1, 0x000000, 100);
		_root.moveTo (x_old , y_old);
		_root.lineTo (_root._xmouse, _root._ymouse);
		updateAfterEvent();
	}
	x_old = _root._xmouse;
	y_old = _root._ymouse;
};
onMouseDown = function(){
	m_on = true;	// 押された
};
onMouseUp = function(){
	m_on = false;	// 離された
};
 
 

 

パスで囲んで面を描画する
 


■パスで囲んで面を描画する
 
直線と曲線を組み合わせた線で多角形を作って囲むと中の面を描画することができます。
 
1.線と面のスタイルを指定
 
事前処理として、
「線のスタイルについて」から好きな線のスタイルを設定します。
「面のスタイルについて」から好きな面のスタイルを設定します。
 
2.開始位置を指定
 
moveTo()メソッドを呼び出すと、線の開始点を指定することができます。
 
MovieClip.moveTo ( x座標 , y座標 );
第01引数 x 座標
第02引数 y 座標
戻り値 なし
 
3.開始位置から指定した座標まで線を引く
 
lineTo()を呼び出すと、開始点から終了点まで線を引きます。そして指定した位置が次の開始位置となります。この後lineTo()メソッドを何度も呼び出すと連続して直線を引くことができます。

curveTo()を呼び出すと、制御点と終了点を使って曲線を引きます。第三引数、第四引数で指定した位置が次の開始位置となり、この後curveTo()メソッドを何度も呼び出すと連続して曲線を引くことができます。
 
MovieClip.lineTo ( x座標 , y座標 );
第01引数 x 座標
第02引数 y 座標
戻り値 なし
 
MovieClip.curveTo ( x 座標 , y 座標, x 座標 , y 座標 );
第01引数 コントロールポイントのx座標
第02引数 コントロールポイントのy座標
第03引数 曲線の終点であるx座標
第04引数 曲線の終点であるy座標
戻り値 なし
 
4.パスを閉じて囲まれた中の面を描画する
 
最後に endFill()を呼び出すと、パスを開始した地点まで線が引かれて、囲まれた中の面が描画されます。

このメソッドを呼び出すと面のスタイル情報がクリアされるため再設定する必要があります。
 
MovieClip.endFill();
第01引数 なし
戻り値 なし
 

サンプルをダウンロード
 
座標(100,50)から幅 150 高さ 100 の矩形を描画する

var x = 100;	// x 座標
var y =  50;	// y 座標
var w = 150;	// 幅
var h = 100;	// 高さ

_root.lineStyle (5, 0x000000, 100);	// 線のスタイル指定
_root.beginFill (0xFF0000, 100);	// 面のスタイル設定

_root.moveTo ( x     , y     );
_root.lineTo ( x     , y + h );
_root.lineTo ( x + w , y + h );
_root.lineTo ( x + w , y     );
_root.endFill();
 

サンプルをダウンロード
 
多角形を描画する

var x = 200;		// 中心 y 座標
var y = 100;		// 中心 x 座標
var rot = 0;		// 角度
var radius = 100;	// 半径
var num = 10;		// 頂点数

_root.lineStyle (2, 0x000000, 100);	// 線のスタイル指定
_root.beginFill (0xFF0000, 100);	// 面のスタイル設定

var i = 0;
var rad = i / num * Math.PI * 2 + rot * Math.PI / 180;
_root.moveTo(
		x + Math.cos(rad) * radius,
		y + Math.sin(rad) * radius
);
for(i=1;i < num;i++){
	var rad = i / num * Math.PI * 2 + rot * Math.PI / 180;
	_root.lineTo(
		x + Math.cos(rad) * radius,
		y + Math.sin(rad) * radius
	);
}
 

サンプルをダウンロード
 
星を描画する

var x = 200;		// 中心 y 座標
var y = 100;		// 中心 x 座標
var rot = 0;		// 角度
var radius = 100;	// 半径
var num = 6;		// 頂点数
var d = 0.5;		// 折り線の度合い(0.0~1.0)
	
_root.lineStyle (2, 0x000000, 100);	// 線のスタイル指定
_root.beginFill (0xFF0000, 100);	// 面のスタイル設定

var i = 0;
var rad = i / num * Math.PI * 2 + rot * Math.PI / 180;
_root.moveTo(
		x + Math.cos(rad) * radius,
		y + Math.sin(rad) * radius
);

var l = num * 2;
for(i=1;i < l;i++){
	var rad = i / l * Math.PI * 2 + rot * Math.PI / 180;
	if(i % 2){
		_root.lineTo(
			x + Math.cos(rad) * radius * d,
			y + Math.sin(rad) * radius * d
		);
	}else{
		_root.lineTo(
			x + Math.cos(rad) * radius,
			y + Math.sin(rad) * radius
		);	
	}
}
 
 

 

HAKUHIN's home page バナー http://hakuhin.jp/
(c) Hakuhin & 日新礼符 2002-2011 解像度1024×768以上 IE8.0以上推奨
/ 閲覧中: