MACROMEDIA STUDIO 8-EXPLORING STUDIO 8 User manual

Exploring Studio 8

000_ExploringStudio.book Page 1 Tuesday, August 30, 2005 9:30 AM

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).

Sorenson™ Spark™ video compression and decompression technology licensed from

Sorenson Media, Inc.

Reserved. http://www.on2.com.

Visual SourceSafe is a registered trademark or trademark of Microsoft Corporation in the United States and/or other countries.

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

000_ExploringStudio.book Page 2 Tuesday, August 30, 2005 9:30 AM

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

000_ExploringStudio.book Page 3 Tuesday, August 30, 2005 9:30 AM

4Contents

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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Create and save a new page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

Insert tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Set table properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Insert an image placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Add color to the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

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

000_ExploringStudio.book Page 4 Tuesday, August 30, 2005 9:30 AM

Contents 5

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

000_ExploringStudio.book Page 5 Tuesday, August 30, 2005 9:30 AM

6Contents

Chapter 12: Tutorial: Formatting Your Page with CSS . . . . . . 295

Locate your files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296

Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297

Learn about CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298

Create a new style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

Attach a style sheet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Explore the CSS Styles panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Create a new CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307

Apply a class style to text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Format the navigation bar text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

(Optional) Center the contents of the page . . . . . . . . . . . . . . . . . . . . . . 321

Chapter 13: Tutorial: Publishing Your Site. . . . . . . . . . . . . . . . . 325

Learn about remote sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325

Define a remote folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326

Upload your local files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329

Troubleshoot the remote folder setup (optional) . . . . . . . . . . . . . . . . 330

Chapter 14: Tutorial: Setting Up Your Website

for Contribute Users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334

Learn about website connections and administration. . . . . . . . . . . . .334

Connect to a website as an administrator . . . . . . . . . . . . . . . . . . . . . . .335

Set administrative settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336

Create a user role. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337

Edit a role’s settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338

Create a connection key and send it to users . . . . . . . . . . . . . . . . . . . 340

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

000_ExploringStudio.book Page 6 Tuesday, August 30, 2005 9:30 AM

PART 1

Getting Started

In this part, you’ll familiarize yourself with the Macromedia Studio 8

software suite and learn everything you need to do before you begin

building your website.

This part contains the following sections:

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Learning Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Studio Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43

Web Development Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

000_ExploringStudio.book Page 7 Tuesday, August 30, 2005 9:30 AM

000_ExploringStudio.book Page 8 Tuesday, August 30, 2005 9:30 AM

Introduction

This manual introduces you to Macromedia Studio 8, an integrated web

development suite that includes Macromedia Dreamweaver 8,

Macromedia Flash Professional 8, Macromedia Fireworks 8, Macromedia

Contribute 3.1, and Macromedia FlashPaper 2.

This manual gives an overview of the products, introduces conceptual

information about website development, and shows you how to build a

simple but functional website through a series of tutorials.

The information in this manual is designed for beginners, especially users

who are unfamiliar with one or all of the products in the Studio 8 family.

Intermediate and advanced users can benefit by learning recommended

techniques.

This chapter contains the following sections:

What you can do with Studio 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Installing Studio 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Activating your Studio products . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Registering your Studio products. . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

NOTE

This manual is not a comprehensive reference for all of the features of the

Studio products. For in-depth information, see each product’s help

system. To use a product’s help system, in the product’s Help menu,

select Using Product Name.

000_ExploringStudio.book Page 9 Tuesday, August 30, 2005 9:30 AM

10 Introduction

What you can do with Studio 8

Studio 8 includes five Macromedia products: Dreamweaver, Flash,

Fireworks, Contribute, and FlashPaper. This section provides a brief

overview of each product.

This section covers the following topics:

■“What you can do with Dreamweaver” on page 10

■“What you can do with Flash” on page 11

■“What you can do with Fireworks” on page 12

■“What you can do with Contribute” on page 13

■“What you can do with FlashPaper” on page 13

What you can do with Dreamweaver

The visual editing features in Macromedia Dreamweaver let you quickly

create web pages without writing a line of code. You can view all your site

elements or assets and drag them from an easy-to-use panel directly into a

document. You can streamline your development workflow by creating and

editing images in Macromedia Fireworks or another graphics application,

and then import them directly into Dreamweaver. Dreamweaver also

provides tools that make it easy to add Macromedia Flash assets to

web pages.

In addition to drag-and-drop features that help you build web pages,

Dreamweaver provides a full-featured coding environment that includes

code-editing tools such as code coloring, tag completion, a coding toolbar,

and code collapse. Also provided is language reference material about

Cascading Style Sheets (CSS), JavaScript, ColdFusion Markup Language

(CFML), and other languages. Macromedia Roundtrip HTML technology

imports your hand-coded HTML documents without reformatting the

code; you can then reformat code with your preferred formatting style.

Dreamweaver also lets you build dynamic, database-driven web

applications using server technologies such as CFML, ASP.NET, ASP, JSP,

and PHP. If you prefer working with XML data, Dreamweaver provides

tools that let you easily create XSLT pages, attach XML files, and display

XML data on your web pages.

000_ExploringStudio.book Page 10 Tuesday, August 30, 2005 9:30 AM

This manual suits for next models

Table of contents

Other MACROMEDIA Software manuals

MACROMEDIA

MACROMEDIA BREEZE 5 User manual

MACROMEDIA

MACROMEDIA BREEZE-FOR MEETING PRESENTERS User manual

MACROMEDIA

MACROMEDIA COLDFUSION MX 61-DEVELOPING COLDFUSION MX User manual

MACROMEDIA

MACROMEDIA COLDFUSION MX 61-CFML Service manual

MACROMEDIA

MACROMEDIA FLASH MX 2004-FLASH JAVASCRIPT DICTIONARY User manual

MACROMEDIA

MACROMEDIA BREEZE User manual

MACROMEDIA

MACROMEDIA COLDFUSION MX 7.0.2-USING COLDFUSION MX WITH FLEX... Mounting instructions

MACROMEDIA

MACROMEDIA FREEHAND MX 11 Mounting instructions

MACROMEDIA

MACROMEDIA FLEX-GETTING STARTED WITH FLEX User manual

MACROMEDIA

MACROMEDIA FLASH REMOTING MX-USING FLASH REMOTING FOR FLASH MX 2004 ACTIONSCRIPT... Mounting instructions

MACROMEDIA

MACROMEDIA BREEZE-MANAGING EXTERNAL BREEZE REPORTS User manual

MACROMEDIA

MACROMEDIA CONTRIBUTE 3 - DEPLOYING AND PUBLISHING... User manual

MACROMEDIA

MACROMEDIA FLASH MEDIA SERVER 2-INSTALLING FLASH MEDIA SERVER... User manual

MACROMEDIA

MACROMEDIA COLFUSION MX 7-CFML Service manual

MACROMEDIA

MACROMEDIA FIREWORKS 8-EXTENDING FIREWORKS User manual

MACROMEDIA

MACROMEDIA FLASH 8-DEVELOPING FLASH LITE 2.X User manual

MACROMEDIA

MACROMEDIA FLASH 8-FLASH Operation instructions

MACROMEDIA

MACROMEDIA CONTRIBUTE 3-CONTRIBUTE PUBLISHING SERVER User manual

MACROMEDIA

MACROMEDIA BREEZE-USING THE BREEZE PUBLISH WIZARD Mounting instructions

MACROMEDIA

MACROMEDIA COLFUSION MX 7 - INSTALLING AND USING COLDFUSION... User manual

MACROMEDIA

MACROMEDIA COLDFUSION MX 61 - INSTALLING COLDFUSION MX FOR IBM WEBSPHERE APPLICATION... User manual

MACROMEDIA

MACROMEDIA FLASH MEDIA SERVER 2-SERVER MANAGEMENT ACTIONSCRIPT... Service manual

MACROMEDIA

MACROMEDIA FIREWORKS 2-USING FIREWORKS Mounting instructions

MACROMEDIA

MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Mounting instructions

Popular Software manuals by other brands

COMPRO

COMPRO COMPROFM manual

Muratec

Muratec OFFICEBRIDGE ONLINE user guide

Oracle

Oracle Contact Center Anywhere 8.1 installation guide

Adobe

Adobe 65007312 - Photoshop Lightroom Programmer's guide

Avaya

Avaya NULL One-X for RIM Blackberry user guide

HP ProLiant BL420c user guide

PS Audio

PS Audio PowerPlay Programming manual

Brady

Brady LOCKOUT PRO 3.0 Administrator's guide

Avaya

Avaya Interaction Center user guide

Texas Instruments

Texas Instruments TI-83 Plus Silver Edition Guide book

Novell

Novell GROUPWISE 8 - INTERNET AGENT manual

Oracle

Oracle Application 9i Configuration guide

Acer

Acer RDM user guide

Canon

Canon Vixia HF21 instruction manual

Canon

Canon ZR950 instruction manual

Samsung

Samsung Auto Backup user manual

Polycom

Polycom Vortex EF2201 Application note

Brocade Communications Systems

Brocade Communications Systems Brocade 8/12c user manual