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 mouseSlices are areas in your document designated as interactive by assigning a URL or behavior to themSlices 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 HotspotsSlices and hotspots are similar but can be identified by color

Hotspots have a blue overlaySlices have a

green overlay

Working with LinksYou 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 URLsURLs 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 URLsURLs 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 OptionsTo link to a URL and view alternate text, you must preview your document in a browserYou 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 RolloversRollovers 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 RolloversPlace 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

BehaviorsBehaviors are pieces of JavaScript code

Preset behaviors are available in the Behaviors panel

You can write your own custom behaviors

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

Behaviors for hotspots

Behaviors for slices

ButtonsButtons are a type of symbol that represents an object, text or both

Buttons can have four appearances or “states” based on mouse action

Button StatesUp – default stateOver – state when mouse passes over buttonDown – state when user clicks mouseOver While Down – state when mouse passes over button after it has been clicked

Button StatesButtons 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 AnimationAnimation 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 AnimationAnimation 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 AnimationThe animation handles represent the number of frames in the animation

Ending handleBeginning handle

Using the Frames panelThe Frames panel helps you to manage frames in your animation

Frames can be renamed, added, deleted, copied, moved or hidden

Using the Frames panelOnion 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 DelayFrame delay is determined in the Frames panel

Double-click Frame delay column to

open Frame dialog box

Red X indicates a hidden frame