// This variable gets set as 1,234,567,890
var commaFormattedNumber:String = formatWithCommas("1234567890");

function formatWithCommas(pNum_str:String):String {
   var lReturn_str:String = "";
   var lStringAsArray_arr:Array = pNum_str.split("");
   var commaCounter_num:Number = 1;
   for (var i=lStringAsArray_arr.length-1; i>=0; i--) {
      lReturn_str = lStringAsArray_arr[i] + lReturn_str;
      if ((commaCounter_num == 3) && (i != 0)) {
         lReturn_str = "," + lReturn_str;
         commaCounter_num = 1;
      } else {
         commaCounter_num++;
      }
   }
   return lReturn_str;
}

Notes:

• In our example, we pass in 1 String value into the function, and it returns a String.
• Inside of the function, we split the passed-in string into an Array, then we loop through the array backwards, adding the number in each array slot each time through the loop.
• While looping through the array, notice that we have the variable commaCounter_num, which keeps track of which slots to also add in a comma. The conditional logic checks if the commaCounter_num is up to 3 and if the value of i is NOT zero. If both of these are true, we add in a comma and continue on. We must add the check of ensuring that i is not zero, so we don’t get a 6-digit number, for example, that ends up being returned with a comma at the very beginning of the string.

So there you have it.  A nice little chunk of code you can use to format a number into a correctly comma-formatted string. Not a whole lot to it, but still a nice reference function to have for future use.

Until next time, happy coding!

With that said, on with the code!

Step 1: Set Up HTML Code

The first thing you want to do is to create two div tags in your file, each with unique IDs.  One will be the “container” for the progress bar, and the other will be located inside of it, and will be the one getting sized to show the progress.  Here’s how I have set it up:

<div id="progress-bar">
   <div id="status"></div>
</div>

Step 2: Add Some Style

Now that the basic HTML is set up (and seriously, how easy was that HTML setup?), we’ll add some CSS magic to make it look better.  Here’s how I have styled our example:

#progress-bar {border:1px solid #bebebe; background:#ffffff; width:300px; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
#status {background:#0066cc; width:50%; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}

The important thing to note here is that the #status ID has a percentage-based width.  Since it is contained within the fixed width #progress-bar div, it’ll automatically calculate how wide it has to be.  Oh the magic of CSS!

Another thing to note here is the use of the multiple “radius” attributes for different browsers.  It’s a bit out of the scope of this post, but to make a long story short, if your browser supports one of these attributes, you’ll get a nice rounded look.  If not, it’ll just be a normal rectangle.  Your call on whether you like the rounded corners or not.

If you decide to use the “radius” attributes for styling, be warned that if the percent width on your status bar is at or lower than the radius amount, it may throw off the look of the edges, as the browser will try to “make up” the shape with corners as best it can with the radius values included. This isn’t a factor when the corners are squared off, but it’s a good thing to know up front, just in case you need small percentages used.

Also, feel free to style these with background images, with taller heights, different colors, etc.  As you’ll see in the included sample below, I’ve gone ahead and added in some background images to spice up the design a bit.

3. Jazz It Up with jQuery

Once your HTML and CSS are in place, you’re all done.  Unless, however, you want to update the progress bar on the spot in front of the user.  If that’s what you’re going for, then here’s where you can use some jQuery goodness to animate the bar however you need.

First, you’ll need the most recent version of the jQuery library.  Link it into your HTML file, and then whenever you need to change the width of the #status bar, just call a JavaScript function like this (with the “80%” width attribute set to whatever you need it set to):

$("#status").animate( { width: "80%" }, 500);

Wrapping It Up

That’s really all there is to it.  Pretty basic stuff.  But it’s definitely a nice trick to have up your sleeve.  And with a little extra work on styling and JavaScript logic, you can have some pretty robust logic that does some really cool things.  The example below shows you how the extra styling looks, and will allow you to see how the #status bar animates when the jQuery function is called.

Until next time, happy coding!

Example

Why, you ask?

As time goes on, I’m finding myself drawing closer and closer to sticking close to pure HTML/CSS code, with other standards-compliant languages like PHP/MySQL and JavaScript.  Not to say Flash and it’s programming language (ActionScript) isn’t compliant with anything.  I had simply found myself doing things in Flash by default because it’s what I was most comfortable with, and could do with the least amount of technical issues.

But, now that I’ve been exploring more uses for JavaScript in place of what would normally be Flash code, it’s easier and easier to pull myself away from Flash.  Plus, as I’ve been doing more and more dynamic code content with PHP, I’m finding myself a lot more excited about using PHP than I am about using Flash.  I still enjoy Flash, and don’t get me wrong — there are definitely times and places for Flash.  But for where I’m at now, I am finding that my own site doesn’t currently need to rely on Flash so much.

Outside of the programming techniques used for the most recent release of the site, I felt like it was definitely the time for a change regarding the design of the site.  The new design has a much more sophisticated simplicity and clean look than the old version. It’s focus is more on the projects and artwork, as they take a very prominent position on the Work page with only the project details to accompany them.  No fluff content just to fill in space and give users something else to read.  Only the necessities.

With that all said, I hope you enjoy the newest iteration of HesslerDesign.com.  If you haven’t already, check out the Work page, which has a few new projects listed that I’ve completed recently.  I hope you like what you see.

Until next time, happy coding!

Step 1: Embed your Flash SWF file in your HTML page

When embedding your SWF file, give your object tags the same id and name. Your non-Internet Explorer object tag should have the id, and your IE object tag should have the name. And again, both should be set to the same value. (In this example, these attributes are set to “helloSWF”.) Additionally, you need to set the allowScriptAccess attribute of your Flash object to either “sameDomain” or “always”. Without this attribute set, you won’t be able to have Flash communicate with the HTML file. At a basic level, the object tag will need to look something like this:

Step 2: Write a JavaScript function that targets and calls to Flash

There must be a JavaScript function that acts as the mediator between HTML and your Flash SWF file. In this JS function, you need to access the SWF file. This is done by referencing the id/name (see step 1). In its simplest form, this JS function should look something like this:

function jsSayHello() {
   var mySWF;
   mySWF = document.helloSWF;
   if (!mySWF) {
      window.helloSWF;
   }
   mySWF.sayHello();
}

In this example, you’ll notice a variable that get set to document.helloSWF. If you’re using a browser that doesn’t recognize the ‘document‘ syntax, the conditional statement catches it, and uses ‘window‘ to reference the SWF file. Once the variable is set, you can simply call the function you wish to call in your Flash file by using the syntax “jsVariable.flashFunctionName()“. In our example, this is the line “mySWF.sayHello();“.

Step 3: Set functions and ExternalInterface properties in Flash

In your Flash file, you need to import the ExternalInterface Class, and add a callback that listens for the function being called from outside of the Flash file. When adding the callback, you also need to specify the function to run in your Flash file when it gets instructed to do so from the outside world. The code snippet below provides the basic structure of what you’ll need:

import flash.external.*;
ExternalInterface.addCallback('sayHello', helloWorld);
function helloWorld():void {
   // Insert actions
}

In this example, you’ll notice the addCallback accepts two parameters: (1) a String that is the function called from outside of Flash, and (2) a function inside of Flash to run.

If you want to have Flash call out to JavaScript, you can use the ExternalInterface.call method to call a JavaScript function. For example, if you wanted to call a JS function named “hiFromFlash”, the ActionScript code would look something like this:

ExternalInterface.call('hiFromFlash');

If you need to pass parameters, simply add them after the function call, separated by commas.

So there you have it. With these three items, you will be all set to have your Flash file be able to receive instructions from its parent file. Until next time, happy coding!

Download source files »