僕的「ＶＭＬ　ベクトル図形作成ツール」と「ＶＭＬ　タグ形状確認ツール」の利用法−−−ＶＭＬ図形作成

一般的利用方法は「のほほん気分なHP」のVMLとTIMEのお部屋内メニューVML作成ツールのshapeへの転用にあります。
ここではshapeのpathをつなげていく方法で作成していきます。作成ツールにはNo.1〜No.20まで用意され、複数のパーツを組み合わせることができますが、一つのパーツを繰り返し使用して利用する方法（これはパーツが20では足りない場合にも役立ちます）として書きました。VML　タグ形状確認ツールで図形を見ることができるので便利です。基本的にここではNo.1〜No.3しか使いません。No.3はパスの開始用に。No1とNo.2を交互に使います。20個フルに使用しても勿論OK。作成ツールの下にあるshapeボタンやgroupボタンもうまく利用してください。

下絵として利用している画像は、ゆみこさんのＨＰ「ひなたぼっこ」から「ひな形」の”VML乙女”のVML画像をキャプチャしてから、色を濃い目にして画像にしたものです。許可ありがとうございます。
--下絵にはグラデーション塗りつぶしなどが行われていますが、ツールの使用方法が主旨なので通常の塗りつぶしで行っています。VMLにはサブエレメントとして<v:fill>でグラデーション塗りつぶしもあります。

�@作成ツールを起動。起動すると下のようになります。

縮小してます。

 �A全消去ボタンで初期化します。

�B元絵を「参照」ボタンから読み込んで丁度良い倍率にします。小数点も大丈夫。
透明度は元絵を半透明にして上からパスを描く時に見やすくします。
マージン量は下絵をずらしたい時に使います。VMLの原点は移動しません。あくまでも図形をずらすだけです。
罫線は描画領域にグリッド線をつけるときに使います。位置合わせに利用できますが、つけることでパスや元絵が見難くなることがあります。適宜利用してください。数値の反映は最初だけで後から書き換えしてもうまく動作しないようです。

�C原点を調整してください。元絵は動きません。原点位置によってもどこから描き始めるかと言う座標値が変わります。これはHTMLで表示させた時の表示位置に関わるので、注意ください。
画像を貼り付けて倍率を設定した時、おかしなサイズになると思ったら、一旦別の画像を選び、倍率1にしてからもう一度利用する画像を選びなおし、倍率変更すると直ります。===注意！作成ツール画面のウィンドウサイズを変えるとずれます。ウィンドウサイズは変えないように。

下の様に原点は緑の点で表示されます。
ポイント透明度でVML描画のポイントの透明度を変えることができます。

�Dとりあえずshapeのタグを得るために下記のようにNo.1で「汎用的な形」を選び、現われるタグを全て選択してコピーしておきます。

�E「形状確認ツール」を別窓で起動します。

縮小しています。

�Fタグを入力する欄を消し去り、先ほどコピーしたタグを貼り付けます。貼り付けたら入力欄以外をクリックします。

�G入力欄を使いやすくするようにします。少しソースを編集しましょう。

ちょっと説明しましょう。

<v:group style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0">
<!--帽子-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#C3AED6" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path=" x e"><v:stroke endcap="round"></v:stroke></v:shape>

</v:group>

※色は画像から色を取得できるソフトがあると便利ですね。

準備はここまでです。次からは「作成ツールでパスを描き=>pathを取得して、確認ツールのpathに貼り付けて確認する。」の繰り返しです。
パーツごとにshapeエレメントをコピーしながら作り上げます。

描画するときには絵を描くときのように後方にある物体を先に描くと良いです。まずは帽子の奥側から。これは頭より後方に位置していますので先に描きます。但しz-indexで操作が後からでも可能ですが。

帽子の下側を描く。色はillcolor="#C3AED6"

まずNo.3で曲線を選んでください。この時曲線の開始点と終了点と線が離れてずれていることがあれば、一旦原点に切り替えて原点数値を変え、戻してから切り替えなおしてみてください。
大抵直ります。

ツールのポイント（曲線の場合は始点、制御点１、制御点２、終点の４つ）が現われますので、各ポイントをドラッグしてパスを描いてください。
重なって見辛い時には一旦原点に切り替えるとポイントが消えパスが見やすくなります。

下の画像は帽子のつば部分パスを描画して原点に切り替えて見やすくしているところ。

パスができたらパスのところだけをコピーします。赤い枠のところ、隠れていることがあります。内容をすべて選択してコピーしてください。
中をクリックして[Ctrl]+[A]でテキストをすべて選択状態にし、[Ctrl]+[C]でコピーになります。

それを確認ツールに切り替えてpath=" x e"のところに貼り付けます。
path="m 118 73 c 87 49 70 103 86 120 x e"

図形はこんな感じ。

では作成ツールに戻り、今度はNo.2に切り替えます。No.3は消さずに残しておいてください。No.2で同じく曲線を選んでください。赤い開始点ポイントをドラッグして今作成したNo.3のパスの終点に綺麗に重ねます。そうすることで次に描く開始点が一つ前の終点と同じになります。N0.3の終点座標とNo.2の開始点座標が同じになればいいです。

No.3の終点座標とNo.2の終点座標が同じかは下図のように確認する。ドラッグして合わせるよりも直前描いたNo.のtoの座標値を現在描いているNo.のfromに入力すると早くて確実です。

そのまま他のポイントを移動して新たなパスを完成しましょう。

前のパスの終点が今回のパスの始点になるようにしたのでc以下の部分だけコピーします。cの前の半角スペースからコピーするといいです。

" c 108 146 86 169 103 181"だけを選択してコピーする。

確認ツールに切り替えpathに追加します。

path="m 170 63 c 114 46 131 116 110 117 c 108 146 86 169 103 181 x e">cの前は半角スペースです。

ここで今はパスがつながっていくのでこのようにしてますが、パスを途中で閉じたり終了させて新たに描き始める場合はxやe、mなどを適宜使用します。曲線だけではなく、直線や楕円や四角形ツールなどを組み合わせても良いですよ。

次はNo.1を使用します。N0.1に切り換え、No.2の終点からつながるようにN.o1のパスを描いてください。同様にパスの" c 〜"をコピーして確認ツールの中に追加・貼り付けます。

ここまでしてきて、次は？どうするかというと、No.2を用いてNo1の終点とつなぎ、パスを得て確認ツールに追加します。次はNo.1にまた切り換えて・・・とNo.2とNo.1を交互に使い回してパスを追加していけば、いくらでもつなげていくことが可能です。No.3は最後にパス全部をつなぐために残しておきます。

最後の部分をやってみます尚、隠れて見えない部分はどうせ上からかぶさるので、適当に描いて結構です。

No.3は描き始めのパスでした。これは消さずに残していますね。また直前描いたパスはここではNo.2です（場合によってはNO.1とNo.2が入れ替わっているかも）。No.1をNo.2とNo.3とをつなぎ合わせるパスにします。それにはNo.2の終点がNo.1の開始点に、No.3の開始点がNo.1の終点になれば良いわけですね。

No3のfrom座標値をNo.1のtoに、No.2のto座標値をNo.1のfromに入力するとあわせることができます。

開始点と終点が決まりましたので、制御点ポイントを移動させてパスを完成させます。

こんな感じに仕上がりました。

次は後ろ髪になりますね。色を変えなければなりません。また帽子とは別のパーツにします。

確認ツールでオレンジ部分をコピーして貼り付けます。次のようになります。

<v:group style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0">
<!--帽子-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#C3AED6" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 118 73 c 87 49 70 103 86 120 c 108 155 89 161 98 172 c 149 205 107 257 281 258 c 364 249 326 197 266 176 c 224 156 157 99 118 73 x e"><v:stroke endcap="round"></v:stroke></v:shape>
<!--帽子-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#C3AED6" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 118 73 c 87 49 70 103 86 120 c 108 155 89 161 98 172 c 149 205 107 257 281 258 c 364 249 326 197 266 176 c 224 156 157 99 118 73 x e"><v:stroke endcap="round"></v:stroke></v:shape>
 
 </v:group>

コピーした側のコメントの帽子を後ろ髪に替えます。色はfillcolor="#322711"としましょう。pathの中(赤い部分）を削除してください。

<v:group style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0">
<!--帽子-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#C3AED6" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 118 73 c 87 49 70 103 86 120 c 108 155 89 161 98 172 c 149 205 107 257 281 258 c 364 249 326 197 266 176 c 224 156 157 99 118 73 x e"><v:stroke endcap="round"></v:stroke></v:shape>
<!--後ろ髪-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#322711" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path=" x e"><v:stroke endcap="round"></v:stroke></v:shape>
 
 </v:group>

さあ作成ツールに戻り後ろ髪のパスを作っていきましょう。

始めからパスを描きなおすので、No.1とNo.2は無しにして、No.3を使用して開始します。

やり方は帽子の部分と同じです。わかりますね。スタートだけは"m 〜"からコピー貼り付けですよ。

後ろ髪完成！上からかぶさる部分はどうせ隠れますから少し重なるくらいに書きます。

次は首です。fillcolor="#F7DED6"、先ほどの後ろ髪と同様に確認ツールに追加し、修正します。

<v:group style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0">
<!--帽子-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#C3AED6" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 118 73 c 87 49 70 103 86 120 c 108 155 89 161 98 172 c 149 205 107 257 281 258 c 364 249 326 197 266 176 c 224 156 157 99 118 73 x e"><v:stroke endcap="round"></v:stroke></v:shape>
<!--後ろ髪-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#322711" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 172 183 c 154 202 122 214 127 229 c 136 237 104 245 121 258 c 111 236 137 243 133 227 c 121 214 156 211 168 190 c 154 214 138 223 132 243 c 132 277 145 275 141 263 c 115 248 159 218 161 200 c 137 231 135 287 167 307 c 236 295 247 262 235 244 c 208 224 251 228 241 205 c 234 188 246 170 245 144 c 244 173 236 188 247 208 c 252 229 217 223 236 240 c 252 260 239 286 229 298 c 271 252 246 235 248 217 c 242 200 251 176 256 159 c 258 207 304 214 287 245 c 267 280 302 270 284 290 c 308 275 270 273 292 245 c 309 214 264 207 277 183 c 276 212 309 200 315 219 c 325 231 294 235 314 244 c 327 249 319 261 307 265 c 333 240 286 249 302 228 c 327 206 258 189 244 100 x e m 259 167 c 227 216 298 242 225 304 c 278 293 294 221 267 155 x e"><v:stroke endcap="round"></v:stroke></v:shape>
<!--首-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#F7DED6" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path=" x e"><v:stroke endcap="round"></v:stroke></v:shape>
 
</v:group>

ではまたパスを作成して貼り付け、首のパスを完成させます。繰り返しますが重なる部分は少し大きめに糊しろがあるような感じで作成してください。

以下同様に作業を行ってください。

・服---fillcolor="#DA84AA"

・そで---fillcolor="＃6B1852"

・耳と顔---fillcolor="#F7DED6"

・前髪---fillcolor="#322711

・帽子上---fillcolor="#C3AED6"

・白目---fillcolor="#FFFFFF"目は表情が一番変わるので難しい・・・

・黒目---fillcolor="#000000"楕円ツールを使用します。

・黒目の中の光の反射---fillcolor="#FFFFFF"

stroked="f"はパスを描画しないという意味です。filled="t" なので塗りつぶしは行われます。
<!--目反射-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#FFFFFF" stroked="f" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="wa 195 136 200 141 199 136 198 136 x e wa 144 124 149 129 148 124 147 124 x e"><v:stroke endcap="round"></v:stroke></v:shape>

・眉・まつ毛・鼻---strokelcolor="#322711" fillcolor="#322711"でfilled="t" stroked="t"とします。
ここはまとめて描いてみましょう。

眉はそのまま塗りつぶしありで描けますね。path="m 138 107 c 144 94 156 104 160 116 c 153 103 140 100 138 107 x e m 186 123 c 197 113 213 114 226 135 c 213 118 196 117 186 123 x e">

問題は以降の線だけにしたい（塗りつぶししないパスを後続に追加する）場合ですが、塗りつぶしをしないというコマンドがpathにあります。nfコマンドを使えば、独立しているサブパスに影響を与えず、そのサブパスだけに塗りつぶしをしないようにできます。眉のサブパスにはeコマンドで独立していますから、後続のサブパスにnfをつけても眉に影響を与えません。

path="m 138 107 c 144 94 156 104 160 116 c 153 103 140 100 138 107 x e m 186 123 c 197 113 213 114 226 135 c 213 118 196 117 186 123 x e m 138 121 c 139 116 153 112 157 127 nf e m 188 135 c 190 127 207 125 219 140 nf e m 140 126 c 140 121 137 120 130 116 nf e m 144 122 c 144 117 141 116 139 114 nf e m 195 135 c 194 131 190 129 186 127 nf e m 199 134 c 200 131 200 130 196 126 nf e m 161 127 c 172 133 150 143 149 152 c 143 161 158 156 157 162 nf e m 163 161 c 163 163 165 162 166 163 nf e">
色分けした部分は、それぞれ独立したサブパスで、nfコマンドにより塗りつぶしされない。

・唇---fillcolor="#D5776A"　・ネックレス---fillcolor="#999999"　完成！DropShadowフィルタつけてます。

これで一応描画は完成ですが、塗りつぶしにグラデーションを使ったり、stroked="f"にして線を描かないようにするとか、線をもっと細くする（stroleweight="0.3pt"など）こともできます。線種を点線にすることもできます。

とりあえず練習あるのみ、自分なりのもっと使いやすい方法が見つかるかもしれません。

ちょっと修正

実は帽子だけを取り出すと、 あかんです！！

で修正。

更に顔だけ取りだすと、 ・・・おめめを動かしたいので目の部分を繰り抜こう！

<!--顔-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#F7DED6" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 168 64 c 114 110 142 123 134 145 c 128 156 130 178 138 189 c 142 193 149 231 201 205 c 225 194 243 164 241 115 c 240 81 192 49 168 64 x e"><v:stroke endcap="round"></v:stroke></v:shape>
<!--白目-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#FFFFFF" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 139 128 c 141 111 157 122 155 137 c 148 139 139 128 139 129 x e m 187 143 c 189 126 210 130 218 145 c 209 150 191 148 187 143 x e"><v:stroke endcap="round"></v:stroke></v:shape>
これを、白目のパスを利用して
!--顔-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#F7DED6" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 168 64 c 114 110 142 123 134 145 c 128 156 130 178 138 189 c 142 193 149 231 201 205 c 225 194 243 164 241 115 c 240 81 192 49 168 64 x m 139 128 c 141 111 157 122 155 137 c 148 139 139 128 139 129 x m 187 143 c 189 126 210 130 218 145 c 209 150 191 148 187 143 x e"><v:stroke endcap="round"></v:stroke></v:shape>
<!--白目-->
<v:shape strokecolor="black" strokeweight="1px" filled="t" fillcolor="#FFFFFF" stroked="t" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 139 128 c 141 111 157 122 155 137 c 148 139 139 128 139 129 x e m 187 143 c 189 126 210 130 218 145 c 209 150 191 148 187 143 x e"><v:stroke endcap="round"></v:stroke></v:shape>
と書き換えると

黒目と目反射はグループ化してidをつけて、TIMEで動かしています。帽子は下側と上側のz-indexが違います。それに挟み込むように他のパーツは重なっています。サンドイッチ構造ですね。帽子それぞれのパーツにidをつけて、同時にTIMEで動かします。

帽子の下側=z-index:1、後ろ髪=z-index:2、白目=z-index:2、黒目と目反射=z-index:2、顔ほかのパーツ=z-index:3、帽子上=z-index:4です。

創作例

下の[VML fill]でグラデーションさせてみます。