The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.
-
Upload
robyn-casey -
Category
Documents
-
view
220 -
download
3
Transcript of The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.
![Page 1: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/1.jpg)
The Web Collection,Revealed
MACROMEDIA STUDIO 8INTEGRATING
![Page 2: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/2.jpg)
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
![Page 3: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/3.jpg)
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
![Page 4: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/4.jpg)
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
![Page 5: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/5.jpg)
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
![Page 6: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/6.jpg)
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
![Page 7: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/7.jpg)
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
![Page 8: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/8.jpg)
8The Web Collection, Revealed Chapter 1
Using Design Notes
FIGURE 1: Contents of a Design Notes file
Source filename
![Page 9: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/9.jpg)
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
![Page 10: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/10.jpg)
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
![Page 11: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/11.jpg)
11The Web Collection, Revealed Chapter 1
Specifying Launch and EditPreferences
FIGURE 4: Fireworks Preferences dialog box
![Page 12: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/12.jpg)
12The Web Collection, Revealed Chapter 1
Setting up theDreamweaver Site
FIGURE 2: Structure of the Web site
![Page 13: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/13.jpg)
13The Web Collection, Revealed Chapter 1
Place Fireworks ImagesInto Dreamweaver
In this lesson, you will:– Place two Fireworks images into a
Dreamweaver document
![Page 14: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/14.jpg)
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
![Page 15: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/15.jpg)
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
![Page 16: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/16.jpg)
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
![Page 17: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/17.jpg)
17The Web Collection, Revealed Chapter 1
Placing a Fireworks Imageinto Dreamweaver
FIGURE 9: The Export dialog box specifying the export type as Dreamweaver Library
![Page 18: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/18.jpg)
18The Web Collection, Revealed Chapter 1
Edit Fireworks ImagesFrom Dreamweaver
In this lesson, you will:– Edit a Fireworks image from a
Dreamweaver document
![Page 19: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/19.jpg)
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
![Page 20: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/20.jpg)
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
![Page 21: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/21.jpg)
21The Web Collection, Revealed Chapter 1
Editing a Fireworks Imagefrom Dreamweaver
FIGURE 12: Edit button in the Property inspector
Edit Fireworks
button
![Page 22: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/22.jpg)
22The Web Collection, Revealed Chapter 1
Editing a Fireworks Imagefrom Dreamweaver
FIGURE 13: The Editing from Dreamweaver window
Click Done to return to
Dreamweaver
![Page 23: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/23.jpg)
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
![Page 24: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/24.jpg)
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
![Page 25: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/25.jpg)
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.
![Page 26: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/26.jpg)
26The Web Collection, Revealed Chapter 1
Viewing Information Aboutthe Movie
FIGURE 15: The Property inspector with a movie selected
Movie placeholder
![Page 27: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/27.jpg)
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
![Page 28: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/28.jpg)
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
![Page 29: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/29.jpg)
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
![Page 30: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/30.jpg)
30The Web Collection, Revealed Chapter 1
Setting an Image to Controlthe Movie’s Playback
FIGURE 21: The completed Control Shockwave or Flash dialog box
![Page 31: The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e7c5503460f94b7ee68/html5/thumbnails/31.jpg)
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