D0804031 ユニクロのようなwebチラシについて-その後
Name こんた
Date 2008年04月03日 (木) 14時19分
Message daniwell、joyさん今日は。その節は大変お世話になりました。
<前回記事>
やはり諦めきれずあれから試行錯誤を繰り返しているのですが
納得のものにするまでに至りません・・・

1回クリックするとナビが表示されましたが拡大させるように変更し
2回目、3回目のクリックでも拡大し4回目のクリックで初期の状態に
戻るような仕様にしてみました。
(マウスホイールも同様です。)

現状は、クリックするとゆっくりズームインされますが、
ズームインが終わったら最適な解像度の画像を読み込みしたいと
思っているのですがスクリプトが完全に理解できないため悪戦苦闘しております。

mc(インスタンス名mc)の1フレーム目に初期の状態の画像をセットし
フレームにthis.stop();
mc(インスタンス名mc)の2フレーム目に1回目の拡大画像に最適な解像度の画像をセットし
フレームにthis.stop();
mc(インスタンス名mc)の3フレーム目に2回目の拡大画像に最適な解像度の画像をセットし
フレームにthis.stop();
mc(インスタンス名mc)の4フレーム目に3回目の拡大画像に最適な解像度の画像をセットし
フレームにthis.stop();

このようにしフレームのスクリプトのmc.onPress = function内に
n++;
if (n == 1) {
mc.gotoAndStop(2);・・・(またはnextFrameなど)

というスクリプトを足したりしてみたのですがナビが表示されなくなったり
拡大、縮小はするものの初期の画像の大きさに戻らなくなったり、マウス
ホイールのアクションが無効になったりと全く進展がありません。

var scale :Array = [ 1, 2, 4, 6 ];
で倍率指定しサイズ取得でscaleを代入しているというのはわかるのですが
これをどのように応用すればうまく表現できるかがネットや書籍などを見ても
なかなかつかめない状態です。

大変ご迷惑お掛け致しますがまたお力添え頂けますと非常に幸いです。
宜しくお願い致します。
Response 01
2008年04月05日 (土) 23時29分> daniwell 
ちょっと実家へ帰っておりましたので
レスできずにおりましたdaniwellです。

ユニクロチラシを見る限りでは、
画像を小さく分割したものを読み込んでいるみたいですね。

でもまあ、
ただ単純に拡大後にピッタリのサイズの画像を読み込む方法のほうが
簡単と思うので、そっち主体で解説します。


拡大後にピッタリのサイズの画像を読み込む方法について。
拡大が完了した後に読み込めばいいだけ、といえばだけなんですが、
私自身あんまり考えて作ってなかったので、この前作ったサンプルをやや改変する必要があります。

具体的には、チラシの画像の MC(_root.mc)は、
もうひとつ階層化しておく必要があります。

_root
   L mc 
     L m (鮮明な画像読み込み用に作る)
     L chirashi (チラシ表示用)

前のサンプルでは mc を拡大縮小していましたが、
今回は、mc.chirashiを拡大・縮小します。
こうすることで、新たに読み込む画像は拡大縮小されずに済みます。
ただし、マウスドラッグによって動かすのは mc のまま変更なしです。

画像は内部に埋め込んじゃってもいいですが、結構でかいので外部読み込みにした方がいいような気がします。

画像は拡大後に読み込むので、
mc.onEnterFrame中 の、if ( Math.abs( sc - this.chirashi._xscale ) < 1.0 ) の中に書きます。

現在の倍率(というか何回拡大したか)を示す変数として n を用いているので、
これを利用して、

var mcl :MovieClipLoader = new MovieClipLoader ();
mcl.loadClip( n + ".jpg", mc.m );

とするといいでしょう。
画像ファイルは、1.jpg, 2.jpg, 3.jpg … といった感じです。

ただし、これではまったく拡大されていない状態に戻った時にも
画像を読み込んでしまう(0.jpg)ので、
if文で n != 0 とする必要があります。

↓サンプルファイル(本質的には同じですが、上で解説したのといろいろ違いがあります)
chirashi_l2.zip

実際の動作(でかい画像を読み込むことになるので鮮明になるのに時間がかかります)
chirashi non-div



小さく分割した画像を読み込む場合は、ちょっと考えなければなりません。

拡大後、見えていない部分の画像を読み込んでもしょうがないので、
現在画面に表示されている部分についてのみ読み込む、
という風にします(実際ユニクロチラシもそうみたいです。

詳しい説明はちょっとややこしくなるので割愛しますが、
拡大後、表示されている部分に当てはまる画像を求めて配列に入れ
1枚ずつロードする、という手法をとっています。

また、ドラッグなどによって移動した時にも、
表示される部分の画像を求めて配列に入れ、ロードする処理をします。

↓サンプルファイル
chirashi_l.zip

ただ、分割しすぎた(汗)ので逆に重いかもしれないです。


実際の動作
chirashi div
Response 02
2008年04月07日 (月) 12時26分> こんた 
daniwellさん今日は。
お返事が遅くなってしまいすみませんでした(汗

久々に掲示板を見に来たところお返事頂いておりまして感動です!
早速サンプルをダウンロードさせて頂き解析してみたいと思います。
本当にありがとうございました!

<関連記事>

このページの先頭へ