Flash CS4, big changes ahead

When CS3 came out almost 18 months ago, we didn't know what to expect from the new merger between Adobe and Macromedia. What we got in the IDE was some new panels and copy and paste between a few of the apps. But Flash CS4 is what we have really been waiting for since Flash became an Adobe property. Several advancements in the IDE, new animation controls and did I mention 3D?

UPDATE: Flash CS4 and the entire CS4 family of software is now shipping.

It is important to note that during the time of this writing, the build being used was still a beta and not gold master. Some things may change in the final release, and if so we will adjust this article accordingly. This review covers the core features of Flash CS4. If you're a programmer, make sure you also read Keith Peters article "I like Flash CS4".

When you launch Flash CS4 Professional, the first thing you will notice is the new IDE. As a matter of fact, if you are an experienced Flash user, you won’t even recognize the IDE. Now by default, the timeline is at the bottom of the page, where the properties inspector used to be and the properties inspector is now on the right in a vertical layout with sections broken apart into an accordion style layout. Also, the toolbar is now on the far right just past the properties inspector. The stage itself is now front row and you should be able to get more realestate for it than in previous versions of Flash.

 

 

Above the stage you will notice tabs for multiple files and above that, at the far right, you will notice a layout drop down control for switching quickly between different types of layouts for different tasks. And right beside that is a search field. You will notice this search field in many of the CS4 apps and it is a quick way to search for help on a variety of topics. As of this writing, it takes you to the web, but hopefully it will also integrate with the built in documentation.

Now, taking a quick look at the properties inspector when the stage is selected, you might notice 2 unique things about the frames per second (FPS) property. First, the default frames per second is no longer 12, as it has been in every previous release of Flash since forever, it is now 24. Second, the field looks like a hyper link? Well, if you have used After Effects, this type of form element will be familiar to you, it’s a scrubby text field. These elements allow you to single click and drag from left to right on an invisible slide path to increase or decrease their value, or you can simply double click and fill in the field as an input text field.

 

And going back to search, many of us have run into files with libraries overflowing with symbols making it difficult to track down what you’re looking for. Search is now integrated into the library and will dial down the symbols as you type until you find the one you are looking for. In addition to that, when you create a new symbol, you can also tell it which folder in the Library to go into, or create a new one as well to help keep you organized.

And in keeping with search, there is a new panel under Window>Other Panels>Search for Help that allows you to type search terms and it will make topic suggestions as you type. Hopefully this will be integrated into the documentation when CS4 launches.

Speaking of new panels, under Window>Extensions>Kuler you will find a panel that gives you access to Adobe’s online color theme manager. With it, you will be able to see themes such as the most popular, newest and even search for them. You can also create your own theme right from within the panel. Once you have the theme selected, you will be able to add those swatches to the swatches panel in Flash. When we tested it in the beta, everything worked up until adding the swatches to our own swatch panel, this caused Flash to crash, but that’s why they call it beta.

 

 

As you start working more and more with objects on the stage, you will notice a few interesting things. Objects, bitmaps and text on the stage look exactly like they do when you test the movie, where as in previous versions of Flash, you would lay stuff out, test the movie and then go back and make adjustments, because it never quite looked the same. Flash CS4 Professional uses the Adobe Flash Player to render the stage during authoring. This is one of my favorite features in this new version strictly based on the amount of time it saves me. A couple things that having the Flash player render everything in the IDE allows is 1 9-slice scaling on the stage. Another cool feature is object ghosting, which is when you select an object such as a movie clip on the stage and move it, you will see a ghost image of that movie clip in its previous position as you are currently dragging it around. We will come back to this later with another great feature that uses the Flash player in the IDE.

Animation

Ok, this is a big deal. Adobe has completely revamped how timeline animations happen. They have done this by making it less of a timeline-based animation and instead opting for an object-based animation. To create one, follow these steps:

1. Draw a rectangle on the stage.

2. Convert this shape to a movie clip symbol.

3. Right click the new movie clip and select Create Motion Tween.

4. Move the rectangle somewhere else.

That’s all you need to do to create an animation. You will notice that a lot of stuff changed after the last step. In the timeline, you will see the layer icon change and 25 frames added to the timeline with something similar to a keyframe at the end, (it’s not a keyframe, trust me). On the stage, you will see a motion path created with several dots along the line. This is an actual object, it’s not just some guide to help you see what your animation will do. You can grab these dots using the selection or subselection tool and control them like any other Bezier point. You can also use the free transform tool on the entire motion path to size and skew it. You can even give it an instance name to control it in ActionScript.

Some people won’t like working with the Bezier points in the motion path. Not a problem, simply draw your own path using the line tool, pen tool or pencil tool. Select and then copy the newly created stroke path. Select the motion path and hit paste. The motion path will be replaced with what you just drew by hand.

Another great thing about how animation is now object-based, if you want to change the overall timing of your animation, simply go the end of the animation on the timeline, and stretch it out. Everything in the animation will adhere to the new length without any other changes taking place. Good luck trying that in the previous versions of Flash timeline based animation.

Now let’s say a user accidentally skips step 2 and right clicks on a raw shape on the stage to create a motion tween. Not a problem, the interface will ask if you want the object converted in order to make the animation.

So the truth is, the first day I started working with this new type of animation, I hated it. After a couple days I was used to it. After a couple weeks, I wondered how I ever did timeline-based animation before, especially with the inevitable changes that always occur. And, if you have to use the timeline-based animation, you still can by right clicking in the timeline and selecting either Create Classic Tween or Create Shape Tween.

Adobe did a great thing here for getting new users to be able to animate on the first day they use Flash, but they didn’t forget about experienced Flash users either, they put something in for us to.

The Motion Editor

Like a few others things in this version of Flash, if you have used After Effects, this won’t be to scary. The motion editor allows you to control every aspect of your object-based animation. You control all the properties of a movie clip including position, rotation, scaling, alpha, skewing, filters, color effects and 3D options (more on that later). And you can control them independently with their own predefined eases. For instance, if you wanted an object to move from left to right over the course of a second, but fade from 0 to 100 in half that time, you would have to do some fancy key framing, or do one animation and then convert that timeline to a movie clip and then do the other animation on a different timeline. Now you can do it all with one object-based animation with the motion editor.

 

 

It’s a bit overwhelming at first at how much control you have over all the individual properties and how you can control their easing in a graphical form. Fortunately, there are several common eases that can apply built into it.

So Adobe has really stepped up how animation is built in Flash, but they didn’t stop there. They added a couple tools in the tool bar that make some of the most complex animations as easy as connecting dots.

Inverse Kinematics

Inverse Kinematics is a fancy name for puppet animation. Basically, you link your objects together like arms and legs of a puppet and when they animate, the animation will take into account those links between objects. For instance, if you created a skeleton and wanted to animate him dancing, in the previous version of Flash, you would have to manually take into account how if one part of the arm moves, then the whole arm will move in conjunction, but with inverse kinematics, you can connect those pieces and then simply animate one piece and watch the others react. To connect those pieces, you would use the new Bone tool and drop those connections on the joint or pivot point between them. Once the bones are in place, you can select them and set properties that control how the work.

For instance, you can control whether the connection just works for rotation, or does it also control the X and Y properties of the connecting object. You can also set constraints for those properties so, for instance, the rotation only goes 45 degrees and doesn’t just spin around completely.

 

 

You can also apply inverse kinematics to raw shapes to constrain their points. For instance, you can draw a 5-pointed star. Then apply inverse kinematics to it by drawing from the center of the star out to the points. Then, using the selection tool, manipulate those points. You will see that they constrain to the bones.

 

 

And because as mentioned before, the authoring environment renders using the Flash Player, you can test your inverse kinematics setup without ever having to test the movie. Once you have you connections, use the selection tool to rotate and drag the connected objects to see how they will react.

There are a couple more tools that were added to this version of Flash. The first is the Deco tool, which allows dynamically fill shapes with things such as vines and flowers, or create kaleidoscope type visuals right on the stage. I wasn’t extremely impressed with the execution of the tool itself, but the fact that it’s scripted means you can go in and make versions of your own using the same principles, so it will be exciting to see what others create based on that tool.

The other two tools that were added have to do with a feature that people have wanted in Flash since before we saw it called MX. 3D, well sort of 3D.

2.5D support in Flash

So Flash has 2 tools that support 3D, but it’s not really 3D. It’s the manipulation of 2D objects in 3D space, so you can rotate them in all 3 dimensions or move them around in all three dimensions, but you will not be able to draw a cube, and then rotate that cube, at least not with these tools. That being said, the implementation is amazing. Very intuitive and fun to use. The two tools are the 3D Rotation Tool for manipulating the objects rotation and 3D Translation Tool for controlling the objects position in 3D space. You can of course animate these features and even control position and perspective from the properties inspector and even set its vanishing point if you are animating it.

There were a couple of issues when playing with this feature during testing that may cause some problems. The biggest one was depth management. When manipulating multiple objects in 3D space, sometimes their depths do not match up correctly. Adobe was aware of this, and it will hopefully be worked out before the final release, or users might just have to write their own depth manager for it since 3D support (as well as inverse kinematics) have ActionScript 3 API’s you can use to accomplish the same thing during runtime.

And to be clear, this 3D support is in no way a replacement for 3D frameworks like PaperVision. If anything, these frameworks will be able to make things like PaperVision stronger and faster.

XFL

Importing layered files into Flash has never been perfect. The Adobe and Macromedia merger helped, but wasn’t as smooth as everyone would have liked. Enter XFL, a new open format for Flash documents. This version of Flash isn’t saving in them, but Indesign and After Effects can export them, which can then be imported into Flash. This is great news not only for this release, but moving forward in general for Adobe products as they are trying to create standard formats that can be passed between applications with lossless quality.

Publishing

A couple things to note about publishing in Flash CS4. Their default Flash detection and embedding seems much more like SwfObject than in previous versions. Also, there are two Flash 10 publishing options; the default is the standard Flash 10 Player and the other utilizes the new Flash text engine. And another great publishing feature is the ability to publish an AIR app right from Flash. Once you set the publishing profile to publish in AIR, you can change the installer settings by going to File>AIR Settings. Of course, not all the same features are supported in AIR that are in Flash 10, but hopefully that will change, and warnings are given when publishing to AIR if you are using any of these features.

 

 

Summary

All in all, this is really what everyone was hoping for from the Adobe merger, plus a few more features we’ve wanted for a long time. The Flash 10 Player is insanely fast, and the IDE is equally as useful. Seasoned Flash users will take a couple days to fully appreciate all the changes and users new to Flash will be able to see a lot more of their ideas see fruition without a lot of heavy coding.