Page 1 of 1 Understanding how to slice page compositions is at the heart of getting the most out of Fireworks. After all, if all you use this tool for is to create spiffy images and cool graphics you're missing out on its true value as a web production tool. In this Captivate video tutorial you'll look at a different technique for slicing and exporting Fireworks images using both layers and frames to create a tabbed navigation composition with rollover images. The companion Captivate video tutorial to this piece, Slicing and Exporting Multiple Buttons in Fireworks showed you how to create multiple button states in a Fireworks composition and export the individual images. In this tutorial you'll see how interactivity is added directly in Fireworks. A common use for this kind of workflow is to develop a click-through navigation concept for approval by a client. Doing the entire composition directly in Fireworks saves you extra work when your client makes those inevitable changes.
A question that frequently comes up when discussing slicing techniques in Fireworks is, "Should I use frames or slices? Should I use both?" In both cases the answer is "It depends". As Jim Babbage discussed in his recent article, Fireworks Layers — Best Practices, when you wish to create an interactive document in a Fireworks composition frames allow you to separate one set of images from another and create image rollovers right in Fireworks.
For this tutorial you'll be building out a tabbed navigation scheme that features different categories within a site marked by a divider bar that changes color to match the selected tab. Image 1 shows the original image that was designed for the client, without the interactivity. The first lesson in the tutorial demonstrates the interactivity of this design and discusses the goals of the project.
Image 1: Complex navigation schemes, such as a tabbed interface
with rollovers, are easier to build and test in Fireworks before moving everything
into Dreamweaver for the final design.
Each of the video tutorials below will open in a separate window. Note that the download time and the length of each lesson is posted following the lesson's description. In addition, you'll find the original Fireworks source file that is used in the tutorial at the download link at the bottom of the page.
In Lesson 1 you'll take a look at the design goals for the project and review some of the tools that are used for creating the navigation. You'll hear a bit about the best practices for creating and working with layers, when layers should be shared, and even how to use the new Tab Auto Shape that comes with Fireworks MX 2004. (Lesson length: 6:15 minutes. Download size 3.5 MB.)
Lesson 2 leads you through the process of making the divider bar that gives viewers visual feedback of where they are in the site. You'll learn how to create a custom gradient fill that matches the fill of the tabs and how to modify the gradient with custom fill colors. (Lesson length: 4:35 minutes. Download size 3.2 MB.)
Creating new frames and managing your frames is the focus of Lesson 3. You'll gain an understanding of why frames are used for a complex navigation and see more clearly how shared layers are useful in this type of composition. You'll see different methods for copying and pasting objects from one frame to another, as well as how to name your frames and how to move between frames in the Frames panel. The lesson also covers how to modify gradients to match the colors in the different tabs. (Lesson length: 4:32 minutes. Download size 2.3 MB.)
Finally, in Lesson 4 you'll add the slices and interactivity that create a click-through navigation. You'll see how to create your slices, how to avoid common errors such as overlapping slices, and how to apply the swap image behavior to your images. You'll also learn how to modify your behaviors using the Behaviors panel, different methods for creating slices, and how to preview your creation directly in Fireworks. (Lesson length: 6:24 minutes. Download size 4.8 MB.)
In this tutorial you've learned how to setup and create a complex navigation scheme working entirely in Fireworks. You've seen how frames and layers are both used in a design where you want to add an interactive element to the design, how shared layers are used to make the design of a complex navigation composition go a bit faster and a variety of techniques that can be used for customizing your images. I hope you've also recognized how powerful Fireworks can be when employed as a client management tool as well. By doing all of your page compositions entirely in Fireworks you can cut down on the time required to make those unavoidable changes that your client requests.
To view the videos offline, download the support files from the bottom of the page and extract the files to a location on your computer. Open video/index.htm in your favorite browser.
Approximate download size: 13.9MB
Page 1 of 1 1
Keywords
Captivate, video, slicing, Slice tool, Auto shape tabs, custom gradients, gradients, frames, layers
