Flash Site Workshop

KEN MILBURN, ONCALL INTERACTIVE, AND THE FLASH SITE WORKSHOP TEAM Flash ™ site workshop 201 West 103rd Street, India...

Author: Ken Milburn | Oncall Interactive

51 downloads 800 Views 12MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Report copyright / DMCA form

DOWNLOAD PDF

KEN MILBURN, ONCALL INTERACTIVE, AND THE FLASH SITE WORKSHOP TEAM

Flash

™

site workshop 201 West 103rd Street, Indianapolis, Indiana 46290

ii

Flash™ Site Workshop

Executive Editor Jeff Schultz

Copyright © 2001 by Sams Publishing All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. International Standard Book Number: 0-672-31999-3 Library of Congress Catalog Card Number: 00-105618 Printed in the United States of America First Printing: April 2001 04

03

02

01

4

3

2

1

Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.

Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The authors and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book or from the use of the CD or programs accompanying it.

Development Editor Kate Small Managing Editor Charlotte Clapp Project Editor Christina Smith Copy Editors Susan Hobbs Mary Ellen Stephenson Indexer Cheryl Landes Proofreader Tony Reitz Technical Editor Lynn Baus Team Coordinator Amy Patton Media Developer Dan Scherf Cover/Interior Designer Gary Adair Page Layout Lizbeth Patterson

iii

Contents at a Glance Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1

How to Use This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2

Customize Your Sniffer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3

Design the Home Page and Site Identity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4

Build a Container Movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

5

Add Content to the Container Movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

6

Create the Online Store and Cart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

7

Survey Your Viewers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

8

Set Up a Services Catalog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

9

Generate Dynamic Content: News and Reviews . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

10

Preview Related Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

11

Tell Your Customer About Your Enterprise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

12

Build a Threaded Message Board . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

13

Site Publishing Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318

A

Flash Resources on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

iv

Flash Site Workshop

Table of Contents

1

Introduction

2

How to Use This Book

6

How This Book/Workshop Is Structured How the Chapters Are Organized

..........................................7

...................................................7

Screen Illustrations with Callouts

.........................................8

What to Expect from This Chapter

........................................8

How the Movie Works

.........................................................9

Customize the Movie or Scene

..............................................9

Screenshot of the Customized Movie Tips for Modifying the Movies

2

....................................9

........................................................9

Using the CD-ROM

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Working Examples

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Customize Your Sniffer

12


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

How the JavaScript Sniffer Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Customize the JavaScript Sniffer

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

The Document Title and Background Color of the Sniffer Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 The Redirect Locations

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

How the Flash-Based Sniffer Works The HTML

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

The Flash Sniffer Movie Summary

3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Customize the Flash-Based Sniffer

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Design the Home Page and Site Identity What to Expect from This Chapter

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

The Background, Color, and Shape Forward and Reverse Buttons Main Menu Buttons Sub-Menu Buttons

20 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Changing the Number of Sub-Menu Items. . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Contents

The Customized Navigation Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 How the Preloader Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Customize the Preloader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Text Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Green Load Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 The Customized Preloader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 How the Introduction Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Customize the Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Sound Control Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Go to Main Movie Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Customizing the Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 3-D Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Random Quote Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 The Customized Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Customize the Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Temporary Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Blue and Green Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Welcome Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Company Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Color Bar Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Promo Movie Clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Banners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Vertical Bar Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 The Customized Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

4

Build a Container Movie

68

What to Expect from This Chapter How the Container Movie Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Customize the Main Container Movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Temporary Background

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Embedded Movie Outline Buttons

Text Elements Outlines Summary

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

v

vi

Flash Site Workshop

5

Add Content to the Container

84

What to Expect from This Chapter QuickTime Video

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Customize the Container Movie for Supplemental Flash Movies Load Movie Buttons

Go To Scene Buttons

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Supplemental Movie Controls Scrollable Text

. . . . . 93

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Launch New Window Button

Publishing the Container Movie with Supplemental Flash Movies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 The Customized Supplemental Flash Movie Customize the Panorama Movie The Drag Engine

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Launch Panorama Button in Container Movie The Customized Scrollable Panorama How QuickTime Video Works

. . . . . . . . . . . . . . . . . . . . 109

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Customize the QuickTime Movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 qt.fla file

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Launch QuickTime Video Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 The Customized QuickTime Video Summary

6

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Create the Online Store and Cart

118


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

The Intro Scene. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 The Inventory Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 The Close-Up Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 The Carousel Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 The Thumbnails Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 How the Intro Scene Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Customize the Intro Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Temporary Background

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Green and Blue Backgrounds Text Symbols

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

The List Option Buttons and Text Company Name Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Contents

The Customized Intro Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

How the Inventory Scene Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Customize the Inventory Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Text Fields Specials

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Product List Movie Clip Search Box

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

The Customized Inventory Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

How the Close-Up Scene Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Customize the Close-Up Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

Dynamic Text Boxes The Box Graphic

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

The Zoom and Rotate Symbols The Cart Icon

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Main Screen Movie Clip

Add to Cart and Print a Brochure Buttons Size Wide and Color Wide Movie Clips Text Labels

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

The Customized Close-Up Scene The Category Movie Clip Dynamic Text Boxes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

How the Carousel Scene Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

The Customized Carousel Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

How the Thumbnails Scene Works Static Text

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Dynamic Text Boxes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

The Customized Thumbnails Scene So Where To Go from Here

7

. . . . . . . . . . . . . . . . . . . . . . . . . 157

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Survey Your Viewers

170

What to Expect from This Chapter How Scene 1 Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Customize Scene 1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Backgrounds

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Text Fields

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Company Name Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

vii

viii

Flash Site Workshop

Yes Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

No Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Recessed Box

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Are You Sure?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

The Customized Scene 1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

How Scene 2 Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Customize Scene 2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

The Dashes Anim Movie Clip

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

The Recessed Boxes Movie Clips The Box 1 Symbol

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Question 1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Question 2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Radio Buttons

The Next Question Movie Clip Reset Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

How Scene 3 Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

Customize Scene 3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Question 3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Question 4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Radio Buttons

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Question 5 Text

Text Scroll Movie Clip Submit Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Please Complete

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

How Scene 4 Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Customize Scene 4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Thank You Text

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

The Customized Scene 4 Summary

8

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Set Up a Services Catalog What to Expect from This Chapter

208 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Customize the Service Catalog Movie

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Horizontal Bar Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Company Name

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

Contents

Pull-Down Buttons

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Print Brochure

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Print Price List

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Services Body Copy

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Check out Our Web Presentation Launch Real Player

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Services Request Form Input Fields

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Type of Business PullDown. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

State PullDown

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Country Pulldown

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Radio Button

Send Newsletter Text

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Service Request Form Send Movie_1.swf

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

The Customized Movie

9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Generate Dynamic Content: News and Reviews What to Expect from This Chapter

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

How the News and Reviews Movie Works Flash Actions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Back End Files

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Customize the News and Reviews Movie Temporary Background Blue Background Company Name

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Static Text Fields

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Static Submit Button Submit Button Clear Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

News and Reviews Recessed Box

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Search Results Elements Summary Elements

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

The Customized News and Reviews Movie Summary

230

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

ix

x

Flash Site Workshop

10

Preview Related Links

252

What to Expect From This Chapter

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

How the Preview Links Movie Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

Customize the Preview Related Links Movie Resource Buttons

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Link Pop-Up Window

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Resources Box Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Company Name Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Search Our Resources Text Scroll Box Smart Clip

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

The Customized Preview Links Movie Summary

11

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Tell Your Customer About Your Enterprise What to Expect from This Chapter

266

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

How the About the Business Movie Works

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Customize the About the Business Movie

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

ActionScripts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Background Elements Category Boxes Header Text

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Category Box Buttons

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

Bottom Header Text Information Box

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Company Name and Button About Us Caption

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Quick Info Caption Color Bar

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Side Line Animation The Navigation Bar Other Issues

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Resources for Audio Tracks

12

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Build a Threaded Message Board What to Expect from This Chapter

284 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

The Login Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 The Subject Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Contents

The Message Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 The Post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 How the Login Scene Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 Customize the Login Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Customize Temporary Background

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Background Layers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

Log In Welcome

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

Login Parameters Alert Box

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

Welcome Message Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 Welcome Text

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Submit Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Login Input Fields

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

Variables used for Login Verification

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

Threaded Message Text

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

The Customized Login Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Start a New Topic: Button Identifier

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

Subject Instructions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

Start a New Topic Button Scroll Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

The Subject List

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

The Subject List Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

The Message List

The Message List Button Message Area Outline Message Content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

The Customized Subject Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

Button Descriptions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

The Plain 3-D Button Scroll Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Text Input Graphic

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Message Display Area

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

The Customized Message Scene

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

How the Post Scene Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Text Input Fields

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Button Descriptions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

xi

xii

Flash Site Workshop

The Plain 3-D Button Submit Button

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

The Customized Post Scene Summary

13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Site Publishing Considerations Overview

318

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

Back End Requirements

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

Installing MySQL on Windows 98

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

Installing MySQL on Windows 2000/NT

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

Possible Problems Using NT/2000 Manipulating the Database

Testing and Initial Configuration Administration

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

E-Commerce Requirements/Recommendations

A

Flash Resources on the Web About.Com

. . . . . . . . . . . . . . . . . . . . . . . . . . . 326

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Working Examples

329

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

Accueil Flash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

Art’s Website

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

BertoFlash

CNet Flash Tips

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

Canfield Studios—Flash 3 Samples

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

FlashFilmMaker.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

Cleopatra Art Group

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

Code 66

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

Designs by Mark Extreme Flash Fay Studios

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

The Flash Academy Flash.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

Flahoo.com Flashmove FlashPlanet FlashBible

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

Contents

FlashKit

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

FlashLite

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Flash Jester

Flash Magazine FlashMaster

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Flash Pro Flazoom

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Flashwave HelpCentre

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

i/US Flash Conference

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Macromedia Flash Support Center Mano1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Moock WebDesign Flash Nuthing but Flash Phresh

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

PS Woods Flash Yin and Yang Quintus Flash Index Flashgeek.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

ShockFusion

Trainingtools.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

Virtual-FX

Webmonkey: Multimedia Collection Were-Here

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

zinc roe Design

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Flash Mailing Lists flasher-l

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Flashpro

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

pro_flash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

FSDesigners

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Macromedia Generator Flash Writer Swift 3D

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

Vectra 3-D

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

Kimmuli.com Swish

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

OpenSWF

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

xiii

xiv

Flash Site Workshop

Swifty Utilities OpenSWF 3-D Software

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

Dimensions Rhino3D

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

Xara 3D

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

MetaStream Blender

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

Other Software

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

Flash 4 Database Streamline Font Software

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

TTCoverter

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

Music Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

Flash Sounds License Music Music4Flash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

Glossary

342

Index

350

xv

About the Workshop Team Ken Milburn has spent much of the last thirteen years writing about graphics and multimedia in upwards of 300 articles, columns, and reviews for national computer magazines. Milburn has also written seven computer books including the best-selling FrontPage 97, Flash 4 Web Animation and f/x, and Master Photoshop 5.5 Visually. OnCall Interactive has been developing compelling interactive products to meet a variety of client objectives. They work closely with the client to define the message and translate that into an elegant, engaging interactive solution. Oncall Interactive transforms client concepts into a robust communications solution with outstanding design; technical superiority; professionalism; and fresh, inspired perspectives. Oncall’s clients include Anheuser Busch, the NBA, H&R Block, MarchFIRST, and other leading companies. Contributing to this project were: Project Leader Flash Development Flash Development Flash Development Server Software/DBA Development Server Software/DBA Development Account Manager

Matthew G. Maday Michael David Sanders Michael J. Freeman Chad Ziolkowski Simon Leanos Jason Scott Gessner Jerry Scott

Craig Swann has been an active member of the Flash community since it’s early days and formed CRASH!MEDIA in 1997 as a way to express and explore this non-linear and interactive digital landscape. CRASH!MEDIA is a Toronto-based Interactive Design Agency that specializes in integrating fresh ideas with cutting edge Flash technology. CRASH!MEDIA has worked on a wide range of Flash projects including: the Canadian Gemini Awards, Intel Web Outfitters Service, Alliance Atlantis, MGI Software, as well as creating Flash rich-media ads for the Excite @ Home Network. Last year, CRASH!MEDIA’s Flash site received the Best National/International design award at the South by SouthWest Interactive Festival. CRASH!MEDIA is currently extending into new wireless markets, creating wireless applications for Flash enabled devices including PocketPC, settop boxes and PDA’s. Craig would like to thank Robert Marks for his time and assistance in developing graphics. Lynn Baus is a freelance new media designer, teacher, and artist/photographer. During her exalted reign as a freelance designer she’s worked with countless incarnations of software and hardware to create graphics, animations and interactive environments for clients that will put up with her insanity. Her client list

xvi

includes MarchFIRST, General Mills/Betty Crocker brand, Tribal DDB, VSA Partners, and Nestle/Willy Wonka brand. She received her degree in Photography from Columbia College Chicago where she now teaches new media design and development to students who aren’t old enough to remember the 80’s clearly. She shows her personal work nationally and occasionally enjoys time in the darkroom using technology that hasn’t advanced much since 1890. She firmly believes that the rights of the individual includes a laugh with friends over an alcoholic beverage and good nights sleep at least once a month. Generous donations from patrons of the arts are always welcome. Lon Coley is an IT professional, specializing in Office and Internet applications. An experienced teacher and trainer, Lon writes and develops dedicated customized training courses for business and education. These courses cover the whole spectrum of her expertise and are always prepared with the individual client in mind, thus guaranteeing the needs of the client are addressed and met in full. A firm believer that anyone can build a Web site with the right tools and training, Lon often works with companies who want to develop their own Web sites but feel they need an expert ‘to call on’ when they are struggling, or when developing their existing sites need professional guidance about new technologies. Her company site at http://www.ariadne-webdesign.co.uk holds far more information than we could put here and is updated as often as time allows. Cyndy Cashman is the founder and president of Breakaway Interactive, Training and Digital Media Center, located in Norman, Oklahoma. Her company is a Macromedia authorized training center providing training and consulting services for interactive media. A former professor and director of instructional technology, Cyndy holds a doctorate in Educational Technology from the University of Oklahoma. She writes a regular column about Flash for Mac Design magazine. A lot of people in different departments at Sams Publishing all pulled together in order to get this book out in a timely and professional manner. Many of them are listed on the copyright page, but others deserve mention including Dan Urhig in Manufacturing, Brad Chinn in Production, and the Graphic Conversion Department.

xvii

Tell Us What You Think! As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. As an Executive Editor for Sams Publishing, I welcome your comments. You can e-mail or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books stronger. Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail I receive, I might not be able to reply to every message. When you write, please be sure to include this book’s title and authors’ names as well as your name and phone or fax number. I will carefully review your comments and share them with the authors and editors who worked on the book. E-mail:

[email protected]

Mail:

Jeff Schultz Executive Editor Sams Publishing 201 West 103rd Street Indianapolis, IN 46290 USA

INTRODUCTION

Normally, this is the place where an author introduces his book. In the case of the Flash Site Workshop, there’s much more to introduce than a book. What you have purchased (or are considering purchasing) is a prefabricated Flash Web site, complete with e-commerce capabilities, product and services catalogs, a viewer survey, and a threaded message board. All of these functions (and more) are presented as Flash movies that can integrate with one another, with another Flash site, or with any HTML site. In other words, you are free to use as much or a little of this pre-fabricated system as your needs demand. All the code on the CD-ROM of this book is also yours to use (royalty-free) and modify as you wish. In fact, the beauty of this pre-fabricated site is that it doesn’t restrict you in any way. It simply provides you with the organization structure and code to produce a working site. Each chapter walks you through how to costumize a particular portion of the Web site. How complex the end result is and what it looks like will be entirely up to you.

Figure IN.1 The view of the original home page.

Figure IN.2 One view of a customized version of workshop’s home page.

4

Flash Site Workshop

Who This Book Is For The question of who this book is for is probably best answered by telling you who this book is not for. It is not for those who don’t have at least an intermediate knowledge of Macromedia Flash, including a basic understanding of its scripting language ActionScript. ActionScript, as implemented in Flash 5, is similar to JavaScript. If you know JavaScript and have come to the point where you can put together simple graphics in Flash and animate them, this book can be a big help in getting a site together—even if you don’t have the expertise to carry it as far as you could if you were a Flash maestro. There is one category of Flash novice that this book can help, however: the executive in charge of a development team. The book will give you very good advice on how to think about what the site can do for you, what you’ll want to add, and what sort of resouces (including graphic designers, animators, and coders) you’ll need to do the job you’d like to accomplish. The main audience for this book is the developer, who has solid Flash experience and who values his time. That person will find that the most tedious of the organizational and coding tasks have been done in advance, leaving considerably more time for the kind of advanced creativity that a client truly values.

What You Need to Know There is no Flash instruction in this book, although you will find some occassional advice and hints. Still, you don’t need be a Flash expert. As long as you have a good understanding of the Flash interface, an idea of how a Flash movie is structured, basic syntax and functionality of ActionScript code, and how to draw and animate simple graphics, you will be able to put together a useful business site. If you then decide to learn more or to hire specialized talents to make the site even more sophisticated, you will have at least spent your time and money efficiently.

CHAPTER

1


Loaded Flash Movies Container Movie (Chapters 4 & 5)

Scrollable Panorama QuickTime Video Intro Scene Inventory View

Online Store (Chapter 6)

Pulls from MySQL database

Carousel View Thumbnail View

Order Processing System (Not included)

Close-Up View Viewer Survey (Chapter 7)

E-mail Processing (emailer.asp)

Loaded Flash Movies for Display Sniffer (Chapter 2)

Preloader and Home Page (Chapter 3)

Services Catalog (Chapter 8)

Loaded Flash Movies for Print E-mail Processing Services Request Form (emailer.asp)

News and Reviews (Chapter 9)

Displays from MySQL database

Preview Related Links (Chapter 10)

Displays from Smart Clip Arrays

About the Business (Chapter 11)

Threaded Message Board (Chapter 12)

Communicates real-time with MySQL database

This is the generic site map for the site found on the CD-ROM.

Chapter 1


How This Book/Workshop Is Structured Each of the Flash movies that accompany the chapters in this book are uniquely adaptable to infinite customization. Although each movie is completely functional as is, how your customized movies work will be entirely up to you. Because there are so many possibilities for the end product, your work habits might have to adapt somewhat to the movies’ structure. The benefit will be that you can save yourself hours and even months of effort. This chapter will walk you through the organization of all the chapters in this book and the site itself.

How the Chapters Are Organized There are thirteen chapters in this book, eleven of which are devoted to customizing the movies that make up Flash Site Workshop: • Chapter 2, “Customize Your Sniffer,” walks you through

customizing two different kinds of Flash sniffers: one is JavaScript-based; the other is Flash-based. • Chapter 3, “Design the Home Page and Site Identity,” covers

the navigation bar which will be used in every movie in the book, and the Home Page, which includes a preloader and introductory animation. • Chapter 4, “Build a Container Movie,” customizes the interface

of a container movie. • In Chapter 5, “Add Content to the Container Movie,” you’ll add

functionality and media content (including a Flash Panorama and a QuickTime video) to the container movie created the previous chapter. • In Chapter 6, “Create the Online Store and Cart,” you’ll build

an animated store that is populated via the accompanying MySQL database and XML. • Chapter 7, “Survey Your Viewers,” walks you through creating

a viewer survey whose results will be e-mailed to a designated recipient. • In Chapter 8, “Set Up a Services Catalog,” you’ll step through

customizing a services catalog.

7

8

Flash Site Workshop

• In Chapter 9, “Generate Dynamic Content: News and Reviews,”

you’ll generate dynamic content—in this case news and reviews—using the MySQL database and XML. • In Chapter 10, “Preview Related Links,” you’ll use a Smart Clip

to build an array of related links with a pop-up window that appears when a viewer hovers over one. • Chapter 11, “Tell Your Customer About Your Enterprise,” offers

a new take on the boring “About the Business” section of your Web site. • Chapter 12, “Build a Threaded Message Board,” gives you a

visually interesting threaded message board that uses XML functionality. • Chapter 13, “Site Publishing Considerations,” deals with

backend issues, including setting up the prepared MySQL database files. This book is a collaboration of efforts. The Flash files were prepared by Ken Milburn, Katherine Wolf, and Oncall Interactive. The authors are working Flash developers who customized each movie before writing its chapter. As you go through the book, you will notice that each author has a unique approach, both in voice and design, but there is a common organization across the chapters. Each chapter is organized into the following subsections.

Screen Illustrations with Callouts Each chapter begins with a full-page screenshot of the movie discussed in that chapter. Each screenshot is accompanied by callouts identifying the functional components of the movie. Some chapters include more than one movie to be customized; these chapters begin with thumbnails of each movie, and the full-page screenshot of each movie or scene follows later in the chapter with its respective description. This makes it easy to identify the components as the authors talk about the options for customizing them.

What to Expect from This Chapter The “What to Expect…” section is a short introduction to the purpose of the movie (or movies) that is the subject of the chapter. This section will also give you an idea of the potential purpose for each movie.

Chapter 1


How the Movie Works The “How the Movie Works…” section offers a discussion of what the movie does—including expected viewer input and reaction. While this section will show what the viewer will see, it focuses primarily on the function of the Flash file.

Customize the Movie or Scene In this section, the authors go through each element of the movie and explain how to customize it. In many cases, modification is a simple matter of editing a master symbol or changing the look of an instance. However, this section will also cover any changes that should (or shouldn’t) be made to the code for each file. In most movies, the only code that might need to be changed is ActionScript in the Flash file. In some cases, however, tweaks will need to be made to HTML, XML, or .asp files, and the authors will walk you through the specifics of any changes that have to be made. As mentioned, the authors have customized every movie before they write the chapter about it. As they go through the elements, they’ll talk about how and why they made specific modifications. Use their observations as an inspiration to create your own customizations.

Screenshot of the Customized Movie A full-color illustration of the customized movie is shown at the end of each section. Because multiple authors with different ideas and approaches contributed to the chapters, these illustrations are visual displays of many different ways a movie can look. The designs range from bright and cheerful to robotic and functional.

Tips for Modifying the Movies If you already have a process for modification that works best for you, by all means use it. However, the following are some tips for using the book and the movies contained on the CD. The first tip to remember is this: The biggest difference you can make to the generic site’s ”look and feel” is to simply employ Flash 5’s simple-to-use graphic design tools to alter each symbol’s colors, outline stroke styles, gradients, and text styles. Chapter 3 has some excellent advice on making initial design decisions. Even if you’re

9

10

Flash Site Workshop

not planning to use the movie discussed in Chapter 3, consider reading through the chapter to learn more about design. Most of the graphics in Katherine Wolf’s generic site design have intentionally been made up of simple, primitive graphics that include ovals, squares, and rounded rectangles. There are several reasons why this is so: • You should stick to this kind of simplicity whenever possible

because the simple shapes assure you of the best possible Web performance. • Simple shapes are less fussy and less distracting, which is the

basis of the respected Bauhaus “Less is more” design philosophy. • Don’t be afraid to use more complex shapes to illustrate some-

thing that is uniquely important to your site. In designing the generic site, we couldn’t have second-guessed what that unique aspect might be. • Start by modifying simple shapes to get the impression of an

overall design. You can then go back and refine the shapes to be whatever works best for your content and emotional message. Flash movies generally give you more components and code than you’re likely to need. After all, it’s easier for you to delete animation frames, unnecessary buttons, superfluous sounds, and so on rather than add them. If you want your movie to run as efficiently as possible, go through it with an eye towards reserving the splashy graphics for those elements that deserve special focus. In particular, the following can eat up processor energy for your viewer: • unnecessary sounds • imported bitmaps • complicated tweens, especially Alpha tweens

Generally, the authors will remind you of these file size traps as they walk you through customizing the file, but it’s good to keep in mind at all times.

Chapter 1


Using the CD-ROM The CD-ROM contains a basic directory of files with two main folders in the root: Source and Software. In the Source folder, you’ll find a folder that contains the files you need for each chapter. The folder for Chapter 3, for example, would read: CH03-Files. Inside each Files folder is a folder called CH03Originals, which contains all the original Flash and supporting files you’ll need to work through the chapters. In the

Software

folder, you’ll find a variety of back-end files.

Working Examples There are working examples of the Flash movies located at http://www.oncallinteractive.com/flash5workshop/. Also located at this site are file updates and the latest links to back end components you may need. Feel free to use this site to help visualize how your movies should work or to get updates. So there’s Flash Site Workshop. Have fun with it and win a few Flash awards in the process.

11

CHAPTER

2


Chapter 2


What to Expect from This Chapter In this chapter, we’ll look at a simple but essential tool that every Flash developer should have in his or her tool box—the Flash plug-in sniffer. As you know, to view a Flash movie the viewer must have the most recent version of the Flash plug-in enabled in their current browser. If they don’t have the plug-in enabled they’ll be confronted with a broken puzzle piece graphic and perhaps an alert with an urgent request to download the plug-in. It’s possible to simply add a warning at the entrance point of your Web site or to ask the user to choose between an HTML site and a Flash site. However, it is much better form to do the plug-in detection work up front before the user enters your site. This detection process implements a series of commands to “sniff out” the plug-in, and then directs your user automatically to the correct content. Producing and implementing the sniffer protocol is most likely one of the last things you’ll do before your site goes live but, because this is the first thing your viewer will encounter, we’ve placed it at the front of the book. In this chapter, you will explore the two most commonly used techniques for creating a sniffer. The first uses JavaScript and HTML, and the second uses a Flash movie embedded within an HTML page. Let’s first examine the JavaScript option.

How the JavaScript Sniffer Works To ensure that your viewer doesn’t encounter the Flash movie until they are prepared, we will need to create a “pre-page” HTML document that will contain your sniffer and direct your users accordingly. Open the sniffer folder on the CD-ROM and drag a copy of the file sniffer.htm onto your hard drive. Open it up in a text editor, and you will see the JavaScript and a few lines of VB script necessary to detect the Flash plug-in. It might seem like a lot of code but JavaScript is checking to make sure that the Flash plug-in is present on several combinations of browsers and operating systems. It is also checking to see that the plug-in detected is truly the Flash plug-in as opposed to a plug-in for another Macromedia Shockwave product that closely resembles Flash.

13

14

Flash Site Workshop

Figure 2.1 The HTML and JavaScript for the sniffer.

The JavaScript sniffer then directs the user to either a Flash environment or an HTML page, depending upon the outcome of its investigations. You don’t necessarily need to know how to write JavaScript code to use the sniffer, but learning more about JavaScript will increase your flexibility in creating and controlling complex sites. For example, JavaScript enables you to create perfectly sized pop-up windows in later chapters. But for our purposes here, we will just explore the key areas that enable you to customize this code to fit your needs.

Customize the JavaScript Sniffer So, let’s leave the rest of the code to do its job and take a look at the code that controls the document title, the background color of the sniffer page, and where the user will be directed when and if a Flash plug-in is detected.

The Document Title and Background Color of the Sniffer Page In line 3 of the sniffer.htm document above, you’ll see the standard tag to title your document. By default, it is untitled. You may want to call it JavaScript Sniffer or Sniffer for your own reference.

Chapter 2


Skipping down to line 23, you’ll see the code that dictates the color of the document, bgcolor=”#FFFFFF”, which is white. This script runs so quickly you might not even have time to notice that the page is white, but, if you have a preference, you can change the color to anything you’d like, using the hexadecimal color system.

The Redirect Locations JavaScript is the focus of our interest now. Look again at line 23, and you’ll notice that just after the body color tag is a line of JavaScript that reads as follows: onLoad=”MM_checkPlugin(‘Shockwave Flash’,’flash.htm’,’no_flash.htm’, false);return document.MM_returnValue”

enclosed in the required angle brackets. You’ll see that the JavaScript contains the word flash.htm, and then no_flash.htm, followed by the word false. What this line means in plain English is that, if the value of the detection process comes back true (or in other words, “Yes, the Flash plug-in is detected”), the user will be sent to the HTML document titled flash.htm that contains a Flash movie. In the example provided, the HTML document doesn’t contain a Flash movie; it only contains a text confirmation message. In your movie you should direct it to your Flash content. When you build your own Flash site, you will need to modify this line of code to reflect the actual name of the HTML page that contains the Flash Home Page Movie (customized in Chapter 3, “Design the Home Page and Site Identity”). If the result is false, the user will be directed to the HTML page titled no_flash.htm, which will not contain any Flash material. If you have an alternative HTML site, send users there. If you don’t and would like the user to download the plug-in and return to your site later, you can do that as well. Using the sniffer means that you are in control of the user’s experience—not the broken puzzle piece. When you have made those changes, save the document. You can use it as your index page to make sure that no one can enter the site without first having the plug-in. It can also simply be an entry page before a user gets to a certain section of your site that contains Flash content, or you could use it to determine whether your viewer will see ad banners as animated .gifs or as Flash movies. After you have a basic sense of how the sniffer works, you can apply it to a variety of situations.

15

16

Flash Site Workshop

How the Flash-Based Sniffer Works You might ask yourself why there are two methods for implementing a sniffer when the JavaScript option seems so easy? Well, that’s because the JavaScript option is not an infallible process. Some browser/platform combinations can occasionally return a false negative, as can a browser with a high security setting. The user might have the plug-in but still be denied access to the Flash content, which is very frustrating. Also the JavaScript method checks only whether the Flash plug-in is present, and not which version is enabled. Because there have been many innovations in Flash 5 that a Flash 4 player will not support, this is an issue. That brings us to the Flash-based sniffer. Unlike the JavaScript method, this option will never return a false negative. It can tell which version of Flash is present, and it’s easy to implement. This method is actually a game of timing, composed of two partners, an HTML document with a clever meta refresh tag and a small Flash movie. Open the sniffer folder on the CD-ROM and drag a copy of the file titled index.htm to your hard drive. Open it and take a look at the source code. You’ll notice a small Flash movie named fla_sniffer.swf embedded in the HTML and many lines of code. Essentially, a race is about to take place. The Flash movie contains a command to get the document titled flash.htm and place it in the current browser window, and the meta refresh tag attempts to send the user to a page titled no_flash.htm after 10 seconds. Which ever command is implemented first wins the eyeballs of the user.

Customize the Flash-Based Sniffer We’ll need to customize certain sections of these files to reflect your information. Let’s start by looking at the HTML components.

The HTML In the HTML document, you will see the tag <META HTTP-EQUIV=”Refresh” CONTENT=”10; URL=no_flash.htm”>

Chapter 2

17


This code will redirect the user to the page no_flash.htm in 10 seconds unless the Flash movie intercedes first. If there is no Flash 5 plug-in, the browser will ignore the Flash movie and will execute the command it understands in the meta refresh tag. You will need to modify the name of the non-Flash file where you would like the user directed. You could also change the number of seconds that the HTML document will allow to pass before it redirects the view, but I would leave it at 10 seconds. Anything shorter than 10 seconds might beat the Flash command to the punch, and anything longer will just force the non-Flash user to look at a blank page longer.

The Flash Sniffer Movie That brings us to the Flash movie titled fla_sniffer.swf. Not only must you embed this movie in the HTML document (which has already been done), but you must modify the code within the Flash file to reflect the location of the Flash material. First, copy the file fla_sniffer.fla to the same folder as the index.htm file above. Inside Flash 5, open the Flash movie. This is a two-frame, 20 pixel × 20 pixel movie with a few lines of script in frame 1. Now take a look at the Actions panel for the first frame. You’ll see several lines of comments that explain the purpose of the ActionScript code shown.

NOTE: It’s good form to always have at least two frames in a movie or Movie Clip, even if you don’t need multiple frames, because Flash has a tendency to misbehave if the movie contains only one frame.

Figure 2.2 The Frame Actions panel.

A function has been written that only Flash 5 will understand and execute; this is how you can be assured that only the Flash 5 or later

18

Flash Site Workshop

plug-ins is present. If the user has V4 or lower, she will be directed to the location you indicated in the HTML document. The last line contains the code: goThere(“flash.htm”, _self)

The code tells the Flash movie to perform this function and replace the current window with the document called flash.htm. You will need to change the document title to reflect the name of the file to which you want viewers directed. When you have made that alteration, re-export the .swf file and make sure that it is placed in the same directory as your HTML document.

Background Colors Notice that both the HTML document and Flash movie are gray. It’s best to keep both the same color to avoid tipping off the user to your true purpose. If you change these colors, be sure to change them both consistently. You can then use this HTML document as your index file and be certain that your viewers are prepared for what you have to show them.

Summary You now have two options for determining whether your user is prepared to see your Flash movie. Each of these techniques has their own characteristics and are both useful. Macromedia provides statistics on market penetration of the plug-in at any one moment in time. It also provides information regarding the compatibility of JavaScript, Flash movies, and certain combinations of browser and platforms, if you would like to compile a detailed picture of your potential users’ access capabilities.

CHAPTER

3

Design the Home Page and Site Identity

The Navigation Bar

The Preloader

The Introduction

The Home Page

Chapter 3


What to Expect from This Chapter Your home page is the first significant encounter your users will have with your site. The home page serves as a springboard for the additional movies that you will present to your viewers along the way. It’s important to immediately convey that your site is worth visiting. The home page is also where you will establish your visual and functional footholds. Your choice of navigation should be intuitive and unobtrusive for the user, but always consistent. The movies in the Flash Site Workshop have been constructed with usability and consistency issues in mind. You’ll notice that each section is similar in color and the style of the graphics. Because the movies provided are prefabricated, one of the key issues you need to address is consistency of brand identity. The modifications that you make to the provided movies should be in line with the current look and feel of the printed material and other media of the company. It’s likely that your company has a logo, letterhead, and brochures or catalogs—take these into consideration when you build your Flash site. If the client receives brochures, mailings, invoices, and even product packaging that are completely different than what they’ve seen on the Web site, their confidence in the product could diminish. Whether your company has an established brand presence or not, the design choices that you make should be evident in each of the movies you modify. The colors, fonts, style of photography, and illustration should all be related to each other. The user shouldn’t feel like they’ve jumped to another site each time they view a new category. Flash offers a great deal in the way of sound and animation capabilities. It’s up to you to make wise use of these tools. It’s best to use the high impact elements only when they are necessary and improve the user experience. The introduction to your site is a good place to exhibit your skill as an animator; however, it’s probably not wise to have a gratuitous spinning vortex of color right next to the animation of your product demo. Your mission is to create a site that will inform and help the visitor use the products and services offered by the company—entertainment is a sideline. Probably the best advice is to assemble a design plan before you attack the modifications. Know what you want out the site, decide on the message that you intend to convey to your viewers, and keep

21

22

Flash Site Workshop

that concept ever-present. Have a clear picture of the experience you want to create, and the end product will be effective. You will also save a lot of aggravation and wasted time in revisions later on. In this chapter we’ll explore your options for customization of the look, feel, and function of the navigation bar and the three key segments of the home page movie provided—the preloader, introduction, and the actual home page. I’ve chosen to customize the site for a fictitious robot manufacturing company. My audience includes consumers who are looking for help around the house as well as current and potential suppliers and vendors who provide the company with parts, research and development consultants, and so on. One of the potential issues that the company identified early on was the customer’s initial fear that the machines would be too complicated and time-consuming to learn to operate. In response to this, the robots themselves are marketed as a cross between an upscale household appliance and a toy-like a Tomagochi pet. The product should be as easy to program as a VCR and as entertaining as a video game. To foster this image, the site contains demonstration videos, tips, and tricks for programming the robots as well an online community message board for owners to chat and share ideas and experiences they’ve had with their robots. To convey the fun and ease of use of the product, the look and feel of the site is graphic and high-energy.

Navigation Bar Movie The navigation bar provided should be used as a structure for your own navigation bar. You can modify the overall look of the bar to match your own design concept. The name and number of menu items will be changed to conform to your needs. Additionally, you have the option to change the animation of the sub-menu from a pop-up to a drop-down action. I’ve chosen to present the Navigation Bar movie and the Home Page movie in the same chapter for more than convenience sake. They are two separate movies that act together. When the Home Page movie is played, a script in that movie will automatically load the floating navigation bar into the top level of the Home Page movie. A little later in this chapter, we’ll explore how this happens and how to maintain the proper naming conventions to ensure the movies will work properly.

Chapter 3


Home Page Movie The Home Page movie is broken up into three segments—The Preloader, which loads in all the elements before the viewer can see the movie; The Introduction, which gives the viewer an artistic entry into your site; and The Home Page, which is the gateway to the rest of your site. Preloader You can customize the supplied code to ensure that all of your elements are loaded and ready to view before your viewer reaches the main body of your movie. The graphics and animations provided can be used as model for your own design. Introduction You can customize the sounds, animations, graphic elements, and a random quote generator provided to create a high-impact cinemagraphic entrance to the main content of your site. Home Page You can modify the graphics, color scheme, animations, logo, banner ads, and text to conform to your own company identity.

23

The Navigation Bar Movie

1 Navigation Bar Outline 2 Navigation Bar Background 3 Reverse Scroll Button 4 Forward Scroll Button 5 Main Menu Button 6 Sub-Menu Buttons 7 Drag Button

Chapter 3


How the Navigation Bar Movie Works Go to the folder titled CH03-Files/CH03-Originals on your CDROM, grab the file titled hz_Nav_Bar_new.fla, and place a copy in your working folder. Open it up in the Flash 5 application and test the movie. You’ll see that the navigation bar is constructed in a sliding bar format, so you can scroll to the right and left to view more main menu items. This layout will allow you to list many main menu items without filling the entire site with lists of options. If you roll over a main menu item, the text turns from white to blue and a light gray box appears behind it. When you click on a main menu item, a sub-menu pops up in an incremental animation. This submenu structure provides you with a clean, simple, and efficient way to organize many items within one category. When you roll over any of the sub-menu items, the boxes turn from blue to green and an arrow appears next to the text. In your finished movie, when you click on these categories, a script will load the appropriate movie. In the example, that option isn’t functional yet. The sub-menu will disappear when you roll out of the category. You will also note that if you roll over the Drag button, the button reverses its type to blue with a lighter gray background. If you click and drag this button, the entire menu bar will follow your cursor, allowing your viewer to place it anywhere on the Stage during run time. Return to the hz_Nav_Bar_new.fla that should still be open in the Flash application and take a look at the main Timeline. This movie has a single scene with a single keyframe containing a Movie Clip that is several layers deep. Open up the Movie Clip by doubleclicking the navigation bar at the bottom of the Stage. Once you’re inside, take the play head and scrub across the Timeline. You’ll see the main menu buttons swing from right to left and vice versa on the Stage below. It’s easier to visualize how these elements work together if we start from the bottom and work our way up through the layers. The very bottom layer of the Movie Clip contains the outline of the navigation bar itself, which is simply a static graphic symbol. The two layers above are grouped together as a Mask layer, appropriately named Mask, as well as a Masked layer named Scroll. Scroll is comprised of a graphic symbol made up of Movie Clips in a single row that contain main menu buttons. The Mask layer masks off all but the inside boundaries of the navigation bar outline so that when the main menu buttons tween from right to left, only the buttons inside the perimeter of the navigation bar are visible. Above the Mask layer is the Buttons

25

26

Flash Site Workshop

layer. This layer contains the Scroll buttons that enable the menu to scroll back and forth. The Scroll buttons simply contain scripts that play a certain frame inside the Movie Clip Timeline. The Drag Handle layer contains the button that enables the user to drag the bar at run time. The very top layer, called Labels, contains a series of blank keyframes that exist for no other purpose than to label sections of the Timeline. The names of the labels in the Top layer make it easy to recognize the position of the main menu buttons at each stop action contained in the Actions layer below. Figure 3.1 Timeline of the Movie Clip hn_NavBarScroller.

Now that you’ve seen how the scrolling motion is achieved, let’s move on to the sub-menu structure. While still inside the hn_NavBarScroller Timeline, scrub the play head back to frame 1, double-click the Home button that appears on the Stage. You’ll now find yourself in the Timeline for the symbol titled hn_menu. The hn_menu graphic symbol contains one Movie Clip for every main menu item. Roll your cursor to the Stage area and double-click the Home button again. You’ll see that you are now in the Timeline for the Movie Clip hn_home_mov. You could, of course, view these symbols straight from the Library, but it’s easier to see how they function as a whole if viewed in the context of the larger Timeline. When you’ve entered the hn_home_mov Movie Clip, you’ll see four layers with two keyframes each.

Chapter 3

27


Figure 3.2 Timeline of the Movie Clip hn_home_mov.

The Actions layer that contains the scripts for this Timeline starts at the top. Both keyframes contain a stop() action; however, the second keyframe also contains the label Up. Below that is the Buttons layer that contains the main menu item button. The first keyframe on this layer contains an instance of the Home button with a script that sends the play head to the frame labeled Up. The second keyframe contains a Home button instance, but doesn’t have a script attached to it. Underneath the Buttons layer is the layer titled Sub Menu. The first keyframe in the Sub Menu layer is blank, but the second keyframe contains the Movie Clip that creates the sub-menu button animation. You’ll see the first category in the sub-menu when you scrub over the second keyframe. In this case the button on the Stage reads “Media.” At the bottom of the Movie Clip is a layer called rolloffTarget. This layer contains an invisible button that covers the perimeter of the sub-menu and main menu buttons. It contains the script: on (rollOver) { gotoAndStop (1); }

This script sends the play head back to the “off” position of the first frame of this Movie Clip, thus causing the sub-menu to disappear.

28

Flash Site Workshop

Now let’s see how the Sub-Menu Movie Clip animates. Accessing the Sub-Menu Movie Clip is easier if you lock down the other layers, and then double-click the Stage over the sub-menu button in the second keyframe. You’ll find yourself in the Timeline of the Movie Clip named hn_home_sub because we started with the Home main menu item and burrowed down. This Movie Clip has four layers and two keyframes. The top layer is titled Actions and contains a stop() action on the second keyframe. The next layer is titled Images Button, with a blank first keyframe; the second keyframe contains a button and text label for the button that will load the Images movie. Below that layer is the layer named Media Button, which contains the Media button and text label in both keyframes. The bottom layer contains an invisible button that forms the roll off perimeter. The sub-menu buttons display in a stair step animation because the Media button appears in both frames, but the Images button doesn’t appear until frame 2. There’s a stop() action on frame 2 so the play head will remain there. As long as the cursor doesn’t leave the perimeter established by the invisible button in the hn_home_mov Clip, the sub-menu will stay popped up on the Stage. When the cursor does leave the invisible button perimeter, the play head is sent back to a frame that no longer contains the Sub-Menu Movie Clip and the sub-menu disappears. Figure 3.3 Timeline of the Movie Clip hn_home_sub showing the animation structure.

Chapter 3


29

Customize the Navigation Bar There are many graphic elements that you can customize to fit the look and feel of your site, but there are several items that you must modify so that the navigation bar will work with the rest of the movies. You will also need to alter the number and name of the buttons so that the navigation bar is appropriate to your site. The options for changing the look of the navigation bar are placed at the beginning of this section, but you’ll should make the modifications to the number and name of the menu items before you modify the aesthetic elements so you don’t spend time modifying an element you may delete.

The Background, Color, and Shape Changing the background color of the Navigation Bar movie itself won’t affect the navigation bar. It will be loaded into a level inside of another movie, and that information will be striped off when it’s imported into the secondary movie. The symbol titled hn_NavBarShell contains the color and shape of the navigation bar itself, the color of the background and outline can be edited easily with the stroke and fill options in the Tool palette. You can also change the shape, but make sure the subsequent elements are adjusted to fit this new configuration. The site that I am creating has a high-energy feel, so a gray and blue navigation bar is too sedate and low key for my purposes. I’ve chosen a warm palette for the navigation bar for my friendly robot manufacturer. After I modified the number and names of my buttons, I used the stroke and fill options to choose the Web safe browns, greens, and oranges that now make up my navigation bar. Figure 3.4 Timeline of the hn_NavBarShell graphic symbol with new colors and Movie Background color set to white.

30

Flash Site Workshop

Forward and Reverse Buttons You can change the shape, color, and size of the Forward and Reverse buttons by editing the button symbols hn_left and hn_right. You can also create or import your own graphics to construct a button. If you create a new button, it’s best to use the Instance panel to swap out the instance of the symbols in the Timeline. If you delete and replace the buttons, you’ll lose the code that’s attached to those instances, and the sliding action will no longer function. I created a new set of graphics for the Forward and Reverse buttons using the drawing tools available in Flash. I decided that the current buttons have too much of a hard technology edge for my lay out, and that I want my buttons to be simple and friendly. After I created my arrows, I swapped out the graphics in the hn_left and hn_right button symbols and used the fill option to change the darker yellow to a lighter yellow on rollover. Figure 3.5 Timeline of the modified hn_left button symbol in edit mode on the Stage.

Main Menu Buttons You may want to change the font face and text point size of the buttons. It’s easiest to do this straight from the Library rather than on the Stage. The buttons for each category are inside of the folders titled with their category. For example, the button for the main menu Cart button is inside the folder titled hn_cart_elements. You can go down the list and make sure that you’ve made the same alterations

Chapter 3

31


to every button. You can also change the background color of the rollover state as easily as you would any symbol. Figure 3.6 The hn_cart_but button located in the hn_cart_elements folder as it appears in the library.

I needed to make sure that the text in my buttons was legible against the new background color of my navigation bar. The provided font face is Arial and, for me, this choice still makes sense because it’s straight forward and easy to read. However, the font face color is light gray, which now looks faded in comparison to my new colors. So I changed the font face to white. The font face color in the

32

Flash Site Workshop

rollover state is blue with a gray background; this looked muddy in my new navigation bar so I change the font face color to black with a white background.

Sub-Menu Buttons You will need to change a few lines of code in the sub-menu section so that your buttons will load the correct movies. It will also be necessary to change the number and labels of your sub-menu buttons to reflect your site navigation. You’ll have the option of changing many of the graphic elements and transition animations for the buttons, but it’s best to make the changes to the look and feel of the buttons after you have adjusted the number of sub-menu items to avoid creating more work for yourself than is necessary. Appearance You can easily change the background colors of the sub-menu buttons because they all use the same two graphic symbols. This means if you change the background color in the master symbol of the Up state for one sub-menu button, all of the buttons backgrounds are updated with the new color. The same is true for the background of the Over state of the button. Remember that the labels sit on top of the buttons inside the sub-menu Movie Clip. You will need to change the names of the sub-menu items to reflect your products and services. (We’ll get into the specifics of that later.) The default alignment of the text on top of the buttons is set to centered. You may prefer that the text align left or right. You can change the font and color of the text, but keep in mind that you’ll need to do this for every button; there’s no shortcut for this procedure. Edit the text directly on the Stage so that you can see how your changes will look in the context of the entire layout. I chose to change my backgrounds for the button in the mouse up position from blue to chartreuse and the color of the mouse down background from green with a black arrow to yellow with a black arrow. I left the font choice and font face color of the button alone. Sub-Menu Button Links The purpose of the sub-menu buttons is to provide users with a way to get to the category that interests them. The sub-menu buttons are set up with the code you’ll need to load these new Flash movies into the current location. The code is attached to the buttons in the

Chapter 3

33


Sub-Menu Movie Clips; these Clips are titled hn_”category”_sub: For example, the demos Sub-Menu Movie Clip is titled hn_demos_sub. To view the script you need to click the background of the button itself because the text label sits on top of the actual button. When you look at the code it reads as follows: /* To change the movie that loads when the button is clicked, change the name of the swf, and the level, if desired. Don’t forget to uncomment the code below when you have made your changes. */ on(release){ _parent.gotoAndStop(1); //loadMovieNum (“media.swf”, 0); }

Figure 3.7 Timeline of the modified Sub-Menu button in edit mode on the Stage.

As the comments indicate, you’ll need to change the name of “media.swf” to the name of your .swf movie to ensure your movie will be loaded on the mouse event. You will also need to remove the // marks before the loadMovie command so that Flash recognizes the script as code and not a comment.

34

Flash Site Workshop

Changing the Pop-Up Menu to a Drop-Down Menu Because the navigation bar is draggable, the user can place it anywhere they’d like in the movie at run time. You have the option to change the direction of the sub-menu animations from a pop-up to a drop-down menu. To change the direction to a drop-down menu, you’ll need to enter each Sub-Menu Movie Clip and move the button instances and text label on the Stage so that the buttons appear below the navigation bar instead of above it. For this task it’s best to use the Info panel to adjust the X and Y coordinates. You could move the button groups, made up of the button instances and text, by hand, but using the Info panel will ensure that the button groups are aligned with accuracy. Adjust the Mask layer in the hn_NavBarScroller Movie Clip to cover the new coordinates so that your Sub-Menu buttons won’t vanish or appear cut off. I’ve chosen to modify my sub-menu items from the pop-up to the drop-down style. Figure 3.8 Timeline and Stage screenshot that shows final location of drop-down change.

Changing the Number of Main Menu Items This movie is a model from which you’ll base your Flash site. It’s doubtful that the main menu items provided will match your

Chapter 3


35

information. You may want to add or subtract items to or from the list. We’ve already covered renaming the buttons. Adding and subtracting items, however, takes a bit more effort. Let’s begin with subtracting items. Subtracting Main Menu Items It’s best to subtract items from the end of the list because it makes adjusting the slide animation easier. 1. Double-click the hn_NavBarScroller Movie Clip in the Library.

This can be found in the folder titled NavBarScroller which, in turn, is inside of a folder called hz_navigation. 2. Scrub the play head over keyframe 22 of the Scroll layer and

double-click the Stage over the navigation bar. You’ll find yourself in the edit mode for the hn_menu symbol. 3. Start with the last menu item on the right and delete as many

Movie Clip instances as it takes to get to the correct number of items for your movie. 4. Go back to the hn_NavBarScroller Movie Clip and look in the

Timeline. The top layer titled Labels tells us where important keyframes are located. These labels indicate the direction that the navigation bar will move when the forward and reverse buttons are clicked at run time. 5. Click the keyframe in the Scroll Layer that falls in front of the

3-2 label. Use the Info panel to adjust the X coordinate so that the last item in the list sets in the last space on the right side of the navigation bar. 6. Place the play head in between the frames labeled 3-2 and 2-1,

and remove four or five frames (Shift + F5). Remove the same number of frames from the Scroll Layer between 2-3 and 3-2 labels. This will shorten the time that it takes the menu items to tween across the bar. If you didn’t compensate for the fewer number of items, the slide in the last section will appear much slower than the slide through the first two positions.

NOTE: Using keyframe labels is the simplest way to mark off a certain spot in the Timeline when you need to use code to refer to events. If this navigation bar didn’t use the labels, your button code soon would because a cryptographer’s dream of frame numbers—you’d have to write yourself a cheat sheet to keep track of what was happening, when, and where.

36

Flash Site Workshop

Adding Main Menu Items As an example, let’s add a category titled Tricks. 1. Add a new folder to your Library inside of the folder

NavBarButtons, and name it the same as your new category so you can spot it easily. Mine is called hn_tricks_elements. 2. Open up the folder above it. In this case, that folder is

hn_tips_elements. Using the Duplicate feature in the Options menu of the Library, duplicate all three symbols that you find in that folder: the button, the Main Item Movie Clip, and the SubMenu Movie Clip. Rename the copies of the duplicated symbols with your new category name. For instance, I’ve named my symbols hn_tricks_but, hn_tricks_mov, and hn_tricks_sub. Move them into the folder you created to hold these elements. 3. You will need to make sure that the symbols in your new cate-

gory are updated to reflect your new category. When you duplicated your hn_”category”_mov, an instance of the previous category’s Sub-Menu Movie Clip was inside of the Movie Clip. You will need to replace this Sub-Menu Movie Clip instance with an instance of your new Movie Clip. Double-click the hn_”category”_mov Movie Clip in the Library. Lock down all of the layers except the Sub Menu layer, and move the play head to frame 2. Click once on the Stage on top of the instance of the Sub-Menu Movie Clip. Use the Swap Symbol tool in the Instance panel and chose the new Sub-Menu Movie Clip. In my case I swapped the symbol instance of the Movie Clip hn_tips_sub with an instance of the Movie Clip hn_tricks_sub. If I hadn’t done that, my Main Item Movie Clip hn_tricks_mov would still be referencing the instance of the Sub-Menu Movie Clip hn_tips_sub. 4. Double-click the new button symbol that you’ve just made in

the Library and modify the text on the button to reflect the name of your new main menu category. In my case the new name is Tricks. 5. Return to the Library, double-click your Sub-Menu Movie Clip

and modify the Movie Clip to reflect number of items from which you’d like the user to choose and their names. (See the section, “Changing the Number of Sub-Menu Items,” for information on adding or deleting Sub-Menu buttons.)

Chapter 3

37


Figure 3.9 The Library showing new elements and how they should be organized.

6. Return to the hn_NavBarScroller Clip, and scrub the play head

across the Timeline until it’s over keyframe 22. Double-click the Stage on top of the navigation bar. This places you in the hn_menu graphic symbol. 7. Place an instance of the new Clip in the hn_menu symbol on

the Stage at the same Y coordinate of the other Clips and at an X coordinate approximate 130 pixels to the right of the last item on the list.

38

Flash Site Workshop

8. Return to the Timeline in hn_NavBarScroller Clip and go to

keyframe 22 in the Scroll layer again. Click on that keyframe and use the Info panel to change the X coordinate of the hn_menu symbol so that the hn_menu symbol shifts to the left until the new category appears at the to the right at the end of the list. Figure 3.10 The new main menu button placement in context of the navigation bar.

9. Now you’ll need to compensate in the animation time for the

longer list. Add four to five frames (F5) to all of the layers between the labels 3-2 and 2-3.

Changing the Number of Sub-Menu items It’s unlikely that each sub-menu button fits your needs. You will need to either add or subtract buttons to the sub-menu animation to reflect the number of movies the user has the option of viewing. Subtracting Sub Menu Items I’ve chosen the Sub-Menu Clip for the demos section as my example. 1. Double-click any of the sub-menu Movie Clips in the Library.

In this example, it’s hn_demos_sub. 2. The top layer of each sub-menu Clip begins with an Actions

layer and is followed by one layer for each button. Delete the first and second button layer under the Actions layer. 3. Move the keyframe in the Actions layer that contains the

script so it’s over the last keyframe of animated buttons.

stop()

4. Delete all of the keyframes that extend past the stop action

keyframe.

Chapter 3


39

Figure 3.11 The Timeline after the button has been taken out and adjustments made.

Adding a Sub Menu Item Let’s add a button to the Sub-Menu Clip. I’ve used the Company section as an example. 1. Double-click any of the Sub-Menu Movie Clips in the Library,

such as hn_company_sub. 2. Add a new layer under the Actions layer; then add one frame

(F5) to the end of each of the existing layers, so that all layers exist for the same length of time. 3. Place a blank keyframe (F6) in the last frame of your new

layer. Name the layer after your new button category. In this case the layer will be named Mission Button. 4. Copy the button and text field from the frame below and paste

an instance of both in the blank keyframe at the end of your new layer. Use the Info palette to align them—the X coordinate will remain the same, but the Y coordinate will be 17 pixels from the closest button instance.

40

Flash Site Workshop

5. Change the text field to reflect the name of your new category.

Change the ActionScript to include the name of the Flash Movie that will be loaded when the viewer clicks it. 6. Move the keyframe with the stop() script to the last frame of

the layer. 7. Go to the bottom Background layer and extend the boundaries

of rolloff background button to include the new sub-menu item. Figure 3.12 Timeline when a Sub-Menu button has been added.

The Customized Navigation Bar Here’s the customized navigation bar for my fictitious robot company mentioned in the beginning of this chapter. Figure 3.13

The Preloader

1 Outline 2 Background 3 Load Bar Outline 4 Load Bar Background 5 Percent Loaded 6 Numeric Percentage

42

Flash Site Workshop

How the Preloader Works The Preloader is contained in the Home Page movie, which contains three distinct segments. From the CH03-files/CH03-Originals folder on the CD, copy the movie titled homepage.fla to the appropriate folder on your hard drive. Open the movie in the Flash application and test it. The Preloader exists in the first few frames of the movie inside of the scene titled Preloader. Its job is to make sure all of your content is downloaded before the main section plays. The Preloader employs a script that continually checks to see if all the content in the frames of the main Timeline are present. It also contains a script that moves the green loader graphic to the right as the frames load and sends the value of the percentage of frames loaded to a dynamic text field. When all of the frames are loaded, the play head will go to the Introduction. While the preloading process is taking place, your viewer will see a green load bar graphic fill up its outline and a text field that is updated to read “100%” when all of the frames of your movie have been downloaded. Since you’re playing this movie from your hard drive, all of the frames are immediately available and this section will zoom by you in the blink of an eye. Take a look at the main Timeline of homepage.fla in Flash, and make sure you’re in the Preloader scene. You’ll see a green graphic load bar and a text message enclosed in a light blue boarder on a gray background. You’ll see several layers, but for the purposes of explaining the Preloader, we’re only concerned with three of these layers. The top layer is titled Actions and the first keyframe has a stop() action. The layer Loading MC contains the Movie Clip with the Preloader script as well as the green bar and text graphic you see on the Stage. The bottom Temp Background layer contains a graphic symbol that is filled in with gray. The real action takes place in the Loading MC layer, so lock down all of the others and double-click the green load bar graphic. You’ll be in the Timeline for the Loader Main Movie Clip. This Clip has four layers with two keyframes per layer. The top layer is titled Scripts. The second keyframe contains the code that checks to see if the all of the frames are loaded and gives the play head to go ahead to play the rest of the movie.

Chapter 3

43


Figure 3.14 The Timeline of the Loader Main Movie Clip illustrates the layer structure.

Open the ActionScript panel and click the second keyframe of the top layer. You’ll see the following script: /* This line of code figures out how many frames have loaded out of the total number of frames. Then it multiplies that number by 100, to get an accurate percentage. */ loaded = int((_root._framesloaded/_root._totalframes)*100); /* This line of code puts the variable “loaded” and “%” into the field named “percentage”. */ percentage = loaded add “%”; /* This line of code sets the x scale of the movie clip “Bar” to the current number in the variable, “loaded”. This is so the loading bar will

44

Flash Site Workshop

accuratly represent the total percentage loaded. */ setProperty (“Bar”, _xscale, loaded); /* This code sends the play head on the main timeline to the frame labled,”loadDone”, if the movie has completly loaded. Or if the movie has not loaded yet, it sends the play head to back to the previus frame, based on its current position. */ if (Number(loaded) == 100) { _root.gotoAndPlay (“loadDone”); } else { _root.gotoAndPlay (_currentframe -1); }

While you won’t need to alter this code, it’s good to know what it does so that you understand what you can and can’t safely alter in the preloader section. In simple terms, this is an if-then statement. When you invoke the statement, Flash checks to see whether all the frames are loaded. If they aren’t, the Clip loops back to the first frame and waits to see whether the “all frames loaded” condition is true the next time around. While Flash is performing the frames loaded function, another script is feeding the variable named percentage to the dynamic text field. There is also a script that is tweening an instance of the Movie Clip SliderMax (named Bar) on the X axis so that as the frames load the green load bar will move to the right and fill the black outline. These scripts refer to specific variable and instance names so you must make sure that you don’t alter an instance of a symbol on the Stage in a way that will interfere with the script doing it’s job, such as deleting an instance and replacing it with one of your own. If you’re familiar with the intricacies of ActionScripting, you can alter the code to reflect an alternate design; if not, it’s best to follow the instructions as to how to alter the elements listed in the sections titled Background, Text Fields and Green Load Bar Graphic.

Chapter 3

45


Customize the Preloader The Preloader has a several elements that can be customized so that this pragmatic and functional segment will be aesthetically pleasing and consistent with the Introduction and Home Page that follow it.

Background The Temporary Background graphic symbol in the Temp Background layer is a filled, gray box with a light blue outline. This symbol was added so that you can change the background appearance of one scene of a movie without affecting the entire movie. If instead you choose to change the background of the movie itself by the using the Modify Movie option, you would affect the entire movie, not just one section. Keep in mind that the Temporary Background symbol will appear to be the background as long as an instance of that symbol appears in the Timeline. So be aware of where you are placing the symbol and over how much of the Timeline it stretches. You can edit the Temporary Background graphic symbol with the fill and stroke options in the Tool palette. Figure 3.15 Temporary Background graphic symbol in the edit mode on the Stage.

Text Fields There are two text fields in the Loader Main Movie Clip. The Percent Loaded text is a static text field. This means that it will be embedded

46

Figure 3.16 Static and dynamic Text fields on the Stage.

Flash Site Workshop

upon export and you can choose any font you want to use. The other text field (the one that contains the numeral 0) is a dynamic text field, associated with the variable named percentage, which is fed the percent loaded numbers for the Preloader script. You can change the font for this dynamic text field, but the font must be chosen from among the device fonts. If you don’t use a device font in the dynamic text field and the font you choose isn’t installed on the viewer’s hard drive, the type won’t render correctly or at all. If you absolutely must use a non-device font in a dynamic or editable text field, you can create the outlines and include the outline information with the file. This adds considerable size to the file for little benefit, in my opinion. Be aware that the Preloader script refers to the specific variable that is attached to the dynamic text field in the Movie Clip. Don’t delete or replace this field or you will prevent the script from performing correctly. You can safely change to color of the fonts in either the dynamic or static text field using the fill option.

Green Load Bar The green load bar is slightly more complicated than it appears at first glance. The black outline for the bar is on the same layer as the dynamic text field. Its been created in Flash, so you can use the stroke option in the Tool palette to alter the color. The inside section of the load bar (the white and green gradient) is the Movie Clip Slider Max and it is located in the Loader Bar layer. The instance of this Movie Clip is named Bar, and it is referred to by instance name in the Preloader script. If you delete this instance, the script will be prevented from performing its duties correctly. You can alter the color of the bar using the fill option in the Tool palette, you could change the fill to a radial gradient, the color of the gradient or to a solid fill. Changing the size or shape of the bar is fine as well, but make sure that the outline is changed to accommodate the new dimensions. Figure 3.17 Green load bar on the Stage.

Chapter 3

47


The Customized Preloader Here’s the customized Preloader for my fictitious robot company. Figure 3.18

The Introduction

1 Outline

8 Loaded Text

2 Background

9 Random Quote Text

3 Green Background 4 Blue Background 5 Music on/off Button 6 Go to Home Page Button 7 3-D Animation

10 Random Quote Outline

Chapter 3


How the Introduction Works When the preloading process has finished, the play head is sent to the keyframe labeled loadDone in the Main Timeline of the Preloader scene. This label is present so that you can easily see where the Preloader ends and the Introduction section begins. A text message fades in and zooms out to confirm that the movie is loaded. At the same time, a blue background tweens and fades in from the right side of the Stage, and a green background tweens and fades in from the bottom of the Stage. The soundtrack then begins to play and two 3-D animations play to the right and left of the text message. A button that controls the soundtrack appears in the bottom left corner; to the right is a button that skips to the main content area. As the intro plays, a series of 10 quotes fly randomly across the Stage from left to right. The Introduction continues for approximately seventeen seconds and then automatically goes to the Main scene—the home page itself. As with the Preloader, we focus on certain layers. In the Preloader scene, you’ll see the layer Loaded Text in the Main Timeline. This layer contains the text animation of the word “Loaded” which lets the users know that all of the frames are loaded and the play head is moving through the Timeline. This isn’t a Movie Clip, but rather a simple Motion Tween across 10 frames. Below the Loaded Text layer is the Random Quotes layer. This layer contains the Movie Clip that generates the random quotes that move across the Stage at run time. The next layers of interest are the Right Animation and Left Animation layers each containing an instance of the 3-D_Animation Movie Clip. This Movie Clip is composed of a series of single-frame images that are rotated slightly in each successive frame to create the illusion that the metal washer is spinning. It works on the same principle as an animated .gif file. Next is the Go to Main Button layer containing the button that enables the user to skip the Introduction, if desired. Below that is the Sound On/Off layer that contains the button allowing the user to turn the soundtrack on and off. Next are the Blue Background and Green Background layers. These layers contain the color fields that tween in at the beginning of the Introduction. The play head plays through this section of the Timeline until it reaches the frames that contain the home page section itself in the Main scene.

49

50

Flash Site Workshop

Customize the Introduction There are several options and elements that you can customize easily so that the Introduction is truly your own creation.

Sound Control Button It’s important to provide users with a way to silence the soundtrack while they continue to view your movie. It’s not always desirable to listen to high-energy music through an entire site visit, and if you don’t provide your viewer with a way to turn down the sound, it can become annoying. The speaker graphic is actually a Movie Clip that contains two identical buttons—one that enables the user to turn off the soundtrack and another to turn it back on. Double-click the speaker button to go to the Music On-Off Movie Clip. In the Actions layer, you see two keyframes. The first has a stop() action. Below that layer is the Sound Loop layer that contains the music loop in the first keyframe. The bottom layer is titled Mute/Play Sound Button and contains a button instance in each keyframe, a speaker for On, and a speaker with a slash for Off. Use swap symbols in the Instance panel to replace these buttons with something new. If you delete and replace the instance of the buttons in the Movie Clip, you’ll lose the code that allows them to function properly. This is especially important because the speaker button contains the code: on (release) { stopAllSounds (); nextFrame (); }

This code sends the play head to the second keyframe that doesn’t contain a sound clip. The script also contains the command stopAllSounds(). This command is essential because the music snippet is set to loop 100 times. Even if the play head is sent to a keyframe where no sounds exist, the snippet will continue to loop until it hits 100, unless Flash mutes it. Double-click the first frame of the Sound Loop layer to see the properties in the Sound Properties window. This symbol, called Music Loop, is a 44khz, 16-bit snippet of stereo sound. The sync is set to Event and will loop through 100 times before it stops. When you replace this snippet with your own loop, you’ll need to set the sync

Chapter 3

51


to Event and set the Loops option so that the music snippet will loop at least 100 times. There’s a list in the online resource appendix of suggested sources for music loops edited especially for Flash users.

Figure 3.19 Music On/Off button on Stage.

Go to Main Movie Button One of the first interactive choices that you should offer your users is the option to skip the Introduction section entirely. If this is the 50th time they’ve come to visit your site, or if they just want to get straight to the content, the Go button enables them to get right to the heart of your movie. You can swap out the go2 button instance with your own graphic by using the swap symbols option on the Instance panel. If you look in the ActionScripting window, you’ll see the code attached to the button: /* This is where you tell the “go to main button” where to go. “Main” is the name of the scene you are going to, and “MainMovie”, is the name of the first frame on the homepage. */ on (release) { _root.sound.gotoAndStop(2); stopAllSounds(); gotoAndPlay (“Main”, “MainMovie”); }

As you can see from the comments in the code, this refers to the label placed in the keyframe of the beginning of the Main scene. If you change the label in this location, be sure to update this code. You can also see that it will mute all sounds that are playing so you don’t get a bleed over into the home page section.

Figure 3.20 Go to Home Page button.

Customizing the Text The Loaded Text graphic symbol is found in the Loaded Text layer. The text in the graphic symbol is a static text field so you can replace the current font with any font you choose and it will render correctly when it is played, regardless if the user has the font installed on their system or not. You can also change the color of the text, the Tween motion, and the rate of entry of the graphic.

Figure 3.21 Loaded text on the Stage.

52

Flash Site Workshop

Figure 3.22 3-D_animation on the Stage.

3-D Animations The 3-D animation of steel washers is actually a Movie Clip titled 3-D_Animation. If you double-click the Clip instance on the Stage, you’ll see the animation is a series of images similar to an animated .gif. You can replace these animations with your own design. There’s software on the market tailored to provide developers with tools to create sophisticated animations quickly and easily. Some of these are listed in the online resource appendix.

Random Quote Generator One of the unique features of this introductory animation is the random quote generator. You can edit this section to reflect your quotes, company taglines, slogans, products or services features, and so forth. Notice the Random Quotes layer in the Main Timeline. This layer contains the Random Quote Movie Clip. Double-click this Movie Clip to view its Timeline. The Random Quote MC is currently constructed to run through a list of 10 quotes that reside in the Library, choose one at random, and have it tween across the top of the Stage from the left side to the right side behind a mask. The process repeats with a different quote each time. Border Inside the Random Quote Movie Clip is the Border layer. This layer contains the outline of the space where the quotes tween through. The outline isn’t a symbol; it’s drawn directly on the Stage. You can edit the color by using the Stroke panel. Replacing Quotes It is exceedingly simple to replace these quotes with your own copy. Notice that there is a folder in the Library titled Random Quote Materials. Double-click to expand its contents and you will see a list of quote symbols from 1 to 10. Double-click each quote in the Library to edit the font face and content to reflect your material. This is a static text field so you do not need to choose a device font, unless you would like to shave some file space off your movie in exchange for limiting your font choices. In this case, the difference would be miniscule, but in some cases, every byte counts. The script is set up to look for the name of a specific keyframe in the Movie Clip Timeline,

Chapter 3

53


not its actual contents or symbol name. In that way, the script will continue to operate correctly if you change the contents. Figure 3.23 Timeline of Random Quote Movie Clip.

Figure 3.24 Random Quote Movie Clips in the Library.

54

Flash Site Workshop

Adding Quotes Although it is simple to edit the content inside any of the 10 quotes, it is slightly more difficult to modify the number of quotes that are randomly generated. The object of this book is not to teach you how to create ActionScripts, but rather provide you with a workable template. I will give you a step-by-step run-through of this process without delving too deeply into the aspects of programming. With that said, let’s start by adding an eleventh quote to the random quote generator. 1. After you have customized the look of the other 10 quotes,

create the new quote symbol by going to the Library and choosing the Random Quote #10 symbol. 2. Go to the Options menu and duplicate the graphic symbol. Name

it Random Quote #11 and make sure that it is a graphic symbol. 3. Double-click the symbol to edit it and enter a new quote in the

text field. By doing this, the new symbol is consistent in font size, typeface, and color. 4. Notice in the Scrolling Random layer that each quote is approxi-

mately 100 frames long, that they begin on the left side of the Stage on the X coordinate -350 and the Y coordinate 0, and that they end at the right side of the Stage with the X coordinate 500. 5. If you scroll to the end of the Timeline in the Movie Clip, you

will see that the last quote ends on frame 1001. Insert two blank keyframes (F7) into frames 1002 and 1003. 6. Drag the Random Quote #11 symbol into frame 1003. It doesn’t

matter where you place it on the Stage; we will position it using the Info panel in a minute. 7. Scroll down the Timeline and insert a frame (F5) into frame 1102. 8. Go back to frame 1003 and set the X coordinate to -350 and

the Y coordinate to 0 in the Info panel, remembering to press Enter after each number. 9. With that frame selected, create a Motion Tween. 10. Go to frame 1102, insert a keyframe (F6), and set the X coordi-

nate of the Movie Clip to 500. Leave the Y coordinate as it is.

Chapter 3


11. To make sure that the mask covers your additional quote in the

Timeline, grab the end of the last frame in the Mask layer and drag it to the last frame of your eleventh quote layer, frame 1102. We now need to add the ActionScripting that will allow the new quote to be integrated into the Random Quote Generator. 1. Go to the top layer where all the scripts are kept, add a blank

keyframe to frame 1002, and label it q11. 2. In that frame, place the script: if (q11 == false) { nextFrame (); play (); } else { gotoAndPlay (2); }

It might be easier if you copy and paste the syntax from frame 902 and change the value on line 1 from 10 to 11. This code checks to see whether the quote has already been seen; if it hasn’t, it will execute this specific Motion Tween, sending the quote across the Stage. It must appear in the first frame of each quote. 3. Scroll down to the last frame (frame 1102) and create a blank

keyframe. In this frame place the script: q11 = true; gotoAndPlay(2);

You can copy, paste, and update this script from frame 1001 in the same manner as you did in frame 902. This code sets this specific quote to the value true, which means that the viewer has seen it. It then sends the play head back to frame 2, which contains the code to initialize the random quotes. 4. Look at the workhorse frame 2. In this frame you will see the

following code: if ((q1 == true) true) and (q4 == (q5 == true) and and (q8 == true)

and (q2 == true) and (q3 == true) and (q6 == true) and (q7 == true) and

55

56

Flash Site Workshop

(q9 == true) and (q10 == true)) {gotoAndPlay(1); }else{ gotoAndPlay (“q” add int(random(10)+1)); }

In the first two lines, the code checks to see if all the quotes have been seen. To change this to reflect your additional quote, you must add a condition that corresponds to the name of your new variable—in this case, q11. So you would add and (q11 == true) directly after the (q10 == true) statement. You then need to change the last line of code to change the value upon which the random feature is based. In this example, change the 10 to 11. Your new code should look like this: if ((q1 == true) true) and (q4 == (q5 == true) and and (q8 == true) (q9 == true) and {gotoAndPlay(1); }else{ gotoAndPlay (“q” }

and (q2 == true) and (q3 == true) and (q6 == true) and (q7 == true) and (q10 == true) and (q11 == true))

add int(random(11)+1));

5. Look at the code in the first frame of the Movie Clip, which

reads as follows: q1 = false; q2 = false; q3 = false; q4 = false; q5 = false; q6 = false; q7 = false; q8 = false; q9 = false; q10 = false; play ();

6. Add your new variable to this list so that the “randomize” code

can check if it is time for your quote to be shown. Your new code should look like this:

Chapter 3

57


q1 = false; q2 = false; q3 = false; q4 = false; q5 = false; q6 = false; q7 = false; q8 = false; q9 = false; q10 = false; q11 = false; play ();

Now you’re set—test it and enjoy your new quote! You can remove quotes in a similar manner. Make sure that you remove all the references to that quote so that the code functions properly.

The Customized Introduction Here’s the customized Introduction for my fictitious robot company. Figure 3.25

The Home Page Movie

1 Outline

6 Promo Movie Outline

11 Company Name

2 Temporary Background

7 Promo Movie

12 Welcome Message

3 Green Background

8 Satellite Animation

13 Banner Button

4 Blue Background

9 Side Line Animation

14 Ad Banner Buttons

5 Color Bar

10 Vertical Bar Animation

Chapter 3


How the Home Page Works Test the Home Page movie again once the Preloader and Introduction have finished. The Home Page movie contains several elements. Starting to the far left and bound by a blue box, notice a brief paragraph welcoming everyone and giving an introduction to the products and services offered. A small animation that cycles through several shades of blue is seen below that and is a recurring element throughout the various site movies. A lighter blue vertical bar with two dancing vertical lines is seen to the right. Further to the right is a place for the company name in an olive-colored field. Probably the most eye-catching element is the promo presentation playing in the middle of the Stage. As the promo plays, bitmap images sweep in from the left, right, top, and bottom along with teaser lines about the product. To the right of the promo is a satellite that floats up and down, and performs a series of animations. Above the animated logo is a clickable banner ad. At the far right side of the Stage is a vertical bar made of horizontal lines that loop from top to bottom. This is another repetitive design element. Finally, across the bottom, there are three small, clickable banners. The home page segment of the movie is contained within the Main scene and is comprised of several layers. The Actions/Labels layer contains the frame labeled MainMovie to which the script in the Go button refers. This layer also contains a keyframe with the script that loads the navigation bar into the level above the current movie. At the end of this layer is a keyframe with a stop() action so the movie doesn’t loop. Below the Actions/Labels layer is the Ad Banner containing the banner that appears in the upper right of the Stage. Below that is the Macromedia Buttons layer that contains the small advertising banners at the bottom of the Stage. Next is the Animations layer that contains the Promo Movie Clip. Below that is the Text layer that holds the company introduction copy appearing on the left of the Stage. The Animated Image layer that contains the animation of the satellite is next, and then is the Company Name layer with the button Company Name. Following that is Color Bar Animation that contains the Movie Clip for the blue squares animation, and below that is the Vertical Bars Animation layer, which has the Movie Clip with the light blue lines that dance across the Stage. Next, the Side Line Animation layer contains the white striated lines that run across the right side of the Stage. The Blue Background and

59

60

Flash Site Workshop

NOTE: You may have noticed that the navigation bar appeared in your Home Page movie when you tested it earlier. This is because an ActionScript within the Home Page movie calls upon that file (hz_Nav_Bar_new.swf) and loads it into the level above itself. The navigation bar will only appear in your Home Page movie if hz_Nav_Bar_new.swf exists in the same location as the homepage.swf and is named correctly. If you didn’t have the Home Page movie in the same folder as the navigation bar, an output window would have popped up with and error message telling you it failed to load the movie. Take a look at the Actions/ Labels Layer in the Main Scene and scrub the play head across the Timeline until you hit frame 23. Click on the keyframe and look at the Actions window. You’ll see the following Script: // This code loads the navigation bar loadMovieNum (“hz_Nav_Bar_new.swf” , 1);

As the comment says, this code loads the hz_Nav_Bar_new.swf movie. If you change the name of your Navigation Bar movie you must also change this code to reflect the new name.

Green Background layers are next and contain the color fields you see on the Stage. The bottom layer, Temp Background, contains a graphic that covers the whole Stage and acts as a background.

Customize the Home Page The home page design is a model intended to provide you with structure and a place to begin. You can change the function and design radically, or choose to modify these elements slightly. There are many animated elements provided to you as options, so it might be wise to choose only a few elements, or space out the animation cycles so that you don’t stun the user with too much motion. It’s better to direct their attention to one or two key places of interest rather than have a riot of color and motion. It’s also important to maintain consistency in design. Marketing studies prove that what most users perceive as quality in a Web site is actually consistency of function and design. Keep this in mind when you’re choosing the look for your home page. Make sure your design choices are appropriate for all of the material that will come after this section. The site that I’m creating is intended to attract visitors who have bought or are considering the purchase of a Bot. A Bot is a threefoot tall mobile robot that comes in eight different models. Each model is specialized to perform a certain household task, but a Bot owner can modify their Bot’s regimen by loading different regimen programs into the Bot Brain, a hard drive in the Bot’s head. The first release of the Bots didn’t sell as well as projected, in part because the users found them difficult to program. Only a clever marketing plan that emphasized the fun, easy-to-use features, and a revamp of the Bot interface saved the Bots from the scrap heap. The Web site for the Bots is a portal for sales but it also an online community where Bot owners can share tips, tricks, and receive regimen updates. The look and feel of the site is graphic, with bold cartoon-like illustrations and bright colors. The intent is to put the viewer at ease so they don’t feel intimidated by the true high-tech nature of the product.

Temporary Background In the Temp Background layer is a graphic symbol that covers the entire Stage area. Lock down all of the layers except for the Temp Background layer and double-click the Stage. You’ll be in the Timeline

Chapter 3


61

for Temporary Background 2. You can use the fill and stroke option in the Tool palette to change the color of the background and outline.

Blue and Green Backgrounds There are two static color field symbols in the Background layer. One is the blue color block that runs across the middle of the Stage, and the other is the vertical olive green block that sits behind it. Each of these graphic symbols are easy to edit in the context of the Stage or from the Library. Figure 3.26 The blue and green blocks of color.

Welcome Message The welcome message and intro to the products and services of this company is the graphic symbol Welcome Text. If you double-click the symbol instance on the Stage, you can change the text to any font you choose as well as change the color and point size. You’ll also need to change the content to reflect your own company info.

Company Name The Company Name layer holds the button titled Company Name. Replace this button with your own company name using the font,

Figure 3.27 Welcome Message text field on the Stage.

62

Figure 3.28 Company Name element on the Stage.

Flash Site Workshop

color, and point size that’s consistent with your current brand identity. You can also import your logo, convert it to a symbol, and swap out the graphic using the Instance panel.

Color Bar Animation The Color Bar Movie Clip is located in the Color Bar Animation layer. This is a straightforward alpha fade animation, and you can change the shape, color, and size of the squares easily. The basis for the animation is a single graphic symbol called Animation Square, so any change to this master symbol will effect a change throughout the color cycle square animation. Figure 3.29 Color Bar Animation Timeline.

Chapter 3


63

Promo Movie Clip The Mini Promo movie, titled Promo, exists as a Movie Clip in the Animations layer. Lock down all but the Animations layer and double-click the mini promo movie window on the Stage to access its Timeline. Figure 3.30 Promo Movie Clip Timeline.

The first layer (Text) contains the teaser copy. These messages aren’t symbols but rather static text fields that sit in the Timeline. To change the color, size, font and, of course, content, you can edit this directly on the Stage. The second layer (Blue Box) contains the graphic symbol Recessed Box that forms the perimeter of the box. You can edit the color, shape and size on the Stage or directly from the Library. The third layer (Mask) masks off the Bitmaps layer below it so that the tweening of the bitmaps is only visible inside the confines of the window. If you changed the size or shape of the Recessed Box symbol, remember to adjust the mask to fit the new dimensions. You can replace the bitmaps in the bottom layer with your product photos or any images that you’d like to use. You can swap out the bitmap symbol with your own, or create a new animation if you prefer to have the images fade, zoom, or rotate through the window. Be aware that tweening large bitmap images

Because Flash will compress your photos (also called raster images and bitmap graphics) to .jpg format upon export, it’s wise to start with the highest quality file format available. Starting off with a high quality bitmap can help to avoid an extreme double compression that can result in poor quality images upon export. Flash supports the importation of bitmap images in the .png format. .png, pronounced either Ping or P-N-G, is a 32-bit format that is similar to a .gif in that

64

Flash Site Workshop

it can support an alpha mask but has the color depth to rival 24-bit .jpg files. One of its key features is that it has an 8-bit alpha channel so it can support gradient transparency unlike the 1-bit alpha mask of a .gif. This enables you to create sophisticated masks with clean edges for your raster images. It also has a more precise compression algorithm than either the .jpg or .gif format, and provides a better quality image with few artifacts. It does result in a slightly larger file size than a .jpg or .gif, but this shouldn’t be a concern because you compress the file on export. If your original photographs are in an uncompressed format, such a .tiff, its best to compress them as .png files for importation into Flash for the best result upon rendering.

takes a lot of processor power. The result of too many bitmaps performing too many tricks can be a jerky, slow animation. To circumvent this issue, avoid having two or more large items tween at the same time—even as little as a frame or two will help. Give the processor a little time to juggle the tweens, and you’ll be much happier with the overall animation.

Figure 3.31 Design Studio banner on the Stage.

You’re not limited to the placement of this Promo Movie Clip; you can move it to any spot on the Stage in the main Timeline of the Main scene. If you do move the Promo Movie Clip, you may want to add a solid background to the window that extends to the perimeter of the Recessed Box symbol. If you move the Promo Movie Clip to a different section of the Stage and don’t add a background field, you would see the items behind it on the Stage. Remember that this in only a model, so you can shake it up a bit.

Banners There are two types of banners in the home page. The banner in the upper right region of the Stage can advertise the name of the company that hosts the site, or the name of the company that created the identity or site. This banner is clickable and will direct the user to the specified Web site in a fresh browser window. The second group of banners at the bottom of the Stage currently links to Macromedia Web sites. You’ll change these to reflect your advertisers or partners that warrant high profile placement. These, too, are clickable banners that direct your users to the sites of these companies. All of the banners are actually buttons, so it’s simple to swap out the graphics provided with your own graphics that you’ve either imported or created using the Draw tool provide by Flash. You must swap out the graphics, not delete and replace them. If you delete and replace the button, you’ll lose this script. Each Macromedia button contains the code: //This code opens a new browser window to Macromedia’s home page. //To change this link, change the address below.

on (release) { getURL (“http://www.macromedia.com”, “_blank”); }

Chapter 3

65


Figure 3.32 Advertisers’ banners on the Stage.

You need to change the URL address in the script to reflect the Web site that your users intend to visit. Remember that you can move these banners anywhere you’d like on the Stage and they’ll still function properly as long as you haven’t deleted the code.

Logo The Object Animation Movie Clip, which is the satellite animation you see at run time, can be found in the Animated Image layer. If you double-click the instance of the Movie Clip on the Stage, you’ll see that it’s a one-layer Clip with a simple tweens form the animation. You can easily swap out the artwork with your own logo. You can also replace the logo with a graphic of a featured product, or simply an interesting design element.

Figure 3.33 Satellite animation on the Stage.

Vertical Bar Animation Figure 3.34 Timeline of Vertical Bar Animation.

66

Flash Site Workshop

You’ll notice slim lines at run time that dance out from the solid light blue bar bisecting the Stage. This animation is a Movie Clip titled Vertical Bars Animation that exists in the Vertical Bars Animation layer. Double-click the Clip instance on the Stage to enter the Timeline for that Movie Clip to see three lines. The first two lines contain the slim lines that tween back and forth. These lines are comprised of the graphic symbol Line, so any change in color, size, or shape to that symbol will change both dancing lines. The bottom layer contains a drawn line, not a symbol, and would need to be edited directly on the Stage. You can change the keyframes of the line tweens to extend farther into the Stage, or move to the left as well as the right. You can also add more lines—it’s up to you. Side Line Animation Figure 3.35 Timeline of Horizontal Bar Animation.

When the Movie Clip is playing, you’ll see the horizontal bars loop from the top to bottom on the right side of the Stage. This is the Movie Clip Horizontal Bar Animation that lives in the Side Line Animation layer. Double-click the instance on the Stage to see its Timeline. The first layer, Actions, has a script at the end of it’s frames that sends the play head back to the first frame so the Movie Clip loops. The bottom layer, Horizontal Bars, contains the graphic

Chapter 3

67


symbol that is also named Horizontal Bars. You can edit the graphic symbol to change the color, size, or shape of the lines, or import your own graphics and swap out the symbol.

The Customized Home Page Here’s the customized home page for my fictitious robot company. Figure 3.36

Summary You can make this movie your own by using the many elements that have been provided to you. Remember that this is only a model. You are not locked in by the layout or feel, and you don’t have to use every feature and animation offered as an example. Use this movie as a springboard to realize your own ideas.

CHAPTER

4

1 2 3 4 5 6 7 8 9 10 11

Outline Background Green Background


12 Music On/Off Button 13 Scroll Up Button for Demo Text 14 Scroll Down Button for Demo Text

Blue Background Embedded Movie Outline Moving Info Text Company Name Text Feature Title Outline of Load Movie Controls Outline of Demo Text Window Product Demo Name

15 16 17 18 19 20 21

Load Movie Button #1 Load Movie Button #2 Load Movie Button #3 Launch New Window Button Go To Scene 1 Button Go To Scene 2 Button Go To Scene 3 Button

22 Return to Beginning of Movie Button

23 24 25 26 27 28 29 30 31

Rewind Movie Button Step Back Movie Button Pause Movie Button Play Movie Button Step Forward Movie Button Fast Forward Movie Button Go to End of Movie Button Content Area for Demo Text Content Area for Loaded Media

Chapter 4


What to Expect from This Chapter In this chapter you’ll customize the provided Flash movie to receive and present various types of media. It’s called a Container movie because it will contain the media, such as supplemental Flash movies and Panorama movies, that you will add later. The Container movie will be the interface that your viewers will use to access a series of Flash movies, QuickTime Videos, or Panorama Movies. The Container movie can be customized to be a product demo, give instructions on how to use a product or service, introduce your viewers to management leaders using video profiles, provide visitors with a virtual tour of your work or retail space, and so on. In this chapter, we’ll concern ourselves only with modifying the look of the interface; we’ll cover adding the actual content and customizing the features that will make this movie truly functional in Chapter 5, “Add Content to the Container Movie.” Although this chapter doesn’t talk about adding the content to your Container movie, you will need to know what type of content you will be adding to the Container movie to prepare your Flash movie to receive this media. The Container movie is capable of loading other Flash movies into a blank Movie Clip on the Stage. The blank Movie Clip can contain many different types of media, such as vector animations and bitmap images—including panorama photographs. It’s wise to read through Chapter 5 before you make the modifications to the interface in this chapter so that you can make informed design decisions. This will save you from making revisions later on. We will cover techniques for dealing with Flash and QuickTime content, but be aware that the Flash player doesn’t support QuickTime Video formats. QuickTime movies can be imported into the Flash application and exported as QuickTime 4 with a Flash track that contains interactive Flash elements. It’s desirable to use video for certain purposes, so I’ll present a work-around option for you so that you use JavaScript to launch video content in a browser window. The look, feel, and function of your Container movie shouldn’t deviate wildly from the design you’ve already established on your home page. You’ll also need to make sure that your navigation bar design is in harmony with your Container movie. When you start to customize the interface, you should also keep in mind the nature of the media that you will be loading into the movie. If you are choosing to use this movie as a product demo for a client that sells handmade Bavarian

69

70

Flash Site Workshop

bakeware, you most likely don’t want to use high-tech metallic buttons on the interface. Challenge yourself to keep the design consistent and relevant to your client’s needs. You’ll also need to keep an eye on your file sizes; a demo movie can become quite large very fast if you’re using bitmap images. It’s also a good idea to check your media streaming using the Bandwidth Profiler so you can predetermine where large chunks of data may hang up the movie during download. These issues will be further addressed in Chapter 5. In Chapter 3,”Design the Home Page and Site Identity,” I chose to customize my navigation bar and home page around a robot manufacturer whose products are marketed as high-tech, user-friendly mechanical assistants. I’ll now continue to build a site for this client. The Bot line of robot companions manufactured by RB Industries has just launched a new series of robots. There are three new Bots on the market and they’re a bit pricey. Studies done by the company’s inhouse marketing department have shown that current Bot owners visited the site an average of seven times before purchasing a Bot model or any accessories. RB Industries has made a conscious choice to keep its costs in check by opening brick-and-mortar Bot shops in only four cities world wide, so it’s unlikely that most Bot owners would have the chance to examine the entire line of Bots for themselves before making a purchase. As a result RB Industries has decided that it’s important to give as much information as possible on the Web site so potential consumers can feel that they are making an informed choice and thus more likely to buy a Bot. RB Industries believes that it can reassure clients by offering them multimedia presentations where they can see all the latest features of the Bots. This presentation also gives them the capability to turn the Bot around, take a good look at it, and see if they like it or not. That’s what my product demo movie is all about—showing off the Bot’s features and providing easy to access information about Bot models and accessories.

How the Container Movie Works There are several components that function together to make the Container movie work. Go to the CH04-Files/CH04-Originals folder for the Container movie on the CD-ROM. Make copies of all of the files you find inside of the folder and put them in your work folder. This folder contains a total of thirteen files: four .fla files

Chapter 4


(container.fla, movie_1.fla, movie_2.fla, and movie_3.fla), five .swf files (hz_Nav_Bar_new.swf, container.swf, movie_1.swf, movie_2.swf, and movie_3.swf), and four HTML files (movie.html, sub_movie1.htm, sub_movie2.htm, and sub_movie3.htm). To test these files, open movie.html in a blank browser window so you can view the file. In the browser window you’ll see the Container movie interface and the site navigation bar. You’ll also notice a blue car driving down the street in the schematic in the middle of the Stage. This is an external movie that has been loaded as soon as the main movie was launched in the browser. The buttons that you see in the white space beneath the Car movie control how the user interacts with the movie that been loaded; the buttons on the left side of the Stage give users the option to load other movies into that location. Click the gray rectangular button titled Scene 2 and you’ll see that the movie loaded into the location on the Stage is now on Scene 2. Now click the button titled Scene 1 to return to the first scene of the movie loaded on the Stage. When you return to Scene 1, you’ll see the car repeat it’s short drive. Before the car has finished it’s route, click on the Pause button. The car will stop. The buttons across the bottom of the white color field function just like the controls on a VCR or DVD player. You can play, pause, step forward or back, and hold down the rewind and fast forward buttons to rewind or fast forward through the animation. You can also skip to the beginning or end of the movie. Now click the silver rectangular button titled Flash Animation 2 on the left side of the Stage. You’ll see Movie 2 load itself into the spot on the Stage that had previously been occupied by Movie 1. If you click on the button called Flash Animation 3, Movie 3 will be loaded onto the Stage. On the left side of the Stage you’ll also see a text box that contains a few paragraphs of copy about the product. You can scroll through this text with the arrow buttons to the left of the field. Above the text box is a button with the graphic of a speaker that turns the soundtrack on and off. To the right of the music on/off button is the title Product Demo Name. Above that is the Company Name title that doubles as a button to the company’s home page. Below the white field is the text Feature Title. To the right of Feature Title is a blue button with a white X through it. This button contains the JavaScript that will launch a new browser window with an html document that has the current movie on the Stage embedded with it.

71

72

Flash Site Workshop

There are also several static graphic elements. The gray, blue, and green background symbols are present from the Home Page movie. A light blue 3-D line figure visually sets the active content area apart from the rest of the Stage. Now that you see how the movies operate, let’s take a look at the Flash files. In the Flash application, go to your work folder and open the file titled container.fla. Notice this movie only has one scene with one keyframe. The first layer, Actions, contains the stop() action that keeps the movie from looping. Beneath the Actions layer are the Forward Engine and Rewind Engine layers that contain the Forward Engine and Rewind Engine Movie Clips. The Clips are placed offstage in the upper left side, and contain the script that the forward and rewind buttons access when they perform their functions on the external movie that has been loaded into the Stage. The Buttons layer contains the instances of all of the buttons that appear on the Stage and the scripts that allow them to function correctly. The Animations layer holds the blank Movie Clip titled Container, which is the spot where the external movie is loaded on the Stage. Next is the Product Demo Scroll layer that contains the Movie Clip Text Scroll. Lock down all but the Product Demo Scroll layer and double-click the Stage over the scroll arrow buttons so that you’re inside the Timeline for the Text Scroll MC. The Text Scroll Movie Clip has two layers with one keyframe per layer. The top layer has a script that contains code relevant to the placement of the dynamic text field at run time. The layer beneath that contains the instances of the Movie Clips: scrollUp and scrollDown. Each of these Clips contain scripts that control the scrolling action for the dynamic text field. Now return to the main Timeline. The Text layer is for all of the titles and text fields that sit on top of the button on the Stage. The next layer, titled Static Graphics, contains the Movie Clip Screen, which in turn contains the graphic symbol for the white field on the Stage and the 3-D line figure that frames the movie loading area. Below the Static Graphics layer is the Background layer, which contains the blue and green background graphic symbols. And finally there is the Temp Background layer, which contains the graphic symbol that covers the entire Stage area so the Stage appears gray with a light blue border.

Chapter 4


There are many complex scripting options available for this movie. We’ll explore those in Chapter 5 because you may not need all of them, or you might need to customize them in a specific manner to suit the media that you are loading into the Container movie. We are concerned here with building the shell. I’ll warn you throughout Chapter 4 of elements that could be damaged if edited incorrectly. There are also instructions you will need to effectively manage the JavaScript necessary to perform the pop-up browser function. That, too, will be covered in depth in Chapter 5.

Customize the Main Container Movie You can recycle some of the elements that you used to customize your home page movie in the Container movie. You should copy and paste button symbols and graphic elements so that the look of your movies will stay consistent. This will also save you time because you won’t need to create every element from scratch.

Temporary Background Because this is a one-scene movie, you could do without a background symbol, but it’s been provided for you so you should take advantage of it. There are two reasons to use a background symbol: You’d like to have two different background colors in the same movie, or you want to make sure that the background color isn’t affected by outside tag interference. Sometimes the developer who creates the Flash file may not be the same person who is responsible for setting up the HTML file in which it’s embedded, or for loading one movie into another movie. A background symbol will ensure that your movie retains the background color you’ve intended. It’s not essential in this case, but it’s not a bad habit to acquire and it’s good knowledge to squirrel away. Lock down all but the Temp Background layer and double-click the Stage. You’ll find yourself in the Temporary Background graphic symbol. You can use the fill and stroke tools to change the color of the background. For my Bot demo movie, I’m using the same khaki brown color that I used in the Home Page movie for my background color.

73

74

Flash Site Workshop

Figure 4.1 Temporary Background symbol in edit mode on the Stage.

Blue and Green Backgrounds Lock down all but the Background layer. Double-click the Stage over the green color to the edit the Green Background graphic symbol. You can edit this field with the fill tool. You can edit the Blue Background symbol the same way. Because these are just filled rectangles, it’s actually easier to redo any edits that you may have done in previous files than to import a new graphic and swap symbols. Figure 4.2 Blue and Green backgrounds on the Stage.

Chapter 4

75


For the Bot demo I’ve chosen to turn the green background to bright orange and the blue background to mustard yellow to match the color harmony I’d established in earlier movies.

Embedded Movie Outline Lock down all but the Static Graphic layer and double-click the Stage over the outline around the embedded movie. You’ll find yourself in the Timeline for the Screen MC. Double-click the line on the Stage again. You’ll be in the edit mode for the Box Graphic symbol. Here, you can use the stroke tool to edit the color of the figure. You could change the shape as well—it won’t effect the function of the movie. Another option is to import a graphic you’ve created in an outside content-creation tool, such as Illustrator or Freehand, or use a symbol using the Flash tools and swap the symbols. Figure 4.3 Box Graphic symbol in edit mode on the Stage.

I like the visual effect that the 3-D-like line drawing creates around the Stage, so I’ll leave the shape as it is. But the light blue color doesn’t mesh well with my warm palette, so to make it snap I’ve changed the wireframe to white. Return to the Screen Movie Clip Timeline and double-click on the white color field on the stage to edit the Movie Screen graphic symbol. This symbol is only seen for a brief second between Movies Loading. You can change the color with the fill tool if you’d like, but it’s an element that most likely won’t be seen at run time. For my movie I’ve chosen to leave the Movie Screen graphic as it is.

76

Flash Site Workshop

Buttons There are several buttons on the Stage, and you can customize the look and placement of each one so that they are consistent with your design. It’s also wise to use the buttons in a way that will give the users a visual cue as to their function. To edit them it’s best to lock down all but the Buttons layer. It’s important to edit these buttons correctly. Each has scripts attached to the instance and if you were to delete an instance of the button and replace it with another, you would lose the code and the movie wouldn’t function correctly. The correct way to change the look of a button is to edit the Master Button symbol, or use the Swap Symbol feature in the Instance panel. The code will remain attached to the instance of the button on the Stage. Company Name Button Figure 4.4 Company Name button in edit mode on the Stage.

Double-click the Stage over the Company Name, or edit the Company Name button directly from the Library. You can edit the text inside the button, replacing it with your own company name, font and color, or you can import a logo and place it in the Up, Down, and Over states. Check the size of the Hit state to be sure it matches the size of your edited Company Name. You may already have customized the Company Name symbol in the home page; in that case, you could simply use the Swap Symbol feature on the Instance panel. Remember, if you delete the button instance, you lose the code. If you click once over the Company Name button instance on the Stage, you’ll see the code: // Substitute your company.com for the proper URL. on (release) { getURL (“http://www.yourcompany.com”, “_blank”); }

From the comments in the script, you can see that this code will open a new browser window with the company home page. The URL address is only a placeholder; you’ll need to replace this line with your own URL address. I’ve swapped out the placeholder button with the logo of the Bot manufacturer, RB Industries and set the URL to the corporate headquarters Web site.

Chapter 4


Sound On/Off Button Double-click the Stage over the speaker button and you’ll be taken to the Movie Clip named Speaker. This Clip has three layers. The Actions layer has a stop() action in the first frame. The second keyframe in the Actions layer has the label repeat sound and the last keyframe contains the code gotoAndPlay (“repeat sound”); which sends the play head back to the frame labeled repeat sound. The second layer is titled Sounds, and the second key frame contains an instance of a sound clip called Music_Loop. You can replace this music loop with one of your own. The easiest way to swap out sound instances is to use the Sound panel. If you have more than one sound in the Library, a drop-down list will display all sound choices and you can choose your new sound from that list. When you do replace the existing sound make sure that you add enough frames to allow the sound loop to play to the end of the Clip. This code in this layer causes the play head to return to the first frame that contains the sound track so the music will loop until an event comes along to stop it. The first keyframe of the Buttons layer contains an instance of SpeakerButton. Attached to this instance is the code: on (release) { play (); }

This code will send the play head to the next frame. The next keyframe in the Buttons layer is an instance of Speaker-Button-On and attached to this is the code: on (release) { gotoAndStop (1); stopAllSounds (); }

When the user clicks on the speaker button on the Stage, the play head is sent to the second frame of the Movie Clip. Because of the frame actions in the Actions layer, the music will loop until the user hits the speaker button again, which will send the play head back to the first frame. In the first frame, all sounds will cease and the play head will remain in Frame 1 until the button is clicked again. You can swap out the graphics in the Master Button symbols, but don’t delete and replace them or you’ll lose the code.

77

78

Flash Site Workshop

Figure 4.5 Timeline of the Speaker Movie Clip.

I’ve swapped out the graphic symbol provided with a graphic of a speaker that I created. I chose the color scheme of the button to match the rest of my site. I also decided I didn’t like the placement of the button on the Stage and moved it further down. Load New Movie Buttons

Figure 4.6 The Plain 3-D Button symbol in Edit mode on the Stage.

Below the text field on the left side of the blue background you’ll see a row of three silvery white rectangular buttons. Each of these buttons contains a script that will load a movie onto the Stage. Editing the code on these buttons will be covered in Chapter 5. The code is important so, once again, don’t delete the buttons—just swap out the graphics. Double-click one of the three buttons on the Stage and you’ll be taken to the Edit mode of the Plain 3-D button. Here you can change the graphics, or you can swap out the button instance on the Stage with a custom made button. All three buttons are built from the same symbol so a change to one master symbol will affect all three buttons. The text labels next to the buttons are static text fields that sit on the Text layer. You can edit the button labels as you would any static text field. The buttons provided didn’t fit in with the rest of my buttons because they were too three dimensional for my illustration-based look. I used the drawing tools in Flash to create new buttons. Because the buttons load different movies, I wanted the buttons closer to that area so I also decided to move the buttons to the right side of the Stage. Go to New Scene Buttons In the white color field, you’ll see the three buttons that enable the user to go to different scenes within the movie that is loaded. These buttons contain scripts that allow the user to navigate, so once again

Chapter 4

79


don’t delete the buttons. Either edit the master symbols directly or swap the instance of the button. Unlike the Load Movie buttons, the Go to Next Scene buttons are built from different symbols. The button for scene one is titled Scene 1 Text button, scene two is Scene 2 Text button, and scene three is Scene 3 Text button. The labels for the buttons exist within the buttons themselves. Doubleclick the button for Scene 1 on the Stage. You can see in edit mode that the button is made up of a box and text, which can be easily edited from the Tools panel.

Figure 4.7 Scene 1 Text Button symbol in Edit mode on the Stage.

I chose to leave the text font for the buttons as it is, but I changed the font color to white. I changed the names of the buttons to reflect the scenes of my movies. The shape of the buttons stayed as they were, but I did change the color. I wanted to establish that the section underneath the white field is the center for navigation related to the movie that is currently playing on the Stage. This is a way to set up a visual cue for the user that buttons in this deal with the current movie. So, I moved the buttons down further on the Stage out of the white stage area. Movie Control Buttons There are eight buttons across the edge of the white color field that function much like the controls on a VCR or DVD player. They control the actions of the play head in the movie that is currently loaded onto the Stage. Starting from the left the buttons go to the beginning, rewind, step backwards, pause, play, step forward, fast forward, and finally skip to the end. Attached to each of these button instances is a script that refers to labels inside the movie that is to be loaded onto the Stage. Remember not to delete these buttons. Either swap out the instance of the buttons on the Stage or switch the graphics within the buttons themselves. Double-click the Play button, for example. The graphics are easy to edit with the color fill tool, or you can import or create your own graphics. The buttons are not created from the same symbol so you will need to change each button independtly. I felt that the buttons were crowded together and might confuse my users, so I added some space between the buttons. I also put a round background behind each button to separate them visually from each other and used color consistent with my design. I liked the iconography of the arrows, so I left that alone. I’ve also moved the buttons

Figure 4.8 Play Button symbol in Edit mode on the Stage.

80

Flash Site Workshop

down out of the white field so that they sit next to the Go To Scene buttons to keep with my plan of visually grouping like navigation together so the users have an intuitive understanding of how the buttons function. Launch Window Button Figure 4.9 Display Button symbol in Edit mode on the Stage.

In the same area as the Go To Scene buttons and the group of Movie Control buttons you’ll see a square blue button with a white cross through the center. This button will launch a new browser window that contains the same Flash movie that is currently appearing within the outline so the viewer can get a better look at what’s going on. The ActionScripting for this button and the JavaScript needed to complete its function will be covered in Chapter 5. Don’t delete the button; just swap out the instance or edit the graphics inside the button time line. Double-click the blue button instance on the Stage and you’ll be inside the Timeline for the Display button. This is a simple button; you can edit the graphics with the draw and fill tools provided with Flash or you can import your own graphics. My users are known to be slightly apprehensive about new technology and my mission is to keep the interface as intuitive as possible without being overtly simplistic. Therefore, for my launch button I created a graphic of magnifying glass and placed it in background square to replace the current button graphic. Scroll Up and Scroll Down Buttons

Figure 4.10 Scroll Box Arrow Button symbol in Edit mode on the Stage.

The Scroll Up and Scroll Down buttons aren’t located on the Buttons layer. These button instances also have code attached to them so the instance must not be deleted. Lock down all but the Product Demo Scroll layer and double-click either the up or down arrow. You will find yourself in the Timeline for the Text Scroll Movie Clip. There are two layers in the Text Scroll Movie Clip. The top layer contains a line of code that refers to the placement of a dynamic text field at run time, but we’re not concerned with that right now. The second layer contains the instance of the buttons. Double-click the up arrow button. You’ll find yourself in the Timeline for Scroll Box Arrow button. The button is the basis for both the up and down arrow button; the instances are merely flipped in the correct position on the Stage; if you alter this symbol, both buttons will be affected.

Chapter 4

81


For my demo movie I’ve decided that the arrow buttons are too small, so I placed a background shape behind them and also added some space between them.

Text Elements There are a few text elements on the Stage that act as titles. Click the eye icon for the Text layer on and off and you’ll see instantly which elements are the text elements. Lock down all but the Text layer. The product demo name is the graphic symbol Product Demo Name Text. Its color, size, and typeface can be edited easily on the Stage or from the Library. The text labels for the Load Movie buttons are static text fields that sit on the Stage. You can chose any font you’d like to replace these, as well as color and point size, because none of these choices will affect the functionality of the buttons. The Moving Info Text is a graphic symbol. You can also change the color, size, and font face of this graphic. The feature title is the graphic symbol Feature Title Text and it, too, can be edited on the Stage or from the Library so that you can chose a different color, size, or typeface.

Figure 4.11 Moving Info Text Symbol in edit mode on the Stage.

I don’t need all of the text that came with the movie so I deleted all but the product demo title and moving info text symbol, and I changed their content, size, and color to suit my design.

Outlines In the blue background at the left side of the Stage is a box outline for the product info text box as well as a box outline around the Load Movie buttons. Both outlines are created from the same symbol, so you can easily edit both of these symbols. Lock down all but the Static Graphics layer and double-click the Stage over either of the box outlines. You’ll find yourself in the Recessed Box graphic symbol. Because both boxes on the Stage are instances of the same symbol, any changes to the Recessed Box symbol will affect both instances. You can change the stroke color, width, or shape, and it won’t affect the functionality of the movie at all. Because I’d moved the Load Movie buttons earlier to the right side of the Stage, I deleted that instance of the Recessed Box on the Stage. I also extended the instance of the Recessed Box symbol for the text area down to few pixels to fill in empty space. I also changed the stroke colors to match the color scheme of my movie.

Figure 4.12 Recessed Box symbol in Edit mode on the Stage.

82

Flash Site Workshop

Figure 4.13 My customized Container movie.

Summary The modifications covered in this chapter were only cosmetic. It would be a good idea to read Chapter 5 thoroughly before you attempt to make any serious modifications to the Container movie. There are endless options for the media that you can present using the movie as an interface. There are several elements provided to you so that you can make this movie your own and present a highimpact and informative experience for your users. Because of all these options, it’s better to have a true understanding of what type of presentation you will be making and what type of media you will use before you alter the look of the Container movie.

CHAPTER

5

Supplemental Flash Movie

QuickTime Video

Add Content to the Container

Scrollable Panorama

Chapter 5

Add Content to the Container Movie

What to Expect from This Chapter In this chapter I’ll break down the process of making the Container movie truly functional, loading supplemental Flash movies, and adding a Flash Panorama and a QuickTime video. In Chapter 4, “Build a Container Movie,” you learned how the Container movie is constructed and how to customize the interface. Now it’s time to learn how to modify the inner workings of the Container movie and the supporting media so that your supplemental Flash movies, Flash Panorama, and QuickTime videos will work with the options you’ve chosen to add to your site. The model Container movie provides you with the structure to take advantage of three options.

Loading Supplemental Flash Movies The Container movie enables integration of external Flash movies as well as the capability to launch a new browser window with a scalable version of each of these supplemental movies. You’ll now modify the provided code so that the user who is viewing your Container movie can control the play head in the loaded supplemental movie just like they’d use a remote control to control a DVD player or VCR. You have the code to launch a new browser window using JavaScript. This new window contains an HTML document with a scalable version of the current movie on the Stage so your viewers can take a closer look at a movie. You will also receive instructions on how to change the scrolling text field in the Container movie to reflect your text. When used together, these features enable you to create sophisticated and effective product or services demonstrations, tours, or presentations.

Scrollable Panorama The Panorama movie is made up of bitmap images that have been seamlessly assembled into one bitmap image to cover 360 degrees of the room. So when this movie is complete it enables the user to see an entire room, giving them a virtual 360-degree tour of any environment that can be photographed. The end product appears similar to a QTVR rendering of a space but this option doesn’t deal with QTVR, only bitmap images. This option involves launching a new browser window, which contains a Panorama movie that the viewers

85

86

Flash Site Workshop

can scroll through at different speeds. You can modify the provided code to increase or decrease the scroll speed of the movie. You will receive instructions as to how to integrate your Panorama photos into the movie. You have been supplied with the code that you need to modify to launch a new browser window that will house the Panorama movie.

QuickTime Video You can use the QuickTime video option to present video footage of sales presentations, management profiles, production process, detailed instructions, and so on. The Flash player doesn’t support QuickTime video. You can, however, import a QuickTime video into the Flash Application, use the code within Flash to create a control system that refers to specific points in the QuickTime, and export it back out in a QuickTime format. The qt.fla file was created for just this purpose. The model Container movie comes with the JavaScript code that you need to modify before you launch the new browser window that contains your QuickTime video. In Chapter 3, “Design the Home Page and Site Identity,” I began to build a site for the fictitious RB Industries Bot product line by creating a home page environment. In Chapter 4, I customized the interface. In this chapter, I’ll customize the elements provided to create a demonstration of their new line of Bots. RB Industries is concerned that sales might drop off because their new Bots are priced 40% higher than their previous models. The first Bots on the market were snatched up in a consumer frenzy and RB Industries was taken by surprise. In an attempt to ensure their new place in the market, they spent a great deal of money to develop new features for the Bot 2001 line as well as devoting a large part of their Bot budget to marketing and advertising. Their concern is two fold. The first concern is that the new, more technologically advanced models might frighten some consumers away. The second potential problem is the new price requires more commitment from the consumer than the first models, and people don’t buy products on a whim when serious cash is involved. RB Industries has decided that a detailed product demonstration will allay the fears of the technophobes among their potential consumer market. They also predict that the demos will give consumers enough info about their Bot of interest that they will feel they’ve given the

Chapter 5


Bot a test-drive before they buy it. In Chapter 4 I customized the interface that will receive and control the supplemental movies modified in this chapter to show off the Bots 2001 line. The exploration and customization instructions have been broken into three categories: Supplemental Flash Movies, Scrollable Panorama Movie, and QuickTime Video so that you can see how each feature relates to the Container movie. It’s best to read through the chapter before you undertake the final modifications to your movies. There are many features and options available, and each is dependent upon the other. You’ll need to have a clear plan of attack to complete the project successfully.

87

Loading Supplemental Flash Movies

1 Container Movie Clip

8 Pause Button

2 Loaded Supplemental Movie

9 Play Button

3 Load Movie Button

10 Step Forward Button

4 Go to Scene Button

11 Fast Forward Button

5 Go to Beginning Button

12 Go to End Button

6 Rewind Button

13 Launch New Window Button

7 Step Back Button

14 Scroll Text

Chapter 5


89

How the Supplemental Flash Movies Work We’ll start by tackling the supplemental Flash movies and then move on to integrating these movies into the Container movie structure. Make a copy of the contents of the CH05-Files/CH05-Originals folder on the CD-ROM in the same work folder that contains your Container movie and Movie.html files from Chapter 4. The files from Chapter 4 and 5 work together so it’s essential that they exist in the same directory. You have been provided with three movies for this option: movie_1.fla, movie_2.fla, and movie_3.fla. There are also three HTML documents that contain copies of these .swf files: sub_movie1.htm, sub_movie2.htm, and sub_movie3.htm. You’ll also need access to the movie.html and container.fla files. Using a browser, open a copy of the movie.html document. In the middle of the Container movie you’ll see a neighborhood map with a car that drives down the street and stops. When you click one of the Load Flash Animation buttons, a different movie appears in that space. When you click on any of the Scene buttons, a new scene is shown in the loaded movie. Across the bottom of the neighborhood map is a series of buttons that resemble the controls on a VCR. These buttons allow the user to return to the beginning, rewind, step back, pause, play, step forward, and go to the end of the movie. Click the blue Launch New Window button. A new browser window will open and a copy of the movie that is on the Stage will appear in the window. Now let’s look at the source files. Open container.fla in the Flash application. When you looked at this in a browser window and clicked one of the silver rectangular buttons titled Flash Animation, a new movie appeared on the Stage. This happens because the code in those buttons tells the Flash movie to load an external movie into the empty Container Movie Clip. You can locate the Container MC that receives these movies by locking down all but the Animations layer and double-clicking the circle in the white field on the Stage. You will also see that the instance name of the Movie Clip is This is important to note because the code in the buttons uses the instance name to target this Movie Clip. Click once on the Load Movie button instance that’s titled Flash Animation 2 on the Stage. You’ll see the following code:

container.

Figure 5.1 Container Movie Clip on the Stage.

90

Flash Site Workshop

on (release) { // We set the variable movie to 2 so that the display ➥button will launch the correct HTML file. movie = 2; setProperty (_root.container, _x, “300.9”); setProperty (_root.container, _y, “85.2”); _root.container.loadMovie (“movie_2.swf”); }

There is a piece of code in the Container movie that automatically loads movie_1.swf when the Container movie begins to play. The ActionScript above tells the Flash movie, on the release of the mouse, to load the movie called movie_2.swf into the Container Clip, and set the coordinates of the Clip to X 300.9 and Y 85.2. Let’s take a closer look at the following piece of that code: setProperty (_root.container, _x, “300.9”); setProperty (_root.container, _y, “85.2”); _root.container.loadMovie (“movie_2.swf”);

You’ll see the _root.container expression several times in this script. This bit of code is referring to the Movie Clip instance named container inside the root Timeline, which is the container.fla Timeline. Let’s take another look at this section of the script: // We set the variable “movie” to 2 so that the display ➥button will launch the correct html file. movie = 2;

You can see from the commented code in the Load Movie button that Flash is also setting the value of the variable movie to 2. This is important because this variable’s value is the information that the Launch New Window button will need to know to determine which movie is loaded into a new browser window. If you click once on the Launch New Window button, you can review the code to see the reference to this variable and it’s value. on (press) { if (movie == 1) { getURL (“javascript:openNewWindow ➥(‘sub_movie1.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”); } else if (movie == 2) {

Chapter 5


getURL (“javascript:openNewWindow ➥(‘sub_movie2.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”); } else if (movie == 3) { getURL (“javascript:openNewWindow ➥(‘sub_movie3.htm’,’thewin’,’ ➥height=270,width=385,toolbar=no,scrollbars=no’)”); } }

The code attached to the Launch New Window button must know which movie is on the Stage. This way, it can choose the correct HTML document to launch in the new window that will open when the user clicks the Launch New Window button. The assignment of the movie variable’s value will happen automatically so you won’t need to alter this code. It’s important to know what the code means and how it affects the rest of the functions. Even if you change the name of the .swf file that will be loaded into the Container Clip, Flash will use the movie variable to launch the corresponding HTML file, as long as you name your HTML files sub_movie1.htm, sub_movie2.htm, and sub_movie3.htm. The important thing to note about this option is that the code in the Load Movie button is related to the Launch New Window button, and that both of these button scripts concentrate on the activity that is happening in the Container Movie Clip. To understand how the supplemental Flash movie works, go to your work folder and open movie_1.fla in the Flash 5 application. This movie has four layers and three different scenes. In Scene 1, starting at the bottom is the Background layer, which contains the Derby Street Map Movie Clip. Above that layer is the Car layer, which contains the graphic symbol CAR 2, and above that is the Guide layer for the car’s motion tween. The top layer, Labels, contains the label 1 in the first keyframe. The last frame contains a stop() action. Scene 2 contains one keyframe label 2 with a stop() action. Scene 3 has one layer and two keyframes; the first keyframe is called 3 and the second keyframe is titled end. These frame labels are necessary because there is a bit of ActionScript in the Container movie that will need to read these labels in the Timeline. Let’s take a quick look at the code that

91

92

Flash Site Workshop

accesses these labels. Open container.fla in the Flash application and click once on the instance of the black rectangular button titled “Scene 2.” You can now look at the code attached to the instance of this button, which reads: on (release) { tellTarget (“container”) { gotoAndPlay (“Scene2”, “2”); } }

Figure 5.2 movie_1.fla.

This code is looking into the Timeline of the movie loaded into the Container Movie Clip, sending the play head to scene two and the frame labeled 2, and then stopping there. This is how the button navigates through the supplemental movie. The code in the Go to Beginning and Go to End buttons will also reference labels that exist in the Timeline of the supplemental movies. As you build your supplemental Flash movies, you’ll need to keep these label names intact so that the code in the buttons can reference the correct location. The first frame of your first scene will need to be labeled 1 the last keyframe of your last scene will need to be titled end.

Chapter 5

93


Customize the Container Movie for Supplemental Flash Movies In Chapter 4 you learned how to customize the cosmetic features of the Container movie. Now you’ll learn how to customize the functional features as well.

Supplemental Flash Movies Figure 5.3 The placeholder supplemental Flash movie.

Before you customize the functionality of the Container movie to load in your new supplemental movie, it’s best to have your supplemental movie ready. There are countless ways in which you can customize the Supplemental movies. The map and car animation movies are only placeholders; you will need to build your own demo or presentation. You can create an animation that provides instruction on how to assemble or use your product, provide a product demonstration, or any type of presentation that you’d like. The important point to remember is that you’ll need to maintain the label names in the top layer of your supplemental Flash movie so that the buttons in the Container movie can maintain control over the movie when it’s loaded. This should be easy to do as long as you have a Label layer and you make sure that the first keyframe of the first scene is labeled 1 and the last keyframe of the last scene has the keyframe label end. The last keyframe of each scene should also have a stop() action. While you have the movie_1.fla file open, take a look at the dimensions of the movie in the Modify Movie panel. The current movie is set to 347.9 pixels by 228.9 pixels. You’ll need to stick close to these dimensions because your movie will be loaded into a designated space inside the Container movie. The users will have the ability to scale up a version of this movie in a separate window to get a better look at it, so don’t worry if you feel this movie area seems too small.

94

Flash Site Workshop

When you have finished customizing the content in your supplemental movies, you’ll need to publish to .swf and HTML. The HTML document appears in the new browser window that is spawned by the Launch New Window button. The names of the HTML documents provided (sub_movie1.htm, sub_movie2.htm, and sub_movie3.htm) are referenced by code in the Launch New Window button instance in the Container movie, so you will have to maintain those naming conventions. When you publish the HTML from the Flash application, make sure that the dimensions options in the HTML tab are set to percent and not set to match movie so that the movie will scale. The Container movie will call the same .swf that is embedded inside the HTML document. So when you upload your files you will need to make sure container.swf, the HTML and supplemental .swfs remain in the same directory. Figure 5.4 Customized supplemental Help-Bot movie.

For my robot demonstration I’ve chosen to provide an animated character based on each model of the Bots. These characters will act as guides throughout each demonstration of features and accessories available for each Bot model. In this example I’ve created a demonstration movie for the Help-Bot model. This Help-Bot is named Harold and he appears with his optional mobile storage Bot. You can see from the Go to Scene buttons that were customized in Chapter 4 that the user has access to three scenes per movie. The first scene is an introduction, the second scene is detailed guide to the robot’s features, and the third scene offers details about the regimen software programs available for each model. The size of the standard supplemental Flash movie is 347.9 pixels wide by 228.95 pixels high; however, I’ve moved my movie control buttons out of the main Stage area so I’ll increase the size of my supplemental movies to a width of 347 pixels and a height of 280 pixels to fill the white stage space.

Chapter 5


95

Load Movie Buttons If you like, you can leave the code alone and name your new movies movie_1, movie_2, and movie_3. Then, just like swapping out the instance of a symbol, Flash will load the movie correctly. If instead you chose to rename your movies, you will need to alter a bit of code. Each of the three Load Movie buttons has the script that loads a different movie. For example the Flash Animation 1 button has the code: _root.container.loadMovie (“movie_1.swf”);

You will need to change movie_1.swf to the name of your .swf. This is the only section of the code that you will need to touch.

Go To Scene Buttons You will need to make sure that each of your scenes is titled Scene 1, Scene 2, and Scene 3 so that the code can find these labels. You can rename your scenes, but you’ll need to make sure that the code in each of the three Go to Scene buttons reflects the new name. You’ll also need to make sure that there is a label in the first keyframe of each scene that corresponds to the label reference in the code. For example, Scene 1 would have a keyframe called 1, Scene 2 would have a keyframe called 2, and Scene 3 would have a keyframe called 3. You can change these labels, but you will need to make sure that the code reflects the correct label. You can change the look, feel, and placement of these buttons. Those instructions are given in Chapter 4.

Supplemental Movie Controls In the Container movie is a series of controls that look similar to the buttons on a DVD player or a VCR. You saw how to make the supplemental movie rewind, skip to the end, step forward and back, play, and pause when you tested the Container movie. This set of control buttons will only work with the supplemental loaded movies; it won’t work with the Panorama or the QuickTime Video. The Panorama and QuickTime have their own set of controls. All of the code in the control buttons targets the current loaded movie. You won’t need to alter this code because it doesn’t refer to a specific movie—just the movie that happens to be loaded into the Container Movie Clip at the time. Of course, you can alter the

Figure 5.5 Control buttons on the Stage of the Container movie.

96

Flash Site Workshop

graphics for the buttons and their placement on the Stage, but those issues were covered in Chapter 4. Even though most of the code for these buttons should be left as is, it always helps to know how your movies work. Let’s take a look at how these control buttons work. In container.fla click once on the Go to Beginning button and look at the code in the ActionScripting window. It will read: // Movies 1, 2, and 3 are all labeled at the beginning of ➥each scene. Scene 1 Frame 1 is labled “1.” // Scene 2 Frame 1 is labeled “2,” etc. This script simply ➥tells the movie you loaded into the container // movie clip to go to Frame Label “1.” on (release) { _root.container.gotoAndStop(“1”); }

This code works off of the same principle as the Go to Scene button. It looks for the frame label in the movie that is loaded into the Container movie. When the user clicks the button, the code targets the movie that’s playing in the Container Movie Clip. The code then tells the play head to go to and stop at the frame labeled 1. Because this label is in frame 1 of the first scene of the movie, the movie will be reset to the beginning. This means you will need to make sure the first frame of the first scene of your supplemental movies contains the label 1 so this button can function correctly. Click once over the next button to the right, the Rewind button. The code will read: on (press) { _root.rewind.gotoAndPlay(2); } on (release) { gotoAndPlay (Number(_currentframe)+1); _root.rewind.gotoAndStop(1); }

In this bit of code, you’ll see a reference to rewind. Rewind is the instance name of a Movie Clip called Rewind Engine. The instance of this Movie Clip is placed off the Stage up and to the left in the Rewind Engine layer. Inside of this empty Movie Clip is the code that will send the loaded movie back frame by frame until the mouse is released.

Chapter 5


The rest of the code in the instance of the Rewind button deals with stopping the rewind engine when the mouse is released. The code in the Rewind button doesn’t refer to any labels in the supplemental movie; it simply counts off the frames from it’s current location. Move over to the next button to the right, the Step Backward button, and take a look at the Actions window. This button sends the loaded movie back one frame at a time. The code reads: on (release) { _root.container.Stop(); tellTarget (container) { gotoAndStop (_currentframe-1); } }

This code is telling the play head inside the loaded movie in the Container Movie Clip to move back (-1) frame per mouse release and stop. This code doesn’t rely on frame labels; it, too, counts off frames from its current location. The next button, the Pause button, contains the code: on (release) { _root.container.stop (); }

This code targets the Timeline of the loaded movie in the Container Clip and tells it to stop playing. Next is the Play button with the code: on (release) { _root.container.play(); }

Just like the Pause button, this code targets the loaded movie but this code tells it to play. The next button, Step Forward, contains the code: on (release) { _root.container.Stop(); tellTarget (container) { gotoAndStop (_currentframe+1); } }

This code is targeting the movie in the Container Clip and telling it to go forward one frame and stop. Like the Step Backward button,

97

98

Flash Site Workshop

this code doesn’t reference a frame label; it references the movie’s current location. The next button is the Fast Forward button that contains the code: on (press) { _root.forward.gotoAndPlay(2); } on (release) { gotoAndPlay (Number(_currentframe)+1); _root.forward.gotoAndStop(1); }

You’ll see reference to forward in the code. Forward is the instance name of the Movie Clip Forward Engine. The instance of this Clip exists to the upper left side of the work area, off the Stage on the Forward Engine Layer. You can see the white dot marker next to the marker for the Rewind Engine MC. It functions almost identical to that Clip. The last button, Go to End, contains the code: // Movies 1, 2, and 3 are all labeled “end” in the last ➥frame of Scene 3. // This script simply tells the movie you loaded into the ➥container // movie clip to go to Frame Label “end.” on (release) { _root.container.gotoAndStop(“end”); }

This bit of code is looking for the label end in the loaded movie so it can send the play head to that frame. You will need to make sure that the last frame in the last scene of your supplemental movies is labeled end and contains a stop() action.

Scrollable Text When you tested the Container movie, you could have scrolled through a text message that appeared in the blue color field on the left side of the Stage.

Figure 5.6 Scrollable Text Field.

In the container.fla file, lock down all but the Product Demo Scroll layer. Double-click the Stage on the area around the scrolling text field and you’ll be taken into Edit mode for the Text Scroll Movie Clip. This Movie Clip has two layers. In the bottom layer are two dynamic text fields. The largest of the two is located off the Stage in the work area

Chapter 5


99

and is associated with the variable load01. The smaller text field sits on the Stage within the scrolling text outline and is associated with the variable text01. The top layer contains the code text01 = load01;. This bit of code places the text field variable named load01 into the text field variable text01, which effectively places the text from the large off-stage dynamic field into the smaller text field on the Stage. Figure 5.7 Text Field associated with the variable load01.

The bottom layer of the Text Scroll Movie Clip also contains two more Movie Clips: scrollUp and scrollDown. These empty Clips contain the functions that are called upon by the code in the Scroll Up and Scroll Down buttons, also located in this layer. You won’t need to alter any of the code for the Scrollable Text feature. To change to content of the text, double-click the text field off the Stage; then copy and paste the text you have, or type over the existing text. The text is scrollable so you can add as much text as you’d like. This is a dynamic text field so you will need to choose from among the device fonts, if you choose to change the typeface. To change the color of the type, you’ll need to select the text field associated with the variable text01 that appears in the outline of the text scroll window. You will also need to select your new color from the Fill tool. Changing the color of the text in the load01 variable will have no effect on the color of the text at run time. This is counter-intuitive, so make sure you’re changing the color in the correct color field.

100

Flash Site Workshop

Figure 5.8 ScrollUp Movie Clip in the Text Scroll Clip Timeline.

As covered in Chapter 4, you can change the appearance of the scroll buttons. Be aware that the code that causes the text to scroll up and down is attached to the instances of those buttons. If you delete and replace the buttons instead of swapping out the instances, you’ll lose the code and the scroll feature won’t work.

Launch New Window Button As you noticed when you tested the Container movie in the browser window, the Launch New Window Button enables the user to click a button in the Container movie and have a new browser window pop up. This feature is used for all three of your options—Flash movies, Panorama, and the QuickTime video—in slightly different ways. From your work folder open the HTML document titled movie.html and take a look at the code. The following commented note is found between the forth and seventh line:

This comment tells you what the following JavaScript function will accomplish. Under the comment lines you’ll see the JavaScript function that the comment is referring to.

Chapter 5

101


<script language=”JavaScript”> function openNewWindow(URLtoOpen, windowName, ➥windowFeatures) { newWindow=window.open(URLtoOpen, windowName, ➥windowFeatures); }

This JavaScript function will pop open a new browser window when called upon to do so. In our case the call to pop open a new window comes from the Launch New Window button inside the Container movie. We’ll examine the code for that button shortly, but now it’s important to understand the role this JavaScript function plays in the correct operation of the pop-up option. The JavaScript function to open a new window must appear in the same HTML document in which the Container movie is embedded. This is because the code within the Container movie will expect the JavaScript function to be in that location. If the JavaScript function isn’t in the same document that contains the embedded Container.swf the user will receive a JavaScript error and the window won’t appear. Now that you understand what this JavaScript function does and where it must live, let’s look at the code in the Flash movie that will call this function. Open up Container.fla in the Flash 5 application and make sure the ActionScript window is open. Click once on top of the Launch New Window button on the Stage and look at the code attach to the button. It will read: // This is the button that launches the container movie. ➥Here we perform a series of conditional // statements to see what the variable “movie” is equal to. ➥We then launch the corresponding // html file. on (press) { if (movie == 1) { getURL (“javascript:openNewWindow ➥(‘sub_movie1.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”); } else if (movie == 2) { getURL (“javascript:openNewWindow ➥(‘sub_movie2.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”);

Figure 5.9 The Launch New Window button on the Container movie Stage.

There is a caveat that you’ll need to be aware of when calling JavaScript functions to open a window from a Flash movie. If your viewer is using Internet Explorer 3.0 or earlier on Windows or Internet Explorer 4.5 for Macintosh, the JavaScript function won’t work at all even though you’ve applied the code correctly. This is why it’s important that your sniffer at the entrance to your site is thorough so you can determine if any of these conditions are true and then decide how to address the issue before the viewer gets this far. The sniffers provided in Chapter 2, “Customize Your Sniffer,” do indeed check if your viewer is using any of these combinations. Like all things that involve publishing to the Web, you must make some compromises. If you feel a significant part of your audience wouldn’t be able to take advantage of this feature, you’ll need to decide if it’s a feature you’d like to include on your site.

102

Flash Site Workshop

Keep in mind that the worst thing that will happen when using loaded Flash movies is that your viewer won’t be able to pop open the new window with the scalable .swf movie. They can still view the same movie inside the Container movie; they just can’t get a better look at it. But if you are using the Panorama or QuickTime option these viewers won’t see those movies at all. The QuickTime video and the Panorama never appear in the Container movie—only in their own windows. If you choose to use this JavaScript option in a different context, for example as the only way to enter an essential section of your site, you’ll want to seriously consider this limitation. You can work around this issue by using the simplified Get URL action inside of Flash but you won’t have the same degree of control as you would if you’d used JavaScript. JavaScript will allow you to set parameters, such as window size and where the toolbar will appear. The Get URL will only enable you to open a window and place the specified URL inside.

} else if (movie == 3) { getURL (“javascript:openNewWindow ➥(‘sub_movie3.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”); } }

Figure 5.10 The three Load Movie buttons on the Container movie Stage.

For our current purposes we’re looking at the javascript:openNewWindow section of the code. This piece of ActionScript is actually calling the JavaScript function named openNewWindow that appears in line 9 of the movie.html document. This piece of code in the Flash movie calls that function and tells it to perform its duties. The JavaScript that appears in lines 9 through 11 of the movie.html document establish what the function named openNewWindow will do when it’s been called. You’ll see javascript:openNewWindow appears in the ActionScript code three times. This is because there are three different Flash movies that can be loaded in to the Container movie using the Load Movie button. The ActionScript that follows each javascript:openNewWindow command tells the new browser window how large it should be and what options should be available for the users to access on the new browser window. For example look at the line of code: javascript:openNewWindow(‘sub_movie1.htm’,’thewin’,’height=270, ➥width=385,toolbar=no,scrollbars=no’)

We know javascript:openNewWindow will open a new window. The next bit of code that appears in the parenthesis, ‘sub_movie1.htm’, indicates which HTML document will appear in the new window. The rest of the line ‘thewin’,’height=270,width=385,toolbar=no, scrollbars=no’ is setting the perimeters of the window. The height of the window will be 270 pixels and the width will be 385 pixels. There won’t be a toolbar, nor will there be scroll bars on the window. You won’t need to customize the JavaScript function in the Movie.html document. The function doesn’t contain any information that relates directly to any specific element. It merely does what it’s told—open a new window. You’ll need to customize the ActionScript that appears inside the Launch New Window button to ensure that the new window contains the HTML document that you’d like as

Chapter 5


well as to set the size and features available on the window itself. I’ll take you through the customization techniques for one of the three line of code that launches the new window containing the supplemental movies. You’ll be able to apply the knowledge to the remaining two. Return to the code that is attached to the Launch New Window button in Container.fla. Again, you’ll see: // This is the button that launches the container movie. ➥Here we perform a series of conditional // statements to see what the variable “movie” is equal to. ➥We then launch the corresponding // HTML file. on (press) { if (movie == 1) { getURL (“javascript:openNewWindow ➥(‘sub_movie1.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”); } else if (movie == 2) { getURL (“javascript:openNewWindow ➥(‘sub_movie2.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”); } else if (movie == 3) { getURL (“javascript:openNewWindow ➥(‘sub_movie3.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”); } }

The comments at the beginning will list the process that’s going on in this ActionScript. Flash is looking to see which movie is currently loaded onto the Stage. Within the on (press) event is an if-then statement that determines which movie is on the Stage and then launches it. You’ll notice that each “if” statement contains == 1, == 2, or == 3. Each of the three Flash movies loaded onto the Stage has been assigned the value of one, two, or three by the code in the Load Movie button. When Flash knows which movie is present, it will use the getURL code to place the appropriate URL in the new browser window that will pop up as soon as Flash processes the next line of code. The part we’re concerned about here is the perimeters of the window that will pop up. The way the code reads now, the user can’t resize the window. If the user can’t resize the window, they can’t scale the movie inside up or down. If you want the user to be able to scale your movie, you’ll need to change this. At the end of the line

103

104

Flash Site Workshop

getURL (“javascript:openNewWindow(‘sub_movie1.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no’)”);

you’ll need to add the perimeters that will allow the user to scale the new window. Add this bit of JavaScript directly after the scrollbars=no perimeter: resizable=yes,menubar=yes

The new code should look like this: getURL (“javascript:openNewWindow(‘sub_movie1.htm’,’thewin’, ➥’height=270,width=385,toolbar=no,scrollbars=no, ➥resizable=yes,menubar=yes’)”);

You will also need to make sure the movies that you are loading are set to be scalable when you publish the HTML file that contains your .swf file. Refer back to the section regarding customizing the supplemental movies if you need more information on this detail. This JavaScript function will be called from the Flash movie in the Panorama and QuickTime options as well. Those instructions will be included in each section pertaining to the specific movie.

Publishing the Container Movie with Supplemental Flash Movies When you have completed your customizations of container.fla you’ll need to export the updated .swf file. The HTML document movie.html is set to embed the file titled container.swf so you only need to re-export your fla as container.swf, you won’t need to alter any of the code in the HTML document unless you have altered the dimensions of your movie.

Chapter 5

105


The Customized Supplemental Flash Movie This is my customized Container movie with one of my new supplemental Flash movies playing. Figure 5.11

Scrollable Panorama Movie

1 Panorama Movie 2 HTML Document 3 Launch Panorama Button 4 Container Movie

Chapter 5


How the Panorama Movie Works The Panorama movie lets you present a 360-degree view of any environment you’d like to show to your audience. This movie will also enable your viewers to scroll to the right and left so they can see the entire image. You could use the Panorama to show a retail space, building interior, factory floor, and more. Open the file panorama.htm in a browser window to test it out. You’ll see a spinning room. When you move your cursor into the area of the photograph of the room, the spinning slows. If you move the cursor to the right or left, the photo spins in that direction. Now open up Panorama.fla in the Flash 5 application. You’ll see it has four layers and one scene. The bottom layer, Pan-Object, contains the Slide-Object Movie Clip that has some code. Inside the SlideObject MC, the Pan-Object Movie Clip holds the 360 degree photograph of the room. The Mask layer above it masks off the area of the Stage where the photography will be seen. Above that is the Drag Engine layer containing an empty Movie Clip that holds the code to enable the user to control the spin action of the movie. The top layer, Actions, contains code that helps operate the Drag Engine.

Customize the Panorama Movie There isn’t much to customize in the Panorama movie. You can change the speed of the rotation and you can add your own Panorama Photograph.

The Drag Engine Let’s start by dissecting the Drag Engine. Lock down all of the layers in panorama.fla except Drag Engine and go to frame 2. The dragControl Movie Clip exists off the Stage to the upper left. You can spot the small white dot marker. Double-click the instance and you’ll be in the Timeline for dragControl. The code in the first frame begins with the following: // Define the drag speed here. speed = 15; //Increasing the value of the variable “speed” will make the ➥panorama //control slower. Decreasing the value will increase its ➥speed.

107

108

Flash Site Workshop

Figure 5.12 The Drag Engine Movie Clip instance off-stage in the work area.

This is the frame where most of the action happens. The comment in the first line tells you how to set the speed of the spinning Clip. Changing the value of speed from 15 to a value of 20 will make the movie spin slower while setting the value to a lower number will make it go faster. Beneath that statement you’ll see: drag = _root.dragEngine; _root.w = getProperty(“_root.panObject”, _width); _root.Xloc = getProperty(panObject, _x); _root.Yloc = getProperty(panObject, _y); _root.Xloc = _root.Xloc-(400/2); setProperty (“_root.panObject”, _x, getProperty (“_root.panObject”, _x)-(_root.Xloc/speed)); if (Number(getProperty(“_root.panObject”, _x))0) { setProperty (“_root.panObject”, _x, -_root.w/2); } //The only code you will need to modify is the names of ➥your movie clips //if you decide to give them different names. Here we have ➥used panObject //and dragEngine.

As the comments state, the only thing that you’ll need to change in this code is the name of the Movie Clip instances if you altered either

Chapter 5


109

one of them in the main Timeline. The Movie Clip instance name panObject refers to the Slide-Object Movie Clip that lives in the PanObject layer in the main Timeline. This is the Movie Clip that holds the panorama photograph. The other Movie Clip, dragEngine, is the Movie Clip instance and contains the code that makes the drag engine work. I don’t recommend renaming either of these instances; it’s not necessary for any of the customizations we’ll do here.

Panorama Image To replace the placeholder photo with your own panorama photo, import your image and then double-click the Pan-Object Movie Clip in the Library. Replace the photo on the Stage with your photo. This won’t affect the code because the instance of this Movie Clip remains where it was placed originally and retains its instance name. If your photo isn’t exactly the same size as the placeholder (no doubt it won’t be), you will need to resize the mask and movie size to accommodate your new photo. You will also need to publish your .swf and a new HTML document to accommodate the new dimensions. Because this HTML document is referred to in a JavaScript code statement in the Container movie, you must make sure that the name of your new HTML document matches the name you have used for the HTML document in the JavaScript that opens the new window.

Launch Panorama Button in Container Movie You’ll need to add a button in the Container movie to enable users to launch the Panorama movie. Add a button to your Container movie that is similar in look and feel to the other buttons you’ve chosen, and then add the code to the Button instance in the Container movie, which will launch the new window. As an example I’ve created a new button in the Container movie by placing an instance of the button called Plain 3-D button on the Stage underneath the three Load Movie buttons in the Buttons layer. I copied and pasted the text label from one of those buttons and changed it to read Panorama Tour. I then placed the following code into the Actions panel of the instance of the Panorama button: on (press) { getURL (“javascript:openNewWindow ➥(‘panorama.htm’,’thewin’, ➥’height=400,width=500,toolbar=no,scrollbars=no’)”); }

Figure 5.13 The new Launch Panorama Tour button on the Container movie Stage.

110

Flash Site Workshop

This ActionScript will call the function that exists in the Movie.html document, launch a new window, and load the document titled panorama.htm within that window. This file name must match exactly the file name of the HTML document that you published for your new panorama movie. You’ll also notice the window perimeters are set to a height of 500 pixels and a width of 400 pixels. These are the dimensions of the sample Panorama movie that has been provide for you. You will need to set the perimeters to fit the dimensions for your own Panorama movie.

The Customized Scrollable Panorama For my Panorama movie I replaced the photo provided with a photograph of the studio where the fictional Bot designers come up with new Bot lines. My potential customers can now see where the concepts for their robots are born. Figure 5.14

QuickTime Video

1 HTML Document

6 Play Button

2 QuickTime Video

7 Step Forward Button

3 Go to Beginning Button

8 Go to End Button

4 Step Back Button

9 Launch QuickTime Video Button

5 Pause Button

10 Container Movie

112

Flash Site Workshop

You can use QuickTime video for a variety of purposes: product demonstrations, as introductions to staff, management personnel, or presentations, the list is endless. Although the Flash Player doesn’t support QuickTime video, you can add a track to a QuickTime file in the Flash application. In this track you can add Flash-based controls that can talk to the QuickTime video. To do this you’ll need to import video into qt.fla and then export a QuickTime video from Flash when you have finished the customizations. This option will provide you with a way to use QuickTime video in your Flash site to inform or entertain your viewers.

How QuickTime Video Works Open the file quicktime.htm in a browser window and a video will appear. If you click the Play button, a man will introduce himself and name off events one through five. You can stop him at any point with the Pause button, go back and forth between events, rewind to the beginning, or skip to the end. Open qt.fla in the Flash 5 application. You’ll see a four layer, one scene movie. The top Comments layer is a Guide layer that won’t export with the movie. The next layer is titled Frame Labels and contains the labeled frames for the controls. The first frame is called begin, followed by event 1 through event 5 and end. These labels correspond to certain events that happen in the Timeline of the video. The next layer is called Flash Control and contains the control buttons. The bottom layer is titled QT Video and holds the place for the imported QuickTime video. Scrub the cursor across to frame 142 and click the Go to Beginning button on the Stage. In the actions window you’ll see the code: //Tells the movie to go to and play the frame labeled “begin.” on (release) { gotoAndPlay (“begin”); }

You can see from the comment that this code will send the play head back to the frame labeled begin. Next look at the Step Back button, which contains the code:

Chapter 5


on (release) { gotoAndPlay (“event 1”); }

We’re at a place in the Timeline right after the event 2 marker, so to step back the play head would be sent to the frame labeled event 1. The next button to the right, Pause, contains the code: //Tells the movie to stop. on (release) { stop (); }

This code tells the movie to stop playing. The Play button has the script: //Tells the movie to play. on (release) { play (); }

This script will play the movie. Next is the Step Forward button with the code: on (release) { gotoAndPlay (“event 3”); }

This code will send to play head ahead to the next event marker. Then finally there is the Skip to End button with the code: //Tells the movie to go to and play the frame labeled “end.” on (release) { gotoAndStop (“end”); }

This code will send the play head to the frame labeled end and stop there. This structure is similar to the code structure used for the supplemental Flash movie controls, in that it uses frame references to tell the play head where to go. The buttons attached to the Go to Beginning, Pause, Play, and Go to End code is always the same; however, because the Step Back and Step Forward control buttons must move through the movie relative to where the movie’s play head is currently located, each instance of these buttons contains different code at every labeled keyframe juncture.

113

114

Flash Site Workshop

It’s important to note that the QuickTime video imported into Flash never truly becomes part of the Flash .fla file. Flash maintains a pointer to the source file of the QuickTime movie. You can set the directory path of the movie in the Library but a path will be established when you import the .mov. You only need to change the path if you move the .fla or .mov out of the original directory. To change the path, go into the Library and select the QuickTime movie. Then Choose Properties from the Options menu and click Set Path in the Video Properties dialog box. When you export the file as a QuickTime you should choose the flatten file option so the .mov file is selfcontained. This means the Flash components become a permanent part of the new QuickTime file and you won’t need to worry about maintaining external links.

Customize the QuickTime Movie There are two paths to go down with the QuickTime option. If you don’t need to include Flash driven controls in your video, you can embed your video directly in an HTML file and use the JavaScript code in the Launch Video button to open up a window with that HTML document inside. You can experiment with Flash and QuickTime on your own. QuickTime supports all Flash actions except for the Flash load movie action. In our example, a Flash track in a QuickTime movie contains an action that goes to a particular Flash frame. QuickTime converts this to a command that it understands and the play head goes to the QuickTime video in the corresponding Flash frame.

qt.fla file If you’d like to add the control buttons to your QuickTime video, you will need to prepare QuickTime and import it into qt.fla. I suggest that you delete the current QT Video layer and place your QuickTime in a fresh layer. When you import a QuickTime video into your Flash movie it will only place one frame in the layer. You will need to add enough frames so that the last keyframe in the layer with your QuickTime video matches the end of the Timeline in your QuickTime video. When you have done that you can scrub across the Timeline to determine where your key events will be. Then you’ll need to move the event frame labels to correspond to the events you want to reference in your video.

Chapter 5


Make sure that the keyframes that hold the control button instances are moved in the Timeline accordingly so that they, too, refer to the correct event. You should change the graphics for the button instances to match those buttons that appear in your other movies. Be sure that when you alter the look of the buttons you swap out the graphics or buttons and don’t delete and replace or you’ll lose the code. When you’ve completed your control customization in Flash, you’ll have to publish the movie as a .mov format. The Flash player doesn’t support video; if you export it as a .swf, the video will disappear. You’ll then embed this .mov file in an HTML document called quicktime.htm. If you leave the file name of the .mov file qt.mov, you can use the included quicktime.htm file because it correctly references everything. When you’ve completed your customizations you’ll need to publish the QuickTime movie with the Flash track: 1. Choose File, Publish Settings. 2. Select the QuickTime option from the list of possible formats to

publish. Enter you file name or use the default name chosen by Flash. Then click the QuickTime panel tab to view its settings. 3. Select Match Movie to make the QuickTime movie the same

size as the Flash movie. You could also enter a width and height yourself for the QuickTime movie you are preparing to export if it will differ from your current Flash movie. 4. The Alpha track default setting is auto. For our purposes that’s

the correct setting. 5. Choose the Top Layer option to make sure the Flash track is

always on top of other tracks in the QuickTime movie. This will ensure that your controls will be visible to your user when they play the movie. 6. Select Streaming Sound so that Flash will export all of the

streaming audio in the Flash movie to a QuickTime sound track. 7. Leave the Controller option on the none setting. Since you’ve

created your own controller in Flash you don’t want to add a QuickTime controller too. 8. Choose your Playback options to control how QuickTime plays

a movie. The movie that was provided to you had the Paused at Start option chosen. This means the movie is on pause until a user clicks a button in the Flash control panel.

115

116

Flash Site Workshop

9. Select Flatten (Make self-contained) to combine the Flash

content and imported video content into a single QuickTime video. Deselecting this option makes the QuickTime movie refer to the imported files externally; the movie won’t work properly if these files are missing. 10. Publish the file.

Launch QuickTime Video Button in Container Movie You’ll need to create a button in the Container movie that will open up the browser window with the QuickTime movie embedded. As an example I’ve created a new button that I’ve placed under the buttons that will load the supplemental Flash movies. I created the new button by placing an instance of the Plain 3-D button on the Stage underneath the three Load Movie buttons in the Buttons layer. I then copied and pasted the text label from one of those buttons and renamed the category Company Video 1. Figure 5.15 The new Launch QuickTime Movie button on the Container movie Stage.

I placed the following code into the Actions panel of the instance of the Company Video 1 button: on (press) { getURL (“javascript:openNewWindow ➥(‘quicktime.htm’,’thewin’, ➥’height=240,width=320,toolbar=no,scrollbars=no’)”); }

This ActionScript will call the function that exists in the Movie.html document, launch a new window, and load the document titled quicktime.htm within that window. You’ll also notice the window perimeters are set to a height of 240 pixels and a width of 320 pixels. These are the dimensions of the sample QuickTime that has been provided for you. If your dimensions are different, you’ll need to change those to match. Refer to the Documentation that came with your Flash 5 Software for additional tips and tricks to help you use QuickTime and Flash together.

Chapter 5

117


The Customized QuickTime Video I’ve chosen to use the control button feature for my QuickTime movie. My QuickTime video is a two-minute video that extols the virtues of the Bot as a virtual companion and helper. My users can move back and forth through the Timeline of the video to review certain features, or they skip ahead to the Robot dance number at the end. Figure 5.16

Summary You’ve been provided with the material and information to include three different types of media in your Container movie. Using these options you’ll be able to forge a highly sophisticated and polished multimedia experience for your viewers.

CHAPTER

6


The Intro Scene

The Inventory Scene

The Close-Up Scene

The Carousel Scene

The Thumbnails Scene

120

Flash Site Workshop

What to Expect from This Chapter By the time you get to the end of this chapter, you should be feeling like you can single-handedly take over the world. Am I exaggerating? Well maybe, but working through this chapter and experiencing the features of Flash 5 of which you might not have been aware, or might have previously ignored will leave you inspired to bigger and better things. (And you will also have a fully functioning online store at your disposal.) All that will be left for you to do at the end of the chapter is to locate a host for the store and integrate your information with the services of a secure host for the purposes of transaction processing. Although the actual check out process is beyond the scope of this book, Chapter 13, “Site Publishing Considerations,” contains some useful information to help you make decisions about hosting and publishing. You can customize the interface for your animated store as easily as any of the other movies; it’s designed to integrate completely with all of the other elements and chapters in the book. The store is split into five individual scenes inside of the movie, each scene performing different actions. The key to the functionality of the movie is the seamless integration between Flash 5, XML, the backend MySQL database, and the .asp files. When I’ve taken you through the XML-driven store and the simplicity of the backend MySQL database, you will wonder why you didn’t think of using Flash to create your store sooner. We will look at each of these scenes in detail as we work through the chapter.

The Intro Scene The user will first see the Intro scene when the store is loaded. The scene acts as an introduction to the store and the visitor is given a list of options for how the items in the store are displayed. The visitor is also offered search options to make finding items easy and straightforward.

The Inventory Scene The Inventory scene displays a list of the current products held in the company inventory. Clicking a display button enables the user to reorder the product display accordingly. Inventory items can be displayed alphabetically as well as by category, price, or stock

Chapter 6


number. Links are available to view thumbnails of the stock items, jump to the Carousel scene, or place an order. The Inventory scene also has a Movie Clip called specials, which displays specially priced inventory items in the database. The images in the Specials Movie Clip are also clickable, and will take the user to the Close-Up scene where they can see further product information.

The Close-Up Scene In this scene, the product is displayed via a highly graphic interface. The Close-Up scene is designed to allow the visitor to see a selection of different views of the product they have selected. The visitor can zoom in on the product for a close-up view, or it can be rotated left or right. A product description is also available for the visitor to read, along with options to choose the size, color, and quantity of any item they want to purchase. The Add to Cart button is displayed as well as an option to print a brochure. The user still has the option to go back to the Carousel or Thumbnail screens.

The Carousel Scene The Carousel scene gives the site visitor a chance to scroll through the images of all products in the inventory. The Carousel itself is a scrollable area in the middle of the display that shows three images at a time onscreen. Rolling over any image will show a product description and clicking a product image will take the user to the Close-Up product page where an Add to Cart option becomes available. As in the other scenes, the user has the option to switch to one of the alternative views at any time.

The Thumbnails Scene The Thumbnails scene is used to display thumbnail images of the inventory. A thumbnail for each item is displayed in the top of the screen. Rolling the mouse over any of these graphic images will bring up product information at the bottom of the screen. Clicking any thumbnail will take you to the Close-Up product page for that item. A drop-down menu allows the user to sort the thumbnail listing alphabetically, or by stock number, category, or price. The user can switch to another scene via one of the three buttons at the bottom. The Thumbnail scene includes the Specials movies also found in the Inventory scene.

121

122

Flash Site Workshop

I have chosen to customize the store for a computer company selling everything from systems to peripherals to networking solutions. As the company is computer-related, the site needs to be clean, visually appealing, and, most of all, easy to operate. For this reason I have chosen to use the company’s existing corporate identity and integrate this into the store. A nice, rich mix of blues and white with clear black text will help to immediately identify the site as belonging to Computerlink (Leicester) Ltd. The purpose of the online store is to create an easy-to-use, friendly environment where customers can shop and find enough product information to help them make informed purchase decisions.

The Intro Scene

1 Temporary Background

6 Inventory text

2 Blue Background

7 Links to other views

3 Green Background

8 Buttons to change the sort

4 Ad Banner 5 Catalog Glance text

order

9 Company Name Button

124

Flash Site Workshop

How the Intro Scene Works Start by copying the appropriate files from the CH06-Files/CH06Originals folder from the accompanying CD to your working folder on your hard drive. Open the store.fla file and be sure you’re looking at the Intro scene. If you have not yet configured the .asp and MySQL files to work on the server, you will need to do so before you can test the Animated Store. Full instructions for configuring and publishing the appropriate files are located in Chapter 13 of this book; take a look if you want a little help in getting the files configured. Before we start changing anything, let’s have a look the Timeline for the Intro. Figure 6.1 The Intro scene Timeline.

As Timelines go, this one has more layers than most, but don’t be alarmed. Unlike a lot of the Timelines discussed in the book, the Intro scene does not have an Actions layer because it simply doesn’t need one. The Intro scene is merely there to set the stage for the main workings of the store. Let’s start at the top of the Timeline and work our way through the layers. The Category, Alpha, Price, and Stock layers contain the text and buttons that enable the user to change the way the inventory items are displayed. Each layer has a text description informing the user what will happen when the relevant view button is clicked. The buttons are graphic symbols in this scene but become active in the Inventory scene. The Entire, Click, Thumbnails, Carousel, and Place layers contain buttons to take the user to the alternate store views.

Chapter 6


125

The Inventory layer contains a single static text symbol and the Text layer contains the introductory text for the movie. The Banner layer contains a bitmap image called Banner Ad and the Company Name button. As the name implies, this can be used as advertising space on your site that you can sell to other advertisers. The last three layers in the Timeline contain the three background images for the movie: Green Background, Blue Background, and Temporary Background. That’s the first scene in the Store movie. Let’s move on to customizing our online store.

Customize the Intro Scene In the Intro scene, none of the layers are locked, so they can all be accessed directly by double-clicking the item on the Stage. Alternatively, you can access symbols through the Library, or by locating them in the Movie Explorer.

Temporary Background Figure 6.2 The Temporary Background symbol.

The Temporary Background symbol is located in the TEMPORARY BKG folder of the Library and appears in the Temp Background layer. The temporary background can be changed to match any corporate feel you want for your site. If you have already made changes to this symbol in other movies, you can simply drag the customized version from the appropriate Library and use it here.

126

Flash Site Workshop

I have opted to change the fill color of the symbol to a deep blue to match the corporate identity of my company.

Green and Blue Backgrounds Figure 6.3 The Blue and Green Background symbols.

Both the Blue and Green Background symbols are located in the BACKGROUNDS folder of the Library and are simply used to add dimension to the site. You can be as creative as you like in how you change them, simply by changing the solid fill color, applying a gradient fill, changing their shape, or any other change you feel is appropriate. By editing the symbol directly, you will be updating it in all scenes, so changes need be made only once. In my customization, I changed the green background to a pale cream. However, I changed the blue background to a pale blue diamond. In this case it was easier to redraw the background within the master symbol than it would have been to try and edit the original. I edited the symbol directly on the Stage to make sure that the positioning was correct for the overall movie. Remember that when changing the shape or position of a symbol, you need to update the position in the keyframes of the other scenes in the movie.

Text Symbols

Figure 6.4 The Catalog Glance Text symbol.

The Text layer and Inventory layer both contain plain text symbols. The Inventory Text symbol located in the TEXT folder of the Library quite simply says Inventory. You can change the text to say anything you like, and can certainly change the font, size, and color of the text. Updating the master symbol will update it throughout the movie.

Chapter 6


127

For my site I decided to leave the text the same and simply change the color and font to match the rest of the site. Again, if you reposition the text, remember to update the positioning in all relevant keyframes throughout the movie. The Catalog Glance Text symbol, also located in the TEXT folder of the Library, fades into view and is designed to introduce the online store. The text must be updated to reflect the name of your company or organization, rather than the default text introducing ‘company name.’ Don’t expand the line lengths too far because they still need to fit in the space designated. I changed the text to sound more welcoming and friendly and updated the font and color to match the rest of the site. I also added a large line of text as a welcome message, and then used plain black text to sit on my customized background.

The List Option Buttons and Text Viewers can choose how they’d like the inventory sorted by clicking one of the four list option buttons under the introductory text. The actual symbol names for the four buttons are Alpha, Category, Price, and Stock, and are nearly all identical. These are located in the STATIC GRAPHICS folder of the Library. Each uses the Plain 3-D Button symbol located in the BUTTONS folder of the Library and has a line of descriptive text to the right. Because the behavior of the buttons has been set to Graphic in the Instance panel, none of the buttons become active until the Inventory scene. The Plain 3-D Button used here forms the basis for all the other buttons used throughout the movie. If you want the changes you make to impact all the buttons that use the Plain 3-D Button as a base, such as the Add to Cart button, Buy button, and the Print a Brochure button, you can modify the master symbol. Alternatively, you can simply modify instances of the button as they appear. For my site I redesigned the master symbol to give a universally different look to the button everywhere that it is used in the movie, as the 3-D effect didn’t fit with the overall look and feel of the customized site. To lose the 3-D effect, I removed the inner part of the button, changed the outline color to match my site, and kept a gradient fill inside the button. The gradient gives a nice fade effect between the colors used in the site. To add more interest and clarity for the user

Figure 6.5 The List Options buttons and text.

128

Flash Site Workshop

when moving the mouse over the button, I have also added different effects for the Over and Down states of the button. I used the Onion Skin option to make sure that the sizes for the new states matched the Up state and chose to reverse the gradient fill for the Over state. For the descriptive text, I changed the text to be a pale yellow in keeping with the overall look of my site, but modified the font and changed the case to sentence case rather than all caps. This is a personal decision, but I think it looks more welcoming. You could edit the text wording if you want, but it works perfectly well as it is.

The Thumbnails, Carousel, and Place Order Buttons

Figure 6.6 The Thumbnails, Carousel, and Place Order buttons.

The Thumbnail, Carousel, and Place Order buttons are each located on their own layers. In this scene the behavior has been set to Graphic in the Instance panel. The actions for the buttons appear in the Inventory scene; we will look at those actions in the next section. Each of the symbols is located in the BUTTONS folder of the Library. Inside each symbol is the Green Box button, also located in the BUTTONS folder, and the appropriate text for the button. As they are each formed from the Green Box button, the easiest way to modify all three at once is to edit the Green Box button directly. You can change the outline color of this symbol to match your previously modified Plain 3-D button, and it will alter all three of the text buttons at once. The text can be changed in any way you want, and font size and color can all be changed to meet the requirements of your modified site. Additionally, you could change the actual text, although it works perfectly well as it is. I changed the Green Box button symbol to have a yellow outline in keeping with the rest of my site, and again I chose to modify the font to be sentence case to keep with a more friendly approach to the whole store. Like me, you could add new states to the buttons to make the rollover more obvious to the user. As always, though, remember that too many fancy effects in the wrong places can detract from the usability of the site. Sometimes clarity and simplicity are more important.

Company Name Button Figure 6.7 The Company Name button.

If you’ve modified any other movies from this book, you’ve probably modified the Company Name button. If you have, you might want to

Chapter 6

129


just open that file up as a Library and replace all instances of this button (one in each scene except the Close-Up scene) with your previously modified button. This symbol, called Company Name, is in the BUTTONS folder of the Library. You can modify the font, color and size to match your corporate identity. You might also want to replace the static text field with your company logo. To do this, go into the master button symbol, add a layer, and place your logo in the new layer. Then delete the old layer or make it a guide so it won’t export. You might consider adding Over or Down states as well. To make this button link back to your home page, click once on the instance of Company and place this script in the Actions panel: on (release) { getURL (“http://www.homepage.html”, “_self”); }

Replace the Web address with your home page.

The Customized Intro Scene Here’s my customized Intro scene. Figure 6.8

The Inventory Scene

1 Column Header Text 2 Inventory Text 3 In Stock Text 4 Specials Movie Clip 5 Product List Area 6 Up and Down Arrows 7 Search Box

Chapter 6

131


How the Inventory Scene Works At first glance, this appears to be a simplistic scene with only two frames to deal with. In terms of usability and functionality, however, it is anything but simple. There is a lot of clever activity in the Inventory scene. The scene contains many of the elements and symbols that you first came across in the Intro scene, and you should now be familiar with the overall look and feel of the movie. The first thing to notice here is that the Timeline now has an Actions layer. Figure 6.9 The Timeline for the Inventory scene.

As with all the movies in the site provided on your CD, there are many comments included with the Actions layer. These comments are there to help you follow what the code does and how, if at all, you can change and customize it. In the case of this scene, there are also clear instructions on what you cannot change, so make sure you read these carefully. Let’s start by looking at the actions in frame 1 and what they do. stop(); _root.closer = null; loadMovieNum (“hz_Nav_Bar_new.swf”, 1); if(typeof(cartlist) eq “undefined”){ cartList = new Array(); } _root.yourServer = “” _root.feedbackMsg = “Your inquiry returned 0 results. ➥Please broaden your search.”

132

Flash Site Workshop

The beginning of the code holds a stop command to keep the movie in frame 1 until the user performs an action. The navigation bar then loads into the movie without affecting any of the elements onscreen. This is the same navigation bar that you saw and customized earlier in the book. If you have not yet customized this element, refer to Chapter 3, “Design the Home Page and Site Identity,” to do this. The code then looks for a cart list in place for this session. If the visitor has been on the site for a while, they may have already added products to their cart. In this case the information will have already been stored. If there is no current cart list, such as no products selected yet, a new array is built and is ready to be used by this visitor. The line beginning _root.yourServer needs to be set to reflect the path to the server hosting your files. The line beginning _root.feedbackMsg can be left as it is, or you can edit the message to one you prefer. As the text implies, the message in the string is displayed when a search has no results to display. Also, commented out in the ActionScript for this frame is information for the variables used to store the product information. These variables are used when a product is selected, and the user is taken to the Close-Up scene. _root.closeId _root.closeName _root.closeSku _root.closeModel _root.closePrice _root.closeQuantity _root.closeColor _root.closeSize _root.closeImage _root.closeDescription

These variables hold the product information for the selected item. This information is held in the back end MySQL database. Speaking of the MySQL database, let’s take a quick look at that. The tables that relate to the store and hold all of the product information are:

Chapter 6


which holds the main information for all products. The field names are:

catalogitem

• centerImage • description • itemID • leftImage • model • Name • price • quantity • rightImage • sku • printImage • categoryID

holds color information, if any, for an item and has the following fields: catalogcolor

• color • colorID • itemID catalogsize

holds size information, if any, for an item and has

fields called: • size • sizeID • itemID

catalogspecial has a single field called itemID. This contains the items that will be shown in the Specials Movie Clip. The action for frame 2 is straightforward and easy to follow: gotoAndPlay (“Close-Up”,1);

133

134

Flash Site Workshop

When a viewer selects a product, this scene jumps to frame 2, which then moves to frame 1 of the Close-Up scene to display the complete product information. We have now looked at the Frame actions for the scene, but what else is happening here? Each of the List By options now has the actions attached to them. Here is the ActionScript for the List By Category option. on(release){ _root.productsXML = new XML(); _root.productsXML.onLoad = ➥_root.productList.column.populateProducts; _root.productsXML.load(_root.yourServer add ➥“catalog.asp?sort=cat”); }

You can see that the button generates the product listing from the database via an XML object called productsXML. It also displays this onscreen in the productList Movie Clip that we will detail later. The command is issued when the user releases the mouse button, as shown in the on (release) statement at the beginning of the code. The end of the script is what determines the sort order. The catalog.asp file is processed on the server and sorts the results using the cat variable. Each of the other buttons has the same script attached; the last line is different, based on the search option selected. For instance, the script for an alphabetic sort ends: root.productsXML.load(_root.yourServer add ➥“catalog.asp?sort=alpha”); }

The Text layer now contains all text items in the movie on a single layer. You’ve already customized several of these. The column headings for the search results are new. These columns will hold the product information when a search is performed, or when the user chooses a list option. We have another new text symbol indicating the items that are in stock at the present time. In-stock items are identified in the search results with an *, and this in turn is present in the text symbol so that users know what the * means when displayed next to the results. In the back end database, the number of items in stock is

Chapter 6


held in the quantity field of the catalogitem table. If this number is greater than 0, the item is shown as being in stock. Another newcomer to this scene is the text based search option. Powered by XML and the catalog.asp file, the user can type in a search term to quickly find the products they are interested in. The Go button has the following ActionScript attached: on (release, keyPress “<Enter>”) { _root.productsXML = new XML(); _root.productsXML.onLoad = ➥_root.productList.column.populateProducts; _root.productsXML.load(_root.yourServer add ➥“catalog.asp?search=” add search); }

The search is activated when the user presses the Enter key or releases the mouse on the Go button. Notice that the code here is the same as the sort options, the single exception being that the end of the code passes the search parameters rather than one of the sort buttons. Regardless of whether the visitor uses the search box or a sort option, the output is displayed the same way. Notice the two Specials boxes on the screen. These appear on the Specials layer of the Timeline. Again, this information is drawn from the backend database, this time from the catalogspecial table. This table holds the itemID numbers for those items currently listed as specials. The Specials Movie Clip gives a constant onscreen display of products currently identified as special sale items. The database table named above holds the information regarding the items on special at any given time. There is a relationship in place between the itemID field in the catalogspecials table and the itemID field in the catalogitem table. To the viewer, the display is simply an ongoing rotation of items on special offer. To you, the site manager, the code is already written to work perfectly and should not need any modification at all if you are using the supplied database and field names. The script attached to the Specials movies first checks if the visitor has already been to the scene; if not, the specialsXML object is created and populated from the database via the catalogspecials.asp file, which declares the required relationships. If the visitor has already been to the

135

136

Flash Site Workshop

scene, the existing loadSpecials object is called in. The images displayed are changed constantly using the Push function. The Inventory scene is the first time that we see images pulled from the database and displayed on screen. These images are not stored directly in the database; the catalogitem table merely holds the path to the image. There are three images for each item in the inventory. The path references for these are held in the centerImage, leftImage, and rightImage fields of the table. When publishing, you will need to make sure that you have the correct path to your product images stored in these fields. Two things to note about the images: the image files for this movie must be .swf files, because they are loaded externally, and a .swf file can only load external .swf files; and the images must reside in the same folder as the store file.

Customize the Inventory Scene Many of the elements in the Inventory scene were customized as part of the Intro scene. By now, however, you will have seen the size of the Library for this movie and must know just how many symbols there are. The volume of Library items should not be a deterrent; they will all be covered as we work through the scenes. For now, we will concentrate on the elements of this scene that haven’t already been customized.

Text Fields Figure 6.10 The text elements in the Inventory scene.

As previously mentioned, the Text layer contains all of the text symbols in the Inventory scene. Turn off the visibility on all layers besides Text and you’ll see all of the text symbols, as shown in Figure 6.10. The only previously customized elements are the text

Chapter 6


137

fields associated with the List Option buttons and the introductory text in the Catalog Glance Text symbol. All of the other elements now need customizing. As they are all static text fields inside Graphic symbols, you can edit the symbol directly on the Stage, or select it in the Library. I find it faster to edit the symbol on the Stage using the Character panel to adjust the text color, size, or font than to open the Library and select individual symbols. In my customization of the column headings, I left the text content the same because it is perfectly accurate, but I changed the font and color to match the rest of the Computerlink site using the Character panel. I changed the Inventory text only in terms of color and font as I felt there was no need to change the actual wording. There is little mileage in changing things for the sake of change, and the word Inventory makes it obvious to anyone visiting the site that that is what they are looking at. The In Stock text contains the asterisk indicating to the user which items are in stock. This needs to be as obvious as possible. As the symbol is simply text, you can make the asterisk be a different color than the text, or keep it the same as I have chosen to do. This decision was made because I felt the text was more eye-catching, and therefore having the asterisk the same color made sense. I left this text in all caps, again to catch the users attention. The Click Item Text again is plain text inside a graphic symbol and can be edited the same way as those symbols already mentioned. This instructive text enables the user to know that the items in the display are clickable. Make the text as obvious as you feel is necessary.

Specials The Specials Movie Clip is located in the DYNAMIC ITEMS folder of the Library, and contains four layers. Actions The first layer of the Specials Movie Clip is an Actions layer; there are frame actions in each of the first three frames. Frame 1 is as follows: var specialNum = 0;

Figure 6.11 The contents of the Specials layer.

138

Flash Site Workshop

Frame 2 is as follows: if(typeof(prodList) ne “undefined”){ gotoAndPlay(Number(_currentFrame + 1)); } else { gotoAndPlay(Number(_currentFrame - 1)); }

Frame 3, the most complex in terms of scripting, is as follows: for (j=0; j<prodList[specialNum].childNodes.length; j++) { if (prodList[specialNum].childNodes[j].nodeName. ➥toLowerCase() == “image”) { var image; var imageList; imageList = new Array(); image = prodList[specialNum].childNodes[j]; for (k=0; k”) { if ((_root.name ne “”) && (_root.email ne “”) && (_root.password ne “”)) { loginXML = new XML(); loginXML.xmlDecl = “”; loginElement = loginXML.createElement(“LOGIN”); loginXML.appendChild(loginElement); loginElement.attributes.user = _root.name; loginElement.attributes.pass = _root.password; loginElement.attributes.email = _root.email;

Chapter 12

Build a Threaded Message Board

loginReplyXML = new XML(); loginReplyXML.onLoad = _root.onLoginReply; loginXML.sendAndLoad(_root.yourServer add ➥“login.asp”, loginReplyXML); } else { _root.alert(_root.alertMsg); } }

You won’t want to change this code, but it’s useful to take a look at this mysterious but powerful new XML object we can now utilize in Flash 5. This script first checks that the required fields were not left blank. If information has been entered, a new XML object called loginXML is created. The name, password, and e-mail variables entered by the user are then placed in loginXML and the information is sent to the login.asp page on the server. Another XML object, loginReplyXML, is created to receive the requested data and perform the onLoginReply function when that data has finished loading into the Flash file. This function that is called resides on the first frame of the Actions layer. It takes the XML received from the server and parses it to determine the status of the request. If successful, the users are advanced to the Subject scene of the message board. If unsuccessful, they are presented with an Alert box containing a message informing them that their login attempt failed.

Customize the Login Scene All elements that exist on the main Stage can be customized by selecting them (double-clicking) from the Library, selecting them from the Movie Explorer, or double-clicking them directly on the Stage. By selecting the elements on the Stage, you can modify them while still viewing the entire layout. This is helpful when altering the objects to ensure that they visually “fit” into your design.

Customize Temporary Background The Temporary Background, located in the TEMPORARY BKG folder of the Library, is a graphic symbol on the Temp Background layer. This is an ideal symbol to use as a placeholder for your design. If you lay out your designs in another graphics program, you can

289

290

Flash Site Workshop

import that image and use it as a temporary background to which you can align all of your other elements. Figure 12.2 The Temporary Background symbol.

This symbol can also be used for the core branding and look and feel of the message board. The Temp Background layer contains the “company name” text. If you have modified a company name symbol from a previous chapter file, you can choose to use that symbol here to keep the different movies consistent in branding. Simply open the other .fla file and drag, from that Library, the company name symbol into the temporary background symbol in this movie. Altering the symbol here will affect the background in all scenes, so it’s a quick and easy way to make movie-wide changes that can dramatically change the look of your application. When I customized the message board, I chose not to use this symbol by selecting it as a Guide layer in the layer properties.

Background Layers Figure 12.3 The blue background, located on the Background layer.

The Blue and Green backgrounds, located in the BACKGROUNDS folder of the Library, are graphic symbols located on the Background layer of the scene. If you do not have a predesigned layout that you would like to incorporate, the Blue and Green Background symbols can be used to break up the page into content areas, much as they

Chapter 12

291


have been used now. Using the Advanced color properties found in the Effect panel, you can quickly and easily modify these symbols to give your application a new mood or feeling. You can also choose to modify the fill, stroke, or shape directly by selecting it from the BACKGROUNDS folder of the Library and ungrouping them.

Log In Welcome The Log In Welcome symbol is a graphic symbol, located in the TEXT folder of the Library, and is located on the Text layer of the Login scene. The text contained in this symbol acts as the header to the Login scene and is used to welcome the user and prompt them to log in to the message board. You can replace this text with your own by editing the symbol, and modifying font color and size through the Character panel. When I customized this scene, I imported a custom graphic to tie in with the design created for this application (headerGraphic) and placed it on a new layer below. I then modified the text message and changed the font color to white to add contrast against the headerGraphic that was imported. Finally I copied and pasted the Text layer of the Log In Welcome Clip and placed the duplicate below, changing the font color to black and offsetting its position horizontally and vertically. This gave the text a shadow effect and a sense of depth, which added to the design I was working with.

Figure 12.4 Log In Welcome symbol, located on the Text layer.

Login Parameters The text elements Your Name Text, Email Text, and Password Text are graphic symbols located in the TEXT folder of the Library, and reside on the Text layer of the Login scene. They act as labels, describing the data that the viewer must input in each of the corresponding input text fields. Each label can be modified directly on Stage or altered through the Movie Explorer. All I did to customize my movie was alter the font, color, and size properties in the Character panel to reflect the rest of the design.

Figure 12.5 Variables are used for the login process; Your Name Text is shown here.

Alert Box The Alert Box Movie Clip is located on the Text Fields layer of the Login scene and is found in the STATIC GRAPHICS folder of the Library. The Alert Box is displayed if the login information supplied by clicking the Submit button has been determined as incorrect or invalid. The Alert Box can be fully customized to take on any look

Figure 12.6 Alert Box containing dynamic text field for displaying Alert messages.

292

Flash Site Workshop

or feel you want. The appearance of the dynamic text field can be modified by selecting it and making changes via the Text Options panel. You must be careful not to alter the variable name of this dynamic text field in the Text Options panel, however, as the message that appears in this text field is a variable set in a frame action of the Login scene. For more information on customizing this message, see the alertMsg Variable found later in this chapter. NOTE: Be aware that changing the Alert Box here will also affect the Alert Box in the other scenes.

When I customized this Clip, I imported a custom graphic to be used as the Alert Box palette. I then placed the new graphic on a layer above the original graphic, making the original a Guide layer so as not to be visible upon output. I also changed the X and Y coordinates of the Alert Box by moving its position on the Stage. This affects the location where the Alert Box will appear when it is triggered. You can place this element anywhere on the Stage that suits your design. Closing the Alert Box

Figure 12.7 Close button located inside Alert Box MC.

The Close button appears when the Alert Box pops up, and has an action attached to it that closes the Alert Box by setting its visibility to false. To modify this button, select the close symbol from the BUTTONS folder in the Library. You can change its current color/ stroke settings or play with the color options available in the Effects panel. You might also consider adding sound elements to the button by selecting a button state (Over, Down) and modifying the parameters available in the Sound panel. When I customized the scene, I swapped the Close button, which is used to close the Alert Box, with another custom graphic that was created and turned into a button. It’s important if using this method, to ensure that you swap the symbol in the Instance panel, to keep the actions that are attached to the Close button intact. Failure to do this will result in the movie not functioning properly. Finally, a new Text layer was created above the button graphic where I added the text “close” to specify the purpose of the button I just added. This was needed as the original Close button had this text as part of the graphic. I modified the font and color properties of the “close” text to be consistent with the rest of the movie and also scaled the “close” text in the Over frame of my new button to give the user feedback when they rollover the button. You may also want to consider altering the button graphic in the Over state by changing it’s color through the Effect panel to give even more of a visual response to the user on rollover.

Chapter 12


293

Missing Required Fields Message Figure 12.8 The ActionScript for the Alert Message.

The alertMsg variable, associated with the dynamic text field contained in the Alert Box Movie Clip, is the message that is displayed to the user if they submit their login without properly completing the required fields. You can alter this message by changing its value located on frame 1 of the Actions layer on line 16. I did not alter this variable because the current message is satisfactory in explaining to the user what is necessary for access. Failed Login Alert Message Figure 12.9 Another instance of the code that generates the Alert Message.

You can modify the text Alert that is displayed in the Alert Box if the login fails by modifying the variable text string located on line 46 of the Actions layer frame 1 script. Again, I chose not to alter this message as it clearly states to the user what has happened.

294

Flash Site Workshop

Welcome Message Outline

Figure 12.10 Recessed Box symbol constructed of simple line shapes.

The Recessed Box, located on the Static Graphics layer, is a graphic symbol found in the STATIC GRAPHICS folder of the Library. The Recessed Box appears on the left of the scene and is used to outline the welcome message area. It is also used as an outline for other dynamic content areas used in the message board. By changing this symbol, you are able to make changes across the entire movie—modifying the Login, Subject, Message, and Post scenes simultaneously. In the example I redesigned, I chose to delete the symbol entirely. It did not fit with the design I intended to apply to the message board, so it was left out from the scene. You may choose to simply change its color or shape to fit your own design or replace it with your own custom graphic.

Welcome Text

Figure 12.11 Text used to welcome the user.

The Threaded Pitch Text, located in the TEXT folder of the Library, is a graphic symbol placed on the Text layer of the Login scene. This symbol is responsible for displaying the welcome message and instructions to the user upon entering the Login scene. For my customization I modified the dimensions of the text area by directly editing the text field inside of the graphic symbol with the text tool. Once I clicked in the text area, I was able to drag the text field handle to the dimensions of the new layout. I then modified the text properties for color and size to complement the design. (This is a static text field, so you don’t have to worry about the font you choose; it will be automatically embedded in the document on export.) Finally, I placed a copy of this Text layer one layer below and modified the text color, made it black, and created depth to the text by offsetting it several pixels both horizontally and vertically. This gave the appearance of a shadow when contrasted against the original white text.

Submit Button Figure 12.12 Submit button located inside of the Login Clip MC.

The Submit button is the Login Clip’s only content, but it can be accessed directly by selecting it from the BUTTONS folder in the Library or from the Movie Explorer. Like the Close button, you can completely modify or create your own button for submitting. You might add sounds to the Down state by selecting the Sound panel. Try modifying the Advanced properties available in the Effect panel to create variations of the instance that complement your design.

Chapter 12


295

When I modified this button, I imported a custom graphic and placed it on a layer above the original, making the original a Guide layer. I then modified the text, adjusting the font, color, and size properties in the Character panel to reflect the new design.

Login Input Fields The Text Input Field symbol can be found in the STATIC GRAPHICS folder in the Library and is placed on Stage in the Static Graphics layer. This symbol is located below the three input fields used for logging in. Although it has been designed to resemble standard Web page text fields, you can completely alter this symbol to match your design. If you modify this symbol, make sure that the design/color you choose for the field boxes contrasts sufficiently with the color of the input text). This symbol also appears in other scenes; modifying it here will alter its appearance throughout the entire movie.

Figure 12.13 The Text Input Field symbol resembles standard Web text fields.

In the modified example, I simply imported a custom image that matched my design on a new layer that was created above the original graphic in the text input field symbol I then made the original layer a Guide layer so the new image was the only visible one.

Variables used for Login Verification The Name, Email, and Password text fields are input fields that send the entered data to the server for analysis. These fields are found on the Text Fields layer of the Login scene, and are not found in the Library. You can customize these fields by selecting them from the Stage or from the Movie Explorer. They will appear as (empty),(name); (empty),(email); and (empty),(password) in the Movie Explorer and you can CTRL-click to select them all at once. In the modified example, I altered the text color to provide better contrast against our custom text input field graphic mentioned above. It is also important to note that these Input fields require that you embed the fonts, which can be done in the Text Options panel. Unlike Static text, which is automatically embedded into the flash file, Input text requires you to determine what font elements you would like embedded. Be aware, though, that embedding fonts greatly increases your file size, so you might want to stick to one of the device fonts.

Figure 12.14 Input fields used for gathering login information.

296

Flash Site Workshop

Threaded Message Text Figure 12.15 Graphic symbol found on the Static Graphics layer.

The Threaded Message Text is a graphic symbol located on the Static Graphics layer, and can be found in the STATIC GRAPHICS folder of the Library. If you are linking several movies from this chapter together, this Clip is useful for identifying and keeping consistent the different sections. In my redesign of the message board, I chose to elaborate on the plain text that was originally used. I imported a custom graphic to be used as a design element below the text. This graphic was thus placed on a layer below the text and the Text layer was modified to add contrast to this new image. Lastly, the Text layer was duplicated below itself and the font color was set to black. With a slight X, Y offset, I was able to create a sense of depth and shadow that has also been done elsewhere in the redesign.

The Customized Login Scene Here’s the customized Login scene. Figure 12.16

The Subject Scene

1 Start a New Topic: Button Identifier

2 Subject Instructions 3 Message Outline 4 Start New Topic Button 5 Scroll Button 6 The Subject List 7 The Message List

298

Flash Site Workshop

How the Subject Scene Works The core functionality of this scene lies in the Subject and Message Movie Clips that are each contained on their own layer. Both of the Clips are set up with the same basic structure and function—gathering info via XML from the database and displaying it as clickable buttons to the user. Here we will take a look at a portion of the code attached to the Subject Row Movie Clip inside the Subject MC before discussing customization of the scene. for (i=0; i < subList.length; i++){ _root.clip.attachMovie( “subject row”, “row” add Number(i + ➥1), Number(i + 1) ); name = “row” add Number (i+1); if (name ne “row1”) { setProperty ( _root.clip add “/row” add Number (i+1), _y, ➥(getProperty ( _root.clip add “/row” add i, _y ) + ➥getProperty ( _root.clip add “/row” add i, _height) + 5) ); } for (j=0; j < sublist[i].childNodes.length; j++) { if (sublist[i].childNodes[j].nodeName.toLowerCase() == ➥“title”){ set ( _root.clip add “/row” add Number (i+1) add “/:text”, ➥sublist[i].childNodes[j].firstChild.nodeValue ); } else if(sublist[i].childNodes[j].nodeName.toLowerCase() == “id”){ set ( _root.clip add “/row” add Number (i+1) add “/:idnum”, ➥sublist[i].childNodes[j].firstChild.nodeValue ); } } } }

This selection of code that is taken from an onClipEvent on the Subject Row Movie Clip demonstrates how the subject display, containing the buttons, is built. The first loop goes through the subList Array, which was built from the XML previously in the code, and uses the attachMovie action to place the Subject Row Movie Clip instances on Stage.

Chapter 12


If you check the Library, however, you will notice that the Subject Row Movie Clip is an empty Clip. Yet when testing, the movie buttons are displayed. This is because the attachMovie action targets using the Linkage Property of the Library symbol. The Movie Clip Subject button is labeled Subject Row in it’s Linkage Properties so it gets placed on Stage. The second loop in the script above passes the subject text and idnum values from the database to each instance of the Subject Button Movie Clip. The next element of the scene we will analyze is the code that is placed on the button in the Subject Button Movie Clip: on (press) { _root.message.reset(); _root.newMsgListXML = void (_root.newMsgListXML); _root.message.column.removeMovieClip(); _root.message.column._visible = false; _root.message.gotoAndPlay(1); updateAfterEvent(); trace(“first”); } on (release) { var idnum; _root.newMsgListXML = new XML(); _root.newMsgListXML.load(_root.yourServer add ➥“messages.asp?subject=” add idnum); _root.sbjId = idnum; _root.message.column._visible = true; _root.message.play(); trace (“done”); }

These actions communicate with newMsgListXML which is an XML object created in the Message Movie Clip. On mouse press newMsgListXML is wiped of all previous data. On release of the mouse, a request is sent to messages.asp attaching the idnum that was previously loaded into the Button Clip from XML. Meanwhile, an onClipEvent attached to the Message Movie Clip has been checking to see if newMsgListXML has been loaded. If it has been loaded, the Message Movie Clip advances to frame 3 where the Message Row Movie Clip is placed on the Stage. This Clip works much the same way as the Subject Row Movie Clip in that it

299

300

Flash Site Workshop

contains an onClipEvent that parses newMsgListXML and dynamically builds buttons for the messages related to the selected subject using the Message Button Movie Clip. These Clips contain dynamic message titles pulled from the XML tree structure and an action that advances the movie to the Message scene when clicked.

Customize the Subject Scene One of the new and often overlooked features of Flash 5 is the Movie Explorer. Here you can locate every single symbol, script, frame action or Movie Clip used throughout the movie’s Timeline. It also includes searching capabilities through the find search field located at the top of the Movie Explorer interface. Elements listed below can be found in the Movie Explorer and modified by doubleclicking. Another useful feature is the capability to directly modify text elements. You can simply double-click to edit the actual text that is displayed, or select and modify its properties such as size, color, and font through the Character panel (Ctrl-T). Another important tool is the Effect palette. This is a powerful tool that can transform the feeling of the site without modifying any original library elements. With a graphic symbol, button, or Movie Clip selected, you can transform the appearance of an instance through the Tint, Brightness, and Alpha properties available in the Effect palette.

Start a New Topic: Button Identifier Figure 12.17 Text used to describe button functions.

The Button Identifier is a text object that contains start a new topic. It is being used to describe the action of the corresponding button placed next to it on the Stage. This text is not a Library item, but a text object located on the Text layer of the Subject scene. I modified the font size and color properties directly to adhere to the design.

Subject Instructions Figure 12.18 Graphic symbol displays instructions to user.

The Subject text graphic symbol, located on the Text layer, displays the text CHOOSE A SUBJECT OF INTEREST at the top of the screen.

Chapter 12


301

Although this symbol contains only text, unlike the “start a new topic” text mentioned previously, this text has been transformed into a graphic symbol. This means that you will need to modify the text using the text tool inside of the symbol instead of directly on the main Timeline. For my message board, I edited directly inside the graphic symbol by importing a header graphic into a layer below the original text. I then customized the text through the Character options to match the look and feel already established for the message board by making it white. I then copied and pasted the text on a new layer created below and changed the color of the text to black. Finally, I nudged this bottom Text layer down and to the right to create a shadow effect on the Text layer above.

Start a New Topic Button The Plain 3-D button, located in the BUTTONS folder of the Library, is a button symbol on the Buttons layer located next to the “start a new topic” text. Note that this same symbol is also used in the Message and Post scenes, so modifying the button will alter all instances of this button. This means you can edit the button symbol just once and have the new look updated throughout the entire movie. You can also choose to add Over and Down states to the button, such as changing the color or altering the size of the button. This change can be achieved by modifying the Over, Down, and Hit states of the button symbol.

Figure 12.19 Button used for creating a new topic.

In the redesign, I chose to swap the instance of the button rather than modify the existing symbol. When creating your own graphics, you will most often find that this is the easiest way to alter the application. Make sure, however, not to delete this instance from the Stage and replace it with a new button. If you create a new button, swap the symbol in the Instance panel to switch to your new button. This will switch the visual reference for the button while keeping the original code attached to the button actions. Without this code, the application will not work.

Scroll Button The Scroll button is a button located in the BUTTONS folder of the Library, which is used repeatedly across scenes for scrolling, so modifying this button will affect all scrolling buttons throughout the

Figure 12.20 Scroll button used for all scrolling elements in the Message Board movie.

302

Flash Site Workshop

movie. This scene alone uses multiple instances of the Scroll button. Both Up and Down arrows use the same button—just rotated 180 degrees. If, for some reason, you would like to create different scroll buttons for different scenes, you will need to create a new button. I wanted to change all instances of this Clip in the movie, so I chose to edit the Button symbol directly instead of swapping the symbol. I imported a custom button graphic and placed the graphic on a layer above the original graphic, making sure to keep it aligned to the registration mark. I then made the original layer a Guide layer so that it would not be exported on output. I then added a keyframe in the Over state of the button and scaled the graphic 120% so it would pop up when rolled over. Finally I added a third keyframe in the Down state and copied and pasted the original Up state graphic over the larger scaled button. This gave a unique visual response to each of the button states.

The Subject List The Subject Movie Clip, located in the ACTIONS folder in the Library and found on the Subject layer, is responsible for the display of all available subjects. It contains a Movie Clip that parses the XML from the ASP page and dynamically builds the buttons that comprise the subject list. Figure 12.21 The Subject Movie Clip.

This Clip has four layers with one keyframe per layer. The top layer, Actions, contains a stop() action as well as objUp and objDown Movie Clips that control scrolling of the available subject topics. The Edge/Buttons layer contains the message outline graphic symbol as well as the Scroll buttons containing actions that trigger the objUp and objDown Clips. Below that layer is the Mask layer. This layer determines the area in which the buttons will be viewable. There are no actual buttons in this Clip; instead there is a blank Subject Row Clip that is found in the Row layer below the Mask layer. This Movie Clip contains onClipEvent actions that interface with the database via XML objects and also build the buttons using the attachMovie command. When I customized it, I needed to alter the size of the subject elements because I wanted to keep it consistent with the message section. To accomplish this, I imported the subjectBG graphic into a

Chapter 12


303

new layer in this Clip and removed the Recessed Box symbol that was previously there. I had to increase the size of the mask and the buttons to match the new width of this Clip. It was also necessary to realign the Movie Clip on the Stage to visually fit it into the design. This was an easy task because this is a self-contained Clip holding all elements necessary to build the subject list. One primary way to customize this Clip is in modifying how the buttons are framed. You may want to consider playing around with different outlines or different backgrounds over which the buttons will be placed. Just remember to make the size of the mask relative to the size of the Subject button, which will be covered in greater detail later.

The Subject List Button The Subject button is used when dynamically building the Subject list from the database. The button is displayed on the Stage using the attachMovie command. This action works only with Movie Clips, so it is necessary to have a button symbol located inside of the Movie Clip with the appropriate button actions attached. This Movie Clip is located in the ACTIONS folder of the Library and is not located on the Stage. To modify this Clip you will need to select it from either the Movie Explorer or the Library. Inside of the Movie Clip is an instance of the Plain 3-D button. You can modify the appearance of the button by placing a new button inside of the Clip, or directly altering the Plain 3-D button. For my customization, the Clip was modified by simply inserting a new button symbol and deleting the existing Plain 3-D Button symbol instance located in the Subject Button Movie Clip. Since this subject area is larger in my redesign, I needed to increase the width of the button that was used to match the new area. The Text layer of the Clip was then modified to display the font in white. Also note this new Button that was added includes two animations that were built using custom graphics to create rollover and rollout effects. This is an easy and efficient way to add interactivity and spice up the user experience.

Figure 12.22 Button used to dynamically create Subject list.

NOTE: If you have previously modified the Plain 3-D button or if you alter it here, it will affect all other uses of this button across the movie.

304

Flash Site Workshop

The Message List Figure 12.23 The Message MC is used to create the Message List buttons.

The Message Movie Clip is in essence identical to the Subject Clip mentioned previously. It is a self-contained Clip that holds all elements necessary for building the message list based on the XML input. The same buttons and modifications were added to this Clip as were done in the Subject Clip.

The Message List Button Figure 12.24 The button used to create the Message List, which is generated dynamically.

Like the Subject button, the Message button is used in building the message list that is pulled from the database and passed to Flash via XML. In this example, I used the same button (newButton) that was created for the Subject button and again modified the text properties to allow for better contrast with my design.

Message Area Outline Figure 12.25 The Outline for the Message Area.

Chapter 12

305


The Message Outline symbol is located on the Edge/Buttons layer of the Message Movie Clip and can be found in the STATIC GRAPHICS folder of the Library. You can create a fill, modify the stroke width or color, or design your own content area using custom graphics. Remember to keep it at least the same width as the buttons so that it does not cover the button area. Another option is to play with the Tint settings located in the Effect panel to get varying contrasts with your background color. I chose to remove this graphic symbol from the Message Movie Clip in my adaptation of the message board because it did not match the look and feel I was trying to achieve.

The Customized Subject Scene Here’s the customized Subject scene. Figure 12.26

The Message Scene

1 Message Content 2 Button Descriptions 3 Displaying Message Replies 4 The Plain 3-D Button 5 Scroll Button 6 Text Input Graphic 7 Message Display Area

Chapter 12


307

How the Message Scene Works The purpose of the Message scene is to display the contents of the message that was selected in the previous Subject scene, and to display other users’ replies to this message. The scene also contains a Respond button that allows users to add their replies to any of the current messages. Clicking the Respond button advances to the Post scene where the user can enter and submit their response. The Message scene is loaded when a user selects a message from the message list in the previous Subject scene. Clicking a message button sends a request to messages.asp attaching the ID number of the message for reference. The script returns an XML document structure to the msgXML object that was created when the Message button was clicked, containing the message elements date, time, poster, title, message, and ID. These elements are placed into the appropriate dynamic text fields in this scene. The Message scene, like the Subject scene, also contains a Movie Clip that is responsible for dynamically displaying the replies to the currently viewed message. The Tree Movie Clip contains another instance of the Subject Row Clip which builds the treeXML object containing replies received from the replies.asp page. This scene also displays and offers the user the submit their own reply by clicking the button next to Respond text takes them to the Post scene.

Customize the Message Scene All elements that exist on the main Stage can be customized by selecting them (double-clicking) from the Library or by doubleclicking them on the Stage. By selecting the elements on the Stage, you are able to work with them while still seeing the entire layout. This is helpful and efficient in altering the objects to fit into the design.

Message Content Title, poster, time, date,

and message are dynamic text fields whose values are determined when the server responds via XML with the information queried from the database. For this reason you must be careful not to alter the variable names in the Text Options panel because this will prevent the data from being displayed.

Figure 12.27 Dynamic text fields display the Message content.

308

Flash Site Workshop

I modified the color properties of the text fields to provide better readability to the user as well as re-positioned them to fit with the redesigned layout.

Button Descriptions Figure 12.28 Text elements found on the Stage, describing Button actions.

The main board text and respond text elements are located directly on the Stage on the Text layer, and cannot be found in the Library. They correspond to the two buttons that are found to the right of the text. Their text properties (font, size, color) were modified through the Character panel to match the customized design. You might also consider modifying this text and placing it over the buttons in your design to offer a more compact solution.

Displaying Message Replies Figure 12.29 The Tree Grid MC used to list and display replies to the selected message.

The Tree Movie Clip, located in the ACTIONS folder in the Library, is contained on the Tree layer of the Message scene. It contains an Action layer that holds the empty Clips: treeUp, treeDown, objLeft, objRight. These Clips contain actions used for scrolling the messages that are triggered by the Scroll buttons located on the Edge/Buttons layer. The Tree Clip also contains the Tree Grid Movie Clip which is used as an outline shape to house the replies. The Tree Grid contains the outline shape of the content area for the threads related to the chosen message topic. You can modify this symbol by selecting it from the ACTIONS folder of the Library and double-clicking it to break it into its group. Once the symbol is ungrouped, you can modify the stroke and color settings as well as fill the area using the bucket tool. Lastly, there is another instance of the Subject Row Movie Clip located on the Row layer of the Tree Movie clip. This Clip contains onClipevents that build a treeXML object, which stores information about the message replies from the data sent via the replies.asp script.

Chapter 12

309


When I customized this, I elected to delete the Tree Grid symbol located in the Tree Movie Clip and replace it with my own treeBg graphic that matched the rest of the application in look and feel. This image was placed on a new layer placed below the other Tree Clip Layers.

The Plain 3-D Button The Plain 3-D button is located on the Buttons layer, visually next to the main board and respond text. Note that this same symbol is used throughout the movie in the Message and Post scenes, so you may have already modified this button.

Figure 12.30 Plain 3-D button located on the Buttons layer.

I chose to swap this particular button instance with a custom built button of my own (plainButton). By choosing to swap symbols in the Instance panel, I can alter the look and feel of the button easily while keeping all the necessary code that was attached to the original button.

Scroll Button The Scroll button is placed inside of the Tree MC in this scene and can be found in the BUTTONS folder of the Library. This button is also used repeatedly across scenes for scrolling. I altered this symbol when working on the Subject scene, so those changes take effect here—a good example of keeping design elements consistent across a movie.

Figure 12.31 Scroll button, found in Buttons folder of Library.

This button is used in all instances where there is scrolling.

Text Input Graphic The Text Capture Field symbol, located in the STATIC GRAPHICS folder of the Library, is a graphic symbol on the Static Graphics layer. This clip is similar to the Text Input Field symbol used in the Login scene. It is used for contrast against the dynamic text fields above. You may want to experiment with different color combinations between the dynamic text fields and the Text Capture Field Clip to obtain a high level of readability for the user. Since this symbol is used in the following scene, using Tint and Advanced properties in the Effect panel might be the best way to modify the instance color. I chose to use the same graphic (textInput) that was used to alter the Text Input Field symbol. This keeps all the text fields in my design consistent in look and feel, but also means the design is easily

Figure 12.32 Graphic used to represent a text field.

310

Flash Site Workshop

changed. Instead of swapping symbols with the other text field graphics, I simply added this graphic inside this symbol and made the original layer a Guide layer.

Message Display Area Figure 12.33 Movie Screen graphic symbol.

This area of the Message scene contains two symbols: Movie Screen and Recessed Box. Both of these graphic symbols are placed on the Static Graphics layer and can also both be found in the STATIC GRAPHICS folder of the Library. The Movie Screen symbol is used as a fill for the Recessed Box Clip. You can select this symbol and modify its fill color to coincide with your design decisions, or elect to remove it. This symbol is used to create contrast for the message text for easy readability. If you elect to modify or delete this symbol, make sure that your text colors complements your background colors and imagery. The Recessed Box symbol is used as a ‘boundary’ for the message area. You can modify this symbol by changing the stroke settings available in the Stroke panel. In my redesign, I chose to remove the Recessed Box from the Stage and make my modifications to the Movie Screen symbol. In the Movie Screen symbol I imported a custom graphic on a new layer above the original moviescreen image, which I turned into a Guide layer. This new imported graphic was larger than the original and so required some further aligning of elements on the main Timeline to fit the overall design.

Chapter 12

311


The Customized Message Scene Here’s the customized Message scene. Figure 12.34

The Post Scene

1 Text Input Fields 2 Button Descriptions 3 Plain 3-D Button 4 Submit Button

Chapter 12


How the Post Scene Works The purpose of the Post scene is to allow users who are logged in to the message board to participate in the discussions. This scene enables users to post messages directly to the database so that they can be viewed and read by other members of the message board. This scene is used to post new subject topics or responses to previously posted messages. The Post scene, like previously mentioned scenes, uses XML to pass information to and from the MySQL database by using ASP. Users are presented with two primary text fields: subject and text. The core functionality of this scene is found in the Submit Clip Movie Clip. The following code is placed on the Submit button found inside the Submit Clip”: on (release) { if ((_root.subject ne “”) && (_root.text ne “”)) { var newmessageXML = new XML(); newmessageXML.xmlDecl = “”; newmessageElement = newmessageXML.createElement ➥(“NEWMESSAGE”); newmessageXML.appendChild(newmessageElement); newmessageElement.attributes.body = _root.text; newmessageElement.attributes.userid = _root.userid; newmessageElement.attributes.subject = _root.sbjId; if (_root.id == null){ _root.id = 0; } newmessageElement.attributes.msgid = _root.id; newmessageElement.attributes.title = _root.subject; var responseXML = new XML(); responseXML.onLoad = response; newmessageXML.sendAndLoad(_root.yourServer add ➥“newmessage.asp”, responseXML); } else { _root.alert(_root.alertMsg); } function response() { if

313

314

Flash Site Workshop

(this.firstChild.firstChild.firstChild.nodeValue. ➥toLowerCase() == “ok”){ _root.nextFrame(); } else { _root.alert(“Posting Failed!!!”); }

} }

Once this button is released, newmessageXML and responseXML objects are created and message attributes—text, subject, userid, subjid, and id—are included in the newmessageXML object. The userid, sbJId, and id values are submitted dynamically (much like hidden values in a Web-based form) based on the user’s login and subject scene selections. The date and time variables are created dynamically on the server-side and are added to the message contents. The actions on the Submit button also check to see if the subject and text fields are blank. If one of them is blank upon submission, the Alert Box pops up informing the user to enter data into these fields. Once this information is passed to the ASP page for inclusion in the database, a confirmation value is sent to the responseXML object. If verification fails, an Alert Box appears stating there was an error posting the message. If verification succeeds, the user is taken back to the Message scene.

Customize the Post Scene All elements that exist on the main Stage can be customized by selecting them (double-clicking) from the Library, or by doubleclicking them on the Stage. By selecting the elements on the Stage, you can work with them while still seeing the entire layout. This is helpful and efficient in altering the objects to fit into the design.

Text Input Fields Text and Subject are input text fields that are used to pass information entered to the database. Be careful not to accidentally change or delete the variable name in the Text Options panel because this naming structure is required to pass information properly to the database.

Chapter 12

315


Figure 12.35 Input fields used for submitting data.

For my customization, the font properties were altered for these fields to match the design of the rest of the application. I also needed to adjust the size of the text field to match the design. This was done by using the text handle available when editing the field with the text tool.

Button Descriptions Figure 12.36 Return to Main Board is a text element on the Text layer.

The subject and return to main board text are not graphic symbols, but rather static text fields located directly on the Stage on the Text layer. They cannot be found in the Library. You can simply select this text with the text tool and change the text to whatever suits your application. I first changed the color and size properties of the text to match existing text in the movie, and then duplicated the subject text. With the duplicated text I set it’s color to black and placed it below the other subject text, which I colored white. Offsetting this bottom duplicated black text allowed me to get a shadow effect, which has also been used in other areas of this movie.

The Plain 3-D Button The 3-D button is located throughout the movie, so changing this symbol will change all instances of the button. You may have already modified it. To affect the button only in this scene, you can alter its instance through the Effect panel, or swap the symbol with a new one. I chose to swap the Plain 3-D button instance with my own plainButton symbol.

Figure 12.37 Plain 3-D button located on Buttons layer.

316

Flash Site Workshop

Submit Button Figure 12.38 Button used to send Post to database.

The Submit button is located inside of the Submit Clip Movie Clip. You’ll need to select it directly in the Movie Explorer or drill down into the Submit Clip to alter it’s instance. This button is used in the Login scene as well, so changes made to the button symbol will also be noticed in this scene. To avoid any possible mix ups with the use of this button, and to keep my design consistent, I elected to swap this button symbol with one of my own. I swapped symbols using the Instance panel. As previously mentioned, this keeps the actions on the button while switching the visual reference of the button.

The Customized Post Scene Here’s the customized Post scene. Figure 12.39

Chapter 12


Summary This message board example has touched upon some powerful possibilities that exist when developing with Flash 5. The ability to create applications based on an XML architecture with Flash allows developers to filter existing XML content through an interactive front end. The purpose of this chapter was not to go into great depth with regards to XML and ASP. However, whether you have programming experience or you’re just eager to learn, you can gain valuable insight from these files when attempting to build your own Flash applications. If you would rather stick with what has been provided, you may want to consider the possibility of integrating different elements from this book into the message board. Most of these files have been built to be extremely modular. For instance, you can simply drag your Banner Movie Clip from the Preview Links Chapter onto the Stage to add banner functionality to the message board. I hope that this chapter has opened your eyes to what is possible when using Flash. Its tiny file sizes, high player penetration rate, and new XML integration makes it one of the most exciting development platforms today. Play with the files and experiment. It’s time to finally get dynamic with dynamic content.

317

CHAPTER

13

Site Publishing Considerations

Chapter 13


319

The primary purpose of this chapter is to cover Flash publishing considerations as well as discuss the installation instructions for proper configuration of the MySQL database for use with the files provided in this book.

Overview Flash 5 offers a host of possibilities when you decide to publish dynamic content. Whether you are publishing dynamic content, or building custom Web applications, Flash can now interface with many different servers and databases using a selection of middleware products that includes ASP, JSP, PHP, and ColdFusion. When playing a Flash movie in a Web browser, you can only load data into a movie from a file that is on a server in the same subdomain. This is a security feature that prevents Flash movies from downloading information from other people’s servers. However, data can be pulled in from another domain using middleware such as Active Server Pages (ASP). The ASP file resides on the same subdomain as the Flash file, so it does not pose a security risk. The ASP file can retrieve information from any server to which it has access and then pass this information on to the Flash movie. Not all movies in this book rely on ASP or databases, but the online store in Chapter 6, “Create the Online Store and Cart,” the viewer survey in Chapter 7, “Survey Your Viewers,” the services catalog in Chapter 8, “Set Up a Services Catalog,” dynamic news and reviews in Chapter 9, “Generate Dynamic Content: News and Reviews,” and the threaded message board in Chapter 12, “Build a Threaded Message Board,” do in some way. The viewer survey and services catalog use ASP only to process emailed forms from these movies. The online store, dynamic news and reviews, and the threaded message board rely on ASP as well as XML and a MySQL database. If you are not focusing on these chapters, you will not need to cover the material in this chapter.

Back End Requirements Although Flash can interface with different databases that use different middleware platforms, this book has chosen to use the most widely available server platform for Windows users today: Microsoft

NOTE: Middleware is a scriptable environment used to pass information between the server database and the Web browser.

320

Flash Site Workshop

Windows NT. ASP is generally used in conjunction with NT servers that are running Internet Information Server (IIS), but it can also be utilized using the Microsoft Personal Web Server (PWS) running on Windows 95 or 98. The examples in this book have been designed to work on the NT platform running IIS 4.0+. Although you can test and run these files using PWS for Windows, please note that the following documentation is geared towards the NT platform. The following is a list of necessary components that need to be installed on the server to run the files and movies included on the CD. These files and movies require ASP or database functionality: • (IIS) 4.0+—MS Internet Information Server included with

NT/2000 Server or Windows NT Option pack. • ASP 2.0+—Active Server Pages (included with IIS). • MSXML 3.0+—Microsoft XML parser. • MDAC 2.5+—MS Data Access Components. • CDONTS—Collaboration Data Objects for Windows NT Server

(included with NT/2000 Server or Windows NT Options pack, this gives ASP a simpler way to send e-mail). • You will also require a Data Source Name (DSN) named flashBook that points to the database and is set up under Open Database Connectivity (ODBC) or Data Sources Control Panel. Consult with your system administrator or IT department if you are not familiar with ODBC or Data Sources Control Panel.

There are many possible databases that could be used to handle and store the data found in this book. Again, we have chosen to use one of the most common databases available: MySQL. You should be using MySQL 3.23+. MySQL is a high-performance database system that rivals most commercial packages, yet it is simpler to set up and administer, and is freely available online. The MySQL installer has been included on the companion CD for your convenience. A database configuration file (DB.sql) has also been included to set-up the tables necessary for running the applications covered in this book.

Chapter 13


321

This will be covered later in this chapter. It is best if you have a basic knowledge of DOS—that is how all MySQL commands are entered.

Installing MySQL on Windows 98 MySQL must be installed to utilize files in this book that rely on the database for storing data accessed by the Flash movies. You can run MySQL under Windows 95, Windows 98, or Windows NT, but you’ll need to ensure that you have TCP/IP support installed. A file called mysql-3.23.34-win.zip is located on the Software folder of the CD. Copy this file to your hard-drive and unzip it using an archiving utility. Remember the directory to where the .zip file is extracted. The files will be extracted to this directory and into a folder named mysql-2.23.34-win. Also located in this folder is a Setup.exe file. Double-click this file to begin the MySQL installation process. Installation will default to the C:\MYSQL directory. If you plan to install into a directory other than the default, be sure to follow the instructions provided on the second installation screen, entitled Information. Figure 13.1 MySQL installation screen.

Unless you are an advanced user, it is recommended that you run the typical installation and select all default options during the installation process. If you are using PWS, there should be a line in your that looks exactly like this:

autoexec.bat

PATH=%PATH%;”C:\Program Files\Mts”;C:\mysql\bin

322

Flash Site Workshop

NOTE: If you are using

Installing MySQL on Windows 2000/NT

Windows 95/98 you can skip ahead to the next section, “Manipulating the Database.”

The Win95/Win98 section also applies to MySQL on NT/Win2000, with the following differences: To get MySQL to work with TCP/IP on NT, you must install Service Pack 3 or newer. For NT/Win2000, the server name is mysqld-nt. Normally you would install MySQL as a service on NT/Win2000. The command for this is: C:\mysql\bin\mysqld-nt --install

The service is installed with the name MySql. Once installed, it must be started using the Services Control Manager utility (SCM) found in Control Panel, or by using the following NET START MySQL command: NET START mysql NET STOP mysql

If you need to start the service with any extra options, run this command: C:\mysql\bin\mysqld-nt --options

If any options are desired, they must be specified as “Startup Parameters” in the SCM utility before you start the MySQL service.

Possible Problems Using NT/2000 On NT you may get one of the following service error messages: • Permission Denied—It cannot find mysqld-nt.exe. • Cannot Register—The path is incorrect. • Failed to Install Service—The service is already installed, or the

Service Control Manager is in bad state. You can test if MySQL is working by executing the following commands: C:\mysql\bin\mysqlshow C:\mysql\bin\mysqlshow -u root mysql C:\mysql\bin\mysqladmin version status proc C:\mysql\bin\mysql test

Chapter 13


323

At this point you may or may not want to edit your autoexec.bat file to include the following line to simplify the path to MySQL; however, it is not required. PATH=%PATH%;C:\mysql\bin

Manipulating the Database After MySQL is installed, the database should be configured and tested. Then, you will be able to administer the database via an ASP file that you will load onto your server.

Testing and Initial Configuration Once installation is complete, you should test to ensure that MySQL is working properly. Open the MS DOS-prompt from within Windows and issue one of the following two commands to start the MySQL server: C:\>\mysql\bin\mysqld C:\>\mysql\bin\mysqld-opt

The second line of code accesses an optimized server for Pentium processors. After entering one of these commands, the MySQL daemon is initiated. This means that the database will be available to the client. To test if mysqld (and therefore the MySQL server) is working, issue the following command: C:>\mysql\bin\mysqlshow

This will display existing MySQL databases. This command should return the following: +-----------------+ | Databases | +-----------------+ | mysql | | test | +-----------------+ C:\>

NOTE: mysqld is the daemon for the MySQL server. A daemon is a process or service that runs in the background, and performs a specified operation at defined times or in response to certain events. In this case, the MySQL server is the service that runs in the background. The only way to interact with the MySQL server is by using the MySQL client to connect to and manipulate the database. The MySQL client is the interface that you use to interact with the MySQL server.

324

Flash Site Workshop

If your screen matches Figure 13.2, you have successfully installed MySQL, and the server is now running.

Figure 13.2 Database initialization.

Now that MySQL has been properly installed and the server is running, you are ready to start interacting with the database. First, we’ll need to create a database called “flashDB.” This is the database referenced by all examples/files in this book. To begin creating flashDB, we invoke the MySQL client by entering:

NOTE: The client for MySQL, which is what you use to manipulate the databases, is simply called mysql. The default privileges on Windows give all local users full privileges to all databases. To make MySQL more secure, you should consult with your System Administrator to limit access to multiple users.

C:\>\mysql\bin\mysql

Once invoked, you should be presented with a Welcome to MySQL message, as illustrated in Figure 13.3. We’ll now create the database specifically: mysql>create database flashdb;

You should now be presented with: Query OK, 1 row affected (0.00 sec)

NOTE: All MySQL commands end in a semicolon.

The database has been created successfully. As an extra check, you can run the following command to show all available databases: mysql> show databases;

Figure 13.3 MySQL welcome screen.

This command should now return the following: +-----------------+ | Databases | +-----------------+ | flashdb | | mysql | | test | +-----------------+

You can see that flashDB is now included in the database list.

Chapter 13

325


You are now ready to populate flashDB with the DB.sql file located in the CH13-Files/CH13-Originals folder of the CD. The purpose of this file is to automatically populate the flashDB database with the tables needed to dynamically interact with the ASP pages that accompany the Flash movies. First, place a copy of the DB.sql file in the root of the C: drive. Once this file has been copied, return to the DOS prompt. Make sure that the MySQL server is running and then enter the following command to populate the database: C: type DB.sql | mysql –h localhost –u root flashDB

If you’re currently connected to the Internet, you may interchange localhost with your IP address. At this point, start MySQL and then invoke the new database with the command: mysql> use flashDB

This is one of the only MySQL commands that does not require a semi-colon at the end. Issue the show tables; command to see the newly populated database tables. Below is an illustration of what MySQL should return when you complete this command: +-------------------+ | Tables in flashDB | +-------------------+ | catalogCategory | | catalogSpecial | | catalogbusiness | | catalogcolor | | catalogitem | | catalogservices | | catalogsize | | message | | newsAuthor | | newsTopic | | newsreview | | subject | | user | +-------------------+

NOTE: To create your own database or modify the one created, you will need an understanding of SQL syntax. Further information can be found at http:// www.mysql.com.

326

Flash Site Workshop

Figure 13.4 Output results after populating database using DB.sql.

Administration Located in the CH13-Files/CH13-Originals folder on the CD-ROM is a file called default.asp. This is an exceptionally important file. It allows you to easily manage the database for the Online Store by letting you add or delete new items, change the specials, and manage the categories in which your items reside. For the News and Reviews, you can add or delete authors, topics, and reviews. The Message Board section allows you to add users and set passwords. The default.asp file must be uploaded to the same server where the database exists. It can’t run off a local machine, only a server. It will automatically search out the MySQL database and let you administer it from one convenient location.

E-Commerce Requirements/Recommendations If you are interested in extending the functionality of the Online Store movie to include full e-commerce capabilities, there are several things you will need to know. When a user hits the Add to Cart button in this movie, itemID numbers are added to an array, which is basically a list. This is a key piece of information because it is used to reference properties such as size, color, price, and so on for the item selected. To enable ecommerce, you need to partner with a third-party commerce agent who will be responsible for tracking requests and handling all orders, credit card authorizations, and payments.

Chapter 13


327

You should speak with this commerce agent to determine the specific format you need in which to send this information as well as where to send it. Commerce agents will have their own engines that require different information, and will handle that information differently. The commerce host you provide should tell you what you need to send and how you need to send it so that a transaction can be completed properly. You will need to have at least basic knowledge of server-side programming and Flash ActionScripting to configure the files for use with a third party. Below is a list of possible e-commerce suppliers that you can contact: http://www.cybercash.com/products http://www.ibill.com http://www.authorizenet.com http://planetpayment.com http://www.ecx.com

Working Examples There are working examples of the Flash movies located at http://www.oncallinteractive.com/flash5workshop/. Also located at this site are file updates and the latest links to back end components you may need. Feel free to use this site to help visualize how your movies should work or to get updates.

NOTE: This is not an endorsement of any of the suppliers listed. You should contact the supplier directly and go with the company that suits your needs best.

APPENDIX A

Flash Resources on the Web The number of Web sites that contain a significant amount of Flashrelated information seems to be growing exponentially. Unfortunately, because of the speed of this growth, there’s no way for a book (which goes to press some weeks before it appears in stores) to stay current. What I can do is give you a list of very worthwhile sites. Most of them will have made themselves even richer and more informative since I first encountered them. Some will have closed their doors and gone off in pursuit of other interests. One thing this list will do is help you make your own, much more up-to-date list because most of these sites have frequently updated links to other Flash sites. Perhaps the most valuable aspect of many of these sites is that they contain Flash ActionScript and JavaScript code that you are invited to download and modify for your own use. Some of these sites have so many FLAs and tutorials that there’s not room to describe them in any depth.

About.Com http://webdesign.miningco.com/compute/webdesign/msubflash.htm

About.com is a Web resource for all sorts of information about the Web, including Flash. Much of that information is links to other sites on the list, but they are listed according to the topics they cover. This makes it an excellent way to find quick solutions to problems— especially those that are related to Flash but that also involve other Web technologies.

330

Flash Site Workshop

Accueil Flash http://perso.wanadoo.fr/phol/flash/index.htm

This is a French site with numerous downloadable Flash 4 movie files.

Art’s Website http://www.artswebsite.com/coolstuff/flash.htmArt’s Website

features a good many Flash tutorials.

BertoFlash http://www.bertoflash.nu

BertoFlash is a French site that has quite a few examples on line. When I visited, the site was partially in English and partially in French; a notice was posted that an English version of the entire site would be available soon. There were quite a few routines on this site, neatly divided into categories: Flash/JavaScript, ASP/Perl, Flash 4, and Flash 5. You can play the sample movies on screen, but cannot download them. You can, however, request the FLA files, and they will be sent to you by e-mail.

CNet Flash Tips http://builder.cnet.com/Graphics/FlashTips/

CNET offers a lot of useful tutorials.

Canfield Studios—Flash 3 Samples http://www.canfieldstudios.com/flash3

Canfield has a large number of Flash 3 and Flash 4 sample files that you can play on the Web. Almost all of them let you download the source file as well. However, there is a request that you not download the source files and then claim them as your own. There’s also a long list of additional Flash links. No Flash 5 files had been posted when I last looked.

FlashFilmMaker.com http://www.flashfilmmaker.com/

This site includes lessons, articles, a community forum, and a talent directory.

Appendix A

Flash Resources on the Web

Cleopatra Art Group http://move.to/cleoag

This site features Flash tips, tricks, and source files.

Code 66 http://www.code66.com/demo/flash/

This site includes FLA files and tutorials.

Designs by Mark http://www.designsbymark.com/flashtut/

This site carries a variety of tutorials on Flash, Photoshop, Illustrator, and general Web design.

Extreme Flash http://www.extremeflash.com/

Lots of FLAs and tutorials that are up-to-date for Flash 4 and 5 appear on this site.

Fay Studios http://www.webpagetogo.com/FS/WD/

Fay’s site features basic tutorials on using Flash.

The Flash Academy http://www.enetserve.com/tutorials/

This is presented by ENS Inc. and Flasher.net. As one would guess from its name, this site features quite a list of tutorials, source files, and templates.

Flash.com http://www.flash.com/

The Macromedia Flash page has lots of links to other Flash resources. Those links are constantly being updated and revised. There are also many examples of outstanding Flash sites and applications, and online forums which are an excellent place to get and share tips, tricks, and

331

332

Flash Site Workshop

information, including getting ratings of your site. Macromedia has also added the Flash Exchange, where users can upload and download extensions for Flash. This is an excellent place to start if you just want to see what Flash can do or need a little inspiration.

Flahoo.com http://www.flahoo.com

A directory of cool Flash sites, Flahoo.com does not have any downloadables.

Flashmove http://www.flashmove.com

There are lots of downloadable source files on this site. The FLAs are especially oriented toward game builders, but that doesn’t mean business developers won’t find anything useful here.

FlashPlanet http://www.flashplanet.com/

This is an excellent site that includes quite a few tutorials with the Flash files: Flipping pages, Draggable window with Close button, Full Flash site, and 3-D talking head animation. There are also quite a few sounds and clip art files.

FlashBible http://www.flashbible.com/

There is a worthwhile list of FLAs at the FlashBible site.

FlashKit http://www.flashkit.com/

A Flash resource site presented in HTML, FlashKit has many different categories of information, including tutorials and message boards.

FlashLite http://www.flashlite.net

Another rich site for the advanced ActionScripter is FlashLite.

Appendix A


Flash Jester http://www.flashjester.com

This site features third-party Flash tools, including screensaver creation tools. Just think—you can put your company site on all your employees’ screens.

Flash Magazine http://www.flashmagazine.com/flash4.htm

This online magazine has a pretty good rundown on all the Flash 5 features.

FlashMaster http://www.flashmaster.nu

This site features tutorials, source FLAs, and message boards.

Flash Pro http://www.flashpro.nl/

This is a fairly new Dutch site that’s all in English. You can take tutorials and upload FLAs for deconstruction.

Flazoom http://www.Flazoom.com

Flazoom is probably best described as a Flash magazine. There are articles on solving problems in Flash. Also, there are links to sites that the editors feel might be particularly helpful or inspirational. Not much here in the way of sample FLA files, the last I checked.

Flashwave http://www.egomedia.freeserve.co.uk/index2.html

Flashwave is an online magazine and Flash resource, primarily aimed at advanced users and programmers. Tutorials include Mouse tracking, ASP Database connection advanced tutorials, Chat tutorial, and Connecting to CGI to read random strings.

333

334

Flash Site Workshop

HelpCentre http://www.helpcentre.co.uk

This threaded messaging board is dedicated to discussions about various aspects of Flash.

i/US Flash Conference http://www.i-us.com/macromed.htm

This site hosts Macromedia conferences on each of the major Macromedia products. Conference topics are listed by subject.

Macromedia Flash Support Center http://www.macromedia.com/support/flash/

This is the Flash support section of the Macromedia Web site. In addition to Macromedia University, which offers Flash lessons for pay, there are very helpful discussions centering on the topics of most concern to Flash developers. Although this isn’t the only worthwhile authority on Flash techniques, it is certainly one of the first places you should look.

Mano1 http://www.mano1.com

Yet another Flash guru’s site, Mano1 has been redesigned, and, the results are impressive. The main interface is a list of links to Mano1 sites. Look at them all before you customize the site in this book to your own purposes.

Moock WebDesign Flash http://www.moock.org/webdesign/flash/index.html

Moock has lots of helpful tutorials on Flash 4 techniques. Most will stand you in good stead, except that the language has changed. There’s an especially long session on ActionScript and another on JavaScript. Also very worthwhile is a list of bugs in Internet Explorer for the Mac.

Appendix A


Nuthing but Flash http://nuthing.com

Nik Kihnani’s site demonstrates a few animation techniques that are especially suited to the scientifically minded. The main animation is living proof of the effectiveness of repeating symbols as a method of making complex designs.

Phresh http://www.phresh.de

Phresh is a Flash Web zine that features current news about latebreaking Flash developments. It is especially on top of third-party products that do something to make Flashing easier or faster or both. There are also related tutorials on such subjects as ASP coding, and there’s an ActionScript guide (not yet updated to accommodate Flash 5).

PS Woods Flash Yin and Yang http://www.wdvl.com/Multimedia/Flash/Yin-n-Yang/

This site is a tutorial on building a somewhat advanced Web site.

Quintus Flash Index http://quintus.org

Quintus offers 1,000 links to other Flash resources.

Flashgeek.com http://www.flashgeek.com

Flashgeek showcases Rick Turoczy’s tutorials on techniques for integrating Flash and PowerPoint. You’ll be surprised at what a cool and powerful combination this can be. In fact, you’ll probably get all sorts of ideas.

ShockFusion http://www.shockfusion.com

ShockFusion bills itself as “a free resource for Flash developers worldwide.” The site for the FlashForward 2000 conferences,

335

336

Flash Site Workshop

ShockFusion also provides a serious amount of content for Flash developers of all stripes. There are links to award-winning cool sites, cartoons, and games; a section on solving design problems in Flash; a Flash jobs bulletin board; a session on audio techniques; and a discussion on Flash 5.

Trainingtools.com http://www.trainingtools.com

This is a site that offers several online courses on popular graphics and programming topics, including Flash 5, Flash 4 Scripting, and Flash 4. There are also courses on related technologies, such as Dreamweaver, JavaScript, and Photoshop.

Virtual-FX http://www.virtual-fx.net

This site features excellent ActionScript tutorials. For instance, the search engine tutorial is very carefully commented, making it much easier to modify than most. The site is extremely rich in both tutorial and open-source FLA content. There were, when we last checked, 177 tutorials and 78 open source files.

Webmonkey: Multimedia Collection http://www.hotwired.com/webmonkey/multimedia/?tw=frontdoor

Wired magazine’s Web developer’s resource, Webmonkey contains Flash tutorials.

Were-Here http://www.were-here.com/forum/ultimate.html

One of the most highly respected Flash reference sites, Were-Here has a table of contents that would take up a good part of this book’s reference section. There are 85 tutorials, including several on Flash 5, and 330 downloadable open-source FLAs in the following categories: 3-D, ActionScript code, Animation and Effects, Games, Generator, JavaScript, Math Functions, Menus and Navigation, Mouse Trails, Site Structure, SmartClips, Sound and Music, Text Effects, Utilities, Widgets, Flash 5 Menus, and a half-dozen or so new Flash 5 routines.

Appendix A


zinc roe Design http://www.zincroe.com/flash/

This show-off site for Jason Krogh features 17 “semi” open-source FLA files (you’re welcome to use them, as long as it’s not for commercial purposes).

Flash Mailing Lists flasher-l http://www.chinwag.com/flasher

An unmoderated discussion forum for developers using Macromedia Flash.

Flashpro http://www.muinar.com/flashpro

A mailing list for professional Macromedia Flash developers.

pro_flash http://www.onelist.com/subscribe.cgi/pro_flash

Dedicated to professional Macromedia Flash developers. Just go to the Web site to sign up.

FSDesigners http://www.egroups.com/group/FSdesigners

Macromedia Flash design.

Flash-Related Software Macromedia Generator http://www.macromedia.com/software/generator/

The Generator enables delivery of dynamic graphic content. In other words, what the viewer sees depends on his interaction with buttons and forms on the site. There are two versions of the program, the

337

338

Flash Site Workshop

Developer Edition (primarily for developers building prototypes) and the Enterprise Edition (the high volume, high performance, highprice version). Both editions have two components: authoring templates for Flash and the server software.

Flash Writer http://www.macromedia.com/software/flash/download/flashwriter/

This plug-in for Adobe Illustrator lets it directly export Flash files.

Swift 3D http://www.swift3d.com/

Swift 3D is a 3-D program made by Electric Rain (http:// that writes animated 3-D Flash files.

www.erain.com/)

Vectra 3-D http://www.vecta3d.com/

Vectra 3-D can be obtained either as a plug-in for 3D Studio Max or as a standalone application for both Mac and Windows. The standalone will accept .DXF 3-D models built in most anything. You can also extrude 2-D Flash images into 3-D, and then animate the 3-D and export the animation as Flash.

Kimmuli.com http://www.kimmuli.com/#

Kimmuli is a visual help tool for Generator; Bohdi is for making Generator COM objects for ASP, and Quassia is a Dreamweaver plugin for Flash that lets you get rid of the default cursor so that you can simulate your own for drag-and-drop animations.

Swish http://swishzone.com

Swish produces automated text effects for Macromedia Flash.

Appendix A


OpenSWF http://www.openswf.org

OpenSWF specializes in

.swf

file formatting.

Swifty Utilities http://buraks.com/swifty

Swifty develops tools for opening and organizing elements.

.swf

files and

OpenSWF http://www.openswf.org

A collection of tools for extend Macromedia Flash.

3-D Software Dimensions http://www.adobe.com/support/downloads/main.html

Dimensions extrudes 3-D from 2-D vector files (especially fonts). It is capable of output to Adobe Illustrator format, so the vector files can be imported directly into Flash, eliminating the need to trace over a bitmap.

Rhino3D http://www.rhino3d.com

A full-featured, modeling program for under $800, Rhino3D lets you import 3-D models from 3-D Studio Max and then export them as vector outlines that can be directly imported into Flash. All coloring has to be added inside Flash. This is Windows-only software, but it will run on Macs with Virtual PC.

Xara 3D http://www.xara.com

An inexpensive program, Xara 3D lets you convert any type of text to 3-D and animate it.

339

340

Flash Site Workshop

MetaStream http://www.metastream.com

A program for creating 3-D demos for the Web, MetaStream is an ideal solution for e-commerce sites that need to allow viewers to see a product from all sides. It could have important application in training and demo sites as well.

Blender http://www.blender.nl

Blender is a very powerful 3-D program that runs on numerous operating systems (but not any version of the Mac OS). Mac owners can run it under Linux. This program is shareware, but purchase of a (very affordable) key can unlock the latest and most powerful features.

Other Software Flash 4 Database http://www.kessels.com/flashdb/

This is a freeware program for storing and serving data from a database to Flash 4+.

Streamline www.adobe.com

Streamline is the ideal program for converting bitmapped sketches to editable vector graphics that can be imported into Flash. Streamline gives you considerably more control over how the image is converted into a drawing than if you use the built-in, auto-trace capabilities present in most other illustration programs.

Font Software TTCoverter http://www6.zdnet.com/cgi-bin/texis/swlib/mac/ infomac.html?fcode=MC13911

This shareware converts Windows TrueType fonts to Mac TT fonts.

Appendix A


Music Resources Flash Sounds http://www.sounds.muinar.com/

All of these sounds are specifically designed for Flash.

License Music http://www.licensemusic.com/

Large collection of licensed music, including familiar titles.

Music4Flash http://www.music4flash.com/

Good collection of royalty-free and inexpensive loops.

341

GLOSSARY

A ActionScript

The computer language Flash uses.

Animated graphics Moving images of any type. Often, Flash graphics and animated GIFs are image types seen on the Web. Aspect ratio The ratio of height to width. Like a television or movie screen, the shape of a Flash animation remains the same—no matter its size.

B Bitmapped graphic

See Raster graphic.

Blank keyframe A keyframe that causes nothing to appear on stage. See also Keyframe. Button

An item that a user can click to cause an action.

Button state A visual version of a button. For example, during clicking, a button is in its down state; when dormant, it is in its up state. When the mouse is hovered over a button, the button is in its over state. Button symbol A symbol used to create interactive buttons that respond to mouse events. See also Symbol.

344

Flash Site Workshop

C–E Coordinates Numbers signifying a place in a Cartesian plane, represented by (x,y). The top-left pixel in Flash, for instance, is written (0,0) or (0x,0y). Down state A button state that occurs when the user clicks the button with his mouse. Export To move a file or object from a Flash file. Often, the term is used to discuss the creation of distributable Flash files (.swf).

F .fla file

An editable Flash file.

Focus The state of being active. Usually the last object clicked currently has focus. In Flash, a dark line indicates which option has focus in a Timeline. See also Timeline. Frame rate The rate, stated in frames-per-second (fps), at which each frame in an animation is played back for the user. Frame-by-frame animation Animation using a series of keyframes with no tweening that creates a flipbook-like animation Flash file.

G Graphic symbol Used for animated symbols that need to be previewed inside Flash. Graphic symbols should be used only for situations requiring a preview, such as lip-syncing. Grid Like grid paper, a grid is used for precise placement of objects in a Flash file. See also Ruler. Guide layer A special layer that does not export when you export a Flash file. This layer can be used to help registration of various elements of a Flash file.

H Hit state

The clickable area of a button.

Hyperlink Text or an object (such as an image) that can be clicked to take a user to related information, as used on the World Wide Web.

Glossary

Hypertext Markup Language (HTML) The language read by Web browsers to present information on the Internet.

I Import

To bring a file or object into a Flash file.

Instance An occurrence of a symbol used from the Library— especially helpful because, although more than one instance can exist, only the master symbol must be saved. Thus, file sizes are kept small. See also Library and Symbol. Interface

The design with which users interact.

J–K Keyframe A frame in which you establish exactly what should appear on stage at that particular time.

L Layer One of a stack of media in a Flash file Timeline. Using layers is especially useful in animation because only one object can be transformed, or tweened, per layer. See also Tween. Library

A storage facility for all media elements used in a Flash file.

Library item

Any media element in the Library. See also Symbol.

M Masking A kind of layer property involving at least two layers: one set to Mask and one set to be Masked (like Motion Guide and Guided). The contents of the Masked layer will only show through where the Mask layer has graphical contents. Morph A kind of animation that transitions one shape to another. See also Shape Tween. Motion Guide A type of Guide layer that has an adjacent layer (below it) that is set to Guided. Tweened objects in the Guided layer will follow a path in the Guide layer.

345

346

Flash Site Workshop

Movie Clip symbol A symbol that contains interactive controls, sounds, and even other Movie Clips. Movie Clips can be placed in the Timeline of Button symbols to create animated buttons. Movie Clips follow their own internal Timeline, independent of the main Timeline. See also Symbol.

N–O Onion Skin tools Tools that enable you to edit one keyframe while viewing (dimly) other frames before or after the current frame. Over state A button state that occurs when the user passes his mouse over a button.

P–Q Panning An effect that makes a sound seem to move from left to right (or right to left). Parameter

A specifier used in ActionScript.

QuickTime A video format created by Apple. A common file format found on the Internet.

R Raster graphic An image file format that contains the color information for each pixel. Raster graphics’ file sizes are relatively large. RealPlayer A streaming video player created by Real Networks. RealMedia (RealPlayer files) is a common format found on the Internet. Registration The process of making sure screen components are properly aligned (often from one frame to another). See also Guide layer. Rollover sound A sound effect that plays any time a user places his cursor over a button. Ruler Like a physical ruler, in Flash, a ruler is used for precise measurement of objects in a Flash file. Rulers must be visible in order to create dragable guides. See also Grid. Runtime The point at which the user is watching your movie (as well as when you’re testing the movie).

Glossary

S Scale

To resize as necessary.

Scene

A component of a Timeline in a Flash file.

Scrub A technique to preview your animation by dragging the red current frame marker back and forth in the Timeline. Shape Tween A utility to create a fluid motion between two objects. See also Tween. Smart Clip A Movie Clip with parameters unique to each instance. In addition, Smart Clips can include a custom user interface to populate the parameters. Stage The large, white rectangle in the middle of the Flash workspace where a file is created. What is on the Stage is what the user will see when he plays a Flash file. Statement

A single line of code in a script. See also ActionScript.

Static graphics Graphics with no animation or interactivity. The computer-image equivalent of a photograph or a painting. file A Flash file meant only for distribution—it can be watched, but not edited.

.swf

file A Flash template file for use with the product Macromedia Generator.

.swt

Symbol A graphic, button, or Movie Clip that is stored in the Library. Symbols can be especially useful because, no matter how many instances of a symbol are used, it only has to download once, and changes made to the master symbol are immediately reflected in all instances already used. See also Button symbol; Graphic symbol; Library; Movie Clip symbol. Sync The timing between an animation and a corresponding sound. You choose sync settings in the Sound panel.

T Tile effect draw.

A raster graphic used as the fill color in any shape you

347

348

Flash Site Workshop

Timeline An object on the Flash workspace that contains the sequence of frames, layers, and scenes that make up an animation. Tween Used as a verb, “to tween” is to have a change made between two objects. For example, you can use a Shape Tween to morph a solid circle into a doughnut.

U–Z Up state Normally, a button’s default state, which occurs when the user has not clicked or passed over the button with his mouse. Vector graphic A vector graphic file contains all the calculations to redraw an image onscreen. A vector graphic’s file size remains small, and the image can be scaled to any size without any degradation of image quality. Flash .swf files are saved as vector graphics.

INDEX

Symbols / (slash), 233 // (double slashes), loadMovie command, 33 ; (semicolon), MySQL commands, 324 3-D_Animation Movie Clip, 49, 52 3-D software on the Web, 339-340

A About the Business movie audio track resources, 282 customizing, 268-276, 278-282 described, 267 editing elements, 282 how it works, 267-268 about us caption, customizing, 280 About.Com, 329 Accueil Flash Web site, 330 actions attachMovie, 298 getURL, 102-103, 256, 259 objDown, Subject Movie Clip, 302 Object, 256 objUp, Subject Movie Clip, 302 onClipEvent, 255, 300, 302, 308 POST, 201 Question 3 Face-In Movie Clip, 196

stop(), 27-28 Are You Sure? Movie Clip, 180 scene 1, viewer survey, 174 scene 2, viewer survey, 184 Subject Movie Clip, 302 Actions layer Carousel scene, 161-162 Container movies, 72 customizing, Inventory scene, 137-139 Navigation Bar Movie, 26-27 News and Reviews movie, 233-235 scene 1, viewer survey, 174-175 scene 2, viewer survey, 183-184 Sound On/Off button, 77 Subject Movie Clip, 302 Thumbnails scene, 165 Actions/Labels layer, Home Page Movie, 59 ActionScripts About the Business movie, 268 List By Category option, 134 subcolor Movie Clip, 145-146 Submit button, Login scene, 288 supplemental Flash movies, 90-91

Active Server Pages (ASPs), 319 Ad Banner layer, Home Page Movie, 59 Add to Cart button, 150-151, 157, 326 adding catalogs, Services Catalog movie, 209-210, 212, 214-217, 219, 221-223, 225-228 databases, MySQL, 325 main menu items, Navigation Bar Movie, 36, 38 online store and cart Carousel scene, 121, 160-163 Close-Up scene, 121, 149-159 Intro scene, 120, 123, 125-129 Inventory scene, 120-121, 130-140, 142-144, 146-148 Thumbnails scene, 121-122, 164-168 quotes, Random Quote Movie Clip, 54, 56-57 sub-menu items, Navigation Bar Movie, 39-40 tables, MySQL databases, 325 addresses, e-mail, 210

352

addresses, e-mail

Advanced property, Effect panel, 309 advertisements, Banner Animation Movie Clip, 257-258 agents, commerce, 326 Alert Box, Login scene, 291-293 Alert message, 285, 289 alertMsg variable, 293 Animated Image layer, Home Page Movie, 59 animations, 272, 281 Animations layer Home Page Movie, 59 Container movies, 72 applications 3-D, 339-341 Flash-related, 337-339 font, 340 Are You Sure? Movie Clip customizing, 180 described, 175 triggering, No button, 179 arrays info, 261 list, 261 new Array, 223-224 Scroller Box Smart Clip, 261 servicelist, 221, 228 sortlist, 225 Arrow button, viewer surveys, 199 Arrow Button symbol, Services Catalog movie, 226-227 Arrow Down Movie Clip, Inventory scene, 146-147

Arrow Up Movie Clip, Inventory scene, 146-147 Art’s Web site, 330 article variable, 249 ASP. See Active Server Pages attachMovie action, 298 attachMovie command, 211, 255, 302-303 attachMovie function, 157 audio playing for duration of animations, About the Business movie, 272 resources on the Web, 341 audio track resources, About the Business movie, 282 Author Drop-Down menu, News and Reviews movie, 241-243

B back end files, News and Reviews movie, 235-237 background colors, HTML documents and Flash movies, 18 background elements, About the Business movie, 269-271 Background layer Container movies, 72 Login scene, 290-291 backgrounds Navigation Bar Movie, 29

Sub-Menu button, Navigation Bar Movie, 32 temporary Login scene, 289-290 Services Catalog movie, 213 viewer surveys, 175-176 Banner Animation Movie Clip, Preview Links Movie, 254, 257-258 banners, Home Page Movie, 64-65 Bar Button symbol, Services Catalog movie, 217 Bar instance, 46 Bar script, Preloader element, 44 BertoFlash Web site, 330 bitmap images, importing and tweening, 63 bizlist elements, 223 Blank Info Window, Preview Links Movie, 254, 256-257 Blender, 340 Blue Background graphic symbol, 74-75 Blue Background layer Home Page Movie, 59, 61 Introduction element, 49 Blue Background symbol Intro scene, 126 News and Reviews movie, 238-239 Services Catalog movie, 213

buttons

Blue Empty Box symbol, 199, 219-220 Border layer, Random Quote Movie Clip, 52 bottom header text, About the Business movie, 276 Box 1 symbol, 186 Box graphic, Close-Up scene, 153-154 Boxes-Grouped movie clip, Services Catalog movie, 214-215 browsers calling JavaScript functions, 101 playing Flash movies, 319-325 building Container movies, 69-70 customizing, 73, 76-81 how the building process works, 70-73 threaded message boards Login scene, 285, 288-289, 291-296 Message scene, 286, 307-309, 311 Post scene, 286, 313-317 Subject scene, 285, 298, 300-305 Button Identifier object, Subject scene, 300 button instances, deleting, 76, 80

Button layer, Next Question Movie Clip, 191 buttons Add to Cart, 150-151, 157, 326 Arrow Services Catalog movie, 225-227 viewer surveys, 199 Buy, 143 Carousel, Intro scene, 128 category box, About the Business movie, 272-275 Check Out Presentation, Services Catalog movie, 220-221 Clear, News and Reviews movie, 246 Close, Alert Box, 292 Company Name, 76 About the Business movie, 279-280 Intro scene, 128-129 Preview Links Movie, 259 Services Catalog movie, 214 viewer surveys, 177-178 customizing descriptions Message scene, 308 Post scene, 315 Flash Animation, 89 Forward, Navigation Bar Movie, 30

Generic, Inventory scene, 139 Go to Beginning, 92 Go to End, 92, 98 Go to New Scene, 78-79 Go To Scene, Container movies, 95 Launch New Window, 89, 91, 100-104 Launch Real Player, Services Catalog movie, 221-222 Launch Window, 80 List Options, Intro scene, 127-128 Load Flash Animation, 89 Load Movie, 90, Container movies, 95 Load New Movie, 78 Main Menu, Navigation Bar Movie, 30, 32 Message, Preview Links Movie, 262 Message list, Subject scene, 304 Minus, 154-155 Movie Control, 79-80 Next Question, 191-192 No, viewer surveys, 179 Panorama, Container movies, 109-110 Pause, 97, 113 Place Order, Intro scene, 128 Plain 3-D Intro scene, 127 Message scene, 309

353

354

buttons

Post scene, 315 Subject scene, 301 Play, 97, 113 Plus, 154-155 Print a Brochure, 151, 157, 217 Print Price List, 211, 219 Pull Down Menu, 146 pull-down, Services Catalog movie, 217 QuickTime, Services Catalog movie, 222 QuickTime Video, launching in Container movies, 116 radio, viewer surveys, 189-191, 195, 198 Real Player, 212, 222 Reset, viewer surveys, 192-193 Resource, Preview Links Movie, 258-259 Reverse, Navigation Bar Movie, 30 Rewind, 96-97 Rotate, 152, 155 Scroll Message scene, 309 Subject scene, 301-302 Navigation Bar Movie, 26 Scroll Box Arrow, 80, 263 Scroll Down, 80-81 Scroll Up, 80-81 Skip to End, 113

Skip to Main Movie, Introduction element, 51 Sound Control, Introduction element, 50 Sound On/Off, 77-78 Start a New Topic, Subject scene, 301 Step Back, 112 Step Backward, 97 Step Forward, 97-98, 113 Sub-Menu, Navigation Bar Movie, 32-33 Subcolor, 146 Subject list, Subject scene, 303 Submit Login scene, 288, 294-295 News and Reviews movie, 244, 246 Post scene, 313-314, 316 viewer surveys, 201-202 Subsize, 146 Thumbnails, Intro scene, 128 Video Presentation, 212 Yes, viewer surveys, 178 Zoom In, 151-152 Zoom Out, 151-152 Buttons layer Container movies, 72 Navigation Bar Movie, 25, 27

Sound On/Off button, 77 Buy button, 143

C calling JavaScript functions, 101 Cannot Register error message, 322 captions, About the Business movie, 280 Carousel button, Intro scene, 128 Carousel scene, online store and cart, 121, 160-163 Cart icon, Close-Up scene, 155 cart creation Carousel scene, 121, 160-163 Close-Up scene, 121, 149-159 Intro scene, 120, 123, 125-129 Inventory scene, 120-121, 130-140, 142-144, 146-148 Thumbnails scene, 121-122, 164-168 Catalog Glance text symbol, Intro scene, 126-127 Catalog layer, Thumbnails scene, 166 catalogcolor table, 133, 144 catalogitem table, 133, 135

Company Name button

catalogs, creating in Services Catalog movie, 209-210, 212, 214-217, 219, 221-223, 225-228 catalogsize table, 133, 144 catalogspecial table, 135 category box buttons, About the Business movie, 272-275 category boxes, About the Business movie, 271-272 Category Movie Clip, Carousel scene, 162 CD-ROM, folders on, 11 changing Close button, Alert Box, 292 colors, Scrollable Text field, 99 elements, About the Business movie, 282 graphics, Master Button symbols, 77 movies, tips for, 9-10 number of menu items, Navigation Bar Movie, 34-36, 38, 40 panorama photos, 109 paths, QuickTime videos, 114 pop-up menus to dropdown menus, Navigation Bar Movie, 34 quotes, Random Quote Movie Clip, 52-53 Recessed Box symbol, viewer surveys, 179 sound instances, 77

tempo, banner displays, 258 Thank You Text symbol, 205 See also customizing Check Out Presentation button, Services Catalog movie, 220-221 checking logins, variables for, 295 ChildNodes, 142 Clear button, News and Reviews movie, 246 Cleopatra Art Group Web site, 331 Close button, Alert Box, 292 Close-Up scene, online store and cart, 121, 149-159 Closer layer, Thumbnails scene, 166 closing Alert Box, 292 Cnafield Studios Web site, 330 CNet Flash Tips Web site, 330 Code 66 Web site, 331 color bar, About the Business movie, 281 Color Bar Animation layer, Home Page Movie, 59 Color Bar Movie Clip, Home Page Movie, 62 Color Drop Movie Clip, 144, 146 Color drop-down menu, text labels, 158 color field, 144 color variable, 142 Color Wide movie clip, 157-158

colorlist variable, 142 colors background HTML documents and Flash movies, 18 Navigation Bar Movie, 29 changing, Scrollable Text field, 99 sniffer pages, 14-15 Sub-Menu button, Navigation Bar Movie, 32 Column Movie Clip, 141-142 commands attachMovie, 211, 255, 302-303 gotoAndPlay, 255 loadMovie, 33 MySQL, semicolons (;) in, 324 mysqld, 323 mysqlshow, 323 show databases, 324 show tables, 325 stopAllSounds(), 50 use flashDB, 325 commerce agents, 326 company names, About the Business movie, 279-280 Company Name button, 76 About the Business movie, 279-280 Intro scene, 128-129 Preview Links Movie, 259 Services Catalog movie, 214

355

356

Company Name button

viewer surveys, 177-178 Company Name layer, Home Page Movie, 59, 61 company name symbol, 290 Company Name symbol, News and Reviews movie, 239-240 company variable, 222 Complete instance, 202 configuring paths to servers, 233 container instance, 89 Container movie Clip, Service Text Pulldown movie clip, 210 Container movies building, 69-73 customizing, 73, 76-81, 93-105 QuickTime video, 86-87, 112-117 Scrollable Panorama Movie, 85-86, 107, 109-110 supplemental Flash movies, 85, 89-93 Country Pulldown movie clip, Services Catalog movie, 225 creating catalogs, Services Catalog movie, 209-210, 212, 214-217, 219, 221-223, 225-228 Container movies, 69-70 customizing, 73, 76-81

how the building process works, 70-73 databases, MySQL, 325 home pages Home Page Movie, 23, 41-45, 47-52, 54, 56-57, 59-61, 63-67 Navigation Bar Movie, 22 purpose of, 21 role of Flash in providing usability and consistency, 21-22 main menu items, Navigation Bar Movie, 36, 38 navigation bars, Navigation Bar Movie, 25-29, 31-33, 35-36, 38-40 online store and cart Carousel scene, 121, 160-163 Close-Up scene, 121, 149-159 Intro scene, 120, 123, 125-129 Inventory scene, 120-121, 130-140, 142-144, 146-148 Thumbnails scene, 121-122, 164-168 quotes, Random Quote Movie Clip, 54, 56-57

sub-menu items, Navigation Bar Movie, 39-40 threaded message boards Login Scene, 285, 288-289, 291-296 Message Scene, 286, 307-309, 311 Post Scene, 286, 313-317 Subject Scene, 285, 298, 300-305 customizing About the Business movie, 268-276, 278-282 Carousel scene, 162-163 Close-Up scene, 152-159 Container movies, 73, 76-81, 93-105 first scene, viewer survey, 175, 177-181 Flash-based Sniffer, 16-18 fourth scene, viewer survey, 205-206 Home Page Movie, 60-61, 63-67 Intro scene, 125-129 Introduction element, 50 Inventory scene, 136-140, 142-144, 146-148 JavaScript Sniffer, 14-15

drop-down menus

Navigation Bar Movie, 29, 31-33, 35-36, 38-40 News and Reviews movie, 237, 239-244, 247-248, 250 Preloader element, 45, 47 Preview Links Movie, 257-263 QuickTime video, 114-117 Scrollable Panorama Movie, 107, 109-110 second scene, viewer survey, 184-187, 189-193 Services Catalog movie, 212, 214-217, 219, 221-223, 225-228 supplemental Flash movies, 93-94 third scene, viewer survey, 196-199, 201, 203 threaded message boards Login scene, 289, 291-296 Message scene, 307-309, 311 Post scene, 314-317 Subject scene, 300-305 Thumbnails scene, 167-168 See also changing

D daemons, mysqld, 323 Dashes Anim Movie Clip, 184 database tables, News and Reviews movie, 235-237 databases, MySQL, 320-325 Date Drop-Down menu, News and Reviews movie, 241-243 deleting button instances Company Name, 76 Scroll Up and Scroll Down, 80 Go to New Scene buttons, 79 graphics, Master Button symbols, 77 Launch Window buttons, 80 main menu items, Navigation Bar Movie, 35 Movie Control buttons, 79 sub-menu items, Navigation Bar Movie, 38 designing home pages Home Page Movie, 23, 41-45, 47-52, 54, 56-57, 59-61, 63-67 Navigation Bar Movie, 22 purpose of, 21

role of Flash in providing usability and consistency, 21-22 navigation bars, Navigation Bar Movie, 25-29, 31-33, 35-36, 38-40 Designs by Mark Web site, 331 Dimensions, 339 displaying banners, changing tempo, 258 message replies, Message scene, 308-309 documents, HTML, 16, 18 double slashes (//), loadMovie command, 33 Drag Engine Movie Clip, 107, 109 Drag Handle layer, Navigation Bar Movie, 26 Drop-Down Button symbol, News and Reviews movie, 242 drop-down menus Author, News and Reviews movie, 241-243 changing to pop-up menus, Navigation Bar Movie, 34 Date, News and Reviews movie, 241-243 search options, News and Reviews movie, 232-233

357

358

drop-down menus

Topic, News and Reviews movie, 241-243 Duplicated Button MC, 262 dynamic text boxes Carousel scene, 162-163 Close-Up scene, 153 Thumbnails scene, 167 dynamic text field, Preloader element, 46

E e-commerce capabilities, Online Store movie, 326 e-mail addresses, Services Catalog movie, 210 Edge/Buttons layer, Subject Movie Clip, 302 editing Close button, Alert Box, 292 colors, Scrollable Text field, 99 elements, About the Business movie, 282 graphics, Master Button symbols, 77 movies, tips for, 9-10 number of menu items, Navigation Bar Movie, 34-36, 38, 40 panorama photos, 109 paths, QuickTime videos, 114 pop-up menus to dropdown menus, Navigation Bar Movie, 34

quotes, Random Quote Movie Clip, 52-53 Recessed Box symbol, viewer surveys, 179 sound instances, 77 tempo, banner displays, 258 Thank You Text symbol, 205 See also customizing Effect palette, 300 Effect panel, Tint and Advanced properties, 309 elements background, About the Business movie, 269-271 bizlist, 223 editing, About the Business movie, 282 Introduction, Home Page Movie, 23, 48-52, 54, 56-57 Preloader, Home Page Movie, 23, 41-45, 47 Search Results, News and Reviews movie, 246-249 Summary, News and Reviews movie, 249-250 text, Container movies, 81 else if statement, 211 email variable, 222 embedded movie outlines, 75 embedding fonts, input fields, 295 encourage instance, 179-180

encourage statement, 175 end label, 98 erasing button instances Company Name, 76 Scroll Up and Scroll Down, 80 Go to New Scene buttons, 79 graphics, Master Button symbols, 77 Launch Window buttons, 80 main menu items, Navigation Bar Movie, 35 Movie Control buttons, 79 sub-menu items, Navigation Bar Movie, 38 error messages missing required fields, Alert Box, 293 running MySQL, Windows NT/2000, 322 events on (press), 103 onRelease, 192 Ever Shopped Company Name text symbol, 186 Extreme Flash Web site, 331

F failed login alert messages, Alert Box, 293

formats for images

Failed to Install Service error message, 322 Fay Studios Web site, 331 fields color, 144 dynamic text, Preloader element, 46 itemID, 133, 135, 144 leftImage, 136 login input, Login scene, 295 Percent Loader text, Preloader element, 45 quantity, 135 rightImage, 136 Scrollable Text, Container movies, 98-100 Service Request Form, Services Catalog movie, 222-223 size, 144 text Inventory scene, 136-137 Preloader element, 45-46 Thumbnails scene, 167 viewer surveys, 176-177 text input Message scene, 309-310 Post scene, 314-315 files back end, News and Reviews movie, 235-237 Container movie, testing, 71-72

homepage.swf, 60 hz_Nav_Bar_new.swf, 60 Movie_1.swf, Services Catalog movie, 227-228 qt.fla, QuickTime videos, 114-116 Review.asp, 237 reviewSearchCriteria.asp, 237 reviewSearchResults.asp, 237 Service_1.swf, Services Catalog movie, 218 Files folder, 11 fills, gradient, 239 first scene customizing, 175, 177-181 described, 171 how it works, 174-175 Flahoo.com, 332 Flash 4 Database, 340 Flash Academy Web site, 331 Flash Animation buttons, 89 Flash Jester Web site, 333 Flash Magazine Web site, 333 Flash movies background colors, 18 playing in Web browsers, 319-325 setting location of, 17-18 timing, 16 Flash Pro Web site, 333 Flash resources on the Web 3-D software, 339-340

Flash 4 Database, 340 Flash-related software, 337-339 font software, 340 mailing lists, 337 music, 341 Streamline, 340 Web sites, 329-337 Flash Sounds Web site, 341 Flash tracks, publishing QuickTime videos with, 115-116 Flash Writer, 338 Flash-based Sniffer, 16-18 Flash.com, 331 FlashBible Web site, 332 flasher-1 mailing list, 337 FlashFilmMaker.com, 330 Flashgeek.com, 335 FlashKit Web site, 332 Flashkit.com, 282 FlashLite Web site, 332 FlashMaster Web site, 333 Flashmove Web site, 332 FlashPlanet Web site, 332 Flashpro mailing list, 337 Flashwave Web site, 333 Flazoom Web site, 333 folders Files, 11 Library, About the Business movie, 270 on CD-ROM, 11 Software, 11 Source, 11 font software, 340 fonts, embedding in input fields, 295 formats for images, 63-64

359

360

forms, service request

forms, service request, 212 Forward button, Navigation Bar Movie, 30 Forward Engine layer, Container movies, 72 fourth scene customizing, 205-206 described, 172 how it works, 205 frame labels, 91 freeware, Flash 4 Database, 340 FSDesigners mailing list, 337 functions attachMovie, 157 geturl, 180, 240 JavaScript, calling, 101 onLoginReply, 289 openNewWindow, 102 openWindow, 220 populateProducts, 141 populateTopics, 235 Push, 139

G Generic button, Inventory scene, 139 Generic Button Movie Clip, customizing, 262 getURL action, 102-103, 256, 259 getURL function, 180, 240 .gif format, 63 Go to Beginning buttons, 92

Go to End button, 98 Go to End buttons, 92 Go to Main Button layer, Introduction element, 49 Go to New Scene button, customizing, 78-79 Go To Scene button, customizing, 95 gotoAndPlay command, 255 Gradient Button symbol, 158 gradient fills, 239 Gradient symbol, 158 graphic symbols Blue Background, 74-75 Green Background, 74-75 Have You Ever Shopped, 196 How Satisfied, 197 Loaded Text, Preloader element, 51 Menu, News and Reviews movie, 242 Radio-fade 1, 189-190 Radio-fade 2, 191 Satisfaction Text Copy 1, 197-198 Services Request Form Title, Services Catalog movie, 222 Services Text, Services Catalog movie, 227 Temporary Background, Preloader element, 45 Text Input_med, 223 Why Satisfied, 199 graphics bitmap, importing and tweening, 63

Box, Close-Up scene, 153-154 Cart, 155 deleting, Master Button symbols, 77 panorama photos, replacing, 109 Text Box Slider, Preview Links Movie, 262-263 text input field, Message scene, 309-310 Green Background graphic symbol, 74-75 Green Background layer Home Page Movie, 61 Introduction element, 49 Green Background symbol Intro scene, 126 Services Catalog movie, 213 green load bar, Preloader element, 46 guide instance, 140 Guide layer About the Business movie, 268 Thumbnails scene, 166

H Have You Ever Shopped graphic symbol, 196 header text, About the Business movie, 275 headers services, Services Catalog movie, 227

instances

titles, Preview Links Movie, 260 HelpCentre Web site, 334 Home Page Movie described, 23 how it works, 59-61, 63-67 Introduction element, 23, 48-52, 54, 56-57 Preloader element, 23, 41-45, 47 home pages Home Page Movie, 23, 41-45, 47-52, 54, 56-57, 59-61, 63-67 Navigation Bar Movie, 22 purpose of, 21 role of Flash in providing usability and consistency, 21-22 homepage.swf, 60 Horizontal Bar Animation movie clip, Services Catalog movie, 213 How Satisfied graphic symbol, 197 HTML documents, 16, 18 hz_Nav_Bar_new.swf, 60

I i/US Flash Conference Web site, 334 icons, Cart, 155. See also graphics if statement, 142, 152 if-then statement Preloader element, 44 IIS. See Internet Information Server

imageList variable, 139 images bitmap, importing and tweening, 63 Box, Close-Up scene, 153-154 Cart, 155 deleting, Master Button symbols, 77 panorama photos, replacing, 109 Text Box Slider, Preview Links Movie, 262-263 text input field, Message scene, 309-310 importing bitmap images, 63 info arrays, 261 information boxes, About the Business movie, 276, 278 initializing databases, MySQL, 323-325 input fields login, 295 Service Request Form, Services Catalog movie, 222-223 text Message scene, 309-310 Post scene, 314-315 inputbox instance, 200 inserting catalogs, Services Catalog movie, 209-210, 212, 214-217, 219, 221-223, 225-228

databases, MySQL, 325 main menu items, Navigation Bar Movie, 36, 38 online store and cart Carousel scene, 121, 160-163 Close-Up scene, 121, 149-159 Intro scene, 120, 123, 125-129 Inventory scene, 120-121, 130-140, 142-144, 146-148 Thumbnails scene, 121-122, 164-168 quotes, Random Quote Movie Clip, 54, 56-57 sub-menu items, Navigation Bar Movie, 39-40 tables, MySQL databases, 325 installing MySQL, Windows 98, 321 instances Bar, 46 buttons, deleting, 76, 80 Complete, 202 container, 89 encourage, 179-180 guide, 140 inputbox, 200 mask, 140 message, 255 nextQuestion, 190

361

362

instances

screen, 152 sounds, swapping, 77 zoomin, 152 Internet Flash resources on 3-D software, 339-340 Flash 4 Database, 340 Flash-related software, 337-339 font software, 340 mailing lists, 337 music, 341 Streamline, 340 Web sites, 329-337 publishing sites, playing Flash movies, 319-325 Internet Explorer, calling JavaScript functions, 101 Internet Information Server (IIS), 320 Intro scene, online store and cart, 120, 123, 125-129 Introduction element, Home Page Movie, 23, 48-52, 54, 56-57 Introduction text symbol, customizing in viewer surveys, 177 Inventory scene, online store and cart, 120-121, 130-140, 142-144, 146-148 itemID field, 133, 135, 144

J-K JavaScript functions, calling, 101 JavaScript Sniffer, 13-15 .jpg format, 63 keyframe labels, 35 Kimmuli.com, 338 Krogh, Jason, 337

L label text, customizing in Zoom and Rotate symbols, 154 labels end, 98 frames, 91 keyframe, 35 loadDone, 49 supplemental Flash movies, 93 text, Size and Color drop-down menus, 158 Up, 27 Labels layer Navigation Bar Movie, 26 supplemental Flash movies, 91 Launch New Window buttons, 89, 91, 100-104 Launch Real Player button, Services Catalog movie, 221-222 Launch Window button, customizing, 80

launching MySQL servers, 323 Panorama buttons, Container movies, 109-110 QuickTime Video buttons, Container movies, 116 layers Actions Carousel scene, 161-162 Container movies, 72 Inventory scene, 137-139 Navigation Bar Movie, 26-27 News and Reviews movie, 233-235 scene 1, viewer survey, 174-175 scene 2, viewer survey, 183-184 Sound On/Off button, 77 Subject Movie Clip, 302 Thumbnails scene, 165 Actions/Labels, Home Page Movie, 59 Ad Banner, Home Page Movie, 59 Animated Image, Home Page Movie, 59 Animations Container movies, 72 Home Page Movie, 59

layers

Background Container movies, 72 Login scene, 290-291 Blue Background Home Page Movie, 59, 61 Introduction element, 49 Border, Random Quote Movie Clip, 52 Buttons Container movies, 72 Navigation Bar Movie, 25, 27 Next Question Movie Clip, 191 Sound On/Off button, 77 Catalog, Thumbnails scene, 166 Closer, Thumbnails scene, 166 Color Bar Animation, Home Page Movie, 59 Company Name, customizing in Home Page Movie, 61 Company Name, Home Page Movie, 59 Drag Handle, Navigation Bar Movie, 26 Edge/Buttons, Subject Movie Clip, 302 Forward Engine, Container movies, 72 Go to Main Button, Introduction element, 49

Green Background Home Page Movie, 61 Introduction element, 49 Guide, Thumbnails scene, 166 Labels Navigation Bar Movie, 26 supplemental Flash movies, 91 Left Animation, Introduction element, 49 Loaded Text, Introduction element, 49 Macromedia Buttons, Home Page Movie, 59 Mask Navigation Bar Movie, 25 Promo Movie Clip, 63 Subject Movie Clip, 302 Thumbnails scene, 167 Product Demo Scroll, Container movies, 72 Random Quotes, Introduction element, 49 Rewind Engine, Container movies, 72 Right Animation, Introduction element, 49 rolloffTarget, Navigation Bar Movie, 27

Row Subject Movie Clip, 302 Thumbnails scene, 167 Scrolling Engines, 248-249 Search Results Outline, News and Reviews movie, 247 Side Line Animation, Home Page Movie, 59 Sound On/Off, Introduction element, 49 Sounds, Sound On/Off button, 77 Static Graphics Container movies, 72 Thumbnails scene, 166 Sub-Menu, Navigation Bar Movie, 27 Temp Background, Home Page Movie, 60 Temporary Background, Container movies, 72 Text Container movies, 72 Home Page Movie, 59 News and Reviews movie, 241 Promo Movie Clip, 63 Thumbnails scene, 166 Text Fields, Login scene, 288 Text Scroll Movie Clip, 80

363

364

layers

Top, Navigation Bar Movie, 26 Vertical Bars Animation, Home Page Movie, 59 Layers layer, supplemental Flash movies, 91 Left Animation layer, Introduction element, 49 leftImage field, 136 libraries, About the Business movie, 270 Library folders, About the Business movie, 270 License Music Web site, 341 Link Pop-Up window, Preview Links Movie, 257 links, Sub-Menu button, 32-33 List By Category option, ActionScript, 134 List Options buttons, Intro scene, 127-128 list arrays, 261 Load Flash Animation buttons, 89 Load Movie buttons, 90, 95 Load New Movie button, 78 loadDone label, 49 Loaded Text graphic symbol, Preloader element, 51 Loaded Text layer, Introduction element, 49 LoaderMain Movie Clip, text fields, 45-46 loading supplemental Flash movies, 85 loadMovie command, 33

loadspecials object, 136 Log in Welcome symbol, Login scene, 291 login alert messages, Alert Box, 293 login input fields, Login scene, 295 login parameters, Login scene, 291 Login scene customizing, 289, 291-296 described, 285 how it works, 288-289 loginReplyXML object, 289 logins, variables used for verifying, 295 loginXML object, 289 logos, customizing in Home Page Movie, 65 look and feel, changing in movies, 9

M Macintosh, calling JavaScript functions, 101 Macromedia Buttons layer, Home Page Movie, 59 Macromedia conferences, 334 Macromedia Flash Support Center Web site, 334 Macromedia Generator, 337 mailing lists, Flash, 337 Main Menu button, Navigation Bar Movie, 30, 32

Main Screen movie clip, Close-Up scene, 155-157 Main Timeline, About the Business movie, 268 main variable, 144 manipulating MySQL databases, 323-325 Mano1 Web site, 334 Mascot movie clip, 156-157 mask instance, 140 Mask layer Navigation Bar Movie, 25 Promo Movie Clip, 63 Subject Movie Clip, 302 Thumbnails scene, 167 Mask symbol, 140 Master Button symbols, deleting graphics, 77 Menu graphic symbol, News and Reviews movie, 242 menus Author Drop-Down, News and Reviews movie, 241-243 changing number of items in, Navigation Bar Movie, 34-36, 38 Date Drop-Down, News and Reviews movie, 241-243 drop-down changing to pop-up menus, Navigation Bar Movie, 34 search options, News and Reviews movie, 232-233

movie clips

pop-up, changing to drop-down menus, 34 Size and Color dropdown, text labels, 158 Topic Drop-Down, News and Reviews movie, 241-243 message boards Login scene, 285, 288-289, 291-296 Message scene, 286, 307-309, 311 Post scene, 286, 313-317 Subject scene, 285, 298, 300-305 Message button, Preview Links Movie, 262 message instance, 255 Message list button, Subject scene, 304 Message Movie Clip, 298 News and Reviews movie, 247-248 Subject scene, 304 Message Outline symbol, Subject scene, 304-305 Message scene, 286, 307-309, 311 messages Alert, 285, 289 customizing content, Message scene, 307 displaying replies, Message scene, 308-309 error, running MySQL on Windows NT/2000, 322 failed login alert, 293

missing required fields, 293 welcome Home Page Movie, 61 Login scene, 294 MetaStream, 340 metatags, refresh, 16 Middleware, 319 Milburn, Ken, 8 Minus button, 154-155 missing required fields messages, Alert Box, 293 Modify Movie option, Preloader element, 45 modifying Close button, Alert Box, 292 colors, Scrollable Text field, 99 elements, About the Business movie, 282 graphics, Master Button symbols, 77 movies, tips for, 9-10 number of menu items, Navigation Bar Movie, 34-36, 38, 40 panorama photos, 109 paths, QuickTime videos, 114 pop-up menus to dropdown menus, Navigation Bar Movie, 34 quotes, Random Quote Movie Clip, 52-53 Recessed Box symbol, viewer surveys, 179 sound instances, 77

tempo, banner displays, 258 Thank You Text symbol, 205 See also customizing Moock WebDesign Flash Web site, 334 Movie Clip SliderMax, 46 movie clips 3-D_Animation, 49, 52 Alert Box, Login scene, 291-293 Are You Sure?, 175, 179, 180 Arrow Down, Inventory scene, 146-147 Arrow Up, Inventory scene, 146-147 Banner Animation, Preview Links Movie, 254, 257-258 Boxes-Grouped, Services Catalog movie, 214-215 Category, Carousel scene, 162 Color Bar, Home Page Movie, 62 Color Drop, 144, 146 Color Wide, 157-158 Column, 141-142 Container movie, Service Text Pulldown movie clip, 210 Country Pulldown, Services Catalog movie, 225 Dashes Anim, 184 Drag Engine, 107, 109 Generic Button, Preview Links Movie, 262

365

366

movie clips

Home Page Movie described, 23 how it works, 59-61, 63-67 Introduction element, 23, 48-52, 54, 56-57 Preloader element, 23, 41-45, 47 Horizontal Bar Animation, Services Catalog movie, 213 Loader Main, text fields, 45-46 Main Screen, Close-Up scene, 155-157 Mascot, 156-157 Message, 298 News and Reviews movie, 247-248 Subject scene, 304 Navigation Bar Movie, 22 customizing, 29, 31-33, 35-36, 38-40 how it works, 25-28 Next Question, 191-192, 196 No q2, 189-191 No q3, 198 ObjDown, 147 Object Animation, Home Page Movie, 65 objLeft, 308 objRight, 308 Pan-Object, 107, 109 Please Complete, 202 Preview Links Movie customizing, 257-263

described, 253 how it works, 254-256 Print, 151, 217 Product List, Inventory scene, 140, 142-144, 146 Promo, Home Page Movie, 63-64 Question 1 Fade-In, 186-187 Question 1 Fade-Out, 187 Question 1 Static, 187 Question 2 Fade-In, 188 Question 2 Fade-Out, 189 Question 2 Static, 188 Question 3 Fade-In, 196 Question 4 Fade-In, 197 Question 4 Fade-Out, 198 Radio Button, Services Catalog movie, 225 Random Quote, 52, 54, 56-57 Recessed Boxes, 185-186 Scroll Engine, 216 ScrollDown, 99-100, 200 ScrollUp, 99-100, 200 Service Text Pulldown, 210, 215-216 Services Body Copy, Services Catalog movie, 219

Side Line Animation, Home Page Movie, 66-67 Size, 144 Size Wide, 157-158 Slide-Object, 107 Smart Clips253-256, 260-263 Special Image, Inventory scene, 139 Specials, Inventory scene, 137-140 State Pulldown, Services Catalog movie, 224 Sub-Menu, 28 subcolor, 145-146 Subject, 298-300, 302-303 Subject Row, 308 Summary, News and Reviews movie, 249-250 Text Scroll, 98-100 customizing, 199-200 layers, 80 Tree, displaying message replies, 308-309 Tree Grid, 308 treeDown, 308 treeUp, 308 Type of Business Pulldown, Services Catalog movie, 223-224 Vertical Bars Animation, Home Page Movie, 65-66

News and Reviews movie

Yes q2, 189-191 Yes q3, 198 Movie Control buttons, 79-80 Movie Explorer, 300 Movie Screen, Close-Up scene, 156 movie section outlines, Services Catalog movie, 219-220 movie variable, 91 movies About the Business audio track resources, 282 customizing, 268-276, 278-282 described, 267 editing elements, 282 how it works, 267-268 changing, tips for, 9-10 Container building, 69-73 customizing, 73, 76-81, 93-105 QuickTime video, 86-87, 112-117 Scrollable Panorama Movie, 85-86, 107, 109-110 supplemental Flash movies, 85, 89-93 Flash background colors, 18 playing in Web browsers, 319-325

setting location of, 17-18 timing, 16 Movie_1.swf, Services Catalog movie, 227-228 News and Reviews customizing, 237, 239-244, 247-248, 250 how it works, 231-237 Online Store, e-commerce capabilities, 326 QuickTime customizing, 114-117 described, 86-87 how it works, 112-114 Scrollable Panorama customizing, 107, 109-110 described, 85-86 how it works, 107 Services Catalog customizing, 212, 214-217, 219, 221-223, 225-228 described, 209 how it works, 209-210, 212 Service_1.swf, Services Catalog movie, 218 supplemental Flash customizing, 93-94 how it works, 89-92 loading, 85

moviescreen symbol, Message scene, 310 Movie_1.swf, Services Catalog movie, 227-228 moving Promo Movie Clips, 64 msgXML object, 307 music, resources on the Web, 341 Music Loop symbol, 50 Music4Flash Web site, 341 MySQL, 320-325 mysqld daemon, 323 mysqlshow command, 323

N name variable, 222 Navigation Bar Movie, 22 customizing, 29, 31-33, 35-36, 38-40 how it works, 25-28 Navigation Bar Placeholder Graphic (Guide layer), About the Business movie, 268 navigation bars About the Business movie, 281-282 Home Page Movie, 60 new Array, 223-224 newmessageXML object, 314 newMsgListXML object, 299 News and Reviews movie customizing, 237, 239-244, 247-248, 250 how it works, 231-237

367

368

NewsAuthor table

NewsAuthor table, 236 NewsReview table, 236 Newstopic table, 236 news_reviews text symbol, News and Reviews movie, 239 Next Question button, 191-192 Next Question Movie Clip, 191-192 nextQuestion instance, 190 No button, viewer surveys, 179 No q2 Movie Clip, 189-191 No q3 Movie Clip, 198 No text symbol, 187 Nuthing But Flash Web site, 335

O objDown action, Subject Movie Clip, 302 ObjDown Movie Clip, 147 Object Action, 256 Object Animation Movie Clip, Home Page Movie, 65 objects Button Identifier, Subject scene, 300 loadspecials, 136 loginReplyXML, 289 loginXML, 289 msgXML, 307 newmessageXML, 314 newMsgListXML, 299 productsXML, 134, 166

responseXML, 314 specialsXML, 135 treeXML, 307-308 objLeft clip, 308 objRight clip, 308 objUp action, Subject Movie Clip, 302 on (press) event, 103 Oncall Interactive, 8 onClipEvent action, 255, 300, 302, 308 online store creation Carousel scene, 121, 160-163 Close-Up scene, 121, 149-159 Intro scene, 120, 123, 125-129 Inventory scene, 120-121, 130-140, 142-144, 146-148 Thumbnails scene, 121-122, 164-168 Online Store movie, e-commerce capabilities, 326 onLoginReply function, 289 onRelease event, 192 opening MySQL servers, 323 Panorama buttons, Container movies, 109-110 QuickTime Video buttons, Container movies, 116 openNewWindow function, 102 OpenSWF, 339

openWindow function, 220 options List By Category, ActionScript, 134 Modify Movie, Preloader element, 45 search, News and Reviews movie, 232-233 text based search, 135 outlines Container movies, 81 embedded movies, 75 Resources box, Preview Links Movie, 259 sections, Services Catalog movie, 214-215, 219-220 welcome messages, Login scene, 294

P pages Active Server (ASP), 319 home Home Page Movie, 23, 41-45, 47-52, 54, 56-57, 59-61, 63-67 Navigation Bar Movie, 22, 25-29, 31-33, 35-36, 38-40 purpose of, 21 role of Flash in providing usability and consistency, 21-22

publishing

redirecting, 15, 17 sniffer, titles and colors, 14-15 palettes, Effect, 300 Pan-Object Movie Clip, 107, 109 Panorama buttons, launching in Container movies, 109-110 panorama photos, replacing, 109 parameters, customizing in Login scene, 291 paths QuickTime videos, 114 servers, 233 Pause button, 97, 113 Percent Loader text field, Preloader element, 45 Permission Denied error message, 322 Personal Web Server (PWS), 320 photographs bitmap, importing and tweening, 63 panorama, replacing, 109 Phresh Web site, 335 pictures bitmap, importing and tweening, 63 Box, Close-Up scene, 153-154 Cart, 155 deleting, Master Button symbols, 77 panorama, replacing, 109 Text Box Slider, Preview Links Movie, 262-263

text input field, Message scene, 309-310 Place Order button, Intro scene, 128 placing Promo Movie Clips, 64 Plain 3-D button Intro scene, 127 Message scene, 309 Post scene, 315 Subject scene, 301 Play button, 97, 113 playing Flash movies in Web browsers, 319-325 sounds for duration of animations, About the Business movie, 272 Please Complete, 202 plug-ins, video player, 222 Plus button, 154-155 .png format, importing images, 63 pop-up menus, changing to drop-down menus, 34 populateProducts function, 141 populateTopics function, 235 populating MySQL databases with tables, 325 POST action, 201 Post scene, 286, 314-317 PowerPoint, integrating with Flash, 335 Preloader element, Home Page Movie, 23, 41-45, 47

Preview Links Movie customizing, 257-263 described, 253 how it works, 254-256 Print a Brochure button, 151, 157 Print a Brochure text button, Services Catalog movie, 217 Print Movie Clip, 151, 217 Print Price List button, 211, 219 Product bar symbol, 142-144 Product Demo Scroll layer, Container movies, 72 Product List Movie Clip, Inventory scene, 140, 142-144, 146 productsXML object, 134, 166 programs 3-D, 339-341 Flash-related, 337-339 font, 340 Promo Movie Clip, Home Page Movie, 63-64 properties, Effect panel, 309 protocols, Transmission Control Protocol/Internet (TCP/IP), 322 pro_flash mailing list, 337 PS Woods Flash Yin and Yang Web site, 335 publishing Container movies with supplemental Flash movies, 104

369

370

publishing

QuickTime videos with Flash tracks, 115-116 sites, playing Flash movies, 319-325 Pull Down Menu button, 146 pull-down buttons, Services Catalog movie, 217 Push function, 139 PWS. See Personal Web Server

QuickTime button, Services Catalog movie, 222 QuickTime video, 86-87, 112-117 QuickTime Video buttons, launching in Container movies, 116 Quintus Flash Index Web site, 335 quotes, Random Quote Movie Clip, 52-53, 56-57

Q

R

qt.fla, QuickTime videos, 114-116 quantity field, 135 Question 1 Fade-In Movie Clip, 186-187 Question 1 Fade-Out Movie Clip, 187 Question 1 Static Movie Clip, 187 Question 2 Fade-In Movie Clip, 188 Question 2 Fade-Out Movie Clip, 189 Question 2 Static Movie Clip, 188 Question 3 Fade-In Movie Clip, 196 Question 3 Fade-Out Movie Clip, 196 Question 4 Fade-In Movie Clip, 197 Question 4 Fade-Out Movie Clip, 198 Question variable, 190 quick info caption, About the Business movie, 280

Radio Button movie clip, Services Catalog movie, 225 radio buttons, viewer surveys, 189-191, 195, 198 Radio-fade 1 graphic symbol, 189-190 Radio-fade 2 graphic symbol, 191 Random Quote Movie Clip, 52, 54, 56-57 Random Quotes layer, Introduction element, 49 Ready text symbol, viewer surveys, 176-177 Real Player button, 212, 222 Recessed Box symbol Login scene, 294 Message scene, 310 News and Reviews movie, 232, 240 Preview Links Movie, 259

viewer surveys, 179-180 Recessed Boxes Movie Clip, 185-186 redirecting pages, 15, 17 refresh tag, timing, 16 removing button instances Company Name, 76 Scroll Up and Scroll Down, 80 Go to New Scene buttons, 79 graphics, Master Button symbols, 77 Launch Window buttons, 80 main menu items, Navigation Bar Movie, 35 Movie Control buttons, 79 sub-menu items, Navigation Bar Movie, 38 replacing graphics, Master Button symbols, 77 panorama photos, 109 quotes, Random Quote Movie Clip, 52-53 sound instances, 77 replies to messages, displaying, 308-309 required fields messages, Alert Box, 293 Reset button, viewer surveys, 192-193 Resource buttons, Preview Links Movie, 258-259

Scrollable Panorama Movie

Resources box outline, Preview Links Movie, 259 Resources text symbol, Preview Links Movie, 260 responseXML object, 314 Reverse button, Navigation Bar Movie, 30 Review.asp, 237 reviewSearchCriteria.asp, 237 reviewSearchResults.asp, 237 Rewind button, 96-97 Rewind Engine layer, Container movies, 72 Rhino3D, 339 Right Animation layer, Introduction element, 49 rightImage field, 136 rolloffTarget layer, Navigation Bar Movie, 27 Rotate button, 152, 155 Rotate symbol, Close-Up scene, 154-155 Row layer Subject Movie Clip, 302 Thumbnails scene, 167 running MySQL on Windows 2000/NT, 322-323

S Satisfaction Text Copy 1 graphic symbol, 197-198

scene 1 customizing, 175, 177-181 described, 171 how it works, 174-175 scene 2 customizing, 184-187, 189-193 described, 172 how it works, 183-184 scene 3 customizing, 196-201, 203 described, 172 how it works, 195 scene 4 customizing, 205-206 described, 172 how it works, 205 screen instance, 152 screens Login scene customizing, 289, 291-296 described, 285 how it works, 288-289 Message scene customizing, 307-309, 311 described, 286 how it works, 307 Post scene customizing, 314-317 described, 286 how it works, 313-314 Subject scene customizing, 300-305

described, 285 how it works, 298, 300 script environments, Middleware, 319 scripts ActionScripts About the Business movie, 268 List By Category option, 134 subcolor Movie Clip, 145-146 Submit button, Login scene, 288 supplemental Flash movies, 90-91 Bar, Preloader element, 44 Scroll Box Arrow Button, 80, 263 Scroll Box Arrow symbol, Message Movie Clip, 248-249 Scroll button Message scene, 309 Navigation Bar Movie, 26 Subject scene, 301-302 Scroll Down button, 80-81 Scroll Engine movie clip, 216 Scroll Up button, 80-81 Scrollable Panorama Movie customizing, 107, 109-110 described, 85-86 how it works, 107

371

372

Scrollable Text field, Container movies

Scrollable Text field, Container movies, 98-100 ScrollDown Movie Clip, 99-100, 200 Scroller Box Smart Clip, 254-256, 260-263 Scrolling Engines layer, 248-249 ScrollUp Movie Clip, 99-100, 200 Search Box, Inventory scene, 147-148 search options News and Reviews movie, 232-233 text based, 135 search our resources text symbol, Preview Links Movie, 260 Search Results Elements, News and Reviews movie, 246-249 Search Results Outline layer, News and Reviews movie, 247 second scene customizing, 184-187, 189-193 described, 172 how it works, 183-184 section header titles, Preview Links Movie, 260 section outlines, Services Catalog movie, 214-215, 219-220 selectors, service, 215-216 semicolon (;), MySQL commands, 324

Send Newsletter text, Services Catalog movie, 225 servers Internet Information (IIS), 320 MySQL, starting, 323 Personal Web (PWS), 320 setting paths to, 233 service request form, 212 Service Request Form input fields, Services Catalog movie, 222-223 service selectors, Services Catalog movie, 215-216 Service Text Pulldown movie clip, 210, 215-216 servicelist array, 221, 228 Services Body Copy movie clip, Services Catalog movie, 219 Services Catalog movie customizing, 212, 214-217, 219, 2 21-223, 225-228 described, 209 how it works, 209-210, 212 Services Request Form Title symbol, Services Catalog movie, 222 Services Text graphic symbol, Services Catalog movie, 227 Service_1.swf, Services Catalog movie, 218 setting location of Flash movies, 17-18 paths to servers, 233

settings, Stop Sync, 272 shapes, navigation bars, 29 Shared Libraries, About the Business movie, 270 ShockFusion Web site, 335 show databases command, 324 show tables command, 325 Side Line Animation layer, Home Page Movie, 59 Side Line Animation Movie Clip, Home Page Movie, 66-67 side line animations, About the Business movie, 281 site identity Home Page Movie, 23, 41-45, 47-52, 54, 56-57, 59-61, 63-67 Navigation Bar Movie, 22, 25-29, 31-33, 35-36, 38-40 purpose of, 21 role of Flash in providing usability and consistency, 21-22 sites Flash resources on, 329-337 publishing, playing Flash movies, 319-325 Size drop-down menu, text labels, 158 size field, 144 Size Movie Clip, 144

sub-menus, changing number of items in

Size Wide movie clip, 157-158 Skip to End button, 113 Skip to Main Movie button, Introduction element, 51 slashes (/), 33, 233 Slide-Object Movie Clip, 107 Smart Clips described, 253 Scroller Box, 254-256, 260-263 Smartsound, 282 sniffer pages, titles and colors, 14-15 sniffers Flash-based customizing, 16-18 how it works, 16 JavaScript customizing, 14-15 how it works, 13-14 Software folder, 11 software 3-D, 339-341 Flash-related, 337-339 font, 340 sortlist array, 225 Sound Control button, Introduction element, 50 sound instances, swapping, 77 Sound On/Off button, 77-78 Sound On/Off layer, Introduction element, 49 Sound panel, About the Business movie, 271 sound track resources, About the Business movie, 282

sounds playing for duration of animations, About the Business movie, 272 resources on the Web, 341 Sounds layer, Sound On/Off button, 77 Source folder, 11 Special Image Movie Clips, Inventory scene, 139 Specials Box, Inventory scene, 139-140 Specials Movie Clip, Inventory scene, 137-140 specialsXML object, 135 speed, banner displays, 258 Start a New Topic button, Subject scene, 301 starting MySQL servers, 323 State Pulldown movie clip, Services Catalog movie, 224 statements else if, 211 encourage, 175 if, 142, 152 if-then, Preloader element, 44 Static Graphics layer Container movies, 72 Thumbnails scene, 166 Step Back button, 112 Step Backward button, 97 Step Forward button, 97-98, 113

Stop Sync setting, 272 stop() action, 27-28 Question 3 Fade-In Movie Clip, 196 scene 1, viewer survey, 174 scene 2, viewer survey, 184 Subject Movie Clip, 302 stop() action, Are You Sure? Movie Clip, 180 stopAllSounds() command, 50 stores creating Carousel scene, 121, 160-163 Close-Up scene, 121, 149-159 Intro scene, 120, 123, 125-129 Inventory scene, 120-121, 130-140, 142-144, 146-148 Thumbnails scene, 121-122, 164-168 strBody variable, 201 Streamline, 340 Sub-Menu button, Navigation Bar Movie, 32-33 Sub-Menu layer, Navigation Bar Movie, 27 Sub-Menu Movie Clip, 28 sub-menus, changing number of items in, 38, 40

373

374

Subcolor button

Subcolor button, 146 subcolor Movie Clip, 145-146 Subject Button Movie Clip, 299-300 subject lists, Subject scene, 302-303 Subject list button, Subject scene, 303 Subject Movie Clip, 298, 302-303 Subject Row Movie Clip, 308 Subject scene customizing, 300-305 described, 285 how it works, 298, 300 Subject text symbol, Subject scene, 300-301 Submit button Login scene, 288, 294-295 News and Reviews movie, 244, 246 Post scene, 313-314, 316 viewer surveys, 201-202 Submit Button symbol, News and Reviews movie, 243-244 Subsize button, 146 subtracting menu items, Navigation Bar Movie, 35, 38 Summary Elements, News and Reviews movie, 249-250 Summary Movie Clip, News and Reviews movie, 249-250

supplemental Flash movies customizing, 93-94 how they work, 89-92 loading, 85 supplemental movie controls, Container movies, 95-98 support, Web sites providing, 334 Survey text symbol, viewer surveys, 177 surveys described, 171 first scene, 171, 174-175, 177-181 fourth scene, 172, 205-206 second scene, 172, 183-187, 189-193 third scene, 172, 195-201, 203 swapping graphics and sound instances, 77 Swift 3D, 338 Swifty utilities, 339 Swish, 338 symbols Arrow Button, Services Catalog movie, 226-227 Bar Button, Services Catalog movie, 217 Blue Background, 74-75 Intro scene, 126 Login scene, 290-291 News and Reviews movie, 238-239

Services Catalog movie, 213 Blue Empty Box, 199, 219-220 Box 1, customizing, 186 Buy Text button, 143 Catalog Glance, Intro scene, 126-127 Clear button, News and Reviews movie, 246 Company Name, 239-240, 290 customizing, About the Business movie, 269-271 Drop-Down Button, News and Reviews movie, 242 editing, About the Business movie, 282 Ever Shopped Company Name, 186 Gradient, 158 Gradient Button, 158 Green Background, 74-75 Intro scene, 126 Login scene, 290-291 Services Catalog movie, 213 Have You Ever Shopped, 196 How Satisfied, 197 Introduction text, viewer surveys, 177 Loaded Text graphic, Preloader element, 51 Log in Welcome, Login scene, 291

temporary backgrounds

Mask, 140 Master Button, deleting graphics, 77 Menu, News and Reviews movie, 242 Message Outline, Subject scene, 304-305 moviescreen, Message scene, 310 Music Loop, 50 news_reviews, News and Reviews movie, 239 No, 187 Plain 3-D Button, Intro scene, 127 Product bar, 142-144 Radio-fade, 189-191 Ready text, viewer surveys, 176-177 Recessed Box Login scene, 294 News and Reviews movie, 232, 240 Preview Links Movie, 259 viewer surveys, 179-180 Resources text, Preview Links Movie, 260 Rotate, Close-Up scene, 154-155 Satisfaction Text Copy 1, 197-198 Scroll Box Arrow, Message Movie Clip, 248-249 search our resources text, Preview Links Movie, 260

Services Request Form Title, Services Catalog movie, 222 Services Text, Services Catalog movie, 227 Subject text, Subject scene, 300-301 Submit Button, News and Reviews movie, 243-244 Survey text, viewer surveys, 177 Temporary Background, 73 Intro scene, 125-126 Login scene, 289-290 News and Reviews movie, 238 Preloader element, 45 Text Input_med, 223 textcapturefield, Message scene, 309-310 Thank You Text, 205 threaded pitch text, Login scene, 294 video player plug-ins, Services Catalog movie, 222 Why Satisfied, 199 Yes, 187 Zoom, Close-Up scene, 154-155 system requirements, playing Flash movies, 319-320

T tables catalogcolor, 133, 144 catalogitem, 133, 135 catalogsize, 133, 144 catalogspecial, 135 NewsAuthor, 236 NewsReview, 236 Newstopic, 236 populating MySQL databases with, 325 tags, refresh, 16 TCP/IP. See Transmission Control Protocol/Internet Protocol technical support, Web sites offering, 334 Temp Background layer, Home Page Movie, 60 tempo, banner displays, 258 Temporary Background graphic symbol, Preloader element, 45 Temporary Background layer, Container movies, 72 Temporary Background symbol, 73 Intro scene, 125-126 Login scene, 289-290 News and Reviews movie, 238 Preloader element, 45 temporary backgrounds Login scene, 289-290 Services Catalog movie, 213

375

376

testing

testing Container movie files, 71-72 MySQL, 323-325 News and Reviews movie, 232 text bottom header, About the Business movie, 276 header, About the Business movie, 275 label, Zoom and Rotate symbols, 154 List Options buttons, Intro scene, 127-128 Preloader element, customizing, 51 Send Newsletter, Services Catalog movie, 225 Services Request Form Title, Services Catalog movie, 222 subject instructions, Subject scene, 300-301 threaded message, Login scene, 296 threaded pitch, Login scene, 294 welcome, Login scene, 294 text based search option, 135 Text Box Slider graphic, Preview Links Movie, 262-263 text boxes Carousel scene, 162-163

dynamic, Close-Up scene, 153 Thumbnails scene, 167 text buttons, Print a Brochure, 217 text elements, Container movies, 81 text fields Inventory scene, 136-137 Preloader element, 45-46 Thumbnails scene, 167 viewer surveys, 176-177 Text Fields layer, Login scene, 288 text input fields Message scene, 309-310 Post scene, 314-315 Text Input_med graphic symbol, 223 text labels, Size and Color drop-down menus, 158 Text layer Container movies, 72 Home Page Movie, 59 News and Reviews movie, 241 Promo Movie Clip, 63 Thumbnails scene, 166 Text Scroll Movie Clip, 98-100 customizing, 199-200 layers, 80 text symbols Catalog Glance, Intro scene, 126-127 Ever Shopped Company Name, 186

news_reviews, News and Reviews movie, 239 No, 187 Thank You Text, 205 Yes, 187 textcapturefield symbol, Message scene, 309-310 Thank You Text symbol, 205 third scene customizing, 196-201, 203 described, 172 how it works, 195 threaded message boards building Login scene, 285, 288-289, 291-296 Message scene, 286, 307-309, 311 Post scene, 286, 313-317 Subject scene, 285, 298, 300-305 threaded message text, Login scene, 296 threaded pitch text symbol, Login scene, 294 Thumbnails button, Intro scene, 128 Thumbnails scene, online store and cart, 121-122, 164-168 .tiff format, 64

video clips

Timeline Carousel scene, 161-162 Intro scene, 124-125 Login scene, 288 scene 1, viewer survey, 174-175 scene 2, viewer survey, 183-184 timing, refresh tag and Flash movies, 16 Tint property, Effect panel, 309 title variable, 249 titles section header, Preview Links Movie, 260 Services Request Form, Services Catalog movie, 222 sniffer pages, 14-15 Top layer, Navigation Bar Movie, 26 Topic Drop-Down menu, News and Reviews movie, 241-243 tracks, publishing QuickTime videos with, 115-116 Trainingtools.com, 336 Transmission Control Protocol/Internet Protocol (TCP/IP), running MySQL, 322 Tree Grid Movie Clip, 308 Tree Movie Clip, displaying message replies, 308-309 treeDown clip, 308 treeUp clip, 308 treeXML object, 307-308

triggering Are You Sure? Movie Clip, No button, 179 TTConverter, 340 Turoczy, Rick, 335 tweening bitmap images, 63 Type of Business Pulldown Movie Clip, Services Catalog movie, 223-224

U Up label, 27 uploading bitmap images, 63 use flashDB command, 325

V variables alertMsg, 293 article, 249 color, 142 colorlist, 142 company, 222 email, 222 imageList, 139 main, 144 movie, 91 name, 222 Question, 190 strBody, 201 title, 249 verifying login, 295 Vectra 3-D, 338 verifying logins, variables for, 295

Vertical Bars Animation layer, Home Page Movie, 59 Vertical Bars Animation Movie Clip, Home Page Movie, 65-66 video clips 3-D_Animation, 49, 52 Alert Box, Login scene, 291-293 Are You Sure?, 175, 179, 180 Arrow Down, Inventory scene, 146-147 Arrow Up, Inventory scene, 146-147 Banner Animation, Preview Links Movie, 254, 257-258 Boxes-Grouped, Services Catalog movie, 214-215 Category, Carousel scene, 162 Color Bar, Home Page Movie, 62 Color Drop, 144, 146 Color Wide, 157-158 Column, 141-142 Container movie, Service Text Pulldown movie clip, 210 Country Pulldown, Services Catalog movie, 225 Dashes Anim, 184 Drag Engine, 107, 109 Generic Button, Preview Links Movie, 262

377

378

video clips

Home Page Movie described, 23 how it works, 59-61, 63-67 Introduction element, 23, 48-52, 54, 56-57 Preloader element, 23, 41-45, 47 Horizontal Bar Animation, Services Catalog movie, 213 Loader Main, text fields, 45-46 Main Screen, Close-Up scene, 155-157 Mascot, 156-157 Message, 298 News and Reviews movie, 247-248 Subject scene, 304 Navigation Bar Movie, 22 customizing, 29, 31-33, 35-36, 38-40 how it works, 25-28 Next Question, 191-192, 196 No q2, 189-191 No q3, 198 ObjDown, 147 Object Animation, Home Page Movie, 65 objLeft, 308 objRight, 308 Pan-Object, 107, 109 Please Complete, 202

Preview Links Movie customizing, 257-263 described, 253 how it works, 254-256 Print, 151, 217 Product List, Inventory scene, 140, 142-144, 146 Promo, Home Page Movie, 63-64 Question 1 Fade-In, 186-187 Question 1 Fade-Out, 187 Question 1 Static, 187 Question 2 Fade-In, 188 Question 2 Fade-Out, 189 Question 2 Static, 188 Question 3 Fade-In, 196 Question 4 Fade-In, 197 Question 4 Fade-Out, 198 Radio Button, Services Catalog movie, 225 Random Quote, 52, 54, 56-57 Recessed Boxes, 185-186 Scroll Engine, 216 ScrollDown, 99-100, 200 ScrollUp, 99-100, 200 Service Text Pulldown, 210, 215-216

Services Body Copy, Services Catalog movie, 219 Side Line Animation, Home Page Movie, 66-67 Size, 144 Size Wide, 157-158 Slide-Object, 107 Smart Clips253-256, 260-263 Special Image, Inventory scene, 139 Specials, Inventory scene, 137-140 State Pulldown, Services Catalog movie, 224 Sub-Menu, 28 subcolor, 145-146 Subject, 298-300, 302-303 Subject Row, 308 Summary, News and Reviews movie, 249-250 Text Scroll, 98-100 customizing, 199-200 layers, 80 Tree, displaying message replies, 308-309 Tree Grid, 308 treeDown, 308 treeUp, 308 Type of Business Pulldown, Services Catalog movie, 223-224

Web browsers, playing Flash movies

Vertical Bars Animation, Home Page Movie, 65-66 Yes q2, 189-191 Yes q3, 198 video player plug-ins, Services Catalog movie, 222 Video Presentation button, 212 video section outlines, Services Catalog movie, 219-220 videos About the Business audio track resources, 282 customizing, 268-276, 278-282 described, 267 editing elements, 282 how it works, 267-268 changing, tips for, 9-10 Container building, 69-73 customizing, 73, 76-81, 93-105 QuickTime video, 86-87, 112-117 Scrollable Panorama Movie, 85-86, 107, 109-110 supplemental Flash movies, 85, 89-93 Flash background colors, 18 playing in Web browsers, 319-325

setting location of, 17-18 timing, 16 Movie_1.swf, Services Catalog movie, 227-228 News and Reviews customizing, 237, 239-244, 247-248, 250 how it works, 231-237 Online Store, e-commerce capabilities, 326 QuickTime customizing, 114-117 described, 86-87 how it works, 112-114 Scrollable Panorama customizing, 107, 109-110 described, 85-86 how it works, 107 Services Catalog customizing, 212, 214-217, 219, 221-223, 225-228 described, 209 how it works, 209-210, 212 Service_1.swf, Services Catalog movie, 218 supplemental Flash customizing, 93-94 how it works, 89-92 loading, 85

viewer surveys described, 171 first scene customizing, 175, 177-181 described, 171 how it works, 174-175 fourth scene customizing, 205-206 described, 172 how it works, 205 second scene customizing, 184-187, 189-193 described, 172 how it works, 183-184 third scene customizing, 196-201, 203 described, 172 how it works, 195 viewing banners, changing tempo, 258 message replies, Message scene, 308-309 Virtual F-X Web site, 336 Virtual-FX Web site, 336

W Web browsers, playing Flash movies, 319-325

379

380

Web sites

Web sites Flash resources on, 329-337 publishing, playing Flash movies, 319-325 Webmonkey Web site, 336 welcome messages Home Page Movie, 61 Login scene, 294 Were-Here Web site, 336 Why Satisfied graphic symbol, 199 Windows operating system, calling JavaScript functions, 101 windows, Preview Links Movie, 254, 256-257 Windows 2000, running MySQL, 322-323 Windows 95, playing Flash movies, 320 Windows 98 installing MySQL, 321 playing Flash movies, 320 Windows NT running MySQL, 322-323 system requirements, playing Flash movies, 319-320 Wired magazine, 336 Wolf, Katherine, 8, 10 word search, 148 World Wide Web Flash resources on 3-D software, 339-340

Flash 4 Database, 340 Flash-related software, 337-339 font software, 340 mailing lists, 337 music, 341 Streamline, 340 Web sites, 329-337 publishing sites, playing Flash movies, 319-325

X-Y Xara 3D, 339 Yes button, viewer surveys, 178 Yes q2 Movie Clip, 189-191 Yes q3 Movie Clip, 198 Yes text symbol, 187

Z zinc roe Design Web site, 337 Zoom In button, 151-152 Zoom Out button, 151-152 Zoom symbol, Close-Up scene, 154-155 zoomin instance, 152

Other Related Titles

Sams Teach Yourself Flash 5 in 24 Hours Phillip Kerman ISBN: 0-672-31892-X $24.99 US/$37.95 CAN

Sams Teach Yourself Macromedia Dreamweaver 4 in 24 Hours Betsy Bruce ISBN: 0-672-32042-8 $24.99 US/$37.95 CAN

How to Use Dreamweaver 4 and Fireworks 4 Lon Coley ISBN: 0-672-32041-X $29.99 US/$44.95 CAN

Sams Teach Yourself HTML and XHTML in 24 Hours, Fifth Edition Dick Oliver ISBN: 0-672-32076-2 $24.99 US/$37.95 CAN

Sams Teach Yourself JavaScript in 24 Hours, Second Edition

Sams Teach Yourself Dreamweaver UltraDev 4 in 21 Days John Ray ISBN: 0-672-31901-2 $39.99 US/$59.95 CAN

How to Use Macromedia Flash 5 Denise Tyler and Gary Rebholz ISBN: 0-672-32004-5 $29.99 US/$44.95 CAN

ActionScripting in Flash

Applying Flash Character Animation Studio Techniques

Phillip Kerman ISBN: 0-672-32078-9 $39.99 US/$59.95 CAN

Lee Purcell ISBN: 0-672-32199-8 $54.99 US/$81.95 CAN

Sams Teach Yourself Active Server Pages 3.0 in 21 Days

Michael Moncur

Scott Mitchell and James Atkinson

ISBN: 0-672-32025-8 $24.99 US/$37.95 CAN

ISBN: 0-672-31863-6 $39.99 US/$59.95 CAN

Sams Teach Yourself ColdFusion in 21 Days

Flash for the Real World: E-Commerce Case Studies

Charles Mohnike ISBN: 0-672-31796-6 $39.99 US/$59.95 CAN

Steve Street ISBN: 0-672-32079-7 $49.99 US/$74.95 CAN

www.samspublishing.com All prices are subject to change.

INSTALLATION

What’s on the CD-ROM The companion CD-ROM contains MySQL for Windows NT 4.0 and Windows 2000, and all the examples developed in the book.

Windows NT 4.0 and Windows 2000 Installation Instructions 1. Insert the CD-ROM disc into your CD-ROM drive. 2. From the Windows desktop, double-click the My Computer icon. 3. Double-click the icon representing your CD-ROM drive. 4. Open the readme.txt file for descriptions and installation instruc-

tions for the individual software products.

READ THIS BEFORE OPENING THE SOFTWARE By opening this package, you are agreeing to be bound by the following agreement: You may not copy or redistribute the entire CD-ROM as a whole. Copying and redistribution of individual software programs on the CD-ROM is governed by terms set by individual copyright holders. The installer and code from the author(s) are copyrighted by the publisher and author(s). Individual programs and other items on the CD-ROM are copyrighted by their various authors or other copyright holders. Some of the programs included with this product may be governed by an Open Source license, which allows redistribution; see the license information for each product for more information. Other programs are included on the CD-ROM by special permission from their authors. This software is provided as-is without warranty of any kind, either expressed or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Neither the publisher nor its dealers or distributors assume any liability for any alleged or actual damages arising from the use of this program. (Some states do not allow for the exclusion of implied warranties, so the exclusion may not apply to you.)

Flash Site Workshop

Perl Web Site Workshop

Creating a Web Site with Flash: Visual QuickProject Guide

Flash

Flash

Flash

Flash

Flash

Flash

Science and Technology for DOE Site Cleanup: Workshop Summary

Macromedia FLASH 5. Using Flash

Site Unseen

Site Investigation

Site Unseen

Black Site

Black Site

Site Matters

Hot Flash

Flash Point

Flash Crowd

Flash Crowd

Flash Flood

Hot Flash

Royal Flash

The Levee Site and the Knoll Site

Flash Dance

Hot Flash

Flash Flood

Flash Burnout

Flash Hacks

Flash Site Workshop

Perl Web Site Workshop

Creating a Web Site with Flash: Visual QuickProject Guide

Flash

Flash

Flash

Flash

Flash

Flash

Science and Technology for DOE Site Cleanup: Workshop Summary

Macromedia FLASH 5. Using Flash

Site Unseen

Site Investigation

Site Unseen

Black Site

Black Site

Site Matters

Hot Flash

Flash Point

Flash Crowd

Flash Crowd

Flash Flood

Hot Flash

Royal Flash

The Levee Site and the Knoll Site

Flash Dance

Hot Flash

Flash Flood

Flash Burnout

Flash Hacks

Recommend Documents