第11回ホームページ勉強会

51日目　2022年10月13日実施
三宅　節雄

 Qponのswing.jsで炎を揺らせる


　ホームページ勉強も51日目となり、新しい勉強内容の発掘に苦慮しています。

　今回の勉強は写真の炎に動きを作るお遊びで、QPONさんの『swing(写真の炎を揺らす』をダウンロードし、皆さんの写真に適用致しましょう。

MENU(クリックすると、その項目へ飛びます)

１．事前準備１、フォルダー作成と写真の準備
２．事前に準備した写真の透明化
３．swing.js



１．事前準備１、フォルダー作成と写真の準備

　(1)まずMy-HP内にhonooの様な名前で新しフォルダーを作っておきます
　(2)swing.jsでは、600×450pxの炎が映っている写真を、1枚或いは2枚準備して下さい。

２．事前に準備した写真の透明化

　何処にも説明は有りませんが、普通の炎が映った写真と炎の付近を透明化してその場所で炎を揺らせる
　為の写真が必要な様です

　swing用に準備した写真の、指定範囲を次の要領で透明化します。

Ａ．Photofiltreを起動後に、ファイル⇒開くで写真を開きます。
　　編集したい写真を､クリックしたままPhotofiltreのアイコンに乗せる(D&D)でもOKです。
　　

　　 下記の画面になります。
　　
　　間違って加工後に上書き保存をしないため、名前を付けて保存で名前は同じで構いませんがpng形式で保存します。
　　この写真の炎を揺らしたい範囲を以下の手順で透明化します

Ｂ．領域を選択する形状を選択

　　透明化したい領域は複雑ですから、選択⇒選択範囲の形状⇒多角形選択を選びます。

　　

Ｃ．炎を揺らしたい部分の範囲を選択 下図のようにクリックを繰り返して透明化する範囲を選択し、１周した最後は、
　　最初の点をクリックすれば範囲選択が終了します。
　　範囲選択が終了すると、下図の様に選択範囲が破線で表示されます。
　　

Ｄ．透明化の実施

　　範囲選択が終了したら、イメージ⇒自動透過⇒選択範囲の内側で透明化を実施します。

　　

　　 透明化が実施されると下図のようにで表示されます。
　　

Ｅ．加工した図の保存

　　ファイル⇒上書き保存で、(png形式で）保存します。


３．swing.js

　QPONさんの『写真の水や炎や旗などを揺らすソース』サイトへはここからリンク先に繋がります。

　上記をクリックすると下記のメニューが表示されますが、 初期はswave.jsに繋がっていますので、swing.js(画面の炎を揺らす)をクリックして下さい。


ソースから下記htmlをコピーします。

<html>
<head>
<meta charset="shift-jis">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>写真の炎や煙を揺らす swing.js</title>

</head>
<body>
<script>
ur="./";　　　　　　 //写真置く場所
file="honoo.jpg,100"; //写真,縮尺率％（省略時100）
mask="honoo.png,1";　 //マスク,透明色・揺れ区分
//（0=透明処理済み/1=白を透明にする/2=マスクを揺らす）
///開発予定////
back="haikei.jpg";　 //背景（省略可：fileに透明処理をした時)
///////////////
nagare= 10; // 波の流れ方向(+　/　-）と遠近感（1～10)
waves=10; //波の間隔（1～10）
scale = 2; //波の振れ幅（1～10)
speed=20; //流速(10～100)
lake="0,100"; //揺らす範囲(上から”％，％”の範囲）
</script>
<script src="http://qpon-toyota.com/jquery/swing/swing.js" charset="shift_jis">
</script>

　コピーしたhtmlは、NotePadなどに貼り付け、swing.htmlやhonoo.html等の名前を付けて先に作ったフォルダーに入れます。

　写真の名前は皆さんが準備した写真の名前に変えて下さい。

swing.jsというサブプログラムは作者のページを参照していますが、自分のページに取り込むこともできます。
作者が削除すると使えなくなってしまいますから、私はswing.jsもダウンロードして同じフォルダーに入れています。
その場合には
<script src="http://qpon-toyota.com/jquery/lake/swing.js" charset="shift_jis"></script>
を以下のようにリンク先を削除します。
<script src="swing.js" charset="shift_jis"></script>

以上の操作によりMy-HP内のhonooというフォルダー内には①swing.html、②○○.jpg、③〇〇.png、④swing.jsの4ファイルがあります。

swing.htmlをダブルクリックしても、ブラウザーで開いても、OSのアップが原因か？最近は『波の動き準備中』と表示されたり写真が並べて表示される状態になります。

このファイルにリンクを張って、サーバーにアップすると、ちゃんと写真の炎が揺れます。

作品例1
-------------------------------------------------------------------------------------------------------
作品例2