1 / 12

Fireworks MX

Fireworks MX. Part C: Working With Interactivity & Animation. Lesson 1a—Create Slices & Hotspots. Fireworks allows you to add animation (behaviors) already written in ___________. However, users may leave a site that has too much animation.

daisy
Download Presentation

Fireworks MX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Fireworks MX Part C: Working With Interactivity & Animation

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

  3. Lesson 1b—Create Slices & Hotspots • 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 • To create a slice using the Slice tool • click the Slice tool in the WebTools panel • draw a slice that covers a particular object • rename the new slice in the Layers panel • To create a hotspot • select the desired Hotspot tool from the WebTools • create the hotspot, rename it in the Layers panel

  4. Lesson 2—Create Links in Web Pages • You can assign a _____ to a slice or hotspot. • You can store URL’s in a _________. • You can test the graphic using the _______ tab. • 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. Lesson 3a—Create Rollovers From Slices • A rollover is a behavior on a web page that the _______ triggers. • A behavior is a piece of __________ code added to a slice or hotspot. • To add rollover text • click Show slices … in Tools panel, select the slice • click Window > Frames, then select Frame 2 • 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 SwapImage box (says “Frame 2”) • click Preview and test the rollover

  6. Lesson 3b—Create Button States • To create a new button _______ • create new or select existing button, click Edit > Copy • delete this button from the Layers panel • click Edit > NewButton • 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. Lesson 4a—Create Basic Animation • Animation is created by playing a series of images in a ___________. • To animate an object • select the object • click Modify > Animation > AnimateSelection • 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. Lesson 4b—Create Basic Animation • 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 • Note: Some objects in Frame 1 may not appear on newly created frames. • You can copy objects in one frame, paste them in other frames, and modify their appearance to produce animated effects (e.g., changing ______).

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

  10. Lesson 5b—Create a Symbol and Instance • 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 ConverttoSymbol, enter a name for the symbol

  11. Lesson 5c—Tween Animation • 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 DistributetoFrames, OK • test and save • To adjust frame delay • select the desired frame(s) in the Frames panel • double-click the time and change

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

More Related