タイトルをクリックすると切り替わります。

グリーグ:ペール・ギュント「朝の気分」音源:KONTAKT 2 Library
愛の夢 by ぴあん 音源:The Grand
仔犬のワルツ by ぴあん 音源:Independence Free
アルハンブラの思い出音源:Independence Free
改訂 冬のリヴィエラ KONTANT2+SaxLab
TUNAMI サザンオールスターズ-KONTAKT 2 Only
TUNAMI サザンオールスターズ-SAX Labx2+KONTAKT 2
オーソレミオ(ぴあんさんのMIDI使用)SAX Lab
ヴィヴァルディ トランペット協奏曲(失敗作)
ベートーヴェン ヴァイオリン・ソナタ「春」
白鳥(フレンチ・オーボエ 8va)
白鳥(イングリッシュ・ホルン)
白鳥(セロ)
アルルの女 メヌエット
さだまさし 木根川橋 midi:TAXI

このページでは、VMLペイントひな形の利用方法を解説します。VML2図形編集ツールの使い方もわかります。

[VMLペイント SHAPEオブジェクトの追加へ] [VMLペイントひな形のペンについて] [よくある質問]

2009/10/29・・・最終更新 修正版 VML_PaintRtm.htm について

ステップ数を従来小数点で指示するようにしておりましたが、実際のステップ数として1以上の自然数で指定するように変更しました。このステップ数とは、ひとつのセグメントを何段階の折れ線で描くかを指定します。ステップ数を大きくするとより曲線に近づきますが、その分時間がかかるようになります。

また、速度(setTimeoutの時間指定)も簡易にしました。

更に、Array()をArray(1)とすることで若干高速化を図りました。

他には、ペンを回転させる際のバグを修正しました。


元々のshapeにつけたIDを重視するように改めました。ペイントされたshapeのIDは、元々のshapeにつけたIDの先頭に、copyを意味する c が付きます。
例えば
<v:shape id="親指の爪" 〜〜〜>
とした場合は、ペイントされた側は、
<v:shape id="c親指の爪" 〜〜〜>
のようになります。

これにより、描画後にshapeを移動させるとか働きかけることが、IDでできるようになりました。

DL


2009/09/10・・・「VML2図形編集ツールとタグ確認ツールの使い方」 の簡易説明ビデオ・・・このページの最下部にあります。

このひな形を使用する際には、VMLのshapeを使用した図形描画(曲線のみ)が必要になります。

まず、サンプルをご覧ください。

サンプル:VML_PaintSample1.htm

【ツールの用意】

DL・・・一括ダウンロード(VML_PaintRtm.htmも入っています)

ダウンロードしたら実行して解凍させてください(自己解凍形式です)。

この説明に必要な以下のツールが入っています。

1、プレーンなVMLペイントひな形 (VML_PaintRtm.htm)

2、VML2図形編集ツール(あやなおたかしゅんさん) (vml2d.htm)

3、VMLタグ形状確認ツール・ラージ版(あやなおたかしゅんさん) (vmltimeL.htm)

4、その他(この説明では使用しません)・・・ VML・Timeタグ確認ツール(vmltime.htm)、HTML+TIME移動曲線作成ツール改造版(timemove_kai.htm)

 

【VML shapeのパスを作成する準備】

InternetExplorerを二つ起動して、それぞれに「VML2図形編集ツール」と「VMLタグ形状確認ツール」を開いておきます。
この二つのツールを併用して、曲線の連続パスを作成します。

IE7/IE8ではタブブラウズができますので、二つのタブにそれぞれのツールを開いておけば、タブ切り替えでツール間の切り替えが出来ますね。

「VMLタグ形状確認ツール」にウィンドウを切り替え、タグ入力部分を一旦すべて消しておきましょう。

【練習用下書き画像】

 

この白黒画像をトレースしながら、パスで描画していきます。ついでに色などもつけていきましょう。


その前に「VML2図形編集ツール」の操作パネルの説明をしておきます。

操作パネルは「全体モード」と「詳細モード」があります。「全体モード」のときは【原点】【下書き画像】【図形】そして【操作パネル自身】の位置をドラッグして移動させることができます。

これが「全体モード」の時で、「編集(全体)」と表示され、モード切替ボタンが「詳細」となります。

こちらは「詳細モード」の時です。「編集(詳細)」と表示され、モード切替ボタンが「全体」となります。


では、早速下書き画像をトレース(なぞって図や画像を描くこと)していくことにしましょう。

「コツ1」・・・細かく境界内のパスを作るよりも、下に来る部分をはみ出すように描く。どうせ上に重なる部分で隠れてしまうことを見越して描きましょう。
そうすればあまり境界の細かい部分にこだわる必要が少なくなります。

上の画像では女の子(春菜ちゃん)の顔よりも奥側にある右髪を先に描いてしまい、次に首の部分を描き、顔を描き、目や眉毛・口を描き、肩紐を描き、左肩を描き、前髪を描き、左髪を描き、髪飾りの花を描くという工程にします。これを髪の毛も顔との境界線に沿って描こうとすると大変ですよね。髪を顔との境界で描くパスと、顔の輪郭のパスとのずれが少しでも生じると、隙間が出来てしまいます。

ではまず「VML2図形編集ツール」で、「全データ削除」を行います。原点が左上コーナーにあると思いますが、この緑の原点をドラッグして少し右下に移動させ、上と左に余裕を持たせるようにします。上と左に余裕を持たせるのは、パスの座標にマイナス値を入れなければならなくなる場合があるからです。その時マイナスの座標に点をドラッグできなくなるのを最初から防いでおくということで、マイナスの座標にドラッグしなければならなくなった時に、原点を右下へと移動させてもいいのですけどね。

 

下書き画像を取り込みましょう。「参照」ボタンから下書きの画像を指定します。下書き画像は原点が左上端になるように配置されます。位置をすらしたいときには、画像をドラッグして位置決めしてください。但し、下書き画像の位置をずらしてしまうと、後から続きの作業をしたい場合に画像の一あわせが簡単ではなくなります。
※VMLペイントスクリプトでは、書き出し位置の調整という設定がありますので、そちらで調整することが出来ます。倍率は変えても構いません。「透明度」も変えておいた方がパスが見やすいでしょう。

ここまできたら「途中で止めて、後日作業を継続する」ことを踏まえて、倍率だけは記録しておきましょう。

「描画モード」ボタンを押し、曲線になっていることを確認してから、画像を曲線パスでトレースします。

始点をクリックし、中継点をクリックしていきますが、この時にできるだけトレース画像の境界線にあわせるようにクリック位置を決めていきます。
なだらかな曲線の場合はあまり中継点を多くしない方が綺麗な曲線になります。

下は前に垂れている髪をトレースしている途中ですが、マウス位置によって曲線がずれることがわかりますので、曲線の状態を見ながら次のクリック位置を決めましょう。

緩やかなS字曲線は基本的には一本のベジエ曲線で描けることもポイントになります。

この「VMLペイントひな形」は、出来るだけ少ない曲線で描く方が素早くペイントされます。逆にたくさんの曲線で描くとゆっくりとペイントしてくれます。

下の画面ではうまくトレースされていますね。この位置でクリックして次の連続曲線を描きます。多少ずれても編集モードで調整できます。

終点をクリックしたら、右クリックを必ず行い、描画モードを終了します。

編集モードになりますので、「全体」や「詳細」モードを適宜切り替えて、各点をドラッグして曲線を調整します。

今描いたパスの線の上をクリック。

頂点が表示され編集可能になります。
 

ドラッグする時に下書き用画像を動かしてしまわないように。「詳細」モードで編集すると画像はドラッグできなくなりますので、主に「詳細」モードで編集すると良いでしょう。

このボタンが表示されているときは「全体」モードです。ボタンが表示されているときは「詳細」モードになっています。

うまく曲線の連続パスでトレースできたら・・・

@タグ表示部分をクリック。[Ctrl]+{A]ですべてを選択(これでタグが選択されます)、[Ctrl]+[C]でコピーします。

[Ctrl]+[C]・・・クリップボードというメモリーに現在選択しているものをコピーすること。[Ctrl]キーを押したまま。[C]キーを押して、同時に離す。
CはCopyと覚えよう。

A「VMLタグ形状確認ツール」にウィンドウを切り替え、タグ入力欄に[Ctrl]+[V]でコピーしたタグを貼り付けます。

Bどこか入力欄以外をクリックします。

shapeパスによる図形が表示されますね。

 


ここからこの「VML2図形作成ツール」の困った時の対処方法をいくつか先に説明しておきます。


【下書き用画像がずれてしまった場合には】

既に作成しているshapeのパーツのいくつかのタグを「VML2図形編集ツール」の「オブジェクトの作成・編集」文字の下の欄にあるshapeソースに入れ、欄外をクリックします。
するとその部品がVMLで表示されるので、画像を「全体」モードでドラッグして位置の調整をします。

ずれてしまったら・・・作成済みshapeタグのいくつかをコピペして入れる。

するとVMLシェープ図形と画像が表示される。

画像をドラッグしてVMLシェープに一致するように調整する。

※ドラッグで移動できるのは「全体モード」になっているときです(ツールの画面上ではになっている時)。


【頂点や制御点@Aが重なってしまい、思うようにドラッグできない場合は】

 このように点がいくつも重なったりすると動かしたい点がドラッグできなくなることがあります。このような場合は敢えて動かせる点を大きく動かしてから、動かせなかった点も重ならないような位置に動かしておきます。

こうしておいてから、先に頂点(ダイヤ形の)をドラッグして動かし、それから制御点(@A)を動かして調整します。コツを掴むと制御点をどの方向にどのくらいの距離に置けば、曲線がどのように曲がるかわかるようになります。

ベジエ曲線の特長として、頂点とすぐ隣の制御点とを結ぶ線分は頂点での接線となります。また頂点と制御点との距離によって曲線の歪められる大きさが変わります。

「VML2図形編集ツール」の拡大機能を使う方法-細かい部分を描く時に一番便利な方法を伝授します。

但し、この方法は下書き用画像をドラッグして表示位置を変えてしまった場合には使えませんので、注意してください(シェープ図形にずれが生じるため)。

座標を変えずにシェープを拡大させることができます。また下書き画像も倍率を変えることができますね。この両方を変えて(相対的には同じ倍率になるように)作業します。

例えば下書き画像の倍率を0.7倍でトレースしているとします。ところが細かい部分がなかなか上手く頂点の編集ができません。

こんな時はシェープ(座標系)の拡大をします。例えば、4倍に拡大したとしましょう。この時も下書き画像は変化ありませんので、下書き画像の倍率を0.7×4=2.8倍にしてやります。すると相対的に同じ倍率でトレースできますね。

やってみましょう。次のサンプルは下書き画像の表示位置は全くずらしてはいません。

小さすぎて作業が難しい。

元々下書き画像の倍率は1で作業していたので、シェープ倍率を5に、下書き用画像の倍率も5にあわせます。5倍に拡大されます。

これで大きく表示され作業が楽になりますので、トレースします。

編集モードで頂点を編集してパスを修正します。

シェープと下書き用画像の倍率を共に元に戻します。ズレもなくトレースできていますね。


【VML2図形編集ツール】では、InternetExplorerの「表示」-「文字サイズ」で文字サイズを変更すると、頂点や制御点のサイズを変えることができます。

文字サイズを「最小」にすると細かい部分での点のドラッグが行いやすくなります。

・・・文字サイズが「中」の場合

・・・文字サイズが「最大」の場合

・・・文字サイズが「最小」の場合。細部での編集にはこれで対応しましょう。


脱線!〜〜【ベジエ曲線の練習】

基本的には次のような緩やかなカーブや緩やかなS字曲線は一本の3次ベジエ曲線で描けます。

下の曲線はすべて一本で描けるので挑戦してみてね。

次のような途中で急激にカーブの曲率が変わるものやS字曲線は一本の3次ベジエ曲線では描けません。下の線はすべて二本の連続曲線で描いています。

次のカーブを「VML2図形編集ツール」の一本の曲線で描く方法

まず開始点をクリック

終了点をクリック
終了点をクリックして、描画が終わったからとすぐに右クリックしない

弦の方向へカーソルを移動させ

右クリックして描画モードを抜けると次のような曲線が出来る。

曲線上をクリックして点の編集を行う。「詳細」モードで行うと点が半透明で表示されるので、作業しやすい。

このように「終点でクリックしたらすぐに右クリックするのではなく、カーソルを動かしてから右クリックで描画モードを終了させる。」と、編集しやすくなることが多いようです。

【連続曲線の特長】

連続した二本のサブパス曲線では

アンカーポイントで滑らかな曲線にするには、「一つ目のサブパス曲線の第二制御点」と「アンカーポイント」と「二つ目のサブパス曲線の第一制御点」がアンカーポイントを挟む形で一直線上に並ぶときです。
このとき、この直線はアンカーポイントでの曲線の接線になります。

・・・紫の四辺形がアンカーポイント

この特長を活かすと、アンカーポイントで滑らかに曲がる曲線にする場合の制御点の置き方がわかります。

一直線上に並ばないときは、下図のようにアンカーポイントで折れ曲がる。

 

 


【下書き画像の上に操作パネルがあってトレースできない場合には】

例えば下のようにトレースしたい左目の部分の上に操作パネルがある場合、これが邪魔になりますよね。

・・・これが操作パネル

操作パネルはマウスでドラッグして配置場所を移動させることが出来ます。[操作パネル]と書かれた部分をクリックしたままドラッグして邪魔にならない場所に移動してからトレースしましょう。

下のように操作パネルを移動させれば左目の部分もトレースできるようになります。

※ドラッグで移動できるのは「全体モード」になっているときです(ツールの画面上ではになっている時)。


【作成したVML図形の位置を移動したい場合には】

原点を移動しても下書き画像やVML図形もすべて移動します。つまり原点を基準にしているVMLパスの座標は変わりません。

VML図形の原点を基準にした位置を変えたい場合には、図形の点以外の部分(例えばパスの線上の任意の箇所)をクリックしたままドラッグすると、位置を変えることができます。
この場合はパスの座標が変わります。

1、移動したい図形をクリック。

2、その図形の任意の箇所(点以外)をクリックしたまま

3、希望する場所へとドラッグします。

※ドラッグで移動できるのは「全体モード」になっているときです(ツールの画面上ではになっている時)。


【どうしても細かい部分が見辛くて、作業が困難な時には】

お勧めではありませんが、IE7やIE8には拡大レベルの変更という機能が右下にあります。この機能で200%などに変更すると拡大表示になりますので、少しは作業しやすくなるかもしれません。

・・・「拡大レベルの変更」で200%にした場合

全体が200%に拡大されます。但し、点を表すマークなども拡大されるため、思ったほど作業が楽になるとは言い切れません。

注意!下書き画像の「倍率」は、下書きに対してVML図形を大きく描きたい場合や小さく描きたい場合に使用します。あくまでも下書き画像の倍率が変わるだけで、細かい作業を行うときに倍率を変えて行うというものではありません。
※VML図形も合わせて拡大・縮小が出来るというものではありません。

下書き画像の「倍率」は作業のはじめに一旦決めたら後から変更しないでください。


脱線:VMLペイントひな形はshapeエレメントのサブエレメントが使えるようになっています。

サブエレメントは、<v:fill /><v:stroke /><v:skew /><v:extruction /><v:shadow />などがあります。

またshapeエレメント自身にもfilled(塗りつぶすかどうか)やstroked(線を描画あするかどうか)、fillcolor(塗りつぶし色)、strokexolor(線の色)、,z-index(CSS)、rotation(拡張CSS)、strokeweight(線の太さ)などの属性があります。これらを使用して色を変えたり、グラデーションをかけたりできます。

これらの詳細は「VML」をご覧ください。ここではよく使用する属性のみの説明に留めておきます。

塗りつぶし色の指定・・・fillcolor="色" 色はHTML色指定に準じます。例)fillcolor="#ff6655"

線の色指定・・・strokecolor="色" 色はHTML色指定に準じます。例)strokecolor="gold"

線の太さ指定・・・strokeweight="サイズ" サイズは単位付で指定できます。例)strokeweight="2pt"

塗りつぶしの可否・・・filled="f"またはfilled="t" fはfalse、tはtrueの意味で、falseならば塗りつぶしは行われません。

線の描画の可否・・・stroked="f"またはstroked="t" fはfalse、tはtrueの意味で、falseならば線(パス)の描画は行われません。

尚、これらはサブエレメントによって上書きされます。
例)
<!--垂髪1-->
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="f" path="m 66 168 c 38 196 13 245 10 304 c 12 372 24 411 46 456 c 21 400 19 345 24 288 c 29 232 54 184 67 183">
<v:fill color="red" on="t" />
</v:shape> 

上の例ではshapeのfilledはfですが、サブエレメントfillのon="t"によってfilledはtになり、fillcolorはredになります。


さて、脱線から元に戻ります。

shapeエレメントが増えてくると混乱が起きますので、コメントを使用してどの部品のshapeかをわかるようにしましょう。

<!--垂髪1-->をshapeの前に挿入

fillcolor="black"を加えて塗りつぶし色は黒にしましょう。filled="f"は塗りつぶしなしですから、filled="t"に修正します。

次のように黒髪になりました。

ここまでが一手順です。これを繰り返していけば曲線の連続によるshapeパスが出来ます。


【重要!】

VMLペイントひな形は、shapeのパスが曲線の連続である必要があります。途中のcコマンドは省略されたものでも構いません。また座標区切りが半角スペースではなく、,(カンマ)でも構いません。

しかし、パスの途中にcコマンド以外があると動作しませんので注意してください。クローズドパスにするxコマンドは一番最後にあるか、一番最後にeコマンドがある場合はxeとなっている場合のみクローズドパスとして動作します。eコマンドも一番最後にある場合のみ動作します。

基本的に「VML2図形編集ツール」で曲線によるパスは連続曲線になるので大丈夫ですが、VML1ですと、パスの連結でmコマンドによる現在点の変更が起きてしまい、パスの途中にmコマンドが入る形になることで動作しなくなることがあるので、完全な曲線の連続パスになるように修正しなければなりません。

xコマンドとeコマンドは一番最後にある場合のみ、mコマンドは最初にある場合のみOKで、途中にあると動作しません。

複合パスはcコマンドでの連結のみOK。lコマンドなどはNG。

OK path="m * * c * * * * * * c 〜〜"

OK path=" m * * c * * * * * * c 〜〜"・・・最初に半角スペースがあっても良い

OK path="m * * c * * * * * * c 〜〜 xe"

OK path="m * * c * * * * * * c 〜〜 x e"

OK path="m * * c * * * * * * c 〜〜 x"

OK path="m * * c * * * * * * c 〜〜 e"

OK path="m * * c * * * * * *  〜〜 e"・・・二つ目以降のcコマンドは省略可能。

OK path="m*,* c*,*,*,*,*,* c〜〜 e"・・・座標区切りはカンマでもOKで、コマンドの前は半角スペースが入ってもOK

NG path="m * * c * * * * * * m * * c 〜〜"・・・特にこの形はVMLペイントひな形では動作しないので注意!

NG path="m * * c * * * * * * x m * * c 〜〜"

NG path="m * * c * * * * * * e m * * c 〜〜"


「VML2図形編集ツール」はここでオブジェクトのNoを変えて追加でパスを作成できますが、すでに作成したパスによって下書き画像が隠れてしまい、邪魔になることがありますので、【全Data削除】ボタンで作成したパスを削除します。

大丈夫、「VMLタグ形状確認ツール」にコピペしてあるので、最初に作成したshapeはそちらに残っています。

では「VML2図形編集ツール」で「全Data削除」したら、垂髪2をトレースしましょう。

描画モードの曲線でクリック場所を考えながら・・・終点をクリックしたら、右クリックで描画モードを抜けますね。

編集モードで各点を修正します。

タグをコピーして、「VMLタグ形状確認ツール」の入力欄に追加します。

次のようになりますね。

これもまたわかりにくくなるので、コメントを入れてからやはり塗りつぶし色を黒に、塗りつぶしをするに修正しましょう。

ここまで垂れた髪を別々に描きましたが、勿論ひとつで済ませても結構です。

次はその例として右髪を連続トレースしてみます。

では「全Data削除」から描画モードにして・・・。

かなりざっくりとトレースしましたが、編集モードで各点を修正します。

こんな感じでしょうか・・・

できたshapeをまた「VMLタグ形状確認ツール」に追加で貼り付けて、コメントを入れ、塗りつぶしを黒にします。

形状はこんなです。

 


ではここで中断するための方法を書いておきます。

このまま各ツールを閉じてしまうとせっかく作ったshapeが消えますね。

そこで「VMLペイントひな形」に書き込んで保存しておきましょう。

「VMLペイントひな形」(VML_Paint.htm)をメモ帳やサクラエディタなどのテキストエディタで開きます。

上記「VNLタグ形状確認ツール」で貼り付けていったソースタグをすべて選択してコピーします。

例えばこの説明の今までのですと、

となります。

そのソースを「VMLペイントひな形」(VML_Paint.htm)の

<div id="setvml" style="display:none; position:absolute; z-index:5">



</div>

の中に貼り付け、上書き保存してください。

これで今まで作成したソースは残せますね。

次回からはこの保存したソースのVML部分のみを「VMLタグ形状確認ツール」に貼り付けてから、続行させることが出来ます。

下記青いソース部分を残しておけばよい。

<div id="setvml" style="display:none; position:absolute; z-index:5">

<!--垂髪1-->
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" fillcolor="black" filled="t" path="m 66 168 c 38 196 13 245 10 304 c 12 372 24 411 46 456 c 21 400 19 345 24 288 c 29 232 54 184 67 183"></v:shape>
<!--垂髪2-->
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" fillcolor="black" filled="t" path="m 68 180 c 51 226 35 271 43 357 c 54 457 100 504 122 535 c 73 470 60 438 52 346 c 45 255 66 213 72 193"></v:shape>
<!--右髪-->
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" fillcolor="black" filled="t" path="m 74 178 c 50 238 49 294 70 376 c 99 456 124 474 143 520 c 182 585 184 628 185 647 c 187 599 166 556 147 511 c 185 553 216 603 224 622 c 224 610 214 568 207 558 c 224 574 226 596 237 618 c 236 587 229 564 224 547 c 238 558 245 585 254 601 c 252 586 254 588 255 578 c 254 589 258 591 259 598 c 264 582 264 569 265 550 c 273 568 269 574 268 591 c 283 573 282 532 279 507 c 291 538 283 550 279 573 c 317 516 354 444 374 374"></v:shape>


</div>

「VMLペイントひな形」に貼り付けたついでに、これがちゃんとペイントできるかIEで開いて確認しておくと良いでしょう。途中までですがちゃんとお絵かきしてくれますね。


次は右目のまつ毛が見えてますので、そちらを描きましょう。

ちょっと線の色が黒ではわかりにくいので、タグ欄にstrokecolor="red"を追加して赤で表示させてみましょう。

 細かい作業になりますので、集中!!!

できたらまた「VMLタグ形状確認ツール」に追加します。ここままでは赤い線なので、strolecolor="white"に変更し、コメントを入れます。

もうひとつのまつ毛もトレースして同じようにタグを追加しましょう。


次は顔よりも奥にありそうな首を描いてみましょう。大きいのでトレースしやすそうですね。

トレースと点の調整が終わったら、「VML2図形編集ツール」上で色をつけてみましょうか。

タグ欄のfilled="f"をfilled="t"に変更、 fillcolor="#FDEFEF" を追加して欄外をクリックします。

 

うん、よさそう。このタグを「VML形状確認ツール」に追加しましょう。コメント<!--首-->も忘れずに。

首のところに線が二本入っていますので、これもトレースしておきましょうか。


春菜ちゃんは水着を実は着ています。この肩紐の影をトレースしてみます。

 肩に隠れてしまう部分も含めて描いてみました。

この影は線の色は無し、塗りつぶし色を黒にして、半透明にしてみたいんです。

塗りつぶしの透明度を設定するには <v:fill /> サブエレメントのopacity属性を使用します。

まず、線の色は無しなので、stroked="f"に、塗りつぶし色"黒"なのでfillcolor="black"に。そして透明度を30%にしたいので、<v:fill opacity="0.3" />というサブエレメントを追加します。

<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="black" stroked="f" path="m 403 605 c 415 599 429 591 438 589 c 447 584 447 581 438 583 c 427 586 410 593 400 600"><v:fill opacity="0.3" /></v:shape>

こんな感じになります。

これに肩紐を追加しました。

shapeのソースを「VMLタグ形状確認ツール」に追加で貼り付けするのを忘れないように。


肩の部分をクローズドパスで描画してみます。

クローズドパスは、描画開始点と終点とを直線で結び、輪ゴムのようにどこも切れていないパスにしてしまうものです。決して「開始点と終了点が同じ座標である」ということではありません。逆に言えば「開始点と終了点が同じ座標であってもクローズドパスになっていない場合もある」ということです。

クローズドパスにするにはその一連のパスの最後にxコマンドをつけることで、切れていない輪ゴムのように閉鎖したパスになります。

・・・クローズドパス path=" m 54 119 c 69 76 84 32 103 39 c 122 46 98 142 129 147 c 160 152 215 41 228 60 c 241 79 210 152 179 224 x"

・・・オープンパス   path=" m 54 119 c 69 76 84 32 103 39 c 122 46 98 142 129 147 c 160 152 215 41 228 60 c 241 79 210 152 179 224"

では、肩のトレースを。

<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="#FDEFEF" path="m 288 656 c 302 622 340 587 387 584 c 435 576 462 617 479 649 x"></v:shape>

パスの最後にxコマンドを入れますが、必ず半角スペースをつけて入れてください。

下のようにくっつけては駄目です。

<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="#FDEFEF" path="m 288 656 c 302 622 340 587 387 584 c 435 576 462 617 479 649x"></v:shape>

fillcolor="#FDEFEF"は薄いベージュ色です。勿論塗りつぶしを行いますので、filled="t"ですね。

 の開始点と終点とが直線で結ばれているのがわかりますね。

※ここではクローズドパスとオープンパスの説明をしましたが、サンプルではクローズドパスにはしていません。隠れる部分ですし、クローズドパスにしたほうが良い場面でもありませんので。


顔の輪郭を描く。

髪に隠れる部分も含め大きく描きました。

 

 

以下細かい作業が続きますが、説明は繰り返しになりますので、途中省略させていただきます。

 

 

 

 


黒目部分のごまかし

ここでは黒目部分を白と黒のグラデーションでごまかしてみます・・・汗

こんな感じになります。

shapeは、

<!--黒目-->
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="black" path=" m 185 366 c 160 309 185 302 207 348 c 221 381 209 411 185 366"><v:fill color2="white" type="gradient" angle="290" /></v:shape>

です。グラデーションは<v:fill />サブエレメントのtype="gradient"でグラデーション塗りつぶしができます。

グラデーション色はfillcolorが第一色になり、fillサブエレメントのcolor2で第二色になります。fillサブエレメントでcolor="red"とすると、shapeのfillcolor="black"は採用されず、fillサブエレメントのcolor="red"がfillcolorになります。

angoleはグラデーションの方向を示します。angleは0で上方向にcolorからcolor2へとグラデーションします。

angle="290" は、290度(反時計回り)で考えてください。

・・・angle="0" ↑

・・・angle="90" ←

・・・angle="180" ↓

・・・angle="270" →

・・・angle="290"

 ※この黒目は楕円形ですよね。サンプルではクローズドパスにはしていませんが、この黒目のように完全にクローズドパスにしたほうが良い場合もあります。

本来ならば

<!--黒目-->
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="black" path=" m 185 366 c 160 309 185 302 207 348 c 221 381 209 411 185 366 x"><v:fill color2="white" type="gradient" angle="290" /></v:shape>

と パスの最後にxコマンドを入れた方が良いでしょう。

 

【ポイント】楕円を描くときには

曲率の緩やかな方に開始点を置いて描くと、制御点@Aが始点や終点から離れるため調整がしやすくなります。

曲率の大きなところからはじめるよりも   緩やかなところからはじめる方が制御点が離れるので調整がしやすい。


【髪飾りの花の描き方】

この花は各花びら一枚一枚としてみると、それぞれがオープンパスのようになっています。どうせならグラデーション塗りつぶしもしてみましょう。中央部分が白く、花びらの周囲ほどピンクになるようにしたいと思います。

花びらをまとめて描いてしまうと、グラデーションが上手く「中央から周囲に向かって白からピンクに」することができません。type="gradientradial"もovalエレメントでしか放射状グラデーションになってくれないからです。

そこで中央部分をまず白で描画しておき、重ねて各花びらをグラデーション塗りつぶして描画します。グラデーション方向はangle="角度"で設定できます。グラデーション塗りつぶしは<v:fill />サブエレメントを使用します。

例 <v:fill color="white" color2="#ff66ff" type="gradient" angle="0" on="t" />

angle="0"で角度0度つまり上向きにcolorからcolor2の色にグラデーションします。90度では左向きにcolorからcolor2へとグラデーションします。グラデーションには他にも多色グラデーションがあります。

詳しくはVML fillをご覧ください。

まず中央部ですが、各花びらと重なり合う部分も考慮して大きめに描きます。それをfillcolor="white" とし、stroked="f"で線を描画しないようにしておきます。

花びらの奥側にありそうなものを描きます。

これは角度が30度くらでしょうか?angle=30"でグラデーションしてみましょう。color2="#FF00FF" strokecolor="red"にしてみました。

<!--花びら1-->
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="white" stroked="t" strokecolor="red" path="m 177 96 c 166 93 152 95 143 82 c 138 70 141 51 149 48 c 155 37 159 42 169 41 c 165 30 185 28 194 35 c 205 43 204 57 204 77"><v:fill color2="#FF00FF" type="gradient" angle="30" /></v:shape>

花びら2も同様に描きます。角度は330度くらいでしょうか?

<!--花びら2-->
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" ffilled="t" fillcolor="white" stroked="t" strokecolor="red" path="m 200 84 c 212 7 264 27 261 51 c 283 60 276 80 250 89"><v:fill color2="#FF00FF" type="gradient" angle="330" /></v:shape>

うんよさそうですね。

残りも同様に描いて完成させましょう。

完成VMLソース

完成VML図形 (divによって余分な部分が見えないようにしています) divの背景色はgold

 

 

このソースを「VMLペイントひな形のid="setvml"のDIV内に貼り付けます。このままですと右側の切れている部分が汚い感じで表示されてしまうので、このdivのサイズ調整や書き出し画像の位置調整などの設定を施してください。

完成サンプルは次のようになりました。

サンプル1

 尚、このサンプルではVMLソースの最後に
<!--ペンの追い出しパス-->として
<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" path=" m 161 161 c 121 41 80 -80 51 -160"></v:shape>が入っています。これはVMLで描画後にペンをDIVボックスの上方向に移動させて追い出すためのもので、上記VML図形に入っている黒い直線がそれにあたります。

最後に書かれているパスの描画は、スクリプトの

var endph=0//一番後ろのPATH移動で書き込みするかどうか。0:書き込みしない。1:書き込みする。0を推奨

で設定できます。ペンを残したままにする場合は、追い出し用のパスをいれずに、endph=1としてください。

また、このサンプルでは

<div id="VMLstage" style="position:absolute; z-index:1; left:10px; top:10px; width:630px; height:620px; overflow:hidden; border:1px black solid; background-color:#F8E4F8"></div>
<div id="PENstage" style="position:absolute; z-index:2; left:10px; top:10px; width:630px; height:620px; overflow:visible">

としています。

VMLstageがペイントが行われるdivエレメントで、PENstageはペンが動くためのステージ用のdivエレメントです。PENstageはoverflow:hiddenにはしていません。

描画のための設定ですが、ペンの位置調整とペイントの位置調整を施しております。

var moveiposl=200//移動画像の横方向配置調整
var moveipost=-30//移動画像の縦方向配置調整

var inkposl=200//書き出し画像の横方向配置調整
var inkpost=-30//書き出し画像の縦方向配置調整

がその設定に当たります。

少し発展させたサンプル1

少し発展させたサンプル2

このように風景画も描けますサンプル3

textpathサブエレメントがわかる方は、このようなこともできます。サンプル4


【同じ形の図形を作る方法】

位置が違うだけで同じような図形を描くには、既に描いたシェープ図形をドラッグして複製を作ります。

※回転がかかっている場合は回転の中心の関係でドラッグ位置が正確に決められなくなりますので、素直に描きなおしたほうが良いです。

・・・このように同じ図形が同じ角度で存在している場合

まずどれでもいいのですが、一つ目をトレースします。少し小さいので作業が楽になるようにシェープ倍率と下書き画像倍率を共に2にしましょう。

少し小さいので作業が楽になるようにシェープ倍率と下書き画像倍率を共に3にしましょう。

星の頂点をクリックしてトレースします。

最終点をクリックしたら少し左側にカーソルを移動させてから右クリックで編集モードにします。

パスの線はずれていますが、編集で修正します。

パスの線上のどこかをクリックすると、頂点が表示されます。

詳細モードにして各点をドラッグして修正します。これでも細かい場合はもう少し倍率を変えましょう。

パスが思ったようにできたら編集終了です。

タグをコピーして「VMLタグ形状確認ツール」に追加しましょう。

追加終わりましたら、このシェープ図形を下書きの他の星の所にに移動させます。

オブジェクトの作成・編集 No.を2に変更し、ボタンを押します。

今作成したシェープ図形の点が消えますね。

この作成したパスの線をドラッグして次の星のところまでこのシェープ図形を動かします。

綺麗に合わせたらマウスの左ボタンから指をを放します。

これで移動完了しましたので、タグをコピーして「VMLタグ形状確認ツール」に追加しましょう。

これを繰り返せば複製のタグが作れます。


【番外】

ドーナツのように中が繰り抜かれた図形を描くには。通常のようにmコマンドが途中で使用できませんので、一工夫が必要になります。

一気にひとつのshapeで描くのではなく、複数のshapeで分割して描いてください。

この場合は複数のshapeを綺麗に重ね合わせる必要があるため、全Data削除を行わずに残し、「VML2図形編集ツール」でオブジェクトを複数使用したほうが良いかもしれません。

一例)

このような画像の場合は一例として次のように分けて考える。

これを重ね合わせる。

 

 

 

 

 


【 「VML2図形編集ツール」でオブジェクトを複数使用 】について

オブジェクト no.1で描画したところです。編集モードは【全体】になっています。

 

このまま「オブジェクト作成・編集」のno.にある"1"を"2"に変更して新たに曲線を描きます。

2に書き換えて欄外をクリック。

新たにトレースして描画します。 

続けて同じようにno.を"2"から"3"に変更して新たなパスを描きます。

同様に"4"に変更してトレースします。

 こうすると、前のオブジェクトのshapeがそのままVMLで表示されたままに、新たにshapeを追加できますので、ズレが生じていないかを確認しながら、微妙な調整が出来ます。

これらのshapeタグは消えずに残っています。「全データ表示」で見ることが出来るでしょう。 


「VML2図形編集ツール」で、一旦右クリックで「描画モード」から「編集モード」になったら「描画モード」ボタンを押さないでください(VMLペイントひな形で使用できない形式のパスが作成されるため)。

必ず「全Data削除」か、オブジェクトno.を変更したなにもまだパスのない状態で「描画モード」にするようにしてください。


以上簡単ですが、説明を終わります。

このひな形のわからない点がありましたら「ぴあにしもタグ掲示板」へと書き込みくださいませ。書き込み/投稿パスワードはenjoyです。

 


【VML2図形編集ツール】の進んだ使い方

先に「一旦右クリックで「描画モード」から「編集モード」になったら「描画モード」ボタンを押さないでください。」と書きましたが、これはあくまでも「VMLペイントひな形で使用できるパスを作成する場合には行わないでください。」という意味です。

実はVML図形を作成する際に「既に描かれているパスに更に描画モードでパスを追加する」という機能こそ、「VML2図形編集ツール」が持つ目玉機能の一つです。

ここではこの「描画モードを再開することによるパスの追加」について少し説明いたします。

適当にオープンパスの図形を描いてみます。

filled="f"をfilled="t"に変更し、fillcolor="red"を追加して赤く塗りつぶします。

開始点と終点は直線になっていますが、線は描かれていませんね。クローズドパスにし、このパスをendするためにパスの最後にxeを追記します。このeを付けることがあとの作業に重要な意味を持ちます。
線を見やすくするためにstrokeweight="3pt"とし、strokecolor="green"も追加しましょうか。

<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="red" strokeweight="3pt" strokecolor="green" path="m 53 128 c 70 66 86 3 116 -9 c 146 -21 134 76 173 79 c 212 82 238 -27 270 2 c 302 31 349 143 299 196 c 249 249 122 233 70 213 xe"></v:shape>

開始点と終点は直線で結ばれ、直線も緑色で描画されていますね。

この状態で「描画モード」ボタンを押してください。

パスが追加できるようになっています。上の図形の内部に小さな図形を追加します。

シェープのソース部分の先ほど付けたeを削除します。欄外をクリックしてみると・・・

先ほどとは違い、追加した曲線の内部は塗りつぶしがなくなりました。これは先に描いたパスと追加したパスが独立していない状態になり(eを削除したため)、塗りつぶしの塗りつぶし部分が塗りつぶしなしになったからで、この二つのパスはまだつながりを持っているということです。

eというのはpathの内部で使用するコマンドで、直前のパスを終了させ(end)、後続するpathと独立させるという命令となります。eを付けるか付けないかで、前後の関係が保たれるかか、断ち切られるかということですね。

結局、塗りつぶしの中で塗りつぶしが行われると切り取られるようになります(関係が保たれている場合)。

これを利用すれば、くり抜いた図形を作成できるのです。

ここまでのタグは下記の通りです。

<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="red" strokeweight="3pt" strokecolor="green" path="m 53 128 c 70 66 86 3 116 -9 c 146 -21 134 76 173 79 c 212 82 238 -27 270 2 c 302 31 349 143 299 196 c 249 249 122 233 70 213 x m 161 143 c 189 139 216 135 219 148 c 222 161 199 184 172 193"></v:shape>

 

この関係を保っているパスをそのままに、更に後続のパスとは関係を絶つには、上記パスの最後にeコマンドを入れます。次のようになりますね。

<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="red" strokeweight="3pt" strokecolor="green" path="m 53 128 c 70 66 86 3 116 -9 c 146 -21 134 76 173 79 c 212 82 238 -27 270 2 c 302 31 349 143 299 196 c 249 249 122 233 70 213 x m 161 143 c 189 139 216 135 219 148 c 222 161 199 184 172 193 e"></v:shape>

 

 

さて、先ほどは最初に描いた曲線の後ろにxeを付けてから「描画モード」を再開しました。

ではクローズドパスにするxはそのままに、eコマンドは付けずに再開するとどうなるでしょう?

<v:shape style="width:100; height:100; left:0; top:0; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0 0" filled="t" fillcolor="red" strokeweight="3pt" strokecolor="green" path="m 53 128 c 70 66 86 3 116 -9 c 146 -21 134 76 173 79 c 212 82 238 -27 270 2 c 302 31 349 143 299 196 c 249 249 122 233 70 213 x"></v:shape>

この状態で同じように「描画モード」ボタンを押して再開すると・・・

この場合は最後にクリックした位置(終点)が開始点となって再開されるんですね。勿論これで描画しても後から頂点の編集をすることも可能ですから構わないのですが、おかしな動作をすることがありますのでお勧めしません。

また、再開時にクリックで開始点が決められないのも不満です。それを防止するためにeを予め付けていたんですね。

このような特性を活かしてこのツールを使い倒して素敵なVML作品をお作りくださいね。

 

末筆になりましたが、このような有用なツールを開発・無料公開してくださっている「あやなおたかしゅん」さんに(人-)謝謝(-人)謝謝!感謝!


用語関連・・・主にAdobe Illustratorで使用される用語を元に説明に使用しています。簡単ながら一言説明しておきます。
詳しくはIllustrator 講座などがインターネット上に存在しますので、そちらに譲ります。

アンカーポイント・・・イラストレータでは固定点を意味します。これは曲線を曲げるベクトルを定める制御点を含めません。つまりひとつの最小のパスの開始点と終了点となります。

セグメント・・・パスを構成する最小構成のサブパスを言います。二つのアンカーポイントで結ばれた一本のパスのことで、これ以上パスを細分化することはできません。通常複数のセグメントの連続によって複雑なパスを構成します。

方向点・・・制御点を言います。

方向線・・・アンカーポイントから制御点へと伸びる線のことで、ベクトル線です。

ハンドル・・・方向線と方向点をまとめて言うことが多いようです。ハンドルを操作することによって、アンカーポイントから伸びるパスの曲がり方を変えることができることからハンドルと呼ぶようです。

 


 

VML2図形編集ツールとタグ確認ツールの使い方」 の簡易説明ビデオ

 

説明不足はご容赦ください。

再生ボタンを押すと再生されると思いますが、画面が小さい場合は、プレーヤーを右クリックして、「拡大・縮小」=>「全画面表示」でフルスクリーンで見られると思います。

フルスクリーン時に画面をダブルクリックすると、元に戻ります。

サーバー回線が混み合うと、再生できない場合があります。その場合は時間帯を変えてご覧ください。

 説明ビデオで登場する「Color Dialog 003」は、以下にあります。XP/Vista/Windows 7 RCでも正常に動作します。

http://www.vector.co.jp/soft/win95/net/se085351.html