David StillerDavid Stiller's blog

Luck is the residue of good design.

How to Replace a Symbol in Several Keyframes at Once

Posted Wednesday, December 20, 2006 7:32:22 PM by David Stiller

Okay, let’s say you’ve chosen a symbol from the Library.  You’ve painstakingly motion tweened it over a series of at least 20 keyframes, then decided — afterwards, of course — that you’d like to use a different symbol instead.  Show of hands, anyone?  Before I knew the right approach, I would grumble at a scenario like this, sometimes loudly.  I’d seriously consider just leaving it, or possibly re-doing the mass of keyframes from scratch — or I’d grin and bear it, clicking the symbol at each keyframe in turn and using the Swap button in the Property inspector as often as needed.  If you’ve done this even once, don’t despair:  there is a much easier way.

An answer, short and sweet

Click the layer that contains all your keyframes.  You’ll want to click its name, or anywhere on the left side of the divider between layer names and layer content.  Doing so will select all frames in that layer, including all keyframes.  With all these frames highlighted, click the Sync checkbox in the Property inspector to select it.  Now every keyframe has the “synchronize symbols” feature enabled.  That’s the important part.

Click on your symbol in frame 1 (or the first keyframe of its span) and use the Swap button to change the symbol to a different one.  Thanks to the Sync check mark, all the other keyframes will also point to the new symbol.

How it works

It’s the Sync feature that does it.  Keep in mind, the Sync feature isn’t always selected by default.  As described in an earlier article, Sync is activated by default if you use Create Motion Tween from the file menu or context menu, but not if you choose Motion from the Tween listbox in the Property inspector.  But hey, who cares how it gets there?  Now you know what the feature does, and how to quickly toggle it on or off for a span of keyframes.

Category tags: Flash

A Few Notes on “Create Motion Tween”

Posted Saturday, December 16, 2006 4:57:20 PM by David Stiller

There are two ways to apply a motion tween in Flash.  Once you select the span of frames between two keyframes, either a) choose “Motion” from the Tween listbox in the Property inspector or b) use the Create Motion Tween mechanism.  The latter is available under Insert > Timeline > Create Motion Tween or by right-clicking (Win) / Command+clicking (Mac) and choosing Create Motion Tween from the context menu.  At first glance, these approaches simply look like two ways to accomplish the same thing, but there’s actually a big difference between them.

Shapes

As a rule, motion tweens cannot be applied to shapes.  Shapes are controlled by shape tweens and must first be converted into symbols before a motion tween is possible.  If you try to apply a motion tween to the span of frames between two shape keyframes, you’ll either get a “broken tween,” as indicated by a dashed line in the span of frames, or Flash will create two new symbols for you and tween those instead.  This is the difference between using the Property inspector or Create Motion Tween to achieve your results (at least, as of this writing [Flash 8]).

The Property inspector’s tween simply fails, as it should — remember, motion tweens cannot be applied to shapes.  The Create Motion Tween mechanism attempts to help you out by creating the necessary symbols for you, but this “helpfulness” can lead to frustration when used in anything but the simplest of movies.

The auto-generated symbols go by the names Tween 1 and Tween 2, which aren’t specially descriptive labels.  If you’ve done this more than once in a given FLA, the new symbols will be named Tween 3 and Tween 4, and so on, with numbers going as high as needed.  Enough of these will clutter up your Library, especially because the names aren’t meaningful.  If you delete these symbols — and beginners often do — the tweens they facilitate simply vanish.

Much better to go with the appropriate tween type:  shape tweens for shapes, motion tweens for symbols.

Shape Objects (the Object Drawing Model)

Flash 8 introduced a new type of graphic element, the shape object.  This is something like a grouped shape (Modify > Group) and mysteriously hovers between the realms of shape and symbol.  This feature provides a new paradigm for how to draw in Flash; details are available in the Help docs, specifically the Using Flash book, under “About Flash drawing models” (definitely interesting reading).  This feature can be toggled in the Tools panel when a shape tool, such as the Oval Tool or Rectangle Tool, is chosen.

Shape objects can be motion tweened, as if they were symbols.  Interestingly enough, they can also be shape tweened.  If you choose to apply a motion tween to shape object keyframes, make sure to use the Property inspector.  As with shapes, the Create Motion Tween mechanism will create symbols in the Library — and in this case, they simply aren’t necessary.

Symbols

By this point, you’re already aware that symbol keyframes are the primary candidate for motion tweens.  In this case, the Create Motion Tween mechanism leaves well enough alone:  no extra symbols are created, and none are needed, in the application of the motion tween.  That said, even here, there’s a difference between Create Motion Tween and the Property inspector.

If you apply a motion between to symbol keyframes with the Property inspector, you’ll see that the Scale checkbox is selected by default, which means that scaling may be tweened in addition to other properties, such as position.  Other checkboxes are left unselected.  If you do the same by way of the Create Motion Tween mechanism, you’ll find that the Sync and Snap checkboxes are also selected.  For details on these parameters, read the “Tweening instances, groups, and type” entry in Using Flash.

Category tags: Flash

Seeing Both the Forest and the Trees

Posted Monday, December 11, 2006 7:23:45 AM by David Stiller

Sometimes, in Flash, I’m working on a bit of artwork that is small, but fairly detailed.  Icons come to mind, or a cartoon character’s face.  In these cases, I often zoom in well over 1,000% to get a clear view of the minutiae.  In spite of that, I want a “big picture” view of the whole graphic, to keep tabs on how the minor tweaks affect the whole.

For the longest time, I simply zoomed in and out as needed.  Keyboard shortcuts naturally help (Ctrl-+ and Ctrl-– in Windows), but even so, it can get tedious.  Then, one day, I found an even better approach.  To maintain two (or more) views of the same work area, head to Window > New Window or Window > Duplicate Window, depending on your version of Flash.  Doing so opens a second (or third, etc.) view of your current workspace, functionally identical to Window > Arrange > New Window in Photoshop.  These views are synchronized, so a change to any one of them is immediately updated in all windows.  Generally speaking, after I create such a duplicate view, I head to Window > Tile to instantly arrange both views side-by-side.  In the “big picture” view, I usually hide the Timeline panel, but that’s up to you.

Category tags: Flash

Easy Button States for Movie Clip Buttons

Posted Monday, December 04, 2006 1:25:02 AM by David Stiller

You may have heard that movie clip symbols can be “turned into buttons,” or made to act like buttons, and they certainly can.  In the most basic sense, all it takes is a few lines of ActionScript to handle the mouse-related events supported by the MovieClip class; namely, onPress, onRelease, onRollOver, and the like — just like the Button class.

// a button symbol
myButton.onRelease = function() {
  // something that occurs when the button is released
}

// a movie clip symbol
myMovieClip.onRelease = function() {
  // something that occurs when a movie clip “button”
  // is released
}

But what’s the point?  Why would someone want to use movie clip symbols as buttons?  After all, buttons have those special “state” frames, Up, Over, Down, which automatically change the button visually in response to mouse interaction, and also the Hit frame, which determines the surface area available to the mouse. 

True enough, movie clips don’t have that.

But then, buttons don’t have nearly the number of properties, methods, or events that movie clips do.  You can’t programmatically send a button to one of its own frames (think MovieClip.gotoAndStop() or MovieClip.gotoAndPlay()), so those four special state frames could be argued as a limitation, rather than a benefit.  For example, if you wanted to create a Toggled state (a custom fifth frame), a button symbol provides no way to direct the playhead of its timeline.  You can’t run MovieClip.hitTest() on a button — which tests for an overlap, or “collision,” with another movie clip or some geometric point, such as the coordinates of the mouse — because the button class doesn’t feature a hitTest() method.

Frankly, these limitations may not bother you.  There’s certainly nothing wrong with button symbols.  I use them all the time, because they’re quick and easy.  But if you’re interested in pushing the boundaries, Flash provides a simple means to give movie clips three of the four button hit states.

In the timeline of your movie clip “button,” create three distinct keyframes, then use the following frame labels for each:  _up, _down, and _over (note the underscores).  Your movie clip can have these labels in a layer of their own or combined with the artwork.  Put a stop() action in frame 1, also in its own layer (or not), and you’re good to go.  Your movie clip will respond visually — assuming each frame has its own artwork — just like a button.  Actually, there’s one more requirement:  to kick this frame label approach into gear, you do have to handle at least one mouse-related event (onRelease, for example, as shown above).  Buttons respond without being wired up, but movie clips need the instruction.

Movie clip 'button'

To add the equivalent of a button’s Hit frame, add a new layer inside the movie clip’s timeline and place a movie clip in that layer.  This new movie clip represents the clickable surface area you would have placed into the Hit frame of a button symbol.  Whatever shape this second movie clip has, and wherever it’s placed, determines what area of your movie clip “button” is responsive to the mouse.

In button symbols, artwork in the Hit frame is never seen, so you’ll have to hide the new “hit area” movie clip inside your movie clip “button.”  Give it an instance name — hit will do — and supplement the existing stop() action with …

hit._visible = false;
this.hitArea = hit;

That first line sets the MovieClip._visible property to false for the hit clip, and the second line sets the MovieClip.hitArea property to the hit clip.

Movie clip 'button' with hit area

In the figure, the square is the “hit area” clip, and its instance name is hit (though you may call it what you like; just make sure to update the ActionScript, if you do).  Now you have an object with all the functionality of the MovieClip class that behaves visually like a button symbol, complete with a custom hit area.

Category tags: Flash

How to Avoid the X-ray Effect in Semi-transparent Nested Symbols

Posted Thursday, November 30, 2006 4:21:27 PM by David Stiller

One of the facts of life in working with Flash is the way in which it displays semi-transparent nested symbols — which wasn’t what I expected, the first time I saw it.  To my thinking, the most fitting description is “the x-ray effect.”  Consider the following graphic symbol (the Quip mascot), at 100% opacity.

Nested symbol at 100% opacity

Here it is again at 30% opacity.

Nested symbol at 30% opacity

As you can see, its “bones” are showing!  All of the inner symbols inherit the alpha property of their parent, so the inner symbols are themselves semi-transparent.  Where they overlap, those areas show up as darker or more solid.  It makes sense, and might be a neat effect for a hospital presentation, but I wish it wasn’t simply “the way it is.”

Fade-ins and -outs only last a short while, generally speaking, but I don’t care for the idea that viewers can see how I composed my nested symbols.  It makes me feel as if I’m tipping my hand, somehow.  And then, what if my nested symbol was, say, a ghost character, semi-transparent most of the time?

Is there a way to avoid the x-ray effect?

There is, though it only works under certain circumstances.  Rather using Alpha in the Color Styles portion of the Property inspector, use Tint and set the tint color to the same color as the background, then reverse your percentage.  30% alpha on a white background becomes 70% white tint.

Alpha in the Property inspector

Tint in the Property inspector

In cases where your background is a solid color, problem solved.  Tint can be tweened just like Alpha can.

Category tags: Flash

How to Trigger Event Handlers of Other Objects

Posted Tuesday, November 14, 2006 11:55:08 PM by David Stiller

In response to a question in one of the comments to “How to Reference Objects Dynamically,” here’s a code sample that illustrates one way to trigger event handlers of other objects.  Specifically, the commenter had a series of movie clip “buttons,” which had their own MovieClip.onRollOver and onRollOut event handlers.  She wanted to see the rollover and rollout effect without having to put the mouse near those movie clips.  (To put this in perspective, the movie clips in question were thumbnails in a slideshow.  She wanted to highlight the current thumbnail either by hovering over it or selecting it via a set of Prev and Next buttons.)  Let’s take a look.

An answer (not so short, but sweet — and how it works)

Remember, this is one approach out of, I’m sure, quite a few.  It does make a good example on using the array access operator, in any case ([]).  ;)  Here we go.

Assume two Library assets, here:  one movie clip symbol and one button symbol.  The movie clip should have to frames total, both keyframes.  Make sure there’s a different shape in each keyframe.  You might draw a circle in frame 1, for example, then add a stroke to that circle in frame 2.  Drag several instances of this movie clip to the Stage and give them sequential instance names — mc0, mc1, mc2, and so on.  Drag the button symbol out twice.  Give one the instance name prev and the other next.  Now enter the following into a scripts layer:

var buttonList:Array = new Array(mc0, mc1, mc2);
for (var i:Number = 0; i < buttonList.length; i++) {
  var mcBtn:MovieClip = buttonList[i];
  mcBtn.stop();
  mcBtn.onRollOver = function():Void {
    this.gotoAndStop(2);
  };
  mcBtn.onRollOut = function():Void {
    this.gotoAndStop(1);
  };
}

First, an arbitrarily named variable, buttonList, is declared and set to an instance of the Array class.  In the above example, I “seeded” the buttonList array with the instance names of three movie clips.  If you have five, use all five.

Next, a for loop counts from zero to less than the number of elements in the array.  In the case of our three elements, i will start at 0 and stop at 2, thus counting through our three buttons (arrays start at zero rather than one).  The next line is a matter of convenience.  An arbitrarily named variable, mcBtn, is set to buttonList[i].  In this context, the array access operator “reaches in” to the array and pulls out the element at the number specified.  On the first go-around, i is zero, so mcBtn will be set to the first item, which happens to be mc0.  This movie clip, represented by mcBtn, is immediately told to stop, via the MovieClip.stop() method.  This keeps mc0 (and all the rest, as the loop continues) from traveling to frame 2, where that stroke appears.  After that, two mouse events are handled.  The mc0 movie clip, by way of the mcBtn reference, is assigned a function to its MovieClip.onRollOver and onRollOut events.  When the mouse rolls over this movie clip, it will go to frame 2 and stop; when the mouse rolls out, the movie clip will return to frame 1.  This will give a nice rollover effect of a stroke appearing and disappearing from the circle.

Looping like this allows us to assign this functionality to all the movie clips referenced in the buttonList array.  There’s another way to do this, which uses strings in the array rather than actual object references.  In that case, as described in “How to Reference Objects Dynamically,” the array access operator is used slightly differently.

But this is all setup!  Here’s the fun part.  Add a bit more ActionScript:

var current:Number = 0;
prev.onRelease = function():Void {
  current--;
  if (current < 0) {
    current = buttonList.length - 1;
  }
  turnAllOff();
  buttonList[current].onRollOver();
};

Here, we keep track of which movie clip “button” should be the current one.  Just a simple number variable, current, set to zero by default.  The prev button instance is assigned a function to its Button.onRelease event.  This function reduces current by one.  The first time this ever happens, current would now be -1.  An if statement checks the value of current.  If less than zero (which it currently is), that variable is set to buttonList.length – 1, which, in our case, makes it 2 — that’s three elements in the array, minus 1.  Next, a custom turnAllOff() function is called (we’ll get to that in a moment).  Finally, movie clip mc2 is referenced by way of the buttonList array, using current in the array access operator.  We’re effectively saying, “Hey, buttonList, what do you have in slot 2?”  buttonList says, “Uh, lemme see.  Ah, mc2.”  “Great!” we say, and use that reference to trigger mc2’s onRollOver event handler.  Remember, at the very beginning, we set mc2.onRollOver to a function, so now we can call that function by invoking onRollOver and adding those parentheses at the end — it’s the parentheses that actually execute the function.  The function, as you recall, “highlights” the movie clip by sending it to frame 2.

So what’s that turnAllOff() function?  All that does is use a for loop to cycle through the movie clips and invoke their MovieClip.onRollOut event handlers:

function turnAllOff():Void {
  for (var i:Number = 0; i < buttonList.length; i++) {
    buttonList[i].onRollOut();
  }
}

Same principle, really.  This just ensures that whatever movie clip might already be highlighted is unhighlighted.

Finally, we need code for the next button.

next.onRelease = function() {
  current++;
  if (current > buttonList.length - 1) {
    current = 0;
  }
  turnAllOff();
  buttonList[current].onRollOver();
};

Category tags: Flash

Linking Instance Names with Linkage IDs

Posted Sunday, November 12, 2006 10:28:26 PM by David Stiller

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 casetxtLoremIpsumDolorSitAmet.  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);

Category tags: Flash

Is the MovieClip.onLoad Event Broken?

Posted Tuesday, October 24, 2006 6:15:27 PM by David Stiller

Documents like Jen deHaan’s ActionScript 2.0 Best Practices (page four, in particular) recommend against attaching code directly to objects.  Generally speaking, I’m in enthusiastic agreement (see “Museum Pieces:  on() and onClipEvent()”).  Most events in AS2 are easy to handle, but MovieClip.onLoad is something of an oddball.  Before I understood that it needs to be treated differently from the others, I was stumped as to why it “didn’t work.”  (Hint:  It does work, but not the way most people expect.)

Here’s how the ActionScript 2.0 Language Reference describes this event:

Invoked when the movie clip is instantiated and appears in the timeline. You must define a function that executes when the event handler is invoked. You can define the function on the timeline or in a class file that extends the MovieClip class or is linked to a symbol in the library.

So far, so good.  The other MovieClip events work this way, too. For example, if you want a movie clip to move to the right by one pixel whenever its timeline enters a frame, go ahead and define that function, just as the docs say.  This can be a named function or an anonymous literal:

// named
clip.onEnterFrame = someFunction;
// where someFunction() defines the rightward motion
// anonymous
clip.onEnterFrame = function():Void {
  this._x++;
}

If you take a similar approach with onLoad, you won’t see any results.  That is, the following code …

clip.onLoad = function():Void {
  trace("Clip has loaded!");
}

… has no apparent effect (normally, you’d expect to see the string “Clip has loaded!” in the Output panel).

So let’s look back at the documentation.  There’s that part about “or in a class file that extends …” blah blah blah.  It may be that the word “or” nudges people away; I’m not sure.  But the devil is often in the blah blah blahs.  ;)  Certainly, events can be handled in a timeline or a class file (or, for that matter, a class file linked to a symbol in the Library, as described), but something is lost in the muddle here.

MovieClip.onLoad requires an association with a class file

The next part of the documentation is key:

You use this handler only with movie clips for which you have a symbol in the library that is associated with a class.

To my thinking, the opening phrase, “You use this handler,” isn’t strong enough.  The truth is, you can only handle this event with movie clips that are associated with a class.  By “associated with a class,” I mean this:  create a new movie clip symbol, then right click (Windows) / Command+click (Macintosh) that symbol in the Library; select Linkage… and put a check mark in Export for ActionScript.  When you do, you’ll have the opportunity to enter something in the AS 2.0 class field — that’s your association.  Of course, you need a class file to go with it, and we’ll get to that in moment.

If you’re not familiar with associating Library symbols in this way, the process may seem a bit clunky, and maybe it is (this sort of thing is easier in AS3).  If you use the process often, it’s just par for the course.

I really don’t know why the MovieClip.onLoad event needs this association; I only know that it does.  If you regularly write your own class files (in this case, classes that extend MovieClip), it may be that you’re already handling onLoad inside the class.  If you need this event, your best bet is to do just that.

On the other hand, if you prefer to handle onLoad in a timeline script and see no practical use for a class file, you can either use a bare bones “dummy” class or a low down dirty trick.

Bare bones “dummy” class

Create a new ActionScript class (that is, a text file with the .as extension) and save it in the same folder as your FLA.  Give it the name FixOnLoad.as.  Edit this file and enter the following minimal code:

class FixOnLoad extends MovieClip {
  public function onLoad():Void {}
}

Flip to your FLA.  Enter the Linkage… setting of the desired symbol(s), as described above, and enter FixOnLoad into the AS 2.0 class field. That’s all you need.  Now the above example …

clip.onLoad = function():Void {
  trace("Clip has loaded!");
}

… works just fine.

Low down dirty trick

This is a hack.  I’m not saying it’s pretty, but to trick the IDE into giving you want you want, dispense with the whole class business. Clear out the AS 2.0 class field of the Linkage… setting.  Select the symbol on the Stage, open your Actions panel, and enter a space character.  Seriously.  Just a space, or put in comments, if you like (just a pair of slashes //).  That’ll do it.

To be clear, I’m not advocating this hack.  I’m definitely a fan of using class files.  In real-world projects, however, you sometimes just need to whip something together and neaten up at a later time.

Category tags: Flash

Carbon Dating ActionScript (Part 2)

Posted Friday, October 20, 2006 8:21:09 PM by David Stiller

... Continued from Part 1

ActionScript 1.0

It’s important to realize that AS1 and AS2 are, under the hood, ultimately the same language.  Generally speaking, if something can be done in AS2, it can be often be ported to AS1, but certain syntactical structure may have to be tweaked.  Unless you’re dealing specifically with ActionScript classes (the code that specifies an object), it may be enough to drop the post colon suffixes on variables.

I can think of only a single “give away” that you’re dealing with AS1 code:

  • An abundance of the prototype property.  Before AS2 introduced the class statement, object-oriented programming (OOP) was approximated by use of the Object.prototype property.  For details, see this terrific (but incomplete) online book, Building Object-Oriented Applications in Flash 5.  Only the first chapter appears to be complete (and there’s a bit of the second), but even so, this information is very useful for AS1 development — specifically object-oriented AS1.  (It also happens to be the same approach used for OOP in JavaScript.)

Flash 4 ActionScript

This is the really old stuff — ancient stuff.  Before Flash 5, ActionScript was a remarkably different animal.  Flash 4 code can be difficult to read if you haven’t seen a lot of it, so keep the following characteristics in mind as you scan the web for code samples.  Generally speaking, ActionScript of this vintage requires careful attention before it “works” in a modern setting.  Flash 4 code samples should be taken more for the ideas they suggest than for their actual syntax.

  • The tellTarget() function.  Deprecated since Flash 5 in favor of dot (.) notation and the with statement.
  • The call() function.  Deprecated since Flash 5 in favor of the function statement.
  • The ifFrameLoaded() function.  Deprecated since Flash five in favor of the MovieClip._framesloaded property.
  • Operators comprised of letters.  Modern operators tend to be punctuation marks, such as + (addition / string concatenation), > (greater than), == (equality), = (assignment), and the like.  In the old days, many operators — mainly string operators — were made of letters, such as add (string concatenation), gt (greater than), eq (quality), and so on.  They stick out like sore thumbs, so they’re easy to spot.
  • Slash syntax.  In Flash 3 and 4, the slash character (/) was used to indicate the target path of a movie clip or variable.  This was replaced in Flash 5 by the much more familiar (in terms of other languages) dot notation.  See “Using slash syntax” in the section of Learning ActionScript 2.0 in Flash for details.

Keep in mind …

The above lists only represent the first few things that popped into my head.  It’s far more important to keep in mind the general principle that ActionScript, like any other language, is a living thing.  If you happen to copy/paste a quick snippet into your project and find that it a) doesn’t do what you expect or b) dumps hatfuls of error messages into the Output panel, pop open the ActionScript 2.0 Language Reference first before you stop, drop, and roll.  ;)  Search the term “Deprecated ActionScript” in the online help, or check it out on the LiveDocs site (make sure to click the Show Navigation button in the upper left if you do).  You might very well be able to salvage what you’ve found, but you’ll have to get your bearings first.

Category tags: Flash

Carbon Dating ActionScript (Part 1)

Posted Friday, October 20, 2006 8:19:14 PM by David Stiller

There are thousands of ActionScript code samples online.  Thousands.  Google will conjure them from the ether within seconds, and any one of them might just suit your needs.  But there’s often a problem, one I’ve seen knock the wind out of a developer’s sails.  The problem is, any particular code sample may be outdated.  That doesn’t necessarily mean it will fail, but then again.…

See, when Flash 5 was new, a number of scripting improvements in the platform led to a profusion of exciting new code samples online.  No one at the time knew there would someday be an ActionScript 2.0, so no one bothered to label their samples as “ActionScript 1.0,” which makes perfect sense:  the language wasn’t yet called ActionScript 1.0 — it was just ActionScript.

Coding has changed with each new release of Flash, and sometimes the changes necessitate modifications to the way ActionScript is written.  I’ve seen dozens of posts to the Adobe forums where someone claims that a provided snippet “doesn’t work,” when in fact, it may simply be that the sample, written in ActionScript 2.0, has been used in a FLA published for ActionScript 1.0 — or the developer is still working with Flash MX, which doesn’t even have ActionScript 2.0.

So.  Is there a way to tell, at a glance, how old a given sample of ActionScript is?  Often enough, there is.  Maybe not with 100% accuracy — but each version of ActionScript features a handful of tendencies that can be useful in making an educated guess.

ActionScript 3.0

Ah, the newest of the new.  When Flash 9 arrives some time next year (assuming all goes well), it will be the first commercial release of Flash to support ActionScript 3.0.  In the mean time, Flex Builder 2 is already on the market, and ActionScript 3.0 is definitely already alive and kicking.

At a glance, ActionScript 3.0 and 2.0 are kissin’ cousins.  At the Flashforward 2006 conference in Austin, recently, I heard someone describe AS3 as “evolutionary, not revolutionary.”  Cute, sure, but the description is apt.  The language has matured, and the API is considerably enlarged, but in spite of numerous changes, including a completely overhauled event handling model, advanced users of AS2 shouldn’t have too many headaches making the transition.

Even so, here’s a list of AS3 stand-outs — not exhaustive, by any means — that might nudge you into thinking, “Hey, this may be AS3” before you get slap-happy pasting ActionScript 3.0 into a Flash 8 (or lower) timeline or class file.

  • An abundance of packages and/or import statements.  AS3 is heavy on organizing classes into packages.  We saw the beginnings of this in AS2 with some of the more complex classes new to Flash 8, such as BitmapData, which actually resides in the package flash.display.BitmapData.  In AS3, just about everything is filed away in a package, and they all need to be imported.
  • The package statement.  AS2 classes simply specify class { code here }, while AS3 classes specify package { class { code here }}.
  • Lowercase datatypes.  In AS3, there are a few new datatypes, such as int and uint, that are named with all lowercase letters.  AS2’s datatypes, such as Number, always begin with a capital letter.  Note that AS3 also has Number (and all the other initial cap datatypes), but be aware that Void is now the all-lowercase void.
  • An abundance of addEventListener event handling.  In AS3, you will no longer see code like myButton.onRelease = function() {}; its event handling all looks like the listener object syntax used with the v2 Components.
  • Function/method parameters with the assignment operator.  In AS3, if you write a function called bringMe(food:String):void {}, whose food parameter specifies exactly what food to bring, that parameter must be set with the assignment operator if it is optional (e.g. … bringMe(food:String = "Turkish delight"):void {}) — you simply won’t see that in earlier versions of the language.

For additional details, check out the article “ActionScript 3.0 Overview,” by Gary Grossman and Emmy Huang.

ActionScript 2.0

Here are a couple hallmarks of AS2 code:

  • Post colon suffixes.  You’ve seen ’em.  These are the :Number, :String, :Object, etc., endings that appear in variable declarations and function/method signatures.  Sure, AS3 uses the same syntax, but at least you’ll know to drop these suffixes if you’re porting something to AS1.  Sometimes, that’s all you have to do to make an AS2 snippet work in the previous incarnation.  Both AS1 and AS2, after all, compile to the same bytecode.  Note:  ActionScript 2.0 doesn’t require the strong datatyping provided by post colon suffixes.  Even if you don’t see post colon syntax, ou might very well be looking at (lazily written) AS2.
  • The import statement.  AS2 is the first to support bona fide class files, so you won’t see import in AS1.
  • The class statement.  In AS2, classes are written as separate text files with the .as extension.  These are defined by the class statement at the top of each .as file.

Continued ...

Category tags: Flash

How to Control Video (FLV) without a Component

Posted Tuesday, October 17, 2006 11:02:49 PM by David Stiller

This somewhat aged post, “How to Load External Video (FLV),” is one of the most popular articles on my personal blog, judging by the number of comments.  Just the other day, someone named Enrique thanked me for the sample code, but asked if there was a way to control the FLV file once loaded, since the file is handled without the use of the Media or FLVPlayback Components.  It’s a good question, so let’s take a look at how to accomplish the goal.

An answer, short and sweet

After typing the code suggested in the other article, type the following ActionScript into a frame of your scripts layer:

// Code from the other article
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachVideo(ns);
ns.play("externalVideo.flv");
// New code ... assumes a button symbol with
// the instance name shown
btnPausePlay.onRelease = function() {
  ns.pause();
}

How’s that for short and sweet?!

How it works

This answer comes from a quick glimpse again at the NetStream class.  We’re already using the NetStream.play() method, in fact.  Here, we’re simply using the NetStream.pause() method, applied to the ns variable, which is our instance of the NetStream class.

The first time this method is called, it pauses play.  After that, the method acts as a toggle — unless the optional parameter is supplied.  If you want two buttons, rather than a toggle, supply that parameter.

btnPause.onRelease = function() {
  ns.pause(true);
}
btnPlay.onRelease = function() {
  ns.pause(false);
}

In the above example, the pause button invokes the NetStream.pause() method, as before, but this time it supplies the optional flag parameter.  If true is supplied, the video is paused, regardless of it’s already paused.  If false is supplied, the video is played from where it was stopped.  If already playing, it keeps on playing.

Experiment with the NetStream.close() and NetStream.seek() methods to stop playing altogether (different from pausing) and to jump to already-loaded portions of a video stream.

Category tags: Flash

Choosing Random Numbers Redux

Posted Friday, October 06, 2006 1:29:28 PM by David Stiller

I goofed in my last post about choosing random numbers, so let’s take another look.  Big thanks to NSurveyor, by the way, for pointing it out!  In converting floats into integers last time, I used the static Math.round() method.  In the context of ensuring that a random choice is made with equal probability, there’s a subtle (but important!) distinction between rounding with Math.round() versus rounding with Math.ceil() or Math.floor().  I think a diagram will help.

Everyone should get an equal piece of the pie

Math.round() does its rounding the way we learned back in grade school:  if the number in question is less than five, round down; if five or higher, round up.  My previous sample code was this:

Math.round(Math.random() * 9) + 1;

As NSurveyor points out in the previous post’s comments, the above is close, but not close enough.  The distribution is uneven, because 1s and 10s are less likely to be chosen over 2, 3, 4, …, 9.  Why?  Check it out.

Diagram illustrating distribution of Math.round() roumding

If the result of Math.random() * 9 happens to fall between 0 and 0.4, it would be rounded to 0.  That’s worth “one slice of pie.”  If it happens to fall between 0.5 and 0.9, it would be rounded to 1.  That, too, is one slice of pie.  So far, zero and one are tied.  With me?

If the number falls between 1 and 1.4, that also rounds to 1.  At this point, zero is behind, because one has two slices of pie.  The pattern continues:  a number between 1.5 and 1.9 rounds to 2, and so does 2 through 2.4.  All the middle numbers get two slices of pie, while the end numbers only get a single slice.

NSurveyor’s recommendation is this:

Math.floor(Math.random() * 10) + 1;

… which solves the issue.  In this case, numbers are always rounded down.  Everyone gets two slices of pie.

Diagram illustrating distribution of Math.floor() rounding

Likewise, his suggested change to my randomRange() sample goes like this:

function randomRange(min:Number, max:Number):Number {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Category tags: Flash

Choosing Random Numbers

Posted Tuesday, October 03, 2006 8:46:14 PM by David Stiller

ActionScript 1.0 and 2.0 provide two ways to pull a random number from thin air:  the random() function and the static Math.random() method.  Of these, the random() function is the older (available since Flash 4) and is the “easier to use,” according to a number of developers.  But keep in mind, it’s not the officially recommended way to go.

random()

The function works like this:  say you want a random number between one and ten, including either extreme.  The function returns an integer value between zero and one less than the supplied parameter, so if you want your number to be among the set 1, 2, 3, …, 10, then pass in ten and add one to the result.

var rand:Number = random(10) + 1;

There you have it.  The rand variable now contains an integer between (possibly including) one and ten.  How does that work, again?  The function returns a value between zero and one less than the supplied parameter, so supplying ten return any number in the set 0, 1, 2, …, 9, which added to one gives you the range you want.

Okay.  Well and good.  But the random() function was deprecated as of Flash 5.  That means it’s still “legal” to use, but the official recommended best practice is to use Math.random() instead.

Note:  Practically speaking, in all these years, I’ve only seen support dropped for a single deprecated term, but it does happen.  Long ago, you could concatenate strings with the add operator, but Flash Player 8 and higher no longer support the practice.  Any SWFs out there that still use add — who knows how many there are? — simply fail when the Player hits that operator, provided those SWFs are viewed in Flash Player 8 or higher.

Math.random()

This is a static method, which means you don’t reference a class instance when calling it; you reference the class name itself.  Math.random() returns a non-integer value between zero and one.  That’s right, zero and one — including possibly zero (which, I suppose, would be an integer; okay, okay, there’s always an exception!).  If you want a random number between one and ten in this case, you’ll have to multiply the return value by nine, round the answer down, then add one to the result.  Sounds complicated, I realize, but let’s see it in action.

var rand:Number = Math.round(Math.random() * 9) + 1);

Let’s see what’s going on, here, working from the inside out.  At the very center, Math.random() provides a number between zero and one (including, possibly zero).  Typical results might be any of the following …

0.568371209315956
0.186107741203159
0.643053698353469
0.542485995218158
0.77111521596089

… note that zero even is simply not a likely result.

Multiplied by nine, the above list might be any of these:

7.05780873075128
2.09764451393858
8.10042055277154
0.43995537701994
6.56350261252373

This expression, Math.random() * 9, is run through Math.round() to crunch those floats into integers.  Finally, this combined expression, Math.round(Math.random() * 9), is added to one, to bump everything up a notch.  Zeroes become ones, ones twos, etc., and nines become tens.  Thus the desired range of “between one and ten” is achieved.

Ranges outside the set “between one and …”

What if you want a random number between -5 and 5?  Easy enough.  The above approach hints toward a generic formula that provides the answer.  Take a look at this custom function:

function randomRange(min:Number, max:Number):Number {
  return Math.round(Math.random() * (max - min + 1)) + min;
}

The inner expressions have changed a bit, but the principle is the same.  The difference between the upper end lower ends, plus one, provide the value to multiply with Math.random().  Instead of adding one to the result, add min (because the lower end may not be one).

Flipping a coin

Heads or tails?  To determine a random number between one and two, simply round the return value of Math.random().  But do yourself a favor and think in terms of the double meanings certain numbers have.  In ActionScript (and most programming languages), one and zero correspond neatly to true and false.  Actually, technically speaking, zero corresponds to false and any other number corresponds to true, but it’s easy to remember one and zero.

The expression Math.round(Math.random()) returns either 1 or 0.  Use it to answer any yes-or-no question randomly!

Category tags: Flash

How to Tween a Mask Along a Motion Guide

Posted Saturday, September 30, 2006 9:34:53 PM by David Stiller

Masking in Flash is easy to implement.  Take an existing layer with artwork, create a new layer above it, draw your mask shape, then right-click/Command-click and choose Mask.  Done.  Include as many layers as you like in the masked stack by dragging additional layers slowly up toward the stack then slightly right until they snap into place.  Lock and unlock layers to show and hide the mask effect.

Your mask shape reveals the artwork beneath it and hides everything else.  This works with imported photos, shapes and symbols, text fields (remember to embed font outlines if text is dynamic or input), and even video.  In fact, you can add keyframes to the mask’s layer in order to tween it (shape tweening if the mask is a shape; motion tweening if the mask is a symbol).  But what if you want to tween your mask along a motion guide?  Select your mask layer and click the Add Motion Guide button at the bottom left of the Timeline panel:  nothing happens.  Interesting, right?  Where’s that motion guide layer?  Is it possible to tween masks in this way?  Well, let’s see.

An answer, short and sweet

Select the mask shape and convert it to a symbol if it isn’t one already.  A graphic symbol is fine (Modify > Convert to Symbol > Graphic).  Now select the mask again and convert it to a symbol a second time — again, a graphic.  At this point, you have a nested graphic symbol that is still part of a mask layer.  Double click this symbol to enter its timeline.  Inside this timeline, click the Add Motion Guide button and tween the mask along your motion guide path as if it were a normal symbol — which it is, in this timeline.  When finished, step back out to the main timeline and extend the mask’s span of frames long enough to let its inner tween play out.

How it works

This is a simple case of thinking outside the box.  Technically speaking, tweening a mask along a motion guide is not possible.  But given the nature of masks, which can be nested symbols, the same effect is achievable.  If you’re not comfortable with ActionScript, motion guides provide a powerful way to animate along complex twists and turns.  Combined with masking, the possibilities are that much more engaging.

Category tags: Flash

How to Validate an Email Address (ActionScript 1.0 or 2.0)

Posted Tuesday, September 26, 2006 11:38:20 PM by David Stiller

When it comes to programming, I generally like to work out my own solutions to a problem, just because it feels so good to finally nail a challenge.  Often enough, of course, someone else beats me to the punch.  Those are the times I study the code until I really understand it — which may require a number of readings! — and then smile in admiration of the author.  I’ve been a fan of Ralf Bokelberg’s programming for years and wasn’t surprised at all to find that he’s written an elegant approach to validating email addresses in ActionScript (pre-AS3; that is, without the benefit of regular expressions).

His approach uses the String class, which is straightforward enough.  One of its methods, String.indexOf(), allows you to check if a given string contains a certain character (or characters).  For example, you could check a doubted address by looking to see if it contains the @ symbol (clearly a requirement in email addresses):

function isValidEmail(address:String):Boolean {
  if (address.indexOf("@") < 0) return false;
    return true;
}
trace(isValidEmail("user@domain.com"));

If the string contains the passed-in character, the method returns that character’s position in the string.  In the above example, the @’s position is 4.  Because 4 is not less than zero, return false is skipped and the function returns true.  If the string does not contain the character in question, the method returns -1.

Of course, the above example is an extremely weak test — practically useless.  Sure, a missing @ makes an invalid address, but what if the given string has two such symbols?  What if the @ appears after the .com?  Those would be invalid addresses, and the above “catcher” would let those slip right through its fingers.

An answer, short and sweet

Ralf’s solution uses String.indexOf() and others, and he uses the methods in very interesting ways.  His solution is here …

http://www.bokelberg.de/actionscript/checkEmail.html

… and though it doesn’t use AS2’s syntax (num:Number, str:String, etc.), the script works just fine in ActionScript 2.0.

To use it in your own project, either copy/paste it into your timeline or save it as its own file and use the #include directive to pull it into your own code:

#include "bokelberg_validate-email.as"

Then pass in your string and check if the return value is 1.  Anything else means the address is invalid (poorly formed).  Before sending user input to a form mailer, for example, you might check the email text field’s content first …

if (checkMail(inputFieldEmail.text) == 1) {
    // LoadVars instructions, perhaps
  } else {
    // Email no good!  Alert the user, or clear the text field …
    inputFieldEmail.text = "";
 }

How it works

I usually include a “How it works” section in the “How to” posts, but in this case the explanation would take quite a few pages — and in a way, I’d feel a bit odd speaking authoritatively about someone else’s code (at least, about code that inspires and humbles me).

Note Ralph’s use of functions within a function and his compact, efficient use of String.indexOf() and String.charAt() as suppliers of true/false values to the if statements of the interior functions.  I love it.

As an interesting point, the very first couple lines (“implementation of the regular expression,” aka regex) shows a regex pattern that, in a practical sense, performs the same routine on a given string.  All those lines, nested functions and all, can be collapsed into a single, dense line of code that makes perfect sense to a regular expressions engine.  ActionScript 3.0 supports regex.  That pleases me to no end.  :)

Category tags: Flash

How to Position Movie Clips Based on Browser Resizing

Posted Friday, September 22, 2006 10:56:46 PM by David Stiller

It’s not hard to make a SWF resize itself to the dimensions of the browser.  All it takes, in fact, is to set the width and height attributes of the HTML’s <object> <param> element and/or <embed> element to 100%.  There are a number of ways to determine the SWF’s display, too:  show all (default) makes the entire movie visible while maintaining the original aspect ratio of the SWF (if the browser’s aspect ratio differs, you’ll get the equivalent of “letterbox” borders either horizontally or vertically); no border gets rid those potential borders, but may crop parts of the SWF instead; exact fit distorts the SWF, if necessary, to make the entire movie visible without borders or cropping.  See Adobe TechNote 12701 for complete details.

Fine and good.  Now, what if you want to allow the Stage to resize, but not its contents?  What if you want to adjust the position of various movie clips — such as a logo, navigation, or content area — in response to the Stage’s new dimensions as the browser is resized?  Luckily, that’s not hard either.  :)  Let’s take a look. 

An answer, short and sweet

Open a new FLA and draw a quick shape — a circle will do.  Convert the shape to a movie clip (Modify > Convert to Symbol…, then choose Movie Clip) and give the clip an instance name via the Property inspector.  For this example, let’s call it mcLogo.

Create a scripts layer and type the following into frame 1:

Stage.scaleMode = "noScale";
Stage.align = "TL";
var stageListener: Object = new Object();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);

function positionContent():Void {
  mcLogo._x = Stage.width - mcLogo._width;
  mcLogo._y = Stage.height - mcLogo._height;
}
positionContent();

Test your SWF, and you’ll see the circle hug the lower right corner as you resize the SWF’s dimensions in Flash.  Either that, or publish to an HTML file and set the width and height attributes for both the <option> <param> element and the <embed> element to 100% and resize the browser.

How it works

In the first line, we’re telling the SWF not to scale itself.  In your HTML — this is important — you’re going to set the width and height to 100%, but the SWF itself will not scale to fit those dimensions.  In the second line, we’re telling the SWF to register itself to its upper left (top left) corner.

Next, an arbitrarily named variable, stageListener, is declared as a generic Object instance.  This object acts as an “ambassador” for the Stage.onResize event, so we need to assign a function to a new onResize property of our object, rather than of Stage directly.  In this example, the function is arbitrarily named positionContent() and is defined shortly below.  Note:  if you like, you may assign a function literal …

stageListener.onResize = function() {
  // instructions here
}

… but in this case, I chose a named function because you may want position dozens of movie clips, and it’s arguably “cleaner code” to define the function separately.  If you go the named function route, as we’re doing, make sure to omit the parentheses in this line, as shown.

The next line adds our ambassador as a listener to the Stage.  The Stage.addEventListner() method is what “wires up” the listener object to the object that dispatches the event (here, the Stage).

Finally, the custom positionContent() function tells mcLogo what to do.  In this case the movie clip’s _x property is set to the width of the Stage minus its own width.  That makes it hug the right side.  To center this clip, you could set its MovieClip._x property to half the Stage’s width minus half its own …

mcLogo._x = Stage.width / 2 - mcLogo._width / 2;

Follow suit for vertical positioning.  Makes sense, right?  Be sure to call the positionContent() function after you declare it, to make sure everything is positioned at the start, otherwise the Stage/browser would have to resize first.

By the way, this setup expects movie clips to be registered to their upper left corners.  If mcLogo’s shape was centered horizontally in its own timeline, you would only have to minus half its width from the Stage’s width to make it hug the right hand side.  If you want a 20 pixel buffer between this right-aligned clip and the Stage, account for that extra 20:

mcLogo._x = Stage.width - mcLogo._width - 20;

To keep a clip to the left side, set its _x to 0.

Keep in mind, you’re not limited to setting MovieClip._x and _y properties.  You may adjust a clip’s _width, _height, _xscale, _yscale … whatever you like.  Experiment and have fun with it!  For every clip you wish to position, simply add its entry to the positionContent() function.  Note, below, that an mcNav clip is being set to a position based on the original mcLogo clip.  Here, both clips would hug the right edge of the Stage, and mcNav would float below mcLogo, with a buffer of 20 pixels.

function positionContent():Void {
  mcLogo._x = Stage.width - mcLogo._width;
  mcLogo._y = 20;
  mcNav._x = Stage.width - mcNav._width;
  mcNav._y = mcLogo._y + mcLogo._height + 20;
}

Category tags: Flash

Flashforward 2006, Day 4

Posted Tuesday, September 19, 2006 9:35:20 PM by David Stiller

Note:  I started this entry on the actual fourth day of Flashforward.  Clearly, several days have passed since then — still catching up! — but I’ll leave my wording as is.

Sessions

Back to Phil Heinz for another Flex Builder 2 session.  Today’s was a follow-up on his intro to Flex from yesterday, this time delving deeper into socket connections for real time applications.  Honestly, the workflow efficiency of Flex Builder 2, as compared with Flash — for this sort of application; that is, “programs” rather than intros, games, and relatively “lighter” content — really is phenomenal.  I’m excited to see where RIA development will lead in the coming years, now that the Flex SDK (with compiler) is free and the Flex Builder 2 IDE is priced comparably to Flash.

I caught the tail end of Julian Dolce’s presentation on JSFL and was pleased to see that it had a decent turn-out.  This session, and talks with Scott McClurg — as well as planned Extension content for the companion CD to Chris Georgenes’ upcoming book — has inspired me out of a lull in my own JSFL work.  I had forgotten how much I love it!  (In a nutshell, JSFL allows you to programmatically accomplish practically anything doable in the IDE itself — like Photoshop Actions, but much more powerful.)

During the beginning of Julian’s session, I spent an hour or so with Branden Hall in the speaker lounge, checking out his Flow project under the hood.  Really, this is some very cool stuff.  I hope he and I can do some work together.

Next, David Castillo and Jennifer Benavides, who demonstrated a Flash app to help people improve their timing while learning salsa dancing.  This was the only session where audience members got on their feet!  ;)

I finished my day, and the conference in general, with a follow-up to Seb Lee-Delisle’s 3D work from yesterday; this one was on particle generators in AS2.  And finally, a cool look at Flash Player internals (the bytecode that ActionScript becomes) by Edwin van Rijkom.

Eats

Went to another fantastic restaurant — this time, I don’t even remember the name of it — and had an incredible, huge, rare Texas steak.  To put words to it would be to dishonor its memory.  Let’s just say it was a phenomenal meal.  :)  I loved it … and appreciated the company that night, which included Scott McClurg; Chris Georgenes; Silvia Pompei, who worked on Who Framed Roger Rabbit, The Simpsons, and other cool projects; Todd Sanders, and his lovely girlfriend.  Todd paid for the whole table, which was a completely unexpected treat.  It was a great way to conclude a terrific week.

Todd Sanders and me
Todd Sanders and me

Two Amys

While looking for an Amy I had helped on the Adobe forums, I ran into another Amy altogether.  It was funny, because when we first met, something told me this might just be the Amy from the forums.  After we had been talking for a while, I plumb asked her, “You wouldn’t happen to be Amy, would you?”  We were both surprised when she said she was.  We ran into each other at a bar later and had a great talk about Flash and also family.  Then I met the original Amy, too, which made me happy, because it’s always nice to put a face with the name.  I hope to keep in touch with both of them.

Surreal Twist Ending

I had to wake up early (3:30am) to get to the airport in time for my return flight.  Chris said I should wake him up to say goodbye, but I just didn’t have the heart.  Dude was snoring out some much needed sleep, which I envied, and I snuck out as quietly as I could.  ;)

My flight went from Austin to Newark, then Newark to Norfolk International — and I purposefully skipped the final leg to join Dawn and Meridian in New Jersey for a friend’s first birthday party.

While I finally crashed to catch up on my own lost sleep (you’ll see a pun in a moment), Dawn ran some errands with our friends and failed to yield on a left turn.  We’re still waiting for an official assessment, but the minivan may be totaled.  The right rear wheel was ripped off, the bumper missing … bad story.  But no one got hurt, not in our vehicle or the other, which is all that matters.  Kind of bizarre, because that worn tire on my plane coming in had to be replaced from Newark.

We talked Meridian through the experience a number of times.  She recounted the same events in German and English, so she clearly understands what happened, and knows that we’re all okay.  Mommy’s car is broken, and some men in New Jersey are going to try to fix it — or we’ll buy a new one.

So the whole trip has had its ups and downs.  Life never ceases to amaze.  I’m glad to be here.  :)  Now I’m working through business cards and hoping to keep up contact.

Category tags: Flash, On the Personal Side

Flashforward 2006, Day 3

Posted Thursday, September 14, 2006 9:27:55 AM by David Stiller

Today was another good one.  I’m glad I budgeted for this conference, because the sessions are good — and on paper, that’s the reason folks come — but in addition to that, Flashforward is a great opportunity to meet people of like mind.

Sessions

I started the day with Scott McClurg’s “My first ACCESSIBLE Flash Movie,” in which Scott went into a number of basics on how to use the Accessibility features in Flash.  I enjoyed his session, and we bumped into each other afterward more than once.  He’s a cool guy and very talented with Swift 3D, besides having a passion to make SWFs viewable by as many people as possible.

Next, I saw a number of ways to maximize the interaction between Flash and the browser, as presented by Robert Taylor and Tyler Wright.  I saw Seb Lee-Delisle break down his company’s simulated 3D soccer environmentPhil Heinz presented “Flex Builder 2 for Flash Programmers,” which was a great intro to Flex.  I found myself nodding in agreement several times, which was encouraging, because it means I’ve managed to grope forward somewhat in my own understanding of Flex Builder 2.

Finally, I saw and shook hands with Grant Skinner, who presented his views on potential pitfalls with the new garbage collection mechanism in Flash Player 9 (specifically, that of the ActionScript 3.0 virtual machine).  I have so much to sink my teeth into!  Really, Flash always keeps one step ahead of me, which is little like playing chess with someone who lets you catch up, then goes back to beating you 86% of the time:  that’s your best opponent, because the experience improves your game.  ;)

Eats

Todd introduced Chris and me to the Iron Works Barbeque for lunch.  The food was simply incredible … we each got the sample platter, which consists of a mountain-high pile of slow cooked meats.  I don’t remember when I’ve had such good food.

In the evening, I enjoyed the Flashforward Film Festival — lots of terrific entries, as usual — followed by an after party at Buffalo Billiards, again with plenty of free food and drinks.  I ran into Branden Hall at the bar and we got to talking about Lego Mindstorms and abstract strategy games such as mancala, Connect Four, Pente, Abalone, and the like.  It was fun, because I’ve admired Branden’s work for years, and he invited me to give him a call about his Flow project and maybe writing “patches” for his system.

Category tags: Flash, On the Personal Side

Flashforward 2006, Day 2

Posted Wednesday, September 13, 2006 10:47:33 AM by David Stiller

I made it!

Caught the last half of the keynote address.  Saw some cool quick glimpses of an in-house Flash 9 beta that happened so quickly, I barely remember what blipped in front of my eyes — but I’ll say this:  there were nifty thin vertical toolbars, somewhat like the Tools panel, whose icons seemed to slide open traditional panels like the Timeline, then slide them away again, maximizing Stage real estate (much cleaner than collapsible panels, which nonetheless take up space while collapsed).  I downed two cups of coffee while watching, so my observation faculties only kicked in after the projection screens went idle.  ;)

The coffee was a welcome relief.  I’d set my alarm for 5:00am in Houston, awoke, but fell right back asleep until 6:35.  Shuttles left every thirty minutes, and I had to be at the airport at 7:00.  Fortunately, that was my last small “lemon” event among my tales of woe.  The “lemonade” was that, amazingly, I woke up with zero bed head; literally, perfect hair.  So I was able to throw on my clothes (the same clothes) and walk right out the door to a cab.  Showers are for wimps, right?

Immediately after the keynote, I ran into Scott Fegette.  We had a great fifteen minute (or so) chat about all things Adobe, noting especially how well the Macromedia acquisition has gone.  I ran into Todd Sanders, too, who was originally going to let me crash at his house last night — that changed when Continental put me up at a Clarion in Houston, but the offer is very much appreciated.  Thanks again, bro!

Sessions

Session choices can be tough, because the presenters I want to see are often scheduled concurrently.  I attended a general Q/A roundtable with Mike Downey; saw an interesting prototyping app by Branden Hall, called Flow; saw Chafic Kazoun illuminate Component development for Flex; and rounded out the afternoon with a session on sound design by David Schroeder (great stuff!).  It was a nice mix, and of course my head is swimming with ideas, sparks, and possibilities.

The roundtable with Mike Downey reminded me what a “hidden” gem JSFL really is.  It’s not hidden, of course, but I’m surprised it isn’t more popular with developers.  A number of people had questions and feature requests for Flash that could be handled even today without too much effort in JSFL — mostly automation and asset management stuff.

In the evening, it was free food and drinks at a ten-year Flash anniversary party.  I hung out with Chris Georgenes, a good friend I only met face-to-face for the first time tonight, Scott, Todd, and a number of new faces.  I saw Chafic and thanked him for his Ultrashock tutorial on Flash MX 2004 Components.  Got into some brief discussion about Flex, which is great, because he may be able to answer some of my questions for an Adobe article in the works.  I’m glad to be here!

Colin Smith, Scott Fegette, David Stiller, Chris Georgenes
Colin Smith, Scott Fegette, David Stiller, Chris Georgenes

Category tags: Flash, On the Personal Side

Flashforward 2006, Day 1.5: Please, sir, I want some more

Posted Tuesday, September 12, 2006 2:06:15 AM by David Stiller

Shortly after I finished that last upbeat post, I boarded the plane to Houston; from there, it would be a short hop to Austin.  I shuffled my way to seat 15A and found a gentleman sitting in my seat.  He showed me his ticket — his also indicated 15A.  ;)  I moved a couple spots behind him, to an empty seat.  Soon thereafter, the fellow whose spot that was asked if I’d mind.  I moved again, settled in, still smiling.

Open Wide, More Lemons

The captain’s voice broke the gentle hubbub.  He informed us a technician had found that one of the plane’s tires was worn and might need to be replaced.  A few minutes later, that “might” turned into a “will.”  The odd thing to me was that the new tire, and the mechanic to install it, had to be flown in from Newark (that’s all the way from New Jersey to Virginia).  Bye-bye 5:38 flight!

Ahh, Lemonade!

We got into the air at 8:30pm.  I’m currently in a hotel, paid for by Continental (Clarion; not bad) and have a voucher for free breakfast.  If all goes well, I’ll catch the morning’s first flight to Austin and arrive fifteen minutes into Kevin Lynch’s Adobe Keynote address.  I can live with that.

This is beginning to remind me of The Muppet Movie, where Kermit and pals refuse to give up hope:  they will make it to Hollywood.

Four hours of sleep, baby!  I’m going to opt for the stack of pancakes.  And coffee.

Category tags: Flash, On the Personal Side

See Community MX content by David Stiller