Website Designers and Webmasters

As many young website designers do, when I first got started working with HTML and CSS, I tired to stay as far away from Unordered Lists (<ul>) and Ordered Lists (<ol>). Everyone has their own reasons, but I just thought there was too much to learn about it before I could get it to do what I want.

When you have a list of items, links, etc., it should be in a list

I found this amazing article about lists on AListApart.com: Taming Lists

(Lists are also what you would use to create a pop-up menu only using CSS.)

-Ashton Sanders

Their is magic in Cascading Style Sheets. (Some properties more than others, but still magic.) Float is one of those CSS properties that really fundamental for any developer trying to create layouts without any tables.

CSS – Float

There are three possible values for float: right, left and none. They are pretty self-explanatory, but here goes anyway:

Lets say you have a div that is 200px wide and 30px tall. Normally any content that comes after it would start at the bottom (30px bellow the top of the div.):

Here is the content that comes after the div.

Here is the content that comes after the div.

Here is the content that comes after the div.

-CSS Everywhere!
-Ashton Sanders

Who is a ridiculous web host you ask? Well I’m sure there are lots of answers to that, but here is one good one: Network Solutions.

I’m only going to cover the topic of Domain Registration:

Godaddy: $8.99 /year
1and1.com: $5.99 /year

Network Solutions: $34.99/year

What!! Are you serious?!?! It’s not like you can have high-quality Domain Registration. You either own the domain or you don’t… Thats it, and they are charging three to six times the price for the exact thing. It’s not like being a big name registrar makes you better at registering domains.

Oh but you do get a deal with network solutions if you buy for multiple years. you can get down to $9.99 if you buy 100 years!.

That just makes me sick! I can’t believe they get away with that. It’s just another example of how easy it is to rip people off on the internet.

-Ashton Sanders

The third part of this ActionScript Loading Bar Tutorial will be putting together everything we have learned so far in this tutorial and making it work.

At the end of the ActionScript – Loading Screen – Part 2, we had put together a simple piece of code that will shrink the size of our loading bar to the same percentage that our movie has been loaded so far. (ie. If the movie is 45% loaded, the loading bar will be 45% wide.)

Now if you plug that into a movie, it will check our piece of code once, but not again, here is what you would do to have it check the code every frame.

On the first frame, of our movie, we put this code:

percent = (_root.getBytesLoaded()/_root.getBytesTotal())*100;
_root.loader._xscale = percent;

On the second frame of our movie we put this code:

if(percent < 100){
gotoAndPlay(1); //go to frame one again
}else {
play();
}

To summarize that if statement: If the movie isn’t done loading, go back to frame one and start over. This will run the code we placed on frame one, and update the width of our loading bar. Otherwise (else), the movie has completed loading, and it is time to play! (Yes, the play(); is redundant, because that’s what the movie would do automatically.

Then all you have to do is set up your movie to play in the next scene, and WALA! you have one beautiful Loading Bar!

-Let me know if this helped you,
-Ashton Sanders

The second part of this ActionScript Loading Bar Tutorial will be discussing that ratio between the bytes loaded so far and the total size of the movie in bytes.

*Click Here for Part 1 of the ActionScript Loading Screen*

ActionScript Theory

The theory behind this is very simple: If you take the amount of bytes that has already been loaded in your move, and divide it by the total size of your movie, you will end up with the percent of your move that is loaded.

ActionScript Code

We will be using two ActionScript Commands:

//How many Bytes have been loaded so far.
_root.getBytesLoaded();

//And the total bytes in the movie
_root.getBytesTotal();

Using the formula above, we come out with

(_root.getBytesLoaded()/_root.getBytesTotal())

This will give us a decimal like .4, which means 40%. so we are going to multiply it by 100 to get the correct number:

(_root.getBytesLoaded()/_root.getBytesTotal())*100;

Great, now lets apply this to what we discussed in Action Script – Loading Bar – Part 1. We are going to assign this percentage to the _xscale (or width) of the loading bar (_root.loader).

_root.loader._xscale =
(_root.getBytesLoaded()/_root.getBytesTotal())*100;

Great! Now we have the function for setting the width of the load bar. When the movie first starts loading, and there is only 1 byte loaded out of 4,000 bytes, the loading bar will be almost completely invisible, then as the number of bytes increases, the width of the bar will increase until 4,000 out of 4,000 bytes have been loaded and the loading bar is back to its normal width.

Last Step

We only have one step left to finish our loading bar, which you can view in Part 3 of this ActionScript Loading bar Tutorial.

Click to view all of the ActionScript Loading bar Tutorials on one page.

-Continue to ActionScript Tutorial Part 3
-Ashton Sanders