[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

dynamic movie loading an image as a button...

Posted on 2003-10-27
10
Medium Priority
?
247 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 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
Suggested Courses

834 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