Join Shane Rebenschied for an in-depth discussion in this video Integrating Fireworks content, part of Flash Professional 8 Beyond the Basics.
>>One question that I get a lot from students that are working in Flash is: Which program should I use as I'm designing my graphics that will best integrate with Flash? And that's a good question. And as you're beginning to work, and develop, and design your images, which program should you use so that you can minimize the amount of work that you have to redo as you bring your images into your Flash projects? In the next few exercises we're gonna look and see how various graphics integrate with Flash that have been created in other graphics editing programs such as, Fireworks, Freehand, Photoshop, and Image Ready.
If you have access to the exercise files feel free to follow along with the steps as I'm doing them. If you don't have access to the exercise files, you can still walk away with lots of information, just kick back and watch. Inside of the LA Eye Works directory that you copied onto your desktop earlier, there's another folder called "File Types." Inside of there, there are other folders from other graphics editing programs. Again such as Fireworks, Freehand, Illustrator, Photoshop, and Image Ready. Inside of those folders are images that have been created with those respective graphics editing programs.
Let's take a look how those graphics hold up once they've been imported into a Flash project. In this first exercise, let's look to see how Fireworks fares. Go ahead and open Flash 8, and then go ahead and create a new blank Flash document. Let's change the stage size of this Flash document to be the same as the graphic that we're importing. So choose "Control J," or "Command J," or click on the "Size" button in the "Properties Inspector" to open up the document properties dialog box where you can then get access to the movie dimensions.
Simply change the width to 600 and click "OK." Next, choose "File," "Import," "Import to Stage," or simply click the keyboard shortcut "Control R" on Windows, or "Command R" on the Macintosh. Then on your desktop open the "LA Eye Works" folder, open the "File Types" folder, and then open "Fireworks." Inside of there, there are two files that have been created with Fireworks 8. "Main Menu," which is a PNG File, and another "Main Menu," which is a SWF file.
Go ahead and open up the "Main Menu" PNG file by double-clicking on it. When you do that, Flash is going to open up this dialog box called "Fireworks PNG Import Settings," and it's gonna ask you a few different questions. The first is for file structure, "Do you want to import all of the images as a movie clip and retain the layers within that," or "Do you want to import the content into a new layer in the current scene?" Go ahead and select that second option, as we don't want to have Flash automatically create a movie clip to store all the content in. We just want to have it bring the content right here onto the stage as is.
Under objects, you can choose to rasterize to maintain appearance, or try and keep all the paths editable. Since we're trying to see how Fireworks can take its graphics that it creates, and bring them into Flash while still trying to keep the editable, select that second option, "Keep all paths editable." Under "Text" we get the same options, "Rasterize the text to maintain appearance," or "Keep it editable." Again, select "Keep it all editable." Lastly we can choose to import as a single flattened bitmap.
That basically would take all the layers that we have from our Fireworks graphic and squish it into one, and then just bring that in as a raster graphic here inside of Flash. In this case we don't want that option to be checked, because again we want to see how the content from Fireworks integrates with Flash, while still allowing us to edit it after it's been imported. Once you've set those settings, click "OK." This is the graphics that we've imported from Fireworks, and this is the main menu for the site that you're going to build throughout this title.
Let's take a look and see how Flash has treated and translated this Fireworks PNG file. If I select the text for "About Us" in the main menu, and look in my "Properties Inspector," I can see that I can get access to all of text properties. If I double-click on that, I can see that it's an editable text block. So what's happened is, Flash has actually treated all the text fields here just like as if I created them in Flash itself. If I click on the graphic underneath it, this green bar, I can see that's actually converted that into a drawing object.
If I double-click on that I can get access to the actual object itself, and it still is a Vector object, just as if I'd created it in Flash. So I can go back and make any changes to it after the fact if I'd like. So as you can see, Flash actually treats really well, the graphics that have been created in Fireworks and saved as it's native PNG file. Now you may get slightly different results depending upon the complexity of the graphics that you're creating in Fireworks. But again, as you can see, Flash treats the Fireworks PNG files really well.
All my Vector graphics have retained their editability, as well as the text. I can go back, and I can edit the graphics, and I can edit the text, even after I've imported them into Flash. Next let's go ahead and take a look to see how Flash treats importing a SWF file that has been exported from Fireworks. To do that I'm gonna close this FLA, and not save any changes. And then I'm gonna create a new FLA, I'm gonna use the keyboard shortcut this time. On Windows it's "Control, Alt, N," on the Macintosh it's "Command, Option, N," and then again I'm gonna press "Control J," or "Command J" on the Macintosh, to access document properties, and then I'm just gonna change the width to 600 and click "OK." Now when I go to import, I'm gonna use the keyboard shortcut this time, "Control R" in Windows, or "Command R" on the Mac.
I'm in that same directory again, but this time I'm gonna import the "Main Menu" SWF file. Again this file was just saved from Fireworks, the only thing it was saved as was just a simple Flash SWF file. I'm gonna double-click on that file to import it. Now when I scroll up to the top of my stage, I can see there's my main menu options. Let's see how Flash has translated that. I'm gonna click on the first text option, "About Us," I'm gonna look at my Properties Inspector, I don't see my text options anymore. I can see, however, that it's been inserted into a group.
So if I double click on that text block, which is a group, and now that I go inside that group I can click on that text block, and now I get access to the text options in the Properties Inspector. So when Fireworks exports a SWF file, and you then import that into Flash, what Flash has done when it translated that, is it's taken all the text blocks and grouped them. So each text block is now in its own group. I can still go back and edit the text, I just first need to double-click on it to get access to the group, and then I can edit my text within there.
Let's go back to scene one and see how it did with Vector Graphics. If I click on the Vector Graphic underneath it on the stage, I can see in the Properties Inspector it's a group, and if I double-click on that, and then select a graphic, I can see that it's still a Vector Graphic here inside of Flash. This is much the same way that Flash treated a Fireworks native PNG file. So as you can see, exporting a SWF file from Fireworks, and then importing that into Flash also yields really great results. The only thing that has happened when exporting a SWF file and then importing that into Flash, is that its added the extra step, its taken the text blocks and putting them into groups.
Obviously if I wanted to continue working with those here inside of Flash, all I'd have to do is select those text blocks, and then I could ungroup those by choosing "Modify," "Ungroup." Now that those are ungrouped I have access directly to the individual text options here inside the Properties Inspector without having to go into a group. So again, working with Fireworks and integrating that content with Flash, as you've seen, does really well. The Fireworks native PNG file translates perfectly inside of Flash, as does exporting a SWF file from Fireworks too.
Again, your mileage may vary depending on the complexity of the graphics that you create inside of Fireworks. I can't guarantee that some of the things, and especially the more complex things that you build inside of Fireworks, will translate over exactly into Flash, as you've seen here. But again, the results are very promising when integrating Fireworks and Flash content.
- Integrating Fireworks, Photoshop, and Illustrator content ActionScript Classes, Objects, Methods, and Properties Using the LoadVars Class to build scrolling text fields Using HTML and CSS with Flash Integrating usability and functionality Building an ActionScript-driven navigation system Building a dynamically loading slideshow with text and images Building a Preloader Using Components to create a feedback form Testing and publishing your final project