Lesson 2a: Adding Flash Objects

You can easily achieve special effects by using buttons and animations created in Flash. Because Flash graphics are vector-based, they have very small file sizes. This helps them load quickly in the user's browser.

Adding Flash Buttons

Flash buttons have several different states, depending on the position of the pointer and whether the mouse button has been clicked. The first state is the look of the button when the pointer is not on it. The second state appears when the pointer is on the button but the mouse has not been clicked. The third state appears when the pointer is on the button and the mouse has been clicked. You can create and maintain Flash buttons in Dreamweaver from a set of available button styles. Many of the button attributes are changeable. In the following Step-by-Step, you create a button and then modify it.

• Step-by-Step 2.7: Creating and Modifying a Flash Button

  1. Open Dreamweaver and Open your travel-log.htm page.
  2. Move to the end of the text and Press Enter (Windows) or Return (Macintosh) to position the insertion point below the Fish graphic and the text in the center of the Document window.
  3. From the Common category of the Insert bar, click the small arrow to the right of the Media button, and then click Flash Button. The Insert Flash Button dialog box opens.
  4. Make the following changes:
     1. From the Style pop-up menu, choose Blue Warper.
     2. In the Button Text text box, key Return Home.
     3. From the Font pop-up menu, choose Verdana (or your font choice if Verdana is not available).
     4. In the Size text box, enter 12.
     5. Click the Browse button next to the Link text box and navigate to the default.html page you made for the compass_tours folder
  5. For Bg Color, click the color picker. Then use the eyedropper to click anywhere on the background in the Document window. The background color code #006699 appears in the Bg Color text box.
  6. In the Save As text box, key home_button.swf and then click OK. The Insert Flash Button dialog box closes and the button you created appears in the document.
  7. With the Flash button still selected, click Play on the Property inspector. The button is in its original state.
  8. In the Document window, move the pointer over the Return Home button. The button changes to its rollover state.
  9. Click the button. It changes to its clicked state.
  10. Click Stop on the Property inspector.
  11. Save the file and preview it in your browser. The button changes states just as it did in Dreamweaver, depending on the pointer position and mouse click.
  12. Close your browser.
      
      Next, you modify the Flash button.
  13. In the Document window, double-click the button. The Insert Flash Button dialog box opens.
  14. Make some changes to the options. For example, change the font to Arial.
  15. Click Apply to see the changes.
  16. Click OK when you finish.
  17. Save your work and remain in this screen for the next Step-by-Step.

Adding Flash Animations

You can add Flash animations to your document as easily as adding an image, provided the animation has already been created. You can resize the animations to your specification by dragging the handles. Unlike Flash buttons, you cannot create these animations directly within Dreamweaver.

• Step-By-Step 2.8 - Adding a Flash Animation

  1. Press Enter (Windows) or Return (Macintosh) to position the insertion point below the Flash button on your page. If your insertion point is not centered, click Align Center on the Property inspector. The insertion point is now centered on the page. The next object you add to the page will be centered.
     Note: Always be sure to select a SWF file when inserting a Flash animation. Do not insert FLA or SWT files because they will not show up in a browser
  2. On the Assets panel, click Flash. You may have to adjust the column widths to see the Nicknames column.
  3. From the Assets panel, select the surfAd.swf file and click the Insert button on the bottom-left corner of the Assets panel. The Flash animation is placed on the page.
  4. On the Property inspector, make sure Loop and Autoplay are selected. Autoplay causes the Flash animation to begin playing as soon as the page is loaded in the browser. The animation plays repeatedly because the Loop property is set in Dreamweaver. Click Play to view the animation in Dreamweaver.
  5. Click Stop on the Property inspector.
  6. Save the file and preview it in your browser.
  7. When you are finished, close your browser, close the travel log.htm file, and then close Dreamweaver.

Congratulations! You have finished Lesson 2

Return to the previous page: Working with Images

Go to the next lesson: Lesson 3 - Creating Links