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!

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.

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.

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

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.

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.