ヘルプ  --曲線移動--

おそらくここが一番わかりづらいかと思います。でもこの機能が他のソフトにはない”ぴあにしも”の特徴でもあります。
曲線は４つの点を相対座標で指定した場合のベジエ曲線を描きます。ベジエ曲線でももっとも単純なものですが、滑らかできれいな曲線を４つの点だけで定義できます。
４点でのベジエ曲線では必ず、始点から出発し２つの制御点で曲げられて終点まで移動します。４つの点が直線に並ばない限り制御点を曲線が通ることはありません。

変化をつけることができるパラメータは、”移動パス”です。

 [メインメニュー]

[ヘルプ内サブメニュー]

「曲線移動」「VML+TIME回転」「同じサイズの画像を曲線移動させる」「並列動作」の違いについて（パスが設定されていない動作は各機能共通で無視されます）。これらはHTML+TIMEという技術を使用しております。

「曲線移動」・・・開始動作と終了動作のみ透過で現れると透過で消えるが可能ですが、途中で透過変化はありません。また、その変化値を設定することもできません。代わりにソースが簡潔になります。

「VML+TIME回転」・・・ボックスの透明度とは別に予め透明度上限と透明度下限に合わせて透明度を変化させたり、角度変化（回転が起こる）をつけることが可能です。角度変化を最終動作でリピートさせることもできます。マウス追従やマウスクリックでの動作にすることもできます。

「同じサイズの画像を曲線移動させる」・・・他の機能でこの機能を行おうとすると２つのアイテムに同じ設定をしなければなりませんが、この機能では２つの画像に同じ動作をセットすることが可能になります。重ね順のみ違う値にすることで２つの画像がサンドイッチ構造のように動きます。透明度変化も値を自由に設定できます。

「並列動作」・・・最も同時に変化するパラメータが多く、曲線移動と同時に”重ね順変化”、”角度変化”、”透明度変化”、”倍率変化（画像の表示サイズが変わり、ズームインやズームアウトができる）”が可能です。その代わりソースが冗長になります。

曲線のpathは画面上を４回クリックすると決定されます。決定後は４つの点それぞれをドラッグすることで座標を変更したり、回転や拡大・上下反転・左右反転・逆転化などで数値的に変化させることができます。曲線は登録したものから戻すことも可能です。
逆転化は曲線の形は同じですが、始点が終了点に、終了点が始点になるような反対の移動を行うようなpathになります。

４点決定されているときには始点・制御点１・制御点２・終了点の各点にマウスカーソルを近づけるとカーソルが手の形になります。その位置でマウスボタンを押したままドラッグして希望の位置でマウスボタンを離せば点の位置を簡単に変更できます。

 使用方法
ここでは説明のために細かく設定と確認作業を書いています。慣れれば確認作業は少なくなるでしょう。

 この曲線移動では、「移動開始位置はどこになるのか、移動後の位置はどこにくるのか、移動の基準となる原点はどこか、曲線を複数登録した場合、どのように動くのかを把握すれば、決して難しいものではありません。

１、まず使用するアイテムに切り替え、動かす画像を選択（事前に素材を登録しておいて下さい）します。
　　これでプレビューさせると左上に画像がそのまま表示されます。画像配置がLeft:0px Top:0pxなためです。

２、画像を最初に表示させる位置を決めましょう。
　　「開始設定」でLeftとTopの数値入力欄に入力します。入力した位置に画像の左上端が基準となって表示されるのをプレビュー確認します。

３、２で設定したLeftとTopが最初に登録する曲線の始点になります。m 0 0 cは現在位置を(0,0)とする原点にしてそれを始点にする意味です。
    基準点や原点からみた座標系は右方向が横軸の正方向、下方向が縦軸の正方向になります。そして画像の左上端が表示基準になります。

まず曲線を表示登録するために黒い描画領域上で位置を変えて３つ点を打ってみます。点を打つにはマウスボタンをクリックします。
くりっくするたびに点が表示されます。最初の点が始点次の二つは制御点です。
４つ目の点をどこに打ちましょう？曲線を移動後に元の位置に戻してみます。
４つ目の点を始点に重なるようにクリックして設定します。この時描画領域の左下に始点を原点にしたマウスの座標が表示されます。ここで(0,0)となるようにしてクリックすると、始点と終点を重ねることができます。常に始点を打ったときその始点を基準にしたマウスの位置の相対座標がここに表示されますので、参考にして下さいね。

４、曲線ができましたので動作１にこの曲線を登録しましょう。動作１の左にある「曲線登録」ボタンを押します。

ではプレビューしてみましょう。あれれ？動きませんね。それもそのはず、まだ曲線上を移動する時間がセットされていませんから、動きようがありません。
動作１の変化時間に5と入れてみましょう。これでプレビューすると・・・どうですか？５秒かかって曲線通りに動いて元の位置に戻りましたね。
これが基本です。この曲線をいろいろ変えて登録し開始時間と変化時間をセットするとその通りに動きますので試してみて下さいね。勿論終点を始点に戻す必要はありませんので曲線を作って点の打ち方で曲線がどのように変わるかを確認するのもベジエ曲線を理解するのに役立つことでしょう。

５、では曲線を動作２や動作３などに追加するとどのようになるのか・・・実際にやってみましょう。この時必ず開始時間を0以上にして下さい。マイナスでも動きますが、現時点ではどのような動きになるのか理解しがたくなります。---これは別の機会に説明します。

動作それぞれに曲線は同じものを登録しても良いですし、動きの違う曲線を登録しても構いません。
登録しましたら開始時間と変化時間を設定して動きを確認してみて下さい。変化時間は0より大きくしなければ動きませんよ。また秒数は整数ではなく、小数点が含まれていても構いません(4.5秒など)。
ここでわかることは、「開始時間が0以上の場合は一つ前の動作曲線の終点が次の動作曲線の始点になる」ということです。動作曲線は次々につながって動いていくことがわかりますね。開始時間を0以外の正数にすると一つ前の動作の終点でその時間だけ待機することもわかります。
これらの特徴を踏まえてセットすれば複雑な曲線移動も可能になります。楽しいですね〜。
また動作に曲線登録するとその動作の終点座標が緑の文字で表示されます。これはウィンドウ座標に対して絶対座標ですから、その曲線移動後の現在位置はどこにくるのかを確認できます。次の曲線作成時の参考にできますので、試してみて下さい。

例：動作４での終点が緑の文字で(100,200)となっている。次の曲線で(50,10)の位置に移動させたい。
３つの点を打ちます。これはお好きな曲線にします。終点を移動させる分量だけ始点から離して登録します。
ここでは、「横方向100から50の位置にする=-50移動させなければならない」「縦方向200から10の位置にする=-190移動させなければならない」と考えます。
つまり始点に対して終点は(-50,-190)の位置にセットしなければなりません。４つ目の点を始点を原点とする相対座標を表示している黒いマウス座標表示を見ながら、(-50,-190)になる場所に打ちます。これを次の動作５の曲線に登録すると、その動作終了時に(50,10)の位置に移動完了します。
この動作５には緑の文字で終点座標が(50,10)になっていることも確認できます。

 曲線描画簡易ヘルプ１

次に登録したい動作の曲線：移動させたい場所の絶対座標を( X , Y )、一つ前の動作での終点座標絶対値(緑色の数値)( X1 , Y1 )とすると
次に登録する曲線の終点座標(相対値)( X2 , Y2 )は、”移動終了座標=移動前の座標+移動距離”から
X=X1+X2、Y=Y1+Y2なので、X2=X-X1、Y2=Y-Y1となる。
例：動作4の移動終了時の絶対座標（緑色の座標)が( 100 , 200 )で次に絶対座標で( 200 , 50 )のところに移動させたい場合は、
動作5の終点(黒いボックスの座標を見ながら)を、( 200-100 , 50-200 )=( 100 , -150 )にする。

移動速度について

A-D間の移動時間がdur="★"
※実際には少し違います。
tが0から1まで変化する時間がdurで加速減速しない限り等速で変化し、そのときに描く軌跡が曲線なので、大まかに言って上記のような感じで動く。
あたかも滑らかに速度が変化しているようになります。

円運動にする方法・・・実際には完全な半円にはならず、半円に似た放物線です。

曲線描画簡易ヘルプ２

開始時間をマイナス値にすると

移動しながら消えていく

"ぴあにしも"曲線移動では移動しながら消えていくという動作は透過で消える（動作９）で開始時間にマイナス値を入れることで実現できます。

透過で消える開始時間に-値をセットすると、以下のように繰り上がって動作し、動作８と透過で消えるが並列して動きます。
同じオブジェクトに対し、<t:animateと<t:animatemotionは同時に実行できます。

動作８のdurや透過で消えるdur・beginの値により、並列動作する時間が変わります。
極端には透過で消えるのbeginのマイナス設定次第で動作０までさかのぼって動作開始しますが、この時各動作の動きはつながらなくなります。
動作８のdurの範囲内で透過で消えるのbegin値をマイナス設定する（durもbeginnの絶対値にする)と、きれいに動きながら消えてくれます。

ソースにおいては、アイテム番号はid="ibox番号"になっています。<t:seq id="seq番号">でアイテムのシーケンス動作場所がわかります。

上のピンク色が動作番号、赤はアイテム番号を表す。
動作８のdurが5なので、透過で消える開始時間(begin)を-5にすると、動作8の開始と同時に透過で消える動作も始まる。
消える動作の変化時間(dur)が8なので、5秒間動きながら消える動作をした後、残りの3秒間は動かずに消えていく。
但し、残り3秒間は動作7の終了位置に戻っていしまいます。
透過で消えるの開始時間(begin)と変化時間(dur)は同じ値（絶対値で）にし、動作8の変化時間(dur)の値以下にするほうがいいでしょう。
以下のようになります。 

望ましい値： 0 =< dur9 =< dur8 ,  begin9 = -dur9

尚、透過で現れながら動く場合も、"ぴあにしも"で設定可能です。

※繰り返し動作は繰り返しのときにもbegin値がマイナスのため繰り上がり動作してしまい、おかしな動きになります。

同じオブジェクトに対し、<t:animatemotionで並行動作させることはできません。

参考：Html+Time使用時の基本    Ｈｔｍｌ＋ＴｉｍｅとＶＭＬ両方使用時の基本    HTML+TIMEの時間指定について

[ヘルプ内サブメニュー]

 [メインメニュー]

Copyright(c) 2004 My Software. All rights reserved.