Now, before going too deep into HTML5, let’s examine the limitations of the browsers we’re dealing with: IE7, IE8, Firefox 3.6, Safari 4, and Chrome 5. To be more precise, we’ll be looking at the WebKit (Safari and Chrome), Gecko (Firefox), and Trident (IE) browser engines, as these are actually performing the rendering. The browser is just a shell for the rendering engine.

Let’s start with the best of the bunch, shall we? WebKit, which powers Chrome and Safari, is king of the heap when it comes to HTML5 support. Offering all but GeoLocation support when it comes to HTML5’s web app offerings (although it should be noted that MobileSafari can do GeoLocation), handling embedded content (<audio>, <video>, and <canvas>) with flying colors, and pretty strong form support (Chrome actually scoots ahead in this regard), this is the browser to aim at to start.

Next up, there’s Gecko, which powers Firefox. Firefox 3.6 is the version that adds in a bunch of HTML5 support, so you’ll want to make sure you’re fully up to date. Firefox also excels at HTML5’s web apps offerings and can handle all of the embedded content, but it completely falls short when it comes to forms support.

Lastly, there’s Trident, powering Internet Explorer. Besides a few basic web apps abilities, IE completely fails at HTML5 support. Microsoft is hard at work on IE9, which is showcasing some HTML5 abilities as a big selling point, but it still lags far behind the WebKit browsers and Firefox.

For a more complete rundown on the support offered by each browser, take a look at the article, “Comparison of layout engines (HTML5),” or the Web Designer’s Checklist. You can even hit up FindMeByIP.com to see what your current browser of choice is capable of.

Flash can be rendered in a variety of ways with regards to the browser and the rest of the HTML page content. Some are good, some are not so good, depending on your situation. These are affected by the WMODE parameter, applied when you call your Flash via the object tag.

The default behavior is “window.” This renders the Flash in its own “box” on top of all other browser content. This is fine if the Flash is the topmost item and has a matte color and square shape. But what if it should fit more with the content?

For that, we have WMODE “opaque.” This is similar to “window,” except now the Flash movie will respect z-index and rendering order for elements on the page. So things can be “on top” of the Flash.

Lastly, there’s WMODE “transparency,” which does exactly what you think it should do. Generally, you should only use this WMODE when you have a non-standard shape for your Flash, or if you have a background element in your HTML/CSS that you want to show through the Flash.

Throughout your web design training, you’ll encounter quirks from time to time. Experimenting with these various parameters when you encounter a strange behavior is the only way you’ll discover why your CSS dropdown menus are appearing “behind” your Flash movie or get an explanation for some other Flash development oddity.

If you’ve yet to encounter the following problem during your web design career, you probably will soon enough. So you’ve discovered your Flash movie is huge. Beyond belief. And it takes forever to load. Obviously, this is a problem. What to do? Well, here are some tips for shrinking your Flash movies.

1. Use as few colors as possible and avoid gradients wherever you can.
2. Learn how to create and utilize symbols. This is because a symbol, once created, is stored once, and placed many times. Since symbols can be buttons, movie clips, graphics, fonts, or sound files, utilizing the symbol feature can result in some major space-saving!
3. Going along with the symbols, instead of generating multiple symbols for different colors, use the effects panel’s tint to create different-colored instances of a single symbol.
4. Keep alpha transparency to a minimum.
5. Stick to a low number of fonts, and when you’re embedding fonts, choose only the characters or set of characters you need instead of the entire font.
6. Limit the different styles of lines you use and try to use the pencil tool more often than the brush stroke tool.
7. In the “Modify” menu, there’s an “Optimize” selection you can use to minimize the number of separate lines in your shapes.
8. Importing a bitmap image into Flash is something to avoid as much as possible; try to create vector graphics within Flash instead.
9. Before importing, resize your bitmap images to the exact size and image quality you want in the end.
10. Use looping sounds as often as you can and choose the lowest-possible quality level, in terms of sampling rate, bit depth, and bitrate, if possible.
11. Use keyframes and tweening to reduce the number of individual frames for your animation.
12. If only parts of the movie are actually animated, don’t animate the entire area, but only that particular part.

There are lots more ways to optimize things, but these are a great starting point. Fast load times encourage readers to stay on the page, so web designer skills like these are great to highlight on your resume; after all, engaged readers typically translate to happy clients. Here’s to smaller SWF files and faster load times!

You’re using Flash for animations, making some fun (or serious) movies, and you’re frustrated at how long it takes to animate realistic motion with some elements. Fear not—one of the most helpful Flash resources CS4 brought, the “Bone Tool,” has you covered. A strange name for a tool in a computer animation application, but it allows for what’s called inverse kinematic, or IK animations. These are animations that simulate the interactions between limbs, joints, and their other connected components.

Now, the initial thought might be that this is only good for animated animal-like figures (people, pets, etc.), but this can even be used to offer a blade of grass more realism! So you draw a big ol’ cartoon blade of grass, and it’s meant to be blowing in the wind. Before, you had to draw each frame, and the more frames, the smoother the motion.

Instead, select the Bone Tool, and, starting from the base, give the blade of grass a set of “joints” by clicking, dragging, then releasing. This will create a “bone” and “joint.” Click on the end “joint” and drag to set a second joint, and a third, and so on, until you reach the tip of the blade of grass. So now we’ve got a skeleton for our grass, marvelous!

Now we move on to actually generating the IK animation itself. There will be a new layer in your timeline called “Armature” that’s been created for you. Select a frame some ways down the line—maybe frame 80 or frame 120 (so we can get a few seconds of animation at 30 fps), and select the “Insert Pose” menu item. A keyframe is inserted and we get some background color filling up all the frames between frame 1 and the frame you chose.

Pick another frame to insert another Pose and make this one at the halfway point. So now we have two Poses set in addition to the initial (understood) Pose at frame 1. While staying at the frame you just picked to set your second (intermediate) Pose, switch back to the Selection Tool and start dragging your joints around until you have your grass bending at what you expect would be the halfway point. Once you’ve got your grass looking like you expect it would at that particular frame, great! You’re actually all done—the final frame should be identical to the first frame, so as to create a smooth animation.

Go on and preview your delightfully realistic grass blade, and go forth to animate with ever greater realism (and impress your clients with your shiny new bit of web design training)!

Here’s a common challenge you may encounter in Flash development: You’ve finished up your first version of the Flash movie, and you’ve realized that, well, it’s kind of big. Maybe too big? Maybe even so big that people will click away before it finishes loading. Fear not! You can check on just how long your Flash content will take to load using the “Bandwidth Profiler” and the “Simulate Download” functions.

From the “Control” menu, choose “Test Movie” (shortcut is command+Enter on Mac / ctrl+Enter on Windows)—this will render the movie into a SWF in a new window. Once that’s complete, from the “View” menu, choose “Bandwidth Profiler” (command+B on Mac / ctrl+B on Windows), which will change the view of this temporary SWF into a 3-panel state, showing info about the movie in the top left, a barline on the right, and your movie itself in the bottom panel.

Choosing “Simulate Download” from the “View” menu (which now has taken over the command+Enter / ctrl+Enter shortcut) will do just that. The “Download Settings” submenu in the “View” menu will allow you to adjust for a wide variety of possible download speeds.

In this way, you can check and see just how long that movie you made takes to load. If the Internet has taught us anything, it’s that web surfers will click away if the content they want to view doesn’t load quickly—it makes sense that most clients seek out freelance designers who can help make sure their readers stay engaged.

Perhaps one of the most valuable skills you can develop in your web design training is keeping your projects organized, especially if you have a lot of freelance web design jobs going on at once. Here are some quick tips for keeping your Flash projects (and possibly your sanity) in check:

• Create and use layer folders when you’ve got lots of layers on the timeline. More than 10 layers is probably a good rule, but adjust to your own workflow.
• Give your layers unique, descriptive names. Just like your id and class names in HTML/CSS, right?
• Give your ActionScripts their own layer, and have it be either the topmost or bottommost layer so they’re easy to find.
• Just like your layers, give your objects semantically meaningful names, and use folders to group related objects.
• Use the “Select Unused Items” bit from the from the Library drop-down arrow (just below the close x in the Library palette) to remove unused objects.

Just these few things can give you a huge leg up, not only when competing with, but especially when collaborating with other freelance designers.

There are a lot of ways to embed Flash content in a site. In fact, besides creating the Flash itself, embedding it in your pages is probably the most important part of Flash development. Now, it’s a bit dated, but A List Apart’s “Flash Embedding Cage Match” is a great place to start, and much of it is still valid. So, if you’re just becoming a web designer and want to learn the basics, head on over there and check out that article.

Ah, you’re back, good! Now that you’ve gotten some foundational bits down, let’s fast-forward to 2010. SWFObject has grown up a lot, taking over for UFO as of v2.0, and becoming, in many people’s eyes, the best way to embed Flash easily (yeah, I know, you’re all laughing, but seriously!). So let’s check it out.

SWFObject has two methods, static publishing and dynamic publishing. Here’s the breakdown:

Static Publishing
This is the more standards-compliant method, providing the best performance, and doesn’t rely on JavaScript for delivery (although JavaScript helps out if it’s available). This means it can reach a larger audience—i.e. Flash is installed, but JavaScript is disabled, automated tools like RSS readers can pick up the Flash content, etc. Here’s the three-step process:

1. First embed Flash and alternative content using the nested-objects method with IE conditional comments (as documented in the “Flash Embed Cage Match” article linked above)

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
       <param name="movie" value="myContent.swf" />
       <!--[if !IE]>-->
       <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
           <!--<![endif]-->
           <p>Alternative content</p>
           <!--[if !IE]>-->
       </object>
       <!--<![endif]-->
   </object>
   

2. Follow that up by including the SWFObject JavaScript library in the head. I recommend linking to the Google AJAX Library API version, conveniently provided below:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
   

3. Register your Flash content with SWFObject and tell the library what to do. The arguments, in order are: The unique id you used in your markup, and the Flash player version required. Two optional arguments are also available—you can read up on them at SWFObject’s Google Code repository.

So that’s static publishing. Now, what about that dynamic business? Here’s where things get a little more interesting.

Dynamic Publishing
Dynamic publishing starts with marked-up alternate content, which the JavaScript replaces with the Flash content you’re keen on embedding. The upside to using dynamic content is that it integrates much better with other scripted applications, allows for the use of dynamic variables (aka flashvars), and it avoids the click-to-activate mechanisms needed to activate active content in IE6+. That last one used to be kind of a big one, but it’s been deprecated by Microsoft, so it would only affect users who haven’t upgraded since April 2008.

The end result is that if you know JavaScript is always going to be around, then you pick the one that appeals to you the most. As for how the dynamic publishing works, this one is quite a bit more complicated, involving a lot more JavaScript, but offers some nifty stuff. Here we go.

1. Create some alternative content using standards compliant markup, like so:

   <div id="myContent">
       <p>Alternative content</p>
   </div>
   

2. As before, include the SWFObject JavaScript library in the <head>:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
   

3. Using JavaScript alone, instruct SWFObject to embed your Flash content. This is similar to the JavaScript you used above in the static publishing mode, but with more arguments—lots more. However, only five are required. These are, in order:
   1. swfUrl – the URL of your SWF file
   2. id – the id of the HTML element (which has your alternative content) you want to replace
   3. width
   4. height
   5. version – the minimum Flash version needed

   Everything else is optional, and you can peruse SWFObject’s documentation for all of the other parameters. So, for our example, here’s what you’d have for your JS:

   <script type="text/javascript">
       swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
   </script>
   

So why go through all this trouble? Because you’re making sure your pages can stand the test of time, that if the embed tag finally kicks the bucket, your Flash content will go on appearing on your pages. Most importantly, you’re creating a solid fallback for your Flash content, which makes it one of the more important web designer skills, especially in this day and age of iPhone/iPod Touch/iPad users.

For most of your freelance web development jobs, your end users won’t be familiar with using Flash, and that’s okay—after all, that’s why they hired a freelance web developer! To get around this, you’ll need to provide them with a simple way to change labels and other text content; in fact, this can make your services even more valuable. Gone are the days of being webmaster for every client you have (and in all likelihood, you’re very glad those days are gone!).

So, with that, here’s a method to display the contents of a file that’s been uploaded somewhere publicly available in a Label component instance.

// ActionScript 3.0
/* Import the required component classes. */
import fl.controls.Label;

/* Create a new Label component instance, set the wordWrap
and autoSize properties, and add the label to the display list. */
var myLabel:Label = new Label();
myLabel.text = "loading...";
myLabel.width = 530;
myLabel.wordWrap = true;
myLabel.autoSize = TextFieldAutoSize.LEFT;
myLabel.move(10, 10);
addChild(myLabel);

/* Create a new UILoader instance, add an event listener, and load the remote text file. */
var myURLLoader:URLLoader = new URLLoader();
myURLLoader.addEventListener(Event.COMPLETE, completeHandler);
myURLLoader.load(new URLRequest("http://www.helpexamples.com/flash/lorem.txt"));

/* Handler function for the URLLoader object. This function sets the text
in the label instance to the contents of the remote text file. */
function completeHandler(evt:Event):void {
    var txt:String = URLLoader(evt.currentTarget).data as String;
    myLabel.text = txt;
}

The real key here is the URLRequest line; this specifies the remote file we’re looking for. This can be a URL, an absolute path, or a relative path—so long as the Flash file is allowed to access it, it will work. If the file is on a separate domain though, make sure you’ve got your crossdomain.xml files squared away!

You’ve created a great Flash movie, and now you want to bring in some audio. You also want to make it easy to switch out the audio without requiring your end user to mess about in Flash. Unlike teaching someone how to use Flash, which, while also difficult, might also take away from your freelance opportunities, teaching someone how to use (S)FTP to move and replace files is a pretty simple.

Not only that, but if the user doesn’t end up playing the audio, then it’s never loaded, and you save on bandwidth. This can be important depending on your hosting plan and traffic level.

So let’s set things up to dynamically load an MP3. First, the old-school way, using the Sound class and loadSound() in ActionScript 2.0:

// ActionScript 2.0
var url:String = "http://www.helpexamples.com/flash/sound/song2.mp3";
var sound:Sound = new Sound();
sound.loadSound(url, true);

And then in ActionScript 3.0, using the Sound class with the load() and play() methods:

// ActionScript 3.0
var url:String = "http://www.helpexamples.com/flash/sound/song2.mp3";
var urlRequest:URLRequest = new URLRequest(url);
var sound:Sound = new Sound();
sound.load(urlRequest);
sound.play();

These are very simple examples, but every bit of web development training has to start somewhere, right? Once you’ve mastered this little snippet of ActionScript programming, you can learn how to bring in the ID3 metadata that MP3 files have embedded in them.

If you’re looking to beef up your freelance resume, you’ll want to show future employers that you’re up on all the latest web development trends. Being able to make use of fonts other than old standbys like Arial and Times might just help set you apart from other freelancers.

One of the best aspects of using Flash as opposed to pure HTML is that this sophisticated bit of web development technology allows you to choose any font you want for your projects. But in order for it to appear correctly and not fall back on whichever fonts the user has installed, you’ll want to embed your fonts in your movie files.

Thankfully, Flash offers this very ability. You’ll need a TrueType version of your font and the following ActionScript example:

// ActionScript 3.0
[Embed(source="assets/ARIAL.TTF", fontFamily="ArialEmbedded")]
var ArialEmbedded:Class;

var arialEmbeddedFont:Font = new ArialEmbedded();

var textFormat:TextFormat = new TextFormat();
textFormat.color = 0xFF0000;
textFormat.font = arialEmbeddedFont.fontName;
textFormat.size = 32;

var textField:TextField = new TextField();
textField.autoSize = TextFieldAutoSize.LEFT;
textField.wordWrap = true;
textField.defaultTextFormat = textFormat;
textField.embedFonts = true;
textField.text = "The quick brown fox jumps over the lazy dog.";
textField.width = 500;
textField.x = 25;
textField.y = 25;
addChild(textField);

The first line uses the [Embed] metadata to specify the font file, which you’ll need to have uploaded to your server (the “source” bit is the filepath to the TrueType file). The “fontFamily” bit can be changed to echo the name of the font you’re using, and the “arialEmbeddedFont” var can also be changed—just make sure to be consistent in your naming, or your script won’t be able to find what it’s looking for.