Hello and welcome to our community! Is this your first visit?
Register
Results 1 to 2 of 2
  1. #1
    Veteran Enthusiast LeadingManNigel's Avatar


    Join Date
    May 2005
    Location
    New York City
    Posts
    6,213

    [Mini Tute][AS2]Basic Preloader

    If you are here I am assuming you know what a preloader is.

    [center:cz06qac8]1. Drawing and setting up the preloader[/center:cz06qac8]
    1. Select the rectangle tool(or use shortcut 'R').
    2. Draw your preloader. Here is mine.
    [img]http://**********.com/img/1250521197.png[/img]
    Figure 1A
    3. Select the FILL not the outline of your preloader.
    4. Hit F8 to convert your fill to a symbol and select movie clip. Make sure your registration is set to the middle left.
    [img]http://**********.com/img/1250521384.png[/img]
    5. Your fill is probably over the outlines blocking them slightly, to remedy this just put the fill on a different layer under the outlines.
    [img]http://**********.com/img/1250521644.png[/img]
    Side note: You don't have to name your layers its just good habit to.
    6. Press F9 to open your actions panel and to begin the fun part.





    [center:cz06qac8]2. Coding the Preloader[/center:cz06qac8]
    1. Open a new layer and name it "Actions"
    2. Lock the Actions layer then select the first frame(and should be only frame) of it.
    [img]http://**********.com/img/1250521892.png[/img]
    3. Now lets begin typing our code.
    4. First give your preloader a instance name. You do this by selecting it then opening up its properties panel. While you are in its properties panel be sure to get the width of the bar as it is important to our code. I have ingeniously called mines "loadBar"
    [img]http://**********.com/img/1250522019.png[/img]
    5. Go back to the actions frame and write this in the Actions panel.
    Don't forget to add Stop(); to the very top of all of the code
    Code:
    loadBar.onEnterFrame = function() {
    	//code goes here
    };
    Code Explanation: This tells flash that everytime it goes through a frame(I have my FPS at 26 so thats 26x a second) to execute the code between the curly brackets {}.

    6. Now write this
    Code:
    amLoaded = _root.getBytesLoaded()/_root.getBytesTotal()
    Code Explanation: We are creating a variable that is equal to how much data has loaded divided by how much data there is. This will mean the number will always 1 or less than 1 which is important for a linear increment formula.
    Your code should like this:
    Code:
    loadBar.onEnterFrame = function() {
    	amLoaded = _root.getBytesLoaded()/_root.getBytesTotal()
    	
    };
    7. Now:
    Code:
    this._width = amloaded * YOUR PRELOADERS WIDTH GOES HERE
    My preloaders width is 440 so my code looks like this:
    Code:
    loadBar.onEnterFrame = function() {
    	amLoaded = _root.getBytesLoaded()/_root.getBytesTotal();
    	this._width = amloaded*440;
    };
    Code Explanation: This means the preloaders width will adjust according to how much data is loaded. Its basic math you should know how this works.
    8. Make a play button and give it an instance name. If you don't know how to make a play button don't worry there are a few tutorials here that will show you how.

    9. Now write this in your code
    Code:
    if(_root.getBytesLoaded() == _root.getBytesTotal()){
    		YOUR PLAY BUTTON INSTNACE NAME._visible = true
    	}else{
    		YOUR PLAY BUTTON INSTNACE NAME._visible = false
    	}
    Code Explanation: A bit heftier than our previous code but its still very simple. This means that if the movie is loaded make your play button visible if it's not then your play button stays invisble.
    The final code is here:
    Code:
    Stop();
    loadBar.onEnterFrame = function() {
    	amLoaded = _root.getBytesLoaded()/_root.getBytesTotal();
    	this._width = amloaded*440;
    	if(_root.getBytesLoaded() == _root.getBytesTotal()){
    		playbtn._visible = true
    	}else{
    		playbtn._visible = false
    	}
    };
    I hope you have learned something from this, if not why did you read it? o.o
    Report any errors or ask for help here. I or another member who knows what they are doing will reply ASAP. I also do some help via PM.
    Next Tutorial: A basic space ship game.

  2. #2
    Fanatic Enthusiast Trendy's Avatar

    Join Date
    Mar 2009
    Location
    Sunagakure
    Posts
    3,304

    Re: [Mini Tute]Basic Preloader

    omg thanks so much, ive been trying to learn to make one.
    Anonninja -> Zelda -> Kiwi bitch beach -> Hardcore Kid -> Trendy


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •