Transcript Unit A

Integrating
Macromedia MX 2004
INTEGRATING
Macromedia MX 2004 Products
Chapter Lessons
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
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
2
Macromedia MX 2004 Suite
The Macromedia MX 2004 Suite
includes Flash, Dreamweaver, and
Fireworks
You can use all MX 2004 programs
together to create dynamic content
and interactive Web sites
Each product has a similar look and
feel, with common features and
interface elements
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
3
Setting up the Work
Environment
Import Fireworks images into
Dreamweaver
Edit images by launching Fireworks
from within Dreamweaver
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
4
Setting Fireworks as the
Primary External Image
Editor
Open Dreamweaver Preferences
dialog box to set editor for GIF,
JPEG, and PNG files
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
5
Using Design Notes
When you export a Fireworks file to
Dreamweaver, information about the
original source file is saved in a
Design Notes file (MNO)
– Allows Dreamweaver to access the
original PNG source file when editing in
Fireworks
– Best to save exported files in a
Dreamweaver site
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
6
Specifying Launch-and-Edit
Preferences
Three options for dealing with source
PNG files when editing
– Always Use Source PNG
– Never Use Source PNG
– Ask When Launched
Open the Fireworks Preferences
dialog box to choose a setting
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
7
Setting up the Dreamweaver
Site
Name the site in the Site Definition
dialog box
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
8
Setting up the Dreamweaver
Site
Set preferences
Create a root folder
Create a Library
folder for exported
images
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
9
Placing Fireworks Images
into a Dreamweaver
Document
Insert in document: Click insertion
point, then click the Insert Image
command on the Insert menu
Insert in root folder: Export Fireworks
images into a Dreamweaver site
folder (from Fireworks)
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
10
Working with Libraries
Images exported to a Dreamweaver
Library folder are .lbi files
– Choose Library folder as export
destination from Fireworks
The benefit of an .lbi file is that you
can automatically update each
instance of the file used in the Web
site
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
11
Viewing files in the site
.lbi file created
when graphic
exported
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
12
Editing Fireworks Images
from within Dreamweaver
Select the image, then click the
Edit button on the Property
inspector
Fireworks launches and the image
appears in Document window
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
13
Editing Fireworks Images
from within Dreamweaver
Click Done button to return to
Dreamweaver
Indicates
Fireworks
launched from
Dreamweaver
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
14
Optimizing an image in Fireworks
Indicates
image in
library
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
15
Insert and Edit Macromedia
Flash Movies in Dreamweaver
Insert in document; Click insertion
point, then click Insert Media
command from Insert menu
Insert in root folder: copy Flash
movie to the root folder (from Flash)
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
16
Insert and Edit Macromedia
Flash Movies in Dreamweaver
Edit Flash content by selecting
placeholder, and then clicking Edit
button in the Property inspector
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
17
Viewing Information about
the Movie
Select placeholder to view
information in the Property inspector
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
18
Setting an Image to Control
the Movie’s Playback
Name the movie
object in the Property
inspector and select
playback options
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
19
Setting an Image to Control
the Movie’s Playback
Add a Control Shockwave or Flash
behavior to the document object for
the movie & select the desired action
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
20
Setting an Image to Control
the Movie’s Playback
Click event list arrow in behavior list
to select event
Event will trigger the action
– e.g., onMouseOver, onLoad, onClick,
onDblClk, onStart, onMouseMove
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
21
Naming the movie on the
Property inspector
Movie
object
name
Integrating Macromedia MX 2004 Products
Flash
content
file name
Web Collection: Integration Chapter A
22
Chapter A Summary
Macromedia MX 2004 programs
integrate well together
Import Fireworks images into
Dreamweaver and edit them in
Fireworks
– In Dreamweaver, set Fireworks as the
primary external image editor for GIF,
JPEG, and PNG files
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
23
Chapter A Summary
Design Notes file (MNO) created
when Fireworks document exported
to Dreamweaver
– Stores information about original
source file
Set Fireworks preferences for png
files
– Always Use Source PNG
– Never Use Source PNG
– Ask When Launched
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
24
Chapter A Summary
Set up Dreamweaver site using the
Site Definition dialog box
– Name the site
– Set preferences
– Create a root folder
– Create a Library folder
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
25
Chapter A Summary
Insert Fireworks images into
Dreamweaver or export them to a
Dreamweaver site folder
Images exported to a Dreamweaver
Library folder are .lbi files
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
26
Chapter A Summary
Edit a Fireworks image from
Dreamweaver by clicking the Edit
button on the Property inspector
Insert Flash movies (.swf) into a
Dreamweaver document or copy
them to folder
Edit Flash movie by clicking the Edit
button on the Property inspector
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
27
Chapter A Summary
Select an object that will Control the
playback of a Flash movie
Add Control Shockwave or Flash
behavior to object and select action
Select event that will trigger action
Integrating Macromedia MX 2004 Products
Web Collection: Integration Chapter A
28