Exploring Studio 8 Trademarks 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and WebHelp are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally. Third-Party Information This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites. Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com). SorensonTM SparkTM video compression and decompression technology licensed from Sorenson Media, Inc. Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved. Macromedia Flash 8 video is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com. Visual SourceSafe is a registered trademark or trademark of Microsoft Corporation in the United States and/or other countries. Copyright © 2005 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without written approval from Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which this manual was provided may print out one copy of this manual from an electronic version of this manual for the sole purpose of such owner or authorized user learning to use such software, provided that no part of this manual may be printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation, commercial purposes, such as selling copies of this documentation or providing paid-for support services. Part Number ZWP80M100 Acknowledgments Project Management: Jennifer Rowe, Sheila McGinn Writing: Jay Armstrong, Charles Nadeau, Jennifer Rowe, David Sullivan, Jon Michael Varese Managing Editor: Rosana Francescato Editing: Evelyn Eldridge, Rosana Francescato, Mark Nigara, Anne Szabla Production Management: Patrice O'Neill Media Design and Production: Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Masayo Noda, Paul Rangel, Arena Reed, Mario Reynoso Special thanks to Maureen Keating, Jennifer Taylor, Mike Downey, Greg Clausen, Doug Wolens, Melissa Baerwald, Alan Musselman, David Acala, Jason Wylie First Edition: September 2005 Macromedia, Inc. 601 Townsend St. San Francisco, CA 94103 Contents PART 1: GETTING STARTED Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 What you can do with Studio 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Installing Studio 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Activating your Studio products . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Registering your Studio products . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Chapter 1: Learning Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Getting the most from the Studio documentation. . . . . . . . . . . . . . . . . . 17 Using the Studio help systems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Chapter 2: Studio Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Dreamweaver basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Flash basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 Fireworks basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 Contribute basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 FlashPaper basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Chapter 3: Web Development Workflow . . . . . . . . . . . . . . . . . . . 121 About the web development workflow . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Planning your website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 Setting up the development environment. . . . . . . . . . . . . . . . . . . . . . . .123 Planning page design and layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125 Creating content assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128 Assembling, testing, and deploying . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130 Maintaining and updating your site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133 3 PART 2: SETTING UP YOUR ENVIRONMENT AND PLANNING YOUR PAGE DESIGN Chapter 4: Tutorial: Setting Up Your Site and Project Files . . . 137 Learn about Dreamweaver sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Set up your project files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Define a local folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Chapter 5: Tutorial: Creating Page Mock-ups . . . . . . . . . . . . . . 143 Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Create and save a new document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Import and place images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Create a composite of the content area . . . . . . . . . . . . . . . . . . . . . . . . . 148 Place text and images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Export the image for the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Chapter 6: Tutorial: Creating a Table-based Page Layout . . . . 163 Examine the design comp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create and save a new page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insert tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Set table properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insert an image placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Add color to the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . PART 3: CREATING CONTENT ASSETS Chapter 7: Tutorial: Handling Photographs . . . . . . . . . . . . . . . . . 183 Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Batch process large image files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Compose the images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Preview and export the images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191 View the final optimized images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Chapter 8: Tutorial: Creating a Page Banner . . . . . . . . . . . . . . . 195 Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Add a background and place the logo . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Organize your objects with layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Create a contrasting background for the logo. . . . . . . . . . . . . . . . . . . 203 Create an outline around the banner . . . . . . . . . . . . . . . . . . . . . . . . . . . .207 Create a slanted edge effect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Add a tag line to the banner. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Export an optimized image file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211 163 165 166 170 175 177 4 Contents Chapter 9: Tutorial: Building Your First Flash Application . . . . 215 Review your task. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216 Examine the completed application . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216 Create a new document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218 Create symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 Edit a symbol Timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Add actions to frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Add labels to frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Add motion tweens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Edit the main Timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231 Create the border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Add a symbol. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Add a text box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Add the movie clip to the Stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Add a button component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Add ActionScript code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Publish your document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251 Chapter 10: Tutorial: Building a Video Player (Flash Professional only). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Review your task. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Examine the completed application . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Encode a video file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Create a new Flash document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Add a media component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261 Publish your document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 The next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 PART 4: ASSEMBLING AND DEPLOYING YOUR WEBSITE Chapter 11: Tutorial: Adding Content to Pages . . . . . . . . . . . . . 269 Locate your files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Review your task. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Insert images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Insert and play a Flash file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Insert Flash Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Insert text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Create links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 Preview your page in a browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 Contents 5 Chapter 12: Tutorial: Formatting Your Page with CSS . . . . . . 295 Locate your files. . . . . . . . . . ...