Java applet AQUA CITY Example

水面の揺れなど、超特訓コーナーへ 水面の揺れ、上下移動製作テクニック・解説 トップページへ

(製作・変更方法: 中級者用)
( 前提条件: 元になる「水面の揺れ」画像が作れる)



( 最終的な揺れながらの上下移動表示 )


( 変更の元になる「水面の揺れ」単独表示 )
( 使用した画像 )

(1)背景画像


(2)揺れ部分の画像


(3)透明化画像


(4)固定部分の画像


(5)最終的な背景画像


最終的な立ち上がり時の初期画像の作成方法は、こちら

Background2、Background3 用



水面の揺れ設定詳細

※ 特別用途 上下・左右・斜め移動用 HEIGHTサイズ一覧表は、こちら

1)変更元のHTML ソースコード



2)最終的な上下移動のHTML ソースコード



3)変更方法、及び、重要部分の諸設定解説

(1)HEIGHT値一覧表を参考に、希望する縦幅を決めます。この場合、199 とします。

(2)次に、オリジナルの画像配置が省略型の0基点となっているため、正式な設定に全て変更します。

   省略型:  izu/9320_1.gif|*|, ⇒ 正式な設定 ⇒  izu/9320_1.gif|0|0|0|0|492|0|0|0| | |0|0|999|0|0|0|*|,

(3)次にオリジナルのHEIGHTが 358。新規HEIGHTが 199のため、約 150上下に移動させることにします。

   これに沿い、画像配置パラメタを、最終に近い形に変更します。

  正式な設定: izu/9320_1.gif|0|0|0|0|492|0|0|0| | |0|0|999|0|0|0|*|,

    ↓↓↓↓

  更に変更  : izu/9320_1.gif|0|-150|0|1|492|0|0|0| | |0|0|999|0|0|999|*|,

    その他の画像も同様、変更します。なお、background2で指定している画像も、揺れ画像として、この位置に設定します。

(4)オリジナルのHTMLソースコード部分を加筆・修正する代わりに、常に最終的なサンプル例をコピーの上、このソースコード の画像定義部分を
   加筆・修正利用
します。

(5)重要部分の |1|999|4|5|3|0|1|0| | |1000|0|0|-150|0|0|4|7|*|, は特殊なため、下記の解説を参考にします。

(6)元になるサンプルが横0/縦0を基点としていたため上下移動への設定変更は比較的容易でしたが、基点が混在している画像の移動設定・調
   整は、煩雑になります。







( 揺れながらの左右移動 )


登録手続きは、こちら

   Copyright© 2011 Y.Ichisaka VirtualPHOTO javao.com All Right Reserved.