Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Diving into Studio MX
Pages: 1, 2, 3

Creating the Video Buttons



  1. Open Flash, which will open a new document. The white, empty area is called the Stage, and the Timeline, a horizontal window that looks vaguely like a ruler, should be directly above it. You should also see a vertical toolbar and the Properties bar. (If you don't see either of these items, choose it from the Window menu.)

  2. Choose Document from the Modify menu. In the Document Properties dialog box, enter 300 pixels for width and 270 pixels for height. For Background color, use #99FFFF to match our pages. For Frame Rate, enter 12, and click OK.

  3. From the File menu, choose Import, navigate to the "match.mov" QuickTime file in your Source folder, and click Open. In the Import Video dialog box, select "Embed video in Macromedia Flash document," and click OK.

  4. In the Import Video Settings dialog box, use these settings.

  5. After a progress bar indicates the import status, you may be asked if you want the required number of frames to be added. Answer Yes to this prompt.

  6. Click once on the movie you just imported, and under the Insert menu, choose Convert to Symbol. Name the symbol Match Movie, and for Behavior, select Movie Clip. Make sure that the black square next to Registration is in the center of the white square. Click OK, and say Yes to the prompt that may follow. Choose Library from the Window menu, to see the Match.mov and the Match Movie symbol files. Click the movie on the stage and delete it. You'll notice that the Movie symbol still exists in the Library.

  7. Import the file called "match.jpg" from your Source folder. Using the arrow keys, try to position the button -- ignoring its shadow -- in the exact center of the stage. With the image selected, choose Convert to Symbol from the Insert menu. Name the symbol "Match Button," and select Button for Behavior.

  8. Double-click on the graphic on the stage to enter the Button Editing mode. Click on the black square underneath the Over state, and from the Insert menu, choose Keyframe. Also insert a keyframe for the Down and Hit states.

  9. Click on the square underneath the Over state. Click on the graphic on the stage to select it, and under the Arrange submenu of the Modify menu, choose Lock. Drag the Match Movie symbol (Not Match.mov) onto the stage, so that it directly covers the current match image. Don't bother trying to use the registration marks; they're thrown off by the drop shadow. To test the position, click back and forth between the Up and Over states, and watch carefully to see if the match "jumps." If it does, adjust accordingly.

  10. Now let's blend the movie in so it appears to be part of the button. With the movie selected, choose Brightness from the color pop-up on the Properties bar. Slide the control back and forth to get a feel for the range, squint your eyes if you need to, and choose a level of brightness that produces the best effect.

  11. Click on the black square below the Down state. Delete the graphic on the stage, and in its place, import the file called MatchDn.jpg. Because this image represents the button as its been pushed flat against the surface, this image should be slightly lower and slightly to the right of the original image, replacing the drop-shadow area. Again, test out the effect by switching between the Over and Down states.

  12. Click on the black square below the Hit state, and delete the graphic on the stage. Drag MatchDn.jpg from the Library to the stage, so that it is in exactly the same position as the graphic in the Down state. And again, test this by switching between the Down and Hit states.

    Hint: Look at the match, and try to ignore the border.

  13. Click the link for Scene 1, directly above the stage, to exit Button Editing mode. Save the file as Match.fla in your Source folder, and from the Control menu, choose Test Movie. Try rolling over the button, rolling off of it, and clicking on it, and when you're done, close the preview file. If the button doesn't behave the way you want it to, go back and try to get it right.

  14. From the Window menu, choose Actions. In the Actions for... pop-up at the top of the Actions panel, select Match Button. If you need to, open up the Book icon to view the available actions for Browser/Network, and double-click on the GetURL action. In the URL field, type "flame.html" (without quotes).

  15. Choose Publish Settings from the File menu. On the Formats tab, just Flash should be checked, and down below, "Use default names" should be checked. On the Flash tab, use these settings and click OK.

  16. Save the file, and choose Publish from the File menu. This will place a match.swf file into your source folder along with your match.fla file. Move the match.swf file to your Assets folder in your Site folder.

Inserting the Video Buttons

  1. Using Dreamweaver, open up index.html, and click in the first column of the three-column table. Click on the small red Flash icon on the Common tab of the Insert bar, navigate to the match.swf file you just moved into your Assets folder, and click choose. A gray Flash icon will fill the cell.

  2. Select the gray flash icon in the table and hit Tab, which moves the cursor into the next cell. Repeat the steps to insert ball.swf and top.swf, both of which are located in your Assets folder.

  3. Open flame.html, bounce.html, and spin.html, and insert the .swf files in the appropriate places.

  4. Go to index.html, hit F12 to preview your pages, and rejoice! You're done.

David Weiss is an Oakland, California based freelance writer. He's worked as a senior editor at Macworld magazine, and as the lead editor of MacHome Journal. Read more about David at www.davidweiss.net.


Return to Web Development DevCenter.