Hugh Griffith

Exporting from Fireworks to the Web

When we consider all of the functionality of Fireworks and the workflow born out of that functionality, the feature that sets Fireworks apart from its competitors as a superior web design tool is the exporting workflow. The workflow for exporting graphics from Photoshop is complex and time consuming. By comparison, Fireworks’ exporting process is elegant—on the order of an Aston Martin to a Ford Taurus. This chapter provides information on file and image optimization and exporting graphics.

Welcome to Fireworks

Welcome to Foundation Fireworks CS4! This book is designed to meet the needs of both novice and expert, with plenty of fundamentals and advanced topics as well. If you’re new to Fireworks, welcome aboard! It’s going to be a fun ride. If you’re a seasoned user, you’re sure to find plenty of new tricks and introductions to new features. Adobe Fireworks CS4 builds on the solid foundation of many previous releases and delivers a flexible, powerful design tool for web and user interface design.

Skinning Flex Components with Fireworks

The Adobe Flex framework (also known as the Flex SDK) is a powerful foundation upon which many sophisticated Rich Internet Applications (RIAs) are built. One of the core features of the Flex framework is the set of user interface components that it ships with. These components range from simple buttons, check boxes, and radio buttons to complex data grids, combo boxes, and text editors. If you’ve seen a large number of Flex applications, you may have started to recognize them as “Flex applications.” We added the quotation marks because the use of the default component skins tends to give Flex-based applications a similar look. This is fine if you want to create a quick application that has a nice look and feel (the default skins are clean and aesthetically pleasing), but not so fine if you want to create a branded experience that stands out among the crowd.

Working with Bitmaps

One of Fireworks’ greatest strengths as a design tool is the way it combines bitmap and vector tools in a single environment. You can mask bitmaps with vector paths, convert bitmap selections to paths, apply live filter effects to bitmaps, and much more. While most of your time in Fireworks will likely be spent using the vector tools, the bitmap tools will still play a key role in your daily workflow.

The Ins And Outs Of Animation

In this chapter, you will learn the ins and outs of animation states, formerly called frames, in Fireworks CS4. Then, you will see how to create two unique animations using different techniques by following step-by-step instructions. Finally, you will learn about exporting your animations in both GIF and SWF (Adobe Flash) formats.

Working with Vectors

In this chapter, you will discover the world of vector graphics. You’ll discover how vectors are different from bitmap objects, or raster objects, learn how to use various tools to draw vector objects within Fireworks, and explore scenarios for using vectors to achieve unique graphical effects.

Creating Visual Effects

Fireworks provides all of the tools you need to create advanced, sophisticated, wow-your-audience visual effects. In fact, because of the flexibility of the Fireworks toolset, we think you’ll find that creating effects in Fireworks is much faster and flexible than in other design tools. Every object, every gradient, every filter, every everything in Fireworks is infinitely editable and tweakable, giving you the ability to try, change, and remove until you’re satisfied (or exhausted).

Creating Adobe AIR Prototypes

Fireworks is the starting point for many application prototypes, whether web or desktop. With Adobe’s introduction of the AIR platform, it only made sense to enable rapid AIR prototypes within everyone’s favorite tool for application mockups! Using Fireworks CS4 and the new Create AIR Package command, you can rapidly prototype an application within Fireworks, and then generate an actual AIR application to test the effectiveness of your design.

Web Site Case Study #1: Blog

Fireworks is a powerful end-to-end web design tool. It is as useful for rapid prototyping and wireframing as it is for creation of vector art, logos, and pixel-perfect design detail and nuance. This example is going to walk through designing a blog site, a relatively simple and standard format on the modern Web. Over the last several years, blogs have developed some fairly solid formatting conventions, much like books, and thus make a good, simple design case. We will be designing a fictitious blog about pop culture, film, music, and industry gossip called PopDiary.com.

Fireworks and CS4 Integration

Fireworks CS4 boasts of much better integration with other CS4 applications. This chapter begins with highlighting the need and advantages of integration. After that it delves into integration of Fireworks specifically with Photoshop, Illustrator, and Flash. The various settings and options involved with files being passed across these applications are discussed in each application-specific section. This chapter serves as a start for users to explore those functionalities in depth. To understand the text in this chapter, we advise you to install the CS4 applications discussed in this chapter apart from Fireworks, namely Photoshop, Illustrator, and Flash. The 30-day-trial editions for all these applications are available at www.adobe.com.