dzygners' forums
You have never visited, or are not logged in.
Not logged in [Login - Register]

Printable Version | Send to Friend
Subscribe | Add to Favorites
Author Subject: [ tutorial ] [ 5 || MX ] Smooth PreLoader
jimdrake
flash guru






385 Posts
Location . Bristol, UK
Status: Offline

posted on 6.12.2002 at 16:46 Reply With Quote
[ tutorial ] [ 5 || MX ] Smooth PreLoader

Download
preloader.fla (version MX)
preloader2.fla (version 5)

Intro
This tutorial will show you how to make a smooth preloader for your site. This method does away with the old "ifFrameLoaded" method which led to jerky preloaders such as this one:
preloader2.swf
After you have finished this tutorial you will end up with something like this:
preloader.swf

Note
This tutorial is aimed at users with Flash MX but the ActionScript is identical for Flash 5 . If you wish to acheive this effect in a lower version of Flash it is likely that a lot of re-writing of the script will be necessary, and it may not even be possible. Descriptions of the user-interface within this tutorial are for Flash MX only.

Step by Step
  1. Open Flash and start a new project with dimension of 350 X 350, set the frame rate at whatever you want, I usually use 30 fps, set the background colour as whatever you like, I used white for this example.

  2. Name the top layer 'Actions' and make two keyframes on frames 1 and 2. Open the 'Actions' window (Window -> Actions) and select frame 1 in layer 'Actions'. Put the following code into the 'Actions' window:
    stop();
    Do the same for frame 2.

  3. Insert a new layer and name it 'Image', add two keyframes on frames 1 and 2. Import a photo into frame 2, keeping frame 1 empty. This is just to give the preloader some size to work on.

    It should now look something like this:


  4. Insert a new layer and name it 'PreLoader', and add one keyframe to frame 1, don't put anything in frame 2. In frame 1 use the text tool to write 'Loading:'.

  5. Select this text box with the arrow tool and open the 'Properties' window (Window -> Properties). Make sure the top-left drop-down box says 'Static Text' and then change any other setting to how you like it.

  6. Select this text box with the arrow tool and go to Insert -> Convert to Symbol... Chose 'Behaviour: Movie Clip' and add the name 'PreLoader'. Hit 'OK'.

  7. Double-Click on your new 'PreLoader' movie clip. Name the one layer that is already there 'Static Text' and make three new layers, call them 'Actions', 'Percentage Text' and 'LoadBar'.

  8. Open the 'Actions' window (Window -> Actions) and select frame 1 in layer 'Actions'. Put the following code into the 'Actions' window:
    stop();

  9. On frame 1 of the 'Percentage Text' layer use the Text Tool and drag a text box so it is next to the 'Loading:' text box you already have. Open the 'Properties' window (Window -> Properties), and make sure the top-left drop-down box says 'Dynamic Text'. To the right of the 'Properties' window there is a box labeled 'Var:', give it a value of 'percentage'. Next to that box there is a button labelled 'Character..', click it and then make the following settings. Out of the three options choose 'Only', then check the box that says 'Numerals (0-9)'. In the box at the bottom labelled 'And these characters:' input a value of '%'. Hit 'Done'.

  10. On frame 1 of the 'LoadBar' layer use the Rectangle Tool and draw a small square below the 'Loading:' text box. Select the arrow tool and position your mouse at the very edge of the square and double click. You should have now selected only the border of the square, not the whole thing. Hit 'Delete' on your keyboard.

  11. Select the square and open the 'Info' window (Window -> Info). In the box labelled 'W:' input a value of 1, and in the box labelled 'H:', make it a value of 10. Make sure the values in the 'X:' and 'Y:' boxes end in .0, ie, if you have 34.5 and 23.8, make the values 34 and 24.

  12. Select the small rectange you have now and go to Insert -> Convert to Symbol. Chose 'Behaviour: Movie Clip' and add the name 'LoadBar'. Hit 'OK'.

  13. Open the 'Properties' window (Window -> Properties), and give the box that says '<Instance Name>' a value of 'loadBar'.

    It should now look something like this:


  14. Exit editing the PreLoader movie clip by double-clicking anywhere on the grey area around the movie, or clicking on the text 'Scene 1', this is just below the list of all the layers in the 'Timeline' window. You should now be back to editing the main timeline.

  15. Open the 'Actions' window (Window -> Actions) and select the 'Preloader' movie clip you have made. Put the following code into the 'Actions' window:
    onClipEvent (enterFrame) {
    loading = _parent.getBytesLoaded();
    total = _parent.getBytesTotal();
    percent -= (percent-((loading/total)*100))*.25;
    per = int(percent);
    percentage = per+"%";
    loadBar._width = per;
    if (percent>99) {
    _parent.gotoAndStop(2);
    }
    }

How does this ActionScript work?
  1. onClipEvent (enterFrame) {
    This had strange wording for what it actually does. By the look of it it runs each time the movie clip enters a frame, but in fact the effect it actually has it just constantly running the code within it. Just like a loop, but indefinitely.

  2. loading = _parent.getBytesLoaded();
    This gets the amout of bytes of the .swf file that have loaded and assigns it to a variable named 'loading'.

  3. total = _parent.getBytesTotal();
    This gets the total size of the .swf file and assigns it to a variable named 'total'.

  4. percent -= (percent-((loading/total)*100))*.25;
    Now, this is where the magic happens. You don't really need to understand the script, but what it effectivly does is add a 'lag' to the progress of the loading. For example, when he percent of the .swf file loaded goes from 10% to 30%, the old style of preloader would do the same, the loading bar would jump straight from 10% to 30%. This is what we want to get rid of with our preloader. This line of the script makes the loading bar smoothly move up from 10% to 30%, instead of jumping straight up.

  5. per = int(percent);
    This takes the percent of the .swf file loaded and changes it to an integer for display in our text box. We don't want our preloader displaying something like 34.8484847449% do we?

  6. percentage = per+"%";
    Remember the text box we gave a variable of 'percentage'? This line of script writes the percentage loaded to that text box, and adds a 'percent' sign on the end.

  7. loadBar._width = per;
    Remember the small rectange we named 'loadBar'? This line of script increases the width to the percent of the .swf file loaded. So, when the percent loaded is 34%, the loading bar will be 34 pixels wide.

  8. if (percent>99) {
    This says 'if the percent of the .swf file loaded is greater than 99% (ie. 100%) perform the following action'.

  9. _parent.gotoAndStop(2);
    This is the action for the previous 'if' statement to execute. It moves the main timeline to frame 2, the frame containing your picture.

  10. }
    Closes the 'if' statement.

  11. }
    Closes the 'onClipEvent' function.


I'm stuck, how do I use this on my site?
Of course you won't use this EXACT preloader on your site. The purpose of this tutorial is so you can learn by example. If you have followed this through you should have an idea of which bits you can change to suite your site, and which bits you have to keep. But, if you're still stuck, help is at hand.

Within your preloader movie clip there are three things, your static 'Loading:' text box, your dynamic text box for the percentage value and the 'LoadBar' movie clip. Both text boxes can be customised to fit your site and additional graphics and such can be added. Make sure that the box you intend for the percentage to show up keeps it's 'percentage' variable intact.

Next is the LoadBar. I think the easiest way to do this is to position in and resize it (using the 'Info' window) as you want it to be when the movie has loaded 100%. When you have done that write down the current width of it, and then reduce the width to 1. When you exit back to the main timeline, select the 'preLoader' movie clip to edit it's actions. What you need to change is this line here:
loadBar._width = per;
Take the number you previously wrote down, and divide it by 100 (if it was 100 you don't need to do anything). So if your number was 134, you should now have a value of 1.34. Now change that line of code to this:
loadBar._width = per*1.34;
Obviously you will substitue your own values depending on your design.

That's about it. One other thing you may want to be aware of is this line:
_parent.gotoAndStop(2);
This is the action that the preloader performs when the .swf file has finished loading. You should make the beginning of your movie start on frame 2.

Credits
Thanks go to Craig Kroeger at miniml.com and JD Hooge at gridplane.com for help with the ActionScript in this preloader.

[Edited on 4/5/2003 by jimdrake]





View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U jimdrake
whatisthematrix
Moderator






2337 Posts
Location . Sweden
Status: Offline

posted on 6.20.2002 at 19:00 Reply With Quote
Really cool i think I will use it for my site!
Which program did you use Dreamwever MX?




I'm whatever I want, you can like it or love it // [loading]
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U whatisthematrix
Dan
Member






221 Posts
Location . Sheffield, UK
Status: Offline

posted on 6.20.2002 at 21:58 Reply With Quote
Nice tutorial? Fancy doing one for Director - its driving me nuts. Should be easy but mine keeps screwing up.


......actually, maybe I should look for some Director tutorials

View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Dan
jimdrake
flash guru






385 Posts
Location . Bristol, UK
Status: Offline

posted on 6.20.2002 at 22:53 Reply With Quote
quote:
Which program did you use Dreamwever MX?


what??? this tutorial is for flash. i have never used dreamweaver, but isn't that an html editor? you'd be damn clever to make a flash site using only html

quote:
Fancy doing one for Director


i've never used director, thats the one that uses shockwave plug in right? i'm not sure, but isn't it quite similar to flash, just a lot more powerful?

if director uses actionscript as well as flash then i don't see why you couldn't apply this preloader to director aswell.





View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U jimdrake
whatisthematrix
Moderator






2337 Posts
Location . Sweden
Status: Offline

posted on 6.21.2002 at 16:25 Reply With Quote
is the name of the program only FLASH?




I'm whatever I want, you can like it or love it // [loading]
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U whatisthematrix
hzr
Moderator






1701 Posts
Location . localhost
Status: Offline

posted on 6.21.2002 at 16:28 Reply With Quote
Macromedia Flash [version], but I know almost nothing about flash, would be cool to learn.




hzr
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U hzr
whatisthematrix
Moderator






2337 Posts
Location . Sweden
Status: Offline

posted on 6.21.2002 at 16:30 Reply With Quote
tes...I think i will try to lern a bit....maybe....need more time




I'm whatever I want, you can like it or love it // [loading]
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U whatisthematrix
jimdrake
flash guru






385 Posts
Location . Bristol, UK
Status: Offline

posted on 6.21.2002 at 16:47 Reply With Quote
Flash is a program by Macromedia.

go here: http://www.macromedia.com/software/flash/





View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U jimdrake
whatisthematrix
Moderator






2337 Posts
Location . Sweden
Status: Offline

posted on 6.22.2002 at 07:25 Reply With Quote
OK..thanks.

My friend will download it too me..




I'm whatever I want, you can like it or love it // [loading]
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U whatisthematrix
rem_sr
Senior Member






481 Posts
Location . Sweden
Status: Offline

posted on 6.22.2002 at 13:50 Reply With Quote
kewl script...

I've never tested to work with flash before, does anyone have some tutorial links for flash and the program Flash MX (or lower version..)






s a m [ u e l ]
Dissatisfaction is the mother of development

View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U rem_sr
jimdrake
flash guru






385 Posts
Location . Bristol, UK
Status: Offline

posted on 6.23.2002 at 10:15 Reply With Quote
http://www.ultrashock.com
http://www.actionscripts.org





View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U jimdrake
anders
Administrator






2013 Posts
Location . Taipei
Status: Offline

posted on 6.23.2002 at 14:08 Reply With Quote
another great resource...probably the dhtmlcentral of flash community..
http://www.flashkit.com

also, try jooli's portal site for flash related links... pure hybrid




"Life is not measured by the number of breaths we take, but the moments that take our breath away."
View User's Profile Visit User's Homepage View All Posts By User U2U anders
rem_sr
Senior Member






481 Posts
Location . Sweden
Status: Offline

posted on 6.24.2002 at 11:51 Reply With Quote
ahhh... thx for the provided links guys... I know what I'll be doing the rest of this summer...

well, perhaps not quite all the time after all... gotta get some rest underneath the sun too, right??




s a m [ u e l ]
Dissatisfaction is the mother of development

View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U rem_sr
Janny
Moderator






776 Posts
Location . Belfast - Ireland
Status: Offline

posted on 7.13.2002 at 10:32 Reply With Quote
quote:
Originally posted by whatisthematrix
is the name of the program only FLASH?


STUMPED LOL DAM




= Nothing Worth Saying =
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Janny
The_Lobster
Member






132 Posts
Location . Oslo, Norway
Status: Offline

posted on 8.14.2002 at 17:21 Reply With Quote
You forgot Were Here!

http://www.were-here.com/forums
(huge community... also features Photoshop battles, lots of fun! (though I cheat using Corel Photo Paint (not that It's making my pics any better.. lol))

Joachim

(yes, Director Shockwave Studio may look quite like Flash, but it features more advanced actionscript, better support for 3d graphics, and better support for talking to outside scripts.
)

View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U The_Lobster
Alan
Junior Member






89 Posts
Location . Notts, England
Status: Offline

posted on 8.15.2002 at 08:59 Reply With Quote
quote:
Originally posted by The_Lobster
http://www.were-here.com/forums


Top link


View User's Profile View All Posts By User U2U Alan
Prim
Junior Member






2 Posts
Status: Offline

posted on 8.5.2003 at 01:44 Reply With Quote

In your preloader, the loadbar would fill along the width. I wanted it to fill in height, from bottom to top. The fill was easy, but how to make it grow in only one direction?


View User's Profile View All Posts By User U2U Prim
rene
Member






177 Posts
Location . The netherlands
Status: Offline

posted on 8.5.2003 at 08:19 Reply With Quote

Try to change width into height in step 7.




René

View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U rene
Prim
Junior Member






2 Posts
Status: Offline

posted on 8.5.2003 at 23:45 Reply With Quote
That was the part I was able to do, I wanted to know how to make it "grow" in only one direction. But I played a bit with masks and other things and it came up really cool.

This was the first time I made a preloader!! Weeee

View User's Profile View All Posts By User U2U Prim

© 2002 - 2005 dzygn.com
Powered by XMB v1.5 Beta :: Blue Moon
Processed in 0.2862110 seconds, 46 queries