Creating simple interactive content using Fireworks, Flash, and Dreamweaver

Additional Requirements

or Creative Suite 4 Web Premium (includes Fireworks, Flash, and Dreamweaver)

• Try
• Buy

In this tutorial you'll create a simple promotional web page for the fictitious Double Identity movie website. The page will consist of an interactive SWF header at the top of the page (see Figure 1) with supporting text filling out the layout. Along the way, you'll explore the Adobe CS4 product workflow and learn the fundamentals of creating mockups and interactive content.

The mockup shown in Figure 1 is a focal point for the tutorial. First you'll gather supplied media assets in Adobe Photoshop, Adobe Illustrator, and Adobe Soundbooth. Then you'll create a mockup for the header in Adobe Fireworks and transform it into an interactive movie in Adobe Flash Professional. To wrap things up, you'll produce the final site files in Adobe Dreamweaver, along with a few notes about editing the files.

When you've completed this tutorial, you'll have the knowledge you need to navigate the CS4 workflow to create your own projects. The tutorial takes approximately an hour and a half to complete.

A good way to start any project is to sit down with a blank sheet of paper and start sketching out an idea. Add notes, scribble, cross out things that don't work—overall, get some sense of where you're going. Then, create a list of assets needed to generate the layout you want or to pull motivation from. Do whatever you can to start with a plan.

In this tutorial, the visual assets and content are supplied in an organized collection of source files. This section will help you set up the project structure and understand the assets you'll use to construct your mockup.

Set up the project structure

It's a good idea to start your projects by taking a moment to think about file organization. There are two types of files you'll work with: source files and published files. Source files are the editable master files that you'll use to build and edit the site. Published files are the exported versions of the source files, along with supporting files used by the web page's content. Only the published files are uploaded to a server on the Internet.

Set up the sample files for the tutorial:

1. Download the project file (cs4_project.zip [ZIP, 11 MB]) and unzip the contents to your desktop or another folder on your computer.
2. Open the CS4_Project folder. Notice that the project folder contains a subfolder named _Source. The _Source folder contains the sample files for the tutorial separated by product (see Figure 2). You'll reference these assets while creating your mockup and source files in the steps to come.

   

   Figure 2. CS4_Project root folder and _Source folder containing sample files

The CS4_Project folder acts as the root folder for the project containing all the published files alongside the _Source folder. As you work, you'll save source files to the _Source folder and published files to the CS4_Project folder. When the site is complete, you'll upload all the files in the root folder (except for those in the _Source folder) to a server.

Understanding the sample files

There are three types of media assets supplied with this tutorial: images, audio, and text.

Computer images come in two general formats: vector and bitmap. Vector shapes are generated from mathematical equations that define shapes through lines and points. Vector images are resolution-independent and tend to have smaller file sizes than bitmap images. Bitmap images are composed of a grid of color pixels that collectively represent a picture—the more pixels in the grid, the higher the resolution. Bitmap images tend to have larger file sizes, but do a better job at describing complex photographic content. In terms of the CS4 workflow, you'll look to Photoshop to handle bitmap image manipulation and Illustrator to draw and edit vector content.

Audio generally comes in WAV (Windows) or AIFF (Mac OS) format for uncompressed audio, and MP3 format for compressed audio. In the CS4 workflow, you'll create editable audio source files using the new Soundbooth Sound (ASND) format. Doing so will allow you to make roundtrip edits by starting Soundbooth from the Edit With Soundbooth CS4 option. Once the file is saved in Soundbooth, you can return to Flash and hear the updates without having to import and replace the file.

Take a look at the next section to get the context of the sample files and the tools they were created in.

Quick tour of Photoshop CS4

Photoshop is a powerful image-editing tool with a wide range of applications. In the print industry, Photoshop is commonly used for high-resolution image editing and image production. In the web industry, Photoshop is commonly used for complex image compositing, photo manipulation, and image restoration. In a CS4 project workflow, Photoshop is used to generate the various bitmap image assets. The assets remain editable in Photoshop source files (PSD), but can also be exported to flattened image formats (for example, JPG, PNG) for post-production touch ups in your source files.

Follow these steps to explore the background image in Photoshop:

1. Open the city_background.psd file from the CS4_Project/_Source/Photoshop folder in the sample files.
2. Notice the main elements of the workspace in Figure 3, including the Tools panel on the left, the Options bar above the Canvas, the Color and Adjustment panels, and the Layers panel on the right.
3. Take a close look at the Layers panel. Compositing images with layer effects and blend modes is one of the main strengths of Photoshop when it comes to web page graphics.
4. Try clicking on an icon in the Adjustments panel to see what happens to the image.

For more information about using Photoshop, please see Using Adobe Photoshop CS4 in the documentation.

Quick tour of Illustrator CS4

Illustrator is a high-end vector graphics editing tool most commonly used for creating logos, text layouts, and complex illustrative content. Designing with vector content allows you to use graphics in high-resolution or low-resolution implementations, while keeping them editable. In the project workflow, Illustrator is used to generate the logo, tagline text, and name text for use in the interactive header layout. While vector graphics remain editable when used elsewhere, the Illustrator source files (AI) are preferred for making edits.

Follow these steps to explore the logo image in Illustrator:

1. Open the logo.ai file from the CS4_Project/_Source/Illustrator folder in the sample files you downloaded.
2. Notice the main elements of the workspace in Figure 4, including the Tools panel of the left, the Options bar above the Artboard, the color group and transform group panels, and the Layers panel on the right.
3. The Pen tool for drawing vectors is more of a core utility in Illustrator than in other drawing programs. Take a moment to experiment with drawing points and lines using the Pen tool.

   Tip: As you click to add a point, drag the Pen tool to bend the curve in the Bezier path.

For more information about using Illustrator, please see Using Adobe Illustrator CS4 in the documentation.

Quick tour of Soundbooth CS4

Soundbooth is an audio-editing and creation tool designed to help you easily record and edit audio for use with Flash. Soundbooth records audio in an uncompressed format and exports the audio to a number of compressed file types. New to Soundbooth CS4 is the ability to save snapshots of your work as your make edits using the Soundbooth Sound (ASND) format. Also new in Soundbooth CS4, is the ability to create multitrack ASND files (see Figure 5). In the CS4 project workflow, Soundbooth is used to generate and edit the soundtrack audio in ASND format.

Follow these steps to explore the soundtrack file in Soundbooth:

1. Open the soundtrack.asnd file from the CS4_Project/_Source/Soundbooth folder in the sample files you downloaded.
2. Notice that the screen is split into two sides with the Files, Tasks, and History panels lining the left side and the waveform editing view on the right (see Figure 5).
3. Take a moment to play with the editing controls. Notice the multitrack arrangement in the workspace. Experiment by moving the smaller sound effect to a different time—it's quite easy to change the timing of elements in the file.
4. Click on the Resource Central tab to check out online resources you can use to build sound scores and effects for your projects.

For more information about using Soundbooth, please see Using Adobe Soundbooth CS4 in the documentation.

One last thing to note is that you can manage all your source files and published files in Adobe Bridge, which is installed with Creative Suite 4. Bridge is a file browser and media manager that you can use to search for files and manage files between projects. Of particular interest is the ability to tag content with metadata for more meaningful searches and the ability to synchronize with Adobe Version Cue and Adobe Device Central. For more information on using Bridge, see Using Adobe Bridge and Adobe Version Cue CS4 in the documentation.

That's it for the overview. You'll explore Fireworks, Flash, and Dreamweaver in the following sections.

A mockup is a graphic representation of a web page or web page element used to approve production-ready artwork and deliver it to the next step in the workflow. Fireworks is an excellent tool for creating mockups as it integrates well with Photoshop, Illustrator, Dreamweaver, and Flash. By using Fireworks to lay out the sample files, you'll easily be able to take the mockup into Flash for further production or directly into Dreamweaver for implementation.

This section shows you how to combine assets in Fireworks to create a mockup for your web page header graphic. You'll also learn how to prepare the page for production in Flash.

Quick tour of Fireworks CS4

Fireworks is a graphics editing and web-production tool designed to help you to create web page graphics and website mockups using both vector and bitmap content. Fireworks also contains a range of features that you can use to produce JavaScript-driven web pages or interactive SWF-based content for Adobe Flash Player. In the CS4 project workflow, Fireworks acts as a staging area for generating the web page mockup.

You'll assemble the sample files into a static layout and organize the file structure in the Fireworks source file (PNG) format. The Fireworks PNG format can be imported into Flash to create a layout ready for adding animation and interactivity.

Follow these steps to explore the Fireworks workspace:

1. Open Fireworks and create a new file (File > New).
2. In the New Document dialog box, set the width value to 725 and the height value to 320. Set the Canvas color to black by selecting the Custom option. Click OK.
3. Notice that the main elements of the workspace include the Tools panel, the Canvas area, the Optimize panel, the Layers panel, and the Property inspector panel.
4. Click on the Layers tab (grouped with the Pages panel) to explore the Layers panel.

For detailed information about using Fireworks, please see Using Adobe Fireworks CS4 in the documentation.

Import graphics and set up layers

You'll start the project by creating a well-structured PNG source file. The layer naming and distribution of content will copy over to the Flash source file in the next section. Try to think ahead and build the mockup in a simple way that will naturally translate to the interactive development environment.

In this exercise, the goal is to organize the content into four layers: Background, Cars, Details, and Text. You'll animate the bitmaps in the Cars layer later. Separating them from the Background and Detail layers will make life a little easier in Flash. It's also a good idea to separate the text items in their own layer as you may edit them frequently.

Follow these steps to create layers and import graphics:

1. Save the file you created in the previous steps as promo_header.png in the _Source folder.
2. Double-click Layer 1 in the Layers panel and rename it Background.
3. Import the city_background.psd file from the CS4_Project/_Source/Photoshop folder by choosing File > Import. In the Photoshop File Import Options dialog box, choose Flatten Photoshop Layers To Single Image from the pop-up menu below the Comments text box. Click OK.
4. Position the cursor in the upper-left corner of the background and click to place the image on the canvas. With the image selected, make sure the x and y coordinates are set to 0, 0 (top left of the canvas) in the Property inspector. Double-click Bitmap in the Layers panel and rename the image city (adding specific names to the images helps to ensure that the files are recognizable when exported elsewhere).
5. Create a new layer by clicking the new layer icon at the bottom of the Layers panel (see Figure 6). Name the layer Cars. A layer in Fireworks is represented by a folder in the Layers panel containing any number of bitmap and vector objects. The layers created here will translate to layer folders when imported into the Flash Professional environment.
6. Choose File > Import to import the car_1.psd file from the CS4_Project/_Source/Photoshop folder using the same settings. Place the car in the lower middle of the screen. Select the Scale tool (Q) from the Select section of the Tools panel, and then click on the car to select it. Drag the selection handles to reduce the car's size until it's approximately 250 pixels wide, as shown in the Property inspector. Rename the Bitmap label car-left. Notice that Fireworks imports the object within the layer folder of the selected layer (in this case, the Cars layer).
7. Duplicate the car image by copying and pasting it on the canvas. Drag the copy to the right side of the canvas and then flip it horizontally by choosing Modify > Transform > Flip Horizontal. Position the image about an inch to the right of the original car. Rename the layer tcar-right.
8. Import the car_2.psd file from the CS4_Project/_Source/Photoshop folder and size it in relation to the first car. Place the new image between the two images on the canvas. Rename the Bitmap layer car-middle.
9. Create a new layer above the Cars layer and name it Text. You'll add the artwork from the three Illustrator files here.
10. Import the logo.ai file from the CS4_Project/_Source/Illustrator folder by choosing File > Import. Use the default options in the Vector File Options dialog box. Click OK.
11. Place the cursor in the upper-left part of the background and click to place the image on the canvas. With the Scale tool, select the logo image and scale it to approximately 250 pixels wide. Rename the layer logo.
12. Import the tagline.ai file from the CS4_Project/_Source/Illustrator folder and place it above the cars in the middle of the screen. With the tagline text still selected, click the color fill swatch in the Tools panel to choose a lighter color. Select white from the palette or roll over an image on the canvas to sample a color from the photograph. Rename the layer tagline.
13. Import the names.ai file from the CS4_Project/_Source/Illustrator folder and place the names text to the right of the tagline text. Fill the text with a lighter color and rename the layer names mark and wendy.
14. Create a new layer named Details and drag the layer between the Text layer and the Cars layer.
15. Import the mark_sousa.psd and wendy_carter.psd files from the the CS4_Project/_Source/Photoshop folder and rename the layers wendy-image and mark-image. Figure 7 shows the completed mockup.
16. Save the file.

Add artwork to finish the mockup

The mockup is basically complete, but creating a few additional design elements using the drawing tools in Fireworks will add the finishing touches. Using the Rectangle tool, you'll draw outlines around the profile images and add a transparent gradient to the background to punch out the text and images.

Follow these steps to finish the graphic layout:

1. Continuing to work in the Details layer, select the Rectangle tool and set the fill color to no color (the swatch icon with a red slash through it) and the outline color to white or a light gray. Drag a rectangle around each profile image to add a border. Notice that the rectangle snaps to the edges of the bitmap image. You may also manually size the rectangle using the Scale tool or the width and height text boxes in the Property inspector.
2. Select the Pointer tool and then click the gray area of the canvas to deselect all objects. In the Tools panel, select the Rectangle tool and change the fill swatch color to black and the outline swatch color to no color. Draw a rectangle approximately 60 pixels tall spanning the width of the canvas underneath the light-colored text. Click the Opacity slider in the Property inspector (above the Filters option) to turn down the transparency of the shape to 50%. Position the rectangle so that it makes the text easier to read (see Figure 8).
3. Save the file.

Prepare the PNG file for Flash

One of the strengths of Fireworks is its ability to export content ready for use in Flash, Dreamweaver, or direct deployment. In this case, you'll use the PNG file itself as a way to transfer the mockup structure into a Flash source file. Before completing this section, you'll simplify the file by rasterizing the vector logo into a single bitmap object. Complex vector graphics are lightweight, but they slow down rendering performance in Flash Player. If a complex vector doesn't need to remain editable, it's a good practice to convert the shapes to a bitmap.

Follow these steps to prepare the PNG file for further production in Flash:

1. Select the Pointer tool and click to select the logo on the canvas.
2. Choose Modify > Flatten Selection to convert the vector image to a bitmap image.
3. Save the file. That's it—you completed your first mockup in Fireworks!
4. You can close Fireworks if you like and open it again later if you need to make further edits to the PNG file.

While exploring the topic of mockups, check out this article: Mocking up text with the Lorem Ipsum placeholder text generator.

Sound and animation add interest to any web page layout and are used commonly in header graphics and supporting page elements. File support for importing Fireworks PNG files and improvements to the Flash CS4 animation workflow make building animated layouts easier than ever. In addition, improvements to the Soundbooth CS4 workflow make working with audio in Flash flexible and more intuitive.

This section shows you how to add sound, animation, and interactivity to the Firework's header graphic mockup.

Quick tour of Flash CS4 Professional

Flash is a tool used to create content for Flash Player using a visual development environment. Flash is used by designers and developers to create web banners, web page elements, entire web pages, and even entire web applications. In this CS4 project workflow, you'll use Flash to transform the Fireworks mockup into an interactive header graphic containing buttons, sound, and animation. You'll create an editable source file (FLA) and publish the SWF for use in Dreamweaver in the next section.

Follow these steps to explore the Flash workspace:

1. Open Flash.
2. Create a new file by choosing File > New. In the New Document dialog box, select Flash File (ActionScript 3.0). Click OK.
3. Notice that the main elements of the workspace include the Stage, the Timeline panel, the Properties panel, the Library panel, and the Tools panel (see Figure 9).
4. Click the Library tab to explore the Library panel. The library is used to store reusable assets in the form of symbols and media objects.

For detailed information about using Flash, please see Using Adobe Flash CS4 Professional in the documentation.

Create a FLA file and configure its Publish Settings

Whenever you create an FLA file, you'll adjust the Publish Settings properties related to the file. Publish Settings control which file types are exported and options for the SWF file. In this case, you'll turn off the default behavior of publishing an HTML file and change the location to which the published SWF is exported.

Follow these steps to a new file:

1. Save the FLA file you created in the previous steps as promo_header.fla in the CS4_Project/_Source folder.
2. Update the Stage size and color by choosing Modify > Document. In the Document Properties dialog box, set the width value to 725 and the height value to 320 so that your Fireworks mockup aligns to the Stage correctly when imported. Change the background color to black by clicking the Background color swatch. Click OK.
3. Update the publishing settings properties by choosing File > Publish Settings to open the Publish Settings dialog box (see Figure 10). Deselect the HTML check box on the Formats tab. You'll create your HTML page in Dreamweaver, so there's no need to export the default HTML template. Change the location the SWF file publishes to by clicking the folder icon next to the Flash File text box. In the Select Destination Folder dialog box, navigate to the CS4_Project folder (one folder up). Click Save.
4. Take a moment to explore the other options under the Flash tab and then click OK.
5. Save the file.

Tip: Flash Player 9 and later support the new and improved ActionScript 3.0 format. Choose the ActionScript 3.0 format unless you're targeting an audience using Flash Player versions earlier than Flash Player 9.

Import the Fireworks mockup into a movie clip symbol

Working with layers in a FLA file is similar to working with layers in other programs, except in this case the layers are part of the Timeline panel instead of a separate Layers panel. Layers in a FLA file enable you to control the layout of content as you work across the frames of a timeline.

Flash uses timelines as containers to organize content. Most often you'll work along the main Timeline, seen when you open any FLA file, or in the timeline of a symbol in the library. Symbols are reusable objects each with their own separate timeline, editing area, and set of layers. You'll create symbols to group content, create animations, and create buttons among other things.

The structure needed for the FLA file is already created inside the Fireworks PNG file. When you import the PNG into Flash, you have the option of importing the Fireworks content to the main Timeline or placing the content inside of a movie clip symbol timeline. While working along the main Timeline is acceptable, working in a movie clip timeline is often a more flexible way to go. By importing the Fireworks mockup into a movie clip, the layer structure will be preserved and you can immediately begin to work where you left off.

Follow these steps to import the Fireworks mockup and organize the FLA file:

1. Rename Layer 1 on the main Timeline to Assets by double-clicking on the layer name in the Timeline panel.
2. Import the promo_header.png file from the CS4_Project/_Source folder by choosing File > Import > Import To Stage. In the Import Fireworks Document dialog box, choose Current Frame As Movie Clip from the Into pop-up menu. Set the Objects selection to Import As Bitmaps to Maintain Appearance. Set the Text option to Keep All Text Editable. Click OK.
3. Notice that a black dot (called a keyframe) appears on frame 1 of the Timeline to indicate that the graphics appear on that layer on that frame. Because you imported the PNG file as a movie clip, the prebuilt layer structure is located inside of the movie clip's timeline. You're looking at the outside of the movie clip instance on frame 1. Double-click the graphics on the Stage to enter the movie clip's timeline. Notice that the Timeline view has changed and the Edit bar above the Timeline shows that you've left the editing mode for Scene 1 (the main Timeline) and are now editing the Page 1 symbol's timeline. You can return to the main Timeline by clicking on the Scene 1 link in the Edit bar. You'll navigate timelines by generally clicking through instances on the Stage or by double-clicking the symbol in the Library panel.
4. Take a look at the assets placed in the Library panel. Open the Fireworks Objects folder and subfolders until you see the imported assets (see Figure 11).
5. Save the file.

Note: Your layer structure may look different if you configured the layers differently in Fireworks. You can drag the layers and layer folders within the Flash timeline to position the content as desired.

Build animations along the movie clip timeline

Flash CS4 Professional uses an improved animation workflow to easily move and transform objects over time. The most common form of animation is called motion tweening. This involves defining the characteristics of an object at the start point of the animation and the end point of the animation. Flash Player does the rest of the work and builds the animation between.

In this exercise you'll animate the cars pulling up from the distance. To do this you'll first need to convert each of the car graphics to a movie clip symbol.

Follow these steps to create symbols and build motion tweens for each of the car graphics:

1. Enter the Page 1 symbol's timeline if you're not already there by double-clicking the instance on the main Timeline or by double-clicking the Page 1 symbol in the library.
2. Extend all layers to frame 35 by clicking in frame 35 of the top layer and dragging downward to select the frame across all layers. Right-click/Ctrl-click in the selection and choose Insert Frame (F5). Extending the timeline before you start adding animations ensures that all layers will have the same number of frames and, therefore, the graphics will be viewable across all frames in the animation.
3. Hide all the layers at once by clicking the eyeball icon above the layers stack. Notice that Xs appear and the graphics disappear from the Stage.
4. Deselect the X in the city layer and the car-middle layer to show the graphics on those layers. Lock the city layer by clicking the lock icon.

   Tip: It's easy to select more than just the graphics that you're trying to select. Using the lock and hide features for each layer is a good way to avoid problems.

5. Click the Selection tool in the Tools panel (the black arrow) and then click the middle car graphic to select it. Choose Modify > Convert To Symbol (F8) to convert the object to a symbol. In the Convert To Symbol dialog box, assign the symbol the name Car-Middle with the Type set to Movie Clip and the Registration point set to the top left or center. The registration point affects the orientation of an object as it's tweening along a path. The top left and center options are the most common settings. Click OK. Notice that the symbol appears in the Library panel.
6. Now you're ready to create the tween. Right-click/Ctrl-click the keyframe (black dot) on frame 1 of the car-middle layer and choose Create Motion Tween.
7. Move the playhead to frame 35 by clicking on the Timeline at frame 35 or by dragging the red current frame indicator to the end of the Timeline.
8. Click the Free Transform (Q) tool (the third tool from the top of the Tools panel) and then click the car graphic to select it. Scale the image to about 50%.
9. While the car is still selected, move it up and to the right slightly so it will look more realistically like its moving and not merely expanding.
10. Scrub the Timeline to preview the tween by dragging the current frame indicator from side to side. You can return to frame 1 or frame 35 to edit the location and properties of each keyframe in the animation.
11. Reverse the tween by right-clicking/Ctrl-clicking the first keyframe in the tween and choosing Reverse Keyframes. At this point, you should have a fairly realistic looking tween in place with the cars animating into the foreground.
12. Repeat steps 4–10 to animate the car on the left. Start by showing the car-left layer. Select the image and convert it to a symbol. When you've completed the second animation, repeat the process for the car on the right. Try to move the starting keyframes for the left and right cars so that they appear after frame 1. You can do this by rolling over the keyframe until you see the double-arrow cursor. Once you see the cursor, you can click on the keyframe and drag it to a different spot on the Timeline. See Figure 12 to see the Timeline with motion tween animations for each of the three cars.
13. To export the SWF and preview the movie, choose Control > Test Movie.

    Notice that the SWF appears on top of the FLA file allowing you to preview the movie. Also notice that the animation loops endlessly. This is because timelines loop unless explicitly told to stop using a simple stop action in ActionScript.

    Tip: Hidden layers are not exported with the SWF file by default. Show all your layers in the FLA file so that you can see all the graphics when exporting the SWF.

14. To add a stop action to the Timeline, first add a new layer at the top of the layer stack by selecting the Text folder and then choosing Insert > Timeline > New Layer. Rename the layer Actions.
15. All items added to a timeline must be added to a keyframe on a layer. Considering that the stop action will logically need to occur on the last frame, you'll need to click on the frame 35 of the Actions layer and add a keyframe by pressing F6. You can place the keyframe containing the action on any layer, but its best practice to use a layer devoted to ActionScript placed at the top of the layer stack.
16. With the new keyframe selected, open the Actions panel (F9) and type in the following ActionScript command into the text editor:

17. Run the Test Movie command again to see the animation play once.
18. Save the file.

Tip: You can further modify and refine your animations by using the Motion Editor panel while a tweened object is selected.

For more tutorials about creating motion tweens, please see this presentation: Creating motion tweens: Part 1.

Create buttons for user interactivity

One of the easiest ways to create user interactivity is to add buttons to a page. You can use prebuilt buttons from the Buttons Common Library or create custom buttons using a button symbol. To configure a button so that it does something, you'll first name the button instance and then add a bit of simple ActionScript to catch the button's click event. In the following steps you'll add three buttons to the header movie.

Follow these steps to use the Buttons Common Library to add a restart button to the animation:

1. A quick and easy way to add playback buttons to a movie is to use the Buttons Common Library. Open the Buttons Common Library by choosing Window > Common Libraries > Buttons.
2. Return to the Page 1 symbol's timeline by double-clicking the instance on the main Timeline or by double-clicking the symbol in the library.
3. Create a new layer named Buttons and place it below the Actions layer.
4. With the Buttons layer selected in the Timeline, choose the Play button from the classic buttons > Circle Buttons folder in the Buttons Common Library and drag it to the Stage. Notice that the button symbol is copied to your FLA file's library.
5. Select the button instance on the Stage and position it in the lower-left corner. With the instance still selected, enter the name play_btn in the <Instance Name> text box in the Property inspector. You'll use this name to reference the button in ActionScript.
6. Add the code related to the button on frame 1 of the Actions layer. Select the blank keyframe on frame 1 of the Actions layer and open the Actions panel. Type the following code:

7. Choose Control > Test Movie command again to see the animation play once. Click on the play button to watch the animation play again.
8. Save the file.

Follow these steps to create custom buttons from the actor's name text:

1. Creating your own custom buttons follows the same process except that you start by converting a graphic to a Button symbol. Select the Mark Sousa text on the Stage and convert it to a symbol by pressing F8. In the Convert to Symbol dialog box, change the Name text box to MarkBtn and select Button from the Type menu. Click OK.
2. At this point, you have a button that you can work with. While the button is still selected, name the instance mark_btn in the Property inspector.
3. Double-click the button instance to enter its timeline editing mode. Notice that the Timeline appears different in a Button symbol where the first four frames represent button states: Up, Over, Down, and Hit (see Figure 13).

4. Click the Over frame in the default layer and add a keyframe by pressing F6. Flash duplicates the graphic on the Up frame. Select the text in the Over frame and ungroup it by repeatedly pressing Ctrl+B/Cmd+B until you see the ungrouped vector graphics. While the text is still selected, change the color as desired. Changing the color of the Over frame creates the visual rollover state for the button.
5. Add a keyframe to the Hit frame. With the keyframe on the Hit frame selected, use the Rectangle tool to draw a rectangle surrounding the text. The contents of the Hit frame are invisible outside of the symbols editing area, but can be used to define the active area of the button. By surrounding the text with a rectangle, the button will activate evenly when a user rolls over it.
6. Return to the Page 1 timeline by selecting the Page 1 link in the Edit bar above the Stage or by double-clicking the Page 1 symbol in the library.
7. Add the code related to the button on frame 1 of the Actions layer. Select the blank keyframe on frame 1 of the Actions layer and open the Actions panel. Type the following code:

8. Choose Control > Test Movie. Click the Mark Sousa button to see the link open a website in a new browser window. The ActionScript code from the last step assigns the markClickHandler event handler function as a listener to the click event of the mark_btn button instance. When the event handler function is triggered by the event, the navigateToURL command triggers the browser to load a new web page.
9. Save the file.

For more information on working with buttons symbols, see Working with button symbols in the Using Flash CS4 Professional documentation.

Add a soundtrack

Flash Player can play sounds either embedded in the SWF file or external to the SWF file. When using external audio, you'll work with the MP3 format. When using embedded audio, you have more options in supported formats with one of the most notable being the ASND format.

Using the ASND format enables you to roundtrip edit audio files embedded in the FLA file using Soundbooth CS4. The end result is that you can easily experiment with your source audio and check the revision history through the saved snapshot feature in Soundbooth CS4.

Follow these steps to add a sound to the timeline and edit the sound so it properly syncs to the animation:

1. Create a new layer above the Buttons layer and name it Soundtrack.
2. Import the soundtrack.asnd file from the CS4_Project__Source/Soundbooth folder in the sample files by choosing File > Import > Import To Library. Notice that the sound file appears in the library but not on the Timeline.
3. Select the keyframe on frame 1 of the Soundtrack layer and choose the sound from the Name menu in the Sound section of the Property inspector. Set the Sync option to Stream. Streaming sound plays as the file downloads and is synchronous with the corresponding frames in the timeline.
4. Extend the timeline across all layers to frame 400 by selecting frame 400 in each layer and pressing F5.
5. Move the stop action on frame 35 to frame 400 so that the Timeline allows the audio track to play to the end. You can move the keyframe containing the action by clicking on it to select it and then dragging it to move it further down the timeline.
6. The audio file is a little long for the 400 frame timeline. To crop the file, right-click the sound file in the library and choose Edit With Soundbooth CS4. The file opens in Soundbooth.
7. In Soundbooth, notice that the audio tracks appears on the right of the workspace. Both the left and right side of each track includes fade and crop handles to allow you to easily tweak the ends of the sounds. Roll over the right side of the larger audio track until you see the cursor change to a bracket-arrow icon. Click the icon and drag it toward to center to crop the end of the file. Use the time markers at the top of the editing area to determine when you've reached about 17 seconds.
8. Save the ASND file to return to Flash.
9. The updates to the ASND file are automatically available when you return to the FLA file. Run the Test Movie command to test the updated audio. Notice that the skid sound appears a little late in the mix and may be a little long. Return to the FLA file and start the editing mode for the sound file again—or return directly to Soundbooth if it's still open.
10. In Soundbooth, roll over the left side of the smaller sound and crop the beginning of the sound to isolate the car skid audio. Drag the file to move it all the way to the left. This position in time will cause the skid sound to occur immediately, which is close to the timing of the animation.
11. Save the ASND file and return to Flash to test the update. Repeat this process until you're happy with the sound synchronization (see Figure 14).
12. Once you're satisfied with your edits, return to Soundbooth and save a snapshot of the file by clicking the Snapshots icon in the lower right of the History panel and choosing New Snapshot. Enter a name for the snapshot in the dialog box that appears and then save the ASND file. You can close Soundbooth if you're finished with your edits.

Publish the SWF file

The last thing you'll want to do before moving to Dreamweaver is to publish the last updates to the SWF file. To go through the formal process of publishing, choose File > Publish. The Publish command exports the SWF file similar to the Test Movie command—except that the Publish feature, by default, also exports an HTML file along with a handful of other optional export file types. Earlier in the tutorial, you turned off the HTML option so you don't necessarily have any additional steps to perform here.

For a full description of publish settings parameters, please see Publish settings in the Using Flash CS4 Professional documentation.

All roads lead to Dreamweaver in the project workflow. Dreamweaver allows you edit individual files and visualize collections of files that make up entire websites. You'll use it to build web pages by combining content with layout techniques and editing through code-preview and live-preview (WYSIWYG).

This page shows you how to setup a site in Dreamweaver and build a simple web page. You'll also learn how to preview your work and upload the site to a server.

Quick tour of Dreamweaver CS4

Dreamweaver is a development environment for creating websites using HTML and other web scripting technologies. In its simplest sense, Dreamweaver is a text editor, but the range of site management features and supported scripting and markup technologies make it a powerful tool anchoring the website production process. In a CS4 project workflow, Dreamweaver is the final stop in the production line before uploading the finished site to the server. You'll work with a prebuilt Dreamweaver template (DWT) and cascading style sheets (CSS) to create and preview a simple web page layout.

Follow these steps to explore the Dreamweaver workspace:

1. Open Dreamweaver and create a new HTML file (choose File > New, and then select Blank Page and HTML in the New Document dialog box).
2. Notice the main elements of the workspace include the Document window (which displays content in either Code, Split, or Design views), the Property inspector, Insert panel, CSS Styles panel, and Files panel (see Figure 15).

For more details about how to use Dreamweaver, please see Using Adobe Dreamweaver CS4 in the documentation.

Create a new site in Dreamweaver

One of the most important aspects of working with Dreamweaver is defining a site before creating files and file structures. Dreamweaver will help you build the site, but it needs to know where the root folder of the site is located, at the very least. When defining a site, you can set up FTP options and other details that will help you to produce the site and easily maintain it during routine updates.

Follow these steps to create a site for your project:

1. Move the Templates folder from the CS4_Project/_Source/Dreamweaver folder to the CS4_Project folder. The CS4_Project folder, as you'll recall, is the root folder of the site where all your published files are stored. Moving the Templates folder into the root folder of the project gives Dreamweaver immediate access to the predefined template included with the supplied assets.
2. Choose Site > New Site in Dreamweaver to open the Site Definition dialog box. Click the Advanced tab if its not already selected (see Figure 16).
3. Enter CS4 Project in the Site name text box and browse to the CS4_Project folder. Click OK.

4. Notice that the site's contents and directories are listed in the Files panel.

Create a new page using a Dreamweaver template

You can create new web pages from scratch or from prebuilt Dreamweaver templates. Dreamweaver templates contain predefined layouts with editable regions. They are most often used to help speed the production process along and to provide structure for consistency across pages. The tutorial supplied assets include a custom-built template containing a simple vertical column of content cells centered on the page.

Follow these steps to create the web page and fill it with content:

1. Close the HTML file created in the previous steps if you haven't already done so.
2. Choose File > New. In the New Document dialog box, select the Page From Template option on the left. The promo_page template should be selected by default if you don't have any other templates installed. Make sure the correct template is selected and click Create.
3. Save the file as promo_page.html in the CS4_Project folder.
4. Select the placeholder text in the headerContent cell at the top of the page and delete it.
5. With your cursor still in the headerContent cell, choose Insert > Media > SWF. Select the promo_header.swf file (in the CS4_Project/_Source folder) in the Select File dialog box to insert the header movie. Click OK (Choose in Mac OS).
6. In the Object Tag Accessibility Attributes dialog box that appears after selecting the file, enter Double Identity Movie in the Title text box. This step provides the browser with basic accessibility information about content. In more complex layouts with HTML forms and buttons, using the Access Key text box and Tab Index text box can improve the overall user experience and help open up the page to audiences with special needs. You can leave the Access Key and Tab Index text boxes blank for this sample. Click OK.
7. Select the placeholder text in the titleContent cell and delete it.
8. Open the body.txt file from the CS4_Project/_Source/Dreamweaver folder. Copy the title and paste it into the titleContent cell.
9. Select the placeholder text in the bodyContent cell and delete it.
10. Copy the remaining text from the body.txt file and paste it into the bodyContent cell.
11. Select the placeholder text in the footerContent cell and delete it.
12. Open the copyright.txt file from the CS4_Project/_Source/Dreamweaver folder, copy the text, and paste it into the footerContent cell. Notice that the text automatically becomes formatted based on the CSS settings applied to the cells in the Dreamweaver template.
13. Enter Double Identity in the Document Title text box at the top of the Dreamweaver window for good measure.
14. Save the file. Click OK when the Copy Dependent Files dialog box prompts you.

Note: Step 12 creates a folder named Scripts in the project's root folder and adds copies of the SWFObject files necessary to embed the SWF file on the web page. This all happens behind the scenes. You just need to know that these files are part of your site's set of published files and should be uploaded to your website.

Change the CSS formatting

Common practice in modern web page design is to use CSS definitions to control the layout of content cells, text formatting, and content formatting. The supplied template in the previous steps uses CSS to create the cell structure. You can edit the CSS definitions in the Dreamweaver template file to update all pages which use the template.

Follow these steps to edit the CSS formatting associated with the title text, body text, and copyright text:

1. Use the Files panel to open the promo_page.dwt file from the Templates folder.
2. To edit the style definitions for the page title, start by expanding the CSS Styles panel if it's not already expanded. Place the cursor in the editable region for the title text and select the Current button at the top of the CSS Styles panel.
3. Edit the predefined properties to experiment with changes to the page formatting or add new properties to see what happens. For example, change the color value. Notice that when you do, the color of the top three cells change while the bottom cell's color does not. This is because the style you're editing is redefining the div tag in HTML. Each cell in the template exists in a div tag and, therefore, shares the changes to the style definition. The footerContent cell is slightly different as it applies a custom CSS class directly to the last div tag. Doing so overrides the more global definition for the div tag itself. Switch to the code view in the Dreamweaver workspace to see the CSS and div tag structure.
4. Save the template file and click Update in the Update Template Files dialog box.

Tip: Dreamweaver templates are a handy way of managing formatting across pages in your site. However, if you find that you need to release the page from the template definition, you can choose Modify > Templates > Remove Template Markup.

For more information on working with CSS, see Best practices with CSS in Dreamweaver CS4.

Preview the page

One of the great features of Dreamweaver is its ability to preview a site in several different ways. Within the Dreamweaver workspace, you can toggle between the Code and Design views, or choose Split to see both. To change views, click one of the view buttons (Code, Split, or Design) at the top of the Document window. New to Dreamweaver CS4 is the ability to view live code including JavaScript directly in the workspace. And of course you can easily open the current page in a browser by pressing the F12 key.

Tip: Switching to Code view while visually building web pages is a great way to learn HTML markup and JavaScript.

Upload the files to your server

You've made it to the point where you're ready to post the site to a server on the Internet. You can use any file transfer protocol (FTP) tool to transfer your published files to your server, but it's important to note that the Files panel in Dreamweaver has FTP capability built into it. Using the FTP feature in Dreamweaver can be advantageous when synching files with the server during edits in the workflow. You can also use Dreamweaver to files in and out from the server for version control in a workgroup.

Follow these steps to complete the workflow by uploading the finished site:

1. Make sure you have a remote site entered into your CS4 Project site definition. You can edit the site definition by choosing Site > Manage Sites. In the Manage Sites dialog box select the CS4 Project and click Edit.
2. In the Site Definition dialog box, click the Remote Info option in the Category list and then choose FTP in the Access menu. Fill in the FTP host, Login, and Password text boxes with login information for your remote server. If you don't already have this information available, you can obtain it from your Internet service provider or network administrator. After you've entered the login information, click Test to test the connection. Click OK.

   Note: If you don't have access to a remote server you can simply follow the concepts introduced here and skip forward to the next section.

3. Open the Files panel and click the Connect To Remote Host button in the top left of the panel.
4. After a connection is established, select the files in the local view that you want to upload (everything except the _Source folder). Press the Put button (up arrow) to upload the files to the server. You should be able to switch to the remote view by switching the menu from Local View to Remote View in the top right of the Files panel.Use the Files panel to manage your local files while working in Dreamweaver even if you choose to handle your file uploads through a different route.

Your site is now complete, but it's realistic to think that you'll need to edit and update the web page in the future. This section provides an overview of the editing workflow for a completed site.

Changing image content

The CS4 product interfaces don't support roundtrip graphic editing directly, but it's easy enough to update your images. At this point, the key is to work with individual graphics. If you're updating a graphic in the Fireworks mockup, simply delete the old graphic and then import a new graphic to replace it. You may find it useful to make a note of the size and location of the original graphic before you delete it. If you're updating your FLA file you can update the bitmap images through their Library properties. This is a handy feature as your FLA file's structure will quite often be more complex than your mockup.

Follow these steps to change the background image in the header SWF:

1. Open the city_background.psd file in Photoshop and edit the background image as desired.
2. Export the updated image from Photoshop as a JPG by choosing File > Save For The Web. Save the file as city_background.jpg in the CS4_Project/_Source/Photoshop folder.
3. Open the promo_header.fla file in Flash.
4. Double-click Bitmap 1 in the library to open the Bitmap Properties dialog box (see Figure 17). Click Update and navigate to the saved JPEG file. The Bitmap 1 image updates itself with the content of the updated JPEG.

5. Save the file and publish the SWF so it's available to upload to the site.
6. For good measure, go ahead and update the Fireworks mockup with the updated JPEG image as well.

You can make the call as to whether the image updates should occur in the Fireworks file or directly in the FLA file. In general, it's good to consistently update the mockup, but the mockup can be retired from the workflow after the FLA source file is complete.

Changing sound content

The ASND file format makes roundtrip editing of a sound embedded in a Flash file simple. The ASND format saves the original source file along with a history of edits. By saving a source file in ASND format you can always return to the original source to add and remove edits as needed.

Follow these steps to change the sound content in the header SWF:

1. Right-click/Ctrl-click the sound file in the library and choose Edit With Soundbooth CS4. Soundbooth starts with the ASND file in the view.
2. Remove previous edits using the History panel (see Figure 18) or add changes as desired.
3. Save the ASND file.
4. Return to the FLA file and publish the SWF to update the published file with changes.
5. Save the FLA file.

Changing web page text and formatting

Dreamweaver makes editing text and CSS formatting easy. It's common during the initial development to experiment with different combinations of text and formatting. Editing the site after it has been completed follows the same workflow as described in the Change the CSS formatting workflow in the previous section.

Uploading the updated files to your server

One thing to keep in mind is that you'll need to upload updated files any time you make local changes to a site that has already been launched on the Internet. You will continue to use an FTP tool or the Dreamweaver Site panel to upload and sync local and remote files. Often it's a good idea to stage the updated files in a nonpublic web directory for testing. This way you can catch any issues that may appear when the site is running from a web server.

Where to go from here

You've just learned how to use a range of Adobe CS4 products to create a workflow for website production. You've worked through the process of preparing the project, defining the main elements in a mockup, building an interactive movie, and finishing the web page for deployment. As next steps, think about how you might create layout templates in the CS4 products or define other consistent approaches that might add to the workflow.

Also, check out these resources:

Photoshop

• Photoshop Developer Center
• Photoshop Help and Support
• Learn Photoshop CS4 (Adobe TV)

Illustrator

• Illustrator Developer Center
• Illustrator Help and Support
• Learn Illustrator CS4 (Adobe TV)

Soundbooth

• Soundbooth Developer Center
• Soundbooth Help and Support
• Learn Soundbooth CS4 (Adobe TV)

Fireworks

• Fireworks Developer Center
• Fireworks Help and Support
• Learn Fireworks CS4 (Adobe TV)

Flash

• Flash Developer Center
• Flash Help and Support
• Learn Flash Professional CS4 (Adobe TV)

Dreamweaver

• Dreamweaver Developer Center
• Dreamweaver Help and Support
• Learn Dreamweaver CS4 (Adobe TV)