// 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!

var sampleString_str:String = "1, 23, 4, 5, 67";
var convertedNumbers_arr:Array = new Array();
var sampleStringAsArray_arr:Array = convertToArray(sampleString_str);
convertArrayValuesToNumbers(sampleStringAsArray_arr);
function convertToArray(pValue_str:String):Array {
   pValue_str = pValue_str.replace(/ /g, "");
   var lArray_arr:Array = pValue_str.split(/,/);
   return lArray_arr;
}
function getNumber(pValue_str:String):Number {
   return Number(pValue_str);
}
function convertArrayValuesToNumbers(pArray_arr:Array):void {
   for (var i=0; i<pArray_arr.length; i++) {
      convertedNumbers_arr[i] = getNumber(String(pArray_arr[i]));
   }
}

Notes:

• In our example, the variable sampleString_str holds a sample String of comma-delimited number values. The empty array convertedNumbers_arr will hold each Number converted from sample String, once our functions start running. And the Array sampleStringAsArray_arr contains the individual String values of each item from sampleString_str.
• In the function convertToArray(), we use replace() to clear out all spaces, if they exist, with the g (global) flag on regular expression so it will replace ALL, not just first instance of regular expression value. After space removal, we use the split() method to split the String into an Array at each instance of a comma. Once these run through, the function returns an Array, which we set equal to our variable sampleStringAsArray_arr.
• In the function convertArrayValuesToNumbers(), we loop through the passed-in Array and assign each slot of convertedNumbers_arr to the Number value of the given array slot we are converting.
• When all is said and done, the Array convertedNumbers_arr now holds actual Number values of each number from the original String, sampleString_str.

Again, it doesn’t take much to convert a String to a Number, or even vice versa.  But with a few extra lines of code, we can take that to the next level and convert comma-delimited Strings to an Array of accompanying Number values that we can then use as true Numbers.

Until next time, happy coding!

1. Use XML files to set content framework

On nearly every Flash site I work on, I use at least some XML. The great thing about XML files is they are a great way to structure blocks of your site.  For instance, if you want a slideshow on your site, you could have an XML file that contains the title, url, and other image-specific information you want to include for each image. Then, just import the XML into Flash and store the XML data in arrays to organize the information to use later.  (More on arrays below.)

Another great thing about using XML in Flash is that if you want to stream an RSS feed into a Flash site, you can, because RSS feeds are set up as XML.  (For more info on RSS feeds, see the post on Streaming RSS feeds into Your Flash Applications.)

Additionally, XML is easy to change without having to republish your site.  Say you have that slideshow I mentioned above, but want to swap out an image.  With XML, you just point to the new url, update the title, and save. Your Flash site will automatically update with the new info, and you won’t have to republish every time. Trust me, you’ll thank yourself for using XML when you build your Flash site.

2. Use arrays to organize assets used in your code

For me, using arrays is quite possibly one of the smartest and most powerful things you can do to optimize your code.  Not necessarily from a file weight perspective, but because with arrays, you can reference an object stored in an array by name, number, id, etc. For instance, say you have 20 thumbnail images you want to make clickable to open a larger image. You could attach individual event listeners to each image.  Or, you could set up a couple of arrays — one for the instance names of each image, and one for the reference to the larger image to load when clicked — and run “for” loops to set the event listeners all at once. While you’re in the “for” loop, set an ID number for each image that you can then reference in your “click” function that will fire on mouse click, and call up that ID number slot in the large image array.  With only a few lines of code, you’ll have a powerful way to batch chunks of your code with minimal effort. (For more info on arrays, see my post on Utilizing the Power of Arrays in Adobe Flash.)

3. Only import and embed absolutely necessary image files into your file.

If you’ve been on the Web at all…and judging by you reading this, I’m guessing you have…you know doubt know that a lot of people don’t like Flash sites.  The main reason seems to be they take way too long to load.  To get around this, I highly suggest importing and embedding ONLY the images you absolutely need.  If you have a lot of image assets, I suggest loading them dynamically via code, and placing them in the appropriate places.  This not only makes the file size considerably smaller, but it also opens the door to be able to update an image, replace it, and have Flash automatically read in the updated file without the need to republish the entire site.  (Sorta sounds like one of the key perks of using XML, doesn’t it?)  And trust me, users will thank you for having a site that loads (or at least shows up with a short preloader) in 5 seconds, rather than a beefy site that doesn’t show up until the entire thing loads.

4. Load assets in an orderly fashion, not all at once

Along with #3 above, when you load assets into your Flash site dynamically, it’s best to set up a structure and order in which to load them. For instance, load all of the home/landing page assets first. Once those are loaded, proceed with the next set of assets that you think will be needed/viewed by your users.  Not using a certain set of images until later in the site?  Don’t load them up front. Wait until the rest of the assets before it have been loaded first. Think about it.  Would you rather try to have 20 images load all at once?  Or load them in the order of which they’ll be seen? Loading them one at a time will speed up the individual image load time because there is only one image needing attention while it is being loaded, not all 20?

5. Cool it with the videos

Okay, this sounds harsh, but hear me out. Video is great. It’s everywhere, and it’s getting more popular by the day.  (YouTube, anyone?)  But when you’re making a Flash site, video can also be a beast to work with, specifically video that needs to stream without a playback bar.  The worst thing about video is file size. I’ll admit, video has come a long way in optimizing file weights and all, but at the end of the day, even a small video is still going to be around 1-2MB.  When you are using video, make sure you utilize the “loading assets in an orderly fashion” advice from above.  If you try to start streaming a video when 20 images are loading while it’s trying to play, you’ll no doubt get choppy playback.

6. Use TweenMax or TweenLite for code-based tweening and animating

I’m a big fan of keeping my Flash sites on one frame of the timeline, and doing as much as I possibly can with code, rather than with the timeline.  The reason for this is simply less time making changes later on down the road.  Want to make every tween of an image fading out half as long across the entire site?  Pretty laborious if you’re using the timeline.  But if you’re using code, it’s a matter of updating a couple of numbers.

This is where TweenMax and TweenLite come in.  In a nutshell, they’re the best tweening engine out there.  Using it, you can call one function that can alter many facets of an object at once (x and y position, alpha, tint, etc.).  You can also attach event listeners like onComplete, onStart, etc., that call functions to run at specific times during the tween.  In short, these tweening engines will make you wonder why you ever used timeline-based animations.  And best of all, they’re extremely light in file weight, unlike a lot of timeline-based animations.  And it’s a one-time file weight addition, not a per-tween sort of thing.

7. Simulate downloading on slower connections

Not everyone has a cable-speed connection. Believe it or not, there are still a lot of people out there using DSL or slower connections.  And as unfortunate as it may be, those are the people you need to build the site for.  Don’t ever assume that your audience is going to have the latest and greatest computers.

To simulate downloads in Flash, export your movie and select “View > Simulate Download”.  To set different connection speed settings, select “View > Download Settings”, and select your desired speed (or create your own custom speed).  Flash can be deceiving. When you test out a movie, it always runs lightning fast. But by testing it using the “Simulate Download” method, you’ll get a much better idea of how your site will behave on the Web.

8. Build buttons and other UI components as vector artwork in Flash

One of my biggest pet peeves is using raster images for buttons that could easily be made as vector art in Flash.  Not only does this make having to update the button a multi-step process, but it also beefs up the size of the file.  It may not be much, but if you get a dozen different image buttons, you could easily have just added 100+ kb to your file weight.  Might not seem by much, but as people’s attention spans are getting shorter and shorter, that added 2 seconds of load time you just added might be costly, and you may see an increase in the number of dropped users.

My motto is this: “If it can be made in Flash, make it in Flash”.  Vector art is not only easily editable, but also a huge file weight saver.  Plus, you don’t get any degradation of quality that you’d get if you used images.  All of your lines, colors, gradients, etc. are crystal clear.  Pair that with the almost non-existent file weight they carry, and what’s not to love?

9. Write custom Classes for reusable code

If you write Actionscript code, you use Classes.  You might not know it, but you do.  Every time you use a property of a MovieClip instance (i.e. myClip_mc.y to get the “y” position), you’re calling the MovieClip class.  Same with Sprites, Buttons, UI Components, etc.  Classes are a staple in object-oriented programming, and allow you to read or set properties, call functions (methods), and respond to events.  It’s a great way to reuse the same code over and over again, by simply importing the classes into your site file.

One of my personal favorite classes that I have written is for an Email Validator, which contains the logic to check whether a string is a valid email address or not.  You can check it out in my previous post on Building a Better Email Validator in Flash.  Each time I need to use this, I simply import it into my file (which is 1 line of code), make an instance of the validator (1 line of code), then call the validate function and pass in the string to validate (1 line of code).  In all, for me to validate an email address, it takes 3 lines of code.  Much better than rewriting all of the validation logic in a dozen different files, eh?

10. Use FlashVars to set important global variables

Every so often, you’ll run into an issue where you’ll want to change a variable from outside of your Flash file. An easy way to do this is to use the FlashVars parameter when embedding your Flash file in HTML.  I find that I mostly use FlashVars for variables that will change from a “staging” site to the final “production” site.  The most often used variable that I personally encounter is the account name for Omniture tracking. The bulk of sites I develop have different staging and production Omniture account names, so the metrics don’t get skewed while testing.  But if I embed that account name into the Flash file, I suddenly need 2 different versions of the Flash file — one for staging, one for production.  But if I have a FlashVar set up for this account name, I can just change the variable in the HTML code, and have Flash read it in.  Trust me, it’s a handy way to avoid having multiple versions of the same file for different environments.

In Conclusion…

So there you have it.  10 easy ways to optimize your Flash sites.  There are many more ways to optimize Flash sites, and I’m sure I’ll get into them in later posts.  But these are some of the main culprits.  And trust me, individual posts could be written about each one of these (and some already have).  If you want to see posts that dive deeper into any of these, just let me know and I’ll write it up.  Until next time, happy coding!

Step 1: Locate the RSS Feed

If you’re the owner of a blog that you want to get the RSS feed to, all you should need to do is go to the blog’s home page, and add “/feed/” to the end of the URL.  (For example: http://www.hesslerdesign.com/blog/feed/)  This is an XML-based page that gives you a list of the blog’s posts, titles, contents/extracts, etc.

If you need an RSS feed through a service like FeedBurner, you first need to go to the FeedBurner page of the site you want an RSS feed from. (For example: http://feeds.feedburner.com/hesslerdesign)  This page is NOT the one you need to link to, however.  At this page you’ll notice a link to “View Feed XML” in the Subscribe Now! box.  Click on that link, and you’ll be presented with a page exactly like that of the “/feed/” URL mentioned in the previous paragraph.

Once you get to the XML-based page, copy the URL, because you’ll need it in Flash.  (If you want to confirm that the page is the correct one, view the page’s source. It will be set up as an XML file, with a line like <?xml version="1.0" encoding="UTF-8"?> at the very top.)

Step 2: Importing the RSS Feed into Flash

To import the feed into Flash, just follow the normal steps you would to import an XML file.  Create an XML object and a URLLoader object, then load your RSS feed URL using the URLLoader.  Since I’m the type of developer who likes to code as dynamically and flexibly as possible, I like to also set up an empty array for each of the items I want to hold from the RSS feed, such as titles and permalinks.  Then, when I parse the XML, I assign a slot in the appropriate array for each title and accompanying permalink, and then have them to use when I display the Recent Posts section.  Here’s how to do this:

An important note:

To dig down into the XML and get things like Post titles and permalinks, you need to be familiar with the structure of the RSS file.  You can see from the code above that the title for each post is inside an item tag, which sits inside of the channel tag.  If you want to get more info than just these two items, just go to the RSS URL (see Step 1) and view the page source.  Or, you can do as I’ve done in the code above and trace out the XML in Flash once the XML loads.  This is a helpful first step to see what the structure of the XML file is before you get into parsing the XML into appropriate arrays.

Another quick thing to note is in the for loop, inside of the loadRSS() function. I used the number 4 as a benchmark to populate my arrays (seen in the snippet i<4). You can use a different number if you want. It’s a matter of (a) the number of posts available in the RSS feed, and (b) personal preference.

Once you incorporate the code above, you can then use the arrays populated with RSS info and populate text fields, buttons, etc.  Since it’s stored in an array, the possibilities are virtually limitless.

So there you have it.  The flexibility of RSS feeds makes it just that easy to import into Flash.  Until next time, happy coding!

Now Arrays are nothing new to any programmer out there, but I find that in ActionScript 3.0, I’m using them much more so than I ever did in ActionScript 2.0.  The main reason for this is that I like to use the same set of functions for button actions over a range of similar buttons.  Since ActionScript 3.0 requires you to pass a function into each listener event for every button, I like to use Arrays to sort my buttons and accompanying objects, and thereby creating the chance to use the same function for all buttons.

The sample Flash movie below shows this in action.  I created a very simple 4-section flipbook, and have used the same function for all Mouse Click events.

Download Flash Source Files »

Here’s the code used for this movie.  Note how concise the code is, thanks to the use of my two main arrays.

/* — Begin Code — */

var links:Array = [link0_mc, link1_mc, link2_mc, link3_mc];
var pages:Array = [page0_mc, page1_mc, page2_mc, page3_mc];

function setLinks():void {
   for (var i:int=0; i<links.length; i++) {
      links[i].id = i;
      links[i].buttonMode = true;
      links[i].addEventListener(MouseEvent.CLICK, linkClick);
   }
}

function linkClick(e:MouseEvent):void {
   hideAllPages();
   showPage(e.currentTarget.id);
}

function hideAllPages():void {
   for (var i:int=0; i<pages.length; i++) {
      pages[i].visible = false;
   }
}

function showPage(pageNum:Number):void {
   pages[pageNum].visible = true;
}

hideAllPages();
showPage(0);
setLinks();

/* — End Code — */

In this Flash movie, the links and pages are named with the same numerical value (i.e. link0_mc corresponds to page0_mc).  They also share the same place in their respective arrays, creating the ability to utilize loops in the linkClick and hideAllPages functions.

Of course this is just a simple example, but with a little extra effort, the same concept can easily be used for more complex applications.  Happy coding!