Solved

dynamic movie loading an image as a button...

Posted on 2003-10-27
10
201 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
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 how to record live broadcast.

706 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now