Using FreeHand MX with Flash MX
by Joe Sparks

Intro * Chapter 1 * Chapter 2 * Chapter 3

Chapter 2 - Creating Animation with FreeHand MX

In this chapter, we'll examine a variety of ways to create Flash animation with FreeHand MX. First, we need to understand how FreeHand can move pages and layers into frames of animation. Next, we need to examine the blend tool in detail. From there, we will have the foundation necessary to fully understand and use the "Release to Layers" Xtra to create animation inside FreeHand MX.

2A. Creating Frames of Animation from FreeHand Pages
2B. Creating Animation from FreeHand Layers
2C. Using the Blend Tool
2D. Animating with the "Release to Layers" Xtra

Question: How does FreeHand take static art and turn it into frames of animation?

Answer: FreeHand Layers and/or Pages can become frames of animation when you export a FreeHand MX document as a Flash (SWF) file.

2A. Creating Animation from FreeHand Pages
Let's begin with the extremely simple process of turning FreeHand pages into animation! This is fun.

2A.1 New Document
Let's set up a small document, 320 pixels wide and 240 pixels tall:

2A.1 Create the first page or frame of animation.
Next, draw the first frame of your animation. Here, I have drawn a simple face using FreeHand's pen and shape tool, on the first page (and only page of our document so far):

2A.2 Duplicate the first page (or create a second page)
I duplicated my first page (by choosing duplicate from the Document panel pop up menu), and then, I edited my simple face (closed the eyes):

Two frames are all we need for an animation, but I want to create a few more..

2A.3 Create more pages to serve as frames of animation (optional)
I duplicated more pages and edited further. As I go back and forth between pages to visually check my animation, I like to use the page selector buttons (see Image A.3b below). This helps you preview the animation quickly– you can rapidly jump thorough a bunch of pages, and FreeHand will center each page in the document window as you jump to each one- like a movie.

mage A.3a

2A.4 Check the Movie Settings
Choose Windows > Movie > settings from the menu, or click the movie setting button on the Controller toolbar. This window will open:

Movie Settings for this piece:

I want a single movie here, not multiple movies, so I chose Single on the Movie toggle.

For Layers, choose Flatten, because we are only animating page by page (we'll cover layers next).

For the Page Range, I'm picking All, but sometimes you will need to isolate a range of page to export. Use the From/To area to type a start and end page for your animation.

Frame Rate: I want the animation to move a little slower than the default 15 frames per second, so I set this to 6.

Autoplay toggle: is OFF because I want to add my own play button later.

Click OK on the Movie Settings dialog. (Save your FreeHand file. )

2A.5 Export a Flash (SWF) file to view the animation.
We are now ready to see the animation! We can choose Movie Preview (see "E. Preview our Flash Movie using the Test Movie Window" from Chapter 1) and when we are satisfied, we can export the SWF. My favorite place to view Flash movies is in the Flash player, so I tend to export a lot of SWF files as I work. Here's the result of my quick and dirty frame-by-frame animation:

Flash Demo A5- Frame by frame animation, using FreeHand pages as frames.

Download Source FreeHand MX file: Face_FrameByFrame_w3d.zip

Download SWF file: Face_FrameByFrame_w3d-swf.zip

A few more notes about this sample animation:

The file size is about 125k. I could have made this so much smaller if I had made the face and hair a SYMBOL. As it is, each page requires a duplicate of those graphics.

The file size is also larger because I used some rendering effects on a few pages (glow on the eyes) . This causes FreeHand to render some parts of my animation as bitmaps.

The play button her, was added in the way we added buttons to the logo browser in Chapter one. As you can see below, the Flash Action attached to the button is simply "play:"

The next way to build up frames of animation is through Layers. This is almost as simple as animating with pages and has some nice visual advantages for certain jobs. Here's a quick step-by-step demo of one way to do a simple animation using layers. Let's start a new document again...

2B.1. Start a new doc:

2B.2. Put something in the foreground layer..

2B.3. Duplicate the Foreground layer..

2B.4. Move objects in our new layer.
Make sure you are moving the objects in the new layer. You can tell which layer you are modifying by the highlight in the Layers panel.

If you have your FreeHand preferences set to "move selected objects by clicking on layer" then you must be careful to deselect objects before you click on a layer name in the Layers panel.

2B.5. Repeat until Satisfied.
Keeping duplicating, modifying, and/or adding layers. Add new art and effects as you feel the need! On the Layers panel, you can toggle the draw mode of layers, hide and show layers, and lock the layers. This can make editing easier as you go.

It is a very good idea to rename the layers as you add them, for clarity.

Note: Beware accidental moving of objects into different layers. If you have turned on the option in FreeHand Preferences > Panels called: "Clicking on layer names moves selected objects," then you must be careful to deselect objects before you click on a layer name in the Layers panel. Otherwise, whatever is selected will be automatically moved into a the layer you click on.

2B.6. Check the Movie Settings
Choose Windows > Movie > settings from the menu, or click the movie setting button on the Controller toolbar. This time, we need to set the Layers to Animate:

2B.7. Export a Flash (SWF) file to view the animation.
Take care to SHOW any hidden layers before you export, because hidden layers will not be added to your Flash animation. Here's the SWF export from this example so far:

Flash Demo B7- Frame by frame animation, using FreeHand LAYERS as frames.

Download Source FreeHand MX file: LayersAnim_w3d.zip

Download SWF file: LayersAnim_w3d-swf.zip

2B.8. Adding a still background to the animation
All layers placed below the "Separator Line" will be shown on every frame of the animation. I added some art to the background layer:

2B.9. Adding a still background to the animation
All layers placed below the "Separator Line" will be shown on every frame of the animation. I added some art to the background layer:

Flash Demo B9- Adding a background to previous example (B7)

Download Source FreeHand MX file: LayersAnim_w3e.zip

Download SWF file: LayersAnim_w3e-swf.zip

2C - Using the Blend tool

You now know the fundamental basics of how FreeHand transforms pages and layers into frames of animation. So far, we have been dealing with hand-drawn frame-by-frame animation- the kind of animation where you draw and modify each frame, one at a time.

Now, we are moving on to a more automated way of generating frames of animation. If you followed through on the previous projects, you may have noticed how difficult it is to create smooth animation by hand. This section will show you how to create very smooth transitional art for animation, and FreeHand does most of the hard work for you!

The Blend Tool is at the center of FreeHand's ability to generate new artwork and animation. Before we can begin to animate with the Blend tool, we must first know the basics of how it works.

2C.1. - Using the Blend tool to Create Blend Objects

2C.1.1 - Create two shapes in a new FreeHand document.
Let's start by creating the simplest kind of Blend object, a blend of two shapes. Below, I have created a circle and a star and place them on opposite sides of the page.

2C.1.2 - Click on the blend tool, and drag a line between the start shape and the end shape.
By clicking first on the circle shape, the circle will become the start shape. I hold down the mouse and drag a line over to the star shape, and released the mouse button over it. The star shape becomes the end shape in the blend.

2C.1.3 - Modify the blend with the Object Panel.
The end result of our blend appears below. When you select a blend object, it will appear in the Object panel. A setting called "Steps:" appears. You can enter the number of shapes in-between shapes at any time, and FreeHand will re-draw the blend. You can also adjust the range % to push the blend farther or closer to the start or end shapes.

2C.1.4 - Modify the start & end shapes.
Use the sub selection tool (alt or option key, for a shortcut) to select the start or end shape of the blend. Try adding a fill color, or a different line weight:

You can do much more than change the colors, you can also move the shapes around, add special effects, scale them, and transform them almost any way. The blend will automatically update to reflect your edits.

2C.2. - Blend Objects with more than 1 shape

Next, we explore other ways to create more sophisticated Blend objects

2C.2.1 - Create four different shapes.
I have created 4 different shapes, each with different colors and strokes. Note that the shape order in our Blend object is determined by the stacking order. The object in the back, underneath the other objects, will be first in the blend, and so on, until we reach the topmost object, which will be the last shape in the blend. Use the menu commands Modify > Arrange to keep object in the order you need.

2C.2.2 - Select shapes and choose Modify > Combine > Blend

Here is the result of this multi-object blend:

Let's practice editing the Blend object in a variety of ways.

Begin by selecting the key shapes with subselection tool, and editing them with ordinary FreeHand editing on the shapes. Below, I have moved shapes around and modified the vectors in a variety of ways. I also changed the number of steps in the Blend object to 10:

2C.3 - Attaching a Blend object to a vector path

2C.3.1. Create a Blend Object

2C.3.2. Create a vector path (it can be an open line/curve or closed shape or path)

2C.3.3 Select both the path and the Blend object

2C.3.4 Choose the menu item Modify > Combine > Join Blend To Path

That was easy! Here is the result:

One more Blend Object trick: Blending Live Effects! Check it out:

In the above example, I am blending more than just the stroke and fill. I applied 1 vector live effect (bend) and one raster live effect (glow) to the key shapes. The effect is pumped up on the start shapes, and then brought down to very little at the end shapes. FreeHand scales these effects properly throughout the blend! The only catch is, the order and type of effects need to match up from one shape to the next.

Note: Live "Raster" Effects will result in BITMAPS instead of vectors. This can make your Flash animation drastically larger in file size. These should be used sparingly for web work.

There's much more that you can do with FreeHand blending, but this is a nice introduction to the concept and usage. Now it is time to put our blend objects to work– cranking out frames of animation.

2D. Animating with "Release to Layers" Xtra

The "Release to Layers" Xtra can take a grouped object (like a blend object), break it down, and scatter the parts across the layers on a page. It can generate new layers, or use existing layers. By now, you should know that FreeHand can turn layers into frames of animation. And there you have it. This is how we animate our Blend objects.

The command at hand is found on the menu at Xtras > Animate > Release To Layers. Let's try it!

2D.1 Release To Layers: " Sequence Style"

>>You can follow along by downloading this FreeHand MX Document: AnimR2L_1_w1.zip

For this example, we'll pick up where we left off with our last Blend objects from the previous section. Here's the FreeHand document, with the Layers panel showing:

TIP: Before we begin, SAVE the FreeHand document with your blend objects intact. You could also duplicate the page with your Blend objects on it, for handy retrieval while working. the Release to Layers Xtra will break up Blend objects, in other words, destroy them. Keep a back up around, because you will likely need to re edit them many times before you are satisfied with your animation.

2D.1.1. - Select Blend Objects and chose "Release to Layers"
The Release To Layers dialog will pop up.

2D.1.2. - Choose "Sequence" from the Animate pop up menu and click OK.
Notice what happens in the layers panel:

2D.1.3. - Open Window > Movie > Settings and select Animate: Layers

2D.1.4. - View the movie (export SWF or do Windows > Movie > Test)
Check it out right here:

Flash Demo D.1.4

Okay, that's not the most effective animation in the world. Let's work on it a bit more..

2D.1.5. - Revert to your last saved document, or, undo until you get your blend objects back.

2D.1.6 - Increase the steps for each blend object to 21 (or higher).

TIP: if the redraw is getting you down, toggle the layer with your blend objects to draw in outline mode:

2D.1.7 - Let's rearrange the position and scale of our key shapes.
My recipe: Subselect the key shapes for Blend object 1, align them, and scale them up. Repeat this for The second Blend object. I'm going to drop the "GLOW raster effect, because it is making my animations over 1 meg. I'm going straight vector for now. Here's the new look so far:

2D.1.8 - Repeat steps 1.1 through 1.4 for this one (release to layers .. export a movie)
Let's see what this one looks like:

Flash Demo 2D.1.8

Download Source FreeHand MX file: AnimR2L_1_w4b.zip

I think I like that one much better.

Now let's go over the rest of the Release To Layers options. The Flash movie below shows each of 4 pop up choices on the Release To Layers dialog (Sequence, Build, Drop & Trail). I built this demo movie entirely inside FreeHand MX:

Flash Demo 2D.2 - Each of the Release to Layers options

Download Source FreeHand MX file: Each_R2L_method_w2.zip

To create the above demo in FreeHand, I used the "Use Existing Layers" setting on the Release-To-Layers dialog. I need this, because I wanted all of my animations to play at the same time. The first "Release" was a sequence release. That created all of the layers I needed. As I went on to do the Build, Drop, and Trail releases, I checked off "Use Existing Layers," so these additional Blends would insert themselves into the layers created by the first release:

2D.2 Animating Text with Release to Layers

So far, we've used the Release to Layers command works on Blend objects. The same process work on groups, text blocks, or objects attached to a path as well, and in exactly the same way. Let's make a simple text block animation:

2D.2.1. - Create & select a Text object:

2D.2.2. - Choose menu Xtras > Animate > "Release to Layers"
Below is the end results of the four methods, used on our text object (note: gray text in background was added to show placement of text objects before Release To Layers was used):

Flash Demo 2D.2.2- Each of the Release to Layers options with Text Block

Download Source FreeHand MX files + SWF: TextAnim1_source.zip

The above process, which we have used on Blend objects and text, works just as well for groups and objects on a path. Let's do a more involved animation that is based on a group.

2D.3 - Logomation Project

First we need a logo. Here's a quick recipe for creating a logo.

2D.3.1. - Create Logo

Notice that I have used the fish-eye tool, located right on the Tool Bar. This little wonder allows you to do some very smooth distortion. I made an extra large fish-eye circle around the logo, leaving it near the upper left of the area of distortion. This resulted in an off-center, pleasing bend/warp effect.

2D.3.2. - Break up logo into component shapes
Using modify > un-group and modify > split, I managed to break down my logo into tiny shapes. This particular font is really cool for animation, because the letters are composed of many separated tiny objects:

Notice that I have used the fish-eye tool, located right on the Tool Bar. This little wonder allows you to do some very smooth distortion. I made an extra large fish-eye circle around the logo, leaving it near the upper left of the area of distortion. This resulted in an off-center, pleasing bend/warp effect.

2D.3.3. - Regroup the Shapes (however you want)
Next, regroup all of the parts into one single group. Adjusting stacking order of the individual shapes, and pregrouping some sub-sets of the shapes, can be used to guide the animation in a variety of ways.

2D.3.4 - Release To Layers > Build Animation
In this version, I tried coloring and grouping the logo in several ways. I then used Release To Layers > Build on each of the groups. The 1st red logo: I used a simple select all > group. The orange logo: I selected one row of shapes, and sent to back, and repeated with a second row (Modify > Arrange > Send To Back). I then placed a copy of the complate red logo behind the orange shapes, and grouped all. The yellow logo, I grouped some hand-selected sets of shapes before grouping everything. Next, I duplicated a few more layers containing and all-white logo at the end, and deleted the logo every other layer to make it flash. Finally, I set my movie options to 24 fps, exported a SWF, and here is the result:

Flash Demo 2D.3.4- Logomation Varieties of Grouping with R to L

Download Source FreeHand MX files + SWF: logomation1_source.zip

Next: Chapter 3 - FreeHand & Flash Integration and Workflow