動的に図形を描く（五角形）　FLASHRAVE

|　トップ　>　ActionScript　>　動的に図形を描く（五角形）　|

ActionScriptを利用して図形を描くことが可能です。
図形の点が移動するので、シェイプトゥイーンのような動作を行うことができます。

キャンバスに五角形が描かれます。
レーダーチャート等で使用できます。

（１）　グラフシンボルの作成

・ライブラリにグラフの背景として「ベース」を作成します。
（グラフのみ表示するのであれば必要ありません）

・グラフ表示するシンボルを作成します。

・ActionScriptとグラフ背景を設置するレイヤーをそれぞれ設定します。

・グラフ背景の「ベース」を設置します。

・フレームにActionScriptを設定します、

01
02

03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

onEnterFrame = function() {

if(_root.stopFlag01 == "0" || _root.stopFlag02 == "0" ||

_root.stopFlag03 == "0" || _root.stopFlag04 == "0" || _root.stopFlag05 == "0"){

_root.cosPoint1 = Math.cos(_root.point1 * Math.PI / 180) * 3;

_root.sinPoint1 = Math.sin(_root.point1 * Math.PI / 180) * 3;

_root.cosPoint2 = Math.cos(_root.point2 * Math.PI / 180) * 3;

_root.sinPoint2 = Math.sin(_root.point2 * Math.PI / 180) * 3;

_root.cosPoint3 = Math.cos(_root.point3 * Math.PI / 180) * 3;

_root.sinPoint3 = Math.sin(_root.point3 * Math.PI / 180) * 3;

_root.cosPoint4 = Math.cos(_root.point4 * Math.PI / 180) * 3;

_root.sinPoint4 = Math.sin(_root.point4 * Math.PI / 180) * 3;

_root.cosPoint5 = Math.cos(_root.point5 * Math.PI / 180) * 3;

_root.sinPoint5 = Math.sin(_root.point5 * Math.PI / 180) * 3;

if(_root.point_cos1 <= _root.point1MaxCos){

_root.point_cos1 += _root.cosPoint1;

_root.point_sin1 -= _root.sinPoint1;

}else{

_root.stopFlag01 = 1;

}

if(_root.point_cos2 >= _root.point2MaxCos){

_root.point_cos2 += _root.cosPoint2;

_root.point_sin2 -= _root.sinPoint2;

}else{

_root.stopFlag02 = 1;

}

if(_root.point_cos3 >= _root.point3MaxCos){

_root.point_cos3 += _root.cosPoint3;

_root.point_sin3 -= _root.sinPoint3;

}else{

_root.stopFlag03 = 1;

}

if(_root.point_cos4 <= _root.point4MaxCos){

_root.point_cos4 += _root.cosPoint4;

_root.point_sin4 -= _root.sinPoint4;

}else{

_root.stopFlag04 = 1;

}

if(_root.point_sin5 <= _root.point5MaxSin){

_root.point_cos5 -= _root.cosPoint5;

_root.point_sin5 += _root.sinPoint5;

}else{

_root.stopFlag05 = 1;

}

this.beginFill (0xb3c5db, 100);

this.lineStyle (0, 0xffffff, 100);

this.moveTo (0, _root.point_sin1);

this.lineTo (_root.point_cos2, _root.point_sin2);

this.lineTo (_root.point_cos3, _root.point_sin3);

this.lineTo (_root.point_cos4, _root.point_sin4);

this.lineTo (_root.point_sin5, _root.point_cos5);

this.endFill ();

}

（２）　ステージの設定

・ActionScriptとグラフを設置するレイヤーをそれぞれ設定します。

・レイヤー01にシンボル「グラフ」を設置します。

・フレームにActionScriptを設定します。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

33

34

35

36

37

38

39

40

41

stop();

_root.stopFlag01 = 0;

_root.stopFlag02 = 0;

_root.stopFlag03 = 0;

_root.stopFlag04 = 0;

_root.stopFlag05 = 0;

_root.get1Point = 120;

_root.get2Point = 30;

_root.get3Point = 70;

_root.get4Point = 50;

_root.get5Point = 150;

_root.point1 = 90;

_root.point2 = 162;

_root.point3 = 234;

_root.point4 = 306;

_root.point5 = 72;

_root.point_cos1 = 0;

_root.point_sin1 = 0;

_root.point_cos2 = 0;

_root.point_sin2 = 0;

_root.point_cos3 = 0;

_root.point_sin3 = 0;

_root.point_cos4 = 0;

_root.point_sin4 = 0;

_root.point_cos5 = 0;

_root.point_sin5 = 0;

_root.point1MaxCos =

Math.abs(Math.cos(_root.point1 * Math.PI / 180) * _root.get1Point);

_root.point1MaxSin =

Math.abs(Math.sin(_root.point1 * Math.PI / 180) * _root.get1Point);

_root.point2MaxCos =

Math.cos(_root.point2 * Math.PI / 180) * _root.get2Point;

_root.point2MaxSin =

Math.abs(Math.sin(_root.point2 * Math.PI / 180) * _root.get2Point);

_root.point3MaxCos =

Math.cos(_root.point3 * Math.PI / 180) * _root.get3Point;

_root.point3MaxSin =

Math.abs(Math.sin(_root.point3 * Math.PI / 180) * _root.get3Point);

_root.point4MaxCos =

Math.abs(Math.cos(_root.point4 * Math.PI / 180) * _root.get4Point);

_root.point4MaxSin =

Math.abs(Math.sin(_root.point4 * Math.PI / 180) * _root.get4Point);

_root.point5MaxCos =

Math.cos(_root.point5 * Math.PI / 180) * _root.get5Point;

_root.point5MaxSin =

Math.abs(Math.sin(_root.point5 * Math.PI / 180) * _root.get5Point);

図形をActionScriptで描くので、一点が動く指示もActioSnriptで行います。

ステージに設定したActionScriptで03～07はそれぞれの点が目的の場所に到達したら以後絵画しないための初期値です。
この制限がないと、ブラウザの動作が遅くなります。
09～13が図形の最終的な値です。

図形の点は斜めに移動するので、三角関数が必要になります。
三角関数は角度と長さがあれば使うことができます。
そのため、15～19は各点の角度を設定しています。五角形以外なら、この値も変わります。
32以降は点の最大位置を示すのに必要な数値を求めています。

シンボルに設定したActionScriptは実際に図形を絵画するものです。
点は常に移動するので、その都度計算して点の座標を求めています。
図形によってはステージ座標の"プラス領域"や"マイナス領域"により符号が変わるので、各点の計算も若干異なっています。