1. The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING

2. Chapter 1 2 The Web Collection, Revealed 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

3. Chapter 1 3 The Web Collection, Revealed 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

4. Chapter 1 4 The Web Collection, Revealed Set Up the Work Environment In this lesson, you will: –Set up the work environment to facilitate integrating Fireworks images into a Dreamweaver document

5. Chapter 1 5 The Web Collection, Revealed 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

6. Chapter 1 6 The Web Collection, Revealed 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

7. Chapter 1 7 The Web Collection, Revealed 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

8. Chapter 1 8 The Web Collection, Revealed Using Design Notes FIGURE 1: Contents of a Design Notes file Source filename

9. Chapter 1 9 The Web Collection, Revealed 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

10. Chapter 1 10 The Web Collection, Revealed Specifying Launch and Edit Preferences Ask When Launched –Allows you to specify whether or not to launch the source PNG file

11. Chapter 1 11 The Web Collection, Revealed Specifying Launch and Edit Preferences FIGURE 4: Fireworks Preferences dialog box

12. Chapter 1 12 The Web Collection, Revealed Setting up the Dreamweaver Site FIGURE 2: Structure of the Web site

13. Chapter 1 13 The Web Collection, Revealed Place Fireworks Images Into Dreamweaver In this lesson, you will: –Place two Fireworks images into a Dreamweaver document

14. Chapter 1 14 The Web Collection, Revealed 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

15. Chapter 1 15 The Web Collection, Revealed 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

16. Chapter 1 16 The Web Collection, Revealed 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

17. Chapter 1 17 The Web Collection, Revealed Placing a Fireworks Image into Dreamweaver FIGURE 9: The Export dialog box specifying the export type as Dreamweaver Library

18. Chapter 1 18 The Web Collection, Revealed Edit Fireworks Images From Dreamweaver In this lesson, you will: –Edit a Fireworks image from a Dreamweaver document

19. Chapter 1 19 The Web Collection, Revealed 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

20. Chapter 1 20 The Web Collection, Revealed 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

21. Chapter 1 21 The Web Collection, Revealed Editing a Fireworks Image from Dreamweaver FIGURE 12: Edit button in the Property inspector Edit Fireworks button

22. Chapter 1 22 The Web Collection, Revealed Editing a Fireworks Image from Dreamweaver FIGURE 13: The Editing from Dreamweaver window Click Done to return to Dreamweaver

23. Chapter 1 23 The Web Collection, Revealed 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

24. Chapter 1 24 The Web Collection, Revealed 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

25. Chapter 1 25 The Web Collection, Revealed Viewing Information About the Movie When the placeholder is selected, Property inspector displays information about the movie –Dimensions, filename, etc.

26. Chapter 1 26 The Web Collection, Revealed Viewing Information About the Movie FIGURE 15: The Property inspector with a movie selected Movie placeholder

27. Chapter 1 27 The Web Collection, Revealed 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

28. Chapter 1 28 The Web Collection, Revealed Setting an Image to Control the Movie’s Playback FIGURE 16: Naming the movie in the Property inspector Movie name

29. Chapter 1 29 The Web Collection, Revealed 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

30. Chapter 1 30 The Web Collection, Revealed Setting an Image to Control the Movie’s Playback FIGURE 21: The completed Control Shockwave or Flash dialog box

31. Chapter 1 31 The Web Collection, Revealed 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