Dynamic TextFields Anti-Aliased for Animation and Readability using Dynamic HTML Text

This article will outline the following flash issues requiring understanding to utilize shared fonts in Flash:

• How to build a shared library.
• How to share fonts in a shared library.
• How to plan for your fonts and their usage.
• Implementing shared fonts in Dynamic TextFields with HTML text.

In my time with Flash the most common text-requirement in a Flash movie has been the following:

1. The project requires text on the screen to be dynamic.
2. The project requires that the text anti-alias well.
3. The project requires that the dynamic text animate in some manner, at least into view, rather than simply suddenly being on the screen.
4. The entire movie should be as small as possible to make it snappy over a thin and reasonable bandwidth.

While you hear less about requirement #4 over the years, mostly due to increases in bandwidth, depending on the size of the project and how many SWFs are getting created, you still likely have to think about file size. I would go so far as to say that even if it is not mentioned explicitly as a requirement, it is understood implicitly to be one.

On requirement #1, the simple answer is loading in the text data. While the technique dejur may have been LoadVars objects, now replaced by XML, the bigger issue is that you are working with a TextField in a Dynamic Text state. The font issues change depending on the state you are using.

On requirement #2, the answer would normally be to apply anti-aliasing for “readability” (advanced anti-aliasing) if you want the text as clear as is possible. Suddenly, in your Dynamic TextField you are now confronted with having to embed your font outline in this TextField. No problem.

On requirement #3, stuff starts getting more complicated. What you really need to do here is anti-alias for “animation” which conflicts with anti-alias for “readability” since the Flash User Interface only applies these options in a mutually exclusive manner. So you change it to “animation” since this eye-candy is a requirement not likely to go away.

Back to requirement #4, you render the FLA into a SWF and confirm that the file size remains quite reasonable despite the fact that you are embedding your font. You are thrilled with your result (even though you are anti-aliasing for “animation” and not “readability.”) Even if you have to duplicate the TextField, Flash is smart enough to not re-save the font outlines and double the size of your SWF when it renders. Great!

Enter dilemma:

While some project elements are able to completely co-exist in a single SWF, the far majority of the projects on which I have worked load a number of SWFs, usually all into a single Movie that works like a loading container. Sometimes, things get more complicated than even this (images loading into MovieClips, in SWFs, that are loading into other SWF containers, etc.) The dilemma arises on a number of levels when you begin to realize that you are embedding that same font into a number of movies. Here are the issues (there might be more, but these are my top two):

1. Because you are placing font outlines in each movie (SWF) you are requiring additional bandwidth of the “web surfer” to re-download the font data for each movie (SWF) that loads.
2. If at some point in the project, you suddenly have to change a font that was previously applied, you have to open each movie (SWF) and meticulously change each TextField, pointing it to the right font and re-embedding the new font.

The solution I am going to explain resolves both of these issue and in a fairly slick manner. I will also tack on a solution that allows you to anti-alias for both “readability” and “animation” at the end (but it comes with a warning.) Let’s get started.

How To Build A Shared Library

The answer to our font bandwidth issue is found in something called a shared library. This is far easier than it sounds, but can sometimes be difficult to find info on (hence the article here.) Here is how you build a shared library, step for step (note that there a a lot of steps, but I am outlining steps you probably do without thinking so not much of this will seem new):

(The following assumes you are using at least the Adobe Flash 8 Designer/Developer tool.)

1. In Flash Designer, Create a new Movie (Flash Document.)
2. Save the new file as “fontLibrary.fla” (call it whatever you want)
3. Under File, Project properties, uncheck the “HTML” format and hit “OK” (we don’t need flash to create an HTML page for our fontLibrary.swf file.
4. In the timeline, change the one available layer into a “Guide” (We don’t want to accidentally create anything on the stage. Our fontLibrary should have no “stage’ assets.)
5. Now, in your project’s library, click the menu icon in the upper right corner of the library panel and select “New Folder.”
6. Rename the new folder to “Shared Fonts.”
7. Now, in your project’s library, click the menu icon in the upper right corner of the library panel and select “New Font.”
8. Give your font a name that will make the most sense when you come back and visit this fontLibrary or any of your movies that will use your shared fonts later on. For example, as a standard, I name the font starting with an underscore character and the project name, like “_nxFrameworkFont” which helps later in a number of ways (I will show you that very soon.)
9. Here is a big trick: Select your font name from the list (the one you want to embed) and be sure that none of the other boxes are checked (like Bold or Italics and size doesn’t matter here) and hit OK.
10. Now, while I will explain this later, go ahead and create two more versions of your embedded font, one with the Bold box checked and one with the italics box checked. I named these “_nxFrameworkFont-bold” and “_nxFrameworkFont-italic” respectively.
11. Drag all three of these fonts into the “shared fonts” folder you created before.
    Now we need to setup these new fonts for sharing.
12. Select the first font you create, right-click it and select “Linkage”.
13. Check the top three Linkage boxes: Export for ActionScript, Export for runtime sharing, and Export in first frame.
14. You do not have to associate this with a class, but rather specify the name of this fontLibrary.swf in the URL field. In my project, the SWF will be rendered as “fontLibrary.swf” and so that is exactly what I write in the URL field.
15. Apply step 14 above to all three fonts symbols you have created.
    Now, just save your work and render the SWF hitting [shift]+[F12].

You have completed the first step of building a sharedLibrary. Told you it was simple.

How to Share Fonts in a Shared Library

Now that you have your shared library, in my case named fontLibrary.swf, you need to use those fonts in your TextField animations in other movies (SWFs.) To demonstrate this, following these next steps:

1. In Flash Designer, Create a new Movie (Flash Document.)
2. Save the new file as “shell.fla” (call it whatever you want)
3. We need to setup our shared fonts and this is simple. At the top of your Library panel for this project, notice that you have a pulldown menu that shows you other libraries you currently have open. Go ahead and select the fontLibrary.fla from the list.
4. Now, drag the “shared fonts” folder to stage in your new “shell.fla” project.
5. Notice that nothing appears on the stage, but if you switch back to your shell.fla library in the library panel you can see the fold and all of the fonts are imported.
6. Notice that the font symbols state that they are “imported” – this is Flash doing the work of simply borrowing the outlines from the other SWF once this SWF and the fontLibrary SWF are both rendered.
7. We need to create a movie clip to animate with dynamic text in it, so go ahead and draw a box of any color on the screen.
8. Place a TextField above the box.
9. Select both the box as well as the TextField and create a new MovieClip out of it by hitting the [F8] key.
10. Be sure it is set to be a MovieClip and name it “mcMessage” and hit OK.
11. Now in the properties, with the MovieClip on the stage selected, give it an instance name of “objMessage”
12. Edit the MovieClip on the stage by double-licking it and select the TextField you created.
13. We want to change this to a dynamic TextField that can work with HTML, so go head and switch its state to Dynamic Text, and confirm that it is set to Multiline and HTML Text in the properties. Below where you changed its state to Dynamic Text, give the field a name of txtDynamic (you do not need to give it a “Var” name.) Go ahead and uncheck “selectable” and “show border” if they are toggled in the “on” position.
14. Now simply select the initial font we previously created and imported. Notice that because of the underscore “_” character, our font sits at or near the top of the list of available fonts.
15. Return to the scene and save your work.

Now we want to dynamically add some text and do a little animation, so add a layer to your “shell.fla” project and hit [F9] on that layer to add some ActionScript. Add the following ActionScript to the frame:

import mx.transitions.*;
import mx.transitions.easing.*;

this.objMessage.txtDynamic.htmlText = "The quick brown fox jumped over the lazy dog!";
new Tween(this.objMessage, "_alpha", Strong.easeIn,0,100, 2, true);

This is what we are doing. The import statements allow us to easily programmatically Tween our MovieClip. Next, we are dynamically adding htmlText to our TextField. This could be coming from XML or a LoadVars object, but we are hard coding it for the example. Finally, we are tweening the alpha of the MovieClip from 0 to 100 over a period of 2 seconds, which basically fades in the image.

If you run the “shell” movie now ([ctrl]+[enter]) you will notice that the MovieClip fades in, including the text with your shared font, and all of the HTML formatting. Very cool. For fun now you should go back into the fontLibrary.fla and in each font symbol, change it to another font (remember, then must all match, the only difference being whether the bold or italic boxes are checked.) If you re-render the fontLibrary.swf, and (without re-rendering the shell.swf) run the shell.swf, it will now show your animation and text using the new font in the fontLibrary.swf!

You should, however be wondering how it is able to anti-alias for animation at this point without embedding the font or selecting that as an option in the TextField properties? As importantly, you might also be wondering how we are getting bold and italic text to show up since we only applied the font without the bold and italic options to our TextField. And what if we changed the htmlText so that the word lazy should show up both as bold AND italicized? Would that work? Could you have simply shared a single font with the bold and italic boxes checked and would that single shared font have solved everything? All of these questions are handled in the next section.

How to Plan for Your Fonts and Their Usage

The biggest issue in using shared fonts is getting them to act like embedded anti-alias for animation fonts do inside a TextField, but in some cases looking like anti-aliased for readability at the end. In nearly all cases, animation is a requirement, even if only for a second when the text shows up on the stage. So you will notice that while creating one uber shared font with bold and italic boxes checked will work with the HTML to look correct, suddenly the animation will go away (rather than fade in, the background box fades in over 2 seconds, but the text is immediately on the screen.) This is why we create multiple shared fonts, and this is how that works:

In flash we only applied our most simple shared font to our TextField (not the bold font or the italicized font symbol). When flash renders the HTML into the TextField, it can easily render that font under most circumstances. By default it renders this as if we have embedded the font and setup anti-aliasing for animation (again, this is the default behavior.)

Now, once it hits the first HTML bold tag or Italics tag, flash realizes that the font symbol we are applying doesn’t contain those font outlines. Flash then goes looking for those fonts and specifically searches in a particular order. That order seems to be (though I can’t say I figured this out by anything other than hit or miss) (1)first it looks in any font symbols available, (2) then it looks on the hard drive of the user, and finally (3) it uses the most generic version (_sans, _serif, _typewriter, etc) it can figure out to use. Here rests the magic. It finds the right font to apply in our other font symbols and applies them without breaking the anti-aliased for animation behavior. Magical! Again, if all of those outlines were in one font symbol, it would have broken our animation. Try it and you will see.

But what does this mean for any italicized bold text. When you are using shared fonts (or font symbols at any time) and flash encounters a font reference that it cannot resolve, your text just disappears. For example if the word “lazy” was supposed to appear as italicized bold text per the HTML in the TextField, then the txtDynamic TextField would render out “The quick brown foxed jumped over the dog” (and skipped rendering that word "lazy" altogether.) The solution is, as you are likely imagining, creating another shared font symbol with both the bold and italic boxes checked! And problem solved. Since most other special text effects are handled outside of font outlines (for example, underlining text is not an outline but a text effect) embedding those four font symbols solves our need to share fonts and achieve animation like embedded fonts.

Implementing Shared Fonts In Dynamic TextFields With HTML Text.

At this point you should be able to understand this very quirky (but consistent) solution and while it would be overkill to apply this to only one TextField in only one SWF, go back and consider the project that includes quite a number of SWFs all with their own TextFields and embedded fonts. If you implement this technique, and someone yells “font change!” at any point in your project, you can now handle it in one simple place and with one quick SWF render!

Anti-Aliasing For Readability Footnote

As promised, I will talk about implementing “Anti-Aliasing for Readability.” The issue here is that you want your font to animate BUT you also want it to look it’s absolute best for reading. Well, consider the following simple line of code:

this.objMessage.txtDynamic.antiAliasType = "advanced";

And now you still get animated text, but it is also anti-aliased for readability. But recall that this comes with a warning. Animating text that is anti-aliased for readability can be processor intensive (on the client-side at runtime.) I will describe how the work-around for this works (briefly… because there is a downloadable example!)

In a nutshell, whether you are programmatically animating using the Tween class, or if you are animating on the timeline, you would want to wait until the animation completed before changing the antiAliasType on the TextField to “Advanced” (which makes it resize a little because of the difference in rendering.) In the downloadable example I show you how to apply this both at the end of a timeline animation as well as when the motion completes in a programmatic Tween.

For future ideas, you might look into custom programmatic anti-aliasing which might help you find a middle ground between anti-alias for animation and anti-aliased for readability.

Now click here for the downloadable sharedFonts with HTML and annimation!

For the Record: The last word on WMDs in Iraq

With my secret high-powered research tools called "google" and "wikipedia" and a search phrase like "Iraq WMD" I was able to uncover the most under-published under-reported evidence that I have seen in almost forever, this levied accusation against why we are still in Iraq and should never have gone there to begin with. But before I get into all of what I have uncovered, I thought it would be good to review a few very interesting facts about the War in Iraq:

The 109th Congress wrote up a document outlining a slew of reasons to travel into Iraq and unseat the leadership of that country. The most notable items on the list were items such as:

• Intelligence information that noted that Iraq was still not in compliance with the result of "Desert Storm" which included unseating Saddam if they were not complied with (something that Bill Clinton should have done, instead of dismantling the CIA at the same time.)
• Historical evidence including claims by Saddam when he attempted (multiple times) to assassinate President George Herbert Walker Bush (evidence and fact alone worth unseating him, in my opinion) since Dessert Storm.
• Intelligence information that implied there likely existed Weapons of Mass Destruction (WMDs) in Iraq.

This is by all means not a complete list of reasons why congress felt it was time to go into Iraq, and nobody contests the reality of first two items (recall when Saddam held UN inspectors hostage and steered them around munitions depots and their reports all stated that he was not complying with inspections?), but we hear a lot about how WMDs were never found and we as a nation were "lied to by the President!" This is the mantra of a segment of congress, both that voted for against going into Iraq and especially those who voted for going into Iraq (as in, "Yes, I voted that we go in, but I was LIED TO!"

First, check out the following definition of what exactly a WMD is: http://en.wikipedia.org/wiki/Weapons_of_Mass_Destruction

While the press after 9/11 was doing a lot of chatting about dirty bombs and suitcase nukes, I can say that while those would be considered a WMD, that none of the devices and tactics outlined in the wikipedia article would be something I would want stored in, near or around my home! In other words, like many, when I heard the term "WMD" I might have thought "nuclear bomb" but the term outlines a number of glorious ways to died that are equally if not more painful that being vaporized by a Nuke!

Take for example, Sarin Nerve Agent (a chemical weapon): http://en.wikipedia.org/wiki/Sarin

Ouch! A weapon classified by the United Nations as a WMD the symptoms are twitching, jerking, suffocating, vomiting and defecating, and eventually death if exposed to as little as .01 milligrams per kilogram of body weight. And if you happen to live through a micro-sized dose, then you will still have to live with brain damage as a result. Please, give me the Nuke over Sarin Nerve Agent any day!

Oh my gosh, why am I being so graphic!? For one reason and one reason only...

http://www.foxnews.com/story/0,2933,200499,00.html

In short, there were (and according to congressional reps, likely still exists a threat of) WMDs (of this kind) in Iraq. Anyone so ignorant enough to say "Well, everyone thought the President meant Nukes and so he is still A LIAR!" is simply exposing their ignorance and prejudice at this point. If you are still convinced, then apply the same test that I applied above and decide how you feel:

Would you be willing to expose your friends, family or kids to Sarin Nerve Agent (again, a UN classified WMD)? No? I didn't think so. Then stop splitting semantic hairs over WHICH kind of WMD was found in Iraq (hello?) and ask yourself why the press and elements of congress lambasted the WMD issue and were undervaluing the actual facts here? (what is the goofy agenda on that one?)

... or just continue to split hairs and be cool with Sarin Nerve Agent and propagate the idea that WMDs are ONLY Nukes and act like this stuff was never found!

I guess that is my last word, for the record!

UPDATED: Since writing this I have read that the Sarin Nerve Agent found represented a cache of degraded Sarin, meaning the threat of the Sarin was reduced by it's old age. But get this. Saddam was told as a condition of the result of Dessert Storm that all of those munitions must be turned over to the UN Inspectors, which it was not. Even in a degraded state, it is said by the defense department that these were "not the WMD we were looking for when we went in this time" that this Sarin in it's degraded state was still potentially lethal. I can say that no matter the age, the fact that they were still there and that Saddam was keeping them from post-Desert Storm UN Inspectors was still grounds enough based on the results of Desert Storm to unseat Saddam (which is what we said we would do, back then.) Thank God we didn't find other newer WMDs, but that is no reason to not keep our word on demanding Saddam's compliance with the results of Desert Storm. Not finding what we thought could be there isn't a LIE but rather a blessing in the light of what we have found to be true in Iraq.

Accomplishments of President George W. Bush

These days, I hear a lot of people asking the question "What has George W. Bush accomplished in his presidency?" Usually this arrives with a rhetorical, "Name for me one thing?" to which I will respond with a short list of significant notables on our President. But before I start, understand that this banter comes from the camps of presidential hopefuls that all come from our US Congress,... the very same congress that not long ago was accused by the general public of being the "do-nothing Congress" (interesting, isn't it?)

This is in no way a complete list, but for the record:

With regard to children/education-

• Defended teachers by defending them from frivolous lawsuits (Teacher Protection Act)
• Opened previously restricted funding to private effective organizations that provide after-school programs.
• Required states to perform criminal background checks on prospective foster /adoptive parents.
• Created report-cards for school (No Child Left Behind Act) which will likely be a first historical move toward better the public school systems and outcomes.
• Provided funding for teacher-accountability programs to state programs ($2.4 billion)
• Created financial protection (non-taxable) to college tuition savings plans.

With regard to the economy-

• Signed the top two largest income tax cuts in US history.
• Increased small business incentives to expand through job creation.
• Participated in setting into motion laws to hold corporate criminals to account for their actions.
• Reduced taxes on dividends and capital gains (affecting anyone with a retirement plan.)
• Exempting food from trade and embargo sanctions (in other words, we still help feed countries that are creating problems in the world)
• Federal provision for states that are setting into motion plans to help persons with disabilities work from home ($20 million)
• Increase and solidify financial benefits to those who are approved to adopt children, through tax credits ($5,000 per child and $1 billion over 5 years to increase that to $10,000 per child)

With regard to the environment-

• In the same vein as helping to fund effective private after school programs, he set into motion a pilot program to fund private conservation programs (initially $10 million)
• Submitted a comprehensive Energy Plan to congress to develop cleaner fuel technologies, immediately converting to more natural gas in the short run (something many communities are experiencing already) and reducing our dependence on oil.
• provided matching grant program to inspire private land owners to become conservationists (inspiring people toward change, rather than just pouring money into a program that simply spends more money on state owned land resources)

With regard to national safety/ protection and terrorism-

• Took on al Qaida in Afghanistan successfully unseating their oppressive leadership and bring to justice known terrorists that were causing trouble around the world and in the US since the presidency of Bill Clinton.
• Unseated and delivered justice to Saddam Hussein (again, while people want to get hot and bothered about "WMD"s not found in Iraq, understand that this was one item of more than a dozen political and safety related reasons to go into Iraq, including but not limited to multiple attempts by Saddam Hussein to assassinate former US Presidents- in my opinion, that is reason ALONE to unseat the man!)
• Finally disarmed Libya (remember the movie Back to the Future, "The Libyans?... Run for it Marty!!!!") and without any bloodshed.
• Coordinated tracking and hunting down of known terrorists, recovering from the changes to our national intelligence previously dismantled (in my opinion and the opinion of a number of known books by former CIA staff) by President Bill Clinton.
• Killed the previous treaty with the Soviet union that kept the US from building a previous planned Anti-Ballistic Missile defense system, and simultaneously signed and set into motion the largest nuclear arms reduction in world history with Russia.
• Increased benefits to people serving our nation in the armed forces (three times provided raises)
• Started to withdraw troops from Bosnia, and announced the withdraw of troops from Germany and Korean DMZ (of course, one doesn't hear about this or the fact that Bill Clinton did not accomplish this)
• Earmarked about 20% of the defense budget (we unquestionably need defense) for next-generation weaponry (which keep more US citizens further from harm)

With regard to international diplomacy-

• Challenged the UN to live up to their responsibility and not become another defunct League of Nations (challenging their current state of relevance)
• Withdrew the US from UN-based plans for world rules on gun control (defending our US Constitutional right to bare arms)
• Brought together one of the largest organized efforts in world history to share intelligence across nations to effectively battle against unconventional warmongering terrorists (note that we have not experienced the kind of national attacks in part caused by decisions and dis-investments left behind by the Bill Clinton era, while effectively and specifically foiling a number of terrorist plans throughout the world over the past years since "September 11")

With regard to national federal government reform-

• Initiated a review of federal agencies with a goal of eliminating federal government bloat.
• Initiated outsourcing some of those same jobs to private sector companies with plans to review the effectiveness of those entities to increase efficiency.
• After "9/11" consolidated over 20 overlapping agencies left by previous administrations to both refine processes, increase safety, and reduce cost.
• Set into motion a national intelligence review that requires all intelligence sectors to review and flatten management, streamlining communication, in the form of an aggressive 5 year plan.
• Converted federal contracts(that looked more like grants of money) into performance-based contracts with measurable performance goals that would be reviewed for effectiveness.

With regard to health-

• Made scholarship funds for the national Health Service Corps tax-free (some more folks would personally be more philanthropic, rather than simply spending more tax money!)
• Strengthened the National health Service Corps such that it could put more needed physicians in the most critical areas in the US.
• Signed Medicare reform that: moves it toward more effective and responsible privatization over the next 10 years, changes prescription drug benefits such that it focused on being able to get prevention-based drugs into the hands of people over simply paying for their surgeries and not eliminating those surgeries (more options rather than just reactions), new tax-free health saving plan (a first in US history) for citizens

With regard to "community"-

President George W. Bush set into motion something called the "Responsibility Era" which focus on personal responsibility and civic volunteerism, in contrast to programs that focus on unaccountable federal philanthropy through taxation and an general attitude of entitlement.

Of this he said, "In a compassionate society, people respect one another and take responsibility for the decisions they make in life. My hope is to change the culture from one that has said, if it feels good, do it; if you've got a problem, blame somebody else — to one in which every single American understands that he or she is responsible for the decisions that you make; you're responsible for loving your children with all your heart and all your soul; you're responsible for being involved with the quality of the education of your children; you're responsible for making sure the community in which you live is safe; you're responsible for loving your neighbor, just like you would like to be loved yourself."

These can be viewed in the following programs:

• The (1)White House Office and the (2)Centers for the Faith-Based and Community Initiative - connecting seven federal agencies to beneficial local community-based activities that correspond with the services those agencies provide.
• The USA Freedom Corps (a first) a clearing-house for volunteering opportunities for US citizens.
• Issued an Executive Order that compassionately moved people with disabilities from "institutions" to community-based facilities wherever and whenever possible.
• Increased funding for low-interest loans to help people with disabilities get access to empowering devices.
• Revised "Department of Housing and Urban Development"s Section 8 rent subsidies so that people with disabilities could purchase homes and use up to a years worth of vouchers to finance down payments on homes they want to purchase (rather than simply rent forever without a hope of owning!)
• Committed US funds to provide AIDS medication to millions suffering in Africa.

This president embodied the very nature of the phrase "compassionate conservative" in a manner that encourages people toward being responsible and community focused without an attitude of entitlement, not empowering their dependence upon a federal government but rather empowered to participate in solving problems in an accountable manner.

There are so many first that we are already taking for granted here and have forgotten that he set into motion in US history. While not everyone will get excited about what he has specifically stood for, nobody can state that he hasn't accomplished anything during his presidency.

The question is, will the next president work toward strengthening this progress, having paid attention to these "changes" in our US reality. Or will they disassemble the momentum, trading these effective new-born changes in for federal programmes that are simply financed by higher taxes and are traditionally far less accountable (this thought based on the fact that most tax-based programming that lost funding when it was outsourced by George W Bush using performance contracts simply complained first and foremost about privatization and performance analysis rather than simply repositioning itself for more effective performance)?

Well, I hope you found this interesting and I hope you consider this review to be enlightening when you hear banter about future presidential "change."

You've Got Mail!

There is this scene in the movie "You've Got Mail" when Tom Hanks character helps Meg Ryan's character purchase food at a grocery store using a credit card in a cash-only checkout line. Well, this is the grocery store named "Zabars", a famous deli around 79th and Broadway on West Side.

The next stop on the Subway going downtown takes you near to the building where Sigorney Weaver's character lived in the movie Ghostbusters (next to Central Park.)

I was in the City to hang out with a few friends and watch movies and chat, this last Friday night. Here is another shot of Zabars!

Finally, here is a pic of our little movie-watching crew. We had the most fun conversation about older films and Barbara made an amazing dinner for us ("comfort food" as she called it, which definitely made me feel "comfy," although I am not sure that "comfy" is necessarily the same as "comfort"!)