2006年09月01日
googleMapとFlashの合成
google Mapsの上にFlashを合成出来ることが分かりました。なかなか面白いでしょう。
ポイントは次の２つ。
１．cssを使って、google Mapsの上にFlashアニメーションを配置する。
２．Flashアニメーションの背景を透明に設定する。
次のパラメータを OBJECT タグに追加します。
<param name="wmode" value="transparent">
次のパラメータを EMBED タグに追加します。
wmode="transparent"
サンプルのhtml,css,js,swfファイルを
http://yama-tabi.net/map/google/lab/003/
に置いておきますので興味のある方はご覧下さい。
注意点は、google Mapsの上にFlashがあるので、マウスやキーボードからの イベントはFlashに渡ります。
投稿者 山旅人 : 07:09 | コメント (2) | トラックバック
2006年01月11日
テキスト アニメーション
Wildform Wild FXと云う、テキスト アニメーションツールを購入しました。これを使うと、次のようなFlash(swf型式）のテキスト アニメーションを簡単に
作成できます。
このページもWildform Wild FXを使用してます。
テキスト アニメーションを自力で作成しようとも思ったのですが、
日和(ひよ)ってしまいました。
年齢とともに、プログラムを書くのも辛くなってきたので、使える
ツールはどんどん使いながらコンテンツを作成しようと思ってます。
投稿者 山旅人 : 06:30 | コメント (0) | トラックバック
2005年12月08日
山の夜明けふう色相変化
夜明けふうに、色相を変化させるFlashアニメーションを作って見ました。この技を使った、ジグソーパズルが出来ないかとたくらんでいます。
もと画像はこちら
このFlashの原理は、rb,gb,bbを変化させ、
setTransform( )を使って画像の色を変える所です。
colObj = new Color(img); cList = new Object(); cList.ra = 100; cList.ga = 100; cList.ba = 100; cList.aa = 100; cList.rb = rb; // この値を-255 ～ 0 の範囲で変化さす。 cList.gb = gb; // この値を-255 ～ 0 の範囲で変化さす。 cList.bb = bb; // この値を-255 ～ 0 の範囲で変化さす。 cList.ab = 0; colObj.setTransform(cList);Flash等のソースファイルはここにあります。自由にお使い下さい。
このファイルを解凍すると、0002.htm ファイルが出来ます。
このファイルの、12行目 RunHue()の第３引数に指定した画像に
色相変化の効果を与えます。お試し下さい。
投稿者 山旅人 : 17:35 | コメント (2) | トラックバック
2005年09月13日
円形ジグソーパズルの作り方（３／３）
円形のジグソーパズルが好評なのでその作り方を公開します。このジグソーパズルを作るには、Macromedia Flash が必要です。
（Macromedia Flash MXを使っています。
それ以外のバージョンでの評価は出来ていません。）
円形ジグソーパズルは次の４ステップで作成します。
１．ファイルのダウンロード＆解凍（fla ファイルなどの入手）
２．円形ジグソーパズルの作成（fla ファイルの編集）
３．ジグソーパズル用htmファイルの作成(htm ファイルの編集）
４．ジグソーパズルのアニメーション化（xmlファイルの編集）
今回は、３回目（最終回）
「４．ジグソーパズルのアニメーション化（xmlファイルの編集）」です。
４．ジグソーパズルのアニメーション化（xmlファイルの編集）
xmlファイルを使って、ジグソーパズルに合成するアニメーションを読み込みます。
（htmファイルに記述した、
RunJigsawC("jigC_0001.swf", "jigC_0001.xml", "ffffff", "0001");
部分にある、jigC_0001.xmlファイルです。）
xmlファイルには、ジグソーパズルに合成するアニメーション(swf)や
画像ファイル(jpg)を指定します。
とりあえず次のような手順で変更してみてください。
1) ２．で作成したフォルダに、次の２つのファイルをコピーする。
・hat002.swf
・jigC_8740.xml
2) コピーした、jigC_8740.xml ファイルの名前を変更する。
（例えば、jigC_0001.xml）
3) xmlファイルをエディタで開き、次の３カ所を変更し保存する。
・13行目 8740s.jpgをjigC_0001_1s.jpgなどに変更する。
・22行目 8740s.jpgをjigC_0001_1s.jpgなどに変更する。
・31行目 8740s.jpgをjigC_0001_1s.jpgなどに変更する。
jigC_0001.htmファイルをダブルクリックして麦わら帽子のアニメーションが
動けば成功です。
今のままでは、ジグソーパズルが完成するまで、アニメーションをみることが
出来ません。動作確認の場合、以下の操作をすることで、ジグソーパズルの
完成型を表示出来ます。
1) .flaファイル(jigC_0001.fla)をFlashで開く。
2) アクションフレームで、
[フレームアクション：１レイヤー名：アクション]を選択する。
3) アクションスクリプト用ウィンドの
debug_flg = 0; を
debug_flg = 1; に変更する。
4) パブリッシュを実行する。
（Flash Player6 以上でパブリッシュ）
5) 保存して終了。
もう一度、jigC_0001.htmファイルをダブルクリックしてみてください。
麦わら帽子のアニメーションが表示されたと思います。
動作確認が終わったら、debug_flg = 0; に戻してパブリッシュし直して下さい。
xmlファイルには、４つの<item>要素があります。
この<item>要素の画像ファイル
（swf または、jpg形式）を指定することでジグソーパズルにアニメーション
などを合成できます。
現状では、合成できるファイルは、最大４個となります。
<item>要素内の各項目は次のような意味があります。
| 項 目 | 意 味 |
| <file> | 合成するアニメーションなどのファイル名 |
| <x> | X座標（左が０） |
| <y> | Y座標（上が０） |
| <xscale> | X方向のスケール（% 50で半分の大きさ） |
| <yscale> | Y方向のスケール（% 50で半分の大きさ） |
| <alpha> | 透明度（% 100で完全に表示、50で半分透明） |
| <rotation> | 角度 |
なお上にある<item>要素が、レイヤーの上になります。
投稿者 山旅人 : 06:55 | コメント (1) | トラックバック
2005年09月11日
円形ジグソーパズルの作り方（２／３）
円形のジグソーパズルが好評なのでその作り方を公開します。このジグソーパズルを作るには、Macromedia Flash が必要です。
（Macromedia Flash MXを使っています。
それ以外のバージョンでの評価は出来ていません。）
円形ジグソーパズルは次の４ステップで作成します。
１．ファイルのダウンロード＆解凍（fla ファイルなどの入手）
２．円形ジグソーパズルの作成（fla ファイルの編集）
３．ジグソーパズル用htmファイルの作成(htm ファイルの編集）
４．ジグソーパズルのアニメーション化（xmlファイルの編集）
今回は、２回目
「３．ジグソーパズル用htmファイルの作成(htm ファイルの編集）」です。
３．ジグソーパズル用htmファイルの作成(htm ファイルの編集）
1) ２．で作成したフォルダに、次の３つのファイルをコピーする。
・jigC_8740.htm （拡張子がhtm。 拡張子がhtm と、html は別ファイル
です。）
・jigsaw.css （スタイルシート）
・jigsaw.js （ジャバスクリプト）
2) コピーした、jigC_8740.htm ファイルの名前を変更する。
（例えば、jigC_0001.htm）
3) htmファイルをエディタで開き、次の５カ所を変更し保存する。
・７行目 適当なタイトルを入れる。
・16行目 8740.jpgを0001.jpg、jigC_8740_1s.jpgをjigC_0001_1s.jpg
などに変更する。
・19行目 例えば、タイトルと同じ文字を入れる。
・27行目 jigC_8740.swfをjigC_0001.swf、jigC_8740.xmlを
jigC_0001.xml などに変更する。
例えば、
RunJigsawC("jigC_0001.swf", "jigC_0001.xml", "ffffff", "0001");
のように変更する。
・49行目 自分のホームページ用に変更してください。
4) サムネイル用に400*400ピクセル画像から、100*100ピクセルのjpgファイル
（例えば、jigC_0001_1s.jpg）を作成する。
jigC_0001.htmファイルをダブルクリックして期待どおり動けば成功です。
この作業の核心部は、27行目の変更です。 27行目は次のように、
RunJigsawC( ) と云うジャバスクリプトの関数に４つのパラメータを渡しています。
RunJigsawC("jigC_8740.swf", "jigC_8740.xml", "ffffff", "8740");
各パラメータの意味は左から、
・Flashで作成した、swfファイルを指定。
・アニメーション用、xmlファイルを指定。
（詳しくは３回目で説明）
・バックの色を16進(HEX)で指定。
・Flash内部処理用ID番号。
特に第一パラメータ、第二パラメータを正確に書いてください。
見栄えを良くするため、横幅固定(1024ピクセルに最適化）のジグソーパズル
にしています。横幅を可変にするためには、htmファイルの、２行目と、８行目
を削除（コメントに）します。ただしこのままでは見栄えが良くないので、
htmファイルをすこし（大分？）変更したほうが良いです。
例えばこのように、tableタグを使って<div id="head">部分を変更します。
投稿者 山旅人 : 06:45 | コメント (0) | トラックバック
2005年09月09日
円形ジグソーパズルの作り方（１／３）
円形のジグソーパズルが好評なのでその作り方を公開します。このジグソーパズルを作るには、Macromedia Flash が必要です。
（Macromedia Flash MXを使っています。
それ以外のバージョンでの評価は出来ていません。）
円形ジグソーパズルは次の４ステップで作成します。
１．ファイルのダウンロード＆解凍（fla ファイルなどの入手）
２．円形ジグソーパズルの作成（fla ファイルの編集）
３．ジグソーパズル用htmファイルの作成(htm ファイルの編集）
４．ジグソーパズルのアニメーション化（xmlファイルの編集）
今回は１回目と云うことで、上記１．、２．を説明します。
２回目「３．ジグソーパズル用htmファイルの作成(htm ファイルの編集）」
３回目「４．ジグソーパズルのアニメーション化（xmlファイルの編集）」
をそれぞれ説明する予定です。
１．ファイルのダウンロード＆解凍
1) jigC.zip ファイルをダウンロード
2) jigC.zip ファイルを解凍
jigCフォルダの下に次の11個のファイルが解凍されます。
1) 8740.jpg
2) 8740s.jpg
3) hat002.swf
4) jigC_8740.fla
5) jigC_8740.htm
6) jigC_8740.swf
7) jigC_8740.xml
8) jigC_8740_1s.jpg
9) jigsaw.css
10) jigsaw.js
11) mc_pieceMvCl.as
http://yama-tabi.net/blog/flash/jigC/ にもファイルを置いておきます。
２．円形ジグソーパズルの作成（fla ファイルの編集）
次の手順で、swfファイルと htmlファイルを作成します。
1) 新しいフォルダを作る。
（例えば、jigsaw）
2) 作成したフォルダに、解凍した次の２つのファイルをコピーする。
・jigC_8740.fla （Flashのソースファイル）
・mc_pieceMvCl.as（アクションスクリプト用外部ファイル）
flaファイルからこのファイルを使っています。
3) コピーした、jigC_8740.fla ファイルの名前を変更する。
（例えば、jigC_0001.fla）
4) パズルにしたい画像を、400*400ピクセルのjpgファイルとして
（例えば、0001.jpg）作成したフォルダに準備する。
5) .flaファイル(jigC_0001.fla)をFlashで開く。
6) ライブラリーウィンドを開く。
[ウィンドウ]-[ライブラリ] または、ctl-L
7) ライブラリーウィンドの「image_400x400.jpg」
を右クリックして「プロパティ」を開く。
8) プロパティ画面で画像を入れ替える。
（[読み込み]ボタンを押し、例えば、0001.jpg を読み込む）
9) パブリッシュを実行する。
（Flash Player6 以上でパブリッシュ）
10) 保存して終了。
以上で、jigC_0001.swf と jigC_0001.html ファイルが出来ます。
jigC_0001.htmlファイルをダブルクリックして動けば成功です。
この段階で、自分が準備した画像を使った円形のジグソーパズルが
動くはずです。(アニメーションには未対応)
２回目、３回目を待てない人は、jigC_8740.htm や jigC_8740.xml ファイルを
解析すれば仕組が分かるかもしれません。 お試し下さい。
円形ジグソーパズルは、隣の席の本物のプログラマＭ氏作です。
変更や再配布は自由です。
ただし変更したものを他の人が使うのを拒否できません。
要求があれば、flaのソースプログラムを公開する必要があります。
速習Webテクニック FLASH5 上級サンプル と云う本
の「7_20 ジグソーパズル（完全版）」も参考にしております。
この本の購入も是非検討下さい。
投稿者 山旅人 : 18:00 | コメント (1) | トラックバック
2005年05月09日
ヘえーボタン
きょうのトリビアに変なコメントを書いてしまった。本当はこうしたかったのですが。^_^;
投稿者 山旅人 : 18:39 | コメント (1) | トラックバック
2004年12月03日
壁紙 for BlogPetこうさぎ
BlogPet こうさぎの壁紙を作ってみました。山の四季 槍ヶ岳
黒部の滝 マッキンリー
４つをまとめてzip圧縮しましたので、よろしければお持ち下さい。
ついでに、flaファイルも置いておきます。GPLライセンスと云うことで
自由に変更、再配布してもらって結構です。
こちらにjpgファイルも置いておきます。
投稿者 山旅人 : 18:30 | コメント (0) | トラックバック
2004年11月20日
ジグソーパズルの作り方
私のサイトにあるジグソーパズルは、
速習Webテクニック FLASH5...Quick master of web technique と云う本
にある「7_20 ジグソーパズル（完全版）」を写真だけ変えて使っています。
作り方の、簡単な手順は次のとおりです。
１．500*400ピクセルの写真画像を準備する。
２．上記サンプルの.flaファイルをFlashで開く。
３．ライブラリーウィンドを開く。
４．ライブラリーウィンドの「TOMATO.png」
を右クリックして「プロパティ」を開く。
５．プロパティ画面で写真画像を入れ替える。
とりあえず、.fla ファイルを以下に置いておきますが、
サイトで公開されるなら、上記書籍を是非購入下さい。
http://yama-tabi.net/kiroku/2002/yokoomigimata1/flash/jigsaw1.fla
投稿者 山旅人 : 06:46 | コメント (1) | トラックバック
