| The Macromedia Studio MX 2004 is composed of Freehand MX, Flash MX 2004, Fireworks MX 2004, and Dreamweaver MX 2004. These content creation tools are an absolute development powerhouse when used together. Unfortunately, most developers tend to align themselves with one tool and tend to ignore the others. This is a huge mistake. Each tool supports the other. For example, a vector drawing such as a company logo can be created in Freehand, imported into Flash, subsequently animated, output as a Flash SWF file, and placed in a Captivate movie. If you need fine typography, create the text in Freehand, save the file as a JPG, and import it into Captivate. In the previous chapter, you learned how to work with buttons. These, too, can be greatly improved by creating the button in Fireworks, placing the button in Flash, adding a link to a Web page in Flash, and then adding the SWF file to your Captivate movie. As long as the file can either be "fed" into Flash or saved in a format used by Captivate, the power of the Studio is available to you. From Fireworks to Flash to Captivate: The Studio workflow This example demonstrates how to create a simple three-state (Up, Over, and Down) button in Fireworks MX 2004. The button will then be placed in Flash MX 2004, where a link to the Peachpit site will be added to the button. The file will then be compiled into an SWF file and added to a Captivate movie. The button used will be an Aqua type button (Figure 8.16) that is used in the Mac OSX interface. Creating the button would be out of the scope of this book, but there are a number of tutorials out there that show you how to do this. Figure 8.16. The button artwork is constructed in Fireworks MX 2004. 
For this exercise, I created the button and saved the master as a PNG file. I then flattened the layers in the Layer panel and saved that image as PeachpitUp.png. I created the other two statesOver and Downusing a LiveEffect to change the color of the glow in the image. From here I was ready to build the button. To create a button symbol in Fireworks MX 2004 1. | Open the Up, Over, and Down button images in Fireworks MX 2004.
The button names appear in tabs at the top of the document window.
| 2. | Click the Up button's tab and right-click the image to open the context menu.
| 3. | Select Convert To Symbol.
The Symbol Properties dialog box opens (Figure 8.17).
Figure 8.17. The artwork is converted to a Fireworks button symbol and given a name. 
| 4. | Name the button and select Button as the symbol type.
| 5. | Click OK.
The green overlay indicates the object under it is interactive or is a slice. The small arrow in the bottom left corner indicates the object is a symbol.
| 6. | Right-click the object and select Symbol > Edit Symbol from the pop-down menu.
The Button Editor opens. Note the X and Y positions of the button in the Fireworks Property Inspector.
| 7. | Click the Over tab in the Button Editor.
| 8. | Click the tab for your Over button image (mine was named PeachPitOver) to open it.
| 9. | Select the button on the Canvas and copy the button to the clipboard.
| 10. | Click the image's tab at the top of the document window containing the name of the symbol (my symbol is named ToPeachpit).
You are returned to the Button Editor.
| 11. | Paste the button into the Over area (Figure 8.18).
Figure 8.18. Use the Fireworks Button Editor to add the button symbol's Up, Over, and Down states quickly. 
| 12. | When the button appears, enter the X and Y coordinates of the Up button into the Property Inspector.
| 13. | Repeat step 10 for the Down button, and click Done to close the Button Editor.
The button is created. Do not close the image or quit Fireworks.
|
To add a Fireworks button symbol to Flash MX 2004 1. | Launch Flash and open a new Flash document.
You should have both the button open in Fireworks and a blank stage open in Flash.
| 2. | Noting the canvas size for the Fireworks button in the Fireworks Property Inspector, click the Fireworks button, and drag and drop the button symbol slice (the green overlay) onto the Flash stage.
A progress bar appears.
| 3. | Save the button and quit Fireworks.
| 4. | Click the Flash stage and select Window > Library.
The Library opens. Notice that there are three bitmaps and a folder named "Fireworks objects."
| 5. | Double-click the folder in the Library to open it.
In the folder are a movie clip and a button symbol (Figure 8.19).
Figure 8.19. Dragging and dropping the button symbol from Fireworks into Flash results in the creation of a Flash button symbol. 
| 6. | Single-click the button symbol.
In the preview, you will see that the button symbol from Fireworks has been converted to a Flash button.
| 7. | Click the Size button on the Flash Property Inspector.
The Document Properties dialog box opens.
| 8. | Change the stage's width and height to match that of the button, and click OK.
| 9. | Single-click the button on the stage and press the F9 key to open the ActionScript editor.
| 10. | Enter the following code into the ActionScript editor:
on (release){  getURL("http://www.peachpit.com, "_blank"); }
| 11. | Close the ActionScript editor and save the file.
|
To create a Flash SWF file for Captivate playback 1. | Select File > Publish settings or press Control-Shift-F12.
The Publish Settings dialog box opens.
| 2. | Select the Formats tab and deselect HTML (Figure 8.20).
Figure 8.20. You need only the SWF file in the Formats area of the Flash Publish Settings dialog box. 
The SWF uses the name set for the Flash file. You can change the name by selecting the SWF in the File text box and entering a new name.
| 3. | Select the Flash tab.
Here, you can choose Player settings and other actions to be performed when the SWF file is created.
| 4. | Select Flash Player 6 in the Version drop-down list (Figure 8.21).
Figure 8.21. Captivate uses only Flash Player 6 for SWF playback. You choose this on the Flash tab of the Publish Settings dialog box. 
| 5. | Click Publish.
A progress bar appears, showing the progress of the compilation process.
| 6. | When the process finishes, click OK to close the Publish Settings dialog box.
| 7. | Save the movie and quit Flash.
| 8. | Select Insert > Animation.
| 9. | Navigate to the folder containing the Flash button you have just created and either double-click it or select it and click Open in the Open dialog box.
| 10. | Drag the button to its final location in the slide.
| 11. | Click the arrow beside the Preview button on the Main toolbar and select "From this slide." (Figure 8.22) Alternatively you can press the F8 key.
Figure 8.22. Test a Captivate slide by selecting "From this slide" from the Preview pop-down list in the Main toolbar. 
The Generating progress bar appears. When the movie has been generated, the slide containing the button appears.
| 12. | Click the button.
The browser opens and goes to the Web address entered in the Flash movie (Figure 8.23).
Figure 8.23. Click the Flash button to open the Web page. 
| 13. | Click the Close button in the window to return to the slide.
|
 Tip
The Power of the Studio This exercise, showing the creation of a simple button using Fireworks MX 2004, Flash MX 2004, and Captivate, just scratches the surface of the possibilities open to you. For example, you could design the button in Fireworks as an element in a navigation menu. Instead of the capsule shape, you could make it a square and use it as a part of a navigation menu that is assembled in Flash. You could add a click sound to the button in Flash as well as the jump to a Web page or even have the button trigger an MPs sound when it is pressed. This exercise also addresses a Fireworks/Captivate issue. The JavaScript generated by a button symbol in Fireworks can't be used in Captivate. This exercise is a back-door solution to this constraint. You can add an entirely new dimension to the use of corporate logos. For example, you can draw a logo in Freehand and then place it in Flash. From there, you can add sound and animation to it. Suddenly the static logo becomes more engaging and offers a richer user experience. If you draw objects and shapes in Freehand, when you place them in Fireworks MX 2004, you can apply a range of effectsfrom drop shadows to color changesusing the LiveEffects. You can then be save those images as JPG images. You can even animate objects in Freehand and output the SWF files from Freehand. Finally, you can create GIF animations using the Frames feature of Fireworks MX 2004. |
|
