This tutorial will discuss how to dynamically load pictures into your flash file.
It will have two parts. The first part will be for if you only want to load one or
two images, or if all your images have a small file size and won't take long to load.
The second part will be if you have many images to load and they all will take a while
to load due to a large file size.


Part 1:

This is the simple version.

First set up your stage. I have created a stage set up with 5 thumb nails of images and a space to the right where the large images will appear.

Ex:


I made each bitmap thumb nail into a movie clip and gave it an instance name. Mine are correspoding to the name of the album.

aydy_mc
ftr_mc
hcdr_mc
h_mc
sw_mc

Now drag a loader component from your components menu. If your components menu is not visible then hit Ctrl + F7.
Resize the loader component to whatever size you want the pictures to be. No matter what size the pictures are,
they will be scaled to fit inside the loader component.

give the loader component an instance name of picLoader

Thats all we need as far as setting up the stage goes. Now all the rest is up to action script.

Create a new layer and rename it "actions". Now in the first frame of your actions layer press F9 to open the actions panel.

For this simple method, we are going to just use the "contentPath" method of upload pics.

Action Script:

aydy_mc.onRelease = function () {
picLoader.contentPath = "http://blog.inf.by:8686/ui/pst/25/7728_1.jpg";
}

ftr_mc.onRelease = function () {
picLoader.contentPath = "http://ancrimet.mundoserver.org/ima/grupos/children_of_bodom/follow_the_reaper_big.jpg";
}

hcdr_mc.onRelease = function () {
picLoader.contentPath = "http://svc087.bri7h.webmetrix.com.au/shopimages/cobdeathro.jpg";
}

h_mc.onRelease = function () {
picLoader.contentPath = "http://images.amazon.com/images/P/B00000IN5G.01.LZZZZZZZ.jpg";
}

sw_mc.onRelease = function () {
picLoader.contentPath = "http://www.rockdetector.com/assets/img/covers/15354.jpg";
}

I created an onRelease function for each of the movie clip thumb nails that we made.
I told it that when I release on one of the thumb nails, then the picLoader's contentPath with be equal to
http://www.blahblah.com/image.jpg URL.

If you were to be using this on a real website, you could just use the relative path to the file name (ex. images/image.jpg).
But on myspace, you must use the full URL to the image. HTTP:// and all.

That is all there is to loading pictures dynamically into your flash file. In the second version of this tutorial. I will show you how to
load larger pictures that have a preloader show up while they are loading.
Please stay turned...

dynamicPics.fla

Thank you for reading this tutorial. I hope you find it very helpful with your flash animations. For any help with this tutorial or questions, please post only in this forum thread.

~Flash Mods

Part 2:

This is the more complex version.

We are just going to be continuing with your set up from the previous tutorial.

Except in this version, I changed the URLs of the loading images to imageshack URLs so we aren't hot linking ;)

We need to create our loading bar and text now.

So select the rectangle tool and give it whatever stroke and fill color you want. On a new layer, create a fairly long rectangle that looks like a preloader bar. And add some "Loading..." text if you want to make it look fancy. Then select the entire rectangle and text and press F8 to make it a movie clip. Then give it an instance name of loader_mc. Now go back inside this movie clip and select only the fill of the rectangle and turn it into a movie clip as well. Then give it an instance name of bar_mc.

We are now done setting up the preloader component. So go back into the first frame of your actions layer.

New Action Script:

loader_mc._visible = false;

var mcLoader:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();
mcLoader.addListener(myListener);

myListener.onLoadProgress = function(target_mc, bytesLoaded, bytesTotal) {
loader_mc._visible = true;
var pctLoaded = Math.round(bytesLoaded/bytesTotal*100);
loader_mc.bar_mc._xscale = pctLoaded;
if (bytesLoaded >= bytesTotal) {
loader_mc._visible = false;
}
}

mcLoader.loadClip("http://img512.imageshack.us/img512/5727/1419382vx7.jpg", picLoader);


aydy_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/5727/1419382vx7.jpg", picLoader);
}

ftr_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/2429/15357ag0.jpg", picLoader);
}

hcdr_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/1664/165507bz3.jpg", picLoader);
}

h_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/6049/15355rg0.jpg", picLoader);
}

sw_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/3373/15354ax4.jpg", picLoader);
}

loader_mc._visible = false;

Sets the initial visibility property of the loader_mc movie clip to invisible.

var mcLoader:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();
mcLoader.addListener(myListener);

This creates a new variable and gives it the name of mcLoader. Then we strict type it to a MoveClipLoader and set it equal to a new MovieClipLoader.
Next we create another variable and give it the name myListener. And strict type it to an object. This listener object is not an actual object that will appear on your stage but merely a piece of code that waits for something to happen.
Last, we add the myListener variable to the mcLoader variable.
We have just told the myListener variable to listen for whenever something is being loaded into the mcLoader variable.

myListener.onLoadProgress = function(target_mc, bytesLoaded, bytesTotal) {
loader_mc._visible = true;
var pctLoaded = Math.round(bytesLoaded/bytesTotal*100);
loader_mc.bar_mc._xscale = pctLoaded;
if (bytesLoaded >= bytesTotal) {
loader_mc._visible = false;
}
}

Now we are telling that as soon as something starts to load into the myListener variable, we are going to get the total bytes and the bytes loaded. Then we are going to set the visibility of the loader_mc movie clip to visible so we can actually see it.

Once the image is 100% loaded then we will make the loader_mc invisible again.

For details on the rest of this ActionScript, please refer to the Creating A Preloader tutorial.

mcLoader.loadClip("http://img512.imageshack.us/img512/5727/1419382vx7.jpg", picLoader);

To start out we want our first image to load. So we tell our mcLoader variable to load something. We pass the parameters of the URL for what we want to load and where we want it to load to. We want it to load into our loader component picLoader.

aydy_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/5727/1419382vx7.jpg", picLoader);
}

ftr_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/2429/15357ag0.jpg", picLoader);
}

hcdr_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/1664/165507bz3.jpg", picLoader);
}

h_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/6049/15355rg0.jpg", picLoader);
}

sw_mc.onRelease = function () {
mcLoader.loadClip("http://img512.imageshack.us/img512/3373/15354ax4.jpg", picLoader);
}

Same thing as above. We are saying that whenever one of the buttons is pushed, we tell our mcLoader variable to load something. We pass the parameters of the URL for what we want to load and where we want it to load to. We want it to load into our loader component picLoader.


That is all there is to loading pictures dynamically into your flash file and adding a preloader!

dynamicPics2.fla

Thank you for reading this tutorial. I hope you find it very helpful with your flash animations. For any help with this tutorial or questions, please post only in this forum thread.

~Flash Mod