.
ヾ(＠⌒ー⌒＠)ノおはようございます 前回の切り抜き 上手くいきましたか。 今回 揺れのひな形に入る前に もう少し 切抜きの使い方説明しますね。
(^_^)/ クッピー 皆さん お(~∇~* )ノ は(*~∇~*)ノ よっ( *~∇~)ノ ございます そうそう あの花火みたいなので 切り抜いたのよね。 その使い方だけだったけど そうよね 横にも色々なツールがあったけど それを使うのかしら？
(⌒^⌒)ｂ うん 正解♪ 今回の切り抜きは そう難しい切抜きではないから 花火みたいなのを使って クリックして もしまだらになるようでしたら スクロールバーを動かして 調整すればいいです。 下図ですね
それとね 切り抜き 花火の横に 線グラフみたいなのがあるでしょう。 それをクリックして 画像の中の切り抜くところの境界線を順にクリックしていくと 綺麗な切抜きが出来ます。 細かくクリックすればするほど 切り抜きは綺麗に出来ます。 また 確定が出ないときは 画像の中で ダブルクリックすると 確定と同じになります。
なるほど 色々な使い方が出来るのね。 では クッピー 今回の ひな形つくりに入りましょうよ。
('-'*)(,_,*)('-'*)(,_,*) ウンウン そうよね 今回は オリジナルJavaScriptさんから お借りしています揺れのScriptを使いますね。 いつものように ＴＩＭＥで 利用している メモ帳を 立ち上げてください。 それの <body>と</body>
間に 次のソースを入れてください。
<IMG src="image1.jpg" style="position:absolute; Z-INDEX:
1; left : 142px; top : 136px;">
それで メモ帳をデスクトップに 新しいフォルダーを作って（名前はｔｅｓｔでよろしいです） ファイルの種類を全てのファイルにして ファイル名をtest.htmにして 保存してみてください。 デスクトップで開いてみると ×のついた画像が見えるはずです。
ここに 画像を 用意しますね。 前回の画像と それを切り抜いたものです・
 |
 |
 |
| ① |
② |
③ |
| image1.jpg |
image2.gif |
image3.gif |
この上の画像でも ご自分で切り抜かれた画像でもよろしいですから 先ほど デスクトップに作成したフォルダーの中に保存してください。
オオーw(*゜o゜*)w testのフォルダーの中の test.htmを 開いたら ①の画像が きちんと入っているわ。 これだけでも 綺麗だわね
感激 (T-T )( T-T)ウルウル
はい そうしたら 先ほどのメモ帳に それでもよろしいのですが そのテストのフォルダーの test.htmを 開いて 【表示】→【ソース】でもよろしいですから メモ帳を開いてくださいね。 そこに 次のソースを張ります。
<IMG src="image2.gif" class="time" begin="0" style="Z-INDEX: 2; position: absolute; left :
157px; top : 312px;
filter: alpha(opacity=60,style=2,finishOpacity=60,)
wave(add=0,freq=6,lightstrength=20,phase=3,strength=15)}" name="myText1">
<SCRIPT LANGUAGE="JavaScript">
<!--
isou=0;
function mywave(){
isou=(isou-5)%100;
myText1.filters["wave"].phase=isou;
setTimeout("mywave()",300);
}
mywave();
//-->
</SCRIPT>
それで 上書き保存をして 先ほどの test.htmを開いてみてくださいね。 揺れが入って 湖が動いていますね。
あらかじめ 上の３つの画像を testのフォルダーに保存しましたので ②が①の画像の上に 重なったわけですね。 ちょっと右よりですのでleft;157px の部分を ご自分で 調整してくださいね。 じゃあ 数値を142px まで 動かしてみました
また 揺れの具合も ご自分で 調整してみてください。 上の青い部分ですね。
値：add=0（波状にした後に波状にする前の要素を重ねない）
add=1（波状にした後に波状にする前の要素を重ねる）
freq=数値（波の数）
phase=0～360（波の開始位置）
strength=数値（波の強さ）
lightstrength=数値（波の凹凸面の明るさの落差）
です。
揺れが出来ましたね。 どうしても揺れを使うと その手前にある 枝とか 木とかにかぶさりますよね。 それを防ぐ為に ③を用意しました。
</SCRIPT>のあとに このソースをおいてください。 ③ですね。
<IMG src="image3.gif" style="position:absolute; Z-INDEX:
3; left : 120px; top : 135px;">
①の画像の切抜きですので そのまま left とtopの数値は ①と同じにしてくださいね。 いかがですか きちんと揺れていると思います。
すごい すごい (*゜▽゜ノノ゛☆パチパチ 見事に 出来ているわ。 なるほど なるほど 切り抜きの揺れ こうやって 聞いていると簡単な気がするけど・・・・・ クッピー 一つ 質問していいかしら？ 上のソースで 重なりが逆になったりはしないのかしら。 順番にやっていったからかしら？
うん 順番にソースを入れていったら 最初に入れたソースが 一番下になりますね。
これを見てください →
順番画像に入れたものです。
<IMG src="gazou1.gif" style="position:absolute; left:0; top:100;">
<IMG src="gazou2.gif" style="position:absolute; left:100; top:150;">
<IMG src="gazou3.gif" style="position:absolute; left:200; top:200;">
次に 上のソースを見ていただくと z-index と言うのがありますね。 z-index は、要素の重なり順序を指定するためのプロパティです。数値が大きいほど前面に表示されます。
<IMG src="gazou1.gif" style="position:absolute;
z-index:1; left:0; top:100;">
<IMG src="gazou2.gif" style="position:absolute;
z-index:3; left:100; top:150;">
<IMG src="gazou3.gif" style="position:absolute;
z-index:2; left:200; top:200;">
順番を z-index で 変えてみましょう →
z-indexを使ったもの 真ん中の赤色が 一番上に来ましたね。
こういうふうに 重なりの順番を 変えることが出来ます。 それでは 出来上がった 揺れ 皆さんはいかがでしたでしょうか？
こういう風になったと思います
サンプル 背景を 黒にしてみましょう。 <BODY>のなかに bgcolor="#000000"を 追加しました。
こうなります。 どうですか 素敵な揺れのひな形が出来上がりましたでしょう。
サンプル２
オオーw(*゜o゜*)w ほんと またまた 背景を 黒にしたら とっても素敵ね。 これで 音楽をつけて メッセージをつけて
ひな形 出来上がりね。 ２回に分けて 綺麗な揺れのひな形が出来ましたね。
('-'*)(,_,*)('-'*)(,_,*) ウンウン これに ＴＩＭＥの 移動とかを追加すると また 違った 雰囲気を出すことが出来ますね
そして 魅せられたにも オリジナルジャバＳｃｒｉｐｔさんの揺れを使って沢山アップしてあります。
配信メンバーの方に ご協力いただいて 投稿作品の中から 参考ひな形として ここに 一部紹介しますね。
 |
 |
 |
 |
 |
 |
 |
| 苗名滝の虹 |
想い出の海 |
日御碕 |
銀の羽飾り |
高千穂峡の紅葉 |
マッターホルン |
紅葉の歌 |
| 桂さん |
ｋａｚｕｅさん |
ＷＡＫＯさん |
ｋｉｋｉさん |
ｍａｃｈｉｋｏさん |
ｍａｋｋｏさん |
クッピー |
オオーw(*゜o゜*)w 皆さんすごいですね。 いろいろ 工夫されて見事なひな形を作っていらっしゃいますね。 どうぞ これから
揺れのひな形作る人も ｐ(*^-^*)ｑ がんばっ♪
