Creating a Custom Controller in Fireworks MX 2004


If you are a New Media designer, you are quite used to creating custom controls and adding the code that makes them function. Captivate makes your life easier because it writes the code for you. The major difference between your normal approach to building buttons and Captivate's approach is: Buttons in Captivate have only Up and Down states. There is no Over state.

If you create your own controllers, follow these guidelines:

  • All buttons must have the same width and height.

  • Playback controls can have only the following buttons:

    • Play

    • Back

    • Forward

    • Pause

    • Exit

    • Rewind

    • Info

  • All buttons must use the following naming convention: controlstylename-buttonamebuttonstate.fileextension. For example, assume you create a style named VQSGray. A rewind button for this style would have two files associated with it: VQSGray-backbuttonup.bmp and VQSGray-backbuttondown.bmp. The composite image for this controller that would appear in the Preview area of the Playback Control dialog box would be named VQSGray-preview.bmp.

This example assumes the controller to be constructed contains a Play button, a Rewind button, and an Info button. The plan is to have the buttons be a dark gray color and to name the controller VQSGray.

Tips

  • You can make areas of your control transparent by changing the name from style-playbuttonup.bmp to style-playtransbuttonup.bmp (add trans before the word button). The transparent color will be obtained from the top left pixel; any other pixels of the same color will appear transparent.

  • Controls you create don't always have to use a horizontal orientation. You can make your controls appear vertically by using the word vertical in the name of your playback control (for example, stylevertical-playbuttonup.bmp).


Building a custom controller in Fireworks

Fireworks is a great New Media imaging application. At its heart it is a paint program; in other words, it essentially works with pixels. The roots of this application stretch right back to the introduction of the personal computer, and MacPaint on the Macintosh was one of the first commercially available paint applications. Though a number of paint applications have evolved over the past 20 years, two have established themselves as de facto standards: Adobe Photoshop and Fireworks. If you are looking for advanced image manipulation and imaging for print, Photoshop is your tool. If you are displaying images on a Web page or other digital media, use Fireworks.

Knowing that controllers require a composite image in Fireworksall of the elements must appear on a single flattened bitmapit makes sense to construct the bar and then create the bitmaps used for the buttons from that composite image.

Tip

  • Though Captivate is a PC-only application, Fireworks MX 2004 is available in both Macintosh and PC versions. This means you can construct controllers on either platform.


To build a custom controller in Fireworks MX 2004

1.

Launch Fireworks MX 2004 and, in the Create New area of the start page, select Fireworks File.

2.

Select the Rectangle tool from the toolbar and draw a rectangle on the stage.

3.

Select the rectangle and enter these values in the Property Inspector:

  • Width: 130

  • Height: 30

  • Fill color: #666666

  • Fill type: Solid

  • Grain: 21%

4.

With the rectangle still selected, in the Property Inspector, select Effects > Bevel & Emboss > Inner Bevel.

5.

When the Inner Bevel dialog box opens (Figure 9.1), select the following values:

  • Bevel edge shape: Sloped

  • Bevel width: 4 pixels

  • Contrast: 75

  • Softness: 3

  • Angle: 135

  • Button preset: Raised

Figure 9.1. The first step in the process of creating custom Playback Controller is to build the background for the buttons.


6.

Select the Ellipse tool and draw a circle on the bar.

7.

If the Property Inspector isn't open, select Window > Properties to open the Fireworks Property Inspector. Select the circle and enter these values in the Property Inspector:

  • Width: 20

  • Height: 20

  • Fill color: #666666

  • Fill type: Solid

  • Grain: 21%

8.

With the circle still selected, in the Property Inspector, select Effects > Bevel & Emboss > Inner Bevel.

9.

When the dialog box opens (Figure 9.2), enter these values:

  • Bevel edge shape: Sloped

  • Bevel width: 3 pixels

  • Contrast: 75

  • Softness: 3

  • Angle: 135

  • Button preset: Raised

Figure 9.2. The button is given a 3D look using these settings.


10.

Press the Alt key (PC) or the Option-Shift keys (Mac); then click and drag a copy of the circle to the left side of the bar. Drag another copy to the left.

11.

To create the Info button for the controller, select the Text tool and single-click in the circle on the right.

12.

Enter the letter I.

13.

Enter these settings for the letter in the Property Inspector:

  • Font: Arial Black

  • Size: 16 points

  • Color: #FFFFFF

14.

Select the Zoom tool (the magnifying glass) and marquee the interface to zoom in on it.

15.

Select the Pen tool and, on the middle circle, draw an arrow pointing to the Info button.

16.

Fill the arrow in the Property Inspector's Fill area with #FFFFFF.(White) by clicking the fill color chip to open the Fill Colors and clicking in the white chip.

This will be the Play button.

17.

Press the Alt key (PC) or the Option-Shift keys (Mac), and click and drag a copy of the arrow to the circle on the far left.

18.

Select the copied arrow and select Modify > Transform > Flip Horizontal.

19.

Move the arrow into place.

This will be the Rewind button.

20.

Your image should resemble Figure 9.3; Save it.

Figure 9.3. The completed controller uses an Info button as well as buttons for Play and Rewind.


Preparing the controller for use in Captivate

With the controller constructed, you must break it apart into the required images for use in Captivate. This means you will have to create six buttons plus the flattened composite image Captivate needs to construct the controller. This may seem like a lot of extra work, but it isn't if you follow that old adage, "Let the software do the work."

To construct the controller

1.

Press the Shift key and then select the I and the button graphic that make up the Info button.

2.

Select Modify > Group to combine the letter and the graphic into one object.

3.

Select the grouped object, and select Edit > Copy and then File > New.

A new Fireworks document opens. The first thing you will notice is the dimensions of the new document match those of the object on the clipboard. This is a great way of sizing documents to the precise size of an object on the clipboard.

4.

When the New Document dialog box opens (Figure 9.4), change the resolution, if necessary, to 100 pixels/inch and set the background color to white (#FFFFFF). Click OK.

Figure 9.4. The button on the clipboard is about to be placed into a new Fireworks document.


A blank document opens.

5.

Select Edit > Paste to paste the button on the clipboard into your new document.

Note that if you changed the resolution in the New Document dialog box, pasting will result in a dialog box informing you that the resolution of the object on the clipboard doesn't match that of the document. Simply click the Resample button to have the clipboard object's resolution match that of the document. Though this process is generally frowned upon, both the change in values and the object itself are so small that no one will notice the image has been "down sampled."

6.

Select the button and, in the Property Inspector, click the Fit Canvas button.

This shrinks the canvas to the exact dimensions of the button and centers it in the canvas.

7.

Right-click (PC) or Control-click (Mac) the button.

The context menu opens. Select Convert to Symbol.

The Symbol Properties dialog box opens (Figure 9.5).

Figure 9.5. Converting an object to a button symbol enables you to quickly create the various bitmaps that Captivate needs.


8.

Name the symbol Info, select Button as the type, and click OK.

The green overlay that appears over the button is a nonvisible Web layer.

9.

Double-click the target in the Web layer.

The Button Editor dialog box opens. As mentioned earlier, note that Captivate buttons can have only Up and Down states. This means you need only two bitmaps of the button: one showing the Up state and the other showing the Down state. In this procedure, you will use the Over tab in the Button Editor to create the Down button for the controller.

10.

Select the Over tab and click the Copy Up Graphic button.

The button appears in the window.

11.

Select the Subselect toolthe hollow pointerand single-click the button shape.

12.

Select the Inner Bevel effect by clicking the I button beside the effect's name in Property Inspector.

The Bevel dialog box (Figure 9.6) opens.

Figure 9.6. Fireworks button states are regarded as off spring of the original image, meaning that they can be changed without affecting the original image. This occurs in the Button Editor.


13.

Select Inverted from the Button preset pop-down.

This reverses the coloring of the button and gives it the appearance of being pressed.

Click Done. You are returned to the canvas.

14.

Select File > Export Preview.

The Export Preview dialog box opens.

15.

Choose the following settings:

  • Format: BMP 8. This is an 8-bit (256) color space.

  • Palette: Web Snap Adaptive. This moves the colors in the image to their nearest Web-safe equivalents.

  • Minimum Number of Colors: 32.

    The number under this pop-down shows the actual number of colors in the image.

16.

If your screen resembles that shown in Figure 9.7, click the Export button.

Figure 9.7. Set the output format and color depth of the image in the Export Preview dialog box.


The Export dialog box opens. Note that Fireworks saves images a little differently than many imaging and drawing applications. Selecting File > Save or File > Save As saves the image only in one format: PNG. The Export Preview dialog box is where images are saved in the JPG, GIF, and BMP formats.

17.

Navigate to the folder in which the button pieces will be saved, and choose the following settings:

  • File name: VQSGray-infotransbuttonup.bmp

  • Save as type: Images only

  • Slices: Export slices

  • Include areas without slices: Deselect

18.

If your settings resemble those shown in Figure 9.8, click Save. Saving a JPG, GIF, or BMP image in Fireworks is a two-step process. The step shown in Figure 9.7 optimizes the image. The step shown in Figure 9.8 is where the file is named and saved.

Figure 9.8. Use the Export dialog box to name the file and create individual bitmaps for the buttons when the slices are exported.


When the image is saved, the button appears, sitting on a white background. To remove it, in Captivate, you add trans to the filename.

19.

Select File > Save As and save the button as a PNG image.

This way, if changes are needed, you have the original artwork available.

20.

Repeat these steps for the Play and Forward buttons.

The play button will be named VQSGray-playtransbuttonup.bmp, and the Rewind button will be named VQSGray-backtransbuttonup.bmp

21.

Return to the composite image containing the bar and the buttons. Select File > Export Preview. Set the format to bmp8, change the color depth, and click the Next button.

22.

Save the file as VQSGray-preview to the same folder as the three buttons.

You must use this naming convention.

23.

Save the file and quit Fireworks MX 2004.

24.

Open the folder in which you saved the images.

The Down button names all end with _F2. Replace the _F2 with the word down (Figure 9.9).

Figure 9.9. The Playback Controller elements have been constructed and are ready for use in Captivate.


To use the custom controller in Captivate

1.

Navigate to the folder in which you saved the controller pieces.

2.

Select and copy all of the BMP files.

3.

Navigate to C:\Program Files\Macromedia\Captivate\Gallery\Playback Controls.

4.

Paste the BMP files to add them to the folder.

5.

Open a Captivate movie and select Movie > Preferences.

The Movie Preferences dialog box opens.

6.

Select the Playback Controls tab and select the controller from the Styles pop-down menu.

The preview appears in the Playback Control dialog box (Figure 9.10).

Figure 9.10. The playback controller created in Fireworks is available for use in Captivate through the Movie Preferences dialog box.


7.

Click OK.

The new controller appears in the preview window.



Macromedia Captivate for Windows. Visual QuickStart Guide
Macromedia Captivate for Windows. Visual QuickStart Guide
ISBN: 321294173
EAN: N/A
Year: 2003
Pages: 130

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net