Create slices and hotspots

1
Unit Lessons
OVERVIEW

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

2
Web Functionality
INTRODUCTION

• 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

3
Working with Slices
LESSON 1

• 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

4
Working with Slices
LESSON 1

• 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

5
Working with Hotspots
LESSON 1

• 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

6
Working with Hotspots
LESSON 1

• 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

7
Slices and Hotspots
LESSON 1

• 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

8
Slices and Hotspots
LESSON 1

• Slices and hotspots are similar but can be
  identified by color

Hotspots have a blue overlay
Slices have a green overlay
9
Working with Links
LESSON 2

• 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

10
Accessing URLs
LESSON 2

• 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

11
Accessing URLs
LESSON 2

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

12
Preview Options
LESSON 2

• 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

13
Preview Options
LESSON 2

• 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

14
Create Rollovers
LESSON 3

• 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

15
Create Rollovers
LESSON 3

• 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

16
Behaviors
LESSON 3

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

17
Behaviors
Behaviors for hotspots
LESSON 3

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

Behaviors for slices
18
Buttons
LESSON 3

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

19
Button States
LESSON 3

• 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

20
Button States
LESSON 3

• 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

21
Creating Animation
LESSON 4

• 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

22
Creating Animation
LESSON 4

• 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

23
Creating Animation
LESSON 4

• The animation handles represent the number of
  frames in the animation

Ending handle
Beginning handle
24
Using the Frames panel
LESSON 4

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

25
Using the Frames panel
LESSON 4

• 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
26
Symbols and Instances
LESSON 5

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

27
Symbols and Instances
LESSON 5

• 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

28
Symbols and Instances
LESSON 5

• 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

29
Editing Symbols
LESSON 5

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

30
Understanding Tweening
LESSON 5

• 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

31
Changing Frame Delay
LESSON 5

• Frame delay is determined in the Frames panel

Double-click Frame delay column to open Frame
dialog box
Red X indicates a hidden frame