Foundation Fireworks CS4- P6

Foundation Fireworks CS4- P6: The chapters in this book are divided into three parts: “Part 1: Learning Fireworks,” “Part 2:Using Fireworks,” and “Part 3: Fireworks in Action.” In this first part, we start by introducingyou to the Fireworks application where it lives within the Creative Suite, what makes itunique, and why you would use it. You’ll be introduced to the bitmap and vector tools andlearn how to export your artwork to the Web.
Nội dung trích xuất từ tài liệu:
Foundation Fireworks CS4- P6Chapter 7THE 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. An animation is a series of different static states of a graphical set. Running the states simulates the effect of the graphical set performing some action. Each of the static states of an animation can be created and edited in the Fireworks PNG document before exporting it as an animated GIF. By allowing the states to be independently accessed and edited, Fireworks provides you with higher fidelity while working on the designs. The States panel The States panel, shown in Figure 7-1, is the control center for all things related to animation in Fireworks. Formerly called the Frames panel, Adobe decided to rename the panel for the CS4 release since Fireworks is now geared more toward rapid pro- totyping. You can use states on practically anything, but they are most commonly applied to animation frames, user interface view states, and multipage web site mockups. The CS4 release added the provision of right-clicking inside the panel, mak- ing panel menu accessibility and discoverability better for new users. The right-click menu options are the same as those shown in Figure 7-1 except for the Help option. 129ChAPTER 7 Figure 7-1. The States panel with its options menu open Next, we’ll dissect the States panel so you can familiarize yourself with all of the icons, buttons, and menu options. Quick onion skinning Near the top left of the States panel, you’ll notice a small triangular icon. This slider is used to quickly adjust how many states you would like to overlay on your current state. Onion skinning allows you to view semitransparent versions of surrounding states in your animation. By default, mul- tistate editing is enabled, which you can change via the Onion Skinning button at the bottom left of the States panel. State position and name To the right of the onion skinning view adjuster, you will see a number and a state name. The number corresponds to the state order, which is sequential and always starts with 1. To the right of the number is the state name, which will be autogen- erated by Fireworks. By double-clicking any state name, you can rename the state for organization’s sake. You can also change the order of the states by dragging a state name to any position you like. State delay To the right of the state name is a column that indicates state delay by number. This number represents the delay, in 1/100 seconds, between states when the animation is playing. So, a delay of 100 would be one second, and a delay of 7 would be seven-hundredths of a second. You can change the delay by double-clicking the number and typing in your own value. You can also select multiple states while holding down the Shift key and then double-clicking any delay number to change all of the selected state’s delay properties at once. Quick glance The icon to the right of the delay number lets you quickly see which states contain graphical data and which do not. States with bitmap or vector objects in them will display a fully opaque circle icon, while empty states will show a ghosted or semitransparent circle icon in this column. When a state contains130 ThE INS AND OUTS OF ANIMATION some objects selected within it, a dot appears in the center of the circle icon. If the state contains an object or objects but none of them are selected, the circle icon will be fully opaque. You can use the circle icon to move selections between states, a feature new to the CS4 release. When the circle icon for a particular state contains a dot within it (i.e., an object or objects are selected), you can drag that icon to any other state, and the selected object(s) will be moved from the source state to the destination state.Onion skinning options Moving down to the lower right of Figure 7-1, you will see a button sporting a tiny onion icon. This Onion Skinning button is used to change the onion skinning view options, such as the multistate editing default mentioned previously (see Figure 7 ...