joesparks.com
I accept payment through PayPal!, the #1 online payment service!
Little Sign
Joe Sparks <joesparks@joesparks.com>

Using FreeHand MX with Flash MX
by Joe Sparks

Intro * Chapter 1 * Chapter 2 * Chapter 3

Chapter 1 - Interactive Logo Browser Project
A simple Flash presentation created and exported with FreeHand MX

I designed a small assortment of logos with FreeHand MX. Now I want to create a useful presentation of the logos, providing a quick overview and access to the source files. I decided to try out FreeHand's built Flash authoring features to build a simple interactive browser. The end result of this FreeHand document will be a .swf file that is viewable with the Flash Player.

In the Logo Browser project, we will learn these FreeHand MX tools and concepts:

1A. - Using the Action button to define Flash Actions inside FreeHand MX
1B. - Using Different Actions from the Navigation Panel
1C. - Creating and Using FreeHand MX Symbols
1D. - Using Swap Object to Switch a Symbol in the Document
1E. - Preview our Flash Movie using the Test Movie Window
1F. - Exporting Flash Movies (Save as SWF)

1G. - Fixing Flash Rendering Differences

The browser needs a menu screen with buttons that links to pages dedicated to each logo. The project looks like this (Graphic chart below made with FreeHand's connector tool):

Project Overview

1A. Using the Action button to define Flash Actions inside FreeHand MX

The Action tool provides a simple way to specify a relationship between objects in your document and pages. You can quickly drag links between button graphics and screens, and then fine-tune their relationship with the Navigation panel.

To start off this Logo Browser project, I first completed the menu screen and 1 sample logo destination page. I only created one logo destination page at this stage in the project (instead of the 5 pages we need) because I want to get that page just right before we duplicate it for the remaining logos. Here are the two pages, side by side as they appear in FreeHand MX running under Mac OS X:

Project Pages

Now, I need to create a button or "hotspot" definition on the menu page that will link a logo menu item to its destination page. Here are the steps I took to create the button link.

1A.1. Choose an object to serve as the button area.

I could choose any element already on this page (such as a text or graphic object), to hold the link. Instead, I decided to define a larger clickable area by drawing a big rectangle in a new layer. This new object will soon serve as an "invisible" button. Notice the layers panel, where I have created a layer named "buttons" to store the rectangle:

1A.2. Use the action tool to drag a link from the button object to the destination page.

Click on the action tool on the tool palette. Click down on the button object and hold the mouse down as you drag towards the destination page. Let go of the mouse when your pointer is over the page you want to link to. This will create a default link that you can see and modify in the Navigation Panel:

1A.3. Review your Action settings in the Navigation Panel

At this point, we could simply export a Flash swf file and try out our link, but we should double-check the results of our use of the Action Tool. In the above screen shot, you can see the Navigation Panel open. The Action pop up menu reads "Go To and Stop," which is the default setting. "Parameters" reads "Page 2" which is the page we linked to. Event" reads "on (press)" which simply means that the action will take place as soon as the user clicks on the button region.

Meanwhile, let's add a Link, too. Even though the "Go To and Stop" Flash Action does not require a Link setting (It uses the Parameter setting "Page 2"), I am going to add Link setting anyway while I have the Navigation Panel open for this button. I do this just in case I might need to use export this presentation as HTML via FreeHand's "Publish as HTML..." feature:

We will go deeper into the Navigation Panel when we work on the special buttons for the logo destination pages, in the next part of this project.

As for the rest of this menu page, we will return to this page at the end of this project. To complete this entire menu of buttons, we will repeat this process for each logo, and forge links to each of the logo pages. As a final step,we will drag the button layer down the layer panel, to put the yellow buttons BEHIND all of the menu art work, thus making the buttons regions "invisible." However, I am delaying this final step until we complete all of the logo destination pages.

 

1B. Using Different Actions from the Navigation Panel

You can build interactive, web-ready presentations right inside of FreeHand MX. The navigation panel gives the FreeHand user the power to create interactive HTML and feature-rich Flash movies. With Flash export, we can build sophisticated flash movies, ready for publishing, without even touching the Macromedia Flash software.

The heart of FreeHand's Flash authoring is found on the Navigation Panel. The Action settings provide complex interactivity, special features (like printing), and animation playback controls.

Let's take a look at our 1st sample Logo page, where several options are offered to the user:

The first button is labeled "back to logo list." This is simply another jump-to-page button, which we can create with the action tool- exactly as we created the first button on the main menu. The next 3 buttons are different.

The next button is labeled "Print this logo." We can use the Navigation Panel to create a button that will print content for the user:

1B.1 - Using the Print Action

1B.1.1. Open the Navigation Panel and select the button graphic. Notice the Action pop up menu is set to "None" by default.

1B.1.2. Choose "Print" from the Action pop up menu.

1B.1.3. Select the page to print from the Parameters pop up menu. (In this case, it is Page 2, the page we are now editing. It could be any page in your document.)

1B.1.4. Optional- Choose a layer to target for printing. In this case, I am picking the "Logos" layer.

We have completed our print button! Our Flash presentation now has the capability to print! If you wish, you can export a Flash movie right now, and test it out.

The next two buttons, "View at higher resolutions" and "Download FreeHand source file," will provide access to external files outside of our Flash presentation.

We will accomplish this using the "Get URL" action. Each button will prompt the web browser to access a specific URL. For the "View at higher resolutions" button, I want to access a gif file, named Logo1a.gif. For "Download FreeHand source file" button, I want to access a zipped FreeHand file called Logo1a.zip.

1B.2 - Using the Get URL Action

1B.2.1. Open the Navigation Panel and select the button graphic.

1B.2.2 Type your URL in the Link field. (This link will serve double-duty if you choose export your FreeHand document as HTML.) I placed a relative URL here:

logoart/Logo1a.gif

This relative URL allows me to run my Flash presentation just about anywhere. The Flash movie will point the browser to a folder named "logoart" that exists in the same folder as the SWF. This will work off of a web site, or right from my hard disk.

1B.2.3 Choose "Get URL" on the Action pop up menu.

1B.2.4 Optional- Choose the page target for the URL on the Parameters pop up menu. I chose '_blank' because I want the URL to open in a new window.

1B.2.5 Optional- You can choose an event to trigger this action off of the Event pop up menu. In this case, I want the action to be triggered by a standard mouse click( when the user releases the mouse on the button), so I chose 'on (release).'

For the next button, "Download FreeHand source file," The process is identical. I simply specify a different URL, in this case:

logoart/Logo1a.zip

By zipping up the FreeHand file, the browser will handle the file as a user download. The file will be transferred to the user's hard drive.

1C. Creating and Using FreeHand MX Symbols

Symbols provide a way to store graphics and objects in a library, and then use "instances" of these symbols throughout your FreeHand document. This is very similar to the symbols concept found in Macromedia Fireworks and Flash. The benefits can be enormous. Typically, you would create a symbol for an item that you intend to use in multiple places. This could save memory and file size, because FreeHand only needs to store 1 copy of the object, even though it appears in multiple places and pages. The larger benefit comes when you need to CHANGE an element in your symbol library. You change the symbol once, and the element is automatically updated everywhere it appears in your document. For example, you could have a special date symbol or legal notice symbol that appears on every page. This is the type of thing that changes frequently and is therefore a good candidate for symbolhood.

In our logo browser, we are going to store the logo designs themselves as symbols. This is a very easy process.

1C.1. Open the Library Panel and select the object you wish to create a new symbol from. In the screen shot below, I have selected the first logo.

1C.2. Dragging the object from the FreeHand work space into the Library list will create a new symbol from your selection, and your selection will be transformed to an instance of this symbol. You can also choose menu Modify > Symbol > Convert to Symbol, or press F8.

IMPORTANT DIFFERENCE IN BEHAVIOR: You can also create a new symbol by clicking the Create Symbol button at the bottom of the library palette, but your selection will NOT become an instance of that symbol. In other words, a symbol will be added to the library, based on your selection, but the selection itself will remain simply FreeHand objects. THis is the equivelent of menu Modify > Symbol > Copy to Symbol.

Your new symbol will appear in the library with a default name:

1C.3. Rename the new symbol to a meaningful name. You can click on the symbol name to edit it, or select the symbol and choose "Rename" off of the Library Panel pop up menu:

1C.4. You can add as many symbols as you need. For the logo browser, I added all of the logos from the menu page:

1C.5. You can further manage your symbol library by creating folders or groups to contain symbols. Click the New Group button at the bottom of the Library Panel to add a group folder to the library:

1C.6. Rename the folder and drag symbols into it:

1C.7. To edit a symbol, select it in the Library Panel, and choose "Edit" from the panel pop up menu:

1C.8. A new window will open for the symbol. You may edit the symbol with FreeHand tools and close the window when you are finished. All instances of the symbol will be updated in the FreeHand document.

1C.9. To use the symbol anywhere in your FreeHand project, simply drag the symbol from the Library panel onto your document. This is exactly what I did on the destination page for the first logo:

1D. Using Swap Object to Switch a Symbol in the Document

When you need to both remove a symbol on a page, and then replace it with another from your library, you really only have two choices. 1.) You could delete the existing symbol instance from the page, drag out its replacement, and then slide, scale, rotate, nudge, etc. to get the symbol somewhere near where the previous one was. Or, 2.) you could swap the symbol with one button click. Swapping a symbol is often far better than the previous alternative.

Before we get into the symbol swapping, we need to duplicate some pages, which will give us some logo symbols to swap.

At this point in the logo browser project, we have completed all of the features on our logo destination page. All we need to do now is duplicate this page 4 times, and customize it for each of the remaining logos. We are almost done!

Here's a quick overview on selecting and duplicating pages. You can select the page you wish to duplicate by using the Go-to-page pop up menu at the bottom-middle of the document window, or you can use the Document page to directly select the page. Once you are sure you have the right page selected (Also called "the Active Page"), you may use the Duplicate command from the Document pop up menu.

Duplicating Pages

For this project, we need four copies of page 2:

Now we are ready to customize each duplicated page for the rest of the logo design. We will use swap symbol to change the logo first. Here are the steps:

1D.1. Select the symbol that needs to be swapped:

1D.2. Open the library and pick the object you wish to swap with. In this case, I have selected a logo in the document and the selected the second logo in my library:

Swap Symbol

1D.3. Click the Swap Symbol button. Immediately the instance will change to the selected symbol in the library. The new symbol instance will inherit all of the scale, skew and other attributes of the previous instance (Which can be good or bad, depending on the native aspect ratio of the two symbols).

Swapped Symbol

That's all there is to swapping a symbol instance! Now, we must update the rest of this page. All we need to do is change the title from "Logo 1a" to "Logo 1b" and modify the links on the three custom buttons.

Modifying the buttons is very simple.The "Back to Menu" button is already done, since that button always goes to the same page. For the other 3 buttons, I simply open the Navigation Panel and make these edits:

Choose Print button and pick "Page 3" on the properties pop up menu

Choose View at Higher Res button and change the link to "logoart/Logo1b.gif"

Choose Download Source button and change the link to "logoart/Logo1b.zip"

One logo page down, and 3 more to go! I simply repeat the above steps using the proper logo and files names (swap symbol, change title, edit buttons) for each of the remaining pages.

To complete this project, There's only one more thing left to do. I must go back to the main menu page, and make buttons for the last 4 logos. I must draw 4 more button regions, and use the action tool to link to my new logo pages (performing the steps outlined at the beginning of this project article). When I am done, the 5 buttons will appear like so:

Hiding Button Layer

In this case, I decided to simply hide this layer of buttons behind all of the other layers. I didn't use the layer for anything else, and the end results work great in flash.

 

1E. Preview our Flash Movie using the Test Movie Window

As you develop Flash projects with FreeHand, you can test your Flash work from right within the FreeHand application. This can save time and speed development by removing the extra steps of exporting/saving, naming, finding the exported file, and viewing with the Flash Player.

To preview your FreeHand Document as a Flash Move:

1E.1. From the window -> Movie submenu, choose "Test"

Test Movie

1E.2. Control Playback with tools found on the Movie Preview window and/or the Controller toolbar

FreeHand will convert the document into a Flash movie file ("swf"), and this may take a little time to process, depending on the size and complexity of your project. After this is complete, FreeHand will open a new window for playback. FreeHand users who are working on Flash movies should open the Controller toolbar (Windows > Toolbars > Controller), because it provides quick access to key tools for Flash authoring. Below, the Movie preview window and the Controller toolbar are featured:

As soon as the movie window opens, you may begin testing your Flash movie. You can try out your Flash Actions, click your buttons, play back animations, and so on. The Movie playback controls on both the preview window and the controller allow you to stop, rewind, step backward, play, step forward, and fast forward- in that order.

The Controller toolbar duplicates all of the functions found on the Preview window, but adds a handy Test Movie button, an extra Action tool, and a shortcut to the Navigation Panel.

 

1F. Exporting Flash Movies (Save as SWF)

A Flash movie is one of the best ways we can share our presentation with the world. Nearly every computer out there can play a SWF file (the compressed Flash file format). Even illustrators and FreeHand users who have no need for interactive presentations will find that exporting a swf of just a single image is often the very best way to share your work. The end result is a very lightweight file that can scale to any size.

Exporting a SWF for our little Logo Browser project is as simple as it gets.

1F.1. Choose "Export..." from file menu, and you will see this dialog:

1F.2. Choose "Macromedia Flash (SWF)" from the Format pop up menu.

Right next to the Format menu, there is a "Setup" button. When the format is SWF, this setup button will take you to the Movie Settings dialog, where we can instruct FreeHand on the particulars of SWF Export. If everything played well during the "Test Movie" stage, then we should be all ready to for export. Since we are not doing animation, there if very little to worry about, the default Movie Settings should handle it just fine. Even so we should double check it:

The Movie Settings (also accessible from the Preview window, the Controller toolbar button or off the menu at Windows > Movie > Movie Settings) is extremely important for Flash authors. This is where you tell FreeHand how to export the FreeHand document as a movie, how to interpret layers as animation, and other settings. We will investigate these settings in detail when we cover animation features in the next project.

For now, let's export the project as a swf file and check it out:

Project 1 Result: Logo Browser for Flash Player

Download FreeHand MX Source File HERE * Download SWF File HERE

 

1G. Fixing Flash Rendering Differences (For example, the Line Scaling problem)

Every now and then, an element that you have created in FreeHand (or even from within Flash) ends up looking far different than you would expect under certain situations. This can be frustrating. In this section, I will clarify some things about how to deal with scaled vector lines render in Flash and show you strategies for working around some rendering problems. If you follow this through, you may save a great deal of time later on!

If you were paying attention to the 4th logo in the above Flash piece, you may have noticed that the stars around the logo seem very dark compared to how the logo looked inside FreeHand MX and the higher resolution GIF. Let's take a closer look:

This "different look" in the Flash player has little to do with FreeHand's swf export, rather, it is something intrinsic to Flash's rendering of fixed or minimum line widths- regardless of scale. This happens with artwork created inside Flash as well. In fact, a fixed line width is truly a generic feature of all vector illustration software - and at the root of our problem in this particular situation.

If you have worked in Flash for a while, you may have encountered some rendering problems where the line color starts to crowd out the fill color on vector shapes. In this section you will find some valuable tips for coercing better rendering out of Flash when this problems occurs.

Here's a demo of the line weight problem from within Flash MX. First, I will draw a simple graphic right into the timeline, using Flash drawing tools:

Next, I will take this simple drawing and scale it, in a number of ways, to demonstrate what can happen when line art gets scaled down:

In Column A, we see the heart of the problem. When you scale vector graphics that exist solely in the timeline (not as a symbol), the shape size gets scaled, but the line width on the graphics does not scale- it remains fixed. It does not matter if you GROUP the graphic before you scale.

In Column B, we see the results of our "Primary Solution," which is to take the art from A1, and turn it into a symbol in the flash library (a movie clip in this case). When we scale the symbol in the Flash timeline, Flash will scale the line width relative to the scale of the symbol. This works quite well in most cases. There's only one catch- Flash has a minimum line width setting of .25. Once line width reaches this size, Flash can not draw them any smaller. There fore, certain kinds of art with many tiny lines to begin with, will still reach a point where the rendering is all line and no fill.

In Column C, we see the "Extreme Solution," which can really work wonders with certain kinds of problematic line-rich artwork. In this case, we create a symbol too, but take it another step by selecting all of the lines in the graphic and converting them to fills. This is "extreme" because it renders the art work much more difficult to edit. You should create a back up of the symbol before you convert the lines to fills. To convert line to fills, simply select the lines you wish to convert, and select the menu command: Modify > Shape > Convert Lines to Fills.

In general: it is very important to move your "actual size" (100% scale) artwork into a symbol before you scale it down in a parent time line, especially if you intend to convert lines to fills. If you select actual vectors & scale the original artwork down inside of flash (as opposed to scaling a symbol down) this can have destructive consequences- vectors may get eroded or deleted altogether.

So what does this have to do with our FreeHand logo looking so different in our Flash Export? Knowing what we know now about line widths, let's export the logo as a swf, and import it into Flash MX. This way, we can see how FreeHand groups the vectors during the conversion process:

Our goal is to make the Flash version of the logo look more like it does in FreeHand, when rendered at smaller scales in the Logo Browser Project. As a first test, let's put this whole logo into a new Flash symbol, and scale it down:

Remember, the "Primary Solution" I wrote about above, called for putting the graphics into a symbol- but FreeHand has already put the stars in a symbol for us- so what's the problem? Here, my friends, we have encountered the minimum line size problem. Those tiny stars are SO tiny, the fill gets obscured by the smallest line width inside Flash.

It is time to bring out the "Extreme Solution:"

In the above example, I simply selected the lines on the most frequently used star symbol, and used the "Convert Lines to FIlls" command. Let's see the results of that maneuver:

As you can see, many of the stars around the logo now appear almost exactly as they do inside the FreeHand window. We can do the same trick on the remaining stars symbols, and call this operation a success.

You may encounter the inverse problem to the minimum line width, which is the MAXIMUM line width problem! There are situations where art work is scaled UP much higher than 100%, and the lines appear too thin. You can use the above techniques to deal with this problem too.

Alternate Route > Convert to Image

However, there is another option inside of FreeHand MX- not always the most elegant solution, usually not the best choice for file size and quality issues, but it is quick, dirty, and very reliable! It is called "Convert to Image," and it is found in FreeHand on the menu: Modify > Convert to Image:

To turn any FreeHand selection into a bit map, just pick "Convert to Image" off of the Modify menu. Bye bye vectors, hello safe reliable bitmap. ALWAYS DO THIS OPERATION ON A COPY, you do not want to lose your vectors forever.

By converting the problem logo to a image (bitmap), our Flash presentation would look the same as it does in FreeHand. However, You should consider this a "brute force" method with some drawbacks- file size is usually increased, and printing quality can suffer. The Flash presentation would no longer scale as effectively:

You could work around some of this problem by increasing the resolution of the bitmapped image during conversion:

However, a higher resolution can greatly increase the file size of your presentation.

If you can accept the drawbacks of using bitmaps in place of pristine vectors, then always remember that you have the Convert to Image option from within FreeHand MX, and this option is completely compatible with SWF export.

P.S. There is another technique that I have used, that I will mention in passing- separating lines and fills into two separate layers, with the fill layer in front of the line layer. In situations where you really need to preserve your line art while moving drastically between different sizes, this has some advantages worth looking into.

 

 

Next: Chapter 2 - Creating Animation with FreeHand MX

http://joesparks.com