トップへ戻るニュースフォーラムFLASH-ML 過去ログBak@Flaダウンロードよくある質問と答
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   コーダーズルーム【スクリプト系】
     XML読み込みからフォトギャラリー作成(サムネイルをクリックすると同画像を表示)
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
blue
Åê¹ÆNo.15602
投稿日時: 2005-2-26 17:22
新米
居住地: 川辺
投稿: 19
使用環境:
★PC  : MACOS.9.2
★FLASH : FLASH MX
XML読み込みからフォトギャラリー作成(サムネイルをクリックすると同画像を表示)
いつも大変お世話になっております。
XMLの読み込み?アルバムのような動作をさせたく作成していたのですが
XMLの読み込み、画像URLの取り込みまでできたのですが
サムネイル画像をクリックしたときに
メイン表示用のMCに表示、という動作ができず投稿させて頂きました。

空野様の投稿より勉強させて頂きました方法で
作成手順を表記させて頂きます
(無断でお借りし申し訳ありません;;)


引用:

★目標
XMLを読み込んだデータよりアルバムを作成
(サムネイルをクリックするとサムネイルと同じ画像が拡大され
 メイン表示場所に表示される)

片瀬那奈さんサイト内[photo gallery]のような形です


★条件
・画像はXMLからURLを取り出します

★作成手順
1.XMLを読み込む
2.XMLの解析
3.2より解析した画像をサムネイル表示させる(元サイズを縮小して表示させます)
4.3のサムネイル画像はボタンの代わりもし、サムネイル画像をクリックすると
 メイン表示場所に拡大(=元サイズ)し、表示します

★動作手順
1.XMLを読み込む
2.読み込んだXMLより各ノードに変数をあてはめ、分かりやすくする
3.処理をかけたノードより、画像の情報だけを取り出す
4.画像の情報からその数だけサムネイルを表示するため
 オブジェクトを生成
5.サムネイルにonReleaseされたとき、メイン表示場所に同じ画像を読み込ませるための
 loadMovieをアクションとしてつける

★仕様
メイン表示用MC:MC『myLoad』(サイズ:W300×H400)
         メインフレーム『pict』レイヤーの1フレーム目に表示
サムネイル表示用MC:MC『thumb』をMCに内包した、MC『thumbMC』(サイズ:W30×H40)
           attachMovieにて使用するためリンゲージ『thumbnail』を設定

アクションはメインフレーム『action』レイヤー/1フレーム目に表記




下記が『action』レイヤーに表記し、traceをかけつつ動作確認して
サムネイル画像を表示までは確認できておりますXMLとアクションです。


引用:

読み込むXML『photodata.xml』の中身です。

<name>
<prof>
</prof>
<pict>
</pict>
<gravure>
<photo1>
<title>txt1</title>
<file>http://?</file>
</photo1>
<photo2>
<title>txt2</title>
<file>http://?</file>
</photo2>
</gravure>
</name>

※<title>ノードはサムネイル表示用には利用しておりません





引用:

//アクションスクリプトです

myXML = new XML ();
myXML.ignoreWhite = true;
myXML.load ("photodata.xml");

v_mainPictArray = new Array();
//300*400画像の格納
//=ここからメイン表示用の画像を取り出してこようと考えていました

myXML.onLoad = function (loaded) {
if (loaded) {
v_nameNode = myXML.firstChild;
//<name>?</name>
v_gravureNode = v_nameNode.childNodes[2];
//<gravure>?</gravure>
v_photo = v_gravureNode.firstChild;
//<photo1>?</photo1>
v_num = v_gravureNode.childNodes.length;
//<photo>の数
v_currentPhoto = v_gravureNode.firstChild;
//現在の表示画像
v_currentNumber = 0;
//初期値

//XMLより画像パスを取り出し、
//下記『f_makeAndLoad(num,path)』ファンクションを呼び出し
//画像の表示を行います
for (i=0; i < v_num; i++) {
v_loadURL = v_currentPhoto.childNodes[1].firstChild;
//画像(<photo>?</photo>の中身
v_mainPictArray.push (v_currentPhoto.childNodes[1].firstChild);
//v_mainPictArrayの配列の中に取り出した画像を入れ込む
v_currentPhoto = v_currentPhoto.nextSibling;
f_makeAndLoad (i, v_loadURL);
}
}
};

//画像の生成
function f_makeAndLoad (num, path) {
_root.attachMovie ("thumbnail","thumb"+num,num+1);
v_name = eval("thumb"+num);
v_name._x = 50 * num;
v_name._y = 410;
v_name.loadMovie (path);
}



ここまでですとサムネイルが表示されます。
サムネイルが300×400のままで読み込まれてしまい、サムネイルから画像がはみ出てしまいました

この後のサムネイルにボタン機能をもたせてMC『myLoad』
拡大表示させるところが動いておりません。

動作手順として、
1.
まずメイン表示画像が何かを決定させるため
サムネイルのインスタンス名("thumb"+num)の"num"と
画像パスを格納したv_mainPictArrayの番号は同一のため、
v_mainPictArray[x]のx=numとし、画像を取り出します。

2.
"thumb"+numにボタンを機能をつけるため
onRleaseのメソッドをfunctionにて作成し、呼び込む画像をloadMovieにて指定し表示させます。

…という形を思い何通りか作成してみたのですが
最後には整理もできなくなってしまうほど何から書いていけばいいのか解らなくなってしまいました。


書いてみたのですが動かなかったのが下記の通りです。

(thumb+num).onRlease ={
_root.myLoad.loadMovie(v_mainPictArray[num]);
}

というアクションを書いていきたいと思っているのですが、ここのnumを
自分のnumがわかるようにするにはどうしたらいいのでしょうか?
もっと他の簡単な方法があるように思うのですが思い浮かびませんでした。

また、勉強不足で本当におはずかしいのですが
外部読み込みした画像を元のサイズではなく縮小させるにはどうしたらいいのでしょうか?

本当に読みづらく長々となってしまい申し訳ありません
ご指摘、アドバイスなどどうか宜しくお願い致します。
rin-ko
Åê¹ÆNo.15610
投稿日時: 2005-2-26 20:00
職人
居住地: 東京
投稿: 397
使用環境:
MacOSX10.5/10.4
WinXP SP3
MX2004Pro/CS3
Re: XML読み込みからアルバム作成(サムネイルをクリックすると同画像を表示)
こんにちは。
ええと、この際、XMLは関係ないように思います。
ここではXMLの扱いについてはもう問題じゃないのですよね?
それで構成上の疑問ですけど、ロードされるMCとしてMovieClip.attachMovie()を使わなくちゃ駄目ですか?
attachMovie()メソッドですと以下のような点で面倒だと思うのですが、それでもあえて使うメリットがありますでしょうか。
「MovieClip.attachMovieで配置したMovieClipのfunctionが実行されない」(www.fumiononaka.comより)[/url]
読み込み用のMCが必要なだけでしたら、空のMCを作ればよいような気もします。
ちゃんとスクリプトを読んでいないのですが、こんな感じでできるのではないでしょうか?
function f_makeAndLoad(num, path) {
 _root.createEmptyMovieClip("thumb"+num, num+1);
 var v_name = eval("thumb"+num);
 v_name._x = 50*num;
 v_name._y = 20;
 v_name.createEmptyMovieClip("my_mc", num+1);
 v_name.my_mc.loadMovie(path);
 v_name.onEnterFrame = function() {
		if (this.my_mc.getBytesLoaded()>0 && this.my_mc.getBytesLoaded()>=this.my_mc.getBytesTotal()) {
  this._width = 180;
  this._height = 130;
  delete this.onEnterFrame;
		}
	};
 v_name.onRelease = function() {
  _root.myLoad.loadMovie(_root.v_mainPictArray[num]);
 };
}

ところで、最初にサムネイルとして読み込む画像と、あとから読み込む本画像はまったく同じものなのですか?
もしそうでしたら、二度も読み込む必要ってあるのでしょうか?単にサムネイル画像を含んだMCのサイズを変えれば良いだけなのでは?と思ったり。サムネイルとは別に表示するということなのかしらん、誤解しておりましたらごめんなさい。
あと、配列アクセス演算子とかイベントハンドラメソッドを使ったアクションの記述に不安定な部分がありましたけれど、そちらのご理解は大丈夫ですか?(私もエラそうなこと言えないのですけど)
ひろゆき
Åê¹ÆNo.15617
投稿日時: 2005-2-26 23:42
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: XML読み込みからアルバム作成(サムネイルをクリックすると同画像を表示)
最初の段階から、複数の画像を読み込むことを考えるより、
1つの画像を読み込み、表示することが先だと思います。
loadMovieを用いて、画像を読み込むことはおできになるのでしょうか?

それができてから、
画像の読み込み完了を確認のうえ、表示サイズを変えていくことを考えることでしょう。

外部XMLを用いることを前提にお考えですが、
rin-koさんが書かれているように、複雑な構造が先にあって、
それにスクリプトがついていっていないように見受けられます。

今回のキモは、「画像を読み込む」という点ですから、
この点から解決されることをお勧めします。

1歩1歩ずつ進まないと、何が問題か、制作者自身が分からなくなります。
その結果、質問の丸投げになってしまう気がします。


----------------
質問する際は、回答者に具体的な情報を与えてください。

blue
Åê¹ÆNo.15618
投稿日時: 2005-2-26 23:42
新米
居住地: 川辺
投稿: 19
使用環境:
★PC  : MACOS.9.2
★FLASH : FLASH MX
Re: XML読み込みからアルバム作成(サムネイルをクリックすると同画像を表示)
rin-ko様、はじめまして!
大切なお時間の中、お返事をありがとうございました
説明不足、言葉足らずでちゃんと説明ができておりませず本当に申し訳ありません。

作成したいものはこちらの片瀬那奈さんサイト内[photo gallery]のような形で
こちらのサイトでは左にサムネイルが、右にメイン画像を表示する形になってるのですが
投稿させて頂きましたサンプルでは上にサムネイル、
下にメイン画像を表示しています。

サムネイルの画像と、メインの画像は同じものです。
メインの画像(w300*h400)表示場所をx=0、y=0としたとき
サムネイルの画像はそのメインの画像の下に位置するx=0、y=410という形で表示させたいと思っています。
(芸能人の方のサイトなどでまずサムネイルが表示されてクリックするとその大きな画像が横などに表示されるものを
作りたく思い書いておりましたが後から読むとよくわからない説明文にです う?ん

サムネイルの画像は画像数がその場合場合によって変動するため
生成型のattachMovieを使用いたしました。
また、メインの画像(=サムネイルと同じ画像の元サイズ)はひとつだけなので
空のmcを作って配置いたしました。(スクリプト内MC『myLoad』)
その、サムネイル画像を表示させることはできたのですがそのサムネイルをクリックして
空のMC『myLoad』にサムネイルと同じ画像を表示させる、という動作ができませんでした
書いてくださいました野中様のサイトを参考にさせて頂き再度どのような形がいいのか考え直してみます!

また、スクリプトの不安定さのご指摘もありがとうございました!
まだ基礎をがっちり固められていないままに作らなければならないものがでてきてしまい
その周辺だけをかじっているため、書いていても合ってるかなあ…違うかなあ?と
traceをかけつつ動作を確認しているのですが基礎がなっていないため
少し複雑になると対応できなくなってしまっています。
いつもこちらのサイトでお教えいただいているばかりなのでもっともっと勉強しなければならないのですが
こちらに甘えてしまい心苦しいばかりです。

そんな説明不足などの投稿の中、お返事をありがとうございました!
blue
Åê¹ÆNo.15620
投稿日時: 2005-2-27 0:03
新米
居住地: 川辺
投稿: 19
使用環境:
★PC  : MACOS.9.2
★FLASH : FLASH MX
Re: XML読み込みからアルバム作成(サムネイルをクリックすると同画像を表示)
ひろゆき様、いつもありがとうございます!

多くのご指摘、ご教授をありがとうございました!
説明文が頼りなく、また長くなってしまいましたために論点がみえない投稿になってしまい
お時間を頂くばかりで本当に申し訳ありません。

サムネイルの画像の読み込みまではできました。
サムネイルを表示せず、メイン画像を横に設定した枚数分並べることはできたのですが
そのサムネイル画像をクリックすると、メインの画像に表示したい画像=この場合ですとサムネイル画像を
メイン表示用のMCに読み込む動作ができておりません

最初に空のMCをおいて外部テキストから画像参照先を読み込み
その空のMCのサムネイル画像に参照先画像を表示し、
クリックするとメイン表示場所にその画像を表示はできました。

…と今書いていると、なぜXMLから読み込んだ場合作成できていないのかなと思えてきました

わかっていないところは多くあるのですが
その中でも、生成したオブジェクトをクリックしたとき
読み込みたい参照画像(=自分)の表示方法が一番わかっていないのだと思います。
ひろゆき様、rin-ko様からお教えいただきましたことを最大限に活用し
再度、外部テキストの読み込み?loadMovieでサムネイルに画像を表示し
それをクリックするとメイン画像を表示するサンプルを作って見直したいと思います
ひろゆき
Åê¹ÆNo.15621
投稿日時: 2005-2-27 0:10
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: XML読み込みからアルバム作成(サムネイルをクリックすると同画像を表示)
動作の確認をすべきなのは、大きく3点でしょう。

1. XMLの読み込み・処理
2. 外部画像の読み込み
3. 読み込んだ画像の表示

私ならば、2-->3-->1 の順に、作成していきます。

引用:
サムネイルを表示せず、メイン画像を横に設定した枚数分並べることはできたのですが
そのサムネイル画像をクリックすると、メインの画像に表示したい画像=この場合ですとサムネイル画像を
メイン表示用のMCに読み込む動作ができておりません

であれば、この部分だけでテストをすべきでしょう。
変数などを用いず、直接画像のURLを指定して読み込むテストはされたのでしょうか?、
それで、思うような動作ができるかどうかを確認した上で、
XMLを読み込んだ値を、どうやって渡すかを考えた方が良いように思います。

引用:
なぜXMLから読み込んだ場合作成できていないのかなと思えてきました

xMLの読み込みが原因なのでしょうか?
XMLの読み込みをせずに、画像を表示するようにしてみればはっきりすると思いますが。


----------------
質問する際は、回答者に具体的な情報を与えてください。

西田
Åê¹ÆNo.15623
投稿日時: 2005-2-27 1:47
新米
居住地:
投稿: 10
使用環境:
Windows
Flash MX2004
Re: XML読み込みからフォトギャラリー作成(サムネイルをクリックすると同画像を表示)
こんにちは。
スクリプトが動かない場合は細かくtrace()かデバッグ機能を使って調べていけば原因がわかるとおもいます。
引用:

(thumb+num).onRlease ={
_root.myLoad.loadMovie(v_mainPictArray[num]);
}

というアクションを書いていきたいと思っているのですが、ここのnumを
自分のnumがわかるようにするにはどうしたらいいのでしょうか?
もっと他の簡単な方法があるように思うのですが思い浮かびませんでした。


この場合でしたら、

trace(_root.myLoad)
trace(v_mainPictArray[num])
trace(num)

という形で、
・読み込み先が存在するかどうか
・読み込み元がそんざいするか
・変数が取得できているか
といったことを調べていけばいいと思います。

気になった点として
・(thumb+num)でオブジェクト参照できているのか?
・onReleaseのスペル
・変数numがMC:(thumb+num)の中に存在していないので、参照できていないのではないか?

MC自身を取得するにはthisを利用すればできるとおもうので(trace(this)で確かめてください)、this._nameにsubstr()かsubstring()を使って番号の部分を抜き出して、Number()で型を変換してやれば番号が得られると思います。

あと、たぶん動作に関係ないですけど

引用:

v_mainPictArray.push (v_currentPhoto.childNodes[1].firstChild);


のところで、XMLノードを入れているのでできたら


v_mainPictArray.push (v_currentPhoto.childNodes[1].firstChild.nodeValue);


と型を規定したほうが安全じゃないでしょうか。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を
 
Copyright (C) 2003 FLASH-japan. All rights reserved.
Powered by Xoops