| 今回のトランディッションを用いたスライドショー いかがでしたでしょうか？ トランディッションは いろいろな場面に利用できますからぜひ覚えてみてください。 ますます ひな形つくりが 楽しくなると思います それから ひな形見本のソースの画像ファイル名は ＨＰアップ上でつけた画像ファイル名ですのでこの講座で書いております画像ファイル名とは異なっておりますのでご了承下さい。 ・・・・・ クッピー 私も なかなか 忙しくて 雛形を作る時間がありません でも こうして クッピーとお話しながらでも ひな形に携われて楽しい時間を つくっています。 まあ 時々 クッピーに動作確認させられたりしていますので (≧ｍ≦)ぷっ! 少しは 教えていただいているお返しはしているわね オホホホ!!γ(▽´ )ツヾ( ｀▽)ゞオホホホ!! ここで もう一つ CMを どうぞ 講座を見られている皆さんも ひな形配信に参加してみてください 一緒にひな形つくり やりましょう ひな形配信は こちらへ 哲パパのメールまで ・・・・ エル |
はい エルちゃん 皆さん こんにちは 超ビギナーの為のひな形講座いかがですか？ 第１０章までうまく出来ましたでしょうか？
こんにちは クッピー (゜ー゜)(。_。)ウンウン 皆 すごく 上手だわね。 見ているだけでも とっても楽しかったわ。(゜ー゜)(。_。)ウンウン それでは 今回も TIMEを使ってやってみましょう。 今回も 前回のクリック同様 とっても人気度の高いスライドショーです。 スライドショーは 色々なひな形にアレンジできますから 覚えておくと とっても便利ですよ。(ノ´▽｀)ノオオオオッ♪ スライドショー あれ？ スライドショーやらなかったかしら？ ああ あれは 最初のほうで画像差し替えでやったのよね。 思い出したわ♪ そうね 難しいのではなく それこそ 超初心者の方 対象に わかりやすく説明したいと思います それじゃあね 前回みたいに、 メモ帳を立ち上げてくださいね。 今回も 最初の約束事の ソースを 立ち上げましょうね 皆さんは 前回 オリジナルTIME.htmlというファイルを作成していると思います それを開いて 表示 ソース をみてくださいね <!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>
＊まだされていなかった方や 初めての方は８章を参考にしてくださいね
(・_・。)(._.。)(・_・。)(._.。) ウンウン 私も マイドキュメントに オリジナルTIMEとして 保存していたわ 雛形出来上がったら 上書きじゃなくて 名前をつけて保存だったわね (￣。￣)ホーーォ。 サボっている割には よく覚えているわ (o^-^o) ウフッ
そうね ヾ(≧▽≦)ノギャハハ☆ ここまでは 毎回 同じ台詞だわ ・・……(-。-) ボソッ それでは 始まる前に 今日の サンプルですね 今回の画像は 哲パパの写真を使わせていただきました。 サムネイルにしていますので クリックして大きい画面にして右クリックで ダウンロードしてお使い下さい
・・・・・サンプル（１）
(ノ´▽｀)ノオオオオッ♪ 今日のはまた 素晴らしい 富士山の写真だわ。 哲パパ腕を磨いたわね。 私もデジカメ買ったことだし がんばろうっと・・……(-。-) ボソッ はい クッピーが書いてくれている名前で保存したほうが わかりやすいわね・・・・・・これでいいかしら？ おっと
同じところに保存だったわ。
(゜ー゜)(。_。)ウンウン それでは 始めましょうね オリジナルtime.htmlを開いて 表示→ソースの表示でメモ帳を出してください
そして <body>と</body>の間に まずは 最初の画像表示のソースをいれてみましょう。
<IMG id="image1" src="fuji1.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 1;" class="time" begin="0"
dur="7">
idは "image1" ですね 画像名は "fuji1.jpg" 配置する位置関係は 左に９０px 上から９０ｐｘのところですね。 z-indexは重ねる順番ですね数値が少ないほど 下になります。 ＴＩＭＥを使って 表示が０秒後 そして ７秒間だけ表示となりますね。
同じようにして 上の ソースをコピペして 先ほどの下に並べます。 それで変更していただきたいところは
id="image2" 画像が "fuji2.jpg" z-index の数値が２ 時間のところを begin="image1.end" とします。 これは 最初の１枚目の画像表示が終わってから表示すると言う意味です。
ですから 次のようになると思います。
<IMG id="image2" src="fuji2.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 2;" class="time" begin="image1.end"
dur="7">
同じようにして ３枚 ４枚 ５枚の画像を １枚目のソースをコピーしながら 進めていってください。 おわかりになったと思いますが、 当然３枚目は２枚目が終わってからですから begin は begin="image2.end"
となりますね。
(゜ー゜)(。_。)ウンウン クッピー クッピーに 言われたようにしていったら 次のようなソースが出来ました。
<IMG id="image1" src="fuji1.jpg" style="position:absolute; left : 90px; top : 90px; z-index : 1;" class="time" begin="0" dur="7">
<IMG id="image2" src="fuji2.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 2;" class="time" begin="image1.end"
dur="7">
<IMG id="image3" src="fuji3.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 3;" class="time" begin="image2.end"
dur="7">
<IMG id="image4" src="fuji4.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 4;" class="time" begin="image3.end"
dur="7">
<IMG id="image5" src="fuji5.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 5;" class="time" begin="image4.end"
dur="7">
(゜ー゜)(。_。)ウンウン エル それで正解 変わってないのは 配置の位置だけよね。 それで見ると もう スライドショーは 出来ているはずですね。 でも 最後は ５枚目でこれではストップしますよね。 続けて繰り返したいときは 最初のソースのところ
赤い部分ですね。 ０秒後と画面５の表示が終わってからと ２つ入れておきますと 永遠に繰り返します。 (;^_^A
アセアセ・・・
<IMG id="image1" src="fuji1.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 1;" class="time" begin="0;image5.end" dur="7">
(ノ´▽｀)ノオオオオッ♪ (ノ゜ρ゜)ノ ォォォ・・ォ・・ォ・・・・ ほんとだわ 簡単なスライドショーができたわ。
最後に 仕上げとして 額と 背景をつけましょう 背景は <BODY id="body1" background="gaku1haikei.jpg"> としますね。 次に額ですが最初のソースを使いましょう。 ただ 気をつけていただきたいのは dur 部分は いりません。 ずっと表示なのですから 配置も少し変えてくださいね
<IMG id="image6" src="gaku1.gif" style="position:absolute;
left : 70px; top : 70px; z-index : 6;" class="time" begin="0">
いかがでしょうか 出来上がると 次のようになります メッセージを入れる TABLEもつけてみましょう。
文字の色も変えてみました。
<TABLE width="300" border="1" style="position:absolute; left:565; top:86;">
<TR>
<TD><FONT color=#ddeae9>
☆<BR><BR>メッセージ<BR><BR>★<BR></FONT>
</TD>
</TR>
</TABLE>
なるほど (゜ー゜)(。_。)ウンウン スライドショーが出来たわ まるで 壁に貼ってあるみたいにいいわね。 サンプル（２）
そうね エル でも 動きは ちょっと ぱっぱっ として もうすこし 柔らか味が欲しいでしょう。 そういうときに HTML+TIMEひな形講座のトランディッションを使うと いいですよ。 今回は フェイドインのソースを使ってみました。
次のソースを 画像１の下に並べるとわかりやすいですよね。
<t:transitionFilter id="fade1" targetElement="image1" type="fade"
subtype="crossFade" mode="in" begin="image1.begin" dur="3" autoreverse="false"
repeatcount="1" />
<t:transitionFilter id="fade11" targetElement="image1"
type="fade" subtype="crossFade" mode="out"
begin="image1.begin+4" dur="3" autoreverse="false"
repeatcount="1" />
上のソースが in ですね 下のソースが out ですね id わかりやすいようね in のほうが "fade1" outのほうを "fade11" としました。 mode のところは in とout となりますね。 begin ですが 上は 当然 画像１の表示からでいいですよね。 ３秒でフェードインします。
次に終わるときですが 画像表示は７秒間でしたよね。 ですから ７秒間のうち フェードアウトを ３秒でするわけですから ７から３をひいて 画像１の表示４秒後からフェードアウトが始まるとすればいいわけです。
同じようにして 画像 ２，３，４，５と ソースをつけてみましょう。
出来上がった ソースは次のようになります。
<IMG id="image1" src="fuji1.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 1;" class="time" begin="0;image5.end"
dur="7">
<t:transitionFilter id="fade1" targetElement="image1" type="fade" subtype="crossFade" mode="in" begin="image1.begin" dur="3" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="fade11" targetElement="image1" type="fade" subtype="crossFade" mode="out" begin="image1.begin+4" dur="3" autoreverse="false" repeatcount="1" />
<IMG id="image2" src="fuji2.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 2;" class="time" begin="image1.end"
dur="7">
<t:transitionFilter id="fade2" targetElement="image2" type="fade" subtype="crossFade" mode="in" begin="image2.begin" dur="3" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="fade22" targetElement="image2" type="fade" subtype="crossFade" mode="out" begin="image2.begin+4" dur="3" autoreverse="false" repeatcount="1" />
<IMG id="image3" src="fuji3.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 3;" class="time" begin="image2.end"
dur="7">
<t:transitionFilter id="fade3" targetElement="image3" type="fade" subtype="crossFade" mode="in" begin="image3.begin" dur="3" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="fade33" targetElement="image3" type="fade" subtype="crossFade" mode="out" begin="image3.begin+4" dur="3" autoreverse="false" repeatcount="1" />
<IMG id="image4" src="fuji4.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 4;" class="time" begin="image3.end"
dur="7">
<t:transitionFilter id="fade4" targetElement="image4" type="fade" subtype="crossFade" mode="in" begin="image4.begin" dur="3" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="fade44" targetElement="image4" type="fade" subtype="crossFade" mode="out" begin="image4.begin+4" dur="3" autoreverse="false" repeatcount="1" />
<IMG id="image5" src="fuji5.jpg" style="position:absolute;
left : 90px; top : 90px; z-index : 5;" class="time" begin="image4.end"
dur="7">
<t:transitionFilter id="fade5" targetElement="image5" type="fade" subtype="crossFade" mode="in" begin="image5.begin" dur="3" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="fade55" targetElement="image5" type="fade" subtype="crossFade" mode="out" begin="image5.begin+4" dur="3" autoreverse="false" repeatcount="1" />
わかりやすいように 色を変えてみました。 出来上がった作品は これですね サンプル（３）
(・_・。)(._.。)(・_・。)(._.。) ウンウン 随分 イメージが変わるわね こうやって並べると でも 使いみちは 両方ともいいわね。 ひな形によって選べそうだわ。 それにまだ他に トランディッションのソースがあるから 色々なトランディッションで試してみるのもいいわね。 やり方はまったく一緒なんでしょう。
うん!(^^) そうそう やり方は全く一緒だから 色々なトランディッションを試してみてくださいね。 これは 哲パパの 花の写真を使って
作りました。 俵万智さんの歌とともに 楽しんでください。。。。 応用編