IT tutorials
 
Graphics
 

Adobe Fireworks CS5 : Fireworks and Flash (part 1) - Importing Fireworks documents into Flash

6/19/2013 7:35:11 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

Fireworks and Flash work together in several ways. Fireworks PNG files can be imported into Flash as movie clips, maintaining the layer structure of the PNG file. Fireworks button symbols are imported as fully functional Flash button symbols. Flattened bitmaps can be altered using round-trip editing—similar to round-trip editing between Dreamweaver and Fireworks.

You will use the movie_scene.fw.png file as a backdrop for a Flash interface promoting the Double Identity movie. It consists of a background image, two text blocks, and a vector path filled with a gradient.

1. Preparing files for Flash

Before you jump into this process, it’s best to know what to expect from the process of importing and editing between these two programs.

Transformations such as skewing text are not carried over into Flash. Likewise, custom letter tracking is ignored by Flash. You can convert the type to paths to retain text transformations and tracking, but it will no longer be editable as text with Fireworks or Flash.

Additionally, certain Live Effects and blending modes are not supported in Flash. Table 1 and Table 2 list the supported features.

Table 1. Fireworks effects supported in Flash
Fireworks Effect NameFlash Filter Name
Drop shadowDrop shadow
Inner shadowDrop shadow (with Inner Shadow automatically selected)
BlurBlur (where blurX = blurY= 1)
Blur moreBlur (where blurX = blurY= 1)
Gaussian blurBlur
Adjust colorAdjust color brightness
Adjust colorAdjust color contrast

Table 2. Fireworks blending modes supported in Flash
Fireworks Blending Mode NameFlash Blending Mode Name
NormalNormal
DarkenDarken
MultiplyMultiply
LightenLighten
ScreenScreen
OverlayOverlay
Hard lightHard light
AdditiveAdd
DifferenceDifference
InvertInvert
AlphaAlpha
EraseErase

2. Importing Fireworks documents into Flash

It’s important to understand the differences between importing a layered Fireworks PNG file and importing a flattened version of a Fireworks PNG file. In this exercise you will import a native Fireworks PNG file as well as a standard JPEG file.

What are my import options?

With Fireworks PNG files, you have two main choices.

Fireworks PNG. Import the Fireworks PNG as a multilayered file if you will need to animate or add ActionScript to individual objects within the PNG design.

The document imports into Flash as a PNG (for positioning) and a Fireworks folder that holds the bitmap objects and a movie clip containing all the layers (vectors, text, bitmaps, and button symbols) from the original Fireworks PNG file.

There is no dynamic connection between the imported file and the original Fireworks PNG file; if elements within the design require additional editing, you will have to open the source PNG file within Fireworks, make your changes, save the file, and then update the specific object within Flash. The real advantage of this method is that you can bring into Flash a fully layered file, so that your various bitmaps are available as separate objects and your vector elements are editable within the Flash environment. You can also import a specific page from a multipage Fireworks document.

Flattened bitmap. Flattening is the process of converting a multilayered image file into a single graphic with no individual editable layers or objects. A flattened file is imported into the Flash library using the original filename as its label.

Note

Standard flat files such as JPEG files are automatically imported as flattened bitmaps.


With flattened bitmaps, you can make use of round-trip editing by right-clicking (or Control-clicking) the desired object in the Library panel or on the stage.

Importing a Fireworks PNG

The text in this design has been skewed to a specific angle and has custom tracking applied to different letter pairs in the text block. Flash will discard the tracking and skewing on import, so you will convert the text elements to paths to retain its look.

1.
In Fireworks, open movie_scene.fw.png from the Lesson13 folder.

Note

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

2.
Select both text blocks using the Pointer tool.

3.
Choose Text > Convert To Paths.

4.
In the Layers panel, rename the groups of text to DOUBLE group and IDENTITY group.

5.
Save the file as movie_scene_working.fw.png.

6.
Start Flash Professional CS5.

7.
Choose Flash File (ActionScript 3.0) from the Create New column of the Welcome screen.



A new document opens.

8.
Choose Modify > Document.

9.
Change the dimensions of the file to 600 pixels wide by 462 pixels high (the same dimensions as our Fireworks design). Leave all other settings at their defaults and click OK.

10.
Choose File > Import > Import To Library.

11.

12.
When the Import dialog box appears, use the settings seen in the following figure to keep objects as editable as possible, and then click OK.

The PNG file is placed in the Library panel.

Flash creates a special folder to store the objects from the Fireworks PNG file. The alleyway photo is saved as a separate bitmap, and the vector objects are grouped within the movie clip.

13.
Drag the Page 1 movie clip onto the middle of the stage.

The layer structure of the PNG file has also been maintained within the movie clip.

14.
Double-click on the stage.

15.
Open the Timeline panel (Window > Timeline); you will see all four objects in their own layers in the timeline. The object names used in Fireworks are retained by Flash.

Each vector object within the timeline is editable within Flash.

16.
Use the Selection tool ( ) to double-click on the sign background object on the stage.

Double-clicking on the object dims everything on the stage but the object you just selected. This is called editing in place, as can be seen from the breadcrumb trail above the document window.

17.
With the Subselection tool ( ), move your cursor near the border of the shape, and click. Vector control handles appear, and, just as in Fireworks, you can drag those control points to alter the shape of the path.

18.
Drag a control point.

19.
Press Ctrl+Z (Windows) or Command+Z (Mac) to undo the edit.

20.
Click the Scene 1 segment of the breadcrumb trail to go back to the main stage.

 
Others
 
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Working with Page Setup in Macintosh
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Setting Warning Preferences
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Setting Text Preferences, Setting Clipboard Preferences
- QuarkXPress 8 : Special effects for pictures - Exporting modified pictures, Managing imported pictures
- QuarkXPress 8 : Special effects for pictures - Making adjustments, Applying filters
- Adobe InDesign CS5 : Working with Objects and Layers - Shearing Objects
- Adobe InDesign CS5 : Working with Objects and Layers - Scaling Objects
- Adobe InDesign CS5 : Working with Objects and Layers - Using the Free Transform Tool
- Adobe Illustrator CS5 : Working with Objects - Reflecting and Shearing Objects
- Adobe Illustrator CS5 : Working with Objects - Rotating and Scaling Objects
 
 
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
programming4us programming4us
 
Popular tags
 
Video Tutorail 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