David Stiller’s blog

I’ve always been an advocate of naming Flash elements meaningfully — everything from timeline layers to Library assets (including Library folder names!).  If a FLA has any complexity at all, it’s simply cruel not to.  Yes, cruel.  If you’ve worked on complex FLAs without named assets, you’ll know that’s not too harsh an assessment.    Sure, it takes a bit more time to tack on expressive labels everywhere, but after a while, the effort becomes second nature, and the payoff is significant.  Recently, this habit led to an unexpected benefit for me. 

I was working on a presentational tool for a client who wanted ActionScript kept to a minimum.  This FLA, when finished, was supposed to be “easily editable by a designer,” and “not ‘scary’ to someone who doesn’t know how to program.”  To make things interesting, this tool was actually fairly complex, involving numerous — we’re talking hundreds — of company-specific terms whose definitions were to appear as tool tips when a term was rolled over.  Normally, I would have put all these terms and their definitions into an XML file or database and created their text fields at runtime.  Actually, in order to allow for rollover behavior, each text field would have to be wrapped in a movie clip, as the TextField class doesn’t feature a rollover event; in any case, all perfectly do-able with ActionScript.  For this project, though, each term (meaning, each text field wrapped in a movie clip) and each tool tip (same set up) needed to be present in the Library.  As you can imagine, I named these assets dutifully.

Library symbol names for the terms (usually a short phrase) were labeled after the pattern txt Lorem ipsum dolor sit amet — an arbitrary prefix txt followed by the first few words of the phrase.  Tool tip symbols were named the same, except the prefix txt became tip.  This made it easy to see term / tool tip pairings in the Library, as they’d show up one after the other.

I did allow myself the luxury of attaching tool tips to the Stage at runtime.  The designer wouldn’t have to know how they got to the Stage, only that txt Etc symbols were paired with tip Etc symbols.  If a typo was discovered, or if text color, font, or content was supposed to changed, the designer would simply have to locate the relevant asset(s) in the Library for editing.

Now, to be able to assign functions to each term’s MovieClip.onRollOver event, each term would naturally require an instance name.  I decided on a very similar pattern for instance names, basically just camel case:  txtLoremIpsumDolorSitAmet.  This is where it got a little interesting.  I certainly didn’t want to burden the designer with having to wire up event handlers …

txtTermA.onRollOver = function() {
  // code here
}
txtTermB.onRollOver = function() {
  // code here
}
txtTermC.onRollOver = function() {
  // code here
}

… so I made sure to nest each group of terms inside a container movie clip.  In this way, I could target these parent clips with my own ActionScript and assign event handlers dynamically, as discussed in “How to Reference Objects Dynamically.”

for (var clip:String in parentClip) {
  var mc:MovieClip = parentClip[clip];
  if (typeof(mc) == "movieclip") {
    if ((mc._name).indexOf("txt") > -1) {
      // code here
    }
  }
}

See what’s going on, here?  The for..in loop cycles among all objects inside parentClip, which is the instance name of a movie clip that contains potentially dozens of text field movie clips.  An arbitrarily named variable, mc, is set to a particular object in parentClip by way of the array access operator ([]).  This dynamic reference, mc, is checked to see if it’s indeed a movie clip, as the parent clip might also contain other objects.  Finally, mc’s MovieClip._name property is run against String.indexOf() to see if its instance name contains the letters txt.  If so, bingo:  we know this is one of the movie clip–wrapped terms that needs a tool tip.

Now.  In this dynamic roll-up, how could I possibly associate each term with its correlating tool tip?  Each tool tip (that is, each tool tip text field wrapped in a movie clip) needs to have a Linkage identifier.  It’s the Linkage identifier that allows it to be pulled from the Library at runtime.

It occurred to me that careful, consistent asset naming could be put to very good use, here.  I based each tool tip’s Linkage ID on the same camel case format I used for the terms’ instance names; that is, tool tip Linkage IDs were tipLoremIpsumDolorSitAmet.  This meant I could use that mc._name property for two reasons:  first, to check if the given object was a term; second, to pull the necessary tool tip from the Library.

String.substring() returns an abbreviated string from a given string.  By using this …

mc._name.substring(3)

… I was able to pull all characters after the first three of each term clip’s instance name.  I could then simply precede those characters with the string “tip” to locate the right tool tip:

// bunches of tool tip code, not shown
mcToolTip.attachMovie("tip" + mc._name.substring(3), "tip", 1);

This entry was posted on Sunday, November 12th, 2006 at 11:24 pm and is filed under ActionScript 2.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.