Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation Unit Lessons

Fireworks provides you with tools to create interactive and animated graphics You can create slices and hotspots that link to other Web pages, rollovers and animations JavaScript behaviors are available in the Behaviors panel Web Functionality

Interactivity allows visitors to your Web site to affect its content using the mouse Slices are areas in your document designated as interactive by assigning a URL or behavior to them Slices are created using the Slice tool, Polygon Slice tool or Insert Slice command Working with Slices

Slices appear as green translucent shape in Fireworks To add a URL to a slice, select it, then type the URL in the Link text box in the Property inspector Slices can be exported individually as a variety of file formats Working with Slices

Working with Hotspots Hotspots are areas that you define in your document to which you can assign a URL or other type of interactivity Hotspots are created using –Rectangle Hotspot tool –Circle Hotspot tool –Polygon Hotspot tool

Working with Hotspots Hotspots appear as blue translucent shapes in Fireworks You can assign a different URL to each hotspot in your document One hotspot can be made from many objects

Slices and Hotspots Both slices and hotspots are stored on the Web Layer of the Layers panel Slices and hotspots write HTML code when they are exported Slices and hotspots can be hidden or shown using buttons on the Tools panel

Slices and Hotspots Slices and hotspots are similar but can be identified by color Hotspots have a blue overlay Slices have a green overlay

Working with Links You can enter URLs (Web addresses) to slices or hotspots to link a graphic to another Web page URLs are entered in the Link text box in the Property inspector Alternate text is entered in the Alt text box in the Property inspector –Appears like a ToolTip when mouse is over a slice or hotspot on a Web page

Accessing URLs URLs are added to the Current URL list on the Property inspector and to the URL panel URLs can be added to a library –Useful for URLs that are used often –Select URL in the URL panel –click the Add current URL to library icon

Accessing URLs URLs can be imported –Netscape Navigator Bookmarks file –Internet Explorer Favorites file URL files are stored where your operating system stores application data

Preview Options The Preview tab –Allows you to preview the mouse change when you add interactivity –Displays document as it would appear in a Web browser –Shows current optimization settings

Preview Options To link to a URL and view alternate text, you must preview your document in a browser You can preview your document using two browsers –Use the Preview in Browser command on the File menu –Choose from a primary or secondary browser

Create Rollovers Rollovers are graphics that change appearance in response to mouse action –Trigger can be a roll or a click Rollovers usually consist of two images –Before version –After version or “the target”

Create Rollovers Place normal and target images in separate frames Attach slices or hotspots to normal image Drag the Behavior handle from the normal object to the target object

Behaviors Behaviors are pieces of JavaScript code Preset behaviors are available in the Behaviors panel You can write your own custom behaviors

Behaviors You can right-click (Win) or [control] click (Mac) slices and hotspots to display the list of available behaviors Behaviors for hotspots Behaviors for slices

Buttons Buttons are a type of symbol that represents an object, text or both Buttons can have four appearances or “states” based on mouse action

Button States Up – default state Over – state when mouse passes over button Down – state when user clicks mouse Over While Down – state when mouse passes over button after it has been clicked

Button States Buttons are edited using the Button Editor The Active Area is the slice (or hotspot on top of a slice) to which a behavior is attached –Includes the four button states –Includes size of any swap image

Creating Animation Animation is created by playing a series of images in a sequence, which create the illusion of movement You can create an animation by selecting an object, then clicking the Animate Selection command

Creating Animation Animation symbols can be reused in any document An animation symbol has five or more handles attached to it –Dragging green and red handles determines beginning and ending location of animation

Creating Animation The animation handles represent the number of frames in the animation Ending handle Beginning handle

Using the Frames panel The Frames panel helps you to manage frames in your animation Frames can be renamed, added, deleted, copied, moved or hidden

Using the Frames panel Onion skinning allows you to view one or more frames while in the current frame Looping is the term given to the continuous playing of an animation Click button to select frames for onion skinning GIF animation looping button

Symbols and Instances Symbols are graphics, buttons, or animations especially designed for Web pages Symbols originate from vector objects and text created in Fireworks

Symbols and Instances Symbols are stored in the Library panel Symbols are small in file size because their properties are stored in the Library panel, not in your document

Symbols and Instances Instances are copies of symbols dragged to the canvas You can use multiple instances of the same symbol without adding any extra file size to your document

Editing Symbols Editing symbols automatically updates every instance of the symbol used in the document Editing individual instances does not affect the corresponding symbol

Understanding Tweening Tweening is a type of animation –In-between frame are added between motion frames to ease transitions Frame delay, the display time for each frame, can also help to fine- tune animation

Changing Frame Delay Frame delay is determined in the Frames panel Double-click Frame delay column to open Frame dialog box Red X indicates a hidden frame