Logo
HOW TO
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
 
 
Windows Vista

Adobe Fireworks CS5 : Exporting to Flash Catalyst

12/5/2012 5:03:46 PM
Adobe® Flash® Catalyst™ is a new professional interaction design tool for rapidly creating interactive content without writing code. You can create interactive portfolios, product guides, site navigation, interfaces for rich Internet applications (RIAs), and more.

You can convert static artwork created in Adobe Fireworks into interactive designs, and then publish a finished project as a SWF file ready for distribution.

Flash Catalyst lets you work efficiently with developers who use Adobe Flash Builder™ 4 to create RIAs. Designers use Flash Catalyst to create the functional user experience and then hand off the project file to developers who use Flash Builder to add functionality and integration with servers and services.

Fireworks and Flash Catalyst

Fireworks is optimized to create screen graphics. As such, it’s the ideal application for creation of Flash Platform assets. Fireworks CS5 supports the latest FXG format (2.0). You can use Fireworks to design assets (individual graphics or multipage design mockups) for the Flash platform, export them as FXG, then move them into Flash tools like Flash Catalyst, all the while maintaining your design fidelity.

What is FXG?

FXG 2.0 is an XML-based graphics interchange file format for the Flash platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform, and visually modify basic vector and bitmap shapes. The FXG rendering model follows very closely the Flash Player 10 rendering model and exposes all graphics capabilities of the Flash platform, as well as offering expandable support to accommodate future capabilities of the Flash Player.


Exporting pages

Fireworks pages translate directly to Flash Catalyst pages. As a designer, you can build your mockup for a rich media application within Fireworks, and then export the file as an FXG document to open in Flash Catalyst or pass it on to the developer.

You will export a web banner from Fireworks as an FXG document.

1.
Open the fc_banner.fw.png.


2.
Open the Pages panel and click on the individual pages. Each one has some different elements while common elements have been added to the master page.

3.
Select the Shop in Meridien page and then open the Layers panel.

4.
Expand the content layer. There are two sublayers: next feature and teaser.

5.
Choose File > Export.

6.
Name the file fc_banner.

7.
Choose the FXG folder in the Lesson13 folder as the location for saving the file and associated assets.

Note

When exporting a file as FXG And Images, you can choose to export the current selection, the current page, or all pages in the file.

8.
Make sure that FXG And Images is selected from the Export drop-down list.

9.
Select All Pages from the Pages drop-down list.


10.
Click the Export button.

The file exports to the chosen folder.

Viewing files in Flash Catalyst

Next you will check out the fidelity between the Fireworks document and the FXG export by opening the exported file in Flash Catalyst.

1.
Launch Flash Catalyst.

Note

This exercise requires Flash Catalyst. If you do not own Flash Catalyst, you may skip this section, or download the 30-day, fully functional trial version of Flash Catalyst from Adobe at www.adobe.com/downloads.

2.
When the Flash Catalyst welcome screen appears, choose From FXG File, or select File > New Project From Design File.

3.
Browse for the fc_banner.fxg file.

4.
Open the file. The entire design opens, looking identical to the original Fireworks document. Each page has been exported as a Flash Catalyst Page/State.

Note

Depending on the complexity of your design, Flash Catalyst may take noticeable time to analyze the file and object structure.

Editing the FXG file in Flash Catalyst

Next you will make some changes to the file in Flash Catalyst.

1.
Select the page called page_2__Bike_in_Meridien.

2.
Double-click on the paragraph of text below the photo. Flash Catalyst switches to text-editing mode so you can make changes, adding or removing the existing characters.



Fireworks Effects supported by FXG 2.0

FXG 2.0 also supports many of Fireworks native effects and filters, retaining their editability, including:

  • Opacity

  • Solid color fill

  • Canvas color: Mapped into Flash Catalyst as a Rectangle that has the same color and is the size of the project; it is placed on the locked Background layer

  • Gradients fills: Linear and Radial

  • Blending Modes: Normal, Multiply, Screen, Lighten, Darken, Difference, Add, Subtract, Invert, Alpha, Erase, Overlay, Hardlight, Color Dodge, Exclusion, Hue, Saturation, Color, Luminosity, Color Burn, and Soft Light

  • Live Filters: Blur, Blur More, Inner Shadow and Drop Shadow


Vector objects, right down to their opacity, are preserved as vectors with editable attributes.

3.
Select the Pointer tool in Flash Catalyst and click once on the gray rectangle underneath the text. Note that the rectangle is translucent.

4.
In the Properties panel, change the opacity from 90 to 60. The selected rectangle becomes more transparent.

5.
Select page_2_Shop_in_Meridien and then open the Layers panel.

6.
Expand the content layer. The layer structure from the Fireworks file has been maintained, right down to the sublayers.

7.
You can close the file without saving it.

Fireworks and Illustrator

Another advantage of the new FXG export in Fireworks is that Adobe Illustrator also supports this format. If you have ever tried saving a Fireworks file as an Illustrator file, you’ve no doubt been frustrated with the poor version support for this option. Fireworks only saves AI files at the version 8 level. This means that very few of Fireworks’ more advanced features are preserved. But now you can export your Fireworks design as FXG And Images for further editing in Illustrator. FXG-supported vector fill effects are retained as vectors, so your screen-based design could easily be converted into a high-resolution CMYK file for printing, or simply opened in Illustrator for further editing.

Other -----------------
- Adobe Fireworks CS5 : Adding a Flex skin
- Adobe Flash Professional CS5 : Editing Bitmaps in an Outside Editor
- Adobe Flash Professional CS5 : Importing Multiple Files, Copying Images from Other Programs
- Developing Disk Images : Capturing Images with BDD 2007, Navigating Deployment Workbench
- CorelDRAW X5 : Font Etiquette - Using Fonts with Style and Appropriateness
- CorelDRAW X5 : Finding and Saving Important Characters
- QuarkXPress 8 : Checking spelling (part 2) - Searching and replacing, Exporting text
- QuarkXPress 8 : Checking spelling (part 1) - Running a spell check, Creating custom spelling dictionaries
- Adobe InDesign CS5 : Managing Pages and Books - Working with Master Pages
- Adobe InDesign CS5 : Managing Pages and Books - Creating Master Pages
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
 
VIDEO TUTORIAL
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
 
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
Top 10
- Microsoft Excel : How to Use the VLookUp Function
- Fix and Tweak Graphics and Video (part 3) : How to Fix : My Screen Is Sluggish - Adjust Hardware Acceleration
- Fix and Tweak Graphics and Video (part 2) : How to Fix : Text on My Screen Is Too Small
- Fix and Tweak Graphics and Video (part 1) : How to Fix : Adjust the Resolution
- Windows Phone 8 Apps : Camera (part 4) - Adjusting Video Settings, Using the Video Light
- Windows Phone 8 Apps : Camera (part 3) - Using the Front Camera, Activating Video Mode
- Windows Phone 8 Apps : Camera (part 2) - Controlling the Camera’s Flash, Changing the Camera’s Behavior with Lenses
- Windows Phone 8 Apps : Camera (part 1) - Adjusting Photo Settings
- MDT's Client Wizard : Package Properties
- MDT's Client Wizard : Driver Properties
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro