In my container SWF, I had a library item set to export with class name “PreloaderMC”. As you might imagine, I created and added this preloader to the stage when my two SWF files were loading, then removed it from the display list once everything was loaded. I also had a library item exporting as “PreloaderMC” in one of my loaded SWF files. When testing and exporting the loaded SWF by itself, there was no issue. However, when I loaded that SWF into the container SWF, the preloader that was created and used in the loaded SWF was the one from the container SWF.

After asking a few colleagues and perusing some of the documentation, this wasn’t necessarily an unexpected find. It all has to do with application domain, which I won’t go into detail about here. In short though, if you use Loader.load() when loading another SWF file, and don’t specify LoaderContext (which, among other things, defines the ApplicationDomain for the loaded object), then the loaded SWF is considered a child domain of the container SWF, and thereby uses whatever class definitions are in the container that may have the same names.

So, lesson learned. Either be more explicit about specifying the application domain when loading external SWF files, or just use unique class names for item that are set to export to ActionScript.

The Glitch

In the mobile app that I’ve been working on, the design calls for the text input label to be placed “inside” of the text input field, on the left side. As such, I needed to add left padding to the TextInput component, so the text field wouldn’t overlap the label, which was sitting behind the TextInput control. So I set up my code to include the appropriate padding, and tested the result. When viewing the application, it looked just like it should, with the label positioned “inside” the TextInput component.

However, when I started typing a value into the fields, that’s when I saw the glitch:

The problem was this: When typing in your text into the field, and the text goes longer than the width of the visible width of the text field inside of the component, you completely lose the cursor and can’t see the text you’re entering. That is, until your text width is as long as or greater than the width of the TextInput component. Then, your text suddenly shifts, with the text field taking up 100% of the width of the TextInput component. So naturally, I let out a huge sigh and asked, “What happened to my left padding? Did I do something wrong?”

The answer to my question is this: The padding never got incorporated into the component correctly. And no, I didn’t do anything wrong. Adobe did.

The Solution

In my wrestling with how to fix this issue, I copied over the default TextInputSkin file (spark.skins.mobile.TextInputSkin) and put it into my project files. Then I opened it up and started investigating. Here’s what I found:

In the “layoutContents” method, I found a very big issue with the logic. And while it may seem like a small, innocent issue, it looms large when trying to add padding of any sort to the component. The issue is caused by 3 errors in the code of this function.

Error #1

These two lines are worthless. Why? It doesn’t solve any problems. It creates the skip in the text inputting described above, specifically when paired with the other two errors below. So, I commented these two lines out.

Error #2

This error is just plain and simple wrong. There’s a variable for “unscaledWidth”, which is the width of the ENTIRE component, NOT the width of the textDisplay (i.e. text field) after having padding taken into consideration. There’s actually a variable called “unscaledTextWidth” in the code, which is the value that SHOULD be used in this instance of “setElementSize”, because the textDisplay should have a width that has the left and right padding taken into consideration.  So, I changed this line to be:

Error #3

This error, like the last, is also just plain wrong. The 2nd argument for the “setElementPosition” method is the X value, which you’ll notice is HARD-CODED to “0″. This means that no matter what your left padding value is, the textDisplay will ALWAYS be set to the left side of the component. The x value should be based on the value of the left padding. So, I changed this line to be:

Conclusion

With the 3 errors above fixed, my TextInput component was finally working as intended, with the correct padding values, no intermittent skipping, and no random resizing of the text field inside of the component. Rather, like any other good text input field out there, it only displays the text width it should, while hiding the rest.

So if you find yourself questioning why something isn’t working as intended, take a few minutes (or hours, in some unfortunate instances) and look into the class/component/code you’re working with. Not only will you get a better understanding of how everything is set up, but you might just find another spot where the software engineers overlooked something and made an error.

Until next time, happy coding!

Postscript

Even though I am not a fan of how Adobe laid out this TextInputSkin, I must admit that I can see how/why it was done the way it was. There aren’t many times where a mobile application would call for a situation like the one I had. Chances are, Adobe’s quality assurance and testing didn’t think to include such a circumstance. After all, most mobile application components like text input boxes are set up to take up 100% of the screen (or close to it) to optimize hit area and visual space. So, giving them the benefit of the doubt, I can’t say I’m mad at Adobe for how they put things together. But I stick to my statement that if something isn’t working as intended, take some time to look into the code behind the scenes. You just might find something in need of fixing.

The solution was to make a “container” SWF file that would load in the actual content for the page.  This was nice because the container ended up also acting as a preloader for the main content.  All I had to do in the container file was to append a query string to the end of the content to load in (i.e. “photo.jpg?id=12345678″), which effectively acted as a “cache buster” that would make the browser and server think it was loading a new file each time the page was loaded.

The result was this little nugget of Flash goodness: FileLoader.

I polished up the container file I made in my solution above, adding in a couple of customizable variables, and am making it freely available for download.

Version Information:

• Version: 1.0
• Release Date: 1/12/11

Download:

Like what you see? Want to use FileLoader with your own Flash projects? Click the button below to download the most recent version of FileLoader, including a demo file with full instructions.

License:

FileLoader is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License, and is free to use. Links back to hesslerdesign.com are always appreciated. Permissions beyond the scope of this license may be available by submitting a Contact Request.

Description:

FileLoader is a simple, lightweight, easy-to-implement FLA/SWF file that acts as a preloader and container for files. It is made to load a specified URL, can enable “cache busting”, and provides the ability to change the hex color of the preloader and text. It can load any type of file that the built-in Loader class loads (SWF, JPG, PNG, GIF).

Example:

Instructions:

To use this file, simply update any/all of the customizable variables located on the aptly-named “Customizable Variables” layer (in .fla file). These variables include:

1. contentURL (String): URL path of the content you wish to load into FileLoader. (Default = “”)
2. tintHex (uint): Hex value to tint the preloader and error message. (Default = “0×000000″)
3. cacheBuster (Boolean): Enables/Disables “cache busting” on your content. (Default = “false”)

Once the variables are updated, just export the SWF and it’s ready to be embedded into your HTML page for the web.

Notes:

1. FileLoader is set up to resize itself to 100% of the stage width and height, making it flexible to be used at any size. This means you don’t have to worry about changing the dimensions of the file, and when embedding this file into your HTML page, you can specify any width and height you wish. The Preloader and Load Error (if applicable) will automatically center themselves to the stage. The content, however, has no special positioning logic, and will be placed at the (0,0) point of the stage. Thus, it is intended that this file will be embedded at the exact size of the content you’re loading into it, as this file is only intended to be a preloader and container for the contents of one file.
2. The Preloader and Load Error elements (where applicable) are automatically added to and removed from the file when needed. Your content will automatically be placed into the file when it’s loaded, and be the only item on the stage at that point. You don’t have to do anything special to get your content to display other than specifying a valid content URL.
3. When you’re ready to post the files to your website, just make sure you upload this file along with the content it loads. Also, make sure your pathing is set up appropriately for the content URL or your content may not load correctly.
4. If you update or change any of the MovieClips in the library, or update, append or change any of the code in the main Actions layer, this file may break. If you know what you’re doing with Flash and ActionScript, you shouldn’t have any problem figuring out how things work and can be edited. If you’re a beginner or novice, you may have a harder time editing. With that said, edit the non-customizable elements at your own risk.
5. If the “cacheBuster” variable is set to “true”, a random 8-digit ID will be appended as a query string to the “contentURL” variable (i.e. “photo.jpg?id=12345678“). When the cache buster is enabled, it will force the FileLoader to load a fresh version of the content URL each time it is loaded. This is helpful if you are posting your Flash content on a server with its own cache settings that would result in updated content not being immediately visible until the server cache clears. If this variable is set to “false”, no ID will be appended to the content URL, and the loaded content will be cached as normal.
6. Important: Use the cache busting sparingly and only when necessary, as it may end up bogging down the server with unnecessary calls to the server to reload the content.

Here’s what my realization entailed:

As some of you may know, I’m always a big fan of keeping live text — be it static or dynamic — in Flash files, so that when I or anyone needs to go back in and make an update, it can be done w/o opening a Photoshop file, slicing and dicing image(s), and importing them into Flash.  Not only is it easier, but it’s a tremendous help in keeping file size down.

One aspect that is sometimes difficult is when a design calls for an effect on text, such as a gradient.  In Flash, we’re all probably aware that you can create a static text field and a shape (such as a gradient box), set the text field on the layer above said shape, and right-click the text layer to set it as a mask over the shape.  But here’s where my realization came…

It’s very true — this same effect can be done with pure ActionScript, for more dynamic scenarios… or if you’re one of those people who hate the stage with a passion.  All I’d need to do in the code is create a text field and a gradient box, layer them appropriately, and set the text as the mask on the gradient box.  And, since you can embed fonts in Flash (see the previous post about Embedding Fonts Using ActionScript 3.0), it can be done with any crazy display font that a design calls for (Immi 505 in the example below).

With that in mind, I put together a little demo to prove to myself (and you) that it was as easy as I thought it would be.  The demo has an input text field that you can use to change and update the text — which happens on the fly each time the input field is updated (so you know it’s truly live and dynamic, and not slight of hand).  So go ahead and play around with it.

So there you have it.  Dynamic text with a gradient fill effect.  Easy peasy, eh?

Until next time, happy coding!

Download

What’s that, you say? You want to see the source code to make this work? Well, ask and ye shall receive. Just click the button below to download the source FLA and AS file for this demo.

Lucky for you, Flash comes well-equipped with providing tools for developers to use when coding their Flash applications.  My three most-used Flash methods for clean lines and exact placement are listed below, and are all part of Flash’s Math class.  If you use them, you’ll be sure clean up the lines and sizes of your site in no time.  (It may not help poorly-drawn shapes that you draw by hand, but for dynamically-drawn, code-generated items, or code-based asset placement, it’s golden.)

A Few of My Favorites

Math.ceil()
This function returns the ceiling of the specified number or expression, which equates to the closest integer that is greater than or equal to the number.

Math.floor()
This function returns the floor of the specified number or expression, which equates to the closest integer that is less than or equal to the number.

Math.round()
This function rounds the value of the passed-in parameter to the nearest closest integer. If the passed-in value is exactly in the middle, it rounds up.

How and When to Use the Math Functions

Let’s say you have a square MovieClip that’s sitting on your stage with an x coordinates of 133.  You want to tween it with ActionScript to a point 50% of the way to the left edge of your application from it’s original point of 133.  You’ll need to have the x coordinate change for the move, obviously.  But if you simply figure out what point to tween to without somehow finding the nearest integer value, you’ll be left with a non-integer value (66.5), and your horizontal and vertical lines will get fuzzy.  However, if you use the Math.round() method, for instance, you’ll get an integer value (67), which will keep your horizontal and vertical lines crisp and clean.

In the example SWF below, there are two square MovieClips, both placed at an x coordinate of 133, as in the example above.  The top one does not use the Math class to get the integer-based pixel value it will end on.  The bottom one, on the other hand, does use the Math class, and rounds the target value to the nearest integer, thus resulting in a final x coordinate that is an integer.  Click on each box to tween it, and notice the end result of the boxes side by side.  You’ll quite obviously notice the top box having fuzzy edges when compared the the clean lines of the bottom box.

Know, Love, and Understand Integers

The important part to note about all three of these methods is that they all calculate the closest “integer” — or whole number.  This is immensely helpful, because if you base your width, height, x, or y values on any of these methods, you’ll always get back a whole-pixel value, which will give you the crisp edges that we all know and love.  With that said, there is one important exception….

Even though these methods return integers, there is still one more “gotcha” that you’ll need to keep in mind when developing your Flash application.  If you have a MovieClip of a square shape, for instance, and you have it centered to the registration point of the MovieClip, you may still get fuzzy pixels.  How, you ask?  If your square has a width and/or height whose value is an odd number (57, for example), its x and y coordinates will be half-pixels within the MovieClip (-28.5, -28.5 for a width of 57).  And if you place this MovieClip on the stage and put it at coordinates whose values are integers, the edges will be fuzzy, because of the coordinates of the object within the MovieClip.

To combat this, there are a couple of options:

• If you center your object(s) in your MovieClips (or other display objects), make sure they have dimensions that are even numbers.  If this isn’t doable, at least make the x and y coordinates integer values, even if it means your assets won’t be “exactly” centered in the MovieClip.
• Instead of centering your object(s) in your MovieClips, use corner-based orientation, so, for example, your object(s) will have an x and y value of 0.  This way, you’ll be guaranteed to have crisp lines when the MovieClip is placed at coordinates whose values are integers.

Other Best Practices for Clean Lines

• When drawing shapes with horizontal and/or vertical lines in Flash, make sure that the x and y coordinates are integer values in your Properties panel.  Also, make sure the width and height are also integer values.  Every so often, Flash will want to add/subtract a random 0.05 from your typed-in values, so you may need to re-type in a value now and again.
• If you’re nudging objects around on your stage, turn on “Snap to Pixels”.  To do this, select the “View” menu, and select “Snapping > Snap to Pixels”.  Doing this will always snap your objects to integer (pixel) values.

Wrapping Up

So there you have it.  With a little careful planning and knowhow, and with a little help from the Math class, you can ensure your Flash applications have vertical and horizontal lines that are crisp and exact, creating a much stronger, cleaner design.

Until next time, happy coding!

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

A few notes about the class, its flexibility, and it’s use:

• Overall, the class automatically assigns random X coordinates, fall times, delays, scale, alpha, rotation, and tint (if colors are specified) for the effect of true randomness and depth of field.
• To import, instantiate, and start a batch of confetti in the file, only 4 lines of code are needed.
• There is a public “start()” method for the class, rather than having the class auto-start (though the demo below does auto-start, but that is through the parent file, not the class).  This is done in an effort to save in performance.  There are also public methods for “stop()”, “clear()”, and “remove()”, done in an effort to to be able to phase out the confetti (stop), clear all current instances of individual confetti pieces (clear), or stop and clear out all confetti pieces (remove).
• The class is set up to pass in an Object as the parameter when creating your Confetti object, which takes up to 6 optional attributes: width, height, colors, maxPieces, symbol, and speed.  If any or all of these are not defined, default values will be used.  Through much time and testing, calculations were solidified to make for realistic default settings.
• The class allows for passing in a custom symbol to use, rather than using the auto-generated one. In the demo below, all “shape modes” other than “Auto” are instances of MovieClips from the Library, set to export to ActionScript. These custom MovieClip symbols can have multiple frames, too.  If a MovieClip symbol has multiple frames, the class will randomly assign a frame to show for each individual piece.

With that all said, here’s a demo of the Confetti class.  And in response to the request, the class and a sample FLA file are available for download (see link below the demo). Feel free to toy around with it, change the settings, and have fun with it.

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!

VideoMax is a very lightweight, fast, flexible, and easy-to-implement custom Flash video player class that can be used in any ActionScript 3.0 file. Some of the key highlights of the VideoMax class are:

• Lightweight: Importing the VideoMax class and creating an instance adds only 12kb to overall file weight. Compare that to the built-in Adobe ‘flvPlayback’ component, which adds 58kb to the overall file weight. Do the math. That’s nearly 500% heavier than this VideoMax class.
• Easy to Use: With just 3 lines of code, you can import the VideoMax class, create an instance of the player, and add it to your Flash file. And because of its dynamically-built nature, there are NO Library components needed. That’s right, NONE. All of the assets included in the VideoMax class are 100% built from scratch with nothing but ActionScript 3.0 code.
• Customizable: You can change a number of attributes to your VideoMax instances, so you can have a video player that is as unique as the video it plays. The customizable attributes include Width, Height, Auto Play, Auto Rewind, Auto Size, Buffer, Looping, Control Bar visibility, Tint, Play Button overlay, End Frame visibility, and onStart/onComplete listeners.
• Communicative: By using the onStart and onComplete listener attributes (and accompanying parameter attributes), you can have VideoMax dispatch events that call functions back in the parent file when the video starts and/or ends.
• Self-Sufficient: With its robust set of default attributes, VideoMax takes care of wrapping up all of the loose ends. Once you create your VideoMax instance, you can sit back and relax, knowing that everything is taken care of, including control bar resizing and positioning, buffering, automatic video resizing within the player, and more. Just import the class, create the instance, assign it attributes, and add it to your file. VideoMax will take care of the rest for you.

Where Can I Get VideoMax?

VideoMax is available for download at the Official VideoMax Page on HesslerDesign.com. There, you will find a free download of VideoMax, as well as examples and documentation on implementing VideoMax in your own Flash projects.

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!