ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
蚊取り線香の描き方 その1

 長い説明なので,その1 と その2 に分けました。蚊取り線香の描き方です。

 蚊取り線香など誰も描きたくはないし,実際に描くことはないとは思いますが,ParaDraw での作図技法を幅広く伝えるには,蚊取り線香がうってつけだと思ったので,この蚊取り線香を題材に選びました。
 かなり多くの作図要素を採り入れているつもりです。

 お絵描きと説明に使ったバージョンは ParaDraw Ver.0.3a4 です。

 

設定

 「ファイル」→「キャンパスのプロパティ」で,だいたい左のような設定にしておきます。

 

 描く図形がグリッドに吸着するように,[グリッドを表示]ボタンと,[グリッド吸着]のボタンを押した状態にしておきます。

 そして,[楕円の描画]ボタンをクリックして,キャンパス上に真円を描きます。

 このとき色は何色でもかまいませんので,線の太さを 6px にしておきます。

 次に,[矩形の描画]ツールで描いた真円のちょうど左半分と重なるように長方形を描きます。

 そして,「アクアなボタン」と同じように,[パスの選択]ツールで,円と長方形の両方を選択して,右クリック→「パス演算」→「切り取り(背面)」を選択します。

 わかると思いますが,ちょうど半円を作図しようとしているのです。

 前面に配置した長方形によって,背面の円が半分に切りとられます。
 そして,[パスの選択]ツールで半円を選択し,右クリック→「パスを閉じない」を選択します。
 これで線だけの半円ができます。

 この線だけの半円は原本としてとっておいて,コピーして縮小したもので蚊取り線香の渦巻きを作成していくようにします。

 この箇所以外でも,途中段階のものを数段階残しておく方が,失敗したときにでもすぐに前の状態に戻れるので描きやすくなります。

 半円は,「Ctrl」キーを押して全体を縮小し,グリッドに合わせて「直径10px」になるようにします。

 コピペした直径10pxの半円をさらにコピーして増やします。

 そして,「表示」→「数値入力ツール」で,「数値入力ツール」のパネルを出しておきます。

 そして,コピペした直径10pxの半円を選択し,「数値入力ツール」で, 角度180(°) を入力します。

 すると,選択した半円が180°回転します。

 180°回転した半円を選択して,「Ctrl」キーを押した状態でドラッグで拡大し,直径を20pxにします。

 そして左のように,直径10pxの半円の一端と,直径20pxの半円の一端がぴったり結合するような位置に配置します。配置にもグリッドの吸着を使ってください。

 この作業を繰り返して,左のような渦巻き線を作って行きます。

 位置はぴったりでも,パスとしてはまだバラバラの状態です。

 渦巻き線が描けましたら,その線全体を選択し,右クリック→「線を塗りに変換」→「ペン」を選択します。

 塗りに変換された渦巻き全体を選択して,右クリック→「パス演算」→「結合」でパスを結合させます。

 これで,渦巻きの塗りが1つの合体した描画オブジェクトになります。

 これは細かい点の微調整ですが,渦巻きの中心付近にアンカーを追加するなどして,蚊取り線香の中心付近のふくらみや,穴を作成しようとしているところです。
 というわけで,できた塗りを拡大表示させたものです。

 そして,[パスの選択]ツールで渦巻きを選択し,偏平につぶしてやります。

 線を塗りに変換した理由は,左のような変形をさるためです。線のままだと偏平にしても線の太さは一定のままなので,塗り潰されている部分までは偏平になりません。

 この偏平にした渦巻きを使って,蚊取り線香の側面と上面の両方を作成します。

 とりあえず側面の作成からで,渦巻きを濃いめの緑と薄めの緑のグラデーションにします。

 グラデーション塗りの方法がわからない場合は,「アクアなボタン」を参考にしてください。

 この塗りをわかりすい座標に配置します。左の例は,X=10,Y=90 という座標にしたものです。

 「数値入力ツール」を見てキッチリとした座標に合わせます。

 それをコピペで増やします。増やしたものは,「数値入力ツール」で X=10,Y=88 に配置します。

 コピペしたものをキッチリ 2px 上に配置するということです。

 上の作業を4回繰り返し,コピペしたものを 2px ずつ上に重ねて行きます。一番上にあるグラデーションの渦巻きはY=82 になっている状態です。

 そしてさらに,薄めの緑グラデーション無し渦巻きをコピペで作成します。

 作成した,薄めグラデーション無しの渦巻きを,Y=80 の位置に配置すると,高さが 10px の立体的な渦巻きができあがります。

 先の燃えている部分を描きます。

 これは,「/」のマークのボタン[直線の描画]ツールで線香の先をプロットして行き,面を囲うように図形を作ってトリプルクリックし,できた直線の図形を選択して,右クリック→「パスを閉じる」で,閉じたパスを作成します。

 左の状態は,線香の側面と上面に2つの閉じた線を描いたところです。

 閉じた2つの図形に<円形グラデ>でグラデーション塗りを入れます。

 グラデーションの中心が彩度の低い赤,グラデーションの周囲が薄いグレーという色にしています。

 一応蚊取り線香の本体部分はこれでほぼ完成です。

 蚊取り線香全体を作成するための続きは「蚊取り線香の描き方 その2」で説明します。

 

蚊取り線香の描き方 その2 へ

 

蚊取り線香完成品&ダウンロード へ