dynamic movie loading an image as a button...

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
Matt_HobbsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CalronCommented:
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
Matt_HobbsAuthor Commented:
no its not even being called - dont think the onRollOver works.
0
CalronCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Matt_HobbsAuthor Commented:
thanks Calron :)
0
Matt_HobbsAuthor Commented:
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
CalronCommented:
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
CalronCommented:
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
CalronCommented:
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
Matt_HobbsAuthor Commented:
brilliant , that works thanks again!
0
R33BOKCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.