the web collection, revealed macromedia studio 8 integrating

The Web Collection,Revealed

MACROMEDIA STUDIO 8INTEGRATING

2The Web Collection, Revealed Chapter 1

Set up the work environment

Place Fireworks images into a Dreamweaver document

Edit Fireworks images from a Dreamweaver document

Insert and edit Macromedia Flash movies in Dreamweaver

Chapter Lessons


Introduction

Macromedia Studio 8: suite of integrated Web development products– Dreamweaver, Flash, Fireworks– Products can integrate easily with each

other– Products have common features and

interface elements


Set Up the Work Environment

In this lesson, you will:– Set up the work environment to

facilitate integrating Fireworks images into a Dreamweaver document


Fireworks as the Primary External Image Editor

You can import a Fireworks image into a Dreamweaver document

You can edit a Fireworks graphic by launching Fireworks from within Dreamweaver


Fireworks as the Primary External Image Editor

Fireworks must be set as the primary external image editor for GIF, JPEG, and PNG files in Dreamweaver – Preferences dialog box in

Dreamweaver


Using Design Notes

Design Notes file (MNO)– Contains information about the original

source file (PNG or FLA) that created the exported file

– Allows access to the source file for editing

Save Fireworks source PNG file and exported files in a Dreamweaver site


Using Design Notes

FIGURE 1: Contents of a Design Notes file

Source filename


Specifying Launch and EditPreferences

Use the Fireworks Preferences dialog box

Always Use Source PNG– Automatically launches Fireworks PNG

file

Never Use Source PNG– Automatically launches the exported

Fireworks image



Ask When Launched– Allows you to specify whether or not to

launch the source PNG file



FIGURE 4: Fireworks Preferences dialog box


Setting up theDreamweaver Site

FIGURE 2: Structure of the Web site


Place Fireworks ImagesInto Dreamweaver

In this lesson, you will:– Place two Fireworks images into a

Dreamweaver document


Placing a Fireworks Imageinto Dreamweaver

Ways to place PNG, JPEG, and GIF images created in Fireworks directly into a Dreamweaver document– Use Image command on Insert menu– Export an image from Fireworks into a

Dreamweaver site folder



Exporting an image to Library folder allows you to insert the image as a library item

Export command on File menu in Fireworks

When you export an image file as an image only, one file (.jpg or .gif) is created



When you export an image file to a Dreamweaver Library, two files are created – Image file– .lbi file: contains information on the

source filename and dimensions of the image



FIGURE 9: The Export dialog box specifying the export type as Dreamweaver Library


Edit Fireworks ImagesFrom Dreamweaver

In this lesson, you will:– Edit a Fireworks image from a

Dreamweaver document


Editing a Fireworks Imagefrom Dreamweaver

Select image in the Dreamweaver document

Click Edit Fireworks in Property inspector

Fireworks is launched

Image appears in an edit window



Make your changes

Click Done to return to Dreamweaver document

To make quick export changes– Use Optimize Image in Fireworks

command to display the Optimize dialog box



FIGURE 12: Edit button in the Property inspector

Edit Fireworks

button



FIGURE 13: The Editing from Dreamweaver window

Click Done to return to

Dreamweaver


Insert and Edit Flash Movies In Dreamweaver

In this lesson, you will:– Insert a Macromedia Flash movie into a

Dreamweaver document– Edit a Macromedia Flash movie within

Dreamweaver


Inserting a Flash Movie into Dreamweaver

Use Media command on Insert menu of Dreamweaver– Select Flash as the media to insert

When the movie is inserted, a placeholder appears at the insertion point


Viewing Information Aboutthe Movie

When the placeholder is selected, Property inspector displays information about the movie– Dimensions, filename, etc.


Viewing Information Aboutthe Movie

FIGURE 15: The Property inspector with a movie selected

Movie placeholder


Setting an Image to Controlthe Movie’s Playback

An object, such as an image, can control the actions (play, stop, rewind, or go to a frame) of a Macromedia Flash movie

Name the movie in Dreamweaver Property inspector



FIGURE 16: Naming the movie in the Property inspector

Movie name



Assign Control Shockwave or Flash behavior to the object that will control the movie– Control Shockwave or Flash dialog box

To edit a Flash movie from Dreamweaver– Select the Flash placeholder– Click Edit in Property inspector



FIGURE 21: The completed Control Shockwave or Flash dialog box


Chapter 1 Tasks

Set up the work environment

Place Fireworks images into a Dreamweaver document

Edit Fireworks images from a Dreamweaver document

Insert and edit Macromedia Flash movies in Dreamweaver

the web collection, revealed macromedia studio 8 integrating

Documents