D0506062 サンプルNo403外部JPEGスクロールにリンクを貼る方法
Name hatake
Date 2005年06月06日 (月) 11時09分
Message 初めまして、hatakeと申します。

いつも貴殿のFLASHQ&Aを拝見させてもらっています。
大変参考になり、下手な書籍よりずっとわかりやすくサンプルも
豊富で関心させられます。
今回仕事でFLASHを使用し、プレゼンテーションらしきものを作成しなければならなくなりました。

具体的には、外部のJPEG(サムネイル版)をロードしたものがスクロールし、どれかのサムネイルを選択(クリック)するとその画像(動画も)が現れる(リンクhtmlでも良い)ようなものを作成したいと思っています。

貴殿のサンプルNo403外部JPEGスクロールがほとんど希望の形ですので、サンプルのflaファイルをダウンロードし、クリックした時のアクションをいれたのですが全く反応しませんでした。
(PicMCのon (press) に)
アクションスクリプトは、超初心者ですので書き方が悪いのでしょう。

今回、いろいろ書籍を買っては見た物の、どうしてもクリックした時の動作(リンク先が開く等の)が出来ません。

お忙しい中とは、思いますがお教え頂ければ幸いです。
Response 01
2005年06月06日 (月) 18時07分> 憲ちゃん 
はじめまして、hatakeさん♪

このサンプルは、これからスクリプトをはじめられる場合には少々難解な部類に入ります(^^;

「picMC」という「ライブラリにあるMCシンボル」はひとつですので、
これを「attachMovie」で複数のMCインスタンス(シンボルの分身)として作成されても、
「picMC」内に記載されているスクリプトは、どのインスタンスもすべて同じスクリプトになります。
つまり「ライブラリ」の「picMC」で個別具体のリンク先を直接指定することはできない、
ということです!

そういう場合は・・・
「ライブラリ」の「picMC」を開いて、そこのボタンのボタンアクションで・・・例えば

 ・・・・・
 on (press) {
   _parent.noFocus = false;
   this.ani.gotoAndStop("focus");
   getURL(theURL, "_blank");←変数theURLの内容のURLを”_blank”で開いて表示
 }

リンク先URLを「theURL」という変数にしておきます。この変数theURLは、
「picMC」シンボルが「スクロールMC」内のインスタンスとして作成された段階で、
this.mc1.theURL」「this.mc2.theURL」〜「this.mcx.theURL」というように、
インスタンス名”mc1”〜”mc?”ごとの<個別の変数>になります。

個別の変数になった以上、「どこか?」から、該当のパス・インスタンス名を指定して
これに目的のURLを代入してやればいいわけです。
「どこか?」というのが「スクロールMC」の「attachMovie」で作成された直後に・・・

 ・・・・・・
 onClipEvent (data) {
   Max = Number(maisu)+1;
   for (i = 1; i < Max; i++) {
     setPic(i,i);
   }
   j = 1;
   for (i = Max; i <=Max+6; i++) {
     setPic(i,j);
     j++;
   }
   this.mc1.theURL = "http://〜/abc.htm";
   this.mc2.theURL = "http://〜/def.htm";
   ・・・・・
   this.mcx.theURL = "http://〜/xyz.htm";
   rightX = -82;
   ・・・・・
 }

このようにひとつずつ記載しても構わないのですが、
それなら何のためにサムネイルを外部JPGにしたのか?意味がなくなります(^^;

各リンク先を外部テキストにデータとしてまとめて記載して、
そのデータを各インスタンスのtheURLに代入していくこともできます。
更新が頻繁なので、あとのメンテナンスでFlashを更新しないでよいように外部JPGにされるなら、
リンク先も外部テキストで対応させるのが理にかなっていますし、
更新がそれほどないのなら、そもそも外部JPGなどにしないで、
編集時にサムネイルを読み込んでそれぞれボタンにし、そこに直接リンク先を記載したものを
スクロールさせるほうが、難解なスクリプトを使うこともなくスッキリしています(^^g/~~

サムネイルの枚数、更新の頻度などを考慮して目的にあった方法を選ばれるとよいと思います♪
<参考>
■スクロールするサムネイルと拡大画像のスライドショーの作り方
■外部JPEG読み込み型アルバムについて

<関連記事>
Response 02
2005年06月06日 (月) 19時10分> hatake 
早々のアドバイス有り難うございます。
対応の早さには、頭が下がります。
早速、試してみましたが、サーバー上のリンク先は開かず、代わりにサムネイル画像のおいてあるフォルダーの一覧が開きます。(どのサムネイルをクリックしても同じでした)
何度も、何度も教えていただいた書式をチェックしましたが間違いは有りませんでした。

また、各リンク先を外部テキストに記載すると書かれていたようにテキストで処理したいと思います。(リンク数30以上と多くその度にflaを直すのが結構たいへんです。これからも増える一方です。)

すいません、もう一度お教え下さい。
出来れば、各リンク先を外部テキストに記載する方法でのサンプルも作成して頂ければ嬉しいく思います。
Response 03
2005年06月07日 (火) 00時31分> 憲ちゃん 
きっと最初のほうの数個分しか記載されないでテストされたのだと思いますので、
クリックしたサムネイル自体が、スクロールが途切れないように見せるための
16枚目以降のダミーサムネイル(インスタンス名で言えば”mc16”以降)だったのだと思います。
URLが記載されていないときは、swfが配置されているフォルダの内容が表示されます。
ダミーと重ならない”mc8””mc9”などで実験すれば上手くいったはずです。
またダミー部分の「this.mc16.theURL」以降にも記載する必要がありましたネ!
いずれにしても、先に申しましたように目的によって理に叶った一貫性のある方法を採用しないと、
混乱してしまうという例ですね(笑)

リンク先を外部テキストに記載して、サムネイルボタンと対応させる方法として・・・
サンプルを応用するとすれば、「maisu.txt」の続きに・・・

 &maisu=15&
 &URL1=http://〜/abc.htm&
 &URL2=http://〜/def.htm&
 &URL3=http://〜/ghi.htm&
 &URL4=http://〜/jkl.htm&
 ・・・・・・・・
 &URL15=http://〜/xyz.htm&

対応する変数として「URL1」〜「URLx」の一連番号とすることにして、
それぞれ値としてのURL(文字列)を「変数=値」という書式で記載。
各「変数=値」の組の前後をデータの区切りとして明確にするため「&(半角アンド)」ではさみます。

スクロールMCのクリップアクションの「load」部分・・・

 onClipEvent (load) {
   this.loadVariables("maisu.txt");
   function setPic(a,b) {
     sam = "mc" + a;
     this.attachMovie("pic",sam,a);
     this[sam]._x = a * 82;
     this[sam]._y = 0;
     this[sam].mc.loadMovie("s"+b+".jpg");
     this[sam].ani.Num = b;
     this[sam].theURL = this["URL"+b];
   }
   noFocus = true;
 }

赤字部分を追加します。
「picMC」のボタン部分のアクションは、前回レスと同じです。
理屈を説明すると長くなりますが、
以上で出来上がりですので、サンプルというほどのことではないと思います(;^_^

そしてこれはほんの一例で、
外部テキストでURLを読み込んで表示すると簡単におっしゃいますが、実際には・・・
作品の目的や今後のメンテの方法など明確にしたうえで、
外部テキストのデータ項目をどのように設定し、それをどんな形式で記載し、
関連する外部JPGのファイル名をどのようなルールで付けるのがよいか、そして、
これらを考慮した結果Flashファイルの構造やスクリプトを含めた全体の設計図をどうするか?
こうしたことが最初になければ、なかなか出来るものではありません。
方法・手段は柔軟過ぎて無数にありますが、途中の軌道修正はそう簡単にはいかないからです。
下水管敷設工事をしていて、ついでに水道管も敷設していただきたいといわれても、
困ってしまわれるように(^^;
hatakeさんが最初のご質問でいみじくも・・・
> どれかのサムネイルを選択(クリック)するとその画像(動画も)が現れる(リンクhtmlでも良い)
> ようなものを作成したい。
と漠然とおっしゃておられましたが、すべてのサムネイルで静止画像が現れるようにだけするのか、
場合によっては動画もリンクもなのか、入り口時点でまずここをはっきり決めておかないと・・・
外部テキストの書き方から全く異なったものになってしまうということなのです。

No.403のサンプルは・・・
サムネイル画像をクリックして原寸大のオリジナルJPGを特定のMCに表示するのが当初の目的です。
特定のMCのインスタンス名を「_root.load_mc」とし、
オリジナルJPGファイル名を、「p1.jpg」「p2.jpg」〜とするとして、
「picMC」の「ボタン」のアクションで、

 on (press) {
   _parent.noFocus = false;
   this.ani.gotoAndStop("focus");
   fileNum = Number(this._name.substr(2,this._name.length-2));
   if (fileNum >= _parent.Max) {
     fileNum = fileNum-_parent.Max+1;
   }
   _root.load_mc.loadMovie("p"+fileNum+".jpg");
 }

これで所期の目的を達成し完成というわけですが・・・
これをそのままgetURLに応用するのに、発想を変えてリンクするURLをサムネイル番号と対応させて、
”1.htm””2.htm”〜”15.htm”という構成にするなら、
最後の行を・・・

   getURL(fileNum+".htm", "_blank");

とすることで対応することもできます。
いろいろですね(*^-^*)
Response 04
2005年06月07日 (火) 11時22分> hatake 
ご指示の通り修正した結果、大成功でした。思った通りの動作が出来嬉しく思います。

しかし・・・・

早速サーバーに載っけて見ましたが、フラッシュは、再生しているようですが(枠やタイトルが出ます)、サムネイルが出ません。
サムネイル画像(jpg)は、FLASH(SWF)と同じアドレスに入れています。

何故このような事が起こるのでしょうか?。

ローカルコンピュータではちゃんと動くのに・・(*_*)
何度もすいません。お助け下さい。
Response 05
2005年06月07日 (火) 15時11分> hatake 
Response 04の追加 動作報告です。

A.FLASHを挿入したhtmlファイルを作成しましたが、ローカル上では問題なく動作します。
B.Aのhtmlファイルをサーバー上の載せたところ、サムネイルが表示されません。
C.サーバー上のFLASHを直接ブラウザで指定しますと問題なく動作します。(http://〜***.swf)

以上が動作確認した内容ですが、こんな動作確認で何処がまずいか、おわかりでしょうか?

宜しくお願い致します。
Response 06
2005年06月07日 (火) 18時45分> 憲ちゃん 
サーバ上のhtmlファイルは、swfファイルと同じディレクトリでしょうか?
外部テキストはサーバ上ではどこにアップされましたか?
Response 07
2005年06月07日 (火) 18時57分> hatake 
外部テキストとSWFファイル及びサムネイル用画像ファイルは全て同じディレクトリにアップしています。

ただ、HTMLのみ異なるディレクトリです。(現在流行のブログを使用しています)

自前のサーバーで確認したところ、スクロールMCの
this[sam].mc.loadMovie("***/s"+b+".jpg"); ※***は、ディレクトリ
としたところ動作は先程確認取れました。

ただ、こちらではブログに載せたいと努力致している処です。
Response 08
2005年06月07日 (火) 19時28分> 憲ちゃん 
Flashに読み込むテキストファイルや外部JPG、外部swfなどのパスの基点は・・・
そのswfファイルがHTMLファイルに埋め込まれて再生された時点で、
HTMLファイルの存在するディレクトリがパスの基点になります。

したがってブログなど、別のサーバ上のHTMLファイルにswfファイルを埋め込んだ場合は、
JPGファイルは絶対パスで指定すれば可能(サーバ自体に制限がかけられている場合は不可)ですが、
残念ながら、別サーバにある外部テキストは、多分、
セキュリティの関係で読み込めないのではないかと思います。
それぞれ編集段階でパスを絶対パスにしてから、実験してみてください。
Response 09
2005年06月08日 (水) 14時53分> hatake 
いろいろ有り難うございました。
お陰様で何とか思い通りのものが仕上がりました。
問題は、やはりパスの設定でした。結局、絶対パスを指定する事によりクリア出来ました。

すいません。この件につきまして、最後にもう一つ教えて下さい。

サムネイル画像を選択(クリックする前)にボタンアニメの番号TXTにサムネイル番号が出ますが、同じようにシーン1にサムネイル画像の説明を付けたいのですがどのようなやり方になりますか?。
説明のテキストは、やはりURLと同じように外部テキストで処理したいのですが可能でしょうか?
何度もすいません。教えて下さい。

それと気になることが一つあります。

「No.403のサンプルは・・・
サムネイル画像をクリックして原寸大のオリジナルJPGを特定のMCに表示するのが当初の目的です。」とおっしゃっていた事で、以下を追加し早速試して見ましたが、

on (press) {
   _parent.noFocus = false;
   this.ani.gotoAndStop("focus");
   fileNum = Number(this._name.substr(2,this._name.length-2));
   if (fileNum >= _parent.Max) {
     fileNum = fileNum-_parent.Max+1;
   }
   _root.load_mc.loadMovie("p"+fileNum+".jpg");
 }
文法エラーが発生し、うまく出来ませんでした。
(コピーし、貼り付けましたが)
何か考えられる事が有れば、教えて下さい。

以上重ね重ねのお願い宜しくお願い致します。
Response 10
2005年06月09日 (木) 13時15分> 憲ちゃん 
このBBSではスクリプトが目で見てみやすいように,ところどころに全角文字を使っています。
手を抜かれないでご自分でアクションパネルに記載してください(^^;

説明文をURLと同様に外部テキストで処理する場合もその応用問題として、
URLと同様の処理をするだけです(;^_^A汗

外部テキストに・・・

 &maisu=15&
 &URL1=http://〜/abc.htm&
 &comment1=説明1&
 &URL2=http://〜/def.htm&
 &comment2=説明2&
 ・・・・

と追記。
これに対応して、スクロールMCのクリップアクションで・・
 
   function setPic(a,b) {
     sam = "mc" + a;
     this.attachMovie("pic",sam,a);
     this[sam]._x = a * 82;
     this[sam]._y = 0;
     this[sam].mc.loadMovie("s"+b+".jpg");
     this[sam].ani.Num = b;
     this[sam].theURL = this["URL"+b];
     this[sam].comment = this["comment"+b];←外部テキストの各変数の値を
   }                              各サムネイルの変数commmentに代入

を追記。
違いは、表示用テキストボックスをシーン上に置くことと、
それをサムネイル画像のボタンから表示するということなので・・

シーン上にコメント表示用のダイナミックテキストを置いてその変数名を”txtComment”としたなら、
「picMC」のボタンアクションで

 on (rollOver) { マウスが乗ったら
   _parent.noFocus = true;
   _root.txtComment = comment;←_rootのテキストtxtCommentに変数commentの値を代入
   this.ani.gotoAndPlay(2);
 }
 on (rollOut, dragOut) { マウスが外れたら
   _root.txtComment = "";_rootのテキストtxtCommentにヌルを代入
   this.ani.gotoAndStop(1);
 }

なお、説明文に日本語を使われる場合は、文字化け防止のまじないとして、
シーン、1フレームに。。。

 System.useCodepage = true;

を記載しておきます。
Response 11
2005年06月15日 (水) 22時35分> 憲ちゃん 
先の書き込みを拝見しましたが、自己解決されたようですね!
記事を削除されないでそれならそうとおっしゃるのが礼儀と思います(-.-;
憲ちゃんはMX2004を持っていないので、あなたのファイルを開くことができず・・・
友人にお願いして「MX」に保存して送ってもらいました。
結論は、変数名「leftX」が「LeftX」になっていただけのことでしたが!
畠山さんにはがっかりです。
Response 12
2005年06月16日 (木) 09時41分> hatake 
大変失礼な事を致しまして、申し訳け有りませんでした。
質問掲示板を毎日参照いたしており、憲ちゃんもかなり忙しそうで、あまり煩わせたくないと思い削除した次第です。
すいません。少し落ち着いたら連絡しようと思っていました。

以前は、問題なく動作していたのに、突然記事を削除した様に動作がおかしくなりました。
いろいろ試行錯誤した結果、パブリッシュの設定を今回初めてMacromedia Flash Player 7に変更したことを思い出し、Macromedia Flash Player 6で出力したら、うまくいきました。

しかし、今朝、憲ちゃんの返信を読み変数名に誤りがあり、それが原因だったとは。やはりちゃんとチェックしないとだめだなぁと改めて反省しています。

結果的に、憲ちゃんの手を煩わせたようです。
本当、今回の件は、大変申し訳け有りませんでした。
今後も、宜しくお願い致したいのですが?。
畠山
Response 13
2005年06月16日 (木) 19時51分> 憲ちゃん 
そうでしたか(*^-^*)
それはどうも憲ちゃんこそ早とちりで申し訳なかったです(^^;

「MX」バージョンまでは、
変数やインスタンス名において「大文字・小文字」を区別しませんでしたので、
その違いは無視されて正常に動作しましたが・・・
「MX2004」以降、厳密に区別されるようになったようです。
このことは、憲ちゃんも今回初めて知りました!!

このページの先頭へ