load many images to flash 1

[chrisdq]

Hi,

Can someone please show me how to load many images and display them in flash?

loadMovie overwrite the previous one; therefore only the last one is shown at the end.

I'm using flash 8 pro. Thanks.

 

[kennethkawamoto]

Create many MovieClips.

Kenneth Kawamoto

http://www.materiaprima.co.uk

 

[okiiyama]

What I have done is create a movieclip in the frame or bfore the frame you wan to create the many movie clips. Then export it for actionscript (lets call the export for actionscript name: MC_Template), also uncheck the box for exporting it to the first frame. For this instance, set the alpha property = 0.

Now you can use in do something like this in the frame's actionscript panel:

var imgURLArray:Array = new Array("http...com/img1.jpg", "...", "...");
for(i = 0; i<imgURLArray.length; i++) {
 a = this.attachMovie("MC_Template", "movie"+1, this.getNextHighestDepth());
//You can change properties now by referencing the MC using 'a'
a._x = 50;
a._y = 50;
a._alpha = 50;
}

Going a little further, I wanted to keep a reference to all of these movieclips I've created, so I created an array for these movieclips also. So instead of using a, I created another array "mcArray" outside of the for loop and pushed the new movie clip into mcArray.

Hope this helps.

 

[chrisdq]

okiiyama: I'm trying to load all thumbnail images from a directory like images. Would your code work for this?

I'm using loadMovie to display my images and for the next image to be displayed without delelete the previous one, I create a new empty movieclip and give it a different position. it seems to work for a couple images so far...
any better idea anyone?

 

[okiiyama]

Yes. I am using actionscript to load images from a directory on a website. Since the flash file is client side, you'll need to use something like php to obtain the urls of all the images. If you need a good reference to do this you can look at

http://billwatson2.no-ip.info/public/flash/flash.html.

On the menu click on Images, then Slideshow. You can d/l the flash tutorial to see how he created the slide show from images in a web directory.

Also, I forgot to add a part to the code above.
Here is the new code:

for(i = 0; i<imgURLArray.length; i++) {
 a = this.attachMovie("MC_Template", "movie"+1, this.getNextHighestDepth());

//You can change properties now by 
//referencing the MC using 'a'

a._x = 50;
a._y = 50;
a._alpha = 50;

//You can create a movieclip that doesn't replace 
//the instance created above:

a.createEmptyMovieClip("container", "depth of movieclip");
container.loadMovie(imgURLArray[i]);

//Above, the empty movie clip "container" 
//is replaced with the img from the array "imgURLArray".

//you can also use loadMovie() on "a", 
//but that will replace the instance of 
//MC_Template with the img at the URL you 
//put in loadMovie like:

a.loadMovie("[URL unfurl="true"]http://www.google.com/intl/en/images/logo.gif");[/URL]

//Before you can test this, you will probably 
//need to save it.  Also I think that 
//if "[URL unfurl="true"]http://"[/URL] is not used, flash will 
//think the url is relative.
}

So, yes you can load images from a directory, but you will need to use a server side web page (PHP, Coldfusion, ...etc.) to do that.

 

[chrisdq]

okiiyama: thanks for your great help. I have one question for you: Why do we have to use php or semiliar to get the urls. Can we just specify the images in ActionScript like
var imgURLArray:Array = new Array ("http...com/img1.jpg", "...", "...");

In order to your above code to work, I just need to create a MC_template movieclip. What am I missing? When I run it I see nothing... help.

Thanks

 

[okiiyama]

Yeah, you can, assuming the directory would remain static, or if you don't mind editing the links in the URL array everytime you add or remove an image.

Using a php page, you don't need to worry about updating the URL array when you add/remove a file, because the PHP page is set up to browse the specified directory and return the file urls to the flash file.

There are maybe a number of reasons something wouldn't show up.

1. If you do not export the MC_Template to the first frame, or if you delete the MC_Template from the stage, you will not be able to reference it using .attachMovie(...).

2. Under the Linkage tab, you need to check the box for "export for actionscript" ... And have the name be "MC_Template" (or what ever name you are using).

3. You cannot use .attachMovie() and create instances of the template in (or is it on) the same depth.

4. Cannot duplicate instance names.

5. LoadMovie() only accepts .swf files or .jpgs

There may be easier ways of creating (what I call) MC_Template, but maybe this step by step will be helpful in understanding:

Starting from scratch:
1. Click the rectangle tool, and create a rectangle on the stage. Use whatever colors you want =).
2. Click the selection tool and double click on the rectangle get the fill and the border selected.
3. Once selected, right click the selection and then "Convert to Symbol..."
4. Name it "MC_Template", and check the box for "Export for actionscript" and uncheck the box for "Export to first frame" and you should see in the "Linkage" seciont that the indenitifier auto-populates as "MC_Template".
5. Now you can close the window and press the F11 key to open the library panel. You should see that "MC_Template" is in the library.
6. We aren't going to do anything with the library, but its nice to see that when you create any symbol on the stage, it will appear in the library.
7. Now, with the movie clip on the stage, click on it once to see the color drop down menu on the properties panel. Change the alpha to 0 so that you won't see it anymore.
8. If the actions panel is not up, press F9 then Click on the frame you are going to add the actionscript that will create the movieclips.
9. If your directory of images is static, this part should be easy:

/* 
  remember to use "[URL unfurl="true"]http://"[/URL] in the links
*/
var imgArray:Array = new Array("link1", "link2", ...);
for(i = 0; i<imgArray.length; i++) {
 a = this.attachMovie("MC_Template", "movie"+i; this.getNextHighestDepth());
 a.loadMovie(imgArray[i]);
 //if you want to adjust movie clip properties 
 //like x, y, and alpha; you can do it in the attachMovie()
 //or by referencing the object with 'a' lets say that I'm
 //going to offset these by 50 more units each time and
 //they get less and less transparent
 a._x = 50*i;
 a._y = 50*i;
 a._alpha = (5*i)+25;
}

I may tend to over complicate things, so I'm sorry if I do.





Does that make sense?

 

[chrisdq]

okiiyama: You are AWESOME!!!! thank you so much for your very helpful code. With a tiny bit of modification, I get the program to display all of the thumbnails on the screen.

Now the harder part is to make those thumbnails linkable/clickable so that it will display the actual image on the right when mouse is over a thumbnail.
This can be done using flash right? at least I think it would make more sense to pass data within flash.
In order to accomplish this, normally I need to create a button symbol and add images in the down/over property. But in this case is it possible to do this through actionscript because the name and path of the images are unknown.

any suggestions? please...

Thanks a bunch.

 

[okiiyama]

Okay, I've got an answer. I had no idea how to do it either, and it was a little trickier than I thought. I am using one template only, and the template is sized for the fullsized images, and I set the _xscale and _yscale properties of the thumbnails = 50. The 'learning' part for me was finding out how to refrence variables of a movieclip and when to use "this." and when not to. Anyways this does work, but the URLs wont. Insert your own.

You will need to create a movieclip, and export it for actionscript. Set the _alpha property of this clip on the stage = 0. That way you don't have to export the clip to the first frame because its already there.

Here is all the code you need. This bit of code uses a static array of fake Image URLs.

//Only code you need. Insert in main timeline.
//You do not need any code in the movieclip time line
//that code is taken care of here.
img1 = "[URL unfurl="true"]http://www.someURL.com/123.jpg";[/URL]
img2 = "[URL unfurl="true"]http://www.someURL.com/456.jpg";[/URL]
img3 = "[URL unfurl="true"]http://www.someURL.com/789.jpg";[/URL]
img4 = "[URL unfurl="true"]http://www.someURL.com/abc.jpg";[/URL]

var imgURLArray:Array = new Array(img1, img2, img3, img4);

for(i = 0; i<_root.imgURLArray.length; i++) {
	this.attachMovie("mc1", "m"+i, this.getNextHighestDepth(), {_x:0, _y:i*110, _xscale: 50, _yscale: 50});
	this["m"+i].createEmptyMovieClip("container", 1); //this["m"+i] is like using eval()
	this["m"+i].container.loadMovie(_root.imgURLArray[i]);
	this["m"+i].urlRef = _root.imgURLArray[i];
	this["m"+i].imgMCReference = "";
	this["m"+i].onRollOver = function() {
		imgMCReference = this._parent.attachMovie("mc1", "FullSize"+i, this._parent.getNextHighestDepth(), {_x:200, _y:0});
		imgMCReference.loadMovie(this.urlRef);
	};
	this["m"+i].onRollOut = function() {
		removeMovieClip(imgMCReference);
	};
}

 

[chrisdq]

okiiyama: thank you so much for that code. It really helped me a lot. Have a great Christmas

yay... we have a hero in this forum