Keyframer

Adobe Flash CS4
On first launch of Flash CS4, you’ll find what I regard as a smart and mature interface. It is amazing to think this is the same program as version 3 when I first discovered it.  There are no major changes to the interface in Flash CS4, it will still look familiar to you if you are coming from previous versions. What changed are several subtle refinements to the overall look and feel. Most notably is the new Properties panel – for the first time ever, it is vertical!

Personally this is a major improvement because I have never been able to find a happy home for the older horizontal Properties panel. I use a high a display resolution as physically possible (1920×1200 minimum) and docking the older Properties panel created a lot of empty panel space. Having it undocked forced me to constantly move it around as I worked. Now with CS4, the vertical Properties panel docks perfectly along with the rest of the panels.

Like previous versions, you can create and save your own custom workspaces, but you may not even need to with the new array of well thought workspace designs Adobe has provided via the menu dropdown. The default is aptly named Essentials and depending on your task at hand, Animator, Classic, Debug, Designer, and Developer are within quick and easy reach.

New Panels
Allow me to introduce to the brand new Motion Editor panel, a powerful new tool that provides full control of each individual property of animated objects. Think of the Motion Editor as the Timeline panel’s older brother. We’ll discover its power later on.Kuler is now integrated into Flash CS4! The well known and highly praised web-based color mixing application from Adobe is now within easy reach as its own Flash CS4 panel. Very “kool”!

The Motion Presets panel (another one of my new favorites) provides easy access and management of default and custom saved animations. This means anyone can save an animation as a preset and apply it to another object with the click of a button. Build vast libraries of reusable animations and save hours of valuable production time. Supports import and export of presets for sharing across teams.

Motion Model (object-based animation)
For those of you who have ever used Flash for animation, then you are probably familiar with Motion Tweens, a Flash animation staple since the dawn of time. Motion tweening has always been a very straightforward and simple process. The tween essentially interpolated animation between 2 keyframes. This interpolation was based on changes to the object’s properties (position, scale, color effect, etc.). What was limiting about the Motion Tween was that it was frame-based, hindering the ability to control multiple properties over the span of the tween.

Now, take all of what you know about the “classic” tweening method and put it up on a shelf for a moment.

Adobe has completely rewritten the animation core. The new Motion Model is object-based, not frame-based. This is the major difference between the 2 methods and it opens up several new doors that the older Motion Tween model didn’t allow for. Object-based tweening enables additional properties to be controlled independently while reducing the number of steps required with the “classic” tweening method. When a Motion Model tween is applied to an object, a motion path is automatically generated on the stage. This path is easily modified with Bezier handles and timing can be adjusted throughout an animation without having to manually insert keyframes in the timeline which would break a “classic” tween.

Knowing that the new object-based Motion Model will break any and all previous workflows, Adobe has retained the previous method of motion tween via the right click context menu. It is now appropriately named “Classic Tween”. Thanks Adobe for listening and realizing that having 2 options is always better than 1.

Motion Editor
If the Timeline panel is used to make your bigger brush strokes, then the Motion Editor is used for your smaller and more detailed brush strokes. The Motion Editor is a powerful new panel that provides fine-tuning of your animations. This is as close to an After Effects timeline as Flash has ever been. Here you can easily edit and control animations across individual properties without touching the Timeline panel. You now have complete freedom to adjust parameters such as rotation, size, color, and more within a tween.

The first category of properties is Basic motion. Here you can fine-tune the position of your object based on its “X”, “Y” and “Rotation Z” axis.  The second category is Transformation, allowing you to control the Skew and Scale of your object along it’s “X” and “Y” axis. Each property has its own hot text slider for quick and easy adjustments as well as the ability to add and remove keyframes.There is also an Eases category that provides a list of preset eases and the option to create your own custom eases. You can apply easing to any or all of the properties you wish.

With key modifiers, you can edit the curve of each property and then copy and paste curves from one property to another.
Some of you may rarely use the Motion Editor depending on your animation needs. As for animators using Flash, the Motion Editor may just be the feature you have been waiting for. Imagine a workflow where you can block out your basic animations on the stage using the new object-based Motion Model, and then delve deeper into your animation using the new Motion Editor. Flash bliss if you ask me.

Bones (Inverse Kinematics)
It’s here! It’s finally here! Remember when you were a little kid and Christmas morning couldn’t come fast enough? Well the holiday gift-giving just came early this year. Inverse Kinematics is now in Flash! I have to say, I have been drooling over this feature since Macromedia’s MAX conference in New Orleans back in 2004. I was there as a speaker and during my session showed how I simulated Inverse Kinematic by editing the center point of a symbol based on how I wanted it to rotate. It was not really close to Inverse Kinematics but it sufficed for many years. After my session I was approached by a Flash engineer who happened to be attending my session. With his laptop in hand, he showed me an internal Flash “IK” prototype that was very promising. He later sent it to me to test and play around with but ultimately the feature never made it into Flash for what I can only imagine was internal political reasons.

That was then, this is now.

Adobe has appeased the masses by introducing Bones, inverse kinematics  for Flash CS4. Simply put, the Bone tool allows you to quickly link several objects together to create a chain-like effect.  It is essentially that simple to use too. Duplicate a Movie Clip several times on stage and arrange them as you would like. I have chosen to create a box car scenario.

Using the Bone tool, click and drag from one Movie Clip to another, repeating this procedure for each additional Movie Clip.

The very first object in the chain automatically becomes the “parent” in the chain. Flash automatically creates an “Armature” layer for the chain to reside in. Once the chain is complete, use the Selection tool to click and drag one of the objects to see the armature at work.

With the armature selected, the Properties panel is updated to reflect several options. You can enable constraints for joint rotation using simple check boxes and hot text sliders. This is very useful in situations where character animations are rigged with the Bones tool. You can specify how far individual limbs can rotate based on anatomical accuracies. The Properties panel also provides “X” and “Y” constraints in the same fashion.  Individual custom constraint parameters can be set for each individual Bone in the chain.

An armature can easily be animated but they can also be developed for manipulation at runtime in the Flash Player. Select the Armature layer in the timeline and then use the drop down in the Properties panel to change the type from Authortime to Runtime.

3D Transformation tools
If all of that wasn’t enough, Flash CS4 supports 3D transformation and rotation of objects in 3D space! Select the 3D Rotation tool from the Toolbar and select an object. Here I have imported a bitmap and converted it to a Movie Clip symbol.

With the object selected, a visually intuitive cross hair is displayed, allowing you to manipulate the object along its x-, y-, and z-axis.

The Properties panel provides local and global transformation tools for precise control. Field of view allows you to numerically define the angle and depth of your animation.

Vanishing point enables you to define the location at which your animation disappears in the distance.

Summary
I can easily recall being excited about previous releases, but Flash CS4 may prove to be the most exciting Flash release to date. There are of course a lot more improvements to Flash that you will just have to discover on your own, but at least now you have an idea of some of the major enhancements Adobe has provided.  In upcoming days and weeks, I will be writing and recording more Flash CS4 content that delves much deeper into the intricacies of its features.
To learn more about the entire CS4 suite of tools - check out Colin Smith’s CS4 learning site and David Stiller’s CS4 video tutorials for Layers Magazine.