Improve company productivity with a Business Account.Sign Up

x
?
Solved

Preload Images that are loaded dynamically

Posted on 2008-06-14
13
Medium Priority
?
490 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
  • 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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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…
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 …
The goal of the tutorial is to teach the user how to how to record live broadcast.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

595 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