1. Fireworks MX

2. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users may leave a site that has too much animation. n An object can be _______ into segments with each having different functionality. n A hotspot is an area to which you can assign a ______.

3. 3 Lesson 1b—Create Slices & Hotspots n To create a slice using an object –in the View menu, verify that Slice Guides and Slice Overlay are selected –select an object that is to become a slice –select Edit > Insert > Slice –double-click the slice object in the Layers panel and rename it n To create a slice using the Slice tool –click the Slice tool in the Web Tools panel –draw a slice that covers a particular object –rename the new slice in the Layers panel n To create a hotspot –select the desired Hotspot tool from the Web Tools –create the hotspot, rename it in the Layers panel

4. 4 Lesson 2—Create Links in Web Pages n You can assign a _____ to a slice or hotspot. n You can store URL’s in a _________. n You can test the graphic using the _______ tab. n To add a URL to a slice or hotspot –select the slice or hotspot –enter the URL (http://...) in the Link: text box –enter the alternative text in the Alt: text box –select the desired Target (how the page will open) –save and test by selecting File > Preview in Browser

5. 5 Lesson 3a—Create Rollovers From Slices n A rollover is a behavior on a web page that the _______ triggers. n A behavior is a piece of __________ code added to a slice or hotspot. n To add rollover text –click Show slices … in Tools panel, select the slice –click Window > Frames, then select Frame 2 n To add a drag and drop rollover behavior –select a slice, click the behavior handle and drag it anywhere on the slice –click OK in the Swap Image box (says “Frame 2”) –click Preview and test the rollover

6. 6 Lesson 3b—Create Button States n To create a new button _______ –create new or select existing button, click Edit > Copy –delete this button from the Layers panel –click Edit > New Button –click Edit > Paste to paste button in the Button _____ –click the Over tab, click the Copy Up Graphic button –click Modify > Ungroup to separate text from background of button –modify the background and/or the text as desired (even add other objects) –click Done when finished, rename the object in the Layers panel –reposition the new button in the document –save and test (File > Preview in Browser) Editor

7. 7 Lesson 4a—Create Basic Animation n Animation is created by playing a series of images in a ___________. n To animate an object –select the object –click Modify > Animation > Animate Selection –enter the values for # of Frames for animation # of pixels to Move the object from beginning to end Direction of motion (0-360 deg) Scale (size of object at end of animation, in pixels) Opacity range from beginning to end Rotation of object from beginning to end –click Play on the document window to test, save

8. 8 Lesson 4b—Create Basic Animation n To modify an animation motion path –In the Frames panel, select Frame 1 –select the animated object –click and drag the red animation handle to the desired end position –test and save n Note: Some objects in Frame 1 may not appear on newly created frames. n You can copy objects in one frame, paste them in other frames, and modify their appearance to produce animated effects (e.g., changing ______).

9. 9 Lesson 5a—Add Tweening to Animation n A ________ represents an object or objects being animated. n A symbol that is placed on the document canvas is called an ________ of the symbol. n _________ blends instances to make movement appear more fluid and less jerky. n The frame ______ is the time a frame is displayed.

10. 10 Lesson 5b—Create a Symbol and Instance n To create a symbol and an instance –click the first frame in an animation –select Window > Library to display the Library panel –right-click the object to be animated, click Convert to Symbol, enter a name for the symbol

11. 11 Lesson 5c—Tween Animation n To tween animation –drag an instance of the symbol to its ending position on the _________ –click Modify > Transform and select desired transformations (from beginning to end) –select both object instances (use Shift+Click) –click Modify > Symbol > Tween Instances –select the number of frames, check Distribute to Frames, OK –test and save n To adjust frame delay –select the desired frame(s) in the Frames panel –double-click the time and change

12. 12 Lesson 5d—Trim, Optimize, and Export n To trim the canvas –click Modify > Canvas > Trim Canvas (removes excess space around the picture) n To optimize for exporting –click Window > Optimize to open the Optimize panel –click the Export file format list arrow, select Animated GIF n To export the file –select File > Export –select file location, name, type, etc. –click Save