View
237
Download
2
Tags:
Embed Size (px)
Citation preview
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