Flash Essential

Simple AS3 Preloader Tutorial

May 2nd 2008
16 Comments
respond
trackback

Preloaders are a big part of flash sites, just look around the internet today at some flash sites and you'll see some really creative ideas. Although I am surprised some of these creative preloaders don't need a preloader to load themselves as their is so much animation going on! Not that I am complaining, I think they are excellent and really enhance the flash experience.

Not so creative In this Preloader unfortunately but good enough to get the job done I think. So in this tutorial I'll show you how to create a very basic preloader using Flash CS3 and Actionscript 3. So lets open up flash and get started!

Step 1

Start by creating 3 new layers on your timeline and call them Actions, Loader and Stage. Insert a Keyframe on the second frame of the Actions and Stage layers. Now select the Loader Layer and insert a Frame, your timeline should now look like this;

Step 1 preloader

Step 2

Select the First Frame of the loader layer and select the Rectangle Tool. Set the Fill Color to #FFFFFF and the Stroke Color to #CCCCCC. Now hold down shift and draw a small rectangle on the stage.

Step 2 preloader examlple

Step 3

Highlight the Rectangle you have just created, Select the Selection Tool (V) and Right Click the center of the rectangle and select Copy. Now right click away from the rectangle and select Paste, repeat this another 3 times. You now should have 5 rectangles on the stage, align them on your stage so that they look like this;

Step 3 preloader examlple

Step 4

Now Highlight all of the rectangles and Right Click and select Convert To Symbol, give it the name Loader_mc and make sure Movie Clip is selected and press Ok.

Step 4 preloader examlple

Step 5

Your rectangles should now have a Blue Border around it, indicating that its now a Movie Clip. Scroll down to the Properties Panel at the bottom and give it the instance name loaderAnimation.

Step 5 preloader examlple

Step 6

Now we are going to create the pre-loader animation, to do this first Double Click on the movie clip you have just created. We now should be inside the loader_mc Movie Clip with a brand new timeline. Go to Frame 25 Right Click and select Insert Keyframe. Now go onto the Stage and click off the Stage on the Grey Area then click the Center of the First Rectangle and change the Color Fill to #0099FF. Select the First Frame of the layer and hold down Shift and select Frame 25, highlighting all the layers. Right Click and select Create Motion Tween, finally Press Enter to test that and the Rectangle should fade from white to blue.

Step 6 preloader example

Step 7

Go to Frame 50 and Insert a Keyframe, now click off the stage in the Grey Area and select the Second Rectangle and change the Color Fill to #0099FF. Repeat this step for all the Rectangles Inserting a Keyframe every 25 Frames. Press Enter to test it and all the rectangles should fade in one after the other.

Step 7 preloader examlple

Step 8

Click the Light Blue Arrow below the Layers Panel to go back to our main timeline. Now click on the First Frame of the Actions layer and Press F9 to open up the Actions Panel. Copy and paste this code below.

addEventListener(Event.ENTER_FRAME, loading);
function loading(event:Event) {
trace("loader Working");
var bytestotal = stage.loaderInfo.bytesTotal;
var bytesloaded = stage.loaderInfo.bytesLoaded;
var rectangle = Math.round(bytesloaded*100/bytestotal);
loaderAnimation.gotoAndPlay(rectangle);
if (bytesloaded >= bytestotal) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, loading);
removeChild(loaderAnimation);
}
}

Step 9

Go to the Second Frame of the Actions Layer Press F9 and add this line of code;

stop();

Step 10

Now go to the Stage Layer and select the Second Frame and add your content, in this case I've added a picture.

Conclusion

This is a very basic preloader but hopefully it's given you a platform to go on and create more complex. I'll be adding more complex preloaders in future posts but I thought id start with a very basic one.

Download the completed file.


This post is tagged , , , ,



Sponsors

Explore Recent





Monthly Archives



Friends and Affiliates



16 Comments

  1. doesnt work

    The class or interface 'Event' could not be loaded.

  2. doesnt work!

    so simple that - but i cant do it :P

  3. I am already using some code very similar to this.

    My question for you is this:
    Preloader in this fashion will not actually display until all items in the library for the file have been loading. This can often mean your preloader does not appear until 30% or more has been loaded of your actual file.

    How do you get the pre-loader to appear before anything else?

    I thought about having a graphic copy of the preloader on frame1 then shifting everything forward 1 frame?

  4. pnguyen

    there's a mistake…
    Step 6
    instead of create motion twean, it should be create shape twean, as those are shapes.. tsk tsk, this will throw people off.

  5. I'm confused where's the actionscript?

  6. I have a more complex animation as preloader and I want it to run it's full animation even if everything is preloaded.

    Any help on how I can make it play through the preloader, then go to frame 2 even if all bytes are loaded?

  7. where is addChild() ???
    This script is removing child but what child?

  8. first tutorial that worked, thanks!

    special thanks to pnguyen for the correction to the tut.

  9. Hi guys,

    Here's a solution to the preloader problem that I found that works.

    Adjust your code to the following on the first frame:

    stop();

    this.addEventListener(Event.ENTER_FRAME, loading);

    function loading(evt:Event){
    trace("loader Working");
    var bytestotal = stage.loaderInfo.bytesTotal;
    var bytesloaded = stage.loaderInfo.bytesLoaded;
    var rectangle = Math.round(bytesloaded*100/bytestotal);
    loaderAnimation.gotoAndPlay(rectangle);
    if (bytesloaded >= bytestotal) {
    gotoAndStop(2);
    removeEventListener(Event.ENTER_FRAME, loading);
    }
    }

  10. Found another way. If you want to use the add/remove child method, what you need to do is right click onto the loader_mc movieclip and go to >Linkage. Once there export for Actionscript. Then you can delete the loaderAnimation instance off the stage and add the following script to frame 1 instead of the script provided in this tutorial:

    stop();

    var preloader:MovieClip = new loader_mc();
    addChild(preloader);

    this.addEventListener(Event.ENTER_FRAME, loading);

    function loading(evt:Event){
    var bytestotal = stage.loaderInfo.bytesTotal;
    var bytesloaded = stage.loaderInfo.bytesLoaded;
    var rectangle = Math.round(bytesloaded*100/bytestotal);
    preloader.gotoAndPlay(rectangle);
    if (bytesloaded >= bytestotal) {
    gotoAndStop(2);
    removeEventListener(Event.ENTER_FRAME, loading);
    removeChild(preloader);
    }
    }

    If you want to position your loader_mc so that it is aligned to the middle of the stage, add this underneath your addChild(preloader); :

    preloader.x = preloader.stage.stageWidth / 2 - preloader.width / 2;
    preloader.y = preloader.stage.stageHeight / 2 - preloader.height / 2;

Leave a Reply

auto battery discharge cold
blake holman sioux falls sd
ameican pitbull terrier
character story elements powerpoints
construct a wheelchair ramp
paralysis.org
bangladesh orphanages
2000 lb bomb
kristi rowley
concrete acid etching supplies
bossier city la real estate
bedford indiana job openings
cordura bags 2008 hayabusa
hana kimi direct downloads
07 tahoe lug pattern
stroke-jobs.com
2008 satilite map
arctic zone lunch bag
04 g35 body kit vader 3
blackpool town fc
reserved sugar
animal control in evansville
1927 roadster
myspacelayouts.net
cast costumes for hello dolly
art for the heart fundraising
treesforyou.org
agape gaddis
1080p 24 lcd monitor
etymotic.com
article about dpms lr 308
27713 nc zip code
boo creepy foot doctor
convicted offenders listed in british columbia
daybed covers toile
job predict
butas sa pinto silipan
0 andreas test residence
foxpro serial port fll
dr natura and oldest man
2000 mercury sable too lean
frozen liquid longest
2003 exotic spices calendar
1 bedroom suite orlando
1 2 inch vinyl micro blinds
colleges that teach veterinarian toxicology
dieter klimm germany
3 cm dialated
captain william fowler
mmahq.com
1st lady on my
ancient mayan popol vuh
pinky and the brain avatar
claire pruitt doll patterns
xbux.com
av 2009 virus blocking malware bytes
2002 mountain aire 4097 floorplan
emeritus restraint policy
arizona diamond backs fan club
ftd florists oneida ny
courier service pretoria rundu luanda
insane clown posse downloads
bello pr-25 review
4 bedroom rental in yorba linda
5 estacion flores de alquiler video
americus vespucius
ati modified driver vista 32
adoption paralegal in toronto
dish pvr 501 mod
1800 daniel brothers in tn
irony.com
dominant bodybuilding females
custody911.com
adm buyout
alex moulton mark 1
hughesspeednet.com
byron hinton
shoehunting.com
experiment on rl circuit
1296 mhz power amplifier circuits
7th level of hell survey
constitutional class
anemia and skin itch
goofy gold download
webshapes.org
car jacks 3.5 ton costco
neopostinc.com
brookfield athletic shoe company inc
cause transaction lagging bank reconciliation
fire at mann gulch
ambridge duck hunting
application coding wikipedia
12 1 2 womens cowboy boot
cci cb short
before the hammer strikes the nail
interpretation of low oxygen saturation
autosearch.com
outrigger condos
carl erickson pole vault camps
matchmaker pittsburgh pa
cheats gba pokemon emerald
and eminem forgot about dre
howtomaketime.com
andorra property
1939 indian scout timing specs
diet plans for chronic indigestion
applied kinesiology for hiatal hernia
read socrates in love online free
nutone-home.com
air europa seating arrangements
8 configuration sacral fracture
assfucked to tears
alto sax 575 allegro
geological features in the appalachians
bill clinton comment obama
addicting games territory war
irc mythos cx slick 700x42c
msn messenger signup
kissed his feet bet
apache2 debian etch amd64
bnvillage.co.uk
do horses have treat preferences
10mb network
cantv.net
noel chance racehorse winners at warrick
cmu waterproofing techniques
brenda adams bebo
1967 ford shelby mustang pics
charlotte witt
13th century mens clothing france
embassyhomepage.com
blood draining out nasal passages
sprinklerfitters669.org
stephan a rhodes
cemeteries in holyoke ma
gallstone purge
emma tryon
amboy washington mptels
branson ultra sonic cleaner
anti-tank obstacle
chris mcgee
auto dealers mit
belle meade united methodist
hotel regent paris
smdailyjournal.com
1995 ford f150 sputters on acceleration
dan sommer in omaha nebraska
academy of our lady chicago il
accrual method 12 month membership
1941 luger manufacturing plants
curry mussels
construction-business-forms.com
gym clothing catalogues in south africa
american portrait painter a jacobsen
hotels in patagonia
but seriously folks joe walsh
address of lima polo club
william butler yeats home address
another instance of voice platform genesys
bonney m stille nacht
former french canadian provinces
creole echoes excerpt
seekingxxx.net
gods goddesses
100 reason stop smoking
all-about-style.com
andre d sparks
map of the westward expansion
examples of meta search engines
aluminum sliding glass door lock
brattleboro vermont nakedness
2008 norton update problems
betty joyce harrison
panasonic.net
7th grade science dothan al
clearwatertribune.com
age of consent in nc
nineteenth century cultural stereotypes
smt contract manufacturing at elgin il
20mn.com
avian immune
arresting or reversing foot neuropathy
citalopram actavis pirist v l ke
netinfo.bg
1929 cadillac imperial
mikesradioworld.com
anatomical mold
12 days of christmas gift ideas
asx-200bx lan
gaydadsandyoungersons.com
isabella fiore let love reign purse
allow interactive logon to workstations
computer sent received meter
amicroe ready boost usb drive
augustinespiritualgoods.com
basilica di bologna
cj fitzgerald
chicks in sturgis
buenos aires art supplies
password protect folder sme server
australia port fairy accomodation
chantal hensley
ariston dishwasher
2009 liturgical year
soundproofwindows.com
absent cells on pap
gold rush miners in california 1852
content for newsletters
academy countdown leader
craaigslist.com
air race reno 2007
pdfsoftwarecenter.com
desert crepes
battlefield 1942 home page
assignments on employee made by organisations
a taste of thai instant meals
custom stainless products etobicoke ontario
a w d hammond ltd website
frcp exemptions
albums released in 1989
2wire router problem wii
amanda marie gould
greek writing utensils
child abuse coppell texas
snappysoftware.com
jillian barberi
keeler hydraulics
install fedora on mac powerbook g4
exoticagirls.com
cakewalk music creator crossfader
cats beta carotene treat tylenol toxicity
norterrashopping.com
american culinary wagner ware wholesale
belinda jensen autobiography
ben hogan golf tips
concave and convex
antelope complex fires in the west
alan dresner and natalie
bluetooth setting cingular t616
adolf hitlars childhood
endorsement for your friend
artificial intelligence checkers
albright on ot phoenicians
label stuck in tde laminator
aimpoint style reflex sight
brook skye video
contemporary perspectives in writing
acmediy.com
franconia sami fakhouri
custom shower curtains with longer lengths
sacramentorealestatevoice.com
express scribe dss problems
air travel carry on rules
abraham lincoln association
bilingual baptist minister indianapolis in
atomic absorption spectrometry free book welz
bacon club t-shirt at journeys
1700 hemlock oxnard
a little pain tabs nana
40th birthday rhymes
ahadees.com
brookside equestrian centre kitchener
adanal roofing langley bc
h clinton supporters
burning crusade
1760 59th avenue sacramento ca 95822
atkins beach diet south vs
bible xml
elder david pennington
1903 legare circular sock machine
asparagus baked wine
1911 22 rimfire conversions
191 2nd avenue cochrane ontario
agatha christie novels online
american pledge
bellcad.org
circut city rebates
crater lake green outcropping
condos townhouses new bern nc
download stairway to heaven
bed robe
adobe epic app cannot be launched
11x17 4c process preliminary poster examples
daytime emmy award talk show
burley samba
char-broil rotisserie
adoro las es liebe sein
homosexuality umass amherst
100 cc suzuki sv
birch carrol cinema townsville
1973 firebird radiator support
sandia memory gardens
probeindustries.com
fumani dialect
nacelink.com
avalon title ltd mclean virginia
farwestfamilyservices.com
antwerp cut diamonds
dino van eeckhaut cairo appointed sofitel
dosha.org
2008 sport touring
bleeding doge truck breaks
johnnycrosslin.com
24071 desert drive florence az 85232
bioclusive overlay
areas effected in 2007-2012
geography hottest part of the world
aikenregional.com
antarctic centre new zealand shop
coupons for amazon purchases
add affiliate link program
alicia keys samsonite man
saltlaketribune.com
accessory lady
aboutlilacs.com
banner insurance rockville md
elvi fashion stockists uk
federal govt
nalco.com
ankle fracture lower extremity
beloved sisters mc
alisha lanier
cindy ziegler re max of wasilla
32 degrees mesa watch
beat the clickbank competitors
audi a4 fuse changing
adjusting bernina 1001 bobbin tension
australian olympics bike riders
cheap las vagas limos
pulmicortrespules.com
1611 bosch power tool parts breakdown
12 ci engine hp
articles about human resource managment
cal state university pomona anthropology
buses into motorhomes
international tae kwan do karate federation
ana and muscle antibody
dav pilkey biogrpahy
12 week old boxer puppy photos
5 interesting facts about scallops
darnell crisconi
foxfire banjo
4gazebos.com
research terrestrial orchids
cloudster.com
allergic reaction to dust
hickoryortho.com
lexis nexus herb
milky cat torrent
comprehensive-kidney-facts.com
b strep symptoms
07 ford mustang gt
waterfrontbluesfest.com
antique wardrobe trunk pricing
banana fana fo fana
856 edi invoice