Birnam Designs Blog -- sharing tips, resources, ideas, and more on web development and design

The new “anti-alias for readability” setting for text in Flash 8 and up looks really good. The only problem is that there are sometimes unexpected behaviors related to text wrapping. That’s because, by default, the advanced antialiasing uses “grid fitting”, which is not used by traditional (anti-alias for animation) text. Grid fitting is a text rendering technique that aligns horizontal and vertical lines in the font glyphs to a whole pixel. For instance, say you have a lower-case ‘L’ that is draw as a one-pixel wide bar. In order to render it as crisply as possible, that one-pixel wide bar should be lined up with the monitor’s actual pixels.

Unfortunately, this alignment process can alter the width of the text, which can alter the wrap points in multiline textfields. This normally wouldn’t be noticeable in static text fields, but it is very obvious if the textfield is being animated. Especially when being scaled! The text will jump around as the wrap points keep changing.

Fixing the jumping wrap problem »

I just found this short and to-the-point flowchart over at The Google Cache that helps you (or your clients) to decide whether or not to use an all-flash website.

Ok, so it’s overly simplified. Personally, I think some pages can benefit from being all-flash, like a virtual tour that is part of a bigger site, but I do try to discourage my clients from having a flash-only site. If you’re unaware of the downsides to flash, the biggest reason is because search engines are completely blind to content in a flash movie. Completely. And even if you’re not overly concerned about being available to search engines, that doesn’t mean your business or organization wouldn’t benefit from that availability.

If you're not convinced this is a problem, read on...

Are you having trouble setting the alignment (e.g. right align) of a dynamic HTML textfield in Flash? The paragraph align settings — even if you specify them through a TextFormat object — don’t work when the html text has been set dynamically. Why?

The text inside the html text field is being rendered into an HTML block element, even if you don’t specify any HTML tags in the text, and the contents of that block are, by default, aligned left. So even if the text field is aligning the contents to the right, all that is accomplishing is aligning a 100%-width block to the right. The alignment of a 100% block doesn’t matter, since it takes up the entire width anyway. And it doesn’t touch the left-aligned text inside!

So don’t forget to wrap any text you want aligned to the right in an HTML text field with the proper HTML alignment techniques — such as <p align="right">(text)</p>.

asfunction: is one of those neat little tricks that I almost never use, so I usually end up having to look up the exact terminology every time. If you already know about asfunction:, maybe you’re like me and are looking it up again for the zillionth time, but now maybe you’ll be able to remember where to find it. If you don’t know about asfunction:, it can really come in handy sometimes, so check it out:

asfunction: is the Actionscript equivalent to calling javascript: from a link in a standard HTML page.

Read about use and syntax »

Here’s a quick tip — even though it was far from quick to figure out in the first place. In fact, I’ve been banging my head on the desk over this one for days.

Ever have a dynamic text box in flash that will show text when it uses device fonts, but not if you do embed any of the font? I couldn’t even get Arial to show up! Only if I switched it to static text, or dropped the embedded characters would anything show up. At first I thought it a problem with the font — it’s one of the few OpenType fonts I use and I couldn’t remember if I’d ever tried embedding OpenType in flash before. So I even went so far as to convert the font (via VirualPC -> Ubuntu -> FontForge). Nothing. I tried converting to PostScript and TTF.

The solution? It turns out the text box was set to a left-margin of a negative amount. I changed this to zero, and viola. Everything works — OpenType and all.

Check your margins!

I recently ran into a really puzzling problem. I was creating an administrative interface in Flash, which included a few form elements (flash components) and some custom buttons. One of the buttons was a toggle switch, with a funny behavior! I could only click the button once! Subsequent clicks were ignored until I moved the cursor. Just a single pixel would suffice, but for some reason it needed to reactive the onrollover event for the button.

After hours of searching for clues online, I found some clues...

In Flash, selecting a keyframe in the timeline will also select the stage object (graphic, movieclip, etc.) involved in the keyframe. When I am animating an identical transition of a large number of objects at the same time — such as setting the alpha to 0 to fade-out a set of objects — I will select all of the keyframes involved in the edit. This will automatically select the instances of the objects in the transition.

The only problem is that the Properties panel is sensitive to the type of object that is selected. This sensitivity is normally a very good thing, but in this case it means that the panel still shows the Frame properties, not the instance properties that would allow me to edit the alpha. In order to show the instance properties, I have to click on the stage. Unfortunately, this can unselect everything that I just selected! Traditionally, I get around this by shift-clicking one of the selected objects. This will toggle the selection for just that object, which I can shift-click again to reselect. Now the instance properties are available, and the edit can be made.

There is a better way! I just accidentally discovered a handy way of switching from the frame properties to the instance properties without losing the selection! After selecting the keyframes in the timeline, hit “v” to re-enable the selection tool (or “q” to use the transform tool), and now the Properties panel show the instance properties! The selection is intact.

In the last eight years, I have made lots of advances with my web development. I am always learning new methods, new tools, and new strategies on the path to intelligent web development. These are tips I’ve learned from my progress so far.

(Inspired by the Graphic Push article “The Path to Intelligent HTML“)

Flash

Single Files - NO

Working with Flash, it is very easy (and tempting!) to put everything into a single file. As long as your flash file is neatly organized, this shouldn’t be a problem, right? Not quite. It’s very easy to create gigantic files that not only take forever for the user download, but which take forever to compile, wasting precious development time. I first started dividing my flash movies into multiple files in an attempt to solve bandwidth problems for the end-user. But it wasn’t until Flash introduced the ability to import external JPGs and MP3s instead of just other SWF files that I really started loving this technique.

My favorite example is with galleries or slideshows. These can include dozens or even hundreds of images, yet since the point of these movies is to show off the images, lowering the resolution really just defeats the purpose. This is an easy recipe for an enormous flash file! So, to solve this problem, I create the initial interface in flash, but load the images from external files - each with their own loader bar if necessary. This splits up the download nicely for the user, and the sky’s the limit for the number of images you can use with this technique.

External Definitions - YES

Traditionally with Flash, it has been possible to load text files full of variable definitions. I used this to its fullest potential, but it was… well, clunky. Importing single values was fine, but importing a collection of values was done by defining “value_01″, “value_02″, “value_03″, etc. After the variables were loaded, you would run a function to move all of these individual variables into more accessible structures like Objects or Arrays (or arrays of objects!). There had to be a better way. And then Macromedia gave it to us: XML!

Now, if I want to include variables in external files, I can use an XML document. I particulary like to use XML defined values when I am creating galleries and slideshows. I mentioned above that I like to import the external JPGs at runtime. I also like to define what images are used and the order in which they’re used with XML files. This is one of the best ways to speed up project updates! Say, for instance, a client wants to rearrange the order of slides in a slideshow. If you made the movie the traditional way, you’ll have to open up Flash, move clusters of frames around, and recompile. But by using external JPGs defined in an XML document, all you have to do is open up the XML in a text editor and cut and paste the nodes that need rearranging. Easy!

Another favorite use of external XML is for link definitions. If a client needs to change the URLs of external links within the movie, all it takes is a quick XML update. I also use this technique for menus, image sequences, and content.

Reusable Scripts and Components - YES

After developing in flash for a while, you will have accumulated a library of functions, objects, and animations that you frequently reuse in other projects. Scripts can be included into a Flash document with the “#include” directive, which can help you avoid repetitive changes. For instance, say you have a button that triggers a function on the rollOver event, and this button is animated over many keyframes. Normally, if you wanted to change the rollOver event for that button over the entire animation, you would have to edit the button’s actions at every keyframe. But if you defined the button’s actions in an external script, and “#include” that script at every keyframe, you simply edit the external script once to change the button’s behavior for the entire animation!

Graphics, buttons, and movieclips can be reused as well by being saved to an external library. You can open the external library, and drag and drop these items into your current document. But it gets even better with components! In Flash, components are a nice method of packing your most powerful custom objects in a way that makes them even more accessible - just look for your custom elements in the Components panel! You can even ‘run’ them inside the Flash development environment, so you can see how they will look in the final compiled output! (this is called “Live Preview”) Components can be simple, or can involve complicated, programmatically-rendered designs. They’re the ultimate in resusability and, if done right, in scalability as well.