Fireworks Tutorial

[advanced session]

More on Images:

·     Layers can be used to separate different parts of your graphic….use the Layers Window to create and manipulate between the layers

·     Slicing:

o      Use the slice tool on the toolbox and then select the area that of the image that you want to slice

o      In the Object window...you can name the slice, add a URL to it, and at alternative text tags to it

JavaScript Rollover/Button:

• Insert > New Button will open the Button Editor
• The term button is used to describe rollover objects…but they don’t have to look like traditionally buttons.
• Four States are created in different frames with a rollover:
• Up: default appearance
• Over: appearance when the mouse pointer is over it
• Down: appearance after it is clicked
• Over Down: appearance as it is clicked

Example:

1.     Create a New Document

2.     Draw some sort of image with one of the tools from the toolbox (a rectangle, circle, whatever)

3.     Select the Arrow Tool from the tool bar

4.     Insert > Convert to Symbol

5.     Symbol Properties:  Give a name to the symbol and select “Button” for Type

6.     Access the Button Editing Window by double-clicking on your image

7.     Create an Over state by selecting the “Over” tab

8.     Click “Copy up graphic” to get the “Up” State of your button on the “Over” Page

9.     Change the color or some aspect of your image

10.  Close the Button Editing window and then click the Preview Tab in the workspace to view you button

11.  Export the file when you are done so that it can be used on a web page, etc.

Animations:

Example 1:

1. Create a New Document
2. Draw some sort of image with one of the tools (rectangle, circle, etc.) from the toolbox
3. Define the element as a symbol…Insert > Convert to Symbol…give it a name and select the “Graphic” radio button
4. Go To Frames Window (Window > Frames)
5. Pull down the arrow in the upper right part of the frames window and select Duplicate Frame…enter a value of 4
6. Select the Arrow Tool from the Toolbox and select the graphic
7. Edit > Clone to duplicate it as a new instance
8. Move the original symbol off to the left a little bit
9. Hold down the shift key and select both instances of the symbol
10. Modify > Symbol > Tween Instances…enter 4 steps and check “Distribute to Frames”
11. Preview Animation
12. Export as Animated GIF

-------------------------------------------------------

Example 2 (w/ Fireworks 4):

1. Create a New Document
2. Draw some sort of image with one of the tools from the toolbox
3. With the Object Selected, choose Modify>Animate>Animate Selection
4. Enter a value for Frames….like 5…this is how many frames the animation will contain
5. Enter a value for Move…like 180….this is the distance the object will move in pixels
6. Enter a value for Direction…like 45….this is the angle from the starting point that the object will move
7. Click OK
8. Click OK again when Fireworks asks if it should add new frames to the document
9. (The small arrow in the corner of your object indicates that it is an animation symbol)
10. Preview the animation…and click Play/Stop in the bottom area of the document window
11. Make some changes to the setting by opening the object panel (Window > Object) and changing some of the values….
12. Scaling sets the animation to gradually increase the object size from the first to last frame…a value of 110 increases the initial object by 10%
13. Opacity: a smaller number fades the symbol from the first to the last frame
14. Rotation: rotates the symbol a certain number of degrees as it travels along the motion path
15. Changing the Motion Path:
• Select the pointer tool
• Drag the starting frame (green dot) or the ending frame (red dot) to change the angle of the motion path
• Drag the intermediate frames (blue dots) to move the entire path

16. Export as animated GIF….File > Export Wizard