Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 [Tutorial] - Preloader
Index -> Graphics and Design, Web Design -> Flash MX Tutorials
View previous topic Printable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
ftm




PostPosted: Fri Jul 18, 2003 12:37 pm   Post subject: [Tutorial] - Preloader

You may need some basic knowledge about flash and actionscript before you try this, but i assume if you want to make a preloader you probably already know something.

First I suggest (although you dont have to do this) you make your preloader in a different scene. So create a new scene call it preloader/intro whatever make sure the preloader is the first one (obviously).

Now, make a new movieclip, insert -> new symbol, now what i suggest is you create a box (simplest thing). The box's bottom left corner should be at the cross. This is crucial.

Now select the entire outline of the box, double click it, and CUT it. Either paste it directly onto the stage or paste it into another movieclip and pull the movieclip onto the stage.

Next pull the fill movieclip onto the stage and orient it on the outline so it makes sense.

CRUCIAL : now click the box and give it an instance name, it's in the property box thing, it should say <instance name> right under the description of the movie clip.

now here's the scripty part. make another layer and make 3 keyframes and make sure that your layer with box makes frames across these 3 frames.

go to your actionscripter thing and for the frames put this:

for Frame 1:
siteLoaded = (_root.getBytesLoaded()/_root.getBytesTotal())*100; // Gives Variable siteLoaded the percentage loaded
_root.bar._xscale = siteLoaded; // makes the movieclip bar's property _xscale the percent loaded

Frame 2:
if (siteLoaded >= 100){ gotoAndPlay("scene1",1); } // Decides if the site is 100% loaded, then go to another frame

Frame 3:
goToAndPlay (1); // Loops back to first frame

Now hopefully that worked.

here's some explaination of the code so you can muck around and learn:
siteLoaded is just a variable i'm sure you guys caught that
_root refers to the whole movie, it's hard to explain it has to do with how movieclips and things are organized
getBytesLoaded () is a function the returns the number of bytes downloaded
getBytesTotal () is now obvious ihope
_root.bar refers to your movieclip with the instance name bar.
the _xscale is how wide it is by percentage
gotoAndPlay ("scenename",frame); simple enough
gotoAndPlay (frame);

i hope this helps
feel free to ask any questions regarding this tutorial

MOD EDIT : I just changed the title of the topic, added the "[]" Smile - Delta
Sponsor
Sponsor
Sponsor
sponsor
Tony




PostPosted: Fri Jul 18, 2003 4:56 pm   Post subject: (No subject)

so thats how its done... I was always wondering Confused

Ether way, nice tutorial, but you lost me there with the box placement. I sujest attaching some screenshots to make it easier to follow.

+25Bits
Latest from compsci.ca/blog: Tony's programming blog. DWITE - a programming contest.
ftm




PostPosted: Mon Jul 21, 2003 11:49 am   Post subject: (No subject)

sorry i'm at work and i'm forced to use a mac... and i dont know how to take a screenshot

basically because you are using the _xscale thing the relative center... fuck what's it called... basically when you go to insert -> New Symbol you choose movieclip... and you'll se ea little + in the middle ... and actually no matter where you put the box you should see something happen...

play with the position ... but if you want the loader to go from left to right put the box on like this
______________________
| |
| |
__|_ ____________________|
|
|

yeah that's pretty shitty but you see the bottom left corner that's where the + is...
but if you want the box to grow outward in both directions put the cross in the center....

i'm pretty bad at explaining things sorry...
so take the code and play with it ... i'm sure you guys can figure it out... this is flash not openGL ...

EDIT: as you can see the 'pic' came out like ass... hey i got an idea



preloader.jpg
 Description:
 Filesize:  28.86 KB
 Viewed:  4683 Time(s)

preloader.jpg


rizzix




PostPosted: Mon Jul 21, 2003 12:27 pm   Post subject: (No subject)

for some reason i find OpenGL a lot easier than flash Confused Sad
Homer_simpson




PostPosted: Mon Jul 21, 2003 12:37 pm   Post subject: (No subject)

opengl and flash have nothing to do with eachother Confused
ftm




PostPosted: Mon Jul 21, 2003 1:04 pm   Post subject: (No subject)

i know dude, i was just trying to point out that flash is a fuck of a lot easier...

and if you guys are into doing opengl and object oriented programming... i think this little bit about flash is well within your capabilities... know what i mean ? ...
Tony




PostPosted: Mon Jul 21, 2003 2:43 pm   Post subject: (No subject)

LOL, flash and openGL are nowhere near each other Laughing

flash is like a vector drawing program (very compatable with adobe illustrator, I recommed drawing your graphics in that) that has a timeline... and you can move your vectors around to make animations...

openGL is a render engine that takes your numbers and draws triangles for you... And you gotta do lots of math to end up with a nice animation.
Latest from compsci.ca/blog: Tony's programming blog. DWITE - a programming contest.
rizzix




PostPosted: Tue Jul 22, 2003 1:11 am   Post subject: (No subject)

i still don't get flash... ahh Sad maybe cuz i'm not interested in it ? o wel..
krishon




PostPosted: Sun Jul 27, 2003 5:00 pm   Post subject: (No subject)

lol, u should be able to get flash if ur a java wiz.....
Delta




PostPosted: Wed Feb 04, 2004 4:30 pm   Post subject: (No subject)

So rizzix you don't get flash?... but your the flash moderator? this confuses me... well if all goes well then maybe soon I will be too... I hope Wink
Display posts from previous:   
   Index -> Graphics and Design, Web Design -> Flash MX Tutorials
View previous topic Tell A FriendPrintable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 10 Posts ]
Jump to:   


Style:  
Search: