|
| フリーハンドで線を描画するにはフレーム毎に直線を描画する処理を繰り返す。 Adobe Flash CS3 Professionalを使用してサンプルを作成しています。 |
フリーハンドで描画するには連続して直線を描画する
 |
2. 今回の制作フローは以下の通りになります。
・ 線の色をパレットから選択する
・ マウスがプレスされているとき、マウスが動く度に動いた分の直線を描画する
3. レイヤー「action」の1フレーム目に以下のActionscriptを確認してください。
lineColor = 0xFF0000;
colorRed.onRelease = function(){
lineColor = 0xFF0000;
colorRed._alpha = 100;
colorGreen._alpha = 30;
colorBlue._alpha = 30;
colorYellow._alpha = 30;
colorBlack._alpha = 30;
}
colorGreen.onRelease = function(){
lineColor = 0x00FF00;
colorRed._alpha = 30;
colorGreen._alpha = 100;
colorBlue._alpha = 30;
colorYellow._alpha = 30;
colorBlack._alpha = 30;
}
----以下略----
この部分はパレットの制御です。1行目でデフォルトの色「0xff0000（赤）」を変数「lineColor」に代入し指定しています。2行目以降は各パレットのボタンがクリックされた場合、対応する色を変数「lineColor」に代入し、自身の不透明度を「100％」とし、他の色の不透明度を「30％」としています。
以降は5色分この繰り返しを記述しています。
4. レイヤー「action」の1フレーム目に続けて以下のActionscriptを記述してください。
startx = _root._xmouse;
starty = _root._ymouse;
_root.onMouseMove = function(){
if(pressTest == 1){
canvas.lineStyle(1,lineColor);
canvas.moveTo(_root._xmouse,_root._ymouse);
canvas.lineTo(startx,starty);
startx = _root._xmouse;
starty = _root._ymouse;
}
startx = _root._xmouse;
starty = _root._ymouse;
}
_root.onMouseDown = function(){
pressTest = 1;
}
_root.onMouseUp = function(){
pressTest = 0;
}
1・2行目でマウスの初期位置を記録しています。3行目からはマウスが動作している場合に実行される関数です。下部で、マウスが押されている場合「onMouseDown」と押していない場合「onMouseUp」を判定し、変数「pressTest」が「1」の場合押している、「2」の場合押していない状態としています。これを条件に押されている場合をif文で判定して以降を実行しています。
if文内の処理は1行目で先程パレットで指定した色を含む線のスタイルを指定しています。
2行目で移動後のマウスの座標を起点として線の描画を開始しています。
3行目で移動前のマウスの座標を終点として線の描画を終了しています。
最後に新しいマウスの座標を記録している座標と入れ替えています。
これで完成です！
完成したファイルをダウンロード
描画関連はこれで一通り登場しました。結局は単純な図形意外Flash上で絵を描いた方が早い場合がほとんどですが、個数が決まっていないデータを表示する場合などに罫線や表をデザインに使えたらより見やすく良いレイアウトになるのではないでしょうか？
