Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples

Diving into Studio MX

by David Weiss

Macromedia's Studio MX is a veritable cornucopia of Web development tools. This $799 suite contains Dreamweaver MX for creating Web sites, Flash MX for creating interactive, animated Web applications, Fireworks MX for image editing, and Freehand 10 for vector illustration. Through this tutorial, I'll give you an idea of how the three MX programs can work together. I'll also show you one of the slickest features of Flash MX: the ability to embed video directly into Flash content.

But first, let me tell you where I'm coming from. When I started using the tools in Studio MX, I was a Web development newbie. I'd edited stories on Dreamweaver, Fireworks, and Flash, and I'd watched the development of these tools throughout several versions, but I hadn't actually used them for my own projects. Also, throughout years of working with existing Web sites, I'd somehow managed to put off building a Web site from scratch. So during my initial foray into Studio MX I was not only learning the tools but also starting my first Web site, and I had a lot learn.

Still, I found it relatively easy to get acclimated because the MX tools are well integrated. The Properties bar, which displays the particular controls that relate to the object you select, was a welcome sight, as it appears in each application. And each program has simple, clearly marked pathways to the others, for intuitive importing and exporting of myriad file formats. I found it a bit tricky, at first, discovering some of the limitations of HTML ("Why can't I move that graphic just a bit to the left?"), but because Dreamweaver lets you see your code and page design simultaneously, and lets you select specific parts of the code through a graphical interface, I was able to figure out how to shape my pages the way I wanted to.

Related Reading

Dreamweaver MX: The Missing Manual
By David Sawyer McFarland

The biggest challenge for me was learning to make video behave obediently in Flash. To do this, I had to learn the differences between QuickTime files and movie symbols, among other subtleties, but again, the program's sensible interface helped me out. I designed this tutorial to help you get your feet wet with Studio MX, and to show you that even if you're new to the Web design turf, the suite's more advanced features are well within your grasp. Let's go!

What You'll Need

Preparing for the Tutorial

  1. Create a folder called "DidYouKnow Site," which contains a folder called "Assets."

  2. Create a folder called "DidYouKnow Source," but don't store it inside of your Site folder.

  3. Download the tutorial files (2.4MB), and place these files into your Assets folder: BallDnB.jpg, Ball.swf, MatchDnB.jpg, TopDnB.jpg, and Top.swf. Place the rest into your Source folder.

  4. View and experiment with the completed project so you can see where we're headed. (1024 x 768 is the optimal resolution for these pages.)

Setting up the Pages

  1. In Dreamweaver, select New Site from the Site menu, and click on the Advanced tab on the top.

  2. In "Site Name", enter "DidYouKnow." For "Local Root Folder," click on the folder icon, navigate to your DidYouKnow Site folder, select it, and hit Choose. Make sure that "Refresh Local File List Automatically" is checked. For "Default Images Folder," click on the folder icon, navigate to your Assets folder within your Site folder, select it, and hit Choose. Leave "HTTP Address" blank, make sure that "Enable Cache" is checked, and click OK. A site window will appear; just close it.

  3. Choose New from the File menu, and after clicking Basic Page in the Category column, click HTML in the Basic Page column, then click Create. In the Title field at the top of the document, enter "DidYouKnow," and save the file as "index.html" (without quotes).

  4. In the top left corner of index.html, you'll see a group of three buttons. Click the leftmost button to view the HTML of your page. Now click the button on the right, which shows the elements of your page as graphic objects. (The page is blank, but we'll soon change that.)

  5. Choose Page Properties from the Modify menu. Type "99FFFF" into the Background field, and "000066" into the Text field, and click OK.

Creating the Pages

  1. From the Common tab on the Insert bar, click on the Insert Table icon, and fill in the following parameters: 3 rows, 1 column, and 500 pixels wide. Enter 0 for Border, Cell Padding, and Cell Spacing, then click OK.

  2. From the Align pop-up on the Properties bar, choose Center. Click inside the top row of the table to place the cursor, and then click the Align Center button on the right of the Properties bar. Click to the right of the table you just created, so that there's a blinking cursor along the right side of the table. Insert another centered table, but give this one 1 row and 3 columns. Click inside one of the cells of the 3-column table, and then click the <tr> at the bottom of your document to select the row. Then select the Align Center button on the Properties bar. Finally, add a 1-row, 1-column table centered underneath the last one, click inside it, and click the Align Center button. Open home.txt (it resides in your Source folder) with the TextEdit application, select and copy the text, and paste it into the 3rd cell from the top. Then save the file.

  3. Now we'll quickly create three more pages. In the Title field, enter "Flame." Select the "home" text, delete it, and replace it with text copied from flame.txt. Choose Save As… from the File menu, to create a new page called "flame.html." Repeat these steps to create pages called "bounce.html" and "spin.html," bearing the titles "Bounce" and "Spin" in each Title fields, respectively, and containing the appropriate text from bounce.txt and spin.txt.

Creating the Image Files

  1. Start Fireworks, and open a new document that's 300 pixels wide and 50 pixels high with 300 ppi resolution (the final Web files will have a lower resolution). Choose Custom for Canvas Color, and in the picker, select #99FFFF, to match the Web pages.

  2. Select the Text tool and click the Left alignment button on the Properties bar. From the Fill Color pop-up, choose #000066, and enter 30 in the Size field. I chose Gadget as the font, but of course you can use anything on your system. Click in the document and type "DidYouKnow.Com," then click outside the blue area, and center the title using the arrow keys. Click the Add Effects (+) button on the Properties bar. Choose Drop Shadow from the Shadow and Glow menu, and change the parameters until you like what you see. Press Enter to apply the effect.

  3. Save the file as "title.png," in your Source folder. In the Optimize panel (if it's not visible, just choose Optimize from the Window menu) select "GIF WebSnap 256" from the Settings pop-up, click the Quick Export button in the upper-right-hand corner of your document, and dragging your mouse select Dreamweaver, then Export HTML. From the Save As pop-up in the lower portion of the Export panel, choose Images only, and the filename at the top will change from title.png to title.gif. Save title.gif in the Assets folder in your Site folder. Change the text to "Flame," center the text in the document, and follow the same steps to export the file as flame.gif, stored in your Assets folder. Repeat these steps to create titles for "Bounce" and "Spin." Close title.png, and don't save the changes. (You may notice that a folder called _Notes may have been added to your Assets folder. This is normal, and you can ignore this folder.)

Creating a Rollover Button

  1. Create a new Fireworks file measuring 120 pixels wide by 25 pixels high, with a resolution of 300 pixels per inch. Keep the same Custom color. Using the text tool, keep all the type parameters the same except for the size, which should be 14-point. If you have the font Wingdings, use that and type Shift-Option-y, for a backward-pointing arrow. Then change the font to Gadget (or whatever you're using), type "DidYouKnow," click outside the blue area, and use the arrow keys to center the text in the document.

  2. Click once on the text, choose Symbol from the Modify menu, and choose Convert to Symbol. Name the symbol "Home Button," choose Button for symbol type, and click OK.

  3. Using the solid-black Pointer tool, double click on the "DidYouKnow" text, and click the Over tab. The Over state defines what happens when someone rolls over the object with a mouse. Click the Copy Up Graphic button to copy the button's normal state into the over state. But now let's add a glow. Making sure the text is selected by a rectangle, click the Add Effects button in the Properties bar, and choose Glow from the Shadow and Glow menu. In the Width box enter 1, for a color choose the bright yellow on the left side of the pop-up and slide the Softness control to about 6, or to whatever provides the most pleasing effect. Hit the Enter key to set the effect, click on the Down tab, and click the Copy Over Graphic button to copy the image to the next state. Do the same for the Over While Down state, then click on the Active Area tab. Here, you can change the size of the active area, but the defaults will work fine. Click Done, and save the file as HomeButton.png in your Source folder.

  4. Click on the Quick Export button to export HTML to Dreamweaver, but this time, in the Export dialog, set the Save As pop-up to "HTML and Images." For the HTML pop-up, select Export HTML file, and for the Slices pop-up, choose Export Slices. In the check boxes that follow, only "Include Areas without Slices" should be checked. In the top half of the Export dialog box, navigate to your Assets folder and click Save. You'll see a small message telling you that a command script is running, and several new files will be added to your Assets folder. Close HomeButton.png, and you don't need to save the changes.

Bringing Media Into Dreamweaver

  1. Open index.html with Dreamweaver. Click in the top-most table cell in the Design View window, and then click on the Image icon on the Common tab of the Insert bar (It looks like a tree). Navigate to the title.gif file that you created and stored in the Assets folder, and hit Choose. Save the file, and close it.

  2. Using the same steps, open up flame.html, and insert the flame.gif title. Then click in the leftmost column of the three-column table and insert the file MatchDnB.jpg from your Assets folder. This is the static, "button-clicked" image. Click in the bottom table cell, and then click the small orange Fireworks icon on the Common tab of the Insert bar. In the Insert Fireworks HTML dialog box, click the Browse button, navigate to the HomeButton.htm file you created earlier, and click Open, then OK. Finally, click on the button you just created, and in the Properties bar, in the Link field, replace whatever may be in there with "index.html" (without quotes), hit Return or Enter, and save the file. To preview the page in a browser and test your rollover, hit the F12 key. The home button should brighten when you pass your mouse over it, and when you click it, it should take you back to the main page. Repeat the steps to add titles, "button-clicked" images (BallDnB.jpg and TopDnB.jpg) and home buttons to bounce.html and spin.html; be sure to insert BallDnB.jpg to the center column in bounce.html, and TopDnB.jpg to the right-hand column of spin.html.

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.

Copyright © 2009 O'Reilly Media, Inc.