Using FreeHand MX with Flash MX
by Joe Sparks

Intro * Chapter 1 * Chapter 2 * Chapter 3

Chapter 3 - FreeHand & Flash Integration and Workflow

In this chapter, we'll be bouncing back and forth between Flash MX & FreeHand MX, exploring the details of import, export, launch and edit.

3A - SWF Import
3B - SWF Launch and Edit, from FreeHand to Flash and Back Again
3C - Opening & Using FreeHand MX files in Flash MX

3D - Bonus Project 1: Using FreeHand to Contribute to Flash Animation
A fun animation project that uses a variety of FreeHand and Flash techniques we have learned so far.

3E - Bonus Project 2: Creating a complex Character for Flash Animation
Another little animation project that involved character creation and layer preparation in Freehand MX, with the goal of animating this character in Flash MX

After you import a SWF file into FreeHand MX, you can use the Object panel to alter many aspects of the Flash movies. Let's begin by setting up a very simple, multi-frame Flash movie:

3A.0 - Open Flash source movie, and export SWF
Here's my source Flash Movie, a simple animation of some curtains opening:

Once I'm satisfied with my Flash file, I export it as a SWF.

3A.1 - Import SWF into FreeHand MX document

Menu File > Import will bring up the FreeHand import dialog. Pick the SWF file:

3A.1 Click on document page to place movie
Simply click anywhere in the workspace to tell FreeHand where to drop the SWF into your document.

3A.2. Select movie and open Object Panel
Click once on the SWF, and note the options that appear within the Object panel:

3A.3. Use Object Panel to adjust movie to suit your work needs
I'm changing a different frame in my movie, to part the curtains a bit:

3A.4. Continue to work in FreeHand as needed
Start working! You can treat the SWF as just another FreeHand Object, and begin working around it. Below, I found it helpful to place the SWF Movie in its own layer and lock it, which makes it easier to work with FreeHand elements behind the movie:

3A.5. Export as SWF, or save as FreeHand
You can export a working SWF right from FreeHand. Here's the SWF from the above document, with one difference from all previous exports to Flash so far- this play button has a "go to and stop" action on it, to take us to the second page of the FreeHand document, then stop. Even though stopped, the Flash movie embedded in it will play, because that is how the original SWF is set up:

Chapter 3 - Flash Demo A5 - Embedded SWF


Download Source FreeHand MX files: revealer_source.zip

When you need to make a change to your imported Flash files, you do not need to re-export from Flash, re-import, re-position, and other repeat work. There is a handy shortcut, called "Launch and Edit." FreeHand MX allows you to quickly launch Flash MX, make edits on the imported Flash file, and return to FreeHand to continue. This can be a real time saver.

3B.1. - Select the imported SWF in a FreeHand document
Below, I have selected the Curtains movie. I want to change the colors on the curtain.

3B.2. - Click the Launch and Edit button

You might think that FreeHand's powerful SWF export is the best way to get FreeHand work out to Flash. This is not always the case. Many times, the native FreeHand MX document is the very best way to transfer work from FreeHand into Flash. You can bypass additional exports and file types, and simply import a saved FreeHand document. You may find that you gain more control over the import and simplify your projects.

Before we dive into the mechanics of importing FreeHand into Flash, I want to say a few words about this little question you may be asking:

Why use FreeHand for Flash work?

There are many good reasons to do some of your Flash artwork & vector illustration in FreeHand. This is especially true and If the work you do involved the creation of both web and print.

I really enjoy the built-in drawing tools and vector manipulation capabilities of Flash, but because of the significant differences between how Flash and FreeHand handle vectors, it is often a wonderful thing to have your more precious assets locked away inside a FreeHand document. When I say "precious assets" I am thinking about things like Logos, and key identity art, an important mascot cartoon character design, and so on. These types of things might be needed for so many kinds of beyond-the-web print jobs, like letterheads, package design,advertising, postcards, t-shirts, and you never know what else!

FreeHand gives you more control and options when it comes to printing and preparing print jobs. Things like managing spot colors, text flow, multi-page layout options, and a wider variety of export types are just a few of the things that come to mind. You have more flexibility and precision for graphic and page design.

Here's another reason to use FreeHand for VIP asset design. It is a more obscure, esoteric reason, but still quite a real issue to professional illustrators. FreeHand maintains vectors EXACTLY, unlike Flash, which can automatically add or delete points on vector shapes as they are manipulated, scaled, rotated, and so on. This can lead to some degradation of the integrity of the vector art. It can also make shapes more difficult to edit, especially in the case where a 3 point spline shape suddenly becomes a complicated 40 point polygon– simply because you de-selected it.

The notes above come from my own experience of moving Flash assets into print designs. There have been a few times in my Flash career where I needed to make hi resolution print designs (for merchandise and printed materials) out of art materials from my Flash work. For some of my Flash work, I had started the assets in FreeHand, and brought them into Flash. For other assets, I had developed them entirely in Flash. I found that it was far easier to develop the print assets when I had source material art that was originally created in FreeHand.

TIP: The quickest way to import FreeHand art into Flash is simply to copy from FreeHand and paste into Flash.

I stress the "copy & paste" method first, because for many simple tasks, this will be all you need to do. If you have Freehand and Flash open, select some objects in FreeHand, copy them, switch to Flash, and paste. This works great in most simple situations, where you simply wish to get a bit of art into Flash. Copying back and forth between Flash and Freehand is so quick and easy, FreeHand becomes like an extension of Flash, adding a whole new set high powered vector editing tools to your work-a-day arsenal.

For more power and control over the import of FreeHand work, you can do use Flash to do a "formal" import of a saved FreeHand document.

3C.1 - Importing simple shapes and gradients.

Let's example a FreeHand document containing some simple shapes. We will import this doc into Flash MX, and examine the results in detail. We will gain some valuable information about how to plan work in FreeHand for Flash import.

Here is the simple shapes in FreeHand MX:

Everything above looks exactly like it did in FreeHand, except for two shapes in which I used unsupported strokes and fills.

You will find that most FreeHand object will arrive inside Flash as Groups. This is a good thing, because otherwise, Flash would have to mix up and merge together overlapping shapes that live on a single layer.

Flash will simulate certain FreeHand gradient types through the use of mask layers and multiple objects, embedded into a graphic symbol. The colors of the gradient will be turned into individual shapes. The overall shape will usually be copied into Mask layer inside the symbol.

In this way, Flash MX preserves the look of difficult artwork imported from FreeHand MX, but it comes at the cost of edit-ability. These multi-shape symbols are difficult to edit, because they consist of large clusters of solid color shapes, each containing in a group. Depending on the complexity of the gradient, these can number in the 10 to 100's of shapes.

IMPORTANT: The question you must ask yourself when you are creating art for Flash inside of FreeHand is: "Will I need to be able re-shape these vectors inside of Flash?" If not, then, don't worry too much about it. But if you will need to change the vector shape for any reason, for animation, for compression, for shape tweening- then you should avoid complex gradients inside of FreeHand, and use solid colors instead.

TIP: If you need to further edit the vector paths, lines & fills of FreeHand shapes inside of Flash, avoid the use of complex FreeHand gradients .

A similar translation of gradients can occur in the reverse direction- when exporting vector art from Flash, gradients will be translated into discrete shapes. If any gradient shapes give you trouble inside FreeHand (or any other vector editing software), you should consider replacing Flash gradients with flat, single color fills, and re-export the vectors.

In the next part of this chapter, the "Bonus Projects," we will make practical use of some things we have learned so far, and further explore additional Freehand and Flash techniques.

3D - Bonus Project 1: Using FreeHand to Contribute to Flash Animation

Using FreeHand and Flash, I came up with this little CD Cover for DJ Matt Hite:

Now, I want to animate this little scene, synced to a little music loop. I want the whole thing to pulsate to the music!

The first thing I will animate is the background city skyline. I have decided to use FreeHand's 3D Rotation tool on the city art to create keyframes for a cool shape tween idea. While I could use the distort tool in Flash to achieve something like this, I really wanted to get the true 3D perspective that FreeHand's 3D rotation tool allows.

3D.1 - Quick Shape Tween Animation with FreeHand Assistance

3D.1.1. - Copy the Flash Art and paste into FreeHand.
This is a very simple shape from Flash, so it pastes into FreeHand quite easily:

3D.1.2. - Use FreeHand 3D Rotation tool on copies of the original city art.
I rotated the city leftward, and the to the right to create 2 perspective shapes. I repeated this for the second city shape:

3D.1.3. - Create Flash symbol, paste FreeHand art into Shape tween keyframes
I simplay pasted the new art into Flash, and set the keyframes to "Shape" tween. Flash will now generate in-between artwork based on the two ratated shapes:

Here's one of the skyline shape tweens:

Chapter 3 - Flash Demo 3D.1.3 - Shape Tween 1


Download Source Flash MX files: skylinetween1.zip

3D.1.4. - Drop City shape tween symbols into maintime line and motion tween them
Next, I mixed the city symbols in separate layers, with sky and ground art, and created bouncing motion tweens.

Here's the results so far, playing in Flash (CONTAINS LOUD MUSIC!):

Chapter 3 - Flash Demo 3D.1.4 - Shape Tween 1


Download Source Flash MX files: skylineanim1.zip

Here's the city tweens, mixed in with the character animation and FreeHand Logo
(CONTAINS LOUD MUSIC!):

Chapter 3 - Flash Demo 3D.1.8 - Cute DJ Ad