ぴあにしも積雪のつくり方

その14-1 ぴあにしもの画像入替機能のWaveと透過について(その1)

作成したひな型です、ＤＬして開いて見てください（波の音のwavファイルも同梱しました、解凍して使用してください）

その前に.windows7Liveメ-ルで作成される方はご留意ください

この機能はこのソ－スを貼り付けないとエラ－になるかどうか試しておりません
もしエラ－となった場合は下記のとおり対処してください

ぴあにしもで完成したあとは

メニュ⇒まとめて保存⇒メモ帳で下記コピ⇒メモでhtmlを開いて、一番最初の行の前に貼り付けます⇒上書き保存⇒
htmlをクリック⇒正常に動作確認⇒htmlのファイルより⇒電子メ－ルで送信⇒名前を付けてデスクトップに保存⇒Liveメ－ルの下書きへ⇒ドラック＆ドロップ⇒送信

<HEAD>
<script>
// Mini script to eliminate BASE tag "Access Denied" error from ONE for scripts.
// Script by Bill Scott, June, 2002
// JavaScript version.
　function stopError() {
　　　return true;
　}
　window.onerror = stopError;
　bs0 = document.all.tags("BASE");
　bs0(0).removeAttribute("href",0);
</script>
</HEAD>

1.画像入替機能のwavwを使用し、海と空の風景だけでなく、海岸とか馬の親子などが入った画像を使用し、
空と海岸と馬の親子を揺らさず、海だけ揺らす動画を作成します

そのためには、空と、海岸と馬だけ透過して重ね合わせ、透過した画像（海だけ透過されていない）を揺らします。

まず画像を2枚用意します(この場合サイズは幅600px高さ450px）

画像Aは海の入った画像です

画像A

画像C(空と海岸と馬とを透過した画像です、これから画像Bを使用し作成します）

海の上の部分は空ですが、透過されているので真っ白です、海岸も馬も透過されています。
この画像の透過の場合のポイントは2頭の馬と足の部分など、細かい部分は、大まかに囲んで透過して構いません。

足の部分を細かく透過すると足も揺れてしまいます。

2.まず画像Cの透過画像の作成に入ります、　画像Aから海の部分から下を切り抜き画像Bを作成します。

画像B

上の画像を使用し、画像Cを作成します

a.キャンバスの設定、透過する画像は空の部分も透過範囲に含めるので幅600px高さ450pxとします

3.キャンバスの設定の背景の色を決めます。ペイントでのブラシや塗りつぶしの際の使用する色を統一せねばなりません。
左の小窓の赤と同じ色は、その他の左から2番目の赤です。

この場合、海の色に含まれていない色なら、他の色で透過は可能です。

使用した色が海に使用されている色に部分的に一致するとその部分透過されますので、色の選択には注意してください。

4.ブラシを使い、透過する部分を塗りつぶすため囲みます。線が途切れて隙間が空かないように気を
つけましょう。

6.ペイントの塗りつぶしで一挙に塗りつぶします。でも馬のあたりが完全ではありません。

7.隙間の修正です、何度も申しますが、馬のあたりは大まかに丁寧に塗りつぶしてください。

8.額のようなアイコンはキャンバスの背景も含めて切り取る場合は、右のアイコンをクリックします。
赤の部分は次の操作で、透過されます。