Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Vector Vortex

MFreeHand, Fireworks, and Flash a combination that will save you time and money

Macromedia Studio MX includes a number of relatively unheralded gems. Perhaps it's because Macromedia hasn't hyped these features enough, or maybe users spend so much time focusing on a particular tool that they have simply overlooked or ignored how the other pieces of Studio MX actually work with each other. A great example of this is the stepchild of Studio MX: FreeHand MX.

For some odd reason FreeHand has fallen into the role of "always a bridesmaid, never the bride."This started even before Macromedia existed. When PostScript drawing tools hit the graphics industry in 1988, the two heavyweights that fought it out for supremacy were FreeHand from Aldus and Illustrator from Adobe. Those of us who were there had ringside seats to an amazing slugfest between these two products as they attempted to dominate the market by "out-featuring" each other. When Adobe bought Aldus, the war ended and FreeHand, surprisingly, was sold to Macromedia. Illustrator rose to prominence and FreeHand essentially faded from the radar of the graphics community.

With Macromedia's embracing of the Web, FreeHand became even more overlooked because graphic artists and Web developers still thought of it as a print tool. I must confess, I was one of them. It wasn't until FlashForward 2000 when Todd Purgason of Juxt Interactive did a session on the FreeHand/Flash connection that FreeHand crossed my radar again. Two years later, when I was writing my book Building Web Sites with Macromedia Studio MX, I discovered that FreeHand is one serious Web application that, when teamed up with Flash MX 2004 and Fireworks MX 2004, gives Web developers a productivity tool that saves time and money.

The common factor among the three apps is vectors, and I'm going to show you how they integrate.

The first major area of integration is quite common among Flash MX developers. It is symbols. All three applications use them and the symbols produced in FreeHand MX and Fireworks MX 2004 move freely between the applications.

To demonstrate this point I'm going to use a logo. Inevitably, clients hand us a vector version of the logo and we either add it to a series of Web pages as a static branding element or we distort it or animate it in either Flash MX 2004 or Fireworks MX 2004. An issue we confront is that the logo is filled with Pantone colors. Moving a Pantone color from the CMYK color space to the RGB color space is a rather inconsistent process. The fidelity of the "converted" color as compared to the original color is like throwing grenades. The best you can hope to do is to come close. FreeHand, with its print roots, allows you to work with these colors and the conversion, at least from my perspective, is a bit more accurate than that produced by Fireworks MX.

In this illustration using the college's logo, I have been supplied with an Illustrator .eps image filled with Pantone colors (see Image I). In order to prepare it for use in Fireworks MX 2004 or Flash MX 2004, I usually do two things:


1. Create a Symbol Library
2. Convert the color from the CMYK color space to the RGB space

Creating the symbol library is not at all difficult. In the case of the logo I determined that I needed only two symbols. The first will be the graphical section of the logo and the second will be the word "HUMBER." I first select the logo and ungroup it - Modify,Ungroup. Ctrl- Shift-G (PC) or Command-Shift-G (Mac). In this way I have the various elements prepared for conversion to FreeHand MX symbols. If the elements to be converted to symbols are already ungrouped, I'll marquee each using the Selection tool and group the selection - Modify, Group. Ctrl-G (PC) or Command-G (Mac).

Converting a selection to a symbol is simple in FreeHand MX. Select the object to be converted and press the F8 key (see Image II). If you open the Library (F11) or click the Library tab on the Assets panel, you will see that the selected object has been converted to a symbol named "Graphic-01." If you double-click the name in the Library you can change the name to something more meaningful such as "LogoGraphic."


Unlike Fireworks MX 2004 or Flash MX 2004, selecting a symbol in FreeHand MX does not give you a visual clue - the little arrow in the bottom left corner of the selection - that the object is a symbol. Instead, the item will be selected in the library. Also, in certain instances, the FreeHand MX library will contain a Brushes folder. Feel free to delete it.

Once an object is converted to a symbol, all copiers of that object on the page are called "instances."The neat thing about these is if you edit a symbol, all instances of that symbol on the page reflect the change. To edit a symbol, you double-click the image of the symbol in the preview area of the library. This opens the Symbol Editor. Any changes made will be reflected in the instances.

Converting the Color
Though the Pantone images will be converted to RGB in Fireworks MX 2004 and Flash MX 2004, you can always take the attitude, "Hey, I'm here anyway."

The conversion is done by opening the Swatch panel and double-clicking one of the listed Pantone colors. This will open the FreeHand MX Mixer pane. Click on the RGB button and the RGB values will be shown. Click once on the "Add to Swatches" button beside the color swatch to open the "Add to Swatches" panel. I rarely use the color breaks to name a color. In this instance I would name the color "Humber Gold." Finally, the color is destined for Web use, so selecting either "Spot" or "Process"is immaterial. When you click the Add button, the dialog box disappears. When you click the Swatch tab, the new color appears in the color swatches (see Image III).


In order to avoid confusion you might wish to remove the Pantone colors from the swatches. What you can't do is simply remove the color. FreeHand will not let you do this because, according to FreeHand, the color is in use and it will kick out a dialog box notifying you of this fact. All instances of the Pantone color will have to be replaced with the new RGB version. This is not as complicated as it sounds.

Open the library, select a symbol, and double-click its preview to open the Symbol Editor. Change to the subselect tool and click on the area to be changed. Open the swatches and drag the color swatch into the selection. When finished, close the Symbol Editor (see Image IV).


Once the color in the symbols is in place, select the Pantone in the swatches, open the Options panel, and select "Remove" from the dropdown list. Save the image.

If the client is positively fanatical about accurate color, Pantone Corporation does have Hexadecimal versions of their colors. If this were the case with the college I would be replacing the 117CVC (Gold) with the approved #C49E0D and the 282 CVC with #00214D. In this instance I would do the color replacement in the Symbol Editor of Fireworks MX 2004. The reason is that the application was developed precisely for the purpose, among other things, of optimizing Web graphics.

Moving FreeHand MX 2004 Symbols into Fireworks MX 2004
There are three ways of getting the artwork from FreeHand MX into Fireworks MX 2004. The first is to simply select the objects in FreeHand, copy them, open a new Fireworks MX 2004 document, and paste. The second method is to open a blank Fireworks MX 2004 document and simply drag the selected objects from the FreeHand MX page onto the Fireworks MX 2004 canvas. In both cases the objects will appear as individual layers in Fireworks MX 2004. The problem is that the symbols don't move. If you open the Fireworks MX 2004 library you will see that only the first symbol in the FreeHand MX library appears in the Fireworks MX 2004 library. In the case of the Humber logo this is not exactly a deal killer. You can select the Fireworks MX 2004 object missing from the library and convert it to a Fireworks symbol. You could also group the object on the FreeHand page and convert it to a single symbol (see Image V).


If the object is composed of multiple symbols, your best plan of attack is to import the FreeHand MX file into Fireworks MX 2004. When the Vector Files Options dialog box appears, click OK. The cursor will change into a sideways "L." Click the cursor and the artwork drops onto the Fireworks canvas and the symbols move into the library.

If the original FreeHand drawing is composed of layers, they too will move into Fireworks MX 2004. All you have to do in this case is to select "Remember Layers" in the File Conversion area of Fireworks'Vector Files Options dialog box.

Once there you can apply filters and so on without affecting the original drawing. In the example shown in Image VI, I applied the EyeCandy 4000 Glass filter to the image. If you are thinking of applying the Fireworks effects that were added to FreeHand MX in FreeHand…don't. When the image is imported into Fireworks MX 2004, the FreeHand image becomes a dog's breakfast of masks and layers in Fireworks MX 2004.


Moving FreeHand MX Symbols into Flash MX 2004
Moving the symbols from FreeHand MX into Flash MX 2004 uses techniques such as "Drag and Drop,""Copy and Paste," and "Import."When it comes to Flash, however, there are some real issues to keep in mind.

If you "Drag and Drop" or "Copy and Paste" from FreeHand MX into Flash MX 2004 the objects will appear on the Flash stage and only the first FreeHand MX symbol will appear in the Flash MX library. You won't get the various symbols that compose the object (see Image VII).


In this case, the old adage "Let the software do the work" comes into play. Using the previous two techniques would result in some extra work. Instead open Flash MX 2004 and select File, Import, Import to Library. When the Import FreeHand dialog box opens, click OK. When you open the Flash MX Library you will have both symbols from the FreeHand MX library along with the composite artwork from FreeHand.

With the symbols in the library you can "play" with the logo by applying any number of the new timeline effects to the logo, distortions, or animations you may need. No matter what you do, the integrity of the original FreeHand MX logo is maintained because you are working with instances of the symbols in the Flash MX library.

If you don't need the artwork in Flash MX 2004 simply select "Export Symbols" from the FreeHand MX library's Options menu. This will create a FreeHand document composed only of the symbols you chose, and these symbols can be imported directly into the Flash MX 2004 library or the Fireworks MX 2004 library (see Image VIII). In this way valuable vector drawings are available to everyone without compromising the integrity of the original, which can be stored in a secure location.


‘Comping' Sites in FreeHand MX
When I tell developers they can create their wire frames or page "comps" in FreeHand MX, slice them up in Fireworks MX 2004, and then have them on the Web in short order thanks to Dreamweaver MX 2004, I am usually greeted with a blank look at worst or indifference at best. I attribute this attitude to FreeHand MX's print roots. This is all doable, and the best part of it is that multiple pages in FreeHand are contained in a single FreeHand MX file. This makes file management an absolute breeze and injects efficiency into your workflow. Instead of a dozen separate comps that would need to be imported into Fireworks MX 2004, they can be imported from one FreeHand MX document.

In this example I am going to create some very simple comps that use text, images, and a simple navigation bar to the side for the main pages of a site that talks about a city in Bermuda. The point is to demonstrate a technique, not to win an award for art direction or Web design.

The first step is to open a new document in FreeHand MX. Once the document is open, select the Document tab in the Properties panel. In the Page Size dropdown select "Web" to give yourself a standard 550 by 400 Web page. If you need a different size, select "Custom" from the menu and, when prompted, enter the page dimensions. Build the page.

The layout calls for four more pages. This can be accomplished in two ways. The first is to select "Add Pages" from the Document panel's Panel Options. This will open the "Add Pages" dialog box. I entered "4" in the "Number of New Pages" input box. The interesting aspect of this dialog box is that you can change the size of the page if you choose. Having made your decision, click OK. The preview area of the Document Inspector will show you the thumbnails of the added pages. The second method is to click the Add Page icon at the bottom of the Document Window - it looks like a page with a "+" sign. The downside to this method is that you add one page at a time.

To move to the page, select the page number - found at the bottom of Document Window - from the pop-up list. When the page appears you can construct the page with graphics and text. When finished you can select "Fit All" from the Page View pop-up at the bottom of the Document Window to get an overall view of the pages. As a Web developer you will most likely want to rearrange them to reflect a site map layout. To do this, select the Page tool on the toolbar and drag the pages into the order you wish. I love this feature because it's like sticky notes with content on them. Once you're finished, save the FreeHand MX document and quit FreeHand MX. After you save this file do not move it from its Save location.

Before we move into Fireworks MX 2004 there are two other major options available to you. You can select the Action tool, which looks like a blue dot with an arrow, click on a navigation element of the page, and drag to the page the element points to. That blue line shows the path. You can then open the Navigation panel and actually add Flash ActionScript to the document to allow the navigation. This will require saving the page as a .swf, but it is a quick way of creating a click-through for the client or other members of the team.

The other option is to turn the site map into a deliverable for the client. Remember, FreeHand is a vector application and as such turns out some rather crisp "proofs" through laser printers or color printers that can be presented to the client.

Importing Multiple-Page FreeHand MX Documents into FreeHand MX 2004
Of the features of the integration between FreeHand and Fireworks MX 2004 that are "slick," this, to me, tops the list. The ability to bring only the pages I wish to manipulate, optimize, or otherwise prepare for the Web is a huge timesaver.

Launch Fireworks MX 2004 and select File, Open. Don't click on the Open button on the Start page. Doing this will open the first page of FreeHand MX file and will not allow you to choose the page to work on. When the Open dialog box appears, navigate to the folder containing the FreeHand MX file and select it. The reason it was important not to move the FreeHand MX file to another location is that moving the file after the save will break the links to the images and Fireworks will prompt you to locate them.

Selecting the FreeHand MX file will open the Vector File Import Options dialog box. The area that is of prime importance to you is the "page" pop-down menu in the File Conversion area. When you open this menu, each of the pages in the FreeHand MX document will be listed. Select the page number you wish to open and click OK. The page will open in Fireworks MX 2004 (see Image IX).


From here you can optimize the images on the page and apply slices and links to the page using the Web Layer. You can also add Alt tags to the page or apply any of the Effects in the Fireworks MX 2004 Effects menu to the objects on the page.

Though I have demonstrated two general techniques there are other uses for the FreeHand MX to Fireworks MX 2004 workflow. For example, the Type management tools in FreeHand MX are far more powerful and precise than those in Fireworks MX 2004. In this instance you could, in FreeHand MX, create a series of headlines or subheads that can be placed into Fireworks MX. In this case you will have to decide whether to convert the text to outlines in FreeHand MX or permit Fireworks MX 2004 to handle the chore. You could create a vector-based animation using FreeHand MX's release to layers command and turn that animation into a .gif animation using the Frames feature of Fireworks MX. If I am doing animations in Flash MX, I will usually create all of my major headlines and subheads in FreeHand MX and bring them into Flash MX 2004. You could use FreeHand MX's vector distortion filters to create some very interesting masks for use in Fireworks MX 2004. As I tell my students, the only limit to the possibilities is the limit they place on the creativity.

In the case of the FreeHand MX, Fireworks MX 2004, and Flash MX 2004 workflow, that limit is more a bias than anything else.

More Stories By Tom Green

Tom Green describes himself as 'teacher, author, chief cook and bottle washer.' He is an instructor at Humber College's School of Media Studies in Toronto, and is also the author of 'Building Web Sites with Macromedia Studio MX' and 'Building Dynamic Web Sites with Macromedia Studio MX 2004,' both published by New Riders.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
Stacy Jedynak 12/03/03 09:37:31 AM EST

Your articles are worth less without the illustrations and examples.

IoT & Smart Cities Stories
The deluge of IoT sensor data collected from connected devices and the powerful AI required to make that data actionable are giving rise to a hybrid ecosystem in which cloud, on-prem and edge processes become interweaved. Attendees will learn how emerging composable infrastructure solutions deliver the adaptive architecture needed to manage this new data reality. Machine learning algorithms can better anticipate data storms and automate resources to support surges, including fully scalable GPU-c...
Machine learning has taken residence at our cities' cores and now we can finally have "smart cities." Cities are a collection of buildings made to provide the structure and safety necessary for people to function, create and survive. Buildings are a pool of ever-changing performance data from large automated systems such as heating and cooling to the people that live and work within them. Through machine learning, buildings can optimize performance, reduce costs, and improve occupant comfort by ...
The explosion of new web/cloud/IoT-based applications and the data they generate are transforming our world right before our eyes. In this rush to adopt these new technologies, organizations are often ignoring fundamental questions concerning who owns the data and failing to ask for permission to conduct invasive surveillance of their customers. Organizations that are not transparent about how their systems gather data telemetry without offering shared data ownership risk product rejection, regu...
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
Predicting the future has never been more challenging - not because of the lack of data but because of the flood of ungoverned and risk laden information. Microsoft states that 2.5 exabytes of data are created every day. Expectations and reliance on data are being pushed to the limits, as demands around hybrid options continue to grow.
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
As IoT continues to increase momentum, so does the associated risk. Secure Device Lifecycle Management (DLM) is ranked as one of the most important technology areas of IoT. Driving this trend is the realization that secure support for IoT devices provides companies the ability to deliver high-quality, reliable, secure offerings faster, create new revenue streams, and reduce support costs, all while building a competitive advantage in their markets. In this session, we will use customer use cases...