Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Adobe Fireworks is a popular program used by web designers. If you'd like to create projects in Flash Catalyst, you can start your design process in Fireworks as well. First, let's take a look at how we actually setup a document in Fireworks and then we'll go through the process of opening that file inside of Flash Catalyst. As we'll see the process is somewhat different than working with Illustrator or Photoshop. First, I've taken the time to actually structure my document using pages here inside of Fireworks. Notice I have one page called PlayGame for the default state of my application.
Then I have separate pages for Winner and for Loser. When you create multiple pages inside of Fireworks, those do come into Flash Catalyst as multiple pages as well. Then for each my pages, I was also careful about how I structured and named my layers. For example I have elements inside of my Background layer and in the Bottles layer as well. Once my art is approved and I'm ready to bring my artwork into Flash Catalyst, I'll need to export my file. Now the native file format of Fireworks is the Ping format, or PNG, and while I can certainly import PNG graphics into Flash Catalyst, those are always just static images.
I have no way to bring all of this rich goodness from Fireworks into Flash Catalyst when I'm using a PNG file. So instead I'm going to go to the File menu and I'm going to choose Export. In the Export dialog box, I'll give my file a name. In this case I'll call it olive_game and for the Export format, I'm going to choose FXG and Images. FXG stands for the Flex Exchange Graphic format and it's the native graphics format that's used by both Flash Builder and Flash Catalyst. So I'll choose this option and I could also choose to make sure that I export all of my pages not just the current page.
Next, I'll click the Save button to create my FXG file. Now what actually happens is that Fireworks creates an FXG file plus a separate folder that contains all the images that are needed for that file. While it may sound a little bit complex, we don't have to worry about that because Flash Catalyst will take care of all this for us. Now that I've exported my FXG file, I'll switch over to Flash Catalyst application. From the Welcome Screen I'm going to choose to Create a New Project From an FXG File. I'll navigate in my Exercise folder to Chapter 02 and I'll see that I now have the FXG file that I've created called olive_game.
I'll click on it and then I'll click on the Open button to open a project here inside of Flash Catalyst. Once again Flash Catalyst will analyze the file and bring everything in including the pages and the layers that I've created as well. When bringing Artwork in from Fireworks, I have noticed that sometimes things do shift around. For example this Text block here wasn't imported perfectly, but it's a relatively easy fix. I can go to my Properties panel, scroll down over here to where it says Line Height and change that back to 100%. In doing so the text now appears correct.
So when I'm using Fireworks to create my Artwork that's going to be used inside of Flash Catalyst, I'll still take the time to structure my document correctly with layer names and with pages and when my art is complete, I'll export an FXG file that I can then open up directly inside of Flash Catalyst.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.