CSS - Absolute Position Sidebar

This is what I call CSS tip in 30 seconds:

It is very useful to be able to put your navigation bar or side bar at the bottom of your HTML, and absolute position it to appear up on your site where you want it to go. This is actually pretty easy.

If you just want it to be along the left side of your screen and lets say 100 pixels from the top (for your header), this would be your code:

#leftnav {
    position:absolute;
    top:100px;
    left: 0;
}

If you want your navigation bar to go along the right, obviously you would replace "left" with "right".

Here is where it can get complicated: What if your layout is a fixed width, centered layout? Then you cant just align the navigation bar off to one side, because that would not stay inside of your layout, it would jump all the way off to the side. Here's what you would do for a 1000 pixel width and centered website layout:

#leftnav {
    top:100px;
    right: 50%;
    margin-right: -500px;
}

Quick Explanation: "right:50%" causes the right side of your navigation bar to be exactly in the middle of your screen. It doesn't matter what size screen you have, it will always be right in the middle. Then the "margin-right:-500px" moves the entire navigation bar 500 pixels to the right. So in essence, the navigation bar will always be 500 pixels to the right of the exact middle of your browser! That way it looks permanent, and won't move as you shrink your screen.

Another Note: If your navigation bar is going to the left side of your screen, here is another option: If you leave the side bar or navigation bar without the absolute positioning, and it appears directly below where you want it, then if you leave off the "right" or "left" in your CSS (leaving only "top:100px") your navigation bar will move straight up to the top of the screen, and stay where you need it to be.

-CSS in a Flash!
-Ashton Sanders

CSS - Float

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.

If you float that same div to the right, all of the content that comes up after the div will show up on the left hand of the div (exactly like the content would come up next to a right-aligned picture):

Here is the content that comes after the div.

And vise versa if you float left:

Here is the content that comes after the div.

This is a very simple property, but you will use it in every CSS design you create. It is definitely a property you want to have ready to throw in to your CSS!

-CSS Everywhere!
-Ashton Sanders

ActionScript - Loading Screen - Part 3

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

ActionScript - Loading Screen - Part 2

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.

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.

-Stay tuned for ActionScript Tutorial Part 3
-Ashton Sanders

ActionScript - Loading Screen - Part 1

Here is a Loading Bar I developed using the ratio of Loaded bytes to total bytes.

ActionScript _xscale

This script uses three main elements. The first one we will discuss is: "_xscale"

//This is used to specify the
//width of an symbol (ie. movieClip)
_root.movieClip._xscale = *number between 0 and 100*

To go into more detail into that last element, if your movie clip is named "loaderbar" and you made it to be at its full length (about 200 pixels lets say), you could type:

_root.loaderbar._xscale = 50;
//That would squeeze it to
//100 pixels (50%)

This is what we will be using to slowly move the bar across the screen as the file is loaded.

Here is a Flash Loading Bar to demonstrate the _xscale Property.

-Stay tuned for Part 2
-Ashton Sanders

Tutorial - Flash ActionScript - Advanced Path

Yesterday, I learned how to do two advanced things with paths in Flash ActionScript.

For an introduction, I'm creating a flash animation that will calculate a loan. What many people don't know about loans is that someone can choose to decrease the rate on their loan in exchange for increased closing costs. I'm making a Flash Animation that will allow you to do that. It will also allow you to select different types of loans, (which will change your interest rate, and closing costs).

In this Flash Animation, I had an ActionScript function that was called from many different movies, and I need to use a lot of variables to make sure it reacted differently to every request.

Here are the things I learned:

Creating Variables From Paths

My ActionScript Function call was simple.

On (rollover) {
  function(this);
}

Then all I needed to to was take the path to "this" and break it up into variables so that my Flash ActionScript will be able to do different things for each request. This seemed simple enough, I thought I could use the ActionScript Function split(.) to break apart the path into 4 different variables and thus allow me to do different things for each request. Unfortunately, what is returned by "this" is not a string so you can't split it... or do anything else that would work on a string. But you can do this:

function(path){
  path2 = path._parent._parent._name;
  path3 = path._parent._name;
  path4 = path._name;
}

And that will give you the name of every Flash Movie Clip in your path in the form of a string! That is a very useful Flash Action Script technique, but it lead me to the next problem:


Using Variables in Paths:

Lets say that within your Flash Animation you have movieClipB inside of movieClipA. You also have a variable in movieClipB called "num";

The ActionScript path to reach var num from the root is:

_root.movieClipA.movieClipB.num

But what if you need to use a variable in a path. (This could occur if you have multiple movies all using the same function.)I thought this would work.. but it doesn't:

path1 = "movieClipA";
_root.path1.movieClipB.num;

But the above ActionScript does NOT work. However this does work:

movieroot = "_root";
path1 = "movieClipA";
movieroot[path1].movieClipB.num;

That is how you use variables in a path!