FIREWORKS4 Function Introduction

Translation/Www.loadskill.com Donger

This is a demo that will take you through the whole process of creating several new pages in a typical site. This demo is divided into several sections according to the different stages of the process. If you need more help, it also includes a help in fireworks.

First step: Install

The FIREWORKS:CD includes the fireworks installer. The CD also has a demo version of the alien Skin Eye candy provided by Alien Skin. Install the eye candy folder into your Xtras folder.

The Dreamweaver 4 CD includes the Dreamweaver demo version of the installer.

The Macromedia Flash 5 CD includes the Macromedia Flash 5 Demo Version installer.

Before we begin, let's say a noun--"Select Object":

In this whole demo, I will often mention the term "select Object". In the toolbar, select the Pointer tool and click on the object you want to select. You can do this if you want to select more than one object at a draught. There are two kinds of methods:

1. Press the SHIFT key and then use the Pointer tool to select another object.

2. Using the Pointer tool, click and drag out an area that is selected by the object contained in this area.

Translation/Www.loadskill.com Donger

　　Working in bitmap and vector map editing environments

In this section, we will begin by creating vector graphs from imported bitmaps and vector graphs.

　　Import a picture with a mask from Photoshop

• Open Demo_02.png

• Select "File/import" with file name "COMPASS.PSD"

• Click anywhere in the file to place the picture

• Note that the compass graphic contains the mask layer from Photoshop and is still preserved in fireworks. At the same time with text and vivid shadow effect. Select the image and text imported from Photoshop and use the Info panel to locate

• In the Info panel, type x=0,y=106

Translation/Www.loadskill.com Donger

　　a mask for editing objects

• Click the Mask of the layer panel and select it (the bounding box will appear)

• Select the Ellipse tool in the tool panel to set its fill color to white

• Draw a thin vertical ellipse at the far right of the image

• This creates a concave effect on the right edge to replace the current mask's straight edge

• Exit bitmap Edit mode (press ESC)

Edit Vivid Text

• Double-click on the text "Online Adventure Travel" and edit it

• Rewrite "Online" to "the Latest in"

• When the text edit box is still open, in the current file, click and drag the text to rearrange it to make it precise.

• Position on the right side of the image

• Change the color of the text to white, click OK

• In the effect panel, note that text effects are brought in from Photoshop

• At this point the text is still selected, open the Effect panel and click the "I" icon

• Adjusts the opacity of the shadow to 100%

• Continue processing the file or if you are just beginning to read this section, please use the file: Demo_03.png

  Translation/Www.loadskill.com Donger

  　　Enter multiple bitmaps (convert bitmaps and edit them to become icons)

  • Select Menu File/open

  • In the bitmaps folder, hold down SHIFT and select all 7 pictures

  • Select ' Open as Animation ' and click Open

  • All 7 images are open in the same document, each in a different frame, and we will make each image

  • slightly different processing. Naming each frame allows us to know which image is in which frame

  • In the Frame panel, double-click Frame1 and name "surfing" to indicate what this image represents.

  • Double-click each frame and rename them according to the meaning of each picture

  • Frame 2=kayaking

  • Frame 3=mountain Biking

  • Frame 4=rafting

  • Frame 5=rappelling

  • Frame 6=diving

  • Frame 7=fly Fishing

  Translation/Www.loadskill.com Donger

  　Bitmap Editing

  • Click on Frame 6, the name of the frame is diving, and select this picture

  • After the image is processed, it adjusts the color and uses the vivid effect

  • In the Effects panel, select adjust Color/levels

  • There are three sliding rulers in the levels distribution chart. Drag the leftmost slider to the right until the leftmost value of input level is 40

  • Then, drag the rightmost slider inward until the rightmost value of input level is 230.

  • Click OK

  • Click the Zoom tool in the Tools panel

  • Access the pop-up Drop-down menu by right-clicking on the picture (PC) or by clicking the Control key (MAC)

  • Select numeric Transform This command from the Drop-down menu

  • Scale the image to 20%, click OK

  Translation/Www.loadskill.com Donger

  　Create a bitmap icon with a mask

  • Select Rectangular tool to draw a rectangle

  • In the Info panel, set the size of this rectangle to 65wx50h

  • When the rectangle is selected, change its fill to transparent, and the border can be any color

  • This will create an intuitive auxiliary frame that will not be in the shaded image

  • Placing the rectangle on top of the diver is a beautiful icon

  • Select Edit/cut to cut this frame

  • Choose Diver Image

  • Select Edit/paste as Mask

  • Selected: Vector image masking

  
  Finish icon

  • Select Next Frame

  • Select the image and use the numeric Transform of the Zoom tool again with a scaled value of 40%

  • Access the Numeric Transform feature using the right mouse button (PC) or by clicking the Control key (MAC)

  • Select Edit/paste as Mask. This mask is still on the Clipboard.

  • Grab the center point of the picture and move it around until the picture feels satisfied in the frame

  • Open the completed icon: Activity_icons2.png in the second part of the folder to show the final results

    Translation/Www.loadskill.com Donger

    Now that we have the basic idea of our web page, we can output it as a Photoshop file with layers. Fireworks can output each matte object as a masking layer for each icon, so design work in Photoshop can use the same shading and ensure the icon is the same size.

    　　To output a Photoshop file with layers locally

    • Choose File/export from the menu
    • In the dialog box, select the Photoshop PSD format in the Drop-down menu
    • The name of the output is "LAYOUT.PSD"

    
    　　Vector editing

    • Open Demo_04.png or continue working in your demo file. We'll create three buttons with a soft side bevel in the main white area below the active icon
    • Select File/import in the menu
    • Positioning icons.png
    • Click the place icons.png file below the active bitmap icon in the main white area

    Translation/Www.loadskill.com Donger

    Now, we'll create the tilt button behind the icon

    • Select Rectangular Tool
    • Drag out the rectangle
    • In the Info panel, the dimension is set to 70wx40h
    • In the object panel, set rounded corners to 30
    • In the Fill panel, select linear mode
    • In the Fill panel, click the Edit button to edit the gradient color
    • Click the Color box to the left to choose beige #cccc99
    
    
    • Click the square on the right and select the highlighted hides color #cc9966
    • Click outside the gradient editor to turn it off
    • In the fill panel, change the padding edge and change the hard to anti-aliased
    • Now, let's adjust the gradient so that we can vertically change it from top to bottom, on the rectangle button.
    • On a rectangular object, drag the small black garden point on the gradient fill line and drag it to the top of the object.
    • Drag the Black rectangular box on the gradient fill line and move it to the bottom of the object. Make sure the line connecting the two dots is completely vertical
      
    • In the Effects panel, select Bevel&emboss/inner Bevel
    • Change "Flat" to "Smooth" in the Pull-down menu
    • Click outside the bevel window to turn off this window
    • When the button is still selected, hold down the option key (MAC) or hold down the ALT key (PC) and click the button to drag down to copy
    • Copy again so you have three buttons and three icons each have one
    • Place each button above the icon and align the left edge of the button with the left edge of the text block
      
    • Hold down SHIFT to select all of the buttons and choose Modify/arrange/send to Back

    Translation/Www.loadskill.com Donger

    Optimized image

    • In this section, we will cut the picture in the Web page to optimize. A text-like compass image above requires selective JPEG optimization. Text area should be used for other parts of different settings save
    • Open Optimize panel, choose Nothing, set all default page output set to Gif,web adaptive 128 colors

    
    　　Open the background layer and use the Pointer tool to select this compass image

    • Using the Lasso tool, draw a selection area on the edge of the "n/w" text of this compass image
    • Press SHIFT and select each digit of the compass image again (70,60,50,40&30)
    
    
    • Select Modify/selective jpeg/save Selection as JPEG Mask
    
    
    • Press ESC to cancel the selection and exit image editing mode
    • Draw a slice around the compass and the "the Latest in Adventure Travel"
    • When the slice is selected, in the Optimize panel, select JPEG, the quality is 50%
    
    
    • In the Optimization panel, next select Selective quqlity, type 90, and then press ENTER
    • Click the icon next to 90 to access the Selective quality menu
    • In the pop-up window, check the Enable selective qualilty check box, and also make sure that Preserve Text Quality is selected, click OK
      
    • Click on the Preview tab in the file to see how you can make it better

    • Translation/Www.loadskill.com Donger

      Create an interactive Web page

      • In this section, we will add interactivity and animation to our web pages.
      • Create a new layer in the Layers panel and double-click rename "Navigation Buttons"
      • (Put the new layer on top, above the compass layout), and drag it to that position.
      • Select New button in the Insert menu
      • Select the rectangular tool and drag out a rectangle
      • In the Info panel, set its size to 140wx20h
      • The fill color is dark gray #333333, strokes are 1pixel basic strokes, dark green #006666
      • Copy this rectangle and paste it
      • When this copy rectangle is selected, use the Info panel to resize it to 20wx20h
      • and change its fill color to medium green #006699
      • Select Import from the File menu, select "Flag.png" in the third part of the folder
      • Click on the green Square to place the flag
      • • Select the Type tool, click on the button to enter text
      • Enter "Adventureplanner" to set the text size to 12pt, the font is impact, the yellow color #ffcc66
      • Make sure the button on the left is in the selected state
      • Place text on the area of the button's dark gray

    • Translation/Www.loadskill.com Donger

      Create the up status of this button:

      • Click the Over tab in the button editing window
      • Click the Copy up Graphic button
      • Make the following changes to the graphic: change the fill color from dark gray to the same color as text #ffcc66
      • Change the color of text to dark gray (the color of the button and text swap)
      • Close Button Editor

      　　Create a navigation bar with a simple button

      • Select the simple button "Adventure Planner"
      • Press option (MAC) or Alt (PC) key to drag down to copy this button
      • Duplicate the four buttons so that the total number of buttons reaches six
      • All buttons are arranged in two lines, three per line. First Act 1,3,5, second act 2,4,6
      • Select all six buttons and use the Info panel so that they are positioned as x=150,y=25
      • Select the button for duplicate number two
      • In the object panel, change the text "ADVENTURE planner" to "GEAR"
      • Press the ENTER key
      • Make sure to change only the current button by clicking the current button
      • Change the remaining four button text to read as follows:
      1. #3-"Book FLIGHTS"
      2. #4-"CHECK CONDITIONS"
      3. #5-"TRAVEL LOGS"
      4. #6-"TRAVEL CHAT" click the preview tag in the file to preview the interactive button
         

    • Translation/Www.loadskill.com Donger

      In this section, we will create a "flip chart" effect for the icons of these activities.

      　　Create a picture Flip button

      • Click the "Compass Layout" layer and select it
      • In the Frame panel, click the icon that adds the new frame at the bottom
      • When the second frame is selected, select the Type tool and click on the rust-red area on the left to enter text
      • Type "Hit the beaches of southern California this summer with the pros."
      • The file format is Verdana, bold, point, yellow color #ffcc66 (the color is the same as the color of the crescent tooth below)
      • In the Frame panel, select Duplicate frame, the number of copies is 6
      • Select the third frame and double-click to change the text to "Explore the Seattle area by kayak." A ten day Adventure. "
      • (If you like you can change other frames, or simply open demo_08.png)
      • Select the Cut Diagram tool and add a slice near the text you just added (pull this slice down to the bottom of the file)
      • In the frame panel, make sure that the first frame is selected
      • With the Subselect tool, hold down the SHIFT key and select all the rectangular bounding box bitmap icons
      • Choose Insert/hotspot from the menu
      • Select "Multiple" in the conversation window
      • Click outside of them to uncheck the hot zone
      • Click on the hot area of the surfing image to select it
      • Click and drag the center dot icon to your newly created slice below
      • In the pop-up window, be sure that "Frame 2" is selected and click OK
      • Select the next hot area, click and drag the center icon to the slice object
      • At this point, select "Frame 3" as the source target
      • Continue clicking and dragging the Center icon of the remaining hot area into the slice, each time selecting the appropriate frame for the exchange of the source target
      • Click the Preview tab to preview this picture flip

    • Translation/Www.loadskill.com Donger

      　　

      Create a pop-up menu

      • Select the "Gear" button in the navigation bar at the top of the file
      • Select Insert/pop-up in the menu

      • In the window that appears, do the following
      • Enter "Backpacks"
      • Click the icon "+" to add (note: You can also enter the URL here)
      • Then, enter "No frame"
      • Click the icon "+" to increase it
      • When "No frame" is selected, click on the Blue indent icon
      • Using Image 054.gif
      • Now enter "External frame" and click the "+" icon
      • 萒 ml appearance setting, but change the text size to 10pt (using the pop-up editor you can either be HTML or image to create your button)
      • Click the Finish button

      • Translation/Www.loadskill.com Donger

        　　

        Batch command to perform image rollover with commands

        • Open the History panel
        • In the file, hold down SHIFT to select these three vector icons along with their "more" buttons (in the main white area)
        • In the Frame panel, select "Copy to Frames" and select "Next Frame" action

          
          

        • Let's automatically turn these three buttons into images, flip the button.
        • Select the first button in the White main area (Fly fising in the Rocky Mountains)
        • Copy it
        • In the Frame panel, click on the second frame
        • Paste it
        • Select Menu Modify/send to Back
        • In the Fill panel, select the type of fill to solid, and choose the color to be orange #ff9933
        • When the button is still selected, select Menu Insert/slice
        • On the slice, click in the center of the icon to access the pop-up menu, select "Add Simple rollover Behavior"
        • In the history panel, hold down shift to select the eight steps, from "Copy" to "Edit Behavior"
        • Click the disk icon to save these steps as a command.
        • Name this command "Make rollover button"
        • Now, click below the first frame and select the middle button at level 5 Rapids
        • Now, you can choose either
        • Select the Make rollover button command from the Command menu
          
        • Or
        • In the History panel, click Command Script and click the replay button
        • Click on the first frame and select the Last button
        • Then, select "Make Rollover button" in the history panel or rerun command script in the history panel

          Translation/Www.loadskill.com Donger

          　　

          Animate in a frame frame

          • In the layer panel, create a new layer on the background layer and double-click rename "Top Banner"
          • Select File/import and locate "Top_banner.png"
          • Place this file in the upper-left corner
          • When the file is still selected, use the Info panel settings to place the position as X=0,y=0
          • Before we start doing this animated ad, we need to decide which part will be the background part and should be placed underneath the animation. In this work, we set the moving part for the text "Compass" and the compass icon. So the turquoise rectangle underneath them should be moved to the shared layer, which is the background layer (because we want to make sure we see it in every frame of our animation).
          • Select this green-green rectangle in the top banner layer
          • In the Layer panel, drag the blue point (indicating that the Green object is selected) and drag it to the background layer
            
          • Select Compass Text
          • Select Insert/convert to Symbol in the menu
          • Name the new symbol "Compass text" as the graphic symbol, click OK
          • In the effects panel, add a shadow effect to this new symbol
          • Just change the two attributes on the bottom right: change the fuzzy number to 1
          • Change angle to 200 degrees
          • Copy the symbol, and then paste (it will be pasted on top of itself)
          • In the effect panel, click the "I" icon to change the shadow
          • Change angle to 350
          • Select two replicas of the symbol (drag the pointer through them (from the top, drag to the bottom of the file) and then hold down the SHIFT key and click on the Green object in the background layer to exclude it.
          • Select Modify/symbol./tween instances from the menu
          • Type the number 6 and tick the "Distribute to Frames" option and click OK
            

        • Translation/Www.loadskill.com Donger

          　　

          Vivid Animation

          • In the first frame, select the COMPASS flag
          • Select Modify/animate/animate Selection from the menu
          • In the pop-up window, select a frame number of 8, rotate 360 degrees, click OK
          • In the file, there will be a line of dots attached to the compass sign. These control the motion of the animation through their own 8 frames.
          • Drag the red point to the right to cover the "Adventure Planner" distance. Hold down the SHIFT key to force motion on a horizontal line
          • In the document window, click the Rewind button, and then apply the button in the file to preview your animation
          • Drag a slicing object on the Compass logo text and animation
          • Click on frame 8th to see where the animation ends and make sure your slices surround it.
          • When the slice is selected, open the Optimize panel and select animated GIF format in the pop-up window
          • Web adaptive,32 Colors
            

        • Translation/Www.loadskill.com Donger

          　　

          Output to Dreamweaver

          • Before we output the Dreamweaver HTML file locally to complete the image rollover effect, let's add a few more slices to control how the page is cut and optimized.
          • Open the Web layer's eye icon to see slices and hot areas
          • Draw a slice on the white area to the right of the "the Latest in Adventure traveheadline". This slice should automatically be adsorbed on a line with a text heading/Compass image slice
          • When the slice is selected, on the object panel, select "Type": Select "Text" from the pop-up menu
          • Enter some false headlines and text (it will be formatted in the subsequent DW) and press ENTER
          • Pull a slice out of a fish image
          • In the Optimize panel, select JPEG 100%
          • Drag three tightly connected slices under three buttons in the text section (see the right side of the text is now divided into several parts)
          • In the optimization panel, the slices are automatically sheared and the default settings are used. Look at these, make sure nothing is selected, and then look at your optimize panel. This default setting is Gif,web Adaptive 128 colors
          • Let's prepare to output this page
          • Select the HTML setup under the File menu in the General tab
          • Determines if Dreamweaver is selected in HTML style options
          • In the table label
          • Select nested tables (nested tables) in "Space from"
          • In the empty cell area, select "Non-breaking space" in the pop-up menu.
          • In the document specific tag: Nothing changes, just show the options
          • Click OK to save your demo file