Advanced Fireworks MX

1
AdvancedFireworks MX
3

• Macromedia Dreamweaver MX

2
In this chapter, you will
3

• Create image maps to produce linkable hotspots in
  top of images
• Slice and optimize an image for the Web
• Create buttons and rollovers

3
Hotspots and Links
3

• An image with several clickable links is called
  an image map
• By placing several hotspots over an image, you
  can create a simple navigation bar, and place it
  on one or more pages of your site

4
Creating an Image Map
3

• To create an image map, place shapes on top of an
  existing image in the areas you want the links
• Shapes can be rectangles, circle, or polygons
• The Rectangle Hotspot tool works like the
  Rectangle tool
• Holding the mouse button down over the Rectangle
  Hotspot tool shows two other tools, a circle and
  polygon

5
Creating an Image Map
3
6
Creating an Image Map
3

• When you draw a hotspot on the workspace, a blue
  shape appears indicating the location of the
  hotspot
• You can hide or show the hotspots using Show
  Slices and Hotspots icon
• Attributes of the hotspot can be modified in the
  Property inspector

7
Creating an Image Map
3
8
Creating an Image Map
3

• You can define several targeting options with
  your hotspot
• _blank the link will open in a new browser
  window
• _self the link opens in the same browser window
• _parent and _top are used with Frames

9
Creating Multiple Hotspots
3

• You can automatically create multiple hotspots
  using the Insert Hotspots option of the Edit menu
• Selecting a path or object is quicker than
  drawing your own polygon
• You can select several objects and use the Insert
  Hotspots command then a dialog box will prompt
  you for single or multiple hotspots

10
Exporting an Image Map to Dreamweaver MX
3

• To export a Fireworks MX image into Dreamweaver
  MX, click on the File then Export
• Generates two files
• The Web graphic itself
• HTML file that contains the code to setup the
  image in Dreamweaver MX

11
Slicing Images for the Web
3

• Slicing is similar to creating an image map
• Instead of defining a map name with polygons,
  rectangular areas of the image are defined into
  slices of a table
• Each table cell holds a slice of the image
• Advantages of slices include
• Faster loading
• Better optimization

12
Slicing an Image Using Guides
3

• To slice an image using guides, you need to use
  the guide rulers in the workspace
• Click View on the menu bar, then click Rulers
• Once the rulers appear you can draw guides by
  dragging them from the ruler to the desired place
  on the canvas
• To generate the code to use in Dreamweaver MX
  select Slice Along Guides from the Slices
  drop-down list in Export dialog

13
Slicing an Image Using the Slice Tool
3

• The Slice tool allows you to define sliced areas
  on your canvas as either rectangles or polygons
• Slice tool is in the Web category of the Tools
  panel
• Two reasons for using the Slice tool
• You can attach behaviors to the slice, using the
  Property inspector
• You can optimize slices individually

14
Slicing an Image Using the Slice Tool
3
15
Buttons and Rollovers
3

• Using buttons instead of text hyperlinks gives
  your Web application a more dynamic look and feel
• Enhancing buttons with rollovers allows you to
  provide audio and visual feedback
• Buttons are created by slicing images and then
  exporting HTML tables and JavaScript code for use
  in Dreamweaver
• Consistent style and navigation is a key to Web
  site usability

16
Buttons and Rollovers
3

• Each Fireworks MX file you create has its own
  independent library associated with it
• Libraries store three type of symbols
• Graphics
• Animations
• Buttons
• Once you create a symbol and Fireworks stores it
  in the library you can reuse it, edit it, and
  drag it onto the canvas
• Once you create a button, code can be generated
  to turn it into a rollover

17
Buttons and Rollovers
3

• To insert a new button, click Edit then Insert,
  then click new Button
• The Button editor opens, it contains five tabs
  where you can define the state of the button
• Up The normal (mouse off) state
• Over When the mouse is over the button
• Down When the button is selected
• Over while Down When mouse is over a selected
  button
• Active Area Defines the buttons clickable area

18
Buttons and Rollovers
3
19
Buttons and Rollovers
3

• To create a rollover, you need at least two
  images, the original button, and the button in
  the down state
• Fireworks creates the needed JavaScript code for
  you
• In the Property inspector you can set text,
  export options, link, alternative text, and
  targeting options
• Fireworks automatically uses filenames that are
  extensions of the existing file name these
  extensions correspond to rollover states

20
Buttons and Rollovers
3
21
Buttons and Rollovers
3
22
Creating a Menu Bar
3

• Once you create a button, you can duplicate it to
  create several more buttons with the same style
  and button states
• You can maintain consistency by copying these
  states and merely altering the text and links
  associated with each duplicated button

23
Using Libraries and Styles
3

• Fireworks MX comes with a library of symbols,
  including animations, bullets, buttons, and
  themes
• To import a library, click on Edit, Libraries,
  and then select the library you want to use from
  the Edit menu
• Another way to achieve a consistent look on your
  page is to use a predefined style
• A style refers to defined characteristics for an
  image
• To access Styles, click on the Window then click
  Styles

24
Using Libraries and Styles
3
25
Using Libraries and Styles
3

• To define your own style, create an image in the
  style you prefer, then click on the Options menu
  on the right of the Styles panel, and then click
  New Style

26
Using Libraries and Styles
3
27
Creating a Pop-up Menu
3

• On Web sites that have large amounts of
  information, sometimes its useful to use pop-up
  menus
• Dreamweaver MX gives you a simple way to
  implement pop-up menus using slices
• Right click a slice, and a menu appears giving
  you the option to add a pop-up menu
• Content tab lets you add text, link, and
  targeting information
• Appearance tab lets you select how your menu will
  look
• Advanced tab lets you specify dimensions for your
  menu
• Position tab lets you choose the location of the
  pop-up relative to the image slice

28
Creating a Pop-up Menu
3
29
Creating a Pop-up Menu
3
30
Creating a Pop-up Menu
3
31
Fireworks MX Animation
3

• Animation can make a Web page more visually
  interesting
• Animation can draw a visitors eye to an
  important section of the Web page
• Creating Web animation is like creating cartoon
  animation
• Draw frames for each consecutive cartoon image,
  changing things slightly between frames to create
  the appearance of movement

32
Fireworks MX Animation
3

• Several ways to create animation on the Web
• Create JavaScript to rotate through an array of
  images
• Create an animated GIF
• Use tweening
• Tweening is a process where you define a start
  and end frame and the animation is automatically
  created for the between frames

33
Fireworks MX Animation
3

• In Fireworks, frames refers to animation frames
• To create a frame-by-frame animation you need to
  use the Layers panel and the Frames panel

34
Fireworks MX Animation
3

• At the right of the Frames panel are three
  buttons
• Distribute to Frames distributes selected
  images over many frames
• New/Duplicate Frame creates a new blank or
  duplicate frame
• Delete Frame deletes unnecessary frames
• Once you create your animations you can preview
  them before exporting them as animated GIFs
• Use the VCR controls at the bottom to preview
  your animation

35
Fireworks MX Animation
3
36
Fireworks MX Animation
3

• Another way to create animated GIFs in Fireworks
  is to create instances of an image and have
  Fireworks fill in the animation between them
  (tweening)
• To create an animation tween between two images,
  select the instances of the symbol, click Modify
  on the menu bar, point to the Symbol, and then
  click tween instances
• You need to provide the number of frames to
  create between the two instances

37
Fireworks MX Animation
3
38
Summary
3

• Using advanced Fireworks MX features you can
  create image maps, buttons, navigation bars, and
  animations that can be imported to Dreamweaver MX
• An image map is a graphic that has hotspots
  defined
• Slicing is a technique to cut a picture into
  segments
• Images can be sliced using guides, or you can
  define slice objects

39
Summary
3

• A button is a special symbol that you can create
  on and associate with the canvas you are working
  on
• Creating several buttons in one library enables
  you to generate a new graphic containing a
  navigation bar
• A pop-up navigation menu can be created by
  inserting a slice and right clicking to open the
  Pop-up menu editor
• You can create animated GIFs using Fireworks MX
  by creating frame-by-frame animation or tweening