Transcript The Web Collection, Revealed

The Web Collection,
Revealed
INTEGRATING
MACROMEDIA STUDIO 8
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
The Web Collection, Revealed
Chapter 1
2
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
The Web Collection, Revealed
Chapter 1
3
Set Up the Work
Environment
In this lesson, you will:
– Set up the work environment to
facilitate integrating Fireworks images
into a Dreamweaver document
The Web Collection, Revealed
Chapter 1
4
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
The Web Collection, Revealed
Chapter 1
5
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
The Web Collection, Revealed
Chapter 1
6
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
The Web Collection, Revealed
Chapter 1
7
Using Design Notes
Source
filename
FIGURE 1:
The Web Collection, Revealed
Contents of a Design Notes file
Chapter 1
8
Specifying Launch and Edit
Preferences
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
The Web Collection, Revealed
Chapter 1
9
Specifying Launch and Edit
Preferences
Ask When Launched
– Allows you to specify whether or not to
launch the source PNG file
The Web Collection, Revealed
Chapter 1
10
Specifying Launch and Edit
Preferences
FIGURE 4:
The Web Collection, Revealed
Fireworks Preferences dialog box
Chapter 1
11
Setting up the
Dreamweaver Site
FIGURE 2:
The Web Collection, Revealed
Structure of the Web site
Chapter 1
12
Place Fireworks Images
Into Dreamweaver
In this lesson, you will:
– Place two Fireworks images into a
Dreamweaver document
The Web Collection, Revealed
Chapter 1
13
Placing a Fireworks Image
into 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
The Web Collection, Revealed
Chapter 1
14
Placing a Fireworks Image
into 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
The Web Collection, Revealed
Chapter 1
15
Placing a Fireworks Image
into 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
The Web Collection, Revealed
Chapter 1
16
Placing a Fireworks Image
into Dreamweaver
FIGURE 9:
The Export dialog box specifying the export type as Dreamweaver Library
The Web Collection, Revealed
Chapter 1
17
Edit Fireworks Images
From Dreamweaver
In this lesson, you will:
– Edit a Fireworks image from a
Dreamweaver document
The Web Collection, Revealed
Chapter 1
18
Editing a Fireworks Image
from Dreamweaver
Select image in the Dreamweaver
document
Click Edit Fireworks in Property
inspector
Fireworks is launched
Image appears in an edit window
The Web Collection, Revealed
Chapter 1
19
Editing a Fireworks Image
from 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
The Web Collection, Revealed
Chapter 1
20
Editing a Fireworks Image
from Dreamweaver
Edit
Fireworks
button
FIGURE 12:
The Web Collection, Revealed
Edit button in the Property inspector
Chapter 1
21
Editing a Fireworks Image
from Dreamweaver
Click Done to
return to
Dreamweaver
FIGURE 13:
The Web Collection, Revealed
The Editing from Dreamweaver window
Chapter 1
22
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
The Web Collection, Revealed
Chapter 1
23
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
The Web Collection, Revealed
Chapter 1
24
Viewing Information About
the Movie
When the placeholder is selected,
Property inspector displays
information about the movie
– Dimensions, filename, etc.
The Web Collection, Revealed
Chapter 1
25
Viewing Information About
the Movie
Movie
placeholder
FIGURE 15:
The Web Collection, Revealed
The Property inspector with a movie selected
Chapter 1
26
Setting an Image to Control
the 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
The Web Collection, Revealed
Chapter 1
27
Setting an Image to Control
the Movie’s Playback
Movie name
FIGURE 16:
The Web Collection, Revealed
Naming the movie in the Property inspector
Chapter 1
28
Setting an Image to Control
the 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
The Web Collection, Revealed
Chapter 1
29
Setting an Image to Control
the Movie’s Playback
FIGURE 21:
The completed Control Shockwave or Flash dialog box
The Web Collection, Revealed
Chapter 1
30
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
Chapter 1
31