?
Solved

dynamic movie loading an image as a button...

Posted on 2003-10-27
10
Medium Priority
?
242 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.
Suggested Courses

762 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