Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Preload Images that are loaded dynamically

Posted on 2008-06-14
13
Medium Priority
?
484 Views
Last Modified: 2012-05-05
I have a flash 8 web site that uses an empty movie clip to load in external images. Problem is that some of the images are large. Any ideas on how to "preload" or show the loading progress until the image shows.
0
Comment
Question by:beretta819
[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
  • 7
  • 5
13 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 21787932
sure use the MovieClipLoader class

var mcl:MovieClipLoader = new MovieClipLoader();

var mclListener:Object = new Object();

mclListener.onLoadProgress(mc:MoveClip, loadedBytes:Number, totalBytes:Number) {
// show progress here
}

mclListener.onLoadInit(mc:MovieClip) {
// now show the image
}
0
 
LVL 1

Expert Comment

by:ChrisKitching
ID: 21789128
And if you want to use a progress bar, create a movieclip of the progress bar in it's completly done position, give it an instance name of "bar", and alter the code tagit posted to this:
var mcl:MovieClipLoader = new MovieClipLoader();
 
var mclListener:Object = new Object();
 
mclListener.onLoadProgress(mc:MoveClip, loadedBytes:Number, totalBytes:Number) {
    bar._xscale = loadedBytes/(totalBytes/100)
}
 
mclListener.onLoadInit(mc:MovieClip) {
// now show the image
}

Open in new window

0
 
LVL 1

Author Comment

by:beretta819
ID: 21803960
Tagit / Chris
Using the code I get the following error, and I don't know enough of actionscript syntax to fix it.

**Error** Scene=Scene 1, layer=actions, frame=19:Line 5: ')' or ',' expected
     mclListener.onLoadProgress(mc:MoveClip, loadedBytes:Number, totalBytes:Number) {
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!

 
LVL 1

Expert Comment

by:ChrisKitching
ID: 21803996
Gosh, that was remarkable stupid of me.sorry, let me try that again...
var mcl:MovieClipLoader = new MovieClipLoader();
 
var mclListener:Object = new Object();
 
mclListener.onLoadProgress = function(mc:MoveClip, loadedBytes:Number, totalBytes:Number) {
    bar._xscale = loadedBytes/(totalBytes/100)
}
 
mclListener.onLoadInit = function(mc:MovieClip) {
// now show the image
}

Open in new window

0
 
LVL 1

Author Comment

by:beretta819
ID: 21804261
Actually the error was mc:Moveclip (missing the i in Movie).
But I created a MC with a rectangle with instance name bar, and it doesn't work. The bar is always there and always full.
0
 
LVL 1

Author Comment

by:beretta819
ID: 21804628
You were right... It needed Function also.
So to make this easier (i think) the site is www.etmiranda.com. on the photos page I have the button thumbnails that when clicked load an external jpg into an empty movieclip (instance name:  imgContainer) in the black photo area on the right.  Do I have to reference the imgContainer name to make this work?
0
 
LVL 1

Accepted Solution

by:
ChrisKitching earned 400 total points
ID: 21805442
Ugh.. sorry man, i'm half asleep over here. I started with the code that other guy posted, which in fact doesn't work :p.
Let's start again with a script more likley to do the trick XD.

Many apologies for my sheer stupidity in this case.
var mcl:MovieClipLoader = new MovieClipLoader();
 
var mclListener:Object = new Object();
 
mclListener.onLoadProgress = function(mc:MovieClip, loadedBytes:Number, totalBytes:Number) {
    bar._xscale = loadedBytes/(totalBytes/100)
}
 
mclListener.onLoadInit = function(mc:MovieClip) {
// now show the image
}
mcl.addListener(mclListener);
mcl.loadClip("SomeJPG.jpg", imgContainer);

Open in new window

0
 
LVL 1

Author Comment

by:beretta819
ID: 21833324
Sorry it took so long to get back...
So the code works, but I am having trouble applying it to all of the different thumbnail buttons so all the images are preloaded.
0
 
LVL 1

Author Comment

by:beretta819
ID: 21833369
Nevermind.... I got it to work.

Thank you for all the help. I up'ed the points.
0
 
LVL 1

Author Comment

by:beretta819
ID: 21833467
Dang it... Spoke to soon. How do I make the "bar" not visible after the image is loaded
0
 
LVL 1

Expert Comment

by:ChrisKitching
ID: 21837340
Easy enough.
var mcl:MovieClipLoader = new MovieClipLoader();
 
var mclListener:Object = new Object();
 
mclListener.onLoadProgress = function(mc:MovieClip, loadedBytes:Number, totalBytes:Number) {
    bar._xscale = loadedBytes/(totalBytes/100)
}
mclListener.onLoadComplete = function(target_mc:MovieClip, httpStatus:Number):Void {
    bar._visible = false;
}
 
mcl.addListener(mclListener);
mcl.loadClip("SomeJPG.jpg", imgContainer);

Open in new window

0
 
LVL 1

Author Comment

by:beretta819
ID: 21837916
Again... Thank you for your help. I think I am done now.
0
 
LVL 1

Expert Comment

by:ChrisKitching
ID: 21838045
Drop me a mail at  christopherkitching@hotmail.com if you need anything else.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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…
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…
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 select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

604 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