1 / 31

Integrating Fireworks and Flash into Dreamweaver for Web Development

This comprehensive guide covers essential steps for integrating Fireworks images and Macromedia Flash movies into Dreamweaver documents. Learn how to set up your work environment, place, edit Fireworks images, and insert Flash movies seamlessly. Get familiar with preferences in Dreamweaver and the importance of Design Notes for effective image management. Enhance your web development skills with practical lessons involving importing, editing, and exporting images, ensuring a smooth workflow between these powerful Adobe tools.

galeno
Télécharger la présentation

Integrating Fireworks and Flash into Dreamweaver for Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. OVERVIEW 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

  2. INTRODUCTION 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

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

  4. LESSON 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 The Web Collection, Revealed

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

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

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

  8. LESSON 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 The Web Collection, Revealed

  9. LESSON 1 Specifying Launch and EditPreferences • Ask When Launched • Allows you to specify whether or not to launch the source PNG file The Web Collection, Revealed

  10. LESSON 1 Specifying Launch and EditPreferences FIGURE 4: Fireworks Preferences dialog box The Web Collection, Revealed

  11. LESSON 1 Setting up theDreamweaver Site FIGURE 2: Structure of the Web site The Web Collection, Revealed

  12. LESSON 2 Place Fireworks ImagesInto Dreamweaver • In this lesson, you will: • Place two Fireworks images into a Dreamweaver document The Web Collection, Revealed

  13. LESSON 2 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 The Web Collection, Revealed

  14. LESSON 2 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 The Web Collection, Revealed

  15. LESSON 2 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 The Web Collection, Revealed

  16. LESSON 2 Placing a Fireworks Imageinto Dreamweaver FIGURE 9: The Export dialog box specifying the export type as Dreamweaver Library The Web Collection, Revealed

  17. LESSON 3 Edit Fireworks ImagesFrom Dreamweaver • In this lesson, you will: • Edit a Fireworks image from a Dreamweaver document The Web Collection, Revealed

  18. LESSON 3 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 The Web Collection, Revealed

  19. LESSON 3 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 The Web Collection, Revealed

  20. LESSON 3 Editing a Fireworks Imagefrom Dreamweaver Edit Fireworks button FIGURE 12: Edit button in the Property inspector The Web Collection, Revealed

  21. LESSON 3 Editing a Fireworks Imagefrom Dreamweaver Click Done to return to Dreamweaver FIGURE 13: The Editing from Dreamweaver window The Web Collection, Revealed

  22. LESSON 4 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

  23. LESSON 4 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

  24. LESSON 4 Viewing Information Aboutthe Movie • When the placeholder is selected, Property inspector displays information about the movie • Dimensions, filename, etc. The Web Collection, Revealed

  25. LESSON 4 Viewing Information Aboutthe Movie Movie placeholder FIGURE 15: The Property inspector with a movie selected The Web Collection, Revealed

  26. LESSON 4 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 The Web Collection, Revealed

  27. LESSON 4 Setting an Image to Controlthe Movie’s Playback Movie name FIGURE 16: Naming the movie in the Property inspector The Web Collection, Revealed

  28. LESSON 4 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 The Web Collection, Revealed

  29. LESSON 4 Setting an Image to Controlthe Movie’s Playback FIGURE 21: The completed Control Shockwave or Flash dialog box The Web Collection, Revealed

  30. SUMMARY 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

More Related