Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Vista

Adobe Fireworks CS5 : Exporting to Flash Catalyst

- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
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
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
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 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server