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][AS3] Preloader/Dynamic Bars

    [center:teub2c83]As3 Preloader[/center:teub2c83]

    1. Create a new AS3 Document
    [img]http://**********.com/img/1257109492.png[/img]
    2. Open your actions panel(ShortCut F9)
    3. Make sure you don't have anything selected, code can only go on Frames in AS3
    4. In your actions panel type
    Code:
    stop(); // This stops flash from going to the next frame
    5. Now create a new function and name it whatever you want, I am naming mines loadStage.
    6. In the paranthesis make sure you set the function to respond to Event, Event Types.
    Code:
    stop();
    function loadStage(e:Event){
    	
    }
    6a. You don't have to use e:Event you can also use something like evt:Event or event:Event. I just use e:Event because I am lazy.
    7. Next put this in your function
    Code:
     var total:Number = stage.loaderInfo.bytesTotal;
    	  var loaded:Number = stage.loaderInfo.bytesLoaded;
    	  var percentage:Number = loaded/total;
    7a.
    Code:
    var total:Number = stage.loaderInfo.bytesTotal;
    This gets the total amount of data in our movie and puts it into a variable
    7b.
    Code:
    var loaded:Number = stage.loaderInfo.bytesLoaded;
    This gets how much data has loaded so far
    7c.
    Code:
    var percentage:Number = loaded/total;
    This divides loaded by total which will give us a number <1. It then can be converted into a percentage for text or used as is for a bar.
    8. Now create a movieclip to be used for a loading bar.
    8a. Make sure you set the movieclips registration to the middle left or your preloader will look strange.
    [img]http://**********.com/img/1257109509.png[/img]
    9. Give your preloader a instance name. I named mines loadbar.
    [img]http://**********.com/img/1257109524.png[/img]
    10. Add this to your function:
    Code:
    loadBar.scaleX = percentage;
    10a. This will asjust the horizontal scale of our preloader. In AS3 xScale is 0-1 so this means we don't have to divide or multiply anything!
    11. Create a dynamic text box and give it an instance name. I named mines loadtext.
    [img]http://**********.com/img/1257109536.png[/img]
    12. Add this to your function
    Code:
    loadText.text = (percentage * 100).toString() + "%"
    12a. This line will set our text box to percentage times 100 because percentage is <1 and we want numbers 0-100. .toString() converts that number into a string so the text box will recognize it. The last bit just adds a percentage sign.
    13. Now lets put in our event listener and we are done! This line goes out of your function
    Code:
    addEventListener(Event.ENTER_FRAME, loadStage);
    13a. That adds an event listener to the stage. The event type is Event so our function must be set to that type which is why we have that e:Event bit. The last part is just the name of our function which means every time flash enters a new frame(I am using 30FPS) our function will be called.
    14. Your actions panel should look like this:
    Code:
    stop();
    addEventListener(Event.ENTER_FRAME, loadStage);
    function loadStage(e:Event){
    	var total:Number = stage.loaderInfo.bytesTotal;
    	var loaded:Number = stage.loaderInfo.bytesLoaded;
    	var percentage:Number = loaded/total;
    	loadBar.scaleX = percentage;
    	loadText.text = (percentage * 100).toString() + "%"
    }
    14.a Some bit of code I forgot to add to the loadStage function:
    Code:
    if(percentage == 1){
    	removeEventListener(Event.ENTER_FRAME, loadStage);
    	nextFrame();
    	}
    14.b This bit removes the listener once the movie has loaded, then it goes to the next frame.
    Final Final Code:
    Code:
    stop();
    addEventListener(Event.ENTER_FRAME, loadStage);
    function loadStage(e:Event){
       var total:Number = stage.loaderInfo.bytesTotal;
       var loaded:Number = stage.loaderInfo.bytesLoaded;
       var percentage:Number = loaded/total;
       loadBar.scaleX = percentage;
       loadText.text = (percentage * 100).toString() + "%"
       if(percentage == 1){
    	removeEventListener(Event.ENTER_FRAME, loadStage);
    	nextFrame();
    	}
    }
    15. If you wanted something like a HP/MP bar its pretty much the same. Instead of total and loaded, you could have currentHP and maxHP. Then just set the hp bar's scaleX to currentHP / maxHP. Its that easy.

    [center:teub2c83]Closing Notes[/center:teub2c83]
    If you see any errors or have any questions feel free to pm me or post here. If you want to request a tutorial post here and I will see if I can make that happen. :3

  2. #2
    Enthusiast Darksider's Avatar

    Join Date
    Jun 2009
    Location
    Lithuania
    Posts
    1,337

    Re: [Mini Tute][AS3] Preloader/Dynamic Bars

    Finaly the first tutorial about preloaders that i can understand very nice this will help alot of people


 

Posting Permissions

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