Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Using the Fireworks interface

Using the Fireworks interface provides you with in-depth training on Web. Taught by Jim Babbage as p… Show More

Fireworks CS4 Getting Started

with Jim Babbage

Video: Using the Fireworks interface

Using the Fireworks interface provides you with in-depth training on Web. Taught by Jim Babbage as part of the Fireworks CS4 Getting Started
please wait ...
Using the Fireworks interface
Video Duration: 5m 20s 55m 53s Beginner


Using the Fireworks interface provides you with in-depth training on Web. Taught by Jim Babbage as part of the Fireworks CS4 Getting Started

View Course Description

Fireworks has come a long way from its roots as a screen graphics editor. As Jim Babbage demonstrates in Fireworks CS4 Getting Started, the latest release can serve as a rapid prototyping tool for a variety of uses--a central hub in the design and production workflow. Since Fireworks is a hybrid imaging application, able to seamlessly mix vector and bitmap images, layered Illustrator and Photoshop documents can be imported, edited, and restructured. Jim shows how to customize the interface and use layout tools like Smart Guides and the 9-Slice Scaling tool to quickly position and align objects on the canvas. He also discusses a variety of delivery options, including web-optimized graphics, interactive PDFs, AIR prototypes, and standards-compliant CSS and HTML. Example files accompany the course.

Topics include:
  • Importing and exporting images Measuring distances between guides for precise positioning Editing symbols in place Creating multi-page HTML click-through prototypes

Using the Fireworks interface

Knowing your way around the interface is important for working efficiently in any applications. So let's take a few minutes and look at the main parts of the Fireworks interface. It is also worth noting that Fireworks shares the same UI as Photoshop, Flash, Dreamweaver and the Illustrator. So moving between applications should become a fairly seamless process. Over on the top left, we have got some commonly used tools. Over on the right- hand side we have the search field for Help and just down below that a typical menu area and below that a toolbar called the main toolbar, where you'll do some common things like printing or undoing or opening files, closing files, things along that line. Over on the left-hand side we have got the toolbar where you'll find all your tools for selecting, working with bitmaps, working with vectors, setting up interactive web components and setting colors for fill and stroke for vectors.

Down at the bottom we have got our Properties inspector, docked with a couple of other Properties panels, the Symbols or Auto Shape Properties, and over on the right-hand side are the panels. Now panels are floating controls what you edit objects with in your design and restructure the design itself in terms of pages, or states, or layers and things along that line. And they are really easy to configure so you can set up your own customized workspace. You can drag panel right outside of this large panel dock by just clicking on the tab and dragging out into the workspace area. If I want to regroup it back in the panel dock, I can just grab that tab again, drag it in and drop it over top of one of the panel groups and there we go. It's back inside of a panel.

So really easy to configure in that way. I can also move the panels themselves so like essentially change the stacking order and set them up the way I want them to be viewed. I can collapse panels vertically by just clicking on the panel tab bar here and that will expand and collapse the panels quite quickly. And I can even collapse the panels down to a much smaller workspace by clicking on the double headed arrow on the right-hand side. That gives me a lot more free space for my canvas area. Being draggable means that the panels are pretty configurable. So you can set up your workspace the way you want to work. So for example I like to have the Pages panel separate from everything else. So I can see my pages in a multi- page document, like the one that's currently visible on screen. I can see those right away and I can also see my Layers and States also separately. And there may be panels that I don't use too often. So I may want to get rid of them. So I am going to go down below here and I am going to my Image Editing panel and I am just going to right-click on that and close it. I will do the same thing for my Special Characters panel for the time being and then I will minimize that panel again and bring up my Pages and my Layers panels so I can see them as well.

So now I have got a sort of setup that I like to work in and one of the other nice things about this interface is that I can set this as a custom workspace. So I can always come back to this. I can always work the way I want to work. Currently we're in one of the default modes, which is the Expanded Mode. If you go right back up to the top of the workspace you will see Expanded Mode and if I click on that menu you will see three defaults that we can work with that come with Fireworks: Expanded Mode, Iconic Mode and Iconic Mode With Panel Names. And there's a couple other ones here that have got my name attached to them and these are custom workspaces.

I am going to re-save this current workspaces by choosing Save Current and I'm going to give it a name. I'm just going to call it Jim's Workspace. And now, there it is there. I just overwrote my original one and I can select that anytime I want and it will display the workspace that I want to work in. Anytime I go to any of the other workspaces that here whether they are default workspaces or custom workspaces, I will chose Iconic Mode as an example here. I can click back on that Workspace Chooser, pick my custom workspace and then it comes back out to the way I want them to be. So in this way you can setup Fireworks to work the way you want. Now as well as being able to configure the panels and move them around and change their order, we have also got the same kind of control inside the document window itself. I can go over to where my open documents are and I can move the tab around and change the order of how these guys appear. What also is really neat is I can grab one of these files and drag it away from the tab bar and create a floating document window, with just one document in it.

And for that matter I can select another document, I'll drag my surf_gear here, and I can drag that and drop it into that floating document window. So now I have got two document windows each with their own different files in them and what gets even kind of cooler here is that I can have completely separate docked viewing windows. So I am going to grab this floating panel, this floating document window, drag it over to the left-hand side and let go. And when I let go after seeing a little blue highlight, I can basically get two sets of document windows. So this is what's being referred to as the N-Up view and you can have multiple document windows set up like this.

In fact if I grab my document window again, drag it away, I can refloat it and rather than running it vertically, I can grab that tab and bring it up to the top and here I got them running horizontally across. So we have got lots of different ways to control how we work in the workspace itself and how we see our documents. So this video has given you a general overview of the interface where most of the features are located. We also got a look at the Preferences panel, which is the centralized location for controlling a lot of Fireworks features and its tools. And with this updated UI in Fireworks we now have much more consistency between applications like Photoshop, Dreamweaver, Flash and Illustrator.

There are currently no FAQs about Fireworks CS4 Getting Started.






Don't show this message again
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Fireworks CS4 Getting Started.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a Member and Create Custom Playlists

Join today and get unlimited access to the entire library of online learning video courses—and create as many playlists as you like.

Get started

Already a member?

Log in

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

You started this assessment previously and didn’t complete it.

You can pick up where you left off, or start over.

Resume Start over

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.