FIREWORKS4 Speed Course

Tutorial

First, the initial knowledge of Fireworks4.0

Fireworks is a powerful web graphics design tool, you can use it to create and edit bitmaps, vector graphics, but also very easy to make a variety of web design common effects, such as Flip image, Pull-down menu, design completed, if you want to use in the web design, You can output it as an HTML file, as well as a format that can be edited in software such as Photoshop,illustrator and Flash.

File window

Fireworks has four tabs on the File window, you can edit and preview the image at the same time, you can preview the results of four different optimization settings, choose the most ideal one.

Tool bar

The toolbar includes a variety of tools for selecting, creating, and editing images, and there is a small triangle in the lower-right corner of the tool button, indicating that the tool contains several different forms, and holding down the tool will show other forms.

Vector mode and bitmap mode

Fireworks can be edited in vector mode and bitmap mode, and by default, fireworks is in bitmap mode when it is opened, and the graphics you draw are processed as vector objects. When you edit them, you will see that you are modifying the path that makes up the vector graphic.

You can open or enter a bitmap, you can edit the pixel that makes up the bitmap, in the bitmap state, the canvas with a diagonal box surrounded.

Floating panel

Fireworks's floating panels include layer (layers), frames (frames), color mixs (color blending), behavor (behavior), optimize (optimization) and object (objects).

At work you may find that some of the panels are often used, you can save the most convenient panel arrangement, use the menu command->panel layout, if you want to pull this arrangement next time, just command->panel Layout Set's submenu is selected on the line.

In the lower right corner of the workspace there is a row of Quick Launch bars, and clicking on the Quick Launch button quickly brings up the corresponding floating panel.

Libraries (library)

You can create a symbol or convert an existing object to a symbol by storing elements that can be reused, called symbol.

Symbols are divided into images, animations, and buttons three, to invoke the symbol just drag it onto the canvas, a symbol can have multiple instance (example), if you edit the symbol, then all the instance on the canvas (example diagram) will change.

Text/ 5D multimedia Candy

Two, make a button

Draw a rectangle

First we need to draw a rectangle with the help of the guide line.

1. Select the show guides and Snap to guides of View > Guides from the menu so that the guides can be displayed and are aligned to the guides (Guids).

2, click the Rectangular tool on the tool bar (Rectangle tool).

3, the Rectangle tool (Rectangle tool) pointer close to the auxiliary line (guides) rectangular area of a corner, press the mouse and drag to the diagonal.

Gradient fill

To make this rectangle more like a button, we're going to fill the rectangle with a gradient and add a stereo effect.

1. Open the Fill (fill) panel, and then make sure the rectangle is still selected, and select linear (linear gradient) on the fill Category drop-down menu on the fill panel.

2, then select Black,white on the Fill name pull-down menu.

3. Click the Edit button and then drag the left color swatch to the right to make the black and white gradient darker.

Add effect (effects)

Effects panels can add special effects to images and text, such as gradients and reliefs.

1, if the effects (effect) panel is not visible, choose Window > Effect from the menu.

2. Select "Bevel and Emboss-inner bevel" (gradient and Emboss-inner bevel) in the top Drop-down menu of the effects (effect) panel.

3, and select Sloped in the Drop-down menu of the hypotenuse shape, and then set the edge width to 4.

Note: If you want to modify it after adding the effect, click the button on the effects panel.

To create a JavaScript button, you must first convert the object to a symbols (symbol), and the (symbol) in fireworks is the element that is stored in the library of the document that you can reuse.

Convert to symbols (symbol)

1. Select this rectangular area and choose Insert > Convert to Symbol from the menu.

2, in the name of the column to fill in the MyButton.

3, select the button option, and then click OK.

Now you can see that this button is covered by a layer of green, and there is a small arrow in the lower left corner, and this layer of green indicates that this is a partition area (Slice). This arrow indicates that the rectangular area is an example diagram (Instance) that is stored in the library of the document (symbols). You will then use this circular (behavior control) Action controller to create a rollover image.

4. Select Menu Window > Library to see the buttons in libraries:

Add text to a button

1, double-click this button to open the button editor

2, select the Type tool (Text tool), and then click the mouse button on the button editor.

3, in the text editor (text Editor) can choose font selection, font size alignment, and so on, where we choose impact Font, the size of 16-point, center alignment. The top of the color is orange.

4, enter "Adventure Planner", and click OK.

Snap To text

To align the text on the button, you need to use a menu command.

1. Use the pointer (pointer) to select the button, and hold down SHIFT while selecting the text.

2, click on the menu Modify > Align > Center Vertical (Vertical center alignment)

3, and click Modify > Align > Center horizontal (horizontal center alignment) This will make the text Alignment button Center.

Create a rollover effect

1, click the Slide Over tab of the button editor and click the Copy Up Graphic button. The image in the Slide over tab refers to the image displayed in the completed page when the mouse pointer slides over the button.

2, select the text, using the Fill (fill) panel, the text into red.

3. Close Button Editor

Remember to keep your job as often as you want.

Preview

1, click the hidden slice icon below the tool panel, you can hide the green button covered.

2, click Preview Label,

3, move the mouse to the button above you can see the effect of discoloration.

Add a link to a button

1, click on the Object Panel link Wizard (link Wizard)

2, enter the link address on the Link tab on the Link Wizard (Links Wizard).

Text/ 5D multimedia Candy

Third, create animation

Create an object to produce an animation

1, a new file, long and wide are 200pixel

2. Draw a rectangle with a rectangular tool, you can use any color you like

The setting of the animation

1, select this rectangle, select Modify Menu animate->animated selecation.

2, in the Frame box, enter 5

3. Enter 180 in the Move box, which is the set moving distance pixel

4, in the direction input 45, set the moving angle

5, click Ok,fireworks will ask you if you want to add a new frame (frame)

6, click OK, will automatically add a new frame

Now the lower-right corner of the rectangle on the diagram adds a small arrow, indicating that it is an animated symbol (animation symbol), a line that represents the moving path of the symbol, and each point on the line represents a frame.

Animation preview

You can preview the animation directly in the workspace

1, if frame (frame) panel is not visible, select window-> frames

2, click on the canvas below the play/Stop button, you can play animation.

3, click this button again to stop.

4, on the frames panel you can see each frame of the animation

Now you can make some changes to this animation

Editing of animations

You can use the object panel to edit animations

1. Open Object (object) panel

2, click on the Frames panel on the first frame

3, select this symbol, the object panel will display the animation set, 4, you can modify this setting, such as in the scaling (scaling) input 110, so that from the first frame to the last frame image magnified 10%

4, you can modify this setting, for example, in the scaling (scaling) to enter 110, so that from the first frame to the last frame of the image to enlarge 10%

5. Enter 10 in the box on the left of opacity (transparency), and enter 100 in the box on the right, which will allow the animation to produce a gradient of transparency

6, in the rotation (rotation) in the input of 180, will make the animation to produce 180 degrees of rotation

7, click the Play button again to see the effect.

Edit Motion Path

1, click on the work area symbol, the motion path can be displayed

2, you can use the mouse to drag the first frame on the path (Green point) and the last frame (red point), to change their position

3, you can also drag the middle of the frame (blue point), change the entire path

4, another preview to see it

Output GIF animation

To see this animation in the browser, you must output it in GIF animation format or SWF format

1, open the Optimize (optimization) panel

2, the output format is set to animated GIF (animated GIF)

3, click on the menu file-> Export command

4. Save type Select HTML and images to output an HTML file

5, you can use the browser to open the animation to see

Text/ 5D multimedia Candy

Iv. hotspots and slices

Hotspots (hotspots) and slices (slices) are important tools for creating image interactions, hotspots and slices are called Web objects, that is, they are not images but a piece of HTML code, a Web Layer on a layer panel where you can view, select, and rename hotspots and slices.

Hot Spots and image maps

In web design hot spots (hotspots) and image map (image maps) are widely used, hot spots are the image with a hyperlink on the area, the same diagram can have several hot spots linked to different addresses, this is the image map.

In fireworks you can make different shapes of hot spots

Create a rectangular or circular hotspot

1. Select rectangular or circular hotspot tool

　　

2, the use of hot tools in the image drag draw out the area you want to create hotspots, hold down the ALT key can draw from the heart

Creating a multilateral hot-spot

1. Select Polygon Hotspot Tool

　　

2, click on the map on the mouse, and then click on another point, will automatically connect to form a multilateral hotspot, like the use of pen tool.

Create a hotspot along the edge of the selected object

1. Select menu command Insert > Hotspot inserts hotspot

2, if you choose more than one object, you will jump out of a dialog box to ask whether you are creating one or more hotspots.

3, you can choose single to create a hotspot or select mutiple Create multiple hotspots

Add link

1. Open the Object panel

2, add the link address in the Link box

3, in the Alt box can be entered to replace the image of the text, in the process of downloading the image of these words will appear

The same way you add links to slices.

Slice

Slices can split a large picture, which reduces the size of the image, and creates interactive effects, such as flipping images, and replacing some areas of the image with HTML.

Create a slice of a rule

The rules of the slice are the most common

1. Open the image file (File > Open)

2. Select an area on the image,

3. Select Menu Insert > Slice

4, of course, you can also use cutting tools for cutting

Slices of the area will be covered with a layer of translucent green, the slices are displayed around the red wire, the final output after the red wire will not appear.

Create an irregular graphic slice

1. Select the irregular cutting tool on the tool panel

2. Irregular cutting along the edge of image

Show and hide slices

Open the Layers panel click on the Slice (slice) layer of the eye icon, you can show and hide the icon

V. Flip image

In addition to creating buttons, Fireworks lets you easily create a bizarre Javascript flip effect. For example, when the mouse pointer slides over a button, in addition to changing the display state of the button, you can also make it change the display of other areas on this page, which in Fireworks are called disjoint flips (disjoint rollover).

Add an image that throws a flip

1, open the image

2, select the Insert > Slice on the menu, add slices to the image

Add a new frame

1. Add a new frame to the frames (frame) panel

2. Select the newly added frame

3, with rectangular tool drawing and a slice of the same size rectangle

Plus drag and drop behavior

1, selected slices

2. The behavior control handle of the slice center in the pointer point, when the pointer becomes the shape of the hand

3, hold down the behavior control handle from the center to the top left corner of the slice, then a blue line will appear, at the same time will pop up a window, in the Drop-down menu to choose Frame2

4, click on the preview tag, you can preview the effect of the flip

Create a disjoint flip

1, Selected Frame2

2, with the type tool input text

3, select the Insert > Slice menu, change the text into slices

4. The behavior control handle on the slice above in the point and drag to the following text slice

5, in pop-up window pop-up menu to determine the selected frame2

6, this will create a disjoint flip, when the mouse over the image of the above will show the following text

Six, drop down menu

　　Create a title

1, create a new image

2, draw a rectangle with a rectangular tool

3, enter text with the Type tool

　　Create slices

Select the rectangle, and then select the menu Insert-> slice (insert-slice).

Plus drop down menu

1, keep the slice in the selected state, select menu Insert-> Pop menu, Insert submenu

2, in the pop-up window for input, text (text) box to enter the submenu to display the text

3, enter the address to be connected within link (link)

4, click the + button to add the Pull-down menu

5, repeat the above steps until you have added all the submenu items you want to add.

6, you can drag the following list, the items on the submenu to arrange, can also be edited and deleted

7, click Next to enter the next step

8, you can edit the appearance of the submenu, there are two formats of submenus can be selected, HTML format and image format

9, when all the settings are complete, you can click Finish to exit

Sub-menu Positioning

1, select the slice and you will find a blue line consisting of a submenu of shapes

2, move the mouse pointer to the position of the menu, the pointer will become the shape of the hand

3, you can drag the menu to the right place

Preview

To preview the effect of a drop-down menu, you must do so in the browser

1, click menu File->preview in Browser

2, put the mouse up, you can see the pop-up drop-down menu effect

Text/ 5D multimedia Candy Find alternate Colors 1, open a file 2, turn on the find replacement (finding and replacing) panel 3, select Search Document on the Drop-down menu above the find replacement (finding and replacing) panel 4, select Find Color in the next Drop-down menu 5, specify the color of find, move the mouse over the file window, click on the red area, and then specify the color to replace in the change to, such as green. 6, select Fill in the Apply Drop-down menu, and then click the Replace All button to find the replacement color and all the red colors are replaced with green

Text/ 5D multimedia Candy

Eight, automatic operation

　　Record command

You can use the history (history) panel to set up the command, and the next time you want to do the same operation, you can use command to move from the operation can greatly improve productivity.

1. Create a new file
2. Create a new layer on the Level Panel
3. Enter draft with the type tool
4. Select History on the Window menu to open the history panel
5. You can see that the operation was recorded on the history panel.

6. Select all two records and click the Save button in the lower-right corner of the history (history) panel
7. Enter the name of the command in the pop-up dialog box, where we name the command add draft layer

　　Use command

A command is recorded, and then you can use this command to move the operation when you want to do the same thing.

1, create a new file

2, select the Add draft layer on the Command menu, which is the command that we just saved.

3, so fireworks will do the same thing automatically.

You can record all kinds of complex command like this, and you can include any number of steps

But an operation with a red X on the history panel cannot be recorded.

If you want to delete command

You can open the Command menu, select Edit Command list, select the command you want to delete in the list, and click the Delete button.

Text/ 5D multimedia Candy

Nine, image optimization

　　Using the Optimize (optimization) panel

Optimize (optimized) panel can be easily in the work area for image optimization, and at the same time to see the effect of optimization, in the Optimize (optimization) panel set several preset optimization settings to choose from, you can also set according to their own needs.

　　Slice optimization

You can make different optimizations for each slice of the segmented image, such as you can set the color-rich portions of the image to JPEG format, and the single color section to GIF format.

　　Optimize effects Preview

Click the Preview (Preview) tab on the File window and you can preview the effect after the optimization. Click 2-up tags and 4-up tags to compare the effects of several different optimization settings.

　　JPEG Select compression

JPEG selection compression can select different compression ratios for different regions of the image, and high quality can be selected in the more important parts of the image. The less important part can be compressed a bit larger.

1. Draw a selection on the image
2. Select Menu Modify-> selective jpeg-> Save Selection as JPEG Mask
3. Check the Enable selective Quality in the pop-up window and enter the compression ratio to be set for the selection area
4. After clicking OK, you can see the effect in the preview window

Modify the area of the JPEG selection compression

1. Select Menu Modify > Selective JPEG-> Restore jpeg Mask as Selection, a selection will appear
2. Modify a selection with the Select Area tool or other tool
3. Then select menu Modify-> selective jpeg-> Save Selection as JPEG Mask

To cancel JPEG selection compression You can select menu Modify-> selective JPEG-> Remove JPEG Mask

Text/ 5D multimedia Candy

　　Ten, output

　　Output image

When the image optimization is complete, the output is available

1, select File-> export to direct output

2, select images only output image

3, select HTML and images to output images and HTML files

　　Output an image of an area

1. Select the output Area tool on the toolbar to draw a range of areas on the diagram that require output
2. Double-click the output area to jump out of the output preview window to adjust the settings of the image output in the Output preview window
3. Finally press the Export button to output the image.

　　Output slices

After a large image is divided into small slices using a cutting tool, you will have to output the slices.

1. Select File-> Export
2. There are several options under the slicing

None: Ignores all slice objects and outputs the entire image in the current format.

The default setting is: Export Slice: Output slices include all behavior settings

Slice along Guides: output slices, but ignores all behavior settings for this object

If you want to output only one or more of the selected slices, you can tick the following selected Slices only

Output Flash Format

You can export images and animations to the SWF format of Flash

1. Select File-> Export
2. Select Flash SWF in the Save Type Drop-down menu
3. Click the Options button to set