.
ハーイ 皆さん 忘れた頃にやってきましたクッピーとエルのひな形講座です。 お元気ですか？ 講座の方の進み具合いかがでしょうか？ えっ もう待ちくたびれているって (*_
_)人ゴメンナサイ エルちゃまも元気にしていた？
(^_^)/ クッピー オヒサ!((( ^^)爻(^^ )))オヒサ! 最近 なかなか 会わないものね “o(￣‐￣*)
ゲンキゲンキ!! 前回のフィルターの効果はすごく人気があったわね。 ひな形の幅が広がったという感じだったわよ。 ところで 今回は なあに ((o(^∇^)o))わくわく
(⌒^⌒)ｂ うん 今回はね ９章でＨＴＭＬ＋ＴＩＭＥをつかって 直線移動をやったでしょう。 その復習をかねて 今回は 更にレベルアップして 曲線移動を やってみましょう。
それでは 復習ですね。 直線移動は まず 画像を表示して 次に 下のように移動のソースを出しましたね。
<IMG id="image1" src="gazou1.gif" style="position:absolute;
left:0; top:0;">
<t:animateMotion id="am1" targetElement="image1"
from="0,0" to="300,0" begin="0" dur="3"
fill="hold" />
このソースで 次のようなひな形をつくってみましょう・・・・・・
サンプル１
サンプルのソースは下のようになります。
<IMG id="image1" src="sakana-1.gif" style="position:absolute; left:0; top : 200px;">
<t:animateMotion id="am1" targetElement="image1"
from="0,0" to="1000,0" begin="0" dur="8"
fill="hold" />
('-'*)(,_,*)('-'*)(,_,*) ウンウン これなら覚えているわ これは ターゲット image1を 右方向へ８秒かけて１０００移動するということだったわね。 まっすぐに魚が泳いでいるけど 少し 斜め上に泳ぐようにするのは
<t:animateMotion id="am1" targetElement="image1"
from="0,0" to="1000,-200" begin="0" dur="8"
fill="hold" />
斜め下に泳ぐのは
<t:animateMotion id="am1" targetElement="image1"
from="0,0" to="1000,200" begin="0" dur="8"
fill="hold" />
で 赤い部分を 変えたらいいのよね。 これで 斜め下に 泳ぐのよね・・・・・ サンプル２
そうそう 思い出したでしょう。 今回は これを更に 動きの変化をつけて 魚がより自然に動くようにしてみましょう。
直線ではなく 曲線にします。 いつも HTML+TIMEでは お世話になっています
HTML+TIMEひな形講座さんに サンプル集のところに
曲線ツールがあります。 これを使わせていただきますね。
先ほどの 移動のソース 画像を表示するもこのまま使います。 これは 触りませんからそのまま 置いておきますね
その下に 移動のソースをおきますね
<IMG id="image1" src="sakana-1.gif" style="position:absolute; left:0; top :
200px;">
<t:animateMotion id="am1" targetElement="image1"
from="0,0" to="1000,0" begin="0" dur="8" fill="hold" />
１ HTML+TIMEひな形講座さん のサンプル集 曲線ツールを開きます。
２．① ② ③を 動かして 曲線を作ります
３．プレビューとソースの生成をクリックします
４.下にソースができますので２列目に次のようなソースが出来ていると思います。
<t:animatemotion id="kyokusen1" targetelement="span1"
path="m 0 0 c 234 -200 387 153 1000 -75" begin="0" dur="
3" autoreverse="
false" repeatcount="
1" fill="hold"
/>
赤い部分をコピーして 先ほどの移動のソース の青い部分と入れ替えます。
次のようになりますね・・・・
サンプル３
<t:animateMotion id="am1" targetElement="image1"
path="m 0 0 c 234 -200 387 153 1000 -75" begin="0" dur="8" fill="hold"
/>
オオーw(*゜o゜*)w 魚が ほんとに泳いでいる そういう感じだわね。 これは色々応用できるわね。花びらがまっすぐではなく曲線で散ることも出来るし ますますひな形が楽しくなるわね。
('-'*)(,_,*)('-'*)(,_,*) ウンウン 更に 変化をつけてみましょう。
画像を表示するソースは そのままにして 曲線ツールを使って またつくりましょう
<t:animatemotion id="kyokusen1" targetelement="span1"
path="m 0 0 c 264 -225 255 108 565 54"
begin="0" dur="3" autoreverse="false" repeatcount="1" fill="hold"
/>
赤い部分を 移動のソースの from から以降全部 入れ替えます
<t:animateMotion id="am1" targetElement="image1"
path="m 0 0 c 264 -225 255 108 565 54" begin="0" dur="8" autoreverse="false" repeatcount="1" fill="hold" />
durだけ5に変えました。
同じソースを５つコピペします。
<IMG id="image1" src="sakana-1.gif" style="position:absolute; left:0; top : 200px;">
<t:animateMotion id="am1" targetElement="image1" path="m 0 0 c 208 -215 137
99 300 50" begin="0" dur="5" autoreverse="false"
repeatcount="1" fill="hold" />
<t:animateMotion id="am2" targetElement="image1" path="m 0 0 c 208 -215 137
99 300 50" begin="am1.end" dur="5" autoreverse="true" repeatcount="1"
/>
<t:animateMotion id="am3" targetElement="image1" path="m 0 0 c 208 -215 137
99 300 50" begin="am2.end" dur="5" autoreverse="false" repeatcount="1"
fill="hold" />
<t:animateMotion id="am4" targetElement="image1" path="m 0 0 c 208 -215 137 99 300 50" begin="am3.end" dur="5" autoreverse="true" repeatcount="1"
/>
<t:animateMotion id="am5" targetElement="image1" path="m 0 0 c 208 -215 137
99 300 50" begin="am4.end" dur="5" autoreverse="false" repeatcount="1"
fill="hold" />
ＩＤのam1を順に am1 am2・・・と入れ替えていきます。 また 上を見るとbegin
も順番に am1が終わったら始まる am2が終わったら始まると 順番になっていますよね。 動作が終わったら次の動作がその地点から始まるということですね。 それも 順に入れ替えてみましょう。
begin="am1.end ・・・ am2.end am3.end という風にしていきます。
それから autoreverseが false と true がありますね 巻き戻しの有無ですね falseが巻き戻し無しです。 trueは巻き戻しが有効です。 その場合
fill="hold"はつけないほうがいいみたいです。
画像表示のソースの下にこれらのソースを並べると 魚は次のように動きます。・・・・
サンプル４
色々な動きを やってみると楽しいかもしれませんね repeatcount="1" のところですが
repeatcount=""で繰り返し回数を指定します。
repeatcount="indefinite"にすると、延々と繰り返します。 花びらが散るようなものにはいいかもしれませんね。
曲線を作るときに 他の方法もあります。 こんど 魅せられた男とその仲間達に新しいコンテンツが出来ました。
ひな形をつくっていく上で誰もがあたる疑問 またわからないことが 詳細に書かれています。 ぜひご覧下さいね
殆ど 桂ちゃんが 作成してくれています ひな形情報館です クッピーとエルの超ビギナーのためのひな形講座 同様 よろしくお願いしますね
そこに あやなおたかしゅんさんのVMLツールを使っての曲線移動が説明してあります。 ある程度 ひな形を作ってきた方やVMＬがおわかりになる方はそちらを使われてもいいと思います。 ＶＭＬを使ったひな形は また先の講座でやりたいと思います。
いかがでしたでしょうか 直線 曲線を 上手に使って 更に ひな形が作成が楽しめるとよろしいですね
