777 Chapter 23 ✦ Applying Animation Techniques Using Animation Symbols Animation symbols are self-contained, multi-frame symbols with their own animation properties, such as number of frames, rotation, and scaling. You can create an animation symbol from any object, and it can even contain other symbols. As with graphic and button symbols, animation symbols are stored in the Library and can be reused. You can graphically edit an animation symbol in the Symbol Editor, and its properties in the Object panel, or with the Modify ➪ Animate ➪ Settings command. You can edit its motion path directly in the document window. Creating animation symbols You can create a new animation symbol from scratch, or convert an existing object into an animation symbol. To create an animation symbol, follow these steps: 1. Choose Edit ➪ Insert ➪ New Symbol. Fireworks displays the Symbol Properties dialog box, as shown in Figure 23-19. Figure 23-19: Name your new symbol and specify animation in the Symbol Properties dialog box. 2. Enter a name for the new symbol. 3. Select the Animation radio button under Type. Click OK when you’re done. Fireworks displays the Symbol Editor. 4. Use the drawing tools to create a new graphic. 5. Close the Symbol Editor window when you’re done. Fireworks places the new animation symbol in the Library, and places a copy of it in your document. 303662-1 ch23.F 8/2/02 2:58 PM Page 777 778 Part VI ✦ Animation 6. To add new frames to the new animation symbol, select it on the canvas and adjust the Frames slider in the Property inspector. 7. To edit the symbol’s animation properties, select it and choose Modify ➪ Animation ➪ Settings to display the Animate dialog box. To convert an existing object into an animation symbol, follow these steps: 1. Select the object that you want to convert into an animation symbol. 2. Choose Modify ➪ Animation ➪ Animate Selection, or use the keyboard short- cut, Alt+Shift+F8 (Option+Shift+F8). Fireworks displays the Animate dialog box, as shown in Figure 23-20. Figure 23-20: Modify animation settings in the Animate dialog box. 3. Modify the following settings in the Animate dialog box: • Frames: The number of frames you want to include in the animation. The Frames slider only goes to 250, but you can type a higher number in the text field. Fireworks automatically adds the required number of frames to your document. • Movement: The distance that you want each object to move. Possible values range from 0 to 250 pixels. The default is 72. • Direction: The direction in which you want the object to move. Possible values range from 0 to 360 degrees. • Scaling: The percent change in size from start to finish. The default is 100 percent. You can specify a number from 0 to 250. • Opacity: Specifies how much to fade in or out from start to finish. Possible values range from 0, which is completely transparent, to 100 (the default), which is completely opaque. Tip 303662-1 ch23.F 8/2/02 2:58 PM Page 778 779 Chapter 23 ✦ Applying Animation Techniques • Rotation: The amount that the symbol rotates from start to finish, specified in degrees. The default is 0 degrees, which is no rotation. Specify 90 degrees for a quarter-turn, 180 for a half-turn, and 360 for a complete rotation. Enter a number higher than 360 to start a second rotation. • CW and CCW: Clockwise and counterclockwise, respectively; determine the object’s rotation direction. 4. Click OK when you’re done. Your new symbol is added to the Library, and a copy is placed on the canvas. Editing an animation symbol There may be a handful of skilled animators who can create the perfect animation symbol the first time through, but for most of us, the settings of our animation symbols require careful adjustment in order to achieve the desired effect. You can use a number of methods to alter the settings of an animation symbol. Let’s explore each of them. Adjusting animation settings Select an animation symbol and choose Modify ➪ Animation ➪ Settings to display the Animate dialog box. Alter any of the settings as desired. A discussion of the settings in the Animate dialog box is included earlier in this chapter, in the section “Creating animation symbols.” Using the Property inspector When an animation symbol is selected, the Property inspector changes to display animation symbol options that are similar to the Animate dialog box, as shown in Figure 23-21. Modify any of these options to adjust the corresponding setting. Figure 23-21: Use the Property inspector to modify animation symbol options. Adjusting the motion path When selected, Animation symbols display a motion path that describes their frame-by-frame movement across the canvas, as shown in Figure 23-22. The green Cross- Reference 303662-1 ch23.F 8/2/02 2:58 PM Page 779 780 Part VI ✦ Animation dot on the motion path indicates the start of the animation’s path, and the red dot shows the end point. The blue points on the path represent each frame of the animation. The object itself is shown on the current frame. Figure 23-22: The motion path describes the movement of the animation symbol. The visible object is on the current frame, frame 4. You can change the direction of the animation symbol’s motion by changing the angle of the motion path. Drag one of the animation handles to a new location, as follows: Hold down the Shift key while dragging to constrain the movement to perfectly horizontal or vertical. ✦ Move the green point to move the starting point of the animation. ✦ Move the red point to move the ending point of the animation. ✦ Move any blue point to move the object on the corresponding frame. Click a blue point to switch to that frame. Converting into a graphic symbol Choose Modify ➪ Animation ➪ Remove Animation to convert the animation symbol into a graphic symbol. Although your symbol is no longer animated, Fireworks retains the animation settings, in case you convert the symbol back into an anima- tion symbol. Removing the symbol To remove an animation symbol from the Library, follow these steps: 1. Choose Window ➪ Library to display the Library panel. 2. In the Library panel, select the animation symbol you want to remove. Tip 303662-1 ch23.F 8/2/02 2:58 PM Page 780 781 Chapter 23 ✦ Applying Animation Techniques 3. Click the Delete Symbol button (the trash can) on the Library panel. 4. Click Delete to remove the symbol. Editing symbol graphics Just as with button and graphic symbols, animation symbols are based on a graphic that you can edit in the Symbol Editor. When you modify the graphic that your animation symbol is based on, all of its instances — the copies on the canvas — inherit those changes, as well. To edit the graphic in an animation symbol, follow these steps: 1. Select the animation symbol you want to edit. 2. Choose Modify ➪ Symbol @ Edit Symbol to open the Symbol Editor. Alternatively, you can choose Window ➪ Library and double-click your symbol in the Library panel. 3. Perform your graphical edits in the Symbol Editor. 4. Close the Symbol Editor window when you’re done. See Chapter 17 for more on the Symbol Editor. Summary Fireworks enables you to create and edit animation by using a variety of techniques, most of which revolve around the Frames panel. When working with animation in Fireworks, keep these points in mind: ✦ The overall weight of your animated GIF is always a consideration. Every creative decision must be examined for its effect on file size. ✦ The Frames panel is the heart of Fireworks’ animation tools, but the Layers panel is also important. ✦ Each frame in your Fireworks document resembles a frame of a filmstrip. Copy objects to other frames by using the Frames panel, and then change the objects’ locations on the canvas or their properties to create animation. ✦ Layers can be shared across multiple frames, to manage static objects better in an animation. ✦ Onion Skinning enables you to view and edit multiple frames simultaneously. ✦ The Web design opportunities for animated GIF images are numerous, such as animated rollover buttons, sliced animations, and animated browser backgrounds. Cross- Reference 303662-1 ch23.F 8/2/02 2:58 PM Page 781 782 Part VI ✦ Animation ✦ Tweening is a great time- and work-saver because Fireworks fills in the middle elements of an animation automatically. Any selection of two or more instances of the same symbol can be tweened. ✦ Fireworks tweens objects starting at the bottom of the stacking order, nearest the canvas, and moving up. ✦ Distribute a tweened sequence to frames to create an instant animation. ✦ You can use tweening to create advanced effects, such as objects fading in and out, or flying out from the canvas. ✦ Animation symbols provide an intuitive way to work with animations. In the next chapter, you look at how you can apply animation techniques to create that most common species of animated GIF: the banner ad. ✦✦✦ 303662-1 ch23.F 8/2/02 2:58 PM Page 782 Animating Banner Ads B anner ads are nearly ubiquitous on today’s Web, and have contributed enormously to the rapid growth of the World Wide Web. After you have a sponsored banner ad on a page, the page begins to pay for itself, and you crave hits — requests for files made to your server — rather than worrying about the bandwidth costs of a page that grows too popular. Understanding Banner Ad Basics Banner ads are where animated GIF images really shine. You want a Web advertisement to be eye-catching and universally viewable, and animated GIF images are really the only choice. When does an animated GIF stop being an animated GIF and start being a banner ad? Four elements are involved: ✦ It is a certain size in width and height. ✦ It is below a certain weight in kilobytes. ✦ It is placed on a Web page. ✦ It advertises something. Let’s take a closer look at each of these points in the following sections. Examining size — IAB/CASIE standards When banner ads started to proliferate on the Web, it became apparent that some sort of standard sizing scheme would benefit both the advertisers and the sites displaying the advertising. If you have a Web site on which you leave a 450×50-pixel space in your design for a banner ad, and I then send you one that’s 460×60, we have a problem. If ten other people send you ten other ads, all slightly different in size, then the problem becomes a big problem. 24 24 CHAPTER ✦✦✦✦ In This Chapter Understanding banner ad standards Putting banners ads in a Web page Learning advertising lingo Creating banner ads in Fireworks Using Blur to save frames ✦✦✦✦ 313662-1 ch24.F 8/2/02 2:58 PM Page 783 785 Chapter 24 ✦ Animating Banner Ads Looking at weight In addition to making sure your banner ads are the correct dimensions, you need to consider their weight (file size). No “one true standard” exists for banner ad file sizes. Many Webmasters set an upper limit on weight, beyond which they won’t accept your ad. If you’re designing an ad for a specific site, check with its Webmaster first to see what the limit is, or at least check the weight of some of the ads that are already on that site. If you’re not designing for a specific site, a general rule is to aim for less than 10K, and certainly to keep it under 12K. If you can produce an exciting ad in 8K, so much the better. Your ad downloads quickly, and more viewers see your entire message. Putting it in the page Obviously, a banner ad is as much an image as any other GIF, and the most basic way to place a banner ad in a page is with an ordinary <img> tag. When you export HTML from Fireworks, this is exactly the way you find your banner ad displayed. Typically, though, most Web sites that depend on advertising have some sort of dynamic scheme for rotating through a series of banner ads, so that ads are added to pages on-the-fly by the server. Visitors who return to a page get an entirely new ad instead of seeing the same one again. The server also keeps track of how many times it displays each ad because the sponsor pays for the ad to be displayed a certain number of times. Implementing a banner ad rotation system is not nearly as hard as it might sound. The Web has many low-cost and even free CGI (Common Gateway Interface) scripts. A few hours of work and even the smallest site can start serving ads like the big guys. A good place to start looking for the appropriate CGI script for your needs is the CGI Resource Index at www.cgi-resources.com. Advertising it Although a complete course in Madison Avenue advertising methods is well beyond the scope of this book, it doesn’t hurt to at least know the lingo: ✦ A page view or page impression is one Web page served with your ad on it. ✦ A hit is one request by a browser for one file — an HTML document, or an image or multimedia file — from your server. Many people use “hits” and “page views” interchangeably, but one Web page might be made up of 20 individual files, while another page is only 10 files. As a result, it’s best to define your terms, and seek common ground when discussing “hits.” ✦ CPM is the cost per one thousand (Roman numeral M) page views. This is the standard way that ad space is bought and sold on the Web. A site with excellent demographics could demand a higher cost-per-one-thousand ads served. Tip 313662-1 ch24.F 8/2/02 2:58 PM Page 785 786 Part VI ✦ Animation ✦ A click-through is one specific time when a viewer is interested enough in a banner ad to click it and go to the advertiser’s site. The Web average for click-throughs might be less than 1 percent. ✦ The click rate is the percentage of people who click-through a particular ad. ✦ Mindshare is basically brand recognition. Even though Web users don’t click- through banner ads the way advertisers once hoped they would, studies have shown that people do look at banner ads and take the brand away with them. Fireworks Technique: Creating a Banner Ad Although banner ads are often created by a chain gang of ad people, copywriters, producers, Web artists, and others, a good way to work on the techniques involved is to just dive in and start creating ad campaigns for fictional companies of your own creation. This is exactly what we do as we go step-by-step through the process of creating a banner ad in Fireworks. The Mundane Magazine example banner ad created for this section is in both the original Fireworks PNG format and the exported animated GIF. Step I: Set the stage The very first step in creating a banner ad is to make sure you know what size it should be. Although you may sometimes come up with a creative idea that would dictate using a certain size, most of the time when you sit down to make a banner ad, the space has already been allotted. I follow the IAB/CASIE standards with my banner ad, and make a 468×60 Full Banner, which can be displayed on almost any Web site that accepts advertising. Step II: Write the script Now that you have a suitable “blank page” of the right size and shape, you are ready to sit and stare at it while you come up with an idea. All the same things that apply to regular animations apply to banner ads with regard to making a concise statement, planning ahead, and watching file size. Let’s face it: A 10K or 12K banner ad is not going to get into serious character development, or include a lot of scene changes or scenery. If you can’t express your idea in a few lines, it probably won’t fit into the banner. Think “bumper sticker” and you’ll probably be more successful. My ad is for a fictional magazine called Mundane Magazine. It’s a hip, youth-oriented magazine about the Web. I want to make something that attracts the attention of the target audience of young, hip Web surfers. Here’s the pitch for my ad: “A UFO crash lands on a barren alien landscape. The pilot thinks, ‘&*/$.’” Not much of a plot line, but again, what do you want from 12K? On the CD-ROM 313662-1 ch24.F 8/2/02 2:58 PM Page 786 [...]... Location Windows 98 No C:\Windows\Application Data \Macromedia\ Fireworks MX Windows 98 Yes C:\Windows\Profiles\\Application Data\ Macromedia\ Fireworks MX Windows ME No C:\Windows\Application Data \Macromedia\ Fireworks MX Windows ME Yes C:\Windows\Profiles\\Application Data\ Macromedia\ Fireworks MX Windows NT — C:\WinNT\Profiles\\Application Data\ Macromedia\ Fireworks MX Windows... Data\ Macromedia\ Fireworks MX Windows XP — C:\Documents and Settings\\Application Data\ Macromedia\ Fireworks MX 801 333662-1 ch25.F 802 8/2/02 2: 59 PM Page 802 Part VII ✦ Programming with Fireworks Table 25-2 Default Macintosh User File Locations Operating System Multiple Users User Type Default Location Mac OS 9 No — Macintosh HD/System Folder/Application Support /Macromedia/ Fireworks MX Mac... HD/System Folder/Application Support /Macromedia/ Fireworks MX Mac OS 9 Yes Admin Macintosh HD/System Folder/Preferences/ Macromedia/ Fireworks MX Mac OS 9 Yes User Macintosh HD/Users//Preferences/ Macromedia/ Fireworks MX Mac OS X — — Macintosh HD/Users//Library/ Application Support /Macromedia/ Fireworks MX The geographic heart of Fireworks extensibility and customization is the Configuration... next chapter, you look at customizing Fireworks ✦ ✦ ✦ 795 313662-1 ch24.F 8/2/02 2: 59 PM Page 796 323662-1 Part07.F 8/2/02 2: 59 PM Page 797 P Programming with Fireworks A R T VII ✦ ✦ ✦ ✦ In This Part O ne of the most amazing things about Fireworks MX is the way it can be controlled by scripts written in JavaScript, the most common scripting language for Web authoring Fireworks offers many ways to customize... the extensive Fireworks JavaScript API (Application Programming Interface) The final chapter explores the brave new world of Fireworks extensions and describes how you can use Flash to create user interfaces for such commands Chapter 25 Customizing Fireworks Chapter 26 Building Fireworks Extensions ✦ ✦ ✦ ✦ 323662-1 Part07.F 8/2/02 2: 59 PM Page 798 333662-1 ch25.F 8/2/02 2: 59 PM Page 799 25 C H A P T... Programming with Fireworks ✦ Because of the great number of objects and methods that the Fireworks API now includes, you are occasionally referred to Macromedia s Extending Fireworks documentation, which is available in PDF on your Fireworks installation CD-ROM, or on the Fireworks Web site at www .macromedia. com/ software /fireworks/ extensibility.html; a hard-copy version of Extending Fireworks is also... the Fireworks Preferences file CrossReference Chapter 3 details the Preferences dialog box The Fireworks Preferences file is found in different locations depending on your operating system To determine the location of your Preference file, please see Table 25-1 and Table 25-2 earlier in this chapter Note In Windows, the Fireworks MX Preferences file is called Fireworks MX Preferences.txt in the Fireworks. .. restarting Fireworks Fireworks creates a new default preferences file 333662-1 ch25.F 8/2/02 2: 59 PM Page 8 09 Chapter 25 ✦ Customizing Fireworks The other approach to altering the Fireworks Preferences file is to attack it with the Fireworks API The getPref() and setPref() methods of the Fireworks object (fw or fireworks) enable you to read or alter any preference setting For example, the following code... good sources include the following: ✦ Macromedia s Fireworks Exchange at http://www .macromedia. com/ exchange/ (click on Fireworks) ✦ Joseph Lowery’s Fireworks, etc at http://www.idest.com /fireworks/ ✦ Derren Whiteman’s Fireworks page at http://www.derren.com/geek/ fireworks/ ✦ Kleanthis Economou’s http://www.projectfireworks.com/ ✦ Massimo Foti’s excellent site at http://www.massimocorner.com/ As well... Programming with Fireworks Fireworks uses JavaScript and HTML templates to output JavaScript and HTML code; scripts that automate tasks in Fireworks are written in JavaScript This open approach makes it easy for Web designers to customize many aspects of their Fireworks workflow completely Scriptlets are stand-alone JavaScript files that run on Fireworks itself They can be placed in Fireworks Commands . the next chapter, you look at customizing Fireworks. ✦✦✦ On the CD-ROM 313662-1 ch24.F 8/2/02 2: 59 PM Page 795 313662-1 ch24.F 8/2/02 2: 59 PM Page 796 . these steps: 1. Choose Edit ➪ Insert ➪ New Symbol. Fireworks displays the Symbol Properties dialog box, as shown in Figure 23- 19. Figure 23- 19: Name your new symbol and specify animation in the. Editor. Summary Fireworks enables you to create and edit animation by using a variety of techniques, most of which revolve around the Frames panel. When working with animation in Fireworks, keep