In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan.  This simulated 3D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise.  But it doesn’t stop there:  the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as the click-and-scrub input fields of numerous Adobe dialog boxes. 

If you’re a Flash developer and interested in click-and-drag functionality, you might be interested in a new tutorial series I’m working on at CommunitMX.com.  CMX content is generally subscriber-based, but this intro article is free.  It does take you completely through the steps of creating basic click-and-rotate content (in other words, it’s not a hook), though future articles will delve into variations on the theme.  The bulk of the article is written in terms of ActionScript 2.0, but the same general principles apply in ActionScript 3.0, and an AS3 summary is provided.

http://www.communitymx.com/content/article.cfm?cid=8F0CA

As a quick note to regular readers of this blog, I’ve been waaaaay behind — as you know! — in my usual activity.  The simple reason is that I’ve been working on two new books in addition to my normal client workload.  One of these is the O’Reilly title I mentioned back in March.  Although my chapters were done at the time, a handful of challenges tipped O’Reilly into delaying the original publication date.  Given the change, we were faced with the opportunity of rewriting the book for the next version of Flash (post-CS3), and we took it.    That meant dumping some chapters, combining others, splitting yet others, and writing new content altogether.  Ultimately, ActionScript 3.0:  The Quick Answer Guide for Flash Professionals is a better book for all the additional input and reworking, and I’m thankful for that.  The other book an update to Tom’s and my Foundation Flash CS3 for Designers, which we’re working on as I type this.

When the dust settles, I’ll be a on a no-new-books kick for a while.  And I’ll back to blogging.    I miss it.

In one of the recent comments to “How to Position Movie Clips Based on Browser Resizing,” a look at the ActionScript 2.0 Stage.onResize event, reader Eddy asked about adjusting an image loaded at runtime; particularly, about fading in an image set to scale and reposition itself based on the size of the browser.  I was originally going to reply to his comment directly, but this seems to me like something that would make a decent blog entry of its own, so here’s one particular stab at it. 

Using a two container approach

The trick to fading in one item over another is to change the alpha transparency of the upper item.  If you’re fading in (as opposed to fading out), that means changing the alpha from zero to 100 (we’re talking AS2, by the way; in AS3, that would be zero to one).  If you’re fading in something that’s loaded from the outside, you have to wait until the external item — here, it’ll be a JPG — has fully loaded.  If you’re publishing to Flash Player 7 or higher, one of your options is the MovieClipLoader class, so we’ll use that for this walkthrough.  If you’ve read “How to Position Movie Clips Based on Browser Resizing,” then some of this will look familiar.

Here’s the first chunk of ActionScript 2.0:

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

Stage.scaleMode = "noScale";
Stage.align = "TL";

var container:MovieClip = this.createEmptyMovieClip("mcContainer", 0);
var pictA:MovieClip = container.createEmptyMovieClip("mcPictA", 0);
var pictB:MovieClip = container.createEmptyMovieClip("mcPictB", 1);

The first two lines import the Tween class and all the tween-related easing classes in the transitions.easing package.  After that, the Stage class’s scaleMode and align properties are specifically set to values that allow for programmatic response to changes in the SWF’s dimensions — such as when the user resizes the browser — when the SWF is embedded at 100% width and height in the HTML.

Finally an arbitrarily named variable, container, is declared and set to an instance of the MovieClip class.  In AS2, this happens by way of the MovieClip.createEmptyMovieClip() method, as invoked on the global this property.  In this context, the term this refers to the main timeline, because that’s where this code is located.  The second parameter, 0, refers to the depth of this movie clip, which is the lowest possible depth a dynamically created movie clip can hold.

The new movie clip is given the instance name mcContainer, but the variable container makes an equally valid reference.  Inside this container clip, two additional containers are created in the same way.  Their references are pictA and pictB, respectively, and they’re set to depths 0 and 1 inside container.

We need a bit more prep work before we can dive into the fun stuff, so add the following new ActionScript:

var root:MovieClip = this;
var firstRun:Boolean = true;
var currentPict:String = "A";
var tw:Tween;

var listener:Object = new Object();
listener.onResize = positionContent;
listener.onLoadInit = loadHandler;

In order to make the main timeline easier to reference in later code, a variable named root is declared and set to the term this (again, a reference to the main timeline).  A firstRun variable holds the Boolean value true and will act as a signpost to determine whether or not code is being executed on the user’s first arrival.  The currentPict variable currently refers to the string “A” (yup, just the letter A) and will be used to toggle back and forth between the inner containers pictA and pictB.  A Tween instance (tw) is declared, but not yet set to anything; and finally, a listener variable is declared and set to an instance of the Object class.  Every one of these variables is arbitrarily named.

The listener variable will act on behalf of the Stage class and the MovieClipLoader instance (whose creation is your next step).  Two properties are assigned to listener:  onResize (that is, the Stage.onResize event) and onLoadInit (that is, MovieClipLoader.onLoadInit).  Each of these properties stores a reference to a custom function — positionContent() and loadhandler() — that will be executed as the events occur.  You’ll see in a moment how the MovieClipLoader instance and the Stage class will add the listener variable to their VIP lists.

When the user resizes the browser, which in turn resizes the SWF, a Stage.onResize event will be dispatched.  The listener variable’s onResize property will trigger the positionContent() function, which will move around the desired content.  Same idea for the MovieClipLoader instance, which keeps track of loaded movie clips and image files.

Let let’s get to it.  Here’s some more code:

var mcl:MovieClipLoader = new MovieClipLoader();
mcl.loadClip("firstImage.jpg", pictA);
mcl.addListener(listener);

Here, an arbitrarily named variable, mcl, is declared and set to an instance of the MovieClipLoader class.  The MovieClipLoader.loadClip() method is invoked on mcl, which is instructed to load a file named firstImage.jpg into the pictA inner container clip.  In the very next line, the MovieClipLoader.addListener() method is invoked on mcl, which causes mcl to keep tabs on the listener object.  That means we need to write a loadHandler() function, so that Flash knows what to do when firstImage.jpg arrives.  Here’s that function:

function loadHandler():Void {
  if (firstRun) {
    Stage.addListener(listener);
    positionContent();
    firstRun = false;
  }
  pictA.swapDepths(pictB);
  tw = new Tween(root["pict" + currentPict], "_alpha", Strong.easeOut, 0, 100, 2, true);
  togglePicts();
}

This gets a tad knotty, so let’s step through it carefully.  Remember that firstRun variable?  Here’s where it comes into play.  If this is the first time the loadHandler() function is being executed — that is, firstRun is true — then the Stage.addListener() method tells the Stage class to keep track of listener, just like mcl is doing.  In effect, this means that the positionContent() function will now be executed whenever the SWF resizes.  (Don’t worry, positionContent() hasn’t been shown yet, but it’s coming in a few paragraphs.)  For good measure, the positionContent() function is called at this point, too, just to position the desired movie clip(s) even if the browser hasn’t been resized.  Then firstRun is set to false, because the previous two lines only need to be run during the visitor’s first encounter with the SWF.

After that if statement, the MovieClip.swapDepths() method is invoked on pictA, swapping that inner container with its sibling, pictB.  If you scroll up a bit, you’ll see that pictA was created first, at a depth of 0 inside the container clip (that is, below pictB).  This swapDepths() method now puts pictA above its sibling at depth 1, and consequently moves pictB to depth 0.

The tw variable is now set to a new Tween instance that changes the MovieClip._alpha property of pictA from 0 to 100 over two seconds.  The first parameter of this Tween constructor function is probably the most interesting.  The expression is root["pict" + currentPict] … so what does that mean?  Well, remember, root simply refers to the main timeline, which contains a handful of variables, including the variables pictA and pictB.  So the main timeline is our reference point.  From the main timeline’s point of view, there are two variables that start with the string “pict” (which is the next part of the expression), and finally, the value of currentPict happens to be “A”, so the full expression effectively reads root.pictA.  From the main timeline’s point of view, that simply means pictA, which refers to the inner container clip that has just been instructed to fade itself in from zero to 100.

Why use a made-up variable, here, instead of _root?  For discussion on that question, see “Is _root Evil?”  For more information on this brackets ([]) approach to targeting variables, see “How to Reference Objects Dynamically.”  The reason a dynamic reference is useful here is because we can simply change the value of currentPict from “A” to “B”, and back again, to keep flip-flopping which container is the currently operative movie clip.  Finally, a custom togglePicts() function is called, which does just that (changes “A” to “B”, or vice versa).

Here’s the positionContent() function:

function positionContent():Void {
  container._width = Stage.width;
  container._yscale = container._xscale;
}

This can get as crazy or simple as you like.  In this case, the width of container clip is set to the width of the Stage, and its _yscale is set to the same value as its _xscale, which simply ensures that container maintains its current aspect ratio when scaled.  The fading and depth swapping that occurs with pictA and pictB isn’t affected by the positioning of container.

Here’s the togglePicts() function:

function togglePicts():Void {
  if (currentPict == "A") {
    currentPict = "B";
  } else {
    currentPict = "A";
  }
}

Pretty straightforward.  Now, in Eddy’s question, the website provided a way to change the background image.  Let’s step through how that might happen.  Assuming a button symbol with the instance name myButton, take a look at the following code:

myButton.onRelease = buttonHandler;

function buttonHandler():Void {
  mcl.loadClip("theSecondImage.jpg", root["pict" + currentPict]);
}

The Button.onRelease event is assigned to a custom function named buttonHandler().  The buttonHandler() function invokes MovieClipLoader.loadClip() on the mcl instance, passing it a new JPG to load, and a new container in which to load it.  Remember, at this point, the custom loadHandler() function has already been called (it was triggered when theFirstImage.jpg loaded).  The last thing that function does is call togglePicts(), which changes the value of currentPict from “A” to “B”.  At this point, then, the value of root["pict" + currentPict] actually points to pictB.  The mcl instance is already listening to listener, so when theSecondImage.jpg loads, loadHandler() will be called again.  Here’s that code again, just for reference:

function loadHandler():Void {
  if (firstRun) {
    Stage.addListener(listener);
    positionContent();
    firstRun = false;
  }
  pictA.swapDepths(pictB);
  tw = new Tween(root["pict" + currentPict], "_alpha", Strong.easeOut, 0, 100, 2, true);
  togglePicts();
}

The code inside the if statement won’t run this time, because firstRun is false.  The swapDepths() line will swap pictA and pictB, putting pictB back on top.  The tw variable will be set to a new instance of the Tween class.  Even though the code doesn’t change, the value of root["pict" + currentPict] has changed, which means it’s now pictB that will be tweened from an alpha of zero to 100, thus fading in pictB.  After that, togglePicts() changes currentPict from “B” back to “A” and the cycle can easily repeat again, for as many images as you want to load.

Eddy could, for example, offer a second button with this code:

myButton2.onRelease = buttonHandler2;

function buttonHandler2():Void {
  mcl.loadClip("theThirdImage.jpg", root["pict" + currentPict]);
}

Just another Button.onRelease event handler.  Here, a third image is loaded, and the container it’s loaded into is — as it happens — pictA (simply because the value of currentPict is “A” again).  The inner two containers, pictA and pictB, keep swapping depths as needed, and the value of currentPict always ensure that the upper container is the one that fades in.

Here’s the full code discussed, all on one grand swoop.

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

Stage.scaleMode = "noScale";
Stage.align = "TL";

var container:MovieClip = this.createEmptyMovieClip("mcContainer", 0);
var pictA:MovieClip = container.createEmptyMovieClip("mcPictA", 0);
var pictB:MovieClip = container.createEmptyMovieClip("mcPictB", 1);

var root:MovieClip = this;
var firstRun:Boolean = true;
var currentPict:String = "A";
var tw:Tween;

var listener:Object = new Object();
listener.onResize = positionContent;
listener.onLoadInit = loadHandler;

var mcl:MovieClipLoader = new MovieClipLoader();
mcl.loadClip("a.gif", pictA);
 mcl.addListener(listener);

function loadHandler():Void {
  if (firstRun) {
    Stage.addListener(listener);
    positionContent();
    firstRun = false;
  }
  pictA.swapDepths(pictB);
  tw = new Tween(root["pict" + currentPict], "_alpha", Strong.easeOut, 0, 100, 2, true);
  togglePicts();
}

function positionContent():Void {
  container._width = Stage.width;
  container._yscale = container._xscale;
}

function togglePicts():Void {
  if (currentPict == "A") {
    currentPict = "B";
  } else {
    currentPict = "A";
  }
}

myButton.onRelease = buttonHandler;

function buttonHandler():Void {
  mcl.loadClip("b.gif", root["pict" + currentPict]);
}

My favorite mechanism for embedding SWFs, hands down, is Geoff Stearns’ SWFObject.  It’s clean, lightweight, and easy to use.  Since April 2006, SWFObject has been my first choice for working around the “click to activate and use this control” warning in Internet Explorer.  Microsoft has decided to remove this activation behavior from Internet Explorer in April 2008 — right around the corner, as of this writing — but there’s still plenty of reason to keep right on using SWFObject.  Why?  Because it provides an elegant way to detect what version of Flash Player (if any) a website visitor has installed.  If you’re using the On2 video codec, for example, it means your site requires Flash Player 8 or higher.  With SWFObject, you can detect if your visitor has at least 8 and then display the SWF; otherwise, display a stand-in message (or image), such as “This site requires Flash Player 8 or higher.”  But what if you want to redirect to another page instead?  Or what if you want to display two different SWFs, depending on what’s installed?  Read on. 

Getting familiar with SWFObject

Geoff’s website explains in detail how to use SWFObject, and he also wrote an Adobe article on the subject.  In a nutshell, you download the source file, which comes in a ZIP archive, you extract swfobject.js and put it somewhere in your site, such as among your HTML documents in the root or some subfolder of the root.  Then you reference this external JavaScript file in the <head> element of any page that intends to use it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Some Document</title>
  <script type="text/javascript" src="swfobject.js"></script>
</head>

Naturally, the src attribute of that <script> element has to path correctly to the JavaScript file.  As shown, the swfobject.js file would be in the same folder as the HTML file that references it.

This allows the HTML document able to create a SWFObject object, then use that object to embed a SWF.  The SWF will automatically replace the contents of <div> element with an arbitrarily named id attribute, such as “flashcontent” (though you could just as easily name it “bananaHead”).

<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

This <div> element can hold stand-in text, as shown, or an <img> element, or whatever you like.

<div id="flashcontent">
  <img src="someImage.jpg" alt="Some image" width="320" height="240" />
</div>

If the user doesn’t have JavaScript enabled (most users do) or if the user doesn’t have the version of Flash Player you specify — you’ll see this in a moment — the <div> and all its content will be displayed in the browser. If the user does have the specified version of Flash Player (and JavaScript enabled), the browser will display the Flash content.

That part is handled like this.

<script type="text/javascript">
  var so = new SWFObject("someMovie.swf", "mymovie", "320", "240", "9", "#FFFFFF");
  so.write("flashcontent");
</script>

… where so is an arbitrarily named variable that points to the new SWFObject instance.  The first parameter is the name of your SWF; the second parameter is a unique identifier (like the <div> element’s id attribute) that can be reference with JavaScript if desired; the third and fourth are the width and height; the fifth is the minimum required version of Flash Player (here, Flash Player 9), and finally, the background color of the SWF, which can differ from the actual background color of the FLA.

Note that the parameter inside the write() method references the stand-in <div> used earlier by its id.  Badda bing.  It’s that easy.

Using SWFObject for more

What if you want to send users to a different page altogether if they don’t have the right version of Flash Player?  What if you have one FLV video encoded in On2 for users with Flash Player 8 or higher, and another encoded in Sorenson Spark for users with Flash Player 6 or 7?  SWFObject gives you that, too.  And it’s still really easy.

Under the hood, SWFObject creates a deconcept object (the name of Geoff’s website) as soon as the page loads.  This deconcept object contains a SWFObjectUtil child object that, in turn, features a getPlayerVersion() method.  This method returns an object with three useful properties:  major, minor, and rev.  You can use those numbers to detect very specific versions of Flash Player.  As of today, for example, the current version of Flash Player is 9,0,115,0.  Of those numbers, 9 is the major version, the first 0 is the minor, and 115 is the revision, which correspond to the properties just mentioned (the last number refers to internal builds, and is irrelevant to version sniffing).

Here’s a quick example that uses the SWFObjectUtil() method to embed a Flash Player 8 or higher SWF for an On2 video and, for users with Flash Player 6 or 7, a SWF that only requires either of those versions:

<script type="text/javascript">
  var so;
  var flashVersion = deconcept.SWFObjectUtil.getPlayerVersion();
  if (flashVersion.major >=   {
    so = new SWFObject("On2Vid.swf", "mymovie", "200", "200", "8", "#FFFFFF");
  } else if (flashVersion.major >= 6) {
    so = new SWFObject("SorensonSqueezeVid.swf", "mymovie", "200", "200", "6", "#FFFFFF");
  }
  so.write("flashcontent");
</script>

The so variable is declared, as before, but this time isn’t set to anything — yet.  Next, an arbitrarily named variable, flashVersion, is set to the return value of the SWFObjectUtil.getPlayerVersion() method.  Inside an if statement, the major property of this object (referenced by way of the variable as flashVersion.major) is compared against the number 8 to see if it’s greater than or equal to.  If it is, the so variable is set to a new instance of SWFObject, as before, and embeds a SWF that displays an On2 video.  Otherwise, if flashVersion.major is greater than or equal to 6, an alternate SWF is embedded.  If the user has, say, Flash Player 5 — or none at all, or JavaScript disabled — the original content of the <div> element is displayed.

Let’s say you’ve got some nifty content that requires Flash Player 9,0,115,0, because it displays fullscreen video.  If your visitor doesn’t have the right version of Flash Player, you want to send that visitor to another page on your site that touts the benefits of Flash Player 9 (or whatever … you get the idea).  Here’s one way to do that:

<script type="text/javascript">
  var so;
  var flashVersion = deconcept.SWFObjectUtil.getPlayerVersion();
  if (flashVersion.major >= 9 && flashVersion.rev >= 115) {
    so = new SWFObject("Flash9Content.swf", "mymovie", "320", "240", "9.0.115", "#FFFFFF");
  } else {
    window.location = "someOtherPage.html";
  }
  so.write("flashcontent");
</script>

Here, the if statement checks both the major and rev properties.  Make sure to always check for greater than or equal to (>=), so that next year, when most of your visitors have Flash Player 10, everything will still fly without a hitch.  This time, the else clause sets the native JavaScript window.location property to another HTML document.  If the user doesn’t have 9,0,115,0 or higher installed — for example, has Flash Player 8 installed instead, or none — the browser will immediately go to someOtherPage.html.  If the user doesn’t have JavaScript enabled, the original <div> content will be displayed.  If all’s well, however, your user will see your SWF.

I just finished the last of my eleven chapters for a new O’Reilly title, ActionScript 3.0:  The Quick Answer Guide for Flash Professionals, last Wednesday.  This was shortly after lunch, 12:30 on the dot, and a neat thing happened almost as I lifted my hands from the keyboard (more on that in a sec).  The rest of the book is still being written, and it’s shaping up nicely.  I’m pretty excited about this project already!    The aim of this reference is to help developers, even keyframe coders, get up to speed with AS3, so keep your eyes peeled in June!

I took a wild tumble off the grid while I was researching and writing for the past five or six weeks, so I apologize for my late replies to blog comments and email.  I’ve been catching up on my inbox since last Wednesday and plan to reply to everyone as soon as I can.  Thanks, so much, to my friends for all the encouragement!  (Go, FlashGods.org!)

I’ll be going over author reviews in the coming weeks, but the heavy lifting is behind me.  The neat thing that happened, on day I finished, is this:  I went downstairs to gaze out the window for a few moments, and right as I did, UPS brought a package to the door.  I opened the box, and inside was a huge tin of Turkish coffee (over a pound!), imported from Turkey, sent by reader Çağatay.  What a way to commemorate the milestone!  Thanks, Çağatay!  This coffee is a real treat!

You certainly don’t need ActionScript to make use of embedded fonts.  You can always just embed font outlines manually by selecting a text field, then using the Embed button in the Property inspector.  Select your range of characters, type in your text, then publish; you’re good to go (and you only need to do it with dynamic and input text fields:  static text fields embed font outlines automatically).  In fact, if your text field has an instance name — something you can also set in the Property inspector — then you can determine its text content with ActionScript and the embedded font outlines still hold.  But if you’re using ActionScript to create text fields on the fly, the mechanics are a bit different.  Let’s take a look. 

First, create your font symbol

To get your font(s) into the SWF, use a Font symbol. They’re easy enough to make, but doing so is not necessarily as intuitive as using Insert > New Symbol or Modify > Convert to Symbol. Instead, right-click/Command-click inside the Library panel and choose New Font from the context menu.  This brings up the Font Symbol Properties dialog.  Ignore the Name field for the moment.  Use the listbox in the Font field to find the font you want to embed.  Different variations, such as bold and italic, must each be imported as individual symbols, so select the appropriate checkbox if necessary.  You’ll see a choice for Bitmap text, but you should only select that if you want your fonts rendered as bitmaps (rasterized; that is, no vector shapes).  Doing so can save on file size, but your embedded fonts won’t scale as well, like any bitmap.  The Size field only matters if you use bitmapped text.

Once you’ve chosen your font and selected the variations (if desired), give your font a name in the Name field.  This is the name what will show up in the Library panel, so you might want to use, say, “Blackadder normal” for the non-bold, non-italic version of a font named Blackadder ITC and “Blackadder italic” for the italic version of that font.

Having font symbols in your Library isn’t enough.  You’ve also got to give them Linkage identifiers (AS2) or Linkage classes (AS3).  Right-click/Command-click on each font symbol and select Linkage from the context menu.  Select Export for ActionScript, which will do a number of things at once: either a) in AS1 or AS2 documents, it will enable the Identifier and Class fields, then populate the Identifier field with the font’s Library name; or b) in AS3 documents, it will enable the Class and Base Class fields, then populate the Class field with the font’s Library name (the Base Class field will be populated with a reference to the flash.text.Font class).

If you’re using AS3 and supplying a class name, you need to make sure your Linkage class name is valid. Like variables, class names can only contain alphanumeric characters — no punctuation, except for underscore (_) or dollar sign ($), and no spaces — and the first character can’t be a number. For this example, your “Blackadder normal” might become, say, BlackadderNormal. When you click OK on the Linkage Properties dialog, Flash will warn you that no such class exists and will offer to write it for you automatically. Agree to that, and you’re ready for the code.

Now, on to the ActionScript.

An answer, short and sweet, and how it works (AS2)

There are two ways to make use of an embedded font with code:  either with an instance of the TextFormat class or the StyleSheet class.  We’ll look at both.  Here’s the first example:

var fmt:TextFormat = new TextFormat();
fmt.font = "Blackadder normal";
fmt.size = 32;

var text1:TextField = this.createTextField("tf1", 0, 0, 0, 0, 0);
text1.autoSize = "left";
text1.embedFonts = true;
text1.setNewTextFormat(fmt);
text1.text = "Lorem ipsum dolor sit amet."

In the first line, an arbitrarily named variable, fmt, is declared and set to an instance of the TextFormat class.  TextFormat features all sorts of styling properties, and two of those are font and size.  Here, the font property is set to “Blackadder normal,” which is the Linkage identifier that was given to the font in the Linkage Properties dialog.

Next, another arbitrarily named variable, text1, is declared and set to an instance of the TextField class.  In AS2, there is no direct way to instantiate a text field, such as new TextField (for that, you need AS3).  The indirect way is to use the MovieClip.createTextField() method, which is here invoked on the global this property, which happens to refer to a movie clip because this code is in a frame of the main timeline (the main timeline is, in fact a movie clip).  This method provides a return value, which is a reference to the newly made text field, stored in the variable text1.  So text1 is enough to refer to the new text field, but you could also use tf1, which is the instance name provided as the first parameter.  The rest of the parameters, all zeroes, can be other values if you like, but whatever you use, they refer to (in order):  depth, x position, y position, width, and height.  Why set them all to zero?  Well, x and y are totally up to you.  I usually prefer to set a width and height of zero because the very next line, text1.autoSize = "left", instructs the text field to resize as needed to contain its text (other valid autoSize values are "center" and "right", which change the justification of the text).

The line after that is the important one.  The TextField.embedFonts property, as invoked on text1, is set to true.  Next, the TextField.setNewTextformat() sets the fmt object (the TextFormat instance) as the default styling for this text field.  Finally, a string of text is supplied to the TextField.text property.  Be aware that you can also use TextField.setTextFormat(), which allows you to set formatting after text has been added to the text field (optional parameters even allow you to specify which characters should be affected).

Alternatively, you can format your text with the StyleSheet class, which requires HTML formatted text.  Check it out:

var css:TextField.StyleSheet = new TextField.StyleSheet();
css.setStyle("p", {fontFamily:"Blackadder normal", fontSize:32});
css.setStyle("a", {textDecoration:"underline"});

var text2:TextField = this.createTextField("tf2", 1, 0, 0, 0, 0);
text2.autoSize = "left";
text2.embedFonts = true;
text2.styleSheet = css;
text2.html = true;
text2.htmlText = "<p>Lorem ipsum dolor
<a href='http://www.quip.net/'>sit amet</a>.</p>";
text2._y = 52;

This time, no TextFormat instance is needed.  Instead, you’re creating a StyleSheet object, which works very much like normal CSS.  Note that in AS2, the StyleSheet class is accessible as a child of the TextField class, which is why both terms appear in the variable declaration and new expression.  If you like, you can use the import directive and avoid the extra keystrokes, like this:

import TextField.StyleSheet;
var css:StyleSheet = new StyleSheet();

Either which way.

In any case, an arbitrarily named variable, css, is declared and set to an instance of the StyleSheet class.  This gives css access to all the functionality defined by that class, which includes a setStyle method.  The StyleSheet.setStyle() method accepts two parameters:  a) the name of a CSS selector (in other words, what HTML element to style), and b) an object that contains the CSS style properties to use.  In actual CSS, the fontFamily property would be font-family, and fontSize would be font-size.  In ActionScript, it’s close enough, but bear in mind that Flash only understands a very small subset of the CSS spec, just like it only understands a very small subset of the HTML spec.  In that second parameter, the curly braces ({}) are a shortcut for the expression new Object().  Note that fontFamily is set, once again, to the Linkage identifier set earlier.

After that, the rest is pretty much the same.  Note that this time the text field is created at depth 2, so that it doesn’t overwrite the first one.  Again, embedFonts is set to true.  This time, because the text is formatted as HTML, the TextField.html property is set to true, and the htmlText property is used to supply the text.  The TextField._y property is set to 52 just so the second text field appears beneath the first one.

An answer, short and sweet, and how it works (AS3)

ActionScript 3.0 works a bit differently, but the new approach makes sense in an elegant way.  Check back to the AS2 version for information on the details that overlap, but here are the same two examples in AS3, with a brief summary of changes after each one.

var fnt: BlackadderNormal = new BlackadderNormal();

var fmt:TextFormat = new TextFormat();
fmt.font = fnt.fontName;
fmt.size = 32;

var text1:TextField =  new TextField();
text1.autoSize = "left";
text1.embedFonts = true;
text1.defaultTextFormat = fmt;
text1.text = "Lorem ipsum dolor sit amet."
addChild(text1);

This time, the font is simply instantiated, just like any other object — because it is a Font instance.  So … an arbitrarily named variable, fnt, is declared and set to an instance of BlackadderNormal, as supplied in the Class field of the Linkage Properties dialog.

The TextFormat instance works almost exactly the same, only this time, the font property is set to the Font.fontName property of the fnt (BlackadderNormal) instance.

The TextField instance is also very nearly the same.  In ActionScript 3.0, you have the convenience of simply saying new TextField(), which is nice.  Instead of the setNewTextFormat() method, you’ve got a defaultTextFormat property (AS3 still has the setTextFormat() method for text already present; works pretty much the same).

The final line, addChild(text1), adds the text field to the display list, so that it becomes visible.

Here’s the StyleSheet update:

var css:StyleSheet = new StyleSheet();
css.setStyle("p", {fontFamily:fnt.fontName, fontSize:32});
css.setStyle("a", {textDecoration:"underline"});

var text2:TextField =  new TextField();
text2.autoSize = "left";
text2.embedFonts = true;
text2.styleSheet = css;
text2.htmlText = "<p>Lorem ipsum dolor
<a href='http://www.quip.net/'>sit amet</a>.</p>";
text2.y = 52;
addChild(text2);

This time, the StyleSheet class stands alone.  Here, the fontFamily property is set to fnt.fontName, rather than the Linkage identifier of AS2.  The second text field is created just like the first, as a direct instantiation, and the addChild() method adds the second text field to the display list as well.  Notice that in AS3, the TextField._y property loses its underscore, as is the case with all previously underscored properties.

One of the main tenets of good Web design is the principle of progressive enhancement.  In general, the idea goes like this:  make sure the user can access a web site’s essential content regardless of browser.  It shouldn’t matter whether the user visits your site with Internet Explorer, Firefox, Safari, Netscape, or pick your favorite flavor.  In fact, the site’s content should be accessible even without JavaScript or peripheral plugins like Flash Player.  Once the basics are covered, use CSS to enhance the visual design.  Then, and only then, introduce the whizz-bang stuff — nifty rollovers, AJAX interactivity, Flash — and do it in a way that doesn’t penalize users who don’t have (or choose to disable) the needed machinery.

Sound pretty neat?  I’ve seen a few examples of this online and at conferences, so I delved into this topic myself to see how much fun it might be.  Turns out it can be somewhat challenging, but definitely fun to see the results.  I put together an example in order to explore the basic mechanics of this form of progressive enhancement — a slideshow SWF that takes its cue from the HTML in which it appears — and turned it into a three-part series on CommunityMX.com.  The first part is free and covers how to get the HTML from the Web page itself into the SWF.  The follow-up articles go into how to parse that HTML in AS2 and AS3.  CommunityMX offers free trial memberships, so if you aren’t interested in becoming a subscriber, you can wait until the follow-up that interests you gets posted (not sure yet when that will be), then sign up for the trial membership.  Of course, if you want to subscribe, that would be cool too!

http://www.communitymx.com/content/article.cfm?cid=02395

Flash Player has supported a limited subset of the HTML specification since version 6 — just set a text field’s htmlText property to an HTML-formatted string and you’re good to go.  Fortunately, <a> (anchor) tags are among the supported few, which means you can even put working hyperlinks inside your text.  Not only that, but Flash includes a special protocol, asfunction, that allows you to trigger functions from those hyperlinks, in case you prefer to do that instead of visiting URLs.  ActionScript 3.0 uses a different approach, but if you’re coding in AS1 or 2, just replace http://someURL.com with asfunction:someFunction,someParam, as described elsewhere on this blog.  If you’re coding in timeline keyframes, it’s all pretty straightforward.  But asfunction can seemingly break when used in custom class files.  Here’s what’s going on and how to fix it. 

A bit of backstory

When a text field responds to an asfunction trigger, it looks for the specified function inside the movie clip that contains the text field in question (that is, the container object of that text field, or its parent).  Again, if you’re coding on the timeline, everything tends to fall into place.  Imagine the following ActionScript 2.0 in a keyframe of the main timeline:

function linkHandler(param:String):Void {
  // do something neat with the hyperlink
}

myTextField.htmlText = "<a href='asfunction:linkHandler,param'>click me</a>";

When a user clicks the words “click me” in this text field, asfunction looks for a function named linkHandler() in the movie clip (aka the timeline) that contains this text field.  And of course, there it is, in the very same keyframe.

In some custom class situations, the above concept still works without a hitch.  If your class extends MovieClip, for example, then the class itself becomes the “timeline” that contains both the text field and asfunction’s function.

class CustomClass extends MovieClip {
  private var tf:TextField;
  public function CustomClass() {
    tf = this.createTextField("tf", 0, 0, 0, 100, 22);
    tf.html = true;
    tf.htmlText = "<a href='asfunction:linkHandler,clicked'>click me</a>";
  }
  private function linkHandler(param:String):Void {
    trace(param);
  }
}

In the preceding code, an arbitrarily named property, tf, is declared and — inside the constructor function — set to an instance of the TextField class by way of the MovieClip.createTextField() method.  This method succeeds here when invoked on the global this property because the class extends MovieClip (i.e., it is a movie clip).  In the following line, tf’s TextField.html property is set to true, which allows it to accept HTML input, then its htmlText property is set to the same HTML-formatted string as before.  Note that asfunction still points to a custom linkHandler() function, this time passing in the parameter “clicked” (a string).  The private linkHandler() method (which could be public too, either way) hears asfunction’s call when the hyperlink is clicked.  All is still well — the Output panel traces the word “clicked” because param’s value is that word.

Note:  To test the above class, you’ll have to save the preceding code as a simple text file named CustomClass.as and put it into the same folder as a new FLA.  Inside that FLA, draw a quick rectangle and convert it to a movie clip symbol.  Right-click / Command-click the symbol in the Library and choose Linkage from the context menu.  Check “Export for ActionScript” and type the name of the class (CustomClass) into the Class field.

So what’s the problem?

The problem is, your class might not extend MovieClip (or extend anything!) at all.  Which would be fine.  There’s no reason to extend MovieClip, or any class, unless the class you’re writing actually is an example of the class you’re extending.  In the following code — almost identical — asfunction is no longer able to find its linkHandler() function:

class CustomClass {
  private var tf:TextField;
  public function CustomClass(target:MovieClip) {
    tf = target.createTextField("tf", 0, 0, 0, 100, 22);
    tf.html = true;
    tf.htmlText = "<a href='asfunction:linkHandler,clicked'>click me</a>";
  }
  private function linkHandler(param:String):Void {
    trace(param);
  }
}

What’s the difference?  This time, the class doesn’t extend anything.  It’s instantiated in the main timeline …

new CustomClass(this);

… and fed a MovieClip instance — here, the global this property — as a parameter.  The only reason for the parameter is so that the target reference inside the constructor function can be used in the very next line as the MovieClip instance required for the createTextField() method.  The difference may be subtle, but when this class is instantiated, the text field becomes an immediate child of the main timeline.  The problem is, the class itself — which contains the linkHandler() method — is also a child of the main timeline, which means asfunction is looking in the wrong place for linkHandler().  As always, asfunction is looking in the movie clip that contains the text field.  Here, the movie clip is the main timeline, but the desired function is inside an object (this CustomClass instance) inside the main timeline.  So close, but yet so far, eh?

So what’s a solution?

The easiest way to fix the disconnect is to re-route the function, which can be done with a single line.  Here’s a quick look at the constructor function only:

public function CustomClass(target:MovieClip) {
  tf = target.createTextField("tf", 0, 0, 0, 100, 22);
  tf.html = true;
  tf.htmlText = "<a href='asfunction:linkHandler,clicked'>click me</a>";
  tf._parent.linkHandler = this.linkHandler;
}

The workaround here takes advantage of the fact that the MovieClip class is dynamic, which means it can have properties and methods added to it at runtime.  In this case, a reference is made to the movie clip that contains the text field — tf._parent (the TextField._parent property of tf) — and then a new function is declared in that movie clip and set to the function defined inside the class.  Because the constructor function accepts a target parameter, you could also use the following in this scenario, which means the exact same thing:

target.linkHandler = this.linkHandler;

It’s interesting to note that linkHandler(), as defined in the class, is private, yet the twin function, dynamically set to a different MovieClip instance, is able to invoke this private method without any issues.  That’s just the broken way it works in AS2.  It shouldn’t do that, but hey, you’re a developer.  That makes you like a stage hand.  You keep the magician’s secrets.

Is there a better solution?

There is a better solution — though “better” is subjective, and you really only need the alternate approach if the scope of your function needs to reside inside the class.  Under the current setup, if you replace trace(param); with trace(this);, you’ll see _level0 in the Output panel.  Why?  Because the dynamically added function exists in the main timeline, so the this reference thinks that’s where it is.  (It only happens like this because the parent of the text field happens to be the main timeline.  The point, however, is that this refers to an object that isn’t the CustomClass instance.)

To re-route not only the function, but its scope, use the Delegate class as follows:

import mx.utils.Delegate;
class CustomClass {
  private var tf:TextField;
  public function CustomClass(target:MovieClip) {
    tf = target.createTextField("tf", 0, 0, 0, 100, 22);
    tf.html = true;
    tf.htmlText = "<a href='asfunction:linkHandler,clicked'>click me</a>";
    tf._parent.linkHandler = Delegate.create(this, linkHandler);
  }
  private function linkHandler(param:String):Void {
    trace(param);
  }
}

O’Reilly and Adobe have teamed up on a new website dedicated to Rich Internet Applications (RIA).  Among the first featured articles is a comparative look at ActionScript 3.0 and its predecessors, 2.0 and 1.0, in which Colin Moock offers a number of solid insights (and encouragements) toward learning the new language.

http://www.insideria.com/2008/01/actionscript-30-is-it-hard-or.html

Reader James Colvin wrote me in mid-December to ask if I had any thoughts on playing a timeline backwards.  As it turns out, this question comes up every now and then on the Adobe forums, where longtime regular kglad usually posts his very handy custom function in reply.  In kglad’s version, the MovieClip.nextFrame() and prevFrame() methods are used in cahoots with setInterval() to accomplish the goal.  He often assigns the function to the Object.prototype property of the MovieClip class, which makes the new functionality available to all movie clips (a pre-AS3 technique).

My initial reaction was to search the forums and send back a link, but James’ question had an interesting twist:  could this non-standard timeline movement include easing?  Wow, what a cool challenge!  So I thought about it off and on over the holidays, and a neat solution occurred to me just this morning. 

A handful of answers, not so short, but sweet

What follows is my personal take on a solution, presented in three formats:  two versions in AS2 and one version in AS3.  Why the two versions of the AS2?  Frankly, while both are fairly short, one is even simpler than the other.  The only thing is, it involves an AS2 feature some would argue as inefficient.  (To my thinking, it would only be a problem in complex FLAs, but I’ll supply both and you can take your pick.)  The second AS2 version is close enough to AS3 in syntax that it acts as a good introduction to the new language.

The trick to my approach, in all cases, is to use the native Tween class for the easing, then take note of a numeric property adjusted by the programmatic tween.

ActionScript 2.0, Object.watch() approach

import mx.transitions.Tween;
import mx.transitions.easing.Bounce;

stop();

var w:Object = new Object();
w.prop = 0;
w.watch("prop", onUpdate);

function onUpdate(prop:String, oldVal:Number, newVal:Number):Number {
  gotoAndStop(Math.floor(newVal));
  return newVal;
}

var tween:Tween = new Tween(w, "prop", Bounce.easeIn, 58, 2, 4, true);

So what’s going on?  This particular batch of code may look a bit more cryptic than my usual examples, I realize, but once you see what’s going on, it’s not too bad.

The first two lines import the Tween and Bounce classes.  There are a number of easing classes in AS2, and you’ll find them in the Components Language Reference rather than the ActionScript 2.0 Language Reference (… Regular approximates a standard timeline tween, Strong is stronger than that, Bounce gives you what it says [a bit of bounce!], None gives you a tween without easing, and there are a few more; search “About easing classes and methods”).

Next, a simple stop() halts the timeline.  Keep in mind, this code appears in frame 1 of the main timeline. so James’ animation (and yours) will start on frame 1 as well and extend as far as you need — in this example, the animation (a series of standard timeline tweens) extends through frame 58.

Now it gets a bit interesting.  Check out these three lines again:

var w:Object = new Object();
w.prop = 0;
w.watch("prop", onUpdate);

An arbitrarily named variable, w, is declared and set to an instance of the Object class (to me, “w” stands for “watcher,” but name your variable what you like).  This w object is given a property named prop, which is set to 0.  As we continue, this property will be updated by the Tween class to indicate which frame in the main timeline to travel to.  Finally, the Object.watch() method is invoked on w.  This is the line that some will find inefficient, so keep that in mind as you experiment.  The reason is, Object.watch() causes Flash Player to keep a constant eye on the value of w.prop (or whatever property you feed in), which sets up a tight loop that may monitor the property longer than you need it to.  For the sake of this example — and, I would argue, for many simple implementations — you’re probably fine.  What Object.watch() does is trigger a custom function (provided by you) whenever the given property (here, prop) changes.  Note that the property is provided in quotes, and the function is provided without the parentheses.

And what might this custom function be?  Check it out.  The syntax is a bit weird, but for as useful as Object.watch() is, the weird is worth it.

function onUpdate(prop:String, oldVal:Number, newVal:Number):Number {
  gotoAndStop(Math.floor(newVal));
  return newVal;
}

The function receives three incoming parameters:  prop, oldVal, and newVal.  Here, prop is the property (referred to as a string) that was passed in earlier by w.watch().  oldVal is the value of that property — before it gets changed by whatever force changes it (for us, that force is the Tween instance).  newVal is the value after the property gets changed.  Inside the function, a simple gotoAndStop() tells the main timeline to proceed to a frame determined by the prop property (in turn determined by the Tween instance).  The Math.floor() part rounds down the number, in case it’s not an integer.  If you run the tween from, say, 58 to 2, prop will update from 58 downwards to 2.  The exact numbers will change depending on easing, and the timeline will travel to each of those frames (backwards or forwards) in response.  The return statement is needed to ensure that w’s prop property actually updates.

Finally, we come to the tween:

var tween:Tween = new Tween(w, "prop", Bounce.easeIn, 58, 2, 4, true);

An arbitrarily named variable, tween, is declared and set to an instance of the Tween class.  A number of parameters feed the constructor, and here’s what they mean:

• w is our Object instance;
• "prop" is w.prop, again indicated as a string;
• the expression Bounce.easeIn is a static method of the Bounce class (a standard ease out would be Regular.easeOut; again, check the Help docs);
• 58 is the starting position, frame 58;
• 2 is the destination position, frame 2;
• 4 means “do this tween over a period of four seconds”;
• true means “yes, seconds” (if this one was false, the previous parameter would refer to four frames, rather than seconds — that would be much quicker!)

And that’s it.  The neat thing is, the Tween class gives you a number of useful methods and events, so you can respond to the completion of a tween (for example) by repeating it, or repeating it backwards (and so on):

// An example, using Tween.onMotionFinished
// and Tween.yoyo()
tween.onMotionFinished = function():Void {
  this.yoyo();
}

Why tween from frame 58 down to 2 instead of down to 1?  As soon as the playhead hits frame 1 again, all this ActionScript we’ve been discussing gets triggered all over again.

ActionScript 2.0, custom event approach

If you prefer not to use Object.watch(), here’s another approach.  It requires a small custom class file in addition to the keyframe code, so we’ll look at both.  Note how closely the keyframe code matches the previous version:

stop();

import mx.transitions.Tween;
import mx.transitions.easing.Bounce;

var w:Watcher = new Watcher();
w.addEventListener("update", onUpdate);

function onUpdate(evt:Object):Void {
  gotoAndStop(Math.floor(Number(evt.prop)));
}

var tween:Tween = new Tween(w, "prop", Bounce.easeIn, 58, 2, 4, true);

Instead of the Object.watch() portion — in fact, instead of the Object instance at all — we now have an instance of a custom Watcher class.  This instance, w (same variable name as before, for convenience) features a Watcher.update event, which is handled to perform a custom onUpdate() function.  This happens via the addEventListener() method.  The onUpdate() function again tells the main timeline to gotoAndStop(), only this time there’s only a single parameter, evt.  The evt parameter carries with it a property named prop, and that property tells the timeline which frame to visit.  Same concept, different approach.

Here’s the code for the Watcher class.  This goes in a text file external to the FLA.

import mx.events.EventDispatcher;
class Watcher {
  private var _prop:Object;
  public var addEventListener:Function;
  public var removeEventListener:Function;
  private var dispatchEvent:Function;
  public function Watcher() {
    EventDispatcher.initialize(this);
  }
  public function get prop():Object {
    return _prop;
  }
  public function set prop(o:Object):Void {
    _prop = o;
    dispatchEvent({type:"update", prop:o});
  }
}

The native EventDispatcher class is imported, so that the Watcher class can dispatch events.  The class is declared, and a handful of properties are declared:  _prop (should be familiar by now) and three functions, which are provided by the EventDispatcher.initialize() method just inside the constructor.  (See “How to Raise Custom Events (EventDispatcher)” for details on this procedure in AS2.)

A pair of getter/setter functions allow _prop to be changed from outside the class (in this case, by the Tween instance), and note that the set function dispatches the event, of type “update” and with a property prop whose value is determined by the incoming value (again, by the tween).  In the keyframe code that uses addEventListener(), the gotoAndStop() line that uses evt.prop gets its value from prop as seen here.

ActionScript 3.0

AS3 no longer supports Object.watch(), so the only possibility for an alternate approach involves a custom event.  This version’s keyframe portion matches the AS2 version almost 100%.  (See Justin Everett-Church’s blog for reasons why AS3 crossed this feature of its list.)  Here’s the code:

import fl.transitions.Tween;
import fl.transitions.easing.Bounce;

stop();

var w:Watcher = new Watcher();
w.addEventListener(WatcherEvent.UPDATE, onUpdate);

function onUpdate(evt:WatcherEvent):void {
  gotoAndStop(Math.floor(evt.prop));
}

var tween:Tween = new Tween(w, "prop", Bounce.easeIn, 58, 2, 4, true);

The import statements change just a tad (the package is now fl.transitions, instead of mx.transitions).  The addEventListener() line uses a static WatcherEvent constant instead of the string “update”.  The onUpdate() function only changes in that its incoming parameter is of type WatcherEvent, rather than Object.  What this should tell you is that we need two custom classes for the AS3 version:  Watcher and WatcherEvent.  Here they are:

package {
  import WatcherEvent;
  import flash.events.EventDispatcher;
  public class Watcher extends EventDispatcher {
    private var _prop:Object;
    public function Watcher() {};
    public function get prop():Object {
      return _prop;
    }
    public function set prop(o:Object):void {
      _prop = o;
      dispatchEvent(new WatcherEvent(WatcherEvent.UPDATE, o));
    }
  }
}

Here, the class actually extends EventDispatcher, rather than using it as a mix-in.  The syntax changes a bit, but the concept is still the same.  Here, the constructor is empty.  This time, the set function dispatches a new instance of WatcherEvent, along with the updated value, o.

package {
  import flash.events.Event;
  public class WatcherEvent extends Event {
    public static const UPDATE:String = "update";
    private var _prop:Object = new Object();
    public function WatcherEvent(type:String, prop:Object) {
      super(type);
      _prop = prop;
    }
    public function get prop():Object {
      return _prop;
    }
    public override function clone():Event {
      return new WatcherEvent(type, _prop);
    }
  }
}

WatcherEvent extends the Event class, then provides the custom event, update, which is stored as a static constant (UPDATE) of this class.  See Trevor McCauley’s “Introduction to event handling in ActionScript 3.0” for an in-depth look at raising custom events in AS3.

If you want to be able to deliver non-FLV video in Flash (how cool is that?!), head over to the Adobe Flash Support Center and download the Adobe Flash Player Update for Flash CS3 Professional (9.0.2).  The result?  At runtime, you’ll be able to load MOV and MP4 files encoded in the H.264 hi-def codec.  This is in addition to the usual FLV, and we’re talking Flash Player 9 only (specifically, version 9.0.115.0 or higher).  You’ll also be able to load M4A audio instead of only MP3.  The upgrade to the IDE allows you to view such content as you test and debug SWFs right in the authoring environment.  I’ve already installed and tested, and the update works … but I have seen one stumbling block.  You can work around it — in fact, you can work right through it — but it isn’t especially obvious. 

Using the FLVPlayback component

If you’re coding up your video content with a Video object and NetConnection/NetStream, you won’t see any issues, but if you’re a fan of FLVPlayback, you’ll have to fly blind during a few steps that are normally straightforward.  Here’s what happens for me in Windows XP (and perhaps your mileage may vary):

I drag an instance of FLVPlayback from the Components panel to the Stage.  I select the Parameters tab of the Property inspector and double-click source so I can browse to one of the new video file types.  This opens a Content Path dialog with a button that browses for files.  I click that button to locate an MP4 file, which opens a Browse for FLV file dialog, but nothing shows — even though I’m in the folder that has such files.  The reason nothing shows is because the Files of type list box in this dialog only has an entry for *.flv files.  To get around that, I type *.* into the File name field and hit Enter.  Now I can see my MP4s (and every other file type in that folder).  I double click my MP4.

Flash chews on that for a while.  Honestly … maybe a minute and a half.  Finally, Flash tells me “Failed to load FLV: [name of file].”  This surprises me, because, well, I didn’t browse for an FLV.    But I forged ahead anyway and clicked OK.  I selected Control > Test Movie to see if the association succeeded anyway.  It did.

So it does work.  But Flash plays a bit of hide-and-seek with you while it gets you there.  My take on it is, roll with the flow.    It’s too bad that the manual association doesn’t seem to realize the new possibilities, but if it really gets on your nerves, you can always just set that source parameter via ActionScript 3.0:  just give your FLVPlayback component an instance name in the Property inspector, such as videoPlayer, and set its FLVPlayback.source property:

videoPlayer.source = "coolNewFormat.mp4";