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!

The IOErrorEvent object kicks in when there is an error sending of loading.  There is only one type of error event that fires for this, and that is IO_ERROR.  If you attach the IOErrorEvent.IO_ERROR to your send/load operation, then you can customize an error message and/or action for your user to see if your application encounters the error.  Here’s a quick example:

var myLoader:URLLoader = new URLLoader();
myLoader.addEventListener(Event.COMPLETE, loadXML);
myLoader.addEventListener(IOErrorEvent.IO_ERROR, showXMLError);
myLoader.load(new URLRequest("sample.xml"));

function loadXML(e:Event):void {
   // Insert load actions
}

function showXMLError(e:IOErrorEvent):void {
   // Insert error actions
}

In this code, you’ll notice the URLLoader that loads a file named “sample.xml”.  There is a listener set up for when the XML file is loaded, and one for if an error is produced.  Then, the two functions are set up to contain the actions for each of the two outcomes.

For error functions you can do many things to alert users.  For instance, you can create and populate a text field with an error message.  Or maybe show a custom error icon.  You can even include a link or button to a contact form where they can send you (or tech support) a message about the error.  Or a button to restart the application or try to perform the failed action again.  The possibilities are endless.

So next time you’re programming a Flash application, consider using the IOErrorEvent to catch your errors and give your users meaningful error messages.  After all, there’s nothing worse than losing the interest or trust of your clients and users than to have an application that stops working with no hope of a fix or any sort of helpful error message.

Until next time, happy coding!

First, we need to set up the XML file.  In the text editor of your choice, you can begin setting it up by entering the following code:

<?xml version="1.0" encoding="utf-8"?>
<site>
   <theItem></theItem>
</site>

In the code above, we simply set up the main tag, named site, and put another tag named theItem inside of it. (I’m not going to get into explaining best practices for setting up XML files here. That’s a topic for another post.)  Inside the theItem tag, we can put our text. I’ll start by putting one sentence, contained inside of a <p> tag, with <b>, <i>, and <a> HTML tags.

<theItem><p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>.</p></theItem>

Save your XML file as “text.xml”.

Now that we have the XML built, let’s move over to Adobe Flash and import the XML.  With Adobe Flash open, create a new ActionScript 3.0 file, and make a new dynamic text field and name it “text_txt”.  Set the color, font, and size to your own liking.  Then, create a new layer, named Actions, and lock it.  (I always name my ActionScript layer “Actions”, lock it, and put it as the top layer.  It’s a good practice to get into if you don’t already.)  Save your Flash file in the same directory location as the XML file.

Now, in your Actions panel, type the following code:

var theXML:XML;
var xmlData:Array = new Array();
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, processXML);
loader.load(new URLRequest("test.xml"));

function processXML(e:Event){
   theXML = new XML(e.target.data);
   var xmlLength:Number = theXML.theItem.length();
   for (var i=0; i<xmlLength; i++){
      xmlData[i] = theXML.theItem[i];
   }
   text_txt.text = xmlData[0];
   text_txt.multiline = true;
   text_txt.wordWrap = true;
   text_txt.height = text_txt.textHeight + 6;
}

Here’s a quick rundown of what this code does:
- Define a new XML object named theXML
- Create a new Array named xmlData
- Create a new URLLoader named loader.  This loader then gets an event listener that will fire the function processXML when loading is complete.  To load the XML file, we load a new URLRequest to the path of our XML file (which should be in the same directory as your Flash file.)
- The processXML function then creates our XML object, filling it with the data from the loader.
- Create a number variable containing the length of the XML. This is essential for what’s coming next.
- Run a for loop starting at 0 and going through the length of the XML object.  This loop populates our Array, xmlData, with each theItem tag from the XML.
- Fill the text field with the text from the first spot in the array (our only tag in this example).
- Set multiline and wordWrap to true so the text won’t be limited to one line.
- Set the text field height so it includes all of the text, plus a few extra pixels of buffer at the bottom.

Save your Flash file and test your movie.  You’ll see something very similar to the image below, which isn’t very appealing yet.

Close the test movie and return to your Actions panel.

In the Actions panel, we’re going to change the line of code that sets the text in our text field to the array data.  Instead of using text_txt.text, we’re going to use text_txt.htmlText = xmlData[0];

Save your Flash file and re-test your movie.  You’ll notice the results are much nicer, but the lines break up each time there is an HTML tag, as in the image below.  The good news is that the bold and italic tags display the text correctly, and the hyperlink does work.  But there’s really no way to tell the user that the hyperlink is actually a hyperlink.

Close the test movie and return to your Actions panel once again.

To style our HTML text, we’re going to need to create a style sheet object and attach it to our text field.  To do this, we can use the following code, placed above our processXML function:

var textStyles:StyleSheet = new StyleSheet();
textStyles.setStyle("a:link", {color:'#01628b', textDecoration:'underline'});
textStyles.setStyle("a:hover", {color:'#d68402', textDecoration:'underline'});
text_txt.styleSheet = textStyles;

Here, we create a new StyleSheet object, and set styles for <a> tags, based on the correct syntax that Flash uses.  In this example, we assigned a color and underline to our link, and to its hover state.  (For more info on StyleSheets, consult the Flash documentation on StyleSheets.

Lastly, we set the styleSheet attribute on our text field to our StyleSheet object.

Save your Flash file and re-test your movie again.  Our lines are still broke, but our hyperlink now looks like a hyperlink.  We’re getting closer.

Close the test movie, and return to your XML file.

Here, we will get to the key to successfully displaying the HTML content correctly, and on one line:  The CDATA tag.

In order to display HTML content and special characters successfully, we need to put a CDATA tag into our theItem tag.  The syntax of the CDATA tag starts with <![CDATA[ and ends with ]]>.  It wraps around the outside of the theItem content, like this:

<theItem><![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>.</p>]]></theItem>

Save the XML file, and return to Flash.  Once in Flash, re-rest your movie.  You’ll notice that the text now flows correctly, and is styled according to our HTML tags and style sheet data!

Ah, sweet success!  We did it!  But the fun doesn’t stop there.  Inside of the CDATA tag, we not only have the ability to successfully show HTML tags, but also special characters.  Let’s put some special characters into our XML tag and see what happens.

To use special characters, we will need to know the respective HTML Entity Number, which can be found at the W3 Schools website here: HTML Entity Number Reference.

Now that we have a reference for finding special character entity numbers, we’ll put in another sentence containing a handful of them to see how they look.  In your XML file, add another sentence to the theItem tag, like the one I’ve included below:

<![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>. It also contains special characters, like &#198;, &amp;, &#169;, &#174;, and &#187;.</p>]]>

Save the XML file, return to Flash, and re-test your movie.  Notice that the special characters show up correctly, and in line with everything else without those annoying line breaks!

Now, I will say this:  CDATA tags aren’t needed to merely display HTML tags and special characters within Flash. Flash has done a good job with the htmlText attribute, but we still need to set up the XML file with CDATA tags to make the content flow properly without the line breaks.

Here’s a look at our final code for this test:

<!-- Begin XML -->
<?xml version="1.0" encoding="utf-8"?>
<site>
   <theItem>
      <![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>. It also contains special characters, like &#198;, &amp;, &#169;, &#174;, and &#187;.</p>]]>
   </theItem>
</site>
<!-- End XML -->

/* Begin ActionScript */
var theXML:XML;
var xmlData:Array = new Array();
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, processXML);
loader.load(new URLRequest("test.xml"));

var textStyles:StyleSheet = new StyleSheet();
textStyles.setStyle("a:link", {color:'#01628b', textDecoration:'underline'});
textStyles.setStyle("a:hover", {color:'#d68402', textDecoration:'underline'});
text_txt.styleSheet = textStyles;

function processXML(e:Event){
   theXML = new XML(e.target.data);
   var xmlLength:Number = theXML.theItem.length();
   for (var i=0; i<xmlLength; i++){
      xmlData[i] = theXML.theItem[i];
   }
   text_txt.htmlText = xmlData[0];
   text_txt.multiline = true;
   text_txt.wordWrap = true;
   text_txt.height = text_txt.textHeight + 6;
}
/* End ActionScript */

If you want the source files, you can download them here.  Download Source Files »

I hope that this sheds some light on the topic of getting HTML text to correctly display and flow inside of your Flash application.  Until next time, happy coding!