Download
MotionBrush.zip

I’m pretty happy with this new software, so I’ll try to post more videos. Still working on getting better resolution out of the video host though…

Given that the new motion tween creates a bezier path, I’m guessing that we’ll have access to creating such a path with JSFL. Which led me to think about creating that path in real-time, similar to the real-time drawing that I’d seen from ScribbleBot on Chris’s blog. Instead of scribbling a line in real-time, I’d be sketching a motion path. There would be a variable to determine “smoothness” so that it doesn’t create an unmananageable amount of new motion keyframes. And it could probably be done with a custom tool rather than a panel, so that the sketching could be done directly on the stage.

That also leads me to wonder if there’s a way to record the armature animation in real-time and convert it to a motion tween, similar to the feature that already exists in After Effects CS3.

I know, I’m a nerd. The first idea there became MotionSketch. I haven’t yet found a way to accomplish the second idea with the armature, but I have a few ideas.

Prior to the release of Flash CS4, I had gotten a little hooked on creating Flash extensions. It’s quite easy to create a classic motion tween with JSFL (Flash Javascript), you can simply make the following call: timeline.createMotionTween(). It was likely that createMotionTween() would remain for legacy support even though the name of the tween had changed from “motion” to “classic.” I’d seen all of the great new motion features demonstrated online, and I expected there might be an equivalent call for a new motion tween. When Lee Brimelow linked to the CS4 documentation, I went right to the Extending Flash section to see what had been added. I didn’t see any additions for the motion features, but I had also previously seen Lee’s post on Flash Camp in San Francisco. Fortunately, I live close to San Francisco and I decided to head over try out the application early, and maybe get a chance to talk with some of the Flash team about any undocumented features.

While at Flash Camp, I spoke with Richard Galvan and he directed me to John Mayhew, the engineer behind the new motion model in Flash. John was very affable and willing to follow up with me, but he didn’t know of any undocumented features offhand. Unfortunately, adding features to the JSFL API is usually somewhat of an afterthought because so much of the development time is spent on the new features themselves. I had a few ideas to use the new 3D features while at Flash Camp as well, but they were similarly left out of the JSFL API.

So I let those ideas go for awhile and focused on a different extension as my Flash Camp project. A few weeks later, I got a little antsy and I starting digging around in the Flash configuration directory for clues. I noticed two files in the Javascript directory named MotionXML.jsfl and MotionClipboard.xml. I started looking around in the JSFL file for undocumented commands that I could use, but to little avail. I think I even put some trace calls into the JSFL to spit out info when copying motion from the Flash IDE. I noticed that even though copying and pasting a new motion tween appeared to work the same way in the Flash interface as copying and pasting a classic tween, a new motion tween was not triggering the calls in the JSFL file. Looking at the XML file, I found that even though copying a motion tween wasn’t using the same JSFL calls, it was saving XML to the same file…just different XML. The classic tweens were generating XML with a root tag of <Motion> and the new tweens were generating a root tag of <AnimationCore>.

Flash seemed to be able to discern which type of motion it was copying or pasting and acting accordingly. So it occurred to me that I could grab the data from the motion clipboard and alter it before pasting it back. Additionally, if I wanted data from an existing tween, I could run a Copy Motion command, available to JSFL as of Flash CS3 thanks to Robert Penner’s Copy Motion feature, then go about altering and pasting. These are the extensions that I’ve created thus far using that very technique:

• EaseCaddy
• MotionSketch
• MotionBlur

Below is a rundown of the steps I used in the extensions mentioned above. This technique can be used in lieu of the non-existent timeline.createMotionObjectTween() command. I refer to this as a “hack” because it’s an unsupported method, but given the complexity of what can be created with this new motion model, editing the XML is actually a fairly efficient way to go about creating/editing a tween. If the XML is not properly formed, it can cause Flash to crash when you try to paste the motion, or it can create some funky bugs in the Motion Editor. Be sure to test your code thoroughly before releasing anything for public consumption. The language is JSFL (used to automate and manipulate the Flash authoring environment). There’s a link to documentation for the AnimationCore XML listed in step 3.

Step 1: Store the motion clipboard so you can restore it when you’re done. In some cases, I store it as a file. In this example, I store it as a variable.

var MOTION_CLIPBOARD = fl.configURI + "Javascript/MotionClipboard.xml";
var tl = fl.getDocumentDOM().getTimeline();
var storedMotion = FLfile.read(MOTION_CLIPBOARD);

Step 2(a): Copy motion to clipboard, retrieve the new clipboard contents and convert to XML. Use this step if you want alter an existing motion tween. The MotionBlur extension uses this step.

tl.copyMotion();
var xmlstr = FLfile.read(MOTION_CLIPBOARD);
var motionXML = new XML(xmlstr)

Step 2(b): Instead of copying the motion, you can create a new tween by loading a more or less blank motion XML template and adding content to it. The MotionSketch extension uses this step.

Step 3: The motion XML can then be altered using E4X. This portion of the code is different for each extension, depending on what the extension is trying to accomplish. Here’s the documentation on CS4 Motion XML that Flash engineer John Mayhew graciously put together.

Step 4: Write the altered XML to the motion clipboard.

FLfile.write(MOTION_CLIPBOARD, motionXML.toXMLString());

Step 5: Paste the altered motion.

tl.pasteMotion();

Step 6: Restore the motion clipboard for the user.

FLfile.write(MOTION_CLIPBOARD, storedMotion);

If you want to know if a motion tween has already been applied, you can retrieve the tweenType property from the current frame. A classic tween will return a value of “motion” and a new motion tween will return a value of “motion object“. If you use Step 2(a), you’ll want to check and make sure you have a “motion object” selected before proceeding.

And there you have it.

There are other ways to go about this process. You could, since motion presets are just motion XML files, run this process through the Motion Presets panel’s JSFL calls, but this would require more steps than the process laid out above.

The short answer: Instance Names.

For the detailed answer check out this video tutorial using Actionscript 3.

The Actionscript has to know “who” you’re wanting to talk to. Just as we know human beings by name, and talk about them and to them by name, Actionscript references objects by name. A teacher might tell “Timmy” to sit down. Accordingly, your script might tell “circle” to move 10 pixels to the left. If no symbol with the name, “circle” exists, nothing happens; just as no one sits down if there’s no “Timmy” in the classroom.

Referencing nested MovieClips works the same way, just add a dot inbetween:
var clipReference = grandparentClip.parentClip.childClip;

Remember that a symbol name is different than an instance name. You can have multiple instances of a symbol on stage, but each instance name has to be unique. Instance names are set in the Property Inspector, symbol names are set in the Library.

Keep this idea in mind when working with Actionscript and it will make your life a whole lot easier.

Update: The video tutorial is now live. See the extension in action!

I picked up this style of lip syncing in Flash from Chris Georgenes’ tutorial.

Update (8/26/09): A savvy user caught a stage refresh bug introduced in Flash CS4 with AS3. If you’re using Flash CS4 & AS3 and the symbol isn’t updating when you select a new frame from the panel, download the most recent version below (1.0.3 has the fix).

Download

(compatible with Flash MX 2004, Flash 8, and Flash CS3)

FrameSync.mxp

Not everybody’s a programmer, though. So I’ve provided this detailed tutorial
for anyone would like to add a preloader to their Flash web project.

Getting started:

I usually like to put the preloader in its own scene so that it doesn’t disturb
my main timeline. If you’re not familiar with using scenes in Flash, a scene
can be added in the following manner:
- Window > Other Panels > Scene
- click the “+” to add a new scene
- drag it to the top
- and double-click to rename it
- I usually name it “preloader” and from hereon out I will refer to
it as the preloader scene

Then make sure your actionscript is organized in its own layer in the preloader
scene:
- add a new layer and rename it to ‘actions’
- lock the layer so nothing accidentally get placed on the stage for this layer
- select the first keyframe on the actions layer and open the actions panel
- the actions panel can be opened by hitting the f9 key or by going to Window > Actions

Then enter the following code:

Now for a detailed description of what everything does:

stop();

The stop() command tells the playhead to halt but allows the code on the stopped
frame to run.

loaderbar_mc._xscale = 0;

This code initializes the ‘_xscale’ property of an instance with the name
‘loaderbar_mc’ so that it has no width (because the movie has just begun loading).
This is basically a rectangular movieClip. The instance name is applied via
the properties inspector panel. Select the loaderbar movieClip on the stage
(it needs to be in the preloader scene if you chose to do this the way I’ve
listed). Make sure your symbol is a movieClip. Graphic symbols cannot have
instance names and are therefore inaccessible with ActionScript.

function preloading():Void{
var bLoaded:Number = getBytesLoaded();
var bTotal:Number = getBytesTotal();
var percentL:Number = (bLoaded bTotal) * 100;

This is the beginning of a custom function that I’ve written called ‘preloading’.
The word ‘function’ is used to begin the function, then the function name.
The parentheses are empty because no variables are being sent to the function.
The word ‘Void’ tells the application that the function is not returning any
variables, and the curly bracket begins the content of the function.

The next 3 lines are variable declarations. The ‘:Number’ is what’s called
strict data-typing. It tells Flash that this variable should be a number. If
I try to load it with a string variable (“atom” for instance) or
a boolean value (TRUE or FALSE), Flash will report an error in the output panel.

The first variable retrieves the bytes loaded by Flash, the second retrieves
the total bytes, and the third divides the current loaded bytes by the total
bytes to get a percentage (multiplying by 100 gets it into the form we’re used
to, like 56 instead of .56–we’ll add the percent sign next).

if (percentL < 100){
// (A) if you want to show text in the form of xx% loaded
percent_txt.text = Math.round(percentL) + “% loaded”;
// (B) if you want to show text in the form of xx Kb loaded/ xx Kb total
percent_txt.text = Math.round(bLoaded/1000) + ” Kb / “ + Math.round(bTotal/1000) + ” Kb” ;
// (C) if you want a loaderbar to grow with the % loaded
loaderbar_mc._xscale = percentL;
}

This next block is an ‘if’ statement. The content of the if statement is contained
in curly brackets just like our function (which we are still inside). The code
inside the parentheses is the statement that drives this command; as long as
it’s true, the lines inside the if statement’s curly brackets will continue
to run. In this case it’s checking to see if the percentL variable we created
in the previous line is less than 100.

The lines that begin with ‘//’ are merely comments for reference, they have no affect on the code. They represent 3 different
options I have provided for displaying feedback to the user. They can be used
seperately or in combination. Make sure to delete the items you don’t use or
comment them out by adding two slashes (‘//’) at the beginning of the line.
The ‘percent_txt’ refers to a dynamic text box on the stage with the instance
name ‘percent_txt.’ This text box must be set to ‘Dynamic text’ in the Property
Inspector to give it an instance name that we can reference with ActionScript.
I usually choose a web font (verdana or arial) and select ‘Use device fonts’
from the Property Inspector. This utilizes the user’s own fonts and keeps the
Flash file size low. The alternative is embedding a font, and depending on
the font, that can add a lot of girth to an swf.

The first two options (A and B) are merely concatenations (lumping bits together
into a string of text). I use Flash’s built-in Math.round function to round
to whole numbers for a less cluttered display. The third option (C) uses the
‘percentL’ variable that was created earlier to determine the size of our loaderbar_mc
movieClip, hence the loaderbar will seem to grow.

Finally we close out the ‘if’ statement with a curly brace.

else {
clearInterval(loaderInterval);
play();
}

Next, we use an ‘else’ statement to clear the ‘loaderInterval’ (which I’ll
explain in a second), and play() the main timeline (i.e., start the movie).
The else statement is what gets called when the condition within the if statement
(percentL < 100), is no longer true (because the movie is completely loaded,
100%).

}
loaderInterval = setInterval(preloading,25);

Finally we close out the function with a curly bracket and we’ve come to the
interval. An interval is something that occurs repeatedly until it’s cleared.
This is an alternative to using ‘onEnterFrame.’ I’ve stopped using onEnterFrame
because I like the versatility of using intervals.

This bit of code actually gets called before the ‘preloading’ function, because
a function must be called in order to run. In this case the preloading
function is getting called every 25 milliseconds or 40 times/second. This allows
for smooth animation of the loaderbar even if the swf is only set to 12 frames/second.
Whereas, onEnterFrame will only run at the document’s frame rate.

First we need to declare
the interval with a variable name so that it can be referenced and cleared
in our ‘else’ statement, hence ‘loaderInterval.’ Next we use the setInterval
function and two of its paramenters to call the preloading function from above
every 25 milliseconds. That means that ‘preloading’ will be called over and
over until the percentL variable reaches 100.

Clearing the interval is important
because it is memory intensive to have the user’s CPU calling a function over
and over, especially when other things are occurring within the swf. That’s
why we clear the loaderInterval once we’re done using it. I called this variable
‘loaderInterval’ because that’s its purpose in this code, but an interval can
be named just about anything.

Testing The Preloader

To test your movie go to Control > Test Movie. You’ll notice the preloader
scene shows very quickly if at all. That’s because we’re testing it locally.
To see what it would look like in action go to View > Simulate Download. You
can change the speed of the connection that’s being simulated by going to View
> Download settings and selecting a different speed.

That’s it!

A quick note:
This preloader code is designed for ActionScript 2 (Macromedia Flash MX 2004
or later, Flash player 6/7 or later). To make this code function in ActionScript
1, remove all of the strict data-typing (basically everything beginning
with a colon–:Number and :Void).

Happy Flashing!

-Justin