Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
Fireworks is optimized to create screen graphics. As such, it's the ideal application for the creation of Flash platform assets. Fireworks CS5 supports the latest FXG 2.0 format, allowing you to easily export multipage designs or even individual objects as editable FXG elements for use in software, such as Flash catalyst CS5. Let's have a look at this process. Now, I've got onscreen here my INTERACTIVE TOUR mockup, all the different pages representing the tour itself. I haven't bothered adding any interactivity to this version, because that's the kind of thing that will be handled inside of Flash Catalyst to begin with.
If I take a look down on my Layers panel - let's just take a quick look and see what's going on here. We've got several layers, sublayers with different elements in them, and same is true of pretty much all the different pages in the design. So we are going to go over to our File menu and choose Export. We are going to browse to our folder, and we kind of create a brand-new folder right in here. I am just going to call it fxg, and open that up, and we are going to save our file in there.
Now, before I go ahead and do that, I just want to point out a couple of things. You've got lots of other options for exporting files. We want to make sure that we've chosen FXG and Images. We can also choose to export either the Current Page, All the Pages or Selected Pages in the design. We are going to go with All the Pages, get everything exported out. I am going to click on Save. If you are watching the screen, you'll notice that Fireworks is updating the pages in Layers panels that goes through each one of them one by one, and when we are done, we just hop over to Flash Catalyst, and we'll choose File > New Project From Design File.
We'll go into our Desktop, to our Exercise Files. You'll see there, an fxg folder. That's where we saved everything. I'll open that up, and there is our FXG file olive_tour, beside that is another folder containing all the graphics. Any graphics that couldn't be exported out as Vector elements are exported as bitmaps, and they are placed in this folder so that that can be accessed by the FXG file. So we are just going to select our FXG file and choose Open.
Now, if you have lot of vector elements or a lot of bitmap graphics in your design, you'll get this message from FXG mentioning that there are a lot of files, and that you may want to optimize some of the graphics once you are inside of Flash Catalyst by grouping them together and flattening them. Within a short amount of time, Flash Catalyst opens up our entire project. If we take a look, you'll see all the different pages from our design are still here, just like they were in Fireworks. I can just scroll through, and there is right down to tasting at the very end there.
Now if we take a look over in the Layers panel, this is another interesting thing to note. Let's go to our main page here, for example. You'll see all the layers in our main page have been maintained, even including our sublayers, right down to the graphics that are inside of those sublayers. So we've got a really good support for the hierarchy that we used inside of Fireworks. As far as the pages are concerned, I'll go to my growing page here. I've got to bit a text. The text in here is still editable, okay. It's been brought over as true text. So I can click inside that text area.
I can select the text. I can edit it, change it, delete it, whatever I like. I've also got the ability with inside of Flash Catalyst to work on adding a lot of interactivity, turning my navigation elements into interactive elements and so on. So you can see that Fireworks' Pages and layers translate directly to Flash Catalyst Pages and layers. As a designer, you can build out your mockup for rich media application within Fireworks, and then export the file as an FXG document, and either work on it yourself in Flash Catalyst, or pass it on to your developer.
There are currently no FAQs about Fireworks CS5 Essential Training.
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.