Diving into Studio MX

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.

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

Dreamweaver MX

Flash MX

Fireworks MX

A Web browser with the Flash 6 plug-in installed
(Note: Free trial versions and the Flash plug-in are available from Macromedia.)

Preparing for the Tutorial

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

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

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.

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

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

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.

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).

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.)

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

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.

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.

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.