Thursday, April 19, 2007

Tutorial: Converting Motion to Code in Flash CS3

Adobe's latest incarnation of Flash, the first version from Adobe since acquiring Macromedia offers a slick new feature to allow the conversion of "hand-tweened" motion/animation into ActionScript. While its necessity in one developer teams may not be great, its utility with large Flash teams is huge. After the jump, read a real quick (because it's just that easy) tutorial on how to convert frame animation into ActionScript animation.

Flash has always offered two options when it comes to deigning animations and interactions within the interface. The first follows a traditional animation frame sequence style, wherein you start with an object in a key frame followed by subsequent key frames where the object has moved and then it is tweened (aka in-between frames animation). This method is usually preferred by designers as it's easy to visualize an objects path.

The second method is to replicate the objects animation with code. This is usually the preferred method amongst programmers and senior Flash developers as it's easier to adjust a line of code than pair down through tiers of layers.

However, in single developer teams each can generally produce the same end results. However a disconnect arises in team environments when a designer starts a Flash project and a developer finishes up the back end.

Of course this tutorial is on the latest CS3 version of Flash, so you will need either the full version or beta to proceed with the tutorial.

Step 1: Download/Assess Assets
Take our very simplistic Flash file (download What we have is a simple square bouncing along through four keyframes. The animation has keyframes on the first, fifth, tenth and fifteenth frames. The first and fifteenth frames are identical to create the illusion of the animation looping.

Step 2: Copy the motion and create AS code
Adobe as made the job of converting this simple animation into a nice clean block of code remarkably well. With your mouse, highlight all of the animation frames on the layer and control+click (left click on 2-button mouses) to reveal the timeline contextual menu. Select the option towards the bottom to "Copy motion as ActionScript 3.0...".

Step 3: Provide an instance name for AS code
This brings up a prompt requesting the "Instance name to use in the ActionScript". For the purpose of the tutorial I've used "squareD". Of course you can use whatever naming convention is preferential to you. Click okay and on the fly, Flash has now converted the keyframe and tween information into a nice clean XML format to the clipboard.

Step 4: Create a new layer and paste in the code
Create a new layer and name it 'actions'. Click into the first frame of your newly created layer and open the Actions palette (Window -> Actions). Paste in the code from the clipboard and you know how the code base from Flash in your file.

Let's take a moment to examine Flash's new XML-based ActionScript 3.0. In our pasted code you see a couple primary nodes: 'Source' and 'Keyframe' nested in the parent 'Motion' node. The 'Source' node lays out all of the parameters and definitions for the animation and the object having motion applied to it.

The 'Keyframe' blocks real at what frame the animation will occur, it's position, it's easing effects, and any filters or transformations applied.

With the XML foundation the code becomes a lot easier to understand and dissect. In turn this allows us to adjust our animation quickly, directly into the code block.

Step 5: Create/Drop a movie clip on the stage and provide it with the entered instance name
We're almost done. Remember when we were asked to define an instance name in the prompt? Well we set the name, but we haven't placed an object on the stage with that instance name. To ensure we don't mistake our hand-tweened animation for the new animation, let's make that layer a guide and hide it. This should clear the stage of any objects so that we have a fresh slate.

Create a new layer and label it 'new instance'. Because our code base is defined by an instance name rather than an exported clip, we can drop in any movie clip shape, size, color we want, label it 'squareD' and our code will be applied to that instance. This is convenient when you have changes to your movie clip, or you want to reuse the animation for other objects.

For the purpose of testing this out select the oval drawing tool and draw an oval on the stage. Select the newly created shape and convert it to a symbol.

With the shape selected, provide it with the instance name 'squareD'. Hit publish and see our new movie in action. Our old hand-tweened code has been converted into a reusable function to apply to any movie clip we desire. Not too shabby. Here's the finished FLA ( for reference.


Post a Comment

<< Home