| Name |
こんた |
| Date |
2008年03月25日 (火) 16時59分 |
| Message |
こんにちは。下記のURLのサンプルを参考にwebチラシを作っています。
http://hfm-kenchan.com/Lesson/log_qa/D0709033.htm
なんとか形まではできたのですがどうしてもわからない箇所があり
調べてみたのですが自己解決できなかったため教えてください。
完成系はユニクロのwebチラシをイメージしています。
http://www.uniqlo.com/jp/shop/chirashi/
わからない事は下記の2点です。
1：アクセスし画像の上にカーソルを持っていくと一回だけ操作方法のメッセージが表示され
しばらくすると非表示になる
2：1度でも拡大をするとエリアナビが表示されナビから移動することができ、縮小し
基の大きさに戻るとエリアナビが非表示になる
どちらも表示,非表示の問題なのでClipEventでvisible = trueまたはfalseなどを使っていると
思うのですが応用の方法がいまいちわからずでエリアナビで移動する方法は全くわからない
状態です。
またカーソルの上に拡大または縮小マークの虫眼鏡のアイコンがあるのですがこれは
_root.xmouse = _xmouse;
_root.ymouse = _ymouse;
でいいのでしょうか？
アイコンを作りスクリプトを記述しカーソルの上にアイコンがついてくるようには
できたのですが、ユニクロ以外のwebチラシを見ても同じアイコンが目立ったので
flash側でもっと簡単にできるものなのでは？・・・と思ってしまいました。
flash8 proを使用しています。大変お手数お掛け致しますが何卒宜しくお願い致します。 |
Response
01
|
| 2008年03月28日
(金) 21時55分＞ こんた |
|
自己レスです。
引き続き調べているのですがやはりわからない状態です。
参考情報などアドバイスだけでも頂けますと幸いです。
宜しくお願い致します。
|
|
Response
02
|
| 2008年03月29日
(土) 20時47分＞ joy
|
|
こんたさん、
今日は。
いまだに、レスがないということは、他の回答者の方々から見ても、そう簡単な課題ではないと思われます。
下のurlは、このwebチラシをビジネスにしてる会社のurlですが、初期導入費用が、10,000円、1枚当たり（表裏）、8,000円と記載されてますので、少し、考えて、誰でもが作成できるような、簡単なFlashではなさそうな気がします。（もし、そうなら、このビジネスが成り立たなくなりますからね）
私も、先ほどから、このユニクロのサイトを見て、サンプル作ろうとしましたが、ナビ以外は、なんとか出来ましたが、これも含めて、完成できるかどうか、分かりません。自分の勉強のためにも、もう少し、考えてみますが、力量不足で、諦めるかもしれません。その時は、他の識者の方々の回答待ちとして下さい。
とりあえず、回答できるものは、以下、回答しておきます。
1：アクセスし画像の上にカーソルを持っていくと一回だけ操作方法のメッセージが表示され
しばらくすると非表示になる
＞これは、簡単です。
虫眼鏡のMovieClipを作り、その第一フレームに、この説明文をいれて、この説明文もMovieCLip化しておきます。虫眼鏡のインスタンス名を、megane、この説明文のインスタンス名を、instructionとし、シーンのscritレイヤーにフレームアクションとして、記載する例ですが、
megane.instruction._visible = true;//meganeの中のinstructionを最初は、見えるようにしておく
var Time:Number = 12*5;//12FPSとして、5秒程度は、60フレームに相当するので、これを、タイマーとして使用する(この方法は、簡単ですが、精度は、悪いです。ミリセカンドレベルの精度が必要な場合は、以前、TOYAMAさんが、実測されましたが、setInteralを使います。）
var Sec:Number = 0;//刻むフレーム数の初期値
megane.onEnterFrame = function():Void {
Sec++;//刻むフレーム数をカウントし、
if (Sec>Time) {//フレーム数が、Time(60フレーム)より、大きくなったら、
this.gotoAndStop("plus");//instruction文のない、+
表示しかない虫眼鏡の配置してある、フレーム名を、"plus"とすれば、そのフレームに移動して、stop
}
//本当は、ここの間にも、他のスクリプト処理を記載中ですが、完成してないので、省略
}
2：1度でも拡大をするとエリアナビが表示されナビから移動することができ、縮小し
基の大きさに戻るとエリアナビが非表示になる
＞ここが、難問ですが、
①エリアナビのインスタンス名を、naviとすれば、一度でも拡大すると、表示させることは、簡単です。チラシ全体をMovieClip化し、インスタンス名を、originalとでも名づけ、同じく、シーンのフレームアクションで、
navi._visible = false;//最初は、非表示
var n:Number = 0;//original(シーンに配置されるチラシ）が押される回数で、初期値は、0
original.onPress = function():Void {
this.startDrag();
n++;//チラシ オリジナルが押される都度、カウントアップ
if (n == 1) {
navi._visible = true;//1回押されたら、MovieClip navi を表示
}else if{
//2回押されたら拡大するスクリプトを記載
}
//これ以降も、スクリプトを記載してますが、まだ、未完成のため、省略。最後に押されたときに、navi._visible=false;と戻してやれば、非表示となる
}
②ナビから移動することができ（これが、出来てないです）
＞ここは、サンプルで検証してませんので、今回の回答対象外とします。
尚、拡大時に、 ビットマップ写真のギザギザを回避するためには、別途、拡大時の倍率に相当する、鮮明な写真を、PhotoShop等で、用意しておき、拡大スクリプト実行時に、その鮮明な写真を配置した、フレームに移動すれば、実現できます。
3：またカーソルの上に拡大または縮小マークの虫眼鏡のアイコンがあるのですがこれは
_root.xmouse = _xmouse;
_root.ymouse = _ymouse;
でいいのでしょうか？
＞簡単です。
megane.onEnterFrame = function():Void {
this._x = _root._xmouse;
this._y = _root._ymouse;
//実際は、他のスクリプトも記載してるが、未完成のため、省略
}
4:同じアイコンが目立ったのでflash側でもっと簡単にできるものなのでは？・・・
＞
このWebチラシを作っている製作会社は、複数あるようですが、其々が、工夫して、この虫眼鏡等を製作していると思います。それが、たまたま、似たデザインになっているだけだと思います。Flash側のコンポーネントで、このような虫眼鏡が用意されているとは思いません。
以上、肝心のナビエリアの回答になってませんが、何かの参考にしてください。サンプルを最後まで、作り上げることが出来た場合は、また、回答しますが、あまり、自信はありません。
より、レベルの高い識者の方々の回答を期待しましょう。
http://www.digital-chirashi.jp/
|
|
Response
03
|
| 2008年03月30日
(日) 01時10分＞ joy
|
|
こんたさん、
今晩は。
ユニクロという訳には、とても、行きませんが、もっと単純化した、webチラシもどきのサンプルを作ってみました。
下にflaを置いておきますので、興味があれば、ご覧下さい。
【制限条件】
1.多段階の拡大・縮小はせず、最も単純な、2段階にしてます。
2.拡大時、元画像を、_xscale、_yscaleでズームアップし、その後に、拡大画像へ遷移する方法をとらずに、直ぐに、拡大画像へ遷移してます。
3.ナビエリアのドラッグドロップで、拡大画像が、動くようには、してますが、ナビエリアの指定範囲と、ピッタリは、合いません。これは、入念に設計して、座標軸を決める必要がありますが、そこまで、精緻に検討してません。
【概要】
1.大きくは、bgというMovieCLip、naviというMovieClip、meganeというMovileClipの３つをシーンに配置し、フレームアクションで、以下のように記載してます。
/*～初期設定～*/
megane.useHandCursor = false;
bg.useHandCursor = false;
navi._visible = false;
//以下、各種変数定義
var theX:Number = bg._x;
var theY:Number = bg._y;
var n:Number = 0;//bgが押される回数
var Time:Number = 12*5;//5秒程度(この方法は、簡単ですが、精度は、悪いです）
var Sec:Number = 0;//刻むフレーム数
var Bairitsu:Number = bg._width/navi._width;//naviに対する、bgの倍率
//trace(Bairitsu);
/*～写真の拡大、縮小、ドラッグ・ドロップの処理～*/
bg.onPress = function():Void {
n++;//押される都度、カウントアップ
if (n == 1) {//1回押したら、navi を表示させる
navi._visible = true;
} else if (n == 2) {//2回押したら、拡大写真のフレーム ”pic150" に移動（150％拡大写真）
this.gotoAndStop("pic150");
} else if (n == 3) {//初期値に戻す
this._x = theX;
this._y = theY;
this.gotoAndStop("pic100");//元サイズの写真の配置してある、フレーム "pic100" に移動
navi._visible = false;
n = 0;//4回以上カウントさせないために、0とする
}
};
bg.onEnterFrame = function():Void {
if (n == 2) {//2回押されたら、naviのmovingの座標に基づき、その倍率から、bgの座標を決定する
this._x = -navi.moving._x*Bairitsu;
this._y = -navi.moving._y*Bairitsu;
//trace(this._x+"/"+this._y);
}
};
/*～虫眼鏡の処理、これに、メッセージ類も付属してる～*/
megane.onEnterFrame = function():Void {
Sec++;
if (Sec>Time) {//タイマーより、フレーム数が超えたら、instructionなしの、虫眼鏡だけのフレームに移動して、stop
this.gotoAndStop("plus");
}
/*meganeが、マウスの移動にピッタリ付いて来る*/
this._x = _root._xmouse;
this._y = _root._ymouse;
if (n == 2) {//2回押されたら、虫眼鏡の表示が - のフレームに移動する
this.gotoAndStop("minus");
} else if (n == 3) {//3回押されたら、instructionなしの + 表示の虫眼鏡に移動する
this.gotoAndStop("plus");
}
if (this.hitTest(navi)) {//meganeが、naviに重なっている間は、meganeを非表示にし、
this._visible = false;
} else {//離れたら、表示する
this._visible = true;
}
};
2.各MovieClipの作成に関しては、flaを参照下さい。
http://homepage2.nifty.com/joys/answers/web_chirashi.html
|
|
Response
04
|
| 2008年03月30日
(日) 01時43分＞ こんた |
|
joyさんこんばんは。
お返事ありがとうございます。レスがつかなかったので自力で
なんとか頑張ってみようと思い毎日試行錯誤しておりました。
ユニクロさんのサイトだとマウススクロールで拡大,縮小もするので
それを体験しただけでも私には感動ものでした！
しかし興味本位程度で作るには敷居が高すぎたようですね・・・
わかってはいるのですがやはり興味があるものにはなんとか
取り組んでみたいのが本音ですが(汗
早速ではございますがサンプルを基に研究を続けていきたいと
思っております。
進展がありましたら再度レスします。
またなにかありましたらアドバイスなど頂けますと幸いです。
宜しくお願い致します。
|
|
Response
05
|
| 2008年03月30日
(日) 10時51分＞ joy
|
|
こんたさん、
おはようございます。
一部、バグがありました。
【バグの内容】
ナビエリアで、プレスし、ドラッグを始め、リリースを行わないで、ナビ外にマウスを移動させても、ドラッグが継続します。見た目、bgを動かしているように見え、その結果が、連動して、ナビを動かしているように見え、自分でも、少し、驚いたのですが、実際は、（リリースをしてないので）ナビのドラッグが継続してるだけなのです。
それに、動きが不安定です。
【訂正方法】
1.シーンのフレームアクションに以下を追加します。
var Check:Boolean=false;//naviにmeganeが乗っている場合は、trueとする制御変数
megane.onEnterFrame = function():Void {
～途中省略～
if (this.hitTest(navi)) {//meganeが、naviに重なっている間は、meganeを非表示にし、
this._visible = false;
Check=true;//追記分：重なっている間は、制御変数を、trueとし、
} else {//離れたら、表示する
this._visible = true;
Check=false;//追記分：離れたら、falseとする
}
};
２．naviパーツのnaviに対して、フレームアクションで、
moving.onPress = function():Void {
this.startDrag(false,0,0,100,75);//左上基準なので、ドラグできる範囲は、X座標は、100、Ｙ座標は、75まで
};
moving.onRelease = function():Void {
this.stopDrag();
};
moving.onEnterFrame = function():Void {//_rootの制御変数Checkがfalse、即ち、虫眼鏡が、naviから離れたら、自動的に、ドラッグをストップさせる
if (!_root.Check) {
this.stopDrag();
}
};
以上ですが、これが完成できれば、これだけで、ビジネスになる訳ですから、やはり、本物を作るには、入念な検討時間が必要というのが実感です。
http://homepage2.nifty.com/joys/answers/web_chirashi.html
|
|
Response
06
|
| 2008年03月30日
(日) 11時24分＞ こんた |
|
joyさん今日は。
あれから拡大,縮小の段階を増やしナビ以外(MC上)でもドラッグアンドドロップ
できるようになど変更を試しておりました。
今後の一番の壁はマウスホイールでの拡大,縮小になりそうです。
＞以上ですが、これが完成できれば、これだけで、ビジネスになる訳ですから、やはり、本物を作るには、入念な検討時間が必要というのが実感です。
興味本位の安易な質問にここまで教えて頂けまして非常に嬉しいです。
ビジネスまでは考えていないので自分なりに研究を続けて完成に近づけていきたいと
思います。
本当にありがとうございました！
|
|
Response
07
|
| 2008年03月30日
(日) 11時39分＞ daniwell |
|
こんたさん
前にレスしようかなとも思ったんですが、これは厄介そうだなと思って
普通にスルーしてました（すいませんが
でも、ちょっと時間も出来たので作ってみました。
Chirashi
Sample
一応ユニクロ仕様です。
若干の違いはありますが…。
拡大は 1倍→ 2倍→ 4倍→ 6倍 です。
エリアナビの表示は、1度でも拡大すると、というより
ステージサイズからはみ出る場合に表示する、という風にしています。
画像は拡大後あらたに高解像度のものを読み込むようにしてないので、
拡大後はドットが目立ちます、悪しからず。
一応マウスホイールにも対応してます。上（前？）に回すと拡大します。
あと、ブラウザの大きさというか、ステージの大きさを変えても
うまくいくようになってます。
↓サンプルファイルです。
chirashi.zip
分かり易く作ろうとは思ったんですが、全然分かりやすくない気がします。
とりあえずＭＣの配置は書いておいたほうが多少分かり易くなるとは思うので
以下に書いておきます。
_root
L mc (チラシ表示用)
L trail (虫眼鏡といったマウス追跡)
L ope (操作説明)
L navi (エリアナビ)
L frame (現在表示されてる部分のフレーム枠)
L m_mask (マスク)
L mc (ナビ上のチラシ)
スクリプトは_root上に記述しているもののみです（それなりの長さです）。
また、
変数の値をいじることで、ちょっとカスタマイズできるように作ってあります。
なかでも、配列 scale は結構便利かとおもうので（自分で言うのもなんですが）、
よければ触ってみてください。
|
|
Response
08
|
| 2008年03月30日
(日) 12時49分＞ joy
|
|
こんたさん、daniwellさん、
今日は。
daniwellさん、
さすが、daniwellさん！素晴らしいです！
もう、プロの領域です！
_xscale、_yscaleで拡大し、直後に、鮮明画像に変更する方法なぞ、教えて頂けると、より、助かりますが、これは、贅沢なお願いでしょうね？
|
|
Response
09
|
| 2008年03月30日
(日) 14時52分＞ こんた |
|
daniwell、joyさん今日は。
サンプルを早速ダウンロードさせて頂きました。
joyさんにもdaniwellさんにもこのようなサンプルまで作って頂き
完成をイメージしていた通りの出来で嬉しいやら驚きやらです！
本当にありがとうございます。
あとは拡大,縮小時に最適な画像を読込み表示させるだけですね！
知識が足りないもので間違っている認識なのかもしれないのですが
空のmcに最適な解像度のmc(画像？)を読込む方法になるのでしょうか？
教えて頂けますと非常に嬉しいのですがご迷惑でなければお時間ありますとき
でも構いませんので宜しくお願い致します。
<追加記事> |
|
