Login | Register
How to make a custom AS3 preloader

How to make a custom AS3 preloader

Many designers seem to think that Actionscript 3 made things more difficult. To some extent that is true, but there's a bunch of things that are still easy. Preloaders are a good example and in this tutorial, you will learn how to make a custom looking preloader using Flash and AS3. Best of all - no programming experience is required so absolute beginners can do this.

A preloader displays the download progress of your Flash file. You probably know the classic "loader bar". It's allright, but this tutorial will show you how to make a custom AS3 preloader. This preloader can contain text, animation and whatever you wish and it requires no programming, just a cut'n'paste of code.

Why Preload?

Preloaders are often an afterthought. You start off building your project and after working for some time you notice that the file size keeps growing. It would be tempting to just say "everyone's on DSL these days" but that's not the reality. Even if your users have DSL, they may not always achieve the theoretical maximum speed as promised by their internet provider. If their DSL speed is 768Kb, a one megabyte file will take ten seconds to download fully. Look at the wall for ten seconds. Count "onethousandandone, onthousandandtwo" and so on. Amazing how long ten seconds is, isn't it?

If you look at a watch instead, it will seem as if time goes faster. On the watch, you'll actually have something to look at that will give you an idea of how long it's going to take. Preloaders to the rescue. By adding a preloader, you can give the user an idea of how long this is going to take. By adding a custom preloader, you can even use this to extend the brand experience. Using the technique described in this tutorial, you'll be able to make a custom preloader so it looks even better.

This approach can be used to create any kind of custom preloader for any Flash project. The basic steps we need to do are:

1. Create a new scene and name it preloader

2. Create a custom movie clip with a 100 frame animation and place it on the preloader scene

3. Name the custom movie clip "preloaderMC" and paste script in frame 1

4. Add the stop command where your content resides

Think you can do that? Great! Let's get started!

How to Preload with AS3

Let's assume that we've landed our dream client - the company that creates the most beautiful cars that even has a Flash based navigation system. We've built a simple slideshow using plain timeline animation, but the file clocks in at almost half a megabyte when exported. Click here to download and open the sample FLA so you can follow along with the rest of this tutorial.

For a preloader to have any purpose, it must be displayed and loaded before the rest of your Flash movie. The easiest way to ensure that the preloader is loaded first, is to add a new Scene and move it to the start of your movie. Open Windows -> Other Panels -> Scene to view the Scene Panel. Unless you've already added more Scenes, you'll only have the default "Scene 1" in the list.

Click the plus-sign at the bottom of the panel. This will add a new scene AFTER the existing one. Click and drag the new scene ("Scene 2") to the top of the list, above the old one ("Scene 1"). Double click "Scene 2" and rename it to "Preloader". Your Scene panel should now look like this:

image

Clicking the name of each Scene will display that scene in Flash. Click the Preloader scene and you'll see the black, empty stage. Open the Library if it's not already open (Window -> Library) and drag the "Meter" movieclip to the middle of the stage.

Double-click the Meter movieclip to take a look at how it is built. It's really just a pre-made animation that is 100 frames long. The preloader script will show the same frame as the percentage downloaded. When 50% is downloaded, it'll display frame 50. Exit the movieclip by double clicking somewhere there is nothing on stage.

For the script to work, you will need to set the instance name of this MC to "preloaderMC" in the Properties panel.

image

Click on frame 1 in your timeline, open the Actions panel (Window -> Actions) and paste the code below:

 

import flash.events.ProgressEvent;
function update(e:ProgressEvent):void
{
 var percent:Number = Math.floor( (e.bytesLoaded*100)/e.bytesTotal );
 if(preloaderMC is MovieClip){
 preloaderMC.gotoAndStop(percent);
 }
 if(percent == 100){
 play();
 }
}
loaderInfo.addEventListener(ProgressEvent.PROGRESS, update);
// Extra test for IE
var percent:Number = Math.floor( (this.loaderInfo.bytesLoaded*100)/this.loaderInfo.bytesTotal );
if(percent == 100){
 nextFrame();
}
stop();

 

So - what's happening here? I'll explain this line by line so that beginners can understand it. If you understand the code above, just skip ahead to the next heading.

Line 1: First we import the ProgressEvent class. A class is a set of predefined functions and these deal with the loading of files.

Line 2-11: We create a function called "update". A function is a block of commands that we can start at any given time. What commands that are contained within the function are defined by the curly brackets. The "{" bracket starts the definition and the "}" bracket ends it. You can see these brackets further down the script as well, defining blocks of commands.

Line 4: Here we calculate the percentage downloaded by looking at the variables "bytesTotal" and "bytesLoaded". After calculating this, we use the Math.floor function to round the number. If we did not round the number, Flash would display an error as we tried to go to frame 1.325 in the speedometer movieclip. Flash only has whole frames.

Line 5-7: Makes sure that our custom preloader is a MovieClip before displaying the appropriate frame in the preloader movieclip. If you did not name your preloader instance "preloaderMC" as written above, Flash will show the error message: "1120: Access of undefined property preloaderMC" and your movie will just flash along like mad. If you did name the movieclip instance and still get this error, make sure you spelled it 100% correctly. Flash is picky when it comes to this as it has now way to guess what is right.

Line 8-10: If the entire movie is downloaded, we'll issue the play() command to resume playback of the movie.

Line 12: Here we ask Flash to call the update-function every time the download progresses. We do this by adding a listener (addEventListener) to the loaderInfo for this Flash movie. Flash has a lot of Events like this that we can use for various purposes. As an example: there are events for detecting mouse clicks, double clicks, rollovers, mouse buttons up/down, as well as scrolling the mouse wheel.

UPDATE:
Line 16-20: Emil Thorbjørnsson alerted me to a bug in the first version that caused IE to just loop and play the preloader if the SWF was reloaded. The problem is that the ProgressEvent never triggers (as it should) in IE. The solution is to add an extra test at the end of the script to check if the file is already 100% loaded. 

Finishing off

If we tested the movie now, it would look odd. The preloader would play for a brief second, the slideshow would flicker and then we'd be back at the preloader. When we issue the play() command from our preloader script, we'll also need to stop playback when we get to the Slideshow. In the Scene panel, click "Scene 1" to go to the scene where our slideshow is.

Click on frame 1 in the timeline, open the Actions panel (Window -> Actions) and paste "stop();" into the empty window.

image

Checking how it works

Now you're ready to test the preloader (Control -> Test movie). When the preview opens, select View -> Download Settings. Select the DSL setting (32.6 Kb/sec). Next, Select View -> Simulate download and you'll see the meter moving as the file downloads. You can also select View -> Bandwidth Profiler to see the detailed download information and then simulate the download again. If you run into trouble, just click here to download the finished FLA. Use this to compare with your own file to see what went wrong. Click here to see the finished file.

One last word of caution - I've seen preloaders that are so complex that they weigh in at more Kb than the main movie. Only use preloader if the main content of your movie takes a while to download and make sure that the preloader does not add too much size to the overall movie or the whole point of it will disappear.

Note: This tutorial assumes that you've not set up any library assets to "Export for Actionscript". This is often set for components and other assets so they can be used from the ActionScript language. By default, these assets are exported in Frame 1 of your movie, rendering your preloader rather useless. To fix this, open File -> Publish Settings -> Flash -> Settings and set the frame number under "Export classes in frame" to the frame after your preloader.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Next tutorial:
Flash 3D Basics

Previous tutorial:
AS3 Photo gallery

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by marcelomdsc on 11/17 at 07:07 PM

Is it possible to adapt that script for it to work with AS2?
I loved the turorial thanks!


Posted by Jens C Brynildsen on 11/17 at 09:26 PM

Hi Marcel,
Yeah. That would involve using a movieclip that checked progress I guess? I have to admit that I’ve not done much AS2 the last years (and I’m really glad for that!).

I did a Component for this way back. You can find it on the Adobe Exchange: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1007925

I’ve seen it used in all sorts of high profile sites, so I’m sure it works :)

Fun Fact: I’ve only gotten one single donation from those 60.000+ downloads. Either people are cheap or the component was so easy to use they forgot about it right away.


Posted by sunset1030 on 12/08 at 11:32 PM

Jens,

Thank you very much for this tutorial. I’m new to Flash CS4 and I had a difficult time finding a helpful tutorial on AS3 preloaders. Until I found yours! The access to the FLA file was a big help also.

Thanks again.

John Holland


Posted by gable on 12/21 at 10:26 PM

Jens,

What a great tutorial. I deeply, deeply appreciate your plain language finesse. I’m building a preloader based on your instructions, and I’m running into the issue you point out at the very bottom regarding “Export for Actionscript.” I have used an FLVplayback component, some button components, and an embedded font. When I follow your advice to change the Export in Frame number under Publish Settings, my SWF gets unhappy. If I change the export frame from 1 to 2, suddenly none of those components work, possibly because my preloader scene contains no frame 2? If I leave the setting on frame 1, my preloader doesn’t seem to begin counting until frame 30 or so of my 100-frame preloader animation, possibly because Flash is busy loading the component items? Can I specify “load the component stuff in frame 1 of the scene that contains my actual content”? The Settings dialogue seems to be dummy-proofed to accept only numerals, so I’m not sure how to point it toward my second scene. Happy to send my FLA if you care to see my setup.

Again, thanks for your nice work.


Posted by Jens C Brynildsen on 12/23 at 12:25 AM

Hi gable,
I was able to reproduce this myself and this is not the expected behavior so I think it must be a bug? It’s the same on both CS3 and CS4.

I’ve no idea why the Flash IDE does not abide it’s own settings for AS3 projects (it does so for AS2) but there is a simple workaround. Just move the FLVComponent inside a MovieClip. Select it, press F8 and things will work as they should…

J


Posted by Jens C Brynildsen on 12/23 at 12:28 AM

... and about you movie not having a frame 2 - it probably does. Scene’s is just an abstraction that is offered so all the scenes are really just frames along a timeline. Technically there’s no such thing as a “Scene” inside a SWF file, but rather labels that are presented to the Flash user as scenes since that’s an easy concept to grasp.


Posted by gable on 12/28 at 04:30 AM

Great, thanks for the workarounds, Jens. Yep, I had read that the SWF wouldn’t really see my scenes and had wondered if frame 2 would simply mean frame one of the second scene. I will certainly try your workaround.

Have you created any AS3 programming publications? I’ve picked up chunks of it here and there, but few titles actually teach programming for designers in any conceptual, systematic way. Colin Smith has one that has helped some, and Todd Perkins has one. Just curious. Thanks again for your responses.


Posted by Jens C Brynildsen on 12/30 at 09:02 PM

Hi gable,
I’ve published a couple books on Flash, but only in Norwegian (my native tongue) ;-)


Posted by CauselessEffect on 01/10 at 06:21 PM

Just in case it helps anyone else, for IE I had to include the following code:

// Extra test for IE
var percent:Number = Math.floor( (this.loaderInfo.bytesLoaded*100)/this.loaderInfo.bytesTotal );
if(percent == 100){
  nextFrame();
  gotoAndPlay(1, “Scene 1”);
}

Same code as above but I had to add the gotoAndPlay bit to change scenes and run.  Error occured in IE7 that would freeze playback without this.


Posted by sjurick on 02/05 at 12:21 AM

Can someone please point me to a good tutorial on how to build the speedometer from scratch (not graphically) but how the pieces go from seperate layers to a single symbol that is animated.  I cannot figure it out.


Posted by sjurick on 02/05 at 02:06 PM

How would you add dynamic text to this to also show actual numerical percentage as well?


Posted by Jens C Brynildsen on 02/24 at 09:56 AM

Hi Sjurik,
To show the percentage as text - just add a textfield on stage, set it’s instance name to something like “percentageText” and then add this line in the “update” function:

percentageText.text = percent;

As for your other question - you’ll have to dig into the sample FLA and figure it out. It’s not complicated, but it’s kind of basic.

J


Posted by sjurick on 02/24 at 04:31 PM

Jens,

Thanks for your response.  Can I bother you for one more thing?  I don’t know where to insert the above code (percentageText.text = percent;).  I have added the dynamic text element but keep getting “1120: Access of undefined property percentageText”.  I’ve tried inserting your code in various places but without success.

Here’s the AS3 code (which is same as yours pretty much)

import flash.events.ProgressEvent;
function update(e:ProgressEvent):void
{
    var percent:Number = Math.floor( (e.bytesLoaded*100)/e.bytesTotal );
    percentageText.text = percent;
    if(preloaderMC is MovieClip){
      preloaderMC.gotoAndStop(percent);
    }
    if(percent == 100){
      play();
    }
}
loaderInfo.addEventListener(ProgressEvent.PROGRESS, update);

// Extra test for IE
var percent:Number = Math.floor( (this.loaderInfo.bytesLoaded*100)/this.loaderInfo.bytesTotal );
if(percent == 100){
  nextFrame();
}
stop();

Thanks,
Steve


Posted by Jens C Brynildsen on 02/25 at 02:37 PM

Hi Steve,
Sure. If you just set the <Instance Name> of the textfield to “percentageText” that error will go away. This makes it possible for Flash to target the textfield.

Another small change - Since this is AS3, you’ll need to convert the Number to a String:

Change this:
percentageText.text = percent;

to:
percentageText.text = percent.toString();

or you’ll get another error.

J


Posted by sjurick on 02/25 at 03:15 PM

Jens,

I must still have something wrong.  I created a text box from scratch.  Typed in 100 in the input for the text box and gave it a color and sized it.  Then I named the instance as specified above “percentageText”.  I have inserted the code “percentageText.text = percent.toString()” right after the “var percent:Number…...” line.  I still get the (1120: Access of undefined property percentage.Text error).  Is the line of code in the right place?  Does the text box need to be set to something other than dynamic?

Thanks,
Steve


Posted by Jens C Brynildsen on 02/25 at 03:24 PM

You did set the text field to be “Dynamic”? If that does not work, send your FLA to “jens” at this domain and I’ll have a look at it.

J


Posted by paradawx on 03/05 at 06:02 PM

hey there, for some reason when I go to click on the link for the flash file, a coded page comes up instead of promting me to download. Has anyone else had this problem. I need to see how this works because I am have so much trouble getting my movie clip to work with this tutorial. It seem to be just want I need it to do but I can’t get it to work.

thanks guys
Jason


Posted by Jens C Brynildsen on 03/07 at 11:15 AM

@Jason - just right click and select “Save to disk”. It’s something with the Mime-types that are not set up correctly on the server. I’ll ping support about it.

J


Posted by paradawx on 03/08 at 02:13 PM

hey Jens, I got the preloader to work. What I did was swap out the meter for the movieclip I have and it works just fine. So I know that the code works. So now I’ll start from scrach on my own. But there is one thing though, I try and use a SlideShowPro gallery after the preloader (in scene 1) that I have on my site and I get the following error:

——————

TypeError: Error #1009: Cannot access a property or method of a null object reference.
  at preloader_finished_fla::MainTimeline/__setProp___id0__Scene1_Layer3_0()
  at preloader_finished_fla::MainTimeline/frame1()

——————

The preloader just stops at its last frame and sits there. I don’t know much about code errors as I am just learning so any help would be great

Thanks again
Jason

The gallery that I am trying to use on layer1 scene1 can be viewed at

hppt://jdbm.ca/portfolio.html


Posted by Ryan Holmes on 03/08 at 05:52 PM

Jens,
I am new to AS3 and I’m having an issue with my preloader. When I used your file it the meter worked fine. But when I made my own animation (simply numbers counting from 1-100) within my movieclip “preloaderMC” it only shows the last 5 or 6 frames of the animation when I simulate the download. Not sure why this would be.

Any help would be appreciated. Thanks
Ryan


Posted by Jens C Brynildsen on 03/09 at 10:15 AM

@Jason - that error means that you are trying to use something before it is present. It can happen in so many ways, but in general - this will fail:

object.play();
object = new MovieClip();

This will work:

object = new MovieClip();
object.play();

This will happen with any object (Strings, TextFields, Numbers…) - not just MovieClips. So - I can’t help you with this specific error, but if you do some testing using trace-statements, you can find out which object it is that fails. Place statements like this at the place where the error occurs and if you get “object: null”, that’s your problem:

trace(“object: “+object);

Best of luck trapping the error!

J


Posted by Jens C Brynildsen on 03/13 at 01:16 PM

@Ryan It’s a little hard to tell without looking at the FLA, but have you linked any of the library assets so that they are set to “Export in first frame”?

J


Posted by user1million on 05/12 at 08:41 PM

The preloader works great!  However, when I try to incorporate it with my site I receive this error…

TypeError: Error #1009: Cannot access a property or method of a null object reference.
  at main_fla::MainTimeline/frame2()


If I remove the preloader, I do not receive this error.  If I comment out all of my code, I also do not receive this error, however my site no longer functions.


Posted by Jens C Brynildsen on 05/20 at 10:57 PM

@user1million Hard to tell from just that. The error just means that you are trying to access something that isn’t there.

Make sure your preloaderMC is where it should?

J


Posted by billygoatkaraoke on 06/08 at 09:42 AM

Hi Jens

Cool preloader.  I’m having a similar problem as @user1million though.

I have tacked your preloader onto the start of my current working flash project.

I did this by opening the preloader .fla file as an external library in my current flash project, and then set it all up like you said.

When I play it, the preloader plays fine, and then my website gets dsiplayed, but functionality like buttons etc won’t work.

When I delete the preloader scene, my website works fine again.

The compiler error is:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
  at website_fla::MainTimeline/frame2()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
  at website_fla::MainTimeline/frame2()

I’m not sure what to fix.  Could you please help me out?


Posted by Jens C Brynildsen on 06/10 at 10:53 AM

@billygoatkaraoke Sorry, but it’s impossible to do so without looking at your code. If you were using Flash Builder instead of the Flash IDE, you would be able to find exactly what it is that is missing. It’s simply just that - something mentioned in the Actionscript does not exist or has a different name.

My best guess is that either the preloader MC has not got the same instance name as used in the code , or the code isn’t placed on the main timeline as in the FLA.

Sorry that I can’t help you beyond that :(

J


Posted by billygoatkaraoke on 06/10 at 11:02 AM

No Probs J - slowly debigging it at the moment.

Shaun


Posted by Jens C Brynildsen on 06/11 at 01:03 PM

@user1million and others with the Error #1009/frame2 problem - I now have a solution for you. There’s no need to change anything in the preloader script at all.

It’s a little odd, but this worked on the file I got from Shaun: If you have a script in the first frame after your preloader - just move it one frame forward.

In Shaun’s case, he added event listeners to some buttons on the stage (using addEventListener). For some reason, these were not available to Actionscript until after being on stage for one frame. It’s never been like this in former Flash Player versions, but this solves the problem.

J


Posted by wollywotsit on 07/28 at 05:46 PM

Followed these instructions, replaced meter with my own movie clip, all works fine - no compiler errors and previews in download simulator.  the preload also shows briefly in Dreamweavers browser preview.

But when I upload my files onto my website an dlook at it online it is as if the preloader isnt there at all!  Can’t for the life of me figure out why, would really really really appreciate some help on this - flash is all rather new to me!

Thank you in anticipation!


Posted by shoclabs on 08/20 at 08:54 PM

Excellent tutorial, I have just one question since I’m new to AS3:
I try to load other sections of the website independently and I like to re use the preloader movieclip, how will I have to change the code to load an external swf into an empty movieclip? I used to know how to do it in AS2, but I can’t figure it out in AS3


Posted by rhillo on 09/04 at 04:44 AM

Great preloader!

I did add the snippet of code for IE gotoAndPlay(1, “Scene 1”). This however, has not cured the problem which is that it works great in FF and in Opera, but in Exploder IE 7 or 8 it plays the preloader and displays the background but not the rest of the swf.

Anybody got any ideas?

I can send out the url to see the phenom.


Posted by Jens C Brynildsen on 09/06 at 10:14 AM

@rhillo Please post URL :)


Posted by rhillo on 09/06 at 03:34 PM

Thank you for the reply!!!

It is @ http: //www. witnessinc /sidoti/ index. html
(click on the Ugly’s roadhouse tab)

I am using the tabbed browsing feature of DW.

A.


Posted by Jens C Brynildsen on 09/06 at 11:12 PM

@rhillo Looks like you’ve got some issues here. First of all, make sure you embed your SWF files using SWFObject, not the standard DW code. You can find a brief explanation here:
http://www.flashmagazine.com/tutorials/detail/passing_parameters_to_flash_using_javascript/

Next - look over your FLA to see that there’s no stray stop() commands. It all works for me in IE if I right-click and choose Play, so there’s definitely something wrong in the FLA. Best advice I can give. Sorry…

J


Posted by jdcureton on 11/18 at 01:28 AM

Hi Jens
New to Flash, but working hard to learn. Your tutorial is fantastic and eye-opening.
Thank you very much for taking the time to teach.
Best,
JoshuaD.Cureton


Posted by Random90s on 11/30 at 07:08 PM

Heya Jens!  I was wondering if it’s possible to make the load animation loop?  Could you link me to a guide for that or something?  Would really appreciate it :]

Awesome tut btw!  It’s the only one I’ve ever seen give a run down on a preload and actually get it working, very nicely done.


Posted by Jens C Brynildsen on 11/30 at 10:33 PM

@Random90s Sure? Unless I misunderstand what you’re asking about, all you do is to make a MovieClip with the animation and don’t add a stop() command?

(Have a feeling that I’ve misunderstood something though)

J


Posted by Random90s on 12/01 at 01:55 AM

Thanks for the quick reply.

What I meant was a preloader that shows the loading process with a simple numeric counter like the one mentioned in the comments above, but has an animation playing freely instead of following the download progress.


Posted by Jens C Brynildsen on 12/01 at 10:36 AM

@Random90s Just follow the receipt above to get the numeric counter in the textfield working. After that, just add a standard movieclip with your animation on the same frame.

J


Posted by PassionKiller on 01/28 at 10:34 PM

Hi Jens
I followed your instructions and created a custom preloader. Everything works fine but my movie clip only shows up after 50% has been loaded. Can you please help me?

It’s @ http://www.bluegrasspro.co.za/preloader.fla


Posted by Jens C Brynildsen on 01/29 at 09:43 AM

@PassionKiller While I would love to help everyone with their FLAs, I just can’t. I simply get too many requests like that.

That said - I love to help and this seems to be fixable. Here’s couple things to check:

- Do you use components or other linked assets? These are set to export in frame 1 and will thus load before the preloader displays.

- Do you have big bitmaps in the first frame? These will also have to load before the preloader is displayed. A trick here is to put the preloader on frame 1, the bitmap on frame 2 and then loop from frame 3 to 2 until ready.

A good tip is to always check out what the BandwidthProfiler shows when exporting using CTRL + Enter (Test Movie). If it looks something like this: http://www.flashmagazine.com/articlefiles/BandwidthProfiler.png (a spike in the first frame), you’ll have to check the above two tricks to move the loading of assets to a later frame than frame 1.

I hope this helps!

J


Posted by BeetleThumbs on 04/17 at 08:46 AM

Jens C Brynildsen

This is a great tutorial. Like some posters before me, I had some problems earlier but figured out the problem. Now everything works fine.

But I was wondering if you can tell me why it was a problem.

I put your meter/preloader code in frame 1 of my timeline and then my code in frame 2. The problem was I had an Object on the stage in frame 2 already (it was a scroll bar). With it on the stage I get that error message: “TypeError: Error #1009: Cannot access a property or method of a null object reference”

I isolated the problem with some trace statements and realized that it was that Object on the stage that was the problem…Flash could not understand it.

so I took it out and added it dynamically through my code….whalla!!!! everything worked fine.


Do you know why that is?

p.s.

Thanks for your tutorial. It was well explained.


Posted by Jens C Brynildsen on 04/23 at 06:59 PM

@BeetleThumbs I don’t know exactly what is causing this, but the error will occur if your code tries to access something that isn’t already there.

In your case, the component may well be on stage in frame 2, but in many cases they need a little time before you access them. One frame is usually enough. Samuel Wan (now with Microsoft) once said “when in doubt, wait one frame”. This will allow the component to initialize properly.

In other words - what probably would have worked was to have the preloader in frame 1, the component in frame 2 and then your code in frame 3.

Hope that helps?

J


Posted by jortiz on 07/20 at 04:21 PM

Posting is 7/20/2010
Bad file w/ no Actionscript - DO NOT DOWNLOAD

Also, bad tutorial - INCOMPLETE INSTRUCTIONS

) : = Sadface


Posted by Jens C Brynildsen on 07/29 at 11:32 AM

@jortiz Did you even read the tutorial? If so, you would have found the link to the complete FLA with the required code. Given that this tutorial has been read by more than 80.000 (unique) readers and all the other comments are positive, I’m having a hard time taking your comment seriously.

Plus - what’s with the ALL CAPS? Something wrong with your keyboard? ;-)

J


Posted by AesSedai on 09/13 at 08:32 AM

Hi Jens!

I tried the tutorial and it worked perfectly, but when I changed the internal animation of Meter, it didn’t work anymore :(. Any ideas why?


Posted by Jens C Brynildsen on 09/13 at 08:56 PM

@AesSedai Hard to say, but it would have to do with how the animation is built up. Many things may cause problems such as forgetting to set instance name for the animation. Can’t really help much without anything to go on.

How about using the file that works and then do a “Copy frames” and then a “Paste frames” into the working file?

J


Posted by jortiz on 09/13 at 09:01 PM

@ Jens C Brynildsen
9 days later. I wouldn’t post the comment if I wasn’t serious. 9 days later dude. Seriously? Anyway, I found a better solution. Goodday mate. Keep doubting.

ALL CAPS USUALLY MEANS SOMETHING. YOU CAN FIGURE THAT ONE OUT ON YOUR OWN.

my keyboard is fine

( ;


Posted by AesSedai on 09/14 at 06:11 AM

Nevermind, it actually worked. If you load a blank file it don’t take very long, do it…. Thanks anyway!


Posted by mwvoigt13 on 10/19 at 02:41 PM

Hi, I have a Flash project that is using several components. I have tried doing what you said above:

By default, these assets are exported in Frame 1 of your movie, rendering your preloader rather useless. To fix this, open File -> Publish Settings -> Flash -> Settings and set the frame number under “Export classes in frame” to the frame after your preloader.

I have created a “preloader” scene and put it above my main scene so it will load first. The preloader works, but my Flash project doesn’t display. The screen stays blank.

Any suggestions? I know it’s hard without my file. I can send it to you if you’d be willing to have a look.

Thank you!
Mary


Posted by Newbie Tuesday on 10/22 at 02:25 AM

I’m relatively new to Flash.  I searched all over the web for a good preloader.  I did this tutorial and thought it was excellent.  I customized it with my own graphics and was frustrated that it would stall at the end of the preloader, but before going to the next scene of my animation.  I ended up leaving out the preloader.

Several months have passed since doing the tutorial.  I needed to make edits & update my SWF, so I revisited the preloader I had built using this tutorial. I discovered that the problem was with a button within my FLA.  It had an embedded graphic that caused the SWF file to stall.

I fixed the button and now my SWF works great. (http://www.doanecole.com/portfolio)

So, thank you for the code & great tutorial.

P.S. I encourage others who had stalling issues to check their code and graphics, referring to the frames indicated in your Output/Compiler Errors.


Posted by ajdf on 02/02 at 11:56 AM

I thought this was a great tutorial, well explained.

I got my preloader to work as planned when tested locally, using the simulate download. When I upload to my clients web server however, the swf simply acts as if the preloader is not there - white screen until loaded and then jumps to scene2 which is totally useless!

http://ultimatedriving.net/ultimate-tv/turning-right-into-a-side-road.php#scrollhere

I even put the sample on the page below it so we could see THAT preloading… but it does the same thing (no preload, just jump to scene 2 after being blank until loaded.

Please help!
Thanks


Posted by AnthonyJon on 03/05 at 10:35 PM

Jens,

  Thank you for the outstanding tutorial, It was simple enough to follow and your breakdown of the code was very enlightening.

  I decided to implement a pre-loader due to a fatal crash error within my portfolio mc, on my windows preview everything works seamlessly, however in browser mode the swf stops and when right clicked it it shows that the movie is not loaded.

  I’m sure you have more pressing matters at hand but any insight would prove extremely helpful. Thank you,

AnthonyJon


Posted by Jens C Brynildsen on 04/13 at 12:07 PM

@AnthonyJon sorry that I have not replied until now :(

That kind of problems are usually related to the embedding of the movie, so your problem should be in the HTML page embedding the SWF. I hope you got this solved?


Posted by godoom on 05/14 at 08:43 AM

Thank you for this awesome tutorial!


Posted by bearzero on 09/29 at 06:54 PM

HI ^^ hope u still answering thingys about this nice tutorial.

well worked pretty fine for me in cs5 but the content y have its all loaded from outside of the main web so the kb on the main its very low so the preloader dont have time for even appear just blink and the content its loaded theres any way for make the movie play in the preloader then go to the content? because just simple go to fast any way of play the movie from the loader when the preload its complete and then go to the next frame??


Posted by Plamen on 01/19 at 05:37 AM

Great Tutorial !

From all the tutorials about preloading I’ve tried, only this seemed to work. I have a question though. How can I change the code so that I may use it as a preloader for a external .swf file. Thanks in advance!


Posted by Jens C Brynildsen on 01/20 at 09:06 AM

@Plamen Sure you can. That would involve using a loader and looking at the loaders contentLoaderInfo for the percentage loaded.

Use the AS3 example provided here: http://actionscriptexamples.com/2008/03/03/positioning-a-dynamically-loaded-image-in-actionscript-20-and-actionscript-30-using-the-moviecliploader-class-and-loader-class/

but rather than just listening for Event.COMPLETE, you’ll also listen for http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/ProgressEvent.html on loader.contentLoaderInfo

J


Posted by Plamen on 01/20 at 09:30 PM

Thank you, Jens!!!

It’s a pleasure for a starter like me, to recieve valuable advice from a professional like you (and a friendly person obviously).
As you suggested I used the contentLoaderInfo and the two events mentioned (Progress and Complete) it works just fine. But when the external file is loaded the the movie clip and the percentage counter remain in the background. I used the removeChild method, naming the individually. Is there a way to remove the content more easily?

Submit a comment

Only registered members can comment. Click here to login or here to register