createEmptyMovieClipを使った画像とリンクの設定方法

このQ&Aのポイント
  • 初心者でも簡単に画像とリンクを設定できる方法を解説します。
  • リンクが正しく設定できない場合の対処法を紹介します。
  • リンク設定時に注意すべきポイントを解説します。
回答を見る
  • ベストアンサー

createEmptyMoviClipをつかって画像とリンクを設定したい

createEmptyMovieclipなどを使って、各ムービークリップに画像とリンク設定(getURL)をしたいと思っていますが、初心者なのもので、うまく設定できず困っております。 (その1):下記のコードでは、画像表示は計算通り表示されますが、リンク設定はできないでおります。 ※下記switch文の「case2」は無視していただいても構いません。 ------------------------------------------------------------------------------------------- file_list = new Array(); file_list = ["gazou.jpg","gazou.jpg","gazou.jpg","gazou.jpg","gazou.jpg"]; link = new Array(); link = ["http://www.yahoo.co.jp/" ,"http://www.yahoo.co.jp/" ,"http://www.yahoo.co.jp/", "http://www.yahoo.co.jp/", "http://www.yahoo.co.jp/"]; load_obj = new MovieClipLoader(); act_step = 0; this.onEnterFrame = function(){ var i , clip ; switch(act_step){ //各画像を各空MCに割り当て case 0: for(i = 0;i < file_list.length;i++){ clip = this.createEmptyMovieClip("clip" + i ,i); load_obj.loadClip(file_list[i] , clip); } act_step++; break; case 1: loaded_cnt = file_list.length; if(loaded_cnt >= file_list.length) { for(i = 0; i < file_list.length ; i++){ clip = this["clip" + i]; //ムービークリップのサイズと表示位置設定 if(i <= 2){ clip._x = 290*i; } else{ clip._x = 290*i - (290/(i-1)); } clip._y = 50; if(i > 0){ clip._xscale = 100/i; clip._yscale = 100/i; } } act_step++; } break; } } ----------------------------------------------------------------------------------------- (その2)上記コード(その1)でリンク設定ができなかったので、下記のコードのように 「createEmptyMovieClip」を使って、画像表示とリンク設定をしたかったですが、これもうまくいきませんでした。 ---------------------------------------------------------------------------------------- file_list = new Array(); file_list = ["gazou.jpg","gazou.jpg","gazou.jpg","gazou.jpg","gazou.jpg"]; link = new Array(); link = ["http://www.yahoo.co.jp/" ,"http://www.yahoo.co.jp/", "http://www.yahoo.co.jp/", "http://www.yahoo.co.jp/", "http://www.yahoo.co.jp/"]; act_step = 0; this.onEnterFrame = function(){ var i , clip , rinku; switch(act_step){ //各画像を各空MCに割り当て case 0: for(i = 0;i < file_list.length;i++){ this.createEmptyMovieClip("rinku"+i,i); this.rinku.createEmptyMovieClip("clip" + i ,i); this.rinku.clip.loadMovie(file_list[i] , i); this.rinku.onPress = function(){ getURL(link[i] ,"_self"); } } act_step++; break; case 1: loaded_cnt = file_list.length; if(loaded_cnt >= file_list.length) { for(i = 0; i < file_list.length ; i++){ clip = this["clip" + i]; //ムービークリップのサイズと表示位置設定 if(i <= 2){ clip._x = 290*i; } else{ clip._x = 290*i - (290/(i-1)); } clip._y = 50; if(i > 0){ clip._xscale = 100/i; clip._yscale = 100/i; } } act_step++; } break; } } ------------------------------------------------------------------- 上記「その1」または「その2」を修正して、リンクの設定を行う方法をご教示お願いいたします!

  • Flash
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • BlurFiltan
  • ベストアンサー率91% (1611/1754)
回答No.1

作成方法(段階の踏み方)がまちがっています。 1つでそれができなければ複数はできないでしょう。 なぜ1つでできるようにしないのですか。 また this.onEnterFrame = function(){ が出てくる意味が全くわかりません(間違っていますよという意味です)。 毎フレーム毎フレーム空のムービークリップを作成し続けて(つまり消し続けて), そこに毎フレーム毎フレーム読み込むというのは現実的に不可能だと思います。 フレームレートが 12pps だと, 1秒間に12回もムービークリップを作成し続けて, 1秒間に12回もロードし続けることになります。

naosayu1
質問者

お礼

ご指摘有難うございます。一つでやってみてできたのですが、複数でfor文を使ってできずにこまっておりました。 プログラミングの基本的な知識もまだ不十分なもので、試行錯誤してます。 でいろいろや試してみて、以下のように組んでみたら表示され、リンク設定もできました。 ------------------------------------------------------- (配列宣言は省略) act_step = 0; var i , n , clip , rinku; switch(act_step){ //各画像を各空MCに割り当て case 0: for(i = 0;i < file_list.length;i++){ this.createEmptyMovieClip("rinku"+i,i); this["rinku"+i].createEmptyMovieClip("clip" + i ,i); this["rinku"+i]["clip"+i].loadMovie(file_list[i] , i); for(m = 0; m < file_list.length ; m++){ clip = this["rinku" + m]; //ムービークリップのサイズと表示位置設定 if(m <= 2){ clip._x = 290*m; } else{ clip._x = 725 + 100*(m-3); } clip._y = 50; if(m > 0){ clip._xscale = 100/m; clip._yscale = 100/m; } } //各MCの変数nにiを代入しておく this["rinku"+i].n = i; //各作品画像の作品ページへ移動 this["rinku"+i].onPress = function(){ for(n=0;n < file_list.length;n++){ getURL(link[this.n] ,"_blank"); } } } break; } 以下省略---------------------------------------------------- まだ上記以外のプログラミングで困っていることがありますので、後日、質問させていただきます。その際にまた機会がありましたらご教示お願いいたします。

関連するQ&A

  • XMLから読み込んだテキストをリンク表示する方法

    初心者です。 XMLからテキストデータを読み込んで、 リンクを貼り付けようとしてるのですが、うまくいきません。 どなたかご教授いただけないでしょうか? ■XMLの中身 <?xml version="1.0" encoding="UTF-8"?> <file> <visual> <gazou>./main/001.jpg</gazou> <thumb>./navi/thumb_001.png</thumb> <url>http://www.yahoo.co.jp/</url> </visual> <visual> <gazou>./main/002.jpg</gazou> <thumb>./navi/thumb_002.png</thumb> <url>http://www.google.co.jp/</url> </visual> <visual> <gazou>./main/003.jpg</gazou> <thumb>./navi/thumb_003.png</thumb> <url>http://okwave.jp/</url> </visual> <visual> <gazou>./main/004.jpg</gazou> <thumb>./navi/thumb_004.png</thumb> <url>./test.html</url> </visual> </file> ■ASの一部↓ menu_mc["btn_mc"+i].onPress = function() { getURL(myXML.firstChild.childNodes[i].childNodes[2].firstChild.nodeValue,"_blank");

    • ベストアンサー
    • Flash
  • 画像のランダム表示、及び画像毎のリンク設定に関して

    こんにちは。 サムネールの画像が、最終的には100個位出来ます。個々のサムネール画像毎にリンクを設定したいと思います。 サムネール画像をダブらずランダムに表示する方法は、過去の質問を拝見して実現出来ました。 下記の質問が参考なりました。 http://oshiete1.goo.ne.jp/qa716071.html 過去の質問のとおり、下記のソースをまねて画像のランダム表示は可能になりました。基本的に上記質問のソースとほぼ同じ内容になります。 <html> <head> <title>ランダム表示</title> <script type="text/javascript"> <!-- NoMem = new Array(); function RndmNo(n){ x=Math.floor(Math.random()*29); if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo(n);} } } x=new String(x); if (x.length==1){ x="000"+x;} else if (x.length==2){ x="00"+x;} else if (x.length==3){ x="0"+x;} NoMem[n]=x; } for (k=0; k<3; k++){ RndmNo(k); } RndImg= new Array(); for (i=0; i<3; i++){ RndImg[i]= new Image(); RndImg[i].src="images/image"+NoMem[i]+".jpg"; } function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; } window.onload=ImgDisp; //--> </script> </head> <body> <img src="*" name="imgs0"><br> <img src="*" name="imgs1"><br> <img src="*" name="imgs2"> </body> </html> 画像は、images と言うフォルダを作り、フォルダ内に、image0000.jpg から image0019.jpg の画像を20個用意する事で、ランダムにサムネール画像を表示出来るようになりました。 希望として、サムネール画像毎にリンク先を設定したいと思っています。 イメージとして、ランダムに表示するバナー広告みたくしたいと思います。 サムネール画像とリンク先とは具体的に。 image0000.jpg が表示されたら、同じサイト内に ./0000.html へリンクを張れるようにしたいと思います。 また、最終的にサムネール画像は100個近くになり、リンク先もサムネール画像と同じ数になりますので、リンク先は別ファイルで管理出来るようになれば嬉しく思います。 アドバイスか、ヒントを頂ければと思います。

  • サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

    お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか? ■記述1(html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js"> </SCRIPT> </head> <body> <table width="400"> <a href="#" target="_blank"> <img src="http://test.com/img/01.jpg" name="imgSample"></a> <div> <div> <script language="JavaScript" type ="text/javascript" src="http://test.com/01.js"> </script> </body> </html> ■記述2(js00) //画像の名前を配列に代入していきます。 strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg"); function SetPicture(nVal) { document.imgSample.src = strPictureName[nVal]; } ■記述3(js01) //サムネイル画像をオンマウスで拡大表示 img_num="8"; if( img_num == "" ){img_num='5';} for ( cnt = 1 ; cnt <= img_num ; cnt++ ) { cnt2 = cnt-1; document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ; } ■記述4(js02) // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; jmp[5] = "http://google.com/"; jmp[6] = "http://google.co.jp/"; jmp[7] = "http://news.yahoo.co.jp/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "http://test.com/01.jpg"; img[1] = "http://test.com/02.jpg"; img[2] = "http://test.com/03.jpg"; img[3] = "http://test.com/04.jpg"; img[4] = "http://test.com/05.jpg"; img[5] = "http://test.com/06.jpg"; img[6] = "http://test.com/07.jpg"; img[7] = "http://test.com/08.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); ■完成イメージ   | ̄ ̄ ̄ ̄ ̄ ̄ ̄|   |  拡大画像  |   |_______|   | ̄|| ̄|| ̄|| ̄|   |_||_||_||_|←サムネイル ・サムネイル画像をオンマウスで拡大画像を表示 ・サムネイル画像、拡大画像それぞれに指定リンクを入れる ・可能であればリンクページは target="_blank" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

  • FLASHのAS2で作成をしました。外部jpg画像読み込みの部分が現状

    FLASHのAS2で作成をしました。外部jpg画像読み込みの部分が現状は写真8枚です。 状況により4枚になったりするのですが、どこをどのようにしたらいいのか分からないので、助けてください。 MAX=8を外部txtにできるのでしょうか?また、MAX=8をいろいろな数に対応出来るプログラムがありますか? よろしくです。 onClipEvent (load) { Max = 8; Sec = 3; Path = "photo/"; n = depth=cnt=0; function loadPic() { n++; if (n>Max) { n = 1; } depth++; mcName = "mc"+depth; this.attachMovie("pic", mcName, depth); this[mcName].loadMC.Loaded = false; this[mcName].loadMC.loadMovie(Path+"p"+n+".jpg"); if (depth>2) { this["mc"+(depth-2)].removeMovieClip(); } } loadPic(); } onClipEvent (enterFrame) { cnt++; if (cnt>Sec*4) { cnt = 0; loadPic(); } }

  • FLASHでの深度の設定

    こんにちは、よろしくお願い致します。 使用OSはmacOS10.28 使用ソフトはFLASH MX 2004です。 アクションをフレームに書いて括弧内のURLの動きを作りました 白いバックに白い文字でリンクを置き、以下のスクリプトで反応すると白バックに隠していた白いリンクが見える。と、いったものを作ろうとしたのですが、うまくいきません・・・ リンクしたい物の深度を_root.link.swapDepths(5);としたりするとリンクしたい物が消えてしまいます。 駄文で失礼いたしますが、どなたかお詳しい方教えていただきませんか?お願いします。 this.makemc(); function makemc() { cnt = 20; w = Stage.width/(cnt+1); h = Stage.height/(cnt+1); for (i=1; i<=cnt; i++) { for (j=1; j<=cnt; j++) { x = i*w; y = j*h; ++depth; newname = "ball"+depth; props = {_x:x, _y:y, onMouseMove:effect}; this.attachMovie("ball", newname, depth, props); } } } function effect() { cMax = 150; a = this._x-_root._xmouse; b = this._y-_root._ymouse; c = Math.sqrt(a*a+b*b); if (c>cMax) { d = 0; } else { d = 1000*(1-c/cMax); } this._xscale = Math.max(1, d); this._yscale = Math.max(1, d); }

  • 画像の並べ方

    こんにちは、HTMLフォーム→Postgresで検索→PHPで画像表示というページを作っています。 現在画像が縦に1枚ずつ並ぶのですが、横に4枚並べた後、次の行に表示としたいのです。 テーブルのタグをいろいろ変更してみたのですが思い通りに表示されません。 おかしいところがありましたら教えていただけないでしょうか。 <table><td width="13%">画像</td></tr> <tr> EOF; $result = @pg_Exec($sqlSelect); if ($result == false) { $file_name = __FILE__; $line_id = __LINE__; exit; } for ($i = 0; $i < @pg_Numrows($result); $i++) { $row = @pg_Fetch_Array($result,$i); if ($row['gazou'] == "") { $gazou = "&nbsp;"; } else { $cd = $row['gazouid1']; $gazou = "<a href=\"JavaScript:onClick=wopen('" . $row['gazouid1'] . "','" . $row['gazouid'] . "');\"><img src='../members/" . $row['gazouid1'] . "/img/" . $row['gazou'] . "_s.jpg' border=0 width=150 height=140 align=absmiddle></a>"; } $html .= " <td align=center>" . $gazou . "</td>\n"; $html .= " <tr><td align=center><a href='../members/" . $row['gazouid1'] . "/' target=\"_blank\">" . $row['name'] . "</a></td></tr>\n"; } $html .= <<< EOF </table>

    • ベストアンサー
    • PHP
  • XMLで画像を読み込むと巨大化します・・・

    Flash8にて、外部XML画像とURLを読み込みしています。 初の試みでして、たどたどしくも双方ともに読み込むところまでは皆様のこれまで作られたデータを基に作成出来たのですが、画像を読み込んだときに巨大化されてしまって困っています。 ▼XML --------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <jpeg> <jpegURL>images/image1.jpg</jpegURL> <link>http://yahoo.co.jp/1</link> <jpegURL>images/image2.jpg</jpegURL> <link>http://yahoo.co.jp/2</link> <jpegURL>images/image3.jpg</jpegURL> <link>http://yahoo.co.jp/3</link> <jpegURL>images/image4.jpg</jpegURL> <link>http://yahoo.co.jp/4</link> </jpeg> --------------------------------------------------- 800×250で画像を読み込みたいのですが、 読み込むと、すさまじく巨大化してしまっています。。 作ろうとしているのは、横にスクロールするナビゲーションです。 XMLで画像とリンク先を指定、画像は同じ階層に「img」というフォルダを作って入れています。 下記が、1フレーム目に記載しているASです。 ▼AS --------------------------------------------------- var obj_array:Array = new Array(); var center:Number = Stage.width/2; var menu_num:Number = 4; var maxlength:Number = 800*menu_num; //サイズ指定箇所 var friction:Number = -0.03; var obj_xml:XML = new XML(); obj_xml.onLoad = start_me; obj_xml.ignoreWhite = true; obj_xml.load("scrollslide.xml"); function start_me(success:Boolean):Void { if (success == true) { for (var i = 1; i<=menu_num; i++) { var menu_str:String = "menu"+i; obj_array[i] = _root.attachMovie("menu", menu_str, i); obj_array[i].num = i; obj_array[i]._x = 800*(i-1); //X座標 obj_array[i]._y = 0; var jpg_str:String = obj_xml.firstChild.childNodes[(i-1)*2].firstChild; var link_str:String = obj_xml.firstChild.childNodes[i*2-1].firstChild; obj_array[i].jpg_mc.loadMovie(jpg_str); obj_array[i].onEnterFrame = scrollphoto_me; obj_array[i].onPress = press_me; obj_array[i].onRollOver = roll_me; obj_array[i].onRollOut = rollout_me; //関数呼び出し obj_array[i].onRelease = release_me; obj_array[i].link = link_str; } } else { seltext = "xml read error"; } } function release_me():Void { trace(this.link); getURL(this.link, "_parent"); } function scrollphoto_me():Void { var speed:Number = (_root._xmouse-center)*friction; var vx:Number = this._x+speed; if (vx<=-800) { //ステージ左に消えたら vx += maxlength; //サムネイルの最後列の後ろに移動 } else if (vx>=Stage.width+10) { //ステージ右に消えたら vx -= maxlength; //サムネイル最前列の前に移動 } this._x = vx; updateAfterEvent(); } function roll_me():Void { this._alpha = 80; } function rollout_me():Void { this._alpha = 100; } stop(); --------------------------------------------------- サイズを指定している箇所に問題があるのでしょうか。 初心者でして、全く見当がつかず困っております。 もしよろしければ、先人の方たちにご意見とご指摘を頂ければと思います。宜しくお願いいたします。

    • ベストアンサー
    • Flash
  • テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法を質問

    テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法を質問された方のログがありましたので、そこに追記で質問させてください。 以下は回答者の方のアンサーになります。 <html> <head> <title></title> <script type="text/javascript"> <!-- lnkimgsrc= new Array(); lnkimgs= new Array(); lnkimgsrc[0]="***0.jpg"; // リンク0の画像 lnkimgsrc[1]="***1.jpg"; // リンク1の画像 lnkimgsrc[2]="***2.jpg"; // リンク2の画像 lnkimgsrc[3]="***3.jpg"; // リンク3の画像 lnkimgsrc[4]="***4.jpg"; // リンク4の画像 /* 上記で画像のURLを指定 */ for (i=0; i<lnkimgsrc.length; i++){ lnkimgs[i]= new Image(); lnkimgs[i].src=lnkimgsrc[i]; } function changeImg(x){ if (document.images){ document.images['tgt'].src=lnkimgs[x].src; } } // --> </script> </head> <body> <a href="***0.html" onMouseover="changeImg(0)">リンク0</a> <a href="***1.html" onMouseover="changeImg(1)">リンク1</a> <a href="***2.html" onMouseover="changeImg(2)">リンク2</a> <a href="***3.html" onMouseover="changeImg(3)">リンク3</a> <a href="***4.html" onMouseover="changeImg(4)">リンク4</a><br> <img src="***.jpg" name="tgt"> </body> </html> この状態で、表示された画像から、テキストリンクと同じリンク先に飛ばしたい場合はどのようにすればいいでしょうか。。 よろしくお願いいたしますm(__)m

  • JavaScriptのスライドショー IE以外のブラウザで再生できない

    JavaScriptのサンプルソースを提供されている方のサイトから コピーして使用させていただいているものです IEでは再生OKなのですが、Firefox、GoogleChrome、Safariで再生させるように改変することは可能でしょうか? <script> <!-- var img = "1.jpg,2.jpg,3.jpg"; var imgs = img.split(","); var i=0; var pic = new Array(); for(cnt=0; cnt<imgs.length; cnt++){ pic[cnt] = new Image(); pic[cnt].src = imgs[cnt]; } function sulaidoImg1() { i++; i%=imgs.length; imgFil1.filters.blendTrans.Apply(); imgFil1.src = pic[i].src; imgFil1.filters.blendTrans.Play(); } //--> </script> BODY内↓ <img id="imgFil1" style="FILTER: blendTrans(duration=1)" onfilterchange="setTimeout('sulaidoImg1()',4000)" border="1"><br> <script> <!-- imgFil1.src=pic[0].src; setTimeout("sulaidoImg1()", 4000); //--> </script>

  • active状態のリンクのみを他の画像に置き換える方法

    いつもお世話になっております。 下記のjsの記述で、リンクをクリックするとcssで指定した画像になるようにし、他の範囲内のリンクをクリックしない限りその画像のまま、という状態にしています。(ul id="jmenu"という形で指定しています) 今回は、 <h1>link</h1> <ul id="jmenu"> <li><a href="...">(´・ω・`)</li> </ul> <h1>wonder</h1> <iframe src="..."></iframe> <h1>quest</h1> <ul id="jmenu"> <li><a href="...">(´;ω;`)</li> </ul> という形で、(´・ω・`)をクリックした後、 (´;ω;`)クリックで(´・ω・`)をクリックしている状態を クリアにしたい、と考えているのですが、どのような記述が足りないのでしょうか? 現在ですと、(´・ω・`)がクリアされないため、 (´・ω・`)(´;ω;`)ともにクリックされている状態 (画像が変わっている状態)になってしまっています。 ご教授いただけますと、幸いです。よろしくお願いします。 window.onload=function(){ setColor(); } function setColor(){ var menu=document.getElementById("jmenu"); var tags=menu.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].onclick=function(){ var pp=this.parentNode.parentNode; var tags=pp.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].className=""; } this.className="foge"; } } }

専門家に質問してみよう