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

3The Web Collection, Revealed Chapter 1

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

4The Web Collection, Revealed Chapter 1

Set Up the Work Environment

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

facilitate integrating Fireworks images into a Dreamweaver document

5The Web Collection, Revealed Chapter 1

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

6The Web Collection, Revealed Chapter 1

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

7The Web Collection, Revealed Chapter 1

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

8The Web Collection, Revealed Chapter 1

Using Design Notes

FIGURE 1: Contents of a Design Notes file

Source filename

9The Web Collection, Revealed Chapter 1

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

10The Web Collection, Revealed Chapter 1

Specifying Launch and EditPreferences

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

launch the source PNG file

11The Web Collection, Revealed Chapter 1

Specifying Launch and EditPreferences

FIGURE 4: Fireworks Preferences dialog box

12The Web Collection, Revealed Chapter 1

Setting up theDreamweaver Site

FIGURE 2: Structure of the Web site

13The Web Collection, Revealed Chapter 1

Place Fireworks ImagesInto Dreamweaver

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

Dreamweaver document

14The Web Collection, Revealed Chapter 1

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

15The Web Collection, Revealed Chapter 1

Placing a Fireworks Imageinto Dreamweaver

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

16The Web Collection, Revealed Chapter 1

Placing a Fireworks Imageinto Dreamweaver

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

17The Web Collection, Revealed Chapter 1

Placing a Fireworks Imageinto Dreamweaver

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

18The Web Collection, Revealed Chapter 1

Edit Fireworks ImagesFrom Dreamweaver

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

Dreamweaver document

19The Web Collection, Revealed Chapter 1

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

20The Web Collection, Revealed Chapter 1

Editing a Fireworks Imagefrom Dreamweaver

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

21The Web Collection, Revealed Chapter 1

Editing a Fireworks Imagefrom Dreamweaver

FIGURE 12: Edit button in the Property inspector

Edit Fireworks

button

22The Web Collection, Revealed Chapter 1

Editing a Fireworks Imagefrom Dreamweaver

FIGURE 13: The Editing from Dreamweaver window

Click Done to return to

Dreamweaver

23The Web Collection, Revealed Chapter 1

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

24The Web Collection, Revealed Chapter 1

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

25The Web Collection, Revealed Chapter 1

Viewing Information Aboutthe Movie

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

26The Web Collection, Revealed Chapter 1

Viewing Information Aboutthe Movie

FIGURE 15: The Property inspector with a movie selected

Movie placeholder

27The Web Collection, Revealed Chapter 1

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

28The Web Collection, Revealed Chapter 1

Setting an Image to Controlthe Movie’s Playback

FIGURE 16: Naming the movie in the Property inspector

Movie name

29The Web Collection, Revealed Chapter 1

Setting an Image to Controlthe Movie’s Playback

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

30The Web Collection, Revealed Chapter 1

Setting an Image to Controlthe Movie’s Playback

FIGURE 21: The completed Control Shockwave or Flash dialog box

31The Web Collection, Revealed Chapter 1

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