| いかがでしたでしょうか 少しずつTIMEをつかったひな形が出来てくるといいですね ｓｃｒｉｐｔと違って ＴＩＭＥのやり方がわかれば初心者の方でも取り組みやすいと思います ＴＩＭＥオリジナル.html はそのまま保存していて置いてくださいね それを これから使います・・・・・ クッピー もうすっかり チャットのほうばかりはまっていますが 皆さんの配信される雛形を いつも楽しませてもらっています どうぞ 講座を見られている皆さんも ひな形配信に参加してみてください 一緒にひな形つくり やりましょう・・・・ エル |
はい エルちゃん 皆さん こんにちは 超ビギナーの為のひな形講座いかがですか？ 第８章まで出来ましたでしょうか？
こんにちは クッピー (*^.^*)エヘッ それをいわれると 私はつらいな。 もう チャットのほうばかり嵌ってしまって とほほ そうそう クッピー 講座の文字サイズね 少し 大きく出来ない？ チャットでね ちょっと小さいかなといわれたのよ。(゜ー゜)(。_。)ウンウン だからね 今日から ちょっと 形式を変えたのよ。 ほら 大きくなったでしょう 文字も(*^.^*)エヘッ じゃあ見やすくなったところで 本題に入りましょう。 前回の８章で HTML+TIMEをつかって 表示だけのひな形作ったでしょう。 今日は「移動する」でひながたつくってみましょう。(゜ー゜)(。_。)ウンウン あれは可愛かったわね。 桂ちゃんが色々な素材やひな形提供してくれて とっても楽しかったわよそれじゃあね 前回みたいに、 メモ帳を立ち上げてくださいね。 今回もHTML+TIMEひな形講座さんのを参考にしてやって行きたいと思います。 下のようにソース
(青文字のところ）をコピペしますね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML
XMLNS:t="urn:schemas-microsoft-com:time">
<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">
<!--
.time{
behavior:url(#default#time2);
}
-->
</STYLE>
<?IMPORT
namespace="t"
implementation="#default#time2">
</HEAD>
<BODY
id="body1">
<!--ここに入力していきます-->
</BODY>
</HTML>
＊ここでいったん 名前を（オリジナルＴＩＭＥ.html）とつけて保存してください。 保存の仕方は第８章を参考にしてくださいね。
。。。o(゜^ ゜)ウーン 保存するときは 【ファイルの種類】をすべてのファイルにするのだったわね。 そしてファイル名を オリジナルTIME..htmlね。 できたわ。 これで どうするの？ そうそう そうすると マイドキュメントにこのマークが出るのだったわ
そう。 エル それをこれからオリジナルとして保存してＴＩＭＥのひな形作るときに立ち上げると便利だわよ。 それではメモ帳をいったん閉じて 練習のためにマイドキュメントに行って その【オリジナルＴＩＭＥ.html】を立ち上げてくださいね。 何もない真っ白なものが立ち上がりましたね。 その白い画面の中で【右クリック】をして【ソースの表示】をクリックしてください。 先ほどのメモ帳がありますね。 それでは 今日の移動の雛形をそこに記述して行きましょう。 今日のサンプルですね。
(ノ´▽｀)ノオオオオッ♪ 今日のはまた 斬新ですわね。 それでは前回みたいに 右クリックをして名前をつけて保存ですね。 何にしようかな？ やはり Egypt1とEgypt2にしようっと Ｖ(○⌒∇⌒○) ルンルン
(゜ー゜)(。_。)ウンウン それでは 先ほどのソースに入れて行きましょうね。 前回は 背景は色にしましたね。 <BODY id="body1" bgcolor="#bdf876"> と入力したはずです。 そこのところを 先ほどダウンロードした大きいほうを
<BODY id="body1" background="Egypt1.jpg"> と 上のソースに追加してください。 コピペでもかまいませんから。 それから先ほどと同じように 【名前をつけて保存】をクリックして【すべてのファイル】 ファイル名を【エジプト.html】としてください。 それでいったんメモ帳を閉じて マイドキュメントに行ってみてください。 先ほどのオリジナルｔｉｍｅとは別にエジプトのファイルが出来ましたでしょう。
(゜ー゜)(。_。)ウンウン できたわ。 立ち上げたら 綺麗な壁画が入っていたわ。 これが背景になるのね。 じゃあ ここに色々な背景の画像を入れることが出来るのね。
そうそう そうしたら 前回と同じやり方で下の表示のソースを入れましょうね。 それで 先ほど ダウンロードした （Egypt2.gif) をいれましょう。 次のように <body>と</body>の間にコピペしてくださいね。
<IMG id="image1" src="Egypt2.gif" style="position:absolute; left:0; top:0;" class="time" begin="0">
それを上書き保存して 更新ボタンを押してみてください。 どうですか エジプトの船が左上に表示されたはずです。
左上ではまずいですから (;^_^A アセアセ・・・ left の数値を1000 topの数値を320の数値に変更して
また 上書き保存してください。 インターネットエクスプロラーで見ると 下のほうに画像が重複していますがｏｕｔｌｏｏｋ ｅｘｐｒｅｓｓ でみると正常ですので気にしないで下さいね。
それでは 次に 移動ですね ＨＴＭＬ＋ＴＩＭＥひな形講座さんのを参考にして 次のように記述します。 コピペでもかまいません。
<t:animateMotion id="am1" targetElement="image1"
from="0,0" to="-880,0" begin="image1.begin+2"
dur="10" fill="hold" />
この意味は from="0,0"は 今画像がおいてある位置から to="-８８０,0" 左へ８８０移動ということですね。 ここで気をつけていただきたいのは fromの位置は今画像がおいてあるというところです。 また to のほうは -（マイナス）表示は左 何も表示がない場合は右へ移動ということです 上下の場合は 上に上がるほうが−（マイナス）表示です。
と言うことは from="0,0" to="50, -100" は 今画像が配置してある地点から 右へ５０ 上に100ということね。 なるほど そういうことだったのね。 ...ψ(。。)メモメモ...
そうそう エル 大分わかってきたわね。 beginのことは ８章でやったわね。 これも同じです。 画像表示時間を1秒に変更してみますね。 begin="image1.begin+2"
は 画像表示後２秒後に移動が始まります。 そういう意味です。 次のdur="10"ですね。 これは この場合、移動している時間を示します。 数値が少ないほど 時間は早く動きます。 色々やってみてくださいね。 次に fill="hold" は移動した後 そこに留まることを意味します。 そのほか元の位置に戻ったり 消したり出来ますのでＨＴＭＬ＋ＴＩＭＥひな形講座さんを参考にしてくださいね。
あっ エル 上書きを忘れないでね。 (;^_^A アセアセ・・・
で 変更したソースは下記の通りとなります。
<IMG id="image1" src="Egypt2.gif" style="position:absolute; left:1000; top:320;" class="time" begin="1">
<t:animateMotion id="am1" targetElement="image1" from="0,0" to="-880,0" begin="image1.begin+2" dur="10" fill="hold" />
わかっているわよ。 (ノ゜ρ゜)ノ ォォォ・・ォ・・ォ・・・・ 動いたわ 動いた (゜ー゜)(。_。)ウンウン じゃあ durの数値を ３にしてみようっと・・・・ ＼(>o<)／ギャーッ！ すご 速い！！
ということで 移動はわかりましたね。 ついでと言ったらなんですが メッセージも今回移動してみましょう。
<TABLE id="table1" width="300" border="1"
style="position:absolute; left:400; top:550;" class="time"
begin="16">
<TR>
<TD>
☆<BR><BR>メッセージ<BR><BR>★<BR>
</TD>
</TR>
</TABLE>
<t:animateMotion id="am2" targetElement="table1" from="0,0" to="0,-500" begin="table1.begin+1" dur="5" fill="hold" />
<TD>のところに属性をくわえてみましょう。 テーブルを少し透過して 背景色を黄色を入れて 文字をセンターにしました
移動は先ほどの画像と一緒ですよね 変ったところは 赤い部分だけですね
わかりました。 今回は８章でしっかりやっていれば 移動だけ覚えたらいいのかな。 なんだか面白くなってきたわ。 でももう一度８章をよく読んで見るわね。 (゜ー゜)(。_。)ウンウン エル 表示と移動で 次のような応用編を作りました。 応用ひな形 ところで クッピー 先ほどから コーヒー飲んでいるけど あのー σ(^_^)アタシには？？ あら おしゃべりすぎて喉が渇いたから ２杯とものんでしまったわ おいしい このモカコーヒー