Solved

dynamic movie loading an image as a button...

Posted on 2003-10-27
10
220 Views
Last Modified: 2010-04-03
Hi,

I'm trying to load thumbnail images on-the-fly (location string coming from a XML file). I would like the thumbnails to act as buttons so that when a user rolls over, a larger canvas is populated with the larger image. This is how far i've got, but the onRollOver does not work - any ideas?

THX in advance.
function loadImages() {
   var xcnt=40, ycnt=108, levcnt=3, pageCount=1;;
   myformat = new TextFormat();
   myformat.align ="center";
   for (i=0; i<no_prods; i++) {
     createEmptyMovieClip("pic"+i,levcnt);
     var nb = eval("pic"+i);
     nb.width = parseFloat(products[i].width);
     nb.height = parseFloat(products[i].height);
     nb._x = xcnt;
     nb._y = ycnt;
     nb._visible = false;
     nb.loadMovie("thumbnails/"+products[i].source);
     nb.onRollOver = function(i) { loadImage(i);}
     ycnt+=nb.height+25; levcnt+=2;
   }
   maxLevel = levcnt;
}

function loadImage(pic_no) {
   // canvas_pic is another empty movie clip in the centre of the screen. Its level is 1.
   canvas_pic.loadMovie("photos/"+products[pic_no].source);
}

Regards
0
Comment
Question by:Matt_Hobbs
  • 5
  • 4
10 Comments
 
LVL 5

Expert Comment

by:Calron
ID: 9625903
Did you check that your loadImage function is called?

function loadImage(pic_no) {
   trace("You called master???");   // :)
   // canvas_pic is another empty movie clip in the centre of the screen. Its level is 1.
   canvas_pic.loadMovie("photos/"+products[pic_no].source);
}

If you see that string when running it from flash, then the function is called. The next thing to make sure is that canvas_pic is identified correctly. To check that try this:

function loadImage(pic_no) {
   trace(canvas_pic);   // :)
   // canvas_pic is another empty movie clip in the centre of the screen. Its level is 1.
   canvas_pic.loadMovie("photos/"+products[pic_no].source);
}

if you end up with undefined being printed, you should change the code to this:

function loadImage(pic_no) {
   // canvas_pic is another empty movie clip in the centre of the screen. Its level is 1.
   _root.canvas_pic.loadMovie("photos/"+products[pic_no].source);
}
0
 

Author Comment

by:Matt_Hobbs
ID: 9625909
no its not even being called - dont think the onRollOver works.
0
 
LVL 5

Accepted Solution

by:
Calron earned 125 total points
ID: 9625985
I tried some things out and it seems that flash will not let you set listeners to a loaded jpg. There is a workaround for this though:

Create a Movieclip with a reactangle inside it. Make it the size that your thumbnails will be. Then create another movieclip inside your library and name it empty or somwthing like it. Don't put anything in it, just leave it empty. On your rectangle movieclip drop an instance of your emtpy movieclip and name it stage or something like that.

Then drop the rectangle clip on your main time line and name it thumbnail (or whatever).

now you can load the thumbnail into the following place:

_root.thumbnail.stage.loadMovie("mypic.jpg");
_root.thumbnail.onRollOver = function() {
  trace("this will be called");
}

If you don't want the rectangle clip to show either make it alpha 0 or set  its color equal to the background color. Also if you want to create the thumbnails on the fly you can either use duplicateMovieClip, or attachMovie.
0
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

Author Comment

by:Matt_Hobbs
ID: 9626159
thanks Calron :)
0
 

Author Comment

by:Matt_Hobbs
ID: 9632362
Just tried to create the onRollOvers dynamically but it doesnt work -

for (i=0; i<no_prods; i++) {
      thumbnail.duplicateMovieClip("pic"+i,levcnt);

      nb = eval("pic"+i);
      nb.width = parseFloat(products[i].width);
      nb.height = parseFloat(products[i].height);
      nb._x = xcnt;
      nb._y = ycnt;

      _root.nb.stage.loadMovie("thumbnails/"+products[i].source);
                _root.nb.onRollOver = function() { loadImage(i);}
      _root.nb.onRollOut = function() { canvas_pic.unloadMovie(); }
      createTextField("txt"+i,levcnt+1,xcnt-60,ycnt+40, 120, 20);
      var tf = eval("txt"+i);
      tf.text = products[i].title;
      tf.setTextFormat(myformat);
            
      ycnt+=105; levcnt+=2;
      movies[i] = nb;
      titles[i] = tf;
      if (i == 7) break;
}

but all the thumbnails load the same picture - the one thats in products[7]. I assume its not creating a new onRollOver event each time - how would i do this?

Regards
0
 
LVL 5

Expert Comment

by:Calron
ID: 9632403
The first thing that I can see are the following three lines:

 _root.nb.stage.loadMovie("thumbnails/"+products[i].source);
 _root.nb.onRollOver = function() { loadImage(i);}
 _root.nb.onRollOut = function() { canvas_pic.unloadMovie(); }


I am not sure if this is your problem, but try to change them to this:

nb.stage.loadMovie("thumbnails/"+products[i].source);
 nb.onRollOver = function() { loadImage(i);}
 nb.onRollOut = function() { canvas_pic.unloadMovie(); }

Because you have a local variable inside your function and that variable is not on _root.

Try it, else get back to me
0
 
LVL 5

Expert Comment

by:Calron
ID: 9632437
The other problem you couls be having is the image number:
onRollOver = function() { loadImage(i);}

inside of this function i is not know anymore. (you can test this by adding a trace(i); before loadimage, to see what values you get. YOu are either going to get undefined or your lmaximum i from your loop.

To get around this you will have to store the imagenumber inside each of your thumbnail movieclips:

nb.imagenum = i;
nb.onRollOver = function() { loadImage(this.imagenum);}

this should get you the correct image number
0
 
LVL 5

Expert Comment

by:Calron
ID: 9632443
One last thing, just on a side note, next time don't accept an answer before you have tested it and got it working. Most experts will not look at questions that already have accepted answers ... :)
0
 

Author Comment

by:Matt_Hobbs
ID: 9632450
brilliant , that works thanks again!
0
 

Expert Comment

by:R33BOK
ID: 9647616
i have a similar problem with  Matt_Hobbs. i have tried the solution and it works. But i have another problem. I want to get the value of the text field in emptyMovieClip. It always get the last one. i want to put loadVariables in duplicateMovieClip. I assign it as a button, so when user klick one of the button, the value of each text field will send to asp. i didn't call the array because user can change the value of the text field.

//assign depth
depth = -1;
depth5 = 1;

//assign simple array and split it
info = "10,21,3";
sample = "BKR0001,BKR0002,BKR0003";
info_array = info.split(",");
sample_array = sample.split(",");

//assign position
Item_yposition = 0;
additem_yposition = 0;
additem_xposition = 60;

//loop all the things
for (i=0;i<info_array.length;i++) {
//create and duplicate text field
createEmptyMovieClip("prod_mc"+i, depth);
var pm = eval("prod_mc"+i);
pm.createTextField("Item_txt", 1, 160, Item_yposition, 120, 20);
pm.Item_txt.border = true;
pm.Item_txt.type = "input";
pm.Item_txt.text = info_array[i];

//duplicate button inside movieclip that already exist
add_mc.duplicateMovieClip("adds_mc"+i, depth5);
mc = eval("adds_mc"+i);
setProperty(mc,_x, additem_xposition);
setProperty(mc,_y, additem_yposition);
mc.num = i;
mc.txt = nb.Item_txt.text
mc.onRelease = function(i){trace("addbuy.asp?productID=" + mc.txt + "&Quantity=" + apa_array[this.num])};

depth5++;
depth--;
Item_yposition = Item_yposition+30;
additem_yposition = additem_yposition+30;
additem_xposition = additem_xposition+30;
}
stop();


thanks a lot
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
What is the best way to incorporate  flash file as a url in webapplication? 8 367
SWF won't scale? 4 524
How do I change text in a Flash (FLA, SWF) file? 3 1,004
free flash maker 5 212
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question