.
(￣ー|電柱|-￣)ソーッ こんにちは またまた すっかりご無沙汰しています (;^_^A
アセアセ・・・
あっ もう１月の終わりなのに 今頃 明けましておめでとうございます。 今年もよろしくお願いいたします
(^_^)/ クッピー 皆さん こんにちは。 ヾ(≧▽≦)ノギャハハ☆ クッピーらしいわね 今年もよろしくお願いいたします。
そうそう 丁度よかったわ 聞こうと思っていたのよ。 雛形に縁がない私が聞くのもなんですが あのね ほら 最近 雛形をみているとVMLで作りましたって よく言われるでしょう。 これ なあに。
オオーw(*゜o゜*)w なんたる 偶然 エル あら 最近 この言葉よく使うわね。 エルが考えていることが私にはわかるのかしら。 今日のテーマは そのVMLなんです。 VMLを基本からやりたいというご要望に応えて VMLの基本をちょっと雛形に取り入れていっても面白いかなということで今回のタイトルをVML基本編としました。
そもそも そのVMLって なあに? (;^_^A アセアセ・・・ 私には 画像に見えるけどね 普通の画像と どう違うの？
('-'*)(,_,*)('-'*)(,_,*) ウンウン VMLとは Vector Markup Language
の略なんです。 詳しいことはわかりませんが 私たちが普通 画像作成ソフトで絵を描くときは ビットマップ方式で描いているのです。 その描いた画像はgifやjpegの拡張子がつきますよね。 そのビットマップ画像と違って、画像を点の座標や点を結ぶ曲線の方程式のパラメータなどの形で表します。 ですので解像度によらず高品位な表示が得られます。
それから、数値で図形を表しているので、色を変化させたり、形状を変えてアニメーションもできるの。
ＶＭＬを雛形に取り入れると 楽しいですよ。 Ｖ(○⌒∇⌒○) ルンルン
…c(゜^ ゜ ;)ウーン いまいち 意味がわからないわね。 例えば 例を挙げて 説明してくれる？
はい じゃあね 下の四角を見てくださいね。 左は 私が画像作成ソフトを使って描いたものです。
全く同じに見えるでしょう。 では 右クリックして名前をつけて保存を見てください 左図は保存がでますね。 gif画像だからです。 でも 右図は出ませんね。 四角という点の座標で線をつなぐという数値で表しているからです。
でっ その VMLの作り方なんですが ここではあやなおたかしゅんさんがVML作成ツールを作ってくださっていますのでそれを使わせていただきますね。 今回は この四角を使って 背景のグラデーションの変化をHTML+TIMEを使って やってみたいと思います。 まずは 雛形倶楽部のサイトにアップしてあります。 それでは ダッシュ!(((
三( -_-) これです
VML作成ツール
なるほど 今 保存しようと思っても 保存できないわね。 色の変化はどういう風になるんだろうね。
('-'*)(,_,*)('-'*)(,_,*) ウンウン 画像だと色の変化を入れるのはscriptとかがないと 難しいと思いますが VMLの四角を使うと簡単に変化を楽しむことだ出来ます。 実際にやりながら 説明して行きますね。
まず HTML＋ＴＩＭＥでもありましたが ＶＭＬにもそれを使用する場合の決まり記述があります。 下記のとおりです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML xmlns:v =
"urn:schemas-microsoft-com:vml">
<HEAD>
<META
http-equiv="Content-Type"content="text/html; charset=Shift_JIS">
<META
http-equiv="Content-Style-Type"content="text/css">
<TITLE></TITLE>
<STYLE type="text/css">
<!--
v\:* {
BEHAVIOR:
url(#default#VML)
}
-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
ですね。 ＶＭＬとHTML+TIMEを同時に使う場合は 以前 TIMEの決まりごとを作りましたが それも上の記述に追加しますと、 あやなおたかしゅんさんのVML作成ツールにも書いてありますが 下記のとおりになります。 青い部分がHTML＋ＴＩＭＥを使う上で必要な基本ソースです。 赤い部分がＶＭＬで使う必要な基本ソースです。 これを また ＴＩＭＥのときと同じように メモ帳のコピペして名前をつけてhtmlファイルで保存してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML
xmlns:v = "urn:schemas-microsoft-com:vml" xmlns:t="urn:schemas-microsoft-com:time">
<HEAD><title></title>
<META
content="MSHTML 6.00.2800.1106" name=GENERATOR>
<META
http-equiv=Content-Style-Type content=text/css>
<STYLE>
.time{
behavior:url(#default#time2);
}
v\:* {
behavior:
url(#default#VML)
}
</STYLE>
</HEAD>
<?IMPORT namespace="t"
implementation="#default#time2">
<BODY>
</BODY>
</HTML>
HTMLファイルで保存しましたね。 そうしましたら VMLツールを開いてください。 VMLツールを開きますと いきなり沢山の図形が出てくると思いますので それを 下図の全削除をクリックして削除してください。 (*^.^*)エヘッ すっきりしましたでしょう。
次に 四角の図形を出しますね。 下図の種類の○枠をクリックして四角(rect)を選択します。 そうしますと タグがA入力されます。
次のようなタグが でてきましたね Aの部分ですね。
<v:rect style="width:30; height:30; left:0; top:0; position:absolute; rotation:0;" filled="f" strokecolor="black" strokeweight="1">
</v:rect>
ツールの上を見ますと そのタグの図形が出来ていますね。 上のタグをそのまま 四角にした図形です。 
を動かしますと 全体の四角が動きますので 位置関係の数値が変わります。 また 
を動かしますと 図形のサイズが変わってきます。
では そのVMLの中で 動かしてみてくださいね。 大きくなったりすることで タグの数値も変わってきましたでしょう。 他の説明もしますね。 まず ｖ：は VMLタグがここから始まるということですね。 rectは 四角です ▼マークを動かしますと その種類の説明がなされていると思いますのでここでは割愛させていただきます。 サイズもよろしいですよね。 次の rotation:0 は 図形の角度です。 数字を変えると角度も変わります。０の代わりに１０、３０と入力してみてください。 次のfilled="f"は 色の塗りつぶしです。 このツールでは "f"としてありますね。 これは ｆはfalseの略で無効 つまり 塗りつぶし無しという意味です。 では 色をつける場合は どうするかというと fillcolor="red"
としてみてください。 塗りつぶし色は赤ですとしました。 どうですか 変化しましたでしょう。 次のstrokecolor="black"は 枠ですね 線の色は黒と出ています これを 逆に 線無しにする場合は stroked="f"
とします。 してみてくださいね。 画面をクリックしますと ちゃんと 線無しの赤い四角が出来ましたね。 fillcolor="green"
にしますと 上の緑の四角と同じものが出来ますね。
そのタグを 先ほどのVML、HTML＋ＴＩＭＥ基本ソースの<BODY></BODY>の間にコピペします。
どうですか htmlファイルを開きますと しっかり 緑の四角が出来ていますでしょう。
('-'*)(,_,*)('-'*)(,_,*) ウンウン 緑の四角が出来ました。 わかった 今回の背景の色の変化はこの四角を広げて作るのね。
えーと 色をグリーンに変えてっと それで 線無しね。 これでいいのかしら？
<v:rect style="width:113; height:139; left:242; top:159; position:absolute; rotation:0;" fillcolor="green" stroked="f" strokeweight="1">
</v:rect>
はい BODY間にいれましたね。 サイズを広げるには ｐｃによって 画面の大きさが違いますから width:100%;
height:100%; として <HEAD>の<STYLE>にBODY {MARGIN: 0;} を追加して、
<STYLE>
.time{
behavior:url(#default#time2);
}
v\:*
{
behavior: url(#default#VML)
}
BODY {MARGIN:
0;
}
</STYLE>
としてください。 そうしますと 画面いっぱいに広がります。 次に グラデーションですね。 グラデーションは 次のような種類があります グラデーションのサンプル
では そのグラデーションを入力したものをひとつ選んでみましょう。
<v:rect id="iro" style="width:100%; height:100%; left:0; top:0; position:absolute;
rotation:0;" fillcolor="green" stroked="f" strokeweight="1"><v:fill
color2="#ffffcc" rotate="t" angle="-45" focus="100%"
type="gradientRadial"/></v:rect>
角からにしました。 これで 背景のグラデーションが出来上がりですね。 でっ 折角ですから HTML＋ＴＩＭＥで 色の変化を入れましょう。
<t:animateColor id="color1" targetElement="iro"
attributeName="fillcolor" to="blue" begin="2"
dur="5" fill="hold" />
２秒後に５秒かけてfillcolorが 青に変化とＴＩＭＥでしました。 これですね 背景の色の変化
また color2 も変化させたいときは
<v:rect id="iro" style="width:100%; height:100%; left:0; top:0; position:absolute;
rotation:0;" fillcolor="green" stroked="f"
strokeweight="1"><v:fill id="iro2" color2="#ffffcc" rotate="t" angle="-45"
focus="100%" type="gradientRadial"/>
</v:rect>
<t:animateColor id="color1" targetElement="iro"
attributeName="fillcolor" to="blue" begin="2"
dur="5" fill="hold" />
<t:animateColor id="color1" targetElement="iro2"
attributeName="color2" to="#ccccff" begin="2"
dur="5" fill="hold" />
と <fill のほうにも idを 入力します。 一緒にして <v:fill id="iro2"
color="green" color2="#ffffcc" rotate="t"
angle="-45"
focus="100%" type="gradientRadial"/> としても構いません。 出来上がりです 背景グラデーション完成
ＶＭＬの四角（rect）を使っての色の変化の雛形は 沢山あります。 いくつか あげてみましょう
六条の御息所 チムチムチェリー ある晴れた日に 白拍子 猫草子 おてもやん
あら 結構 v:rectを使っての 背景の色の変化 作っていますね。 (;^_^A
アセアセ・・・
オオーw(*゜o゜*)w さすが クッピー 沢山作っているわね。 でも背景の色が変化することで 効果を表していますね。 まるで 舞台の照明の役割みたいだわね。 ('-'*)(,_,*)('-'*)(,_,*)
ウンウン 色々 使えるのね。 感心して聞いていました。
はい 今回は ＶＭＬの基本ソースと 四角(rect) のＶＭＬを使って やってみましたが 別に 丸でもいいのです。 丸の中をグラデーションの種類を 変えて 色の変化も楽しんでみてくださいね。
