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
What to Expect from This Chapter
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
What to Expect from This Chapter
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
The Customized Scene 2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
The Customized Scene 3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
How to Use This Book
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 to Use This Book
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 to Use This Book
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
How to Use This Book
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
Customize Your Sniffer
Chapter 2
Customize Your Sniffer
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
Customize Your Sniffer
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
Customize Your Sniffer
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Design the Home Page and Site Identity
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
Build a Container Movie
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
Build a Container Movie
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
Build a Container Movie
(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
Build a Container Movie
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
Build a Container Movie
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
Build a Container Movie
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
Build a Container Movie
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
Build a Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
<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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Add Content to the Container Movie
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
Create the Online Store and Cart
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
Create the Online Store and Cart
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
Create the Online Store and Cart
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
Create the Online Store and Cart
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
Create the Online Store and Cart
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
Create the Online Store and Cart
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
Create the Online Store and Cart
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
Create the Online Store and Cart
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
Create the Online Store and Cart
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
The actions in frame 3 are repeated exactly in frame 88; this gives the appearance of the display changing constantly.
Chapter 6
Create the Online Store and Cart
139
The code here looks complicated, and thankfully you should not need to edit it. In simple terms, the code declares the variables image and imageList. A new array is then placed into the variable imageList and the relevant images are added to the array using the Push function. The image files are then loaded into two invisible Movie Clip instances called image1 and image2. These are instances of the Specials Image Movie Clip discussed below. The end result as shown below is that a ‘Specials’ image is displayed in each of the Specials boxes. Note that the J and K variables are declared as Actions on the Generic button, which is also part of the Specials Movie Clip. The Generic button appears to be invisible when viewed in Edit mode. This button is used on more than one occasion in the Store movie, and is used twice in the Specials Movie Clip. When clicked, these buttons take the user directly to the Close-Up scene for the selected product. This is achieved by the Actions attached to the Generic buttons that generate all of the information to populate the Close-Up scene for the selected product. Specials Image Movie Clips There are two instances of the invisible Specials Image MC in the Images layer. The two instances in this Clip are named image1 and image2 for scripting purposes, and are referenced in the frame scripts for frames 3 and 88. In the only frame of this Movie Clip is an ActionScript that sizes the .swf files down so that they are the correct size. Specials Box The Specials Box is used to hold the output of the Specials Image Movie Clip. This graphic symbol has the two boxes seen onscreen, as well as the text labels indicating that they are specials. This symbol uses an instance of the Recessed Box symbol, which you have no doubt come across many times before and I am sure will have been customized by now. A black filled rectangle placed inside the Recessed Box acts as a background for the Specials text button. This text button has rectangular outline the same color as the text. I customized my Specials Box by removing the black background behind the Specials text button and the outline rectangle, and by
Figure 6.12 The Specials boxes after they’ve been populated from the database.
140
Flash Site Workshop
changing the font color to black so that it displays well on my customized background. These changes combined with earlier customization of the Recessed Box mean that my specials appear to display in an embossed box with the specials text just there as a label.
Product List Movie Clip Figure 6.13 The Product List Movie Clip.
At first glance, the Product List layer looks rather boring—but appearances can be deceiving. The layer is only populated by the Product List Movie Clip, which is located in the DYNAMIC ITEMS folder of the Library. Looking at the Movie Clip in action makes it more obvious what is happening here. The Movie Clip populates directly from the database via an XML object. When run from the server, the user sees a list of products within the Movie Clip. This product information is displayed in column format directly below the column headings we customized above. The Product List Movie Clip acts as a container for the product information and contains all of the coding, symbols, and actions required to make the Clip function seamlessly. As soon as this scene is loaded, the Movie Clip populates without any user intervention. Opening the Movie Clip from the DYNAMIC ITEMS folder, you can see that it contains a single frame and four layers. To see how it works, we need to look closely at the code. Frame 1 simply contains a stop() action. There are two instances of the Mask symbol. One is located on the Guide layer with an instance named guide and the other is on the Mask layer with the instance named mask. The code attached to
Chapter 6
Create the Online Store and Cart
guide first sets the visibility of the guide instance to invisible when the Clip loads, and the action attached to mask sets the location, height, and width of the mask Clip to be exactly the same as guide.
The action associated with the invisible Column Movie Clip is by far the most complex and also the most important. There is no need for you to edit this code; however, without looking at and understanding it, you will not be able to follow how the product list is populated and which Movie Clips are nested or attached within it. This code is well commented in the Actions panel, and can be broken down into specific sections. We have reproduced the most important and complex code in this section. The start of the code is shown below: onClipEvent (load) { _root.clip = this; if(typeof (_root.productsXML) eq “undefined”) { _root.productsXML = new XML(); _root.productsXML.onLoad = populateProducts; _root.productsXML.load(_root.yourServer add ➥“catalog.asp”); } else { populateProducts(); } function populateProducts () { var productsXML; var productsList; var i; var j; var k; var l; var name;
This code first checks to see if the productsXML object exists and if not, creates it. If the object already exists, it is populated immediately. The populateProducts function uses the variables declared above. Following this, the code removes any previous buttons. Once this is done, the XML object is parsed and stored in the name productlist. If there are no results to display, the Feedback message is displayed to the user suggesting they broaden their search criteria. The final
141
142
Flash Site Workshop
part of the code, which is too long to reproduce here in full, actually builds the display that the user sees. This is achieved by attaching an instance of the Product Bar Movie Clip (by using it’s linkage name productBar) for each record returned, as shown in the snippet below. (We will look at this Movie Clip in a moment.) _root.clip.attachMovie(“productBar”, “row” add Number(i+1), ➥Number(i+1)); name = “row” add Number(i+1);
As well as the general information, products can have different sizes and colors. These are identified in the code. Here you can see how that works: var color; var colorlist; colorList = new Array(); color = productsList[i].childNodes[j]; if (color.hasChildNodes() == true && ➥color.firstChild.nodeName.toLowerCase() == “subcolor”)
The The
and colorlist variables are declared and an array is built. if statement in the code checks if the color variable has ChildNodes. If this statement is true, the subcolors are added in rows to the output. The code for the size information is identical other than color is changed for size, and subcolor is changed for subsize. Subsize and Subcolor are also Movie Clips located in the DYNAMIC items folder. Their linkage names are subsize and subcolor, respectively. color
The Product Bar Figure 6.14 The Product bar.
The Product bar, seen here, is a dynamically generated element located in the DYNAMIC ITEMS folder of the Library. Although not immediately visible on the Stage, the Product bar opens inside the Product List Movie Clip above and displays the rows of results from a search, or when a user selects a list by option. You can see from the code snippets above that this happens via an attachMovie action.
Chapter 6
Create the Online Store and Cart
The following is found in the first frame of this Movie Clip: stop(); var id; var name; var sku; var model; var price; var quantity; var color; var colors; var sizes; var size; var description;
This script declares the variables that will be used to populate the dynamic text boxes in the bar. The variables are all self-explanatory so I won’t dwell on them here. Refer back to earlier in the chapter when the database table and fields were outlined, and you will see immediately which variable is populated from which table/field. The Product Bar is a combination of buttons and dynamic text fields on a background layer the same color as the green background. Note that although it is the same color, it is not an instance of the Green Background symbol. You can edit this background to reflect the other changes you have made in your site by changing the fill color and so on. When you look at this symbol in Edit mode, you will notice a blue line drawn on top of the Green Background. This line is placed to correspond to the placement of Product Names in the dynamically generated Product Bar. The blue line appears to underline each product name. You can change this line color to match your site. The outside of the Product bar is an instance of the Blue Empty Box symbol. As the name suggests, it’s simply a blue outline with no fill. You can edit the line color to suit your site. As other elements are placed inside the outline, there is no point in adding a fill color to the symbol. The Buy button contains two instances of the Plain 3-D button that has already been customized—one in the Up state and a tinted instance in the Over state. Any changes you made to the Plain 3-D button will already be reflected, but the button still needs updating. For my movie, I changed the font color and again changed the text
143
144
Flash Site Workshop
to sentence case to try and maintain the friendly feel I am building for my site. You might want to add Down and Hit states as well. There are four single line dynamic text fields in layer 1. Each is associated with the sku, model, name, and price variables seen above. You can change the font color and size for these dynamic elements, but must not change the type of text field or you will lose the variables. Also, if you want to change the fonts, you should stick to one of the device fonts. If you choose a font that isn’t available on a visitor’s computer, the text will not render properly. You can change the order the items display on the bar by moving the text boxes around, but again, make sure that you don’t lose any of the associations or the bar will not populate properly. I changed the font and color to better match my site. The color and size dynamic text fields, both associated with the variable main, are placed in the Color Drop and Size Movie Clips. Inside these Movie Clips are drop-down buttons that will allow the user to select the size and color of the product they want to order. The color and size information is stored in the database in the catalogsize and catalogcolor tables. The relationship is set in each case between the itemID field of the database and the appropriate size and color. Each itemID can have multiple sizes and colors while the itemID must be unique. Earlier in the chapter, you can see where these fields appear in the database. The Color Drop and Size Movie Clips are both constructed in the same way and can therefore be customized the same way. Let’s look at the Timeline for one of them before we start, and then see the Clip in action on a site. You can see the five layers immediately, and it is important to note the Actions layer at the top. This Actions layer specifies the appropriate variable to populate the drop-down menu. There is no need to edit the code here because it refers back directly to the code for the Product List Movie Clip outlined above. stop(); var main; var colors;
You can customize the look of the dynamic text field in this Movie Clip the same way you customized the dynamic text fields earlier.
Chapter 6
Create the Online Store and Cart
145
Figure 6.15 The Color Drop Movie Clip in Edit mode.
Figure 6.16 The Color Drop Movie Clip in action.
When looking at this Clip, notice the presence of the Column Movie Clip on frame 3 of the Build layer. The ActionScript attached to this Clip first declares the variables to be used in the drop-down menu, and then loops through adding an instance of the subcolor Movie Clip for each color that will appear in the drop-down menu. Again the attachMovie function is used to achieve this. The script is below. The Actions associated with the Column Movie Clip identify the elements to populate the drop-down. onClipEvent (load) { _root.clipColor = this; var productsXML; var colorsXML; var productsList; var i; var j; var name; // ****** Build the Window *********// for (i=0; i<_parent._parent.colors.length; i++) { _root.clipColor.attachMovie(“subcolor”, “row” add ➥Number(i+1), Number(i+1)); name = “row” add Number(i+1); if (name ne “row1”) {
146
Flash Site Workshop
setProperty (_root.clipColor add “/row” add ➥Number(i+1), _y, ➥ (getProperty(_root.clipColor add “/row” add i, _y)+ ➥getProperty(_root.clipColor add “/row” add i, _height))); } set (_root.clipColor add “/row” add Number(i+1) add ➥“/:text”, _ ➥parent._parent.colors[i]); } }
NOTE: The script for the Size drop-down menu works the same way, but adds the Subsize Movie Clip in place of the Subcolor Movie Clip. For customizing purposes, the steps required are the same.
Figure 6.17 The Pull Down Menu button.
For my site I edited the outline colors in the Movie Clip, but retained the shadow effect created using the line colors. You could change the fill color of the Color Drop Movie Clip, but this will not affect the color in the drop-down menu. For that you must edit the Subcolor Movie Clip directly, which we will do in a few moments. The Pull Down Menu button, included in the Color Drop Movie Clip, is located in the BUTTONS folder of the Library. This button contains a down arrow so users know they can drop down a menu. You should change the outline color of this symbol to reflect the changes you made in the previous section. This ensures that the down arrow matches the new look of your Color Drop Movie Clip. You might also want to change the shape or color of the arrow symbol. The Subcolor and Subsize Buttons
Figure 6.18 The Subcolor Movie Clip.
These Movie Clips contain a standard button that can be edited to match your site. As already covered, it is dynamically populated via the database and XML object, so there is no text associated with the button. Changing the outline colors of the button alone can give a different effect. Using the same color on all four sides will lose the 3-D effect. Remember when you edit the Over state of the button, the text color is already set in the dynamic text field and should be edited there directly. As always, when changing dynamic text fields, stick to system fonts to avoid problems or complications when visitors see the file. You need to make sure that the Over state will not make the text invisible.)
Arrow Up and Arrow Down Movie Clips The Arrow Up and Arrow Down Movie Clips that appear in the Inventory scene enable the user to scroll through the inventory items.
Chapter 6
147
Create the Online Store and Cart
In our sample database, they are not required because the total inventory does not fill the screen; however, once your inventory grows, the capability to scroll through items will be a great asset to you and your visitors. If for any reason you have no products in your inventory, then these arrows will not appear at all. The code attached to the Movie Clip checks that the productlist has a value greater than 0. If this statement is untrue, the Movie Clip is not visible. The ActionScript attached to these buttons should be left alone, so changing the look to match your site is probably the only customization needed. If you’d like to use a custom graphic for the arrow symbol in both Movie Clips, the best way to do that is to go into Edit mode for the Blue Arrow button, which is located in the BUTTONS folder, and add a layer. You can then import your new graphic into the new layer, position it appropriately, and either delete the old layer or change it to a Guide layer so it won’t export. It’s important that you don’t delete any instances of the button or the Movie Clip because you’ll lose all the scripting that makes it work. The scrolling action is achieved through Actions on the instances of the Blue Arrow button. Here we can see the code for the down arrow. on (press, dragOver) { _root.productList.objDown.gotoAndPlay(2); } on (release, releaseOutside) { _root.productList.objDown.gotoAndStop(1); }
This script is triggered while the mouse is pressed and held on the button. The script calls in and plays frame 2 of objDown Movie Clip. Once the mouse is released, the ObjDown Movie Clip is sent to frame 1 and stopped. The objDown Movie Clip is another invisible Movie Clip that should not be changed. Along with the objUp Movie Clip, it contains the code required to make the scroll function correctly. I simply changed the colors, as the simple and clear style works well with my customized site.
Search Box The Search Box shown in Figure 6.20 allows the user to search the inventory for specific products. We looked at the code for this earlier and again there is no reason for this to be changed, so let’s simply look at how it is constructed and how, if at all, it can be customized.
Figure 6.19 The Arrow Up and Arrow Down Movie Clips.
148
Flash Site Workshop
The Search Box is made up of four elements, all located on the Animations layer of the Timeline. The word search is simply a static text field on the Stage, and can be edited accordingly. The user types their search terms into a single-line input text box, which is placed on top of a simple white filled rectangle. You can edit each of these items to match the color scheme and layout of your site. You could also move the Search Box to a different area of the Stage if that would suit your site better than the current location.
Figure 6.20 The Search Box.
The search is actually performed when the user presses Enter or clicks the Go button. The Go button is located in the BUTTONS folder of the Library. You can edit this button to match your site, or to be more obvious than it is currently. If you want to use a custom Go button, it would be best to add a layer in the master Go Button symbol, place your custom graphic in the new layer, and then delete the old layer or make it a Guide layer. That way, you won’t lose the Actions attached to the button instance.
The Customized Inventory Scene Here’s my customized Inventory scene. Figure 6.21
The Close-Up Scene
1 Dynamic Text
6 Add to Cart Button
2 Box Graphic
7 Print Brochure Button
3 Zoom and Rotate Symbols
8 Size Drop-Down Menu
4 Add to Cart Icon
9 Color Drop-Down Menu
5 Main Screen Movie Clip
10 Size and Color Labels
150
Flash Site Workshop
How the Close-Up Scene Works Let’s start again by looking at the Timeline, and seeing what we have on the Stage. The Close-Up scene cannot be accessed as a stand-alone scene by the user; it must be accessed from another scene. By the time this scene loads, the user has already picked the product in which they are interested.
Figure 6.22 The Timeline for the Close-Up scene.
The Close-Up scene offers the user a close up view of any selected product that they choose. The main purpose of the scene is to allow the user the chance to gain a more detailed look at the product image to help them to decide on a purchase. Using the variable declared earlier in the coding when the user requested the Close-Up scene, the dynamic text boxes populate based on the selected product, pulling all product information from the back end. As the image displays on the right of the screen, the product name and description are shown on the left. The image of the product can be rotated and zoomed to give close up and distance views at the click of a button. In this scene we introduce the Add to Cart icon and button in this scene as well as the facility to print a brochure. The users can make color, size, and quantity selections based on the current product and then add the item to their cart. Links to each of the other main scenes are visible and active at all times. Until there is a functioning back end in place to process sales, the Add to Cart button will not perform correctly; however, the script to add the item to the user’s shopping cart is already in place: on(release){ var i; var insert = true; for(i=0; i<=_root.cartList.length; i++){ if(_root.cartList[i] == _root.closeId){ insert = false; break; } } if(insert == true){ _root.cartList.push(_root.closeId); } }
Chapter 6
Create the Online Store and Cart
This script activates when the user releases the Add to Cart button. This adds the item to the users shopping cart. Obviously this script will come into it’s own once you have a fully configured back end with which it can interact. The Close-Up scene gives the user the opportunity to print an image of the product in which they are interested. Look in the folder for this chapter and you will see a few different images. These are all of the images referenced by the database. Within the folder is a movie called print.fla. The Print a Brochure text button is already fully functioning and performs the following actions: on (press) { _root.print.gotoAndStop(2); } on (release) { printAsBitmap (“_root.print”, “bframe”); }
As you can see, this sends the play head to frame 2 of the Print Movie Clip and tells the movie to print the displayed bitmap image. Frame 2 of the Print Movie Clip is designated as a printable by the presence of the #P label in the Frame panel. This #P is required because by default, Flash will attempt to print all frames within the Movie Clip. For those of you not familiar with printing from within Flash, the frame commands specifies that the bounding box for the frame be the printable area. In real terms, this means that when printed, the image will scale to fill the printed page. The main functionality of the Close-Up scene is in the ActionScript that enables the Zoom and Rotate functions to work. This is script for the Zoom In button: on (press) { _root.screen.zoomin.gotoAndPlay(2); } on (release, releaseOutside) { _root.screen.zoomin.gotoAndPlay(1); }
And here is the script for the Zoom Out button:
151
152
Flash Site Workshop
on (press) { _root.screen.zoomout.gotoAndPlay(2); } on (release, releaseOutside) { _root.screen.zoomout.gotoAndPlay(1); }
Although you shouldn’t modify this script, let’s take a look at it so you can see what’s going on. The script for the Zoom In button tells Flash to access an empty Movie Clip called Zoom In (with the instance name of zoomin) located in the Main Screen Movie Clip (with the instance name of screen). It jumps to frame 2 of this Clip, which contains a variety of actions that scale the content of the Parent Clip (screen) to 1.05 times its previous size: _parent.content._xscale = _parent.content._xscale * 1.05; _parent.content._yscale = _parent.content._yscale * 1.05; _parent.content._x = 0 - (_parent.content._width / 2); _parent.content._y = 0 - (_parent.content._height / 2);
The dynamic content of the Screen Clip is loaded into a layer below a mask, which means that if it scales larger than the box, the content outside of the box won’t be visible. The Zoom Out Button script is almost identical, except it scales the content to .95 times its current size. Both the Zoom In and Zoom Out Movie Clips are located in the ACTIONS folder of the Library. The Rotate Button symbol located in the BUTTONS folder controls the rotation of the displayed image. The database holds the path information for three images per product. Each image is a different view of the product. The images are declared as 0, 1, and 2. The script attached to the Rotate button shown below loads each image in turn. The if statement in the script declares that if the next movie to be displayed is greater than 2, the next image must be 0. In simple terms this means that the images will change with each click of the Rotate button, and will go 0,1,2 and then back to 0. This is the script attached to the Rotate button: on(release){ nextImage++; if (nextImage > 2){ nextImage = 0;
Chapter 6
Create the Online Store and Cart
153
} screen.content.loadMovie(_root.closeImage[nextImage]); }
Customize the Close-Up Scene Because the majority of the information displayed in the Close-Up scene is dynamically generated, all you can customize is the overall look of the site and the colors used in that display. Many areas have already been affected by the previous customizing that you performed.
Dynamic Text Boxes There are a number of dynamic text boxes in the Close-Up scene. The Product Name, Description, and Sku are dynamic text fields located directly on the Stage. The Size and Color dynamic text fields are embedded within Movie Clips. The Quantity field is actually an input text field that will be filled in by the user. Each dynamic text element is generated from the variable declared in the Text Options panel. Figure 6.23 The Product Name dynamic text box.
As with the dynamic text elements in the previous scenes, the main customizing that can be done is to change the font and colors in which the text displays. Changing the font settings within the dynamic areas will update the scene when the boxes are populated. Again, be careful to only use device fonts.
The Box Graphic The Box graphic gives a 3-D effect to the image display area. The image appears to be displayed inside the box when viewed by the user. If you have already modified the Container Movie Clip, you’ll recognize the shape.
154
Flash Site Workshop
The box is created using parallel lines all of the same color. To customize the box, you can change the line color, add a new fill color, or add an effect to the box. By default, the box has no fill so the underlying backgrounds show through. I added a fill to my box and changed the line color to that of my customized blue background. Figure 6.24 The Box graphic.
The Zoom and Rotate Symbols Figure 6.25 The Zoom and Rotate symbols.
The Zoom and Rotate symbols are all contained within the Blue Empty Box symbol. We have already looked at the actions performed by these buttons; since you won’t have to customize the scripts, let’s look at the actual symbols. Label Text Zoom Text and Rotate Text are both located in the STATIC GRAPHICS folder of the Library. They are both plain text symbols and used as labels on the appropriate buttons next to them. I modified the font, size, and color of these symbols to match my site, and again changed the font to sentence case to maintain the friendly feel of the site I am building. The Plus and Minus Buttons
Figure 6.26 The Plus button.
Let’s examine the appearance of the Plus and Minus buttons. You could change the color of these buttons to match your site, but personally I used the Instance panel to swap the symbol for a custom made graphic. Swapping symbols this way will retain all of the actions associated with the symbol. I chose to use a custom graphic
Chapter 6
155
Create the Online Store and Cart
because I felt that the circles surrounding the originals were breaking up too much for my liking. Instead I simply created a Plus symbol without the circle outline. I repeated the same process to customize the Minus symbol. You might also want to add Over or Down state graphics for the user. The Rotate Button The Rotate Symbol Button is located in the BUTTONS folder of the Library. It is styled to match the Plus and Minus symbols with an arrow inside a circle. For customizing this, I decided that the arrow worked perfectly as a symbol identifier for rotation, but I was still not happy at the breakup of the line. To customize this symbol, I first removed the outline circle, then selected the arrow and choose the smooth option, which helped improve the breaking up of the line of the arrow. I then expanded the line size of the arrow to match the color and font width I used in the Plus and Minus symbols. Again, you might want to add Over or Down states to your Rotate button. Perhaps you could change the rotation for the Over state, making it look as if the button itself is rotating.
Figure 6.27 The Rotate button.
The Cart Icon The symbol used for the Cart icon is universally recognized on the Internet as an Add to Cart symbol. Because of this, I chose to use the original graphic. I did change the colors to match my site and flipped it so that it appears to be facing away from the buttons rather than towards them. All the script to actually add the products to the cart is attached to the Add to Cart text button next to the Cart icon, so it’s safe to delete and replace this symbol if you like. However, unless you have an equally recognizable graphic, there’s probably no need to change the image.
Main Screen Movie Clip The Main Screen Movie Clip shown in Figure 6.29 is in action with one of the dummy images is the area of the Stage that actually displays the images. The Screen is white by default, which allows images with any background color to be clearly visible as in the screenshot. The Main Screen Movie Clip symbol is located in the DYNAMIC ITEMS folder of the Library, and has the numerous nested symbols below.
Figure 6.28 The Cart icon.
156
Flash Site Workshop
Figure 6.29 The Main Screen.
The Movie Screen Nested inside the Main Screen MC, the Movie Screen provides the white background to act as a backdrop for the images on display. You can edit the fill color directly if you choose to. As none of the products I will be displaying have colored backgrounds, I have chosen to fill the screen in a color just a couple of shades deeper than I used for the box graphic earlier. I feel that this gives depth to the box effect, while retaining the 3-D effect. The Mascot Movie Clip The Mascot Movie Clip is an invisible Movie Clip, which is present for the actions it contains. The Movie Clip contains three frames with the following actions: Frame 1 stop(); this.loadMovie( _root.closeImage[0]);
Frame 2 stop(); this.loadMovie(_root.closeImage[1]);
Frame 3 stop(); this.loadMovie( _root.closeImage[2]);
As you can see, all three frames contain a similar script. Each of the three frames calls in one of the appropriate images for the currently displayed item. The database contains three images for each product, and this Movie Clip loads the appropriate one based on which frame
Chapter 6
157
Create the Online Store and Cart
the Clip is in. Frame 1 loads the default image, which is the central view with frames 2 and 3 loading the left and right images. You will recognize the image numbering from the Actions associated with the Rotate button. When the user clicks the Rotate button, these are the images that cycle through. The database only holds the path to images and their filenames, not the images themselves. For the store to function correctly you must make sure that the path to the images is correct. If there is a mistake in your path, you will get an error message in the output box when testing the movie. Zoom In and Zoom Out The Zoom In and Out Movie Clips are also included within the Main Screen MC; these have already been explained above.
Add to Cart and Print a Brochure Buttons These are both located in the BUTTONS folder of the Library and contain instances of the Plain 3-D button seen in the Intro scene. The ActionScript attached to these buttons should be left unedited, so let’s focus on the appearance.
Figure 6.30 The Add to Cart and Print a Brochure text buttons.
If you customized the Plain 3-D button directly, then those changes will have been reflected in these two buttons as well. If you want these buttons to look different than other buttons in the movie, use the Effect panel to change the tint, brightness, or alpha of just these buttons. To match the rest of my site, I changed the font, color, and case of the text on the buttons. If you want these buttons to look totally different, you could create a custom graphic and use that instead. Remember that if you do so, swap symbols using the Instance panel to make sure that you do not lose the actions attached to these buttons.
Size Wide and Color Wide Movie Clips These Movie Clips are both located in the DYNAMIC ITEMS folder of the Library. Each product in the database has color and size options associated with it as outlined in the previous scenes, this information populates the drop-down boxes based on the product the user is currently viewing. In terms of coding, the attachMovie function is used to add the Wide Drop Movie Clip as many times as required.
Figure 6.31 Size Wide and Color Wide Movie Clips.
158
Flash Site Workshop
One instance of the Wide Drop Movie Clip is generated and populated for each color and size option from which the user can choose. This works in the same way as the size and color drop-downs in the Inventory scene, so check back there for coding snippets. Figure 6.32 shows a populated version of the boxes with the dropdown effect in place.
Figure 6.32 Dropped-down Color Wide Movie Clip.
For my button, the first decision I made was to remove the spotted line around the button. This is personal choice, but it did not fit with my site. I then changed the outline color to a solid color throughout, edited the inner fill to match my site, and finally set the font for the dynamic test box to match the font used throughout my site. The Size Wide and Color Wide buttons need to be edited to match each other, or you will lose the consistency of the site. The results populate into the Gradient Button symbol found in the BUTTONS folder of the Library. This button has an Up and Over state. Both states are created using instances of the Gradient symbol in the STATIC GRAPHICS folder. The text color is taken from the dynamic text field on the Size Wide and Color buttons. You can see from Figure 6.32 that the length of this symbol is longer than the originating drop-down button. This is deliberate to ensure that the value of the element will still fit on the button. To customize the drop-down element of my button, I edited the Gradient symbol to have a different gradient fill using a combination of the blue colors already in use on the site. For the Over state I used the Effect panel to increase the brightness for the button while retaining the gradient fill. You could change the fill to anything that matches your site design, lose the gradient fill, add and outline color to the button, or make it flat rather than 3-D. The important thing is to make it obvious to the user that it is still a clickable button.
Text Labels Figure 6.33 The Text Labels for the drop-down menus.
The text labels for the Size and Color drop-down menus are the same graphic symbols used for the column headers in the Inventory scene. If you edited the text labels in that scene, the changes will already be seen in this scene. In this scene I wanted the text labels to be a different color, size, and case. I simply created two new graphic symbols and replaced the originals on the appropriate layer.
Chapter 6
159
Create the Online Store and Cart
The Customized Close-Up Scene Here’s the Close-Up scene. Figure 6.34
The Carousel Scene
1 Category Movie Clip 2 Dynamic Text Fields
Chapter 6
Create the Online Store and Cart
161
How the Carousel Scene Works The Carousel scene gives the user the option to scroll through the images and descriptions of the products using a graphical interface. Using scroll buttons located at either end of the carousel, the product images populate the carousel three at a time. Moving the mouse over any image displays the product description in dynamic text boxes; clicking on any image takes the user to the Close-Up scene (detailed above) and the option to purchase the selected item. Figure 6.35 The Carousel scene in action.
A drop-down list allows items in the carousel to be sorted in any of the list orders we have seen already. Links to the Inventory and Close-Up scenes are present throughout, enabling the user to move quickly and easily to any other part of the movie. The Carousel scene has an Actions layer on the Timeline with an action set in each of the two frames. The script for frame 1 is shown below and uses the power of XML to load and populate the carousel. stop(); function reload( method ){ _root.productsXML = new XML(); _root.productsXML.onLoad = ➥_root.carList.column.populateCarousel; _root.productsXML.load(_root.yourServer add ➥“catalog.asp?sort=” add method); }
162
Flash Site Workshop
The end of the script tells the server to process the catalog.asp file to sort the information based on the user selection. Frame 2 actions, and tells the movie to go to frame 1 of the CloseUp scene and play. gotoAndPlay(“Close-Up”, 1);
Customize the Carousel When you look at the Carousel scene, you should see that the majority of visible elements have already been customized. The colors and feel of your site should certainly be making their mark by this stage. In fact, apart from dynamic text boxes, the screen should look close to the way you want, as it is full of the symbols you have already customized.
The Category Movie Clip Figure 6.36 The Category Movie Clip.
The Category Movie Clip is constructed in the same way as the Color and Size drop-down options in the previous scene. To customize it and to make it fit seamlessly into the look of my site, I repeated exactly the same modifications as I did to the Size and Color dropdowns. This retains consistency throughout the movie for the user. There is no need at all for the code associated with this Movie Clip to be edited, but if you want to be reminded of how it functions, refer back to the previous section covering the Size and Color DropDowns in the Close-Up scene.
Dynamic Text Boxes Figure 6.37 Dynamic Text Boxes.
The dynamic text boxes shown in Figure 6.37, are populated as always from the back end. Whichever product the user has highlighted at the time populates the dynamic product information boxes. Each of the dynamic text boxes are placed inside a line drawing and then placed directly on the Stage in the Text layer. This is not the
Chapter 6
163
Create the Online Store and Cart
blue empty box symbol used in other areas of the movie. To edit this, double-click the box and use the Stroke panel. You can change the font, color, and size settings of the box, but when doing so, make sure that the text will still fit in the required space. A change in font may result in more space being required. If you do this, you can scale the line drawing to suit the new font, remove the boxes all together so that the text appears to float onscreen, or drop the font size down. A larger style font will still be readable at a smaller size. Since these are dynamic text fields, I recommend using a device font. If you use a font that’s not installed on your user’s computer, it won’t render correctly. Now, that didn’t take long to customize did it?
The Customized Carousel Scene Here’s my version of the Carousel scene. Figure 6.38
The Thumbnails Scene
1 Static Company Text 2 Dynamic Text Fields
Chapter 6
165
Create the Online Store and Cart
How the Thumbnails Scene Works The Thumbnails scene is loaded whenever a user clicks the Thumbnail button in any of the other scenes. The Thumbnails scene, shown in Figure 6.39 with the dummy information loaded, loads thumbnail images of all inventory products. The user can choose the display order, as they have been able to in all of the other scenes. Again, moving the mouse over any image displays product information in dynamic text boxes. Clicking a thumbnail image takes the user to the Close-Up scene and the option to purchase the product. Almost all of the visible elements have now been customized in the previous scenes, so the bulk of this section is about the functionality and behind the scenes information. Figure 6.39 The Thumbnails scene in action.
The Thumbnails scene is made up of two frames and eight layers. The Actions layer has actions in both frames. This snippet of code is from frame 1: function reload(method){ _root.productsXML = new XML(); _root.productsXML.onLoad = ➥_root.catalogList.column.populateCatalog; _root.productsXML.load(_root.yourServer add ➥“catalog.asp?sort=” add method); }
166
Flash Site Workshop
This script declares a new XML object called populating it via the catalog.asp file.
productsXML
and begins
This is the script from frame 2 that tells the movie to play frame 1 of the Close-Up scene. The scene only moves to frame 2 when a user clicks an image. Immediately after they do so, this script is triggered. gotoAndPlay(“Close-Up”, 1);
Let’s look at what is on each layer and identify the new elements used in this scene. The Temp Background and Background layers have nothing new at all, and are static throughout. All of the elements on the Buttons layer have been seen and customized before. On this layer are the links to other views, up and down arrows for scrolling through the inventory, and the Sort By option for setting how the thumbnails are viewed. The Static Graphics layer also holds only symbols that have been seen and customized already; for example, the Specials Movie Clip and the Box Graphic symbol appear again in this scene. The three layers that remain are those which control the functionality of the scene. The Closer layer contains only the Column Movie Clip, which again was explained earlier in the chapter. The Text layer contains a static text symbol with some friendly text about the store and a number of dynamic text fields which are populated based on the product the user is hovering the mouse over. The final layer is called Catalog. This layer contains the Catalog List Movie Clip. This Movie Clip appears in the DYNAMIC ITEMS folder of the Library. It contains four layers, each with one keyframe. The Actions layer at the top contains a stop() action as well as instances of the objUp and objDown Movie Clips that control the scrolling effect. The code for these two Movie Clips should not be edited in any way. The rest of the Movie Clip is a little more complicated. There is a Guide layer, a Mask, and a Masked layer. The Guide Movie Clip in the Guide layer is sized to match the size of the mask. By default the visibility for both the Guide and Mask layers is off; however, to see the structure better you can turn this on to see that they are both the same size.
Chapter 6
167
Create the Online Store and Cart
The Masked layer, named Row, contains an instance of the Column Movie Clip that we have previously looked at.
Customize the Thumbnails Scene Customizing the Thumbnails scene is not a complicated process as the majority of items have been done already. Specifically, we need to look at the text fields, both the static company text area, and the dynamic fields that are populated when the thumbnails are generated.
Static Text The sole static text field in this scene is in a graphic symbol called Company Text and is found in the STATIC GRAPHICS folder. The symbol contains only text and is designed to be a simple welcomestyle message. You can use the space for advertising new products or alerting visitors to an upcoming sale. Change the text to suit your site in terms of content, size, color, and so on.
Figure 6.40 This graphic symbol holds text about your company.
Dynamic Text Boxes Figure 6.41 Dynamic text boxes.
The dynamic text boxes are placed inside line drawings as on the Carousel scene, and all appear within an instance of the box graphic that was customized in the Close-Up scene. To customize the dynamic text, simply select the font, color, and size that you want to see when the boxes are populated. Be aware of the device font issues referred to earlier.
168
Flash Site Workshop
The Customized Thumbnails Scene Here’s the Thumbnails scene. Figure 6.42
So Where To Go from Here So now you have all the functionality of an online store that looks and works smoothly. Chapter 13 will cover some information to help you decide on a host for your store as well as the rest of the site. As there are so many options available in so many countries, with different taxes, currencies, card types, and so on, there is no way we could meet the needs of everyone. At the end of the day, the decision of where to host your site should be as unique as the site you are hosting.
CHAPTER
7
Survey Your Viewers
The First Scene of the Viewer Survey Movie
The Second Scene of the Viewer Survey Movie
The Third Scene of the Viewer Survey Movie
The Final Scene of the Viewer Survey Movie
Chapter 7
Survey Your Viewers
What to Expect from This Chapter The viewer survey allows you to question your site visitors directly and gain valuable feedback about the way your site or products are fairing in the marketplace. The survey is designed to be anonymous. The visitor is not asked for a name or e-mail address. It is simply a way of obtaining feedback from those who are coming to the site and may or may not have visited before. If you have already modified any of the other movies in this book, you’ll see that the survey slots nicely into the model already used by the other sections of the site. In many ways this movie, in terms of coding used, is far simpler than some of the others, but the content is equally important. The only backend coding in the chapter is an .asp file, which gathers the information and e-mails it to the address specified within the movie. Changing the basic colors and names in the movie is something that has been done throughout the book, and although covered here, the mechanics of it are only mentioned, not discussed in detail. If you have already modified other movies from this book, you can open the modified file as a Library and use the elements you have previously customized. The questions can all be changed so that they are appropriate to your site; when complete, the answers are simply sent by e-mail to the address you specify. We’ll look at all of the individual components of the survey later in this chapter, but for now let’s look at how it comes together. The Survey movie is a single Flash movie (Viewer _Survey.fla) broken down into four scenes that interact to give the completed survey. As you would no doubt expect, the transition from one scene to the next is seamless, because each one loads in a natural progression as outlined in the following sections.
Scene 1 The opening scene includes the introduction of the main graphics, layout, and text. At the end of this scene, a single question appears asking the viewer whether they are ready to take the survey or not. We will examine what happens if the viewer says no during the customization; however, assuming that a yes answer is given, we immediately move to the next scene.
171
172
Flash Site Workshop
Scene 2 If the viewer answers yes in the first scene, the second scene loads and carries on exactly where the first scene ended. It contains the first two questions of the survey and their answer options as well as the Next Question and Reset buttons. The Next Question button will display the next question, and the Reset button will clear the answer from the current question. The Next Question button will work only when the current question has been answered. Both questions 1 and 2 are answered using radio buttons, so there is a minimum of time and effort required on the part of the visitor completing the survey. After the second question has been completed, we move to Scene 3.
Scene 3 Scene 3 continues from where Scene 2 left off. There are two more multiple choice questions, each loading once the previous answer has been accepted and only after the Next Question button has been clicked. The final question is a text box, encouraging the visitor to make their own comments about your goods or services. When the final question loads, the Next Question button is replaced with a Submit button. When clicked, the Submit button sends the completed survey by e-mail to the address you specify. The Reset button remains onscreen until the Submit button is clicked, enabling the users to change their minds about the answer to the last question at any time.
Scene 4 Once all questions have been completed, the final scene loads and completes the survey. Scene 4 is by far the shortest and contains an animation of the words Thank You. This gives the visitor a clear visual signal that the survey has been completed in full and that their answers have been submitted.
Scene 1
1 Temporary Background
6 Introduction Text
2 Green Background
7 Company Name Button
3 Blue Background
8 Yes Button
4 Ready Text
9 No Button
5 Survey Text
10 Recessed Box
174
Flash Site Workshop
How Scene 1 Works Make a copy of the Viewer _Survey.fla file from the CH07-Files/ CH07-Originals folder on the CD and place it in your working directory. Use the Test Movie command to see the survey in action. The graphic elements animate into place and the first question, asking if the viewer is ready to take the survey fades in to view. Yes and No buttons slide into view from the left of the screen. There is a stop action at frame 80 that holds the movie in place until one of the buttons is clicked. The Yes and No buttons have actions associated with them that will determine what happens next in the movie. If the Yes button is clicked, the Yes and No buttons fade to the right of the screen and the next scene starts. If the No button is clicked, a series of encouraging questions appear to gently persuade the visitor to complete the survey. A final No response will break out of the survey and load the company home page. Take a look at Figure 7.1 for the structure of the Timeline in this scene. The Actions layer in the Timeline is the top layer where you can see the actions associated with frames rather than symbols. In the first scene, the following frames have actions associated with them. Figure 7.1 The Timeline for Scene 1.
Frame 1 calls in the navigation bar that is used throughout the site. For information on how to customize this, see Chapter 3, “Design the Home Page and Site Identity.” loadMovieNum (“hz_Nav_Bar_new.swf”, 1);
Frame 80 has a Stop action in it. Once the Yes and No buttons are loaded, the movie waits for user input. stop();
Chapter 7
Survey Your Viewers
Frame 81 contains the encourage statement for the first time. This is used when the No button is clicked in response to the visitor being asked to complete the survey. _root.encourage.gotoAndStop(1);
The encouraging questions are contained inside the Are You Sure? Movie Clip located in the MOVIE CLIPS folder. This Movie Clip consists of five frames, each with an Actions and Text layer. Whenever the user says No to completing the survey, an encouraging question is loaded. If the user says No a final time, the last frame of the Movie Clip loads the home page of your site using the following action: getURL (“http://www.homepage.html”, “_self”);
We will look at customizing this Movie Clip and link later in this section.
Customize Scene 1 Because the survey is so simple, you can customize as much or as little as you need to make it fit with rest of your site. Parts of the survey, however, must be changed if it is going to work effectively for you. As I mentioned before, if you have already customized any of the movies in this book, many of the elements can be reused here. This includes the navigation bar. If you have the navigation bar stored in a different folder, put a copy of the hz_Nav_Bar_new.swf file into the same folder as this movie or update the source location for this in frame 1 of this scene.
Backgrounds There are three background symbols in the Survey movie: Blue, Green, and Temporary, and you might already have customized these. If so, you can use your modified versions of these symbols. You can change the color, shape, fill, and even the load order or technique of these components; however, remember that the text will be overlaid on the backgrounds as we go through the survey and the text needs to remain visible on top of any changes you make. These symbols are used across all four scenes, so any change you make here will be reflected across the entire movie.
175
176
Flash Site Workshop
Figure 7.2 The backgrounds used in the movie.
My customized version of the backgrounds includes changes to the color, fill, and shape of the backgrounds. The site I am working on is for my Web design company, which already has a recognizable color scheme and general identity. This involves a lot of smooth edges, and the original backgrounds were too rigid for the look I wanted. I decided that the design would work better without the green background, so I simply deleted it. I added a gradient fill to the temporary background using two similar shades of blue. This gives a nice fade effect without being too distracting. I changed the blue background to a rounded rectangle with a deep orange fill. I then wanted to create a shadow style effect for this revised background. To do this I used a second instance of the modified symbol on a new layer and positioned it behind the original to give the shadow effect. This gives a greater appearance of depth to the scene.
Text Fields There are three text symbols in Scene 1 of the movie. Ready Text (Symbol Name: Ready Survey? Text) Figure 7.3 The Ready text.
The Ready text symbol fades into view at the beginning of the survey and remains in place until the visitor has selected to continue with the questions or not. Because this symbol is only used once, it is safe to edit the original symbol. You can edit this as you would any other text symbol, changing the actual text, font color, or size. I changed the font to match the font used elsewhere on my site and changed the color of the text to black. This will ensure it is visible on
Chapter 7
177
Survey Your Viewers
my new background. You could edit this so it spins into view while it fades, or have each letter fade in turn by using individual letters as symbols. I changed the text simply to say “Are you ready…??” Survey Text (Symbol Name: Survey Text) The Survey Text symbol is present throughout the entire movie. It is there to identify that the viewer is on the survey screen. This symbol is in the same font, size, and color as all other symbols throughout the site and should be edited to match.
Figure 7.4 The Survey text.
Because the Survey Text symbol is present and static throughout the movie, any modifications you make to this symbol will be reflected in all scenes. If you do change the content of the symbol, remember to reposition the text symbol, if necessary. Keep in mind that repositioning must be done in all Survey keyframes in all scenes. For my site I changed the actual text to say Visitor Survey rather than survey. I made the font a little larger and used the same background color as my edited blue background. Introduction Text (Symbol Name: We Value Text) The Introduction text symbol is used to introduce the survey to the visitor. It says a little about the purpose of the survey and how it can be completed. This text must be edited because it refers to “company name,” which must be updated to reflect your company. I changed the text to explain why the survey exists on my site. You can edit the text by changing font, size, color, and so on. Remember that the text is going to be slotted into a Recessed Box symbol, so you probably want to keep the line breaks approximately where they are.
Figure 7.5 The Introduction text.
Company Name Button At this point in the book, it is likely that the Company Name has been modified in previous movies. If this is the case, you may be able to simply open a previously completed movie as a Library and import it from there. If you have not yet modified the symbol, then you can modify the font, color, and size of the static text field located in the Master symbol. Alternatively, you could add a new layer in the button, import a graphic of your company logo, delete the layer that contains the text field, or make it a Guide layer so it won’t export. The Company Name button is used across all scenes, so any changes you make here will be reflected across the entire movie.
Figure 7.6 The Company Name button.
178
Flash Site Workshop
If you double-click the Actions for the Company Name button in the Movie Explorer, you can set the hyperlink on the Company Name button to point to the home page of your site. The URL needs to be edited in all Company Name keyframes. Missing one URL will mean that the dummy hyperlink remains in place. Shown below is the action for the button. on (release) { getURL (“http://www.homepage.html”, “_self”); }
For my site, I imported our main company logo to serve as the company button. This adds to the corporate identity across all media.
Yes Button Figure 7.7 The Yes graphic.
The Yes button in Scene 1 is actually two separate symbols: Yes button (only located in frame 80) and Yes Graphic. These two symbols appear to be the same at first glance, but as the name implies, one is a static graphic and the other is a clickable button. These two symbols need to be edited to match with each other, so that the transition points are seamless. The Yes Graphic symbol is an exact replica of the Up state of the clickable button. I recommend that you edit the Yes button and then simply copy the Up state into the Yes Graphic. This guarantees that the two will be exact. If you are happy with the gray 3-D effect button, these symbols can be left as they are. In my case, I do not want the 3-D effect for my buttons. Instead, I created a custom graphic for the Yes button and copied the Up state of this to be the Yes graphic. I then used the Instance panel to swap the symbols over. When clicked, the Yes button triggers the movie to continue to the next scene and load the first question in the survey. on (release) { play (); }
Chapter 7
179
Survey Your Viewers
No Button The No button enables the user to choose not to complete the survey at all. When clicked, the No button triggers the Are You Sure? Movie Clip that contains a series of encouragements to complete the survey. (We will look at this Movie Clip later in this chapter.) Each time the No button is clicked, one of the encouraging lines is displayed onscreen. If the visitor clicks the No button after the last encouraging sentence is displayed, the company home page will be loaded. If a visitor clicks the Yes button in response to the encouragement, then the survey continues to load.
Figure 7.8 The No Graphic.
Similar to the Yes button, the No button is made up of two symbols: No button (only located in frame 80) and No Graphic. I edited both of these symbols to match the customizing for the Yes buttons above. The following ActionScript is attached to the instance of the No Button Text symbol. It opens up the Are You Sure? MC by referring to its instance name: encourage. Unless you alter the instance name of this MC, there’s no reason to edit this code. on (release) { tellTarget (“encourage”) { nextFrame (); } }
Recessed Box The Recessed Box symbol is used many times in this movie, and also in others you have already seen in the book. It may well be that you already have a customized version of this symbol, in which case you can simply import it into this movie. If you don’t already have a customized symbol to use, open the STATIC GRAPHICS folder of the Library to edit the symbol. The Recessed effect is created by using contrasting colors on the adjacent edges of the symbol. You could change the shape of this symbol, although I would not recommend it based on the number of times it is used throughout the movie. You can, however, change the line color to give a different effect. Using the same color for all four
Figure 7.9 The Recessed Box symbol.
180
Flash Site Workshop
edges would give a simple box with no effect. I chose to use a lighter color on the top and left edges of the box to give an embossed rather than recessed effect. I used the two colors seen in the gradient fill for my temporary background. One other option for this symbol would be to add a fill color, thus creating a background for all the text symbols and buttons that appear within Recessed Boxes in the movie.
Are You Sure? Figure 7.10 The Timeline for the Are You Sure? Movie Clip.
This Movie Clip is given the instance name of encourage, and loads a series of four encouraging questions when a visitor chooses not to take the survey. The Movie Clip is located in the MOVIE CLIPS folder of the Library and is not directly visible on the Stage. It is only displayed dynamically as a result of the No button being pressed. The first frame of the MC is blank with a stop() action. Each of the subsequent keyframes in the Movie Clip contains a new message and another stop() action. The movie will wait at this point until either the Yes or No button is clicked. Each click of the No button advances this MC to the next frame. Every encouraging message can be edited as plain text to say whatever you feel is encouraging to the visitor. The final encouraging message has a geturl function attached, which takes the visitor out of the survey and to a page of your choice. Edit the dummy URL in frame 5 of the Actions layer to send the visitor away from the survey page.
Chapter 7
181
Survey Your Viewers
The Customized Scene 1 Here’s the customized Scene 1. Figure 7.11
Scene 2
1 Animated Dashes 2 Recessed Boxes Movie Clips 3 Question Text 4 Radio Buttons 5 Next Question Button 6 Reset Button
Chapter 7
183
Survey Your Viewers
How Scene 2 Works If the user clicks Yes in the previous scene, Scene 2 follows seamlessly. This scene contains the first two questions and their possible answers in the five-question survey. The questions in this scene use radio buttons for answer selections. Once a question is completed, the visitor has the option to click the Reset button if they want to change their answer, or click the Next Question button to progress through the survey. Each question loads in turn and must be answered before the user can move on to the next one. This is achieved because the Next Question button is not activated until a selection is made in one of the radio buttons used to answer the questions. You can see from the Timeline screenshot below that this scene has many elements repeated from Scene 1. The backgrounds, Company Name button, and survey text are all still visible and should now appear complete with your customizations. Figure 7.12 The Timeline for Scene 2.
The Actions layer for Scene 2 has actions present in five frames. Frame 1 has the ActionScript to set the e-mail address where the completed form will be sent. strFrom = “[email protected]” strTo = “[email protected]” strSubject = “Survey”
This script contains the variables that are passed through the emailer.asp file on the server so that the completed form can be mailed back to the address you choose. Simply exchange the dummy e-mail address for your own in the Actions panel and the survey will work once the site is published.
184
Flash Site Workshop
Frame 92 has a stop() action to hold the movie until the first question has been answered. Frame 93, which is only activated after the first question has been completed, has the following script attached. This script resets the Next Question Movie Clip to frame 1 so that it is only active again after Question 2 is completed. _root.nextQuestion.gotoAndStop(1);
Frames 146 and 147 have exactly the same actions in place to perform the same actions between Questions 2 and 3.
Customize Scene 2 As described earlier, you will be able to immediately see the elements in this scene that have already been customized, so let’s not dwell on them. Instead we can move straight into dealing with the new things in this scene.
The Dashes Anim Movie Clip Figure 7.13 The Dashes Anim Movie Clip.
In Scenes 2 and 3, you’ll see an animation of dashed bars cross the screen. The Dashes Anim MC is located on the Bars layer and made up of two graphic symbols: Green Stripe and Blue Stripe. These are the colored stripes that appear in the survey while the questions are onscreen. They have no actions attached and can simply change their color or fill to match your site. You could easily change the bars to any other shape you want, but don’t make them too bright or distracting to the visitor completing the survey.
Figure 7.14 Applying transformations can alter instances, but not the master symbol.
A quick way to modify the instances of the stripes in this MC is to apply transformations to them. In Figure 7.14 you can see the Transform panel for a stripe inside the Dashes Anim MC. For my customization, I modified the symbols to use the two colors in my background gradient fill.
Chapter 7
Survey Your Viewers
185
The Recessed Boxes Movie Clips Figure 7.15 The Timeline for the Recessed Boxes Movie Clip.
There are two Recessed Boxes Movie Clips in Scene 2, with changes occurring in keyframes. The Recessed Boxes layer contains the different Recessed Boxes symbols used in the scene. These boxes are used to contain the questions in the survey. There are different combinations of recessed symbols based on the size of the questions and number of possible answers. All of the Recessed Box Movie Clips in the movie are created the same way, using a combination of instances of the Recessed Box symbol that you customized earlier and the Box 1 symbol. To customize my site, I removed the Recessed Box instance designed to hold the Next question and Reset buttons as it does not fit with the feel of my site. This deletion was done in all of the Recessed Boxes Movie Clips. Let’s look at the keyframes in the layer and identify what is there. The Recessed Boxes Movie Clip The Recessed Boxes MC loads in frame 22 of Scene 2 and remains static until frame 92. This Movie Clip contains animation that will make the boxes appear to fade in.
186
Flash Site Workshop
The Recessed Boxes1 Movie Clip The Recessed Boxes1 Movie Clip loads in frame 93 and remains on the Stage throughout Scene 2. It also contains animation to drop out the smaller inset box for Question 2.
The Box 1 Symbol Figure 7.16 The Box 1 symbol.
Instances of the Box 1 symbol are used for the large rectangular box in both of the Movie Clips above. I customized my Box 1 symbol by reversing the use of color from my customized Recessed Box symbol.
Question 1 Watching the seemlessness of the movie belies the construction that makes it all work. This section is called Question 1, but in fact each question in the movie has many elements with Question 1 merely being the first. Before we look at each element individually to customize it, let’s look at what exactly goes into Question 1 to make it work. Question 1 starts in frame 61 of the scene, and the first symbol is a Movie Clip called Question 1 Fade-In. Question 1 Fade-In Movie Clip
Figure 7.17 The Question 1 Fade-In Movie Clip.
The Question 1 Fade-In Movie Clip loads in frame 60 and is an eleven-frame Movie Clip with four layers. The Actions layer contains a stop action in frame 11. The question text loads first followed by the answer options. Layer 1 animates in the text for the question, layer 2 contains the Yes answer, and layer 10 contains the No answer. The question is a plain text symbol called Ever Shopped Company Name, located in the TEXT folder of the Library. This symbol holds
Chapter 7
Survey Your Viewers
187
the text for the first question of the survey. Updating the original symbol will update all instances of it throughout Question 1. This needs to be edited to reflect the first question you want to ask. It is designed to be a yes or no question, so edit the text, font, and color accordingly. As my site does not actually sell products, I am asking the question whether visitors have found the site useful. Next is the instance of the Yes text symbol from the TEXT folder of the Library. Unless you do not want to have Yes as a possible answer to the first question, there is no need to customize this other than changing the font and color to match your site. Finally, there’s the No text symbol from the TEXT folder of the Library. Again, unless you do want No as an answer to the question, all you need to do here is change the font and color to suit your site. Question 1 Static Movie Clip The Question 1 Static Movie Clip is a single frame Movie Clip that contains all of the symbols and layers from the Question 1 Fade-In Movie Clip. This symbol is present from frames 72 to 92, and, as the symbol name implies, is a static symbol that simply sits on the Stage.
Figure 7.18 The Timeline for the Question 1 Static Movie Clip.
Assuming you have now customized the elements above, this should appear the way in which you envisioned it. Question 1 Fade-Out Movie Clip This symbol is present from frames 93 to 104, and fades the first question off the Stage, ready for Question 2 to load in. It is an exact replica of the Question 1 Fade-In Movie Clip but fades the symbols out rather than in. Assuming you have now customized the elements above, they should look just the way you want it.
Question 2 As with Question 1, Question 2 is composed of three main Movie Clips—one to fade the question in, a static one for when the question is answered, and a fade out Clip to remove the question from the screen. We will look at these three Clips individually for the purposes of customizing this scene.
Figure 7.19 The Timeline for the Question 1 Fade-Out Movie Clip.
188
Flash Site Workshop
Figure 7.20 Question 2 on Stage.
Edit the text symbols to change the questions to suit your site as well as to create appropriate answers. Editing the text symbols will update all of the Movie Clips for the question. Question 2 starts in frame 106 of the scene, and the first symbol is discussed next. Question 2 Fade-In Movie Clip Figure 7.21 The Timeline for the Question 2 Fade-In Movie Clip.
This Movie Clip loads in frame 106, has 21 frames and six layers. The Actions layer contains a stop action in frame 21. Layer 4 contains the text for the question, Layers 5, 6, 7, and 8 contain the text for the possible answers to the question. For all of the text symbols in the Clip, you will need to edit the text to ask the question you want as well as provide the possible answers. Question 2 Static Movie Clip Question 2 Static Movie Clip is a single frame Movie Clip containing all of the symbols and layers in the Question 2 Fade-In Movie Clip. This symbol is present from frames 127 to 145. From frames 127 to 138 the symbol slides across the Stage to its resting place and then remains static to frame 145. It remains in place until the user answers the question. Assuming that you have already updated your question and possible answers, this Movie Clip will also have been updated automatically.
Chapter 7
189
Survey Your Viewers
Question 2 Fade-Out Movie Clip This symbol is present from frames 146 to the end of the scene, and fades the second question off the Stage ready for Question 3 to load in at the start of Scene 3. It is an exact replica of the Question 2 Fade-In Movie Clip but it fades the symbols out rather than in. Assuming that you have already updated your question and possible answers, this Movie Clip will also have been updated automatically.
Radio Buttons At this point, I would have to say that radio buttons are radio buttons and there is really no way to customize them. They are a standard feature of Web page forms and are immediately recognizable as such. For this reason, what follows here is merely an explanation and breakdown of radio buttons and where they are used as opposed to instructions for customizing them. In this scene there are many instances of radio buttons, and it is important that you understand what is being used where. Let’s start by examining the Radio Buttons layer on the Timeline. This layer contains all the instances of radio buttons in the scene. The first radio buttons onscreen fade into view between frames 51 and 61. This is a simple graphic symbol called Radio-Fade 1. This symbol is located in the BUTTONS-GRAPHIC VERSIONS folder of the Library. It is composed of two drawn elements that are designed to look like radio buttons, although they are simple drawings. The reason for this is to keep your viewers from clicking the radio buttons before the question is in place in frame 92. In frame 92, this symbol is replaced by two radio button Movie Clips called Yes q2 and No q2.
Figure 7.22 The Radio-fade 1 graphic symbol.
Both of these Movie Clips are the same in construction, with two frames and two layers. The Yes q2 Clip instance on the Timeline is named Yes so that it can be referenced, and the No q2 Clip is named No for the same reason. Both keyframes in the Actions layer for both Clips contain a stop action. The second layer for each Clip is called Buttons. The first frame of the Buttons layer contains an instance of the Radio Button Unchecked symbol, located in the BUTTONS folder of the Library. This symbol is a plain radio button in its unchecked state. Attached to the instance of Radio Button Unchecked in frame 1 of the Yes q2 clip is this code:
Figure 7.23 The Timeline for the Yes q2 Movie Clip.
190
Flash Site Workshop
on (release) { tellTarget (“/No”) { gotoAndStop (1); } _root.Question1 = “Yes”; nextFrame (); _root.nextQuestion.gotoAndStop(2); }
This ActionScript does a couple of very important things. It looks for the Movie Clip instance called No in the parent Timeline and makes sure that the MC is in frame 1. Since frame 1 contains the unchecked radio button, this means that both buttons can’t be checked at the same time. The fifth line of ActionScript contains the really important code: it populates the Question1 variable in the root Timeline to include the string “Yes.” The code for each radio button populates the appropriate Question variable with a string that indicates the viewer’s answer to that question. Later, when the viewer has submitted their survey, Flash will compile all the question variables into a paragraph of text that will go into the e-mail that is sent back to you. If you want to change the available answers, you must go into the code attached to each instance of radio button unchecked and change the string in line 5 to accurately represent the new answer. The next line jumps to the next frame in the Yes q2 Timeline, which contains the instance of Radio Button Checked, which is a plain radio button in it’s checked state located in the BUTTONS folder of the Library. Finally, it targets the Movie Clip instance called nextQuestion in the main Timeline and sends it to frame 2, so the viewer can move on. If you want to add more possible answers, you should copy and paste an instance of one of the Radio Button Movie Clips and position it so it lines up with the others onscreen. Give it an appropriate instance name, and double-click to edit it. Click once on the instance of Radio Button Unchecked in frame 1 and open the Actions panel. Copy and paste the lines of code that sends all other Radio Button Movie Clips to frame 1 (lines 2-4 above) and make sure the instance names list the other MCs. Then, edit line 5 so the Question variable is set to something that will make sense to you.
Chapter 7
191
Survey Your Viewers
Frame 114 of the main Timeline introduces us to the next instance of radio buttons in the scene: the Radio-fade 2 symbol from the BUTTONS-GRAPHIC VERSIONS folder. This symbol contains four circular objects, each drawn to look like a radio button. The objects are grouped together vertically and Fade into place on the Stage. Like the Radio-fade 1 symbol, these fake buttons appear so your user can’t inadvertently click too soon. The symbol is replaced in frame 146 with working radio buttons and then appears again in frame 147 until the symbol fades out again after Question 2 has been completed. Frame 146 appears to contain the same symbol, but in fact contains four Movie Clips, one for each possible answer to the question. The four Movie Clips are located in the RADIOBUTTON-MOVIE CLIPS Q2 folder. From top to bottom, these Movie Clips are VerySatisfied q2, SomewhatSatisfied q2, Neither q2, and SomewhatDissatisfied q2. These Clips are all constructed and work in the same way as the Yes q2 and No q2 Movie Clips described earlier. Each instance is named to enable script referencing for the Reset button.
The Next Question Movie Clip The Next Question Movie Clip is positioned on the Next layer of the Timeline. It slides into place from the right of the Stage and slots into one of the many Recessed Box instances. Like many elements in this movie, the Next Question Movie Clip contains nested elements that add effect and functionality. The Movie Clip contains two frames and two layers. The first layer is an Actions layer with a stop action in each frame. The other layer is called Button. Frame 1 of the Button layer contains a simple shape drawn directly on the Stage. This button has the same 3-D effect as other buttons in the site. Frame 2 of the Clip contains an instance of the active Next Question button. The reason for this construction is the same as the reason for switching fake radio buttons for real ones: to keep your viewer from clicking too soon. When the user selects an answer from a question, the Next Question Movie Clip advances to the second frame and the button becomes live. The Next Question button is located in the BUTTONS folder of the Library and is a standard four-state button. Look at the Up state of the button. There’s a shape drawn onto the Stage that matches the shape in the first frame of the Next Question Movie Clip. If you make changes to the shape in either symbol, it’s best to copy and
Figure 7.24 The Timeline for the Next Question Movie Clip.
Figure 7.25 The Next Question button.
192
Flash Site Workshop
paste it over the old shape in the other symbol. The text that appears on the Up state for the button is, in fact, another Movie Clip, called Next Question Text. This Movie Clip, from the MOVIE CLIPS folder of the Library, contains a single layer and 10 frames that make the text flash. This flashing text indicates to the user that the button is now clickable. You can edit the color, size, and font of this text, but be sure the changes are reflected everywhere.
Reset Button Figure 7.26 The Reset button.
There are two versions of the Reset button in use in this scene. The first button seen in the movie is a static graphic that slides onto the Stage, and is then replaced by the clickable version in frames 92 and 145. The static version is located in the BUTTONS-GRAPHIC VERSIONS folder in the Library and is called Reset Graphic. This static button contains a shape drawn in the same design as the standard 3-D button seen throughout the site. Reset Button is the clickable version of the reset button. This button has actions associated with it that are different each time it appears in the scene. The following code is from the Reset Button instance in frame 92. In this case the code is triggered by an onRelease event. This code tells the radio button instances named Yes and No to go to their first frame and stop. This has the effect of clearing both radio buttons to allow the user to complete the question again. on (release) { tellTarget (“Yes”) { gotoAndStop (1); } tellTarget (“No”) { gotoAndStop (1); } _root.nextQuestion.gotoAndStop(1); }
The code for the second instance of the Reset button in frame 146: on (release) { tellTarget (“VerySatisfied”) { gotoAndStop (1); }
Chapter 7
193
Survey Your Viewers
tellTarget (“SomewhatSatisfied”) { gotoAndStop (1); } tellTarget (“Neither”) { gotoAndStop (1); } tellTarget (“SomewhatDissatisfied”) { gotoAndStop (1); } tellTarget (“complete”) { gotoAndStop (1); } _root.nextQuestion.gotoAndStop(1); }
In this case the named instances are the radio buttons associated with Question 2. The effect of clicking the button is the same in both instances—all radio buttons are set back to the unchecked state.
The Customized Scene 2 Here’s my customized Scene 2. Figure 7.27
Scene 3
1 Question Text 2 Text Scroll Movie Clip 3 Submit Button
Chapter 7
Survey Your Viewers
How Scene 3 Works Scene 3 contains the last three questions of the survey as well as the Submit button. Many of the elements here have already been customized, and many of the others will follow the same process and style we used for Scene 2. Questions 3 and 4 are answered again using radio buttons, which are constructed the same way as Questions 1 and 2. Apart from rewording the questions to suit your site, there will be little to do for them. The frame actions are the same in this scene as in Scene 2 with a stop action holding each question in place until it is answered, and the next question is loading. There are many more radio buttons in use again, but other than to let you know which instances are used where, we will not go into much detail about them. Questions 3 and 4 have the same possible answers as Questions 1 and 2, so the underlying text symbols for the answers have already been modified to suit your site. Only the text for the actual questions needs to be customized in this scene. Question 5 is different because it enables the user to type in their own comments in response to your question. This question uses an input text field to accept the answer from the user and has a scroll function in place to enable the answer to be longer in length than the visible input box. Once Question 5 is completed, the form can then be submitted to the e-mail address you have already input. Once the final question is loaded onscreen, the Next Question button disappears and is replaced with a Submit button. If the user attempts to submit the form without completing the final question, an alert is displayed onscreen and asks the user to complete the survey before submitting it. The Submit button has specific actions associated with it that collates the answers to the questions, joins them together, and then passes them through the .asp file on the server and e-mails them back to you. It all sounds simple—for the user, it is a minimum of input and time. For you as the site owner, it is an ideal opportunity to get feedback from those using the site.
195
196
Flash Site Workshop
Customize Scene 3 Scene 3 contains many symbols already used as well as some new ones. Before we dive in and start changing things, let’s take some time to identify the areas that still need to be updated. Everything visible on the Stage at the beginning of the scene has already been customized: the backgrounds, instances of the Recessed Boxes, Next Question and Reset buttons, Company Name button, and survey text. And now you might be thinking there is nothing left to do. In reality, it is the elements not yet visible that need changing. Use the test scene command to see the questions still to come and you will see more symbols that have already been updated. These include the answers to Questions 3 and 4 as they use the same text for the possible answers as Questions 1 and 2.
Question 3 The action in the scene starts in frame 15 with the appearance of the Question 3 Fade-In symbol. Question 3 Fade-In
Figure 7.28 The Timeline for the Question 3 Fade-In Movie Clip.
Figure 7.29 The Ever Shopped Online graphic symbol.
This is a 10-frame, 4-layer Movie Clip that contains animation that makes the text boxes appear to be fading in one by one. The Actions layer for the Movie Clip has a stop() action to keep the Clip from looping. The next layer down has the text for the third question, located in the Ever Shopped Online graphic symbol. You should edit this symbol to ask the question you want to ask your visitors. Because the answer radio buttons are in place to be Yes or No, it’s probably easiest if you edit the question to have Yes or No answers. Layers 11 and 12 of the Question 3 Fade-In Movie Clip have the Yes and No symbols that were customized in Scene 2. If you want to alter the number of possible answers or their content, make sure you change the code associated with the radio buttons as outlined in Scene 2. Question 3 Fade-Out
Figure 7.30 The Question 3 Fade-Out Movie Clip.
This is an exact replica of the fade-in symbol for Question 3, only it fades the question out rather than in. The symbol is on the Stage from frame 26 to 37. There is no customizing left to do for the symbol because all of the elements have already been updated.
Chapter 7
197
Survey Your Viewers
Question 4 As with the other questions, this uses several symbols to create the animation. Question 4 Fade-In Figure 7.31 The Question 4 Fade-In Movie Clip.
This Movie Clip needs to be edited so you can ask the question you want. Because the answer radio buttons are in place to be the same as Question 2, it’s easiest if you edit the question to have the same answer options. The Movie Clip is a 21-frame, 5-layer Movie Clip, again with a stop() action in the final frame. Layers 1, 2, 3, and 4 contain the text symbols to provide the answer options and have already been customized in Scene 2 for Question 2. Layer 5 contains the actual text for Question 4 in the shape of the How Satisfied Service graphic symbol. This symbol contains the actual text for Question 4 and needs to be edited to ask a specific question. Satisfaction Text This graphic symbol appears in frame 57 and slides into it’s resting place where the visitor can answer the question. The symbol is a single frame symbol with five layers, and is composed entirely of text. You’ve already customized all the graphic symbols that make
Figure 7.32 The How Satisfied Service symbol.
198
Flash Site Workshop
up this symbol. However, if you want to alter the number of possible answers or their content, make sure you change the code associated with the radio buttons as outlined in Scene 2. Question 4 Fade-Out Figure 7.33 The Timeline of the Question 4 Fade-Out Movie Clip.
As with all of the other Fade-Out Movie Clips, this is an exact replica of the Question 4 Fade-In Clip, except the fade action is reversed so the text fades out. There is nothing left to do with this Clip because all nested symbols have been customized.
Radio Buttons The graphic radio buttons used during animation in this scene are exactly the same as those used in Scene 2: Radio-Fade 1 and RadioFade 2. The Yes q3 and No q3 Movie Clips, which will respond when the user clicks them, are built exactly like the Yes q2 and No q2 Movie Clips discussed in Scene 2. The Movie Clips used for viewer response for Question 4 (Very Satisfied q3, SomewhatSatisfied q3, Neither q3, and SomewhatDissatisfied q3) are also built exactly like their corresponding Clips in Scene 2. If you have changed the number of possible answers or their content, make sure you change the code associated with the radio buttons as outlined in Scene 2. As with the Scene 2 radio buttons, there’s not much reason to customize these.
Question 5 Text The functional elements for the final question are located on the Input Field layer, while the text for the final question is on the Text layer in a symbol called Further Suggestions Text.
Chapter 7
199
Survey Your Viewers
The text for the final question fades into place at frame 96 and is the present on the Stage until the Submit button is pressed. It is worth noting that frame 96 is also where the Submit button appears. The Further Suggestions Text graphic symbol contains a text field, which is the question text for the final question. Because it is designed to have a ‘free’ answer, the question can be customized to anything you want to ask the user. I have taken the opportunity on my site to ask if there is anything new the user would like to see; if so, what? The input field will scroll to allow for any length of answer, so I can accept responses whatever the length.
Text Scroll Movie Clip The Text Scroll Movie Clip is composed of an input text field for the user to input their answers to the final question, and a scroll bar to the right made up of the symbols below. Blue Empty Box Symbol This symbol is used within the Text Scroll Movie Clip as an outline for the scroll arrows. You can customize it to be any color you want. The symbol has been transformed to be the correct size for the Movie Clip. I changed the color of the box to match my site, but you could turn it into a recessed box, add a fill color, or create any other effect that suits the look of your survey.
Figure 7.34 The Text Scroll Movie Clip.
Figure 7.35 The Blue Empty Box symbol.
Arrow Button There are two instances of the Arrow Button symbol used in the Text Scroll Movie Clip. These arrow symbols indicate to the user that the text field is scrollable. You can change the colors in this symbol to match your site. If you want to replace the graphic completely, you should swap symbols in the Instance panel because both buttons have important scripting attached to them that would be lost if you deleted the instances on Stage. I edited the arrow to match everything else on my customized site.
Figure 7.36 The Arrow button.
200
Flash Site Workshop
scrollDown and scrollUp Movie Clips
Figure 7.37 The Timeline for the ScrollDown Movie Clip.
The scrollDown and scrollUp Movie Clips are nearly identical in terms of functionality, and are certainly the same in terms of visibility—they are both invisible. Each Movie Clip is composed of three frames that each contains an ActionScript. Frame 1 for both symbols contains a stop() action. Frame 2 is where the main functionality is located. The code for the scrollDown movie is as follows: _root.inputBox.currentScroll = ➥_root.inputBox.Input01.scroll; if (Number(_root.inputBox.currentScroll) ➥
The instance of the Text Scroll Movie Clip is referenced by its name inputBox on multiple occasions. The input text box is referenced by the variable associated with it: Input01 The code first checks the state of the input box and looks to see if the current state of the scroll is less that the maximum scroll for the input box. If it is less that the maximum (in other words, if there are more lines of text than are showing), then the scroll increases by one. Frame 3 contains the code gotoAndPlay (2), which sends the Scroll button back to frame two of the Clip to enable further scrolling, if necessary. The code for the ScrollUp Movie Clip is the same for frames 1 and 3, with frame 2 being as follows: _root.inputBox.currentScroll = _root.inputBox.Input01.scroll; if (Number(_root.inputBox.currentScroll)>1) {_root.inputBox. ➥Input01.scroll = _root.inputBox.currentScroll-1; }
As the scroll up function can only be used after the scroll down, this code simply removes 1 from the current scroll value with each time the arrow is clicked.
Chapter 7
201
Survey Your Viewers
Submit Button The Submit button is actually two different symbols used much the same way as the Next Question button from Scene 2. The Up state of the Submit button contains the Submit MC Movie Clip that flashes text to indicate to the user that the button is clickable. The Submit button loads into the movie in frame 108 and is present only for two frames. On frame 110 it’s replaced by the Submit Graphic symbol that animates offscreen. The Submit button has actions associated with it and will react in a different way, depending on whether or not the final question has been answered when then user clicks it. on (release) { if ((_root.inputBox.Input01 ne “”)) { _root.complete.gotoAndStop(1); _root.nextQuestion.gotoAndStop(2);
The action is executed when the button is clicked, first checking that the final question has been completed. If the input box has been completed, the movie continues and the form data is submitted. The data is built using the following snippet of code: strBody = “Question 1:” + “ “ + Question1 + newline + ➥“Question 2:” + “ “ + Question2 + newline + “Question 3:” + “ “ + Question3 + newline + ➥“Question 4:” + “ “ + Question4 + newline + “Input Box:” + “ “ + _root.inputBox.Input01 loadVariablesNum (“http://64.64.241.25/emailer.asp”, ➥0, “POST”); _root.play();
This code section builds the strBody variable referenced in the emailer.asp file on the server. The code takes the answers from questions and puts each one on a new line. It then adds the comments from the input box and uses the POST action to send the form to the server. The code contains the complete path to the emailer.asp file; your code must be updated to match the correct path to your emailer.asp file. Once the form is submitted, the code tells the main Timeline to play so it will continue the movie to Scene 4.
Figure 7.38 The Submit button.
202
Flash Site Workshop
If the user has not completed the final question, this final code section is instigated: } else { _root.complete.gotoAndStop(2); } }
This code tells the play head to stop on frame 2 of the instance named complete.
Please Complete Figure 7.40 The Please Complete Movie Clip.
Now let’s look at the Please Complete Movie Clip with the instance name of complete. The main Timeline contains a layer called Please Complete. This layer appears to contain very little, and if the survey is completed before the Submit button is pressed, the contents of this layer will never been seen by the visitor. This is a two-frame, two-layer Movie Clip. The Actions layer for each frame has a stop() action, and frame 1 of the Text layer is empty. The important part of this Movie Clip is located in frame 2 of the Text layer. This contains an alert message to be displayed by the code shown above. You can customize the message in any way you want. Change the font, size, color, and even the text to suit the message you want your visitors to see.
Chapter 7
203
Survey Your Viewers
The Customized Scene 3 Here’s my customized Scene 3. Figure 7.41
Scene 4
1 Thank You Text
Chapter 7
Survey Your Viewers
205
How Scene 4 Works Scene 4 is short and sweet, and will take hardly any effort to customize because most of the customization has already been done. Scene 4 is loaded after the user has successfully completes all of the questions in the survey. The scene is designed to let the user know that the survey is complete and that they can now continue surfing the rest of the site. The Scene contains seven layers, six of which are static and contain elements already seen and customized earlier. The new layer is called Thank You and contains a single Text symbol that fades and grows into place. Once complete, so is the survey. A stop() action in the final frame of the Scene (and also the movie) holds this text in place to indicate the end of the survey.
Customize Scene 4 This customize section will be brief, because there is only a single symbol to customize. The backgrounds, survey text, and Company Name button were all customized back in Scene 1 and will now look exactly as you want.
Thank You Text The Thank You Text symbol can be found in the TEXT folder of the Library. It is a plain graphic symbol that uses a motion tween to fade the symbol into view and to grow in size as it fades in. You can edit this by changing the size and color, or you could edit the way the symbol appears on the screen. I have changed the font, size, and color of the symbol as well as adding a message saying that the survey is complete.
Figure 7.42 The Thank You Text symbol.
206
Flash Site Workshop
The Customized Scene 4 Here’s my customized Scene 4. Figure 7.43
Summary You can see from the model supplied how easy it is to create a survey for your site. In real terms you can edit the questions to discover whatever you want to know from your visitors. The supplied model is designed to give you ideas, so let your imagination run. Ask the questions that will give you the best idea of what your visitors think about the company or products you are offering. You could even change the questions on a regular basis to keep your feedback current.
CHAPTER
8
1 Blue Background
Set Up a Services Catalog
9 Print a Brochure
17 Radio Button MC
2 Green Background
10 Print Price List
18 Send Newsletter Text
3 Temporary Background
11 Services Request Form Title
19 Service Request Form Send
4 Horizontal Bar Animation
12 Services Request Form Labels
20 Services Header
5 Company Name
13 Services Request Form Input
21 Check Out Presentation Button
6 Section Outlines 7 Services Body Copy 8 Select a Service Drop-Down Menu
Fields
14 Type of Business Pull-Down 15 State Pull-Down 16 Country Pull-Down
22 Launch Real Player Button 23 QuickTime Plug-In Button 24 Real Player Plug-In Button
Chapter 8
209
Set Up a Services Catalog
What to Expect from This Chapter The Services Catalog movie enables you to easily set up a modular services/product area for your company. Your viewers can use the movie to print out a brochure in hard copy form as well as a detailed price list. There is also an embedded form that enables users to contact and request further information on a particular service or product. Each service or product has its information stored in a separate .swf file, which when selected is loaded inside of an empty Movie Clip. There are also external movies, in both QuickTime and RealVideo format, that can be triggered from the movie and then loaded into a new browser window contained in an HTML page. I chose to customize this movie for FlashDev, a fictitious Web development company specializing in Flash development. I kept the design clean and concise, using application-like colors to represent the feel of Web applications because that is the specialty of this particular company.
How the Services Catalog Movie Works Before we begin, you’ll want to locate the .fla for this chapter on the CD. Look for the CH08-Files/CH08-Originals folder and copy the files located inside to your hard drive. Once they are copied to your machine, open services.fla in Flash and follow along as we discuss how the movie works. The Services Catalog movie is a one-scene file that can be easily customized to showcase services or products, and link the information to movies. It also includes a form that users can fill out to request information on those services or products. Figure 8.1 Main Timeline of movie.
210
Flash Site Workshop
The movie starts with an action placed on the starting frame of the Actions layer. Here, variables that process the form are initialized for use in the emailer.asp file: strFrom = “[email protected]” strTo = “[email protected]” strSubject = “Service Request Form”
The first e-mail address specifies a default address for the sender field of the e-mail, while the second e-mail sets the address of the recipient. The third line simply sets the Subject line of the e-mail. This subject variable is what will be visible in the Subject line of your e-mail client. This frame also contains code that loads the navigation bar, hz_Nav_Bar_new.swf, as you may have seen in previous chapters. loadMovieNum (“hz_Nav_Bar_new.swf”, 1);
Another key element to this movie is a Movie Clip called Service Text Pulldown, located on the Services layer. This Movie Clip is used to select and load content movies into the Container Movie Clip. This Clip contains several actions that illustrate the functionality. servicelist = new Array(); servicelist = [“Service 1”, “Service 2”, “Service 3”, ➥“Service 4”];
This frame defines a new array, which is used to describe the Services displayed in the pull-down menu. We’ll cover modifying this array in the Customization section of the chapter. In the top of the Actions panel for the second frame, you will see this code: if (service_text eq _root.services.servicelist[0]) { setProperty (_root.container, _x, “496.9”); setProperty (_root.container, _y, “80”); loadMovie (“movie_1.swf”, _root.container); loadMovie (“service_1.swf”, _root.print_clip_01); loadMovie (“list_1.swf”, _root.print_clip_02);
The above code is responsible for loading in the external service movies. Based on the service chosen by the viewer from the dropdown menu, a corresponding movie is loaded into the Container
Chapter 8
Set Up a Services Catalog
Movie Clip located on the Container layer of the main Timeline. The script then loads service_1.swf and list_1.swf into two print clips, which are used to store the printable data. This data is not displayed on the Stage, but rather accessed from the Print Brochure and Print Price List buttons. A nearly identical set of code is located in an else if statement for each service available in the drop-down menu. If you plan on incorporating more than four services, you will need to add an additional else if statement to the code in this frame. On the third and final frame of the Service Text Pulldown Movie Clip, the Column Movie Clip is placed on the Stage. This Clip is responsible for dynamically creating the buttons that correspond with the service array created on the first frame. Using the attachMovie command, the Service_Links Movie Clip is placed and aligned on the Stage. This Clip is given the name service in its Linkage properties, as the attachMovie command uses this Linkage property name to target the specific symbol to attach. for (i=0; i< _parent.serviceList.length; i++) { _root.clipSort.attachMovie(“service”, “row” add Number(i+1), ➥Number(i+1)); name = “row” add Number(i+1); if (name ne “row1”) { setProperty (_root.clipSort add “/row” add Number(i+1), _y, ➥(getProperty(_root.clipSort add “/row” add i, _y)+ ➥getProperty(_root.clipSort add “/row” add i, _height))-1); } set (_root.clipSort add “/row” add Number(i+1) add “/:text”, ➥_parent.serviceList[i]); }
The movie also contains a print feature that is found on the Print Brochure button and the Print Price List button. Based on the service selected from the drop-down menu, these buttons use the printing capabilities of Flash to print out the material. You can take a quick look at the code attached to the Print Brochure button to see how it works: on (release) { if (_root.services.service_text eq ➥_root.services.servicelist[0]) { printAsBitmap (_root.print_clip_01, “bframe”);
211
212
Flash Site Workshop
} else if (_root.services.service_text eq _root. ➥services.servicelist[1]) { printAsBitmap (_root.print_clip_01, “bframe”); } else if (_root.services.service_text eq _root. ➥services.servicelist[2]) { printAsBitmap (_root.print_clip_01, “bframe”); } else if (_root.services.service_text eq _root. ➥services.servicelist[3]) { printAsBitmap (_root.print_clip_01, “bframe”); } }
This code targets the print_clip_01 Movie Clip (whose instance name is exactly the same as its symbol name). This Clip acts as a Container Clip which holds the printable brochures for each service. These printable brochures reside in the .swfs that are loaded into this Clip when a service is selected. A frame in these movies is labeled #p which defines it as the printable frame. The Services Catalog movie also contains a form that the user can use to submit a service request. This form allows the user to input their personal information, and elect to receive the company newsletter. Once submitted, this information is passed to emailer.asp on the server which then forwards the info to the specified e-mail that was set in the frame 1 action of the movie. Finally, there are links located at the bottom of the movie labeled “Check out Our Video Presentation” and “Launch Real Player.” These links load corresponding movies that match the selected service. The Video Presentation button launches a pop-up window with the HTML page that corresponds with the selected service. This page contains a QuickTime movie. The Real Player button launches a RealVideo version of the movie. If you do not have videos that support your services, you can simply remove these buttons from the Stage.
Customize the Service Catalog Movie Although this particular movie is static, you can animate elements easily by inserting frames at the beginning of the movie and then tweening Movie Clips, buttons and graphic symbols into place.
Chapter 8
Set Up a Services Catalog
213
Movie Background Elements Figure 8.2 Blue, Green, and Temporary Background elements.
The Blue, Green, and Temporary Background symbols are located in the BACKGROUNDS folder of the Library, and reside on the Temp Background layer of the main Timeline. These symbols are used throughout the book, and you can easily copy/paste an earlier modification into this movie for consistency. I only modified the Temporary Background, and deleted the Blue and Green Backgrounds. For the Temporary Background symbol, I made its original layer a Guide layer and imported a new grid graphic I created onto a new layer. I should also note that I modified the Movie properties by changing the background color of the movie to a gray, which matched my design.
Horizontal Bar Animation The Horizontal Bar Animation, located in the ANIMATIONS folder of the Library, is a Movie Clip that is also located on the Temp Background layer of the movie. For my redesign, I did not feel that the animation added value, and might in fact distract the user from the content. You can modify this Clip by altering the animation that appears on the Horizontal Bars layer of the Clip. You could also modify the Horizontal Bars graphic symbol, which is used to match your own design.
Figure 8.3 Horizontal Bars Animation Timeline.
214
Flash Site Workshop
Company Name Figure 8.4 Company Name Button located on Company Name Button layer.
The Company Name button is located on the Company Name layer and in the BUTTONS folder of the Library. You may have already modified this symbol in another movie. In that case, you can simply copy that modified symbol into the Library of this movie and then swap symbols to replace the old one. To customize this for the first time, you can edit the text, font, color, and size to match your corporate identity. You could also add a new layer in the master symbol, copy your company logo into the new layer, and delete the Text layer. It’s important not to delete the instance of Company Name on the Stage, however, because attached to it is the following code: // Replace the URL with the proper link to your company’s ➥home page. on (release) { getURL (“http://www.homepage.html”, “_self”); }
You should replace the URL with the address of your home page so the user can click this to return to the home page. To modify this symbol, I simply selected the text in both the Up and Over states and typed the name of my fictitious company, “FlashDev.” I then duplicated this text on a layer created above, changed the color, and offset it to create the shadow effect we’ve been using throughout the design. To complement the text, a new shape was created and placed on both of these Text layers. I also scaled the text up in the Over state to 120% of it’s current size. This provides visual feedback to the user when they roll over it. Finally, I needed to alter the Clip’s position on the Stage to reflect the redesign.
Section Outlines The section outlines are created via the Boxes-Grouped Movie Clip. This Clip is located on the Boxes layer of the main Timeline, and can be accessed in the MOVIE CLIPS folder of the Library. The BoxesGrouped Movie Clip contains three grouped-together instances of the Recessed Box symbol. If you double-click twice on any box within the master symbol, you’ll be editing the Recessed Box symbol directly. Any change you make to one of these boxes will be reflected in the other two. You might want to change the color or width of the
Chapter 8
Set Up a Services Catalog
215
lines in the Stroke panel, or alter the shape of the boxes entirely. You could even add a fill if it fits your overall design. If you’d like each box to look different from the others, you can modify its color properties quickly and easily through the Advanced section of the Effect panel. Figure 8.5 Boxes-Grouped Movie Clip used to outline key area of movie.
Since my redesign included a revised layout of the elements, this Clip was no longer necessary.
Service Selector The Service Text Pulldown Movie Clip is located on the Services layer and found in the BUTTONS folder of the Library. This Clip enables the user to select the service about which they’d like to see more information. It also loads the correct .swf files into the Container Movie Clip as well as the two printable Movie Clips. Figure 8.6 Timeline of Service Text Pulldown Movie Clip located in the Services layer.
The first thing I modified in this Clip was the frame action on frame 1. Here, an array is set which holds the data for the different services. Take a look at the following code:
216
Flash Site Workshop
servicelist = new Array(); servicelist = [“Service 1”, “Service 2”, “Service 3”, ➥“Service 4”];
Here you can see how the services are named. You should go into this Frame action in the Actions panel and replace the existing strings (for instance, “Service 1”) to create your own custom services. You are not limited to the four default values that are stored here. You can easily add more services by modifying the second line of code and inserting your additional services in quotations, preceded by a comma. If you want to use fewer services, simply delete the strings from the array. Note that if you choose to add services to this array, you will also need to add the corresponding “movie,” “list,” and “service” .swf files. You’ll also need to add the appropriate if statements to the scripts attached to the Service Text Pulldown, Print Brochure and Print Price List buttons. In this Movie Clip, there is also a Column Movie Clip placed on the third frame. This is an empty Clip that is used to dynamically build the service buttons based on the above mentioned array. You can then alter the look of the drop-down menu. For my redesign, I began by selecting the text on the Text layer and modifying its color to white in the Character panel. I then made the Box and Dotted Line layers Guide layers so they wouldn’t export, and imported a custom graphic that matched my design on a new layer. Once this was done, I modified the Down button that is used to trigger the drop-down menu. This button symbol is located in the BUTTONS folder of the Library. I double-clicked this button from the Library, made the existing layer a Guide layer, and imported custom graphics into the Up and Over states of the button. I also increased the brightness on the Scroll Engine Movie Clip, which is on the Scroll Control layer of the Service Text Pulldown, making it white to match the design. The Scroll Engine Movie Clip controls the scrolling of the service options in the pulldown. It is not necessary to alter the script for this Clip, but if you want you can alter the speed of the scrolling in the objUp and objDown Clips located inside of the Scroll Engine Movie Clip.
Chapter 8
217
Set Up a Services Catalog
Pull-Down Buttons The Bar Button symbol, located in the BUTTONS folder of the Library, is used in all drop-down menus throughout the movie. This button is placed inside of the Service_Links, Bus_Links, Country_Links, and States_Links Movie Clips. All of these Movie Clips are placed in the movie dynamically using the attachMovie command.
Figure 8.7 The Bar Button symbol.
Once you alter the look and feel of the Bar Button symbol, all dropdown menus will change. Since I wanted a look and feel that was consistent across the entire movie, I simply needed to alter this button symbol. I modified the color of the button by selecting the shape in the Up state and using the Bucket tool to make it gray. I then selected the same shape in the Over state and bucketed it green. This will give the button a rollover effect in every instance that it is used. You could also add Movie Clip animation to these frames, if you want a more dynamic rollover effect.
Print Brochure This button is located on the Services Layer of the main Timeline, and found in the BUTTONS folder of the Library. To modify the look of this button, you can either edit the symbol directly, or use the Instance panel to swap symbols. If you delete and replace this button, you will lose the script attached to the button instance. The 3-D effect of this button is created by filled rectangles directly on the Stage. The text is a plain static text field. You can change its font, color, or size—you can even change its label. I modified this button directly by inserting a new layer and importing two graphics: one for the Up state, and one for the Down state. Once these images were imported, I made the original layer a Guide layer so that it would not be visible on output. Print Clips There are two Movie Clips used for printing in this movie: print_clip_01 and print_clip_02. A .swf file loads into print_clip_01, and contains the brochure information to be printed. A .swf file loads into print_clip_02, and contains price list information.
Figure 8.8 Print Brochure button located on Services Layer.
218
Flash Site Workshop
The content for these print Clips are loaded in from external .swf files (service and list) when a service has been selected. These files will need to be modified separately from this master movie. Since these movies are loaded dynamically based on the serviceList array, you need to make sure that your .swf files match the number of services in the array, and that the order of the array is the same as the order of the files you are including for printing. Service_1.swf Let’s look at one of the external movies that will be printed as a brochure. Open up service_1.fla in the Flash application. The content in this movie is located on the second frame, and is given the label name #p. This defines which frame will be printed by Flash. Actions are set on the print buttons to allow for all contents of the targeted frame to be printed. You will most likely want to align your elements to the top-left of the Stage to correspond with the top-left corner of a printed page. Figure 8.9 Service_1.swf main Timeline.
When modifying this file, I simply inserted a Text layer that I then used to store the supporting copy I wanted to have printed. You can import any type of element into this frame. Keep in mind that text and vector elements will print at high quality, but graphics (unless imported at print resolution) will print at standard screen resolution; be sure to import high quality images if you desire a high quality print output. It’s important to note that if you are using bitmap graphics instead of vector art, your file size will be considerably larger. Since this movie is automatically loaded when a service is selected so it is available to print, it may take some time over slower connections if you choose to use bitmap art. You are also not limited at all to the size or dimensions of what it is you are wanting to print. You can easily modify the original .fla for this brochure to have the same dimensions as a printed page, for instance. When you modify the content of these external movies, be sure to overwrite the original .swf files and place them in the same directory as the main Flash movie.
Chapter 8
219
Set Up a Services Catalog
Print Price List The Print Price List button is located in the BUTTONS folder of the Library, and placed on the Services layer of the main Timeline. This button is constructed exactly like the Print Brochure button. You can modify the look of the button, but don’t delete it or you’ll lose the code that makes it print. This button prints the .swf files named list_1.swf, list_2.swf, list_3.swf, or list_4.swf, depending on which option the user selects from the drop-down menu. You’ll have to modify these movies the same way you modified the Service movies.
Figure 8.10 Print Price List button located on Services layer.
Like the Print Brochure button, I made the original layer a Guide layer and imported graphics on a new layer above. These two new graphics were placed on the Up and Down states of the button.
Services Body Copy The introductory text at the top right of the movie is located in the Box 1 Text MC. This Movie Clip contains two symbols grouped together: Services Title Text, and Brief Intro Of Company Text. You can edit this text to serve as an intro to this page. You can also change the font, color, or size through the Character panel to match your site identity.
Figure 8.11 Box 1 Text MC located on Services layer.
I modified both of these symbols in the exact same way. These symbols are located in the TEXT folder of the Library. I went into each symbol and duplicated the current layer. Once on top, I modified the Character options for the text and made the text white. This made the top layer of text white and the bottom layer of text the original black. When I completed this, I offset the top layer to create a shadow-type effect. Finally, I imported a custom graphic into a newly created layer. This layer was moved to the bottom and the graphic was moved on Stage to be beneath the Service Title Text.
Video Section Outline Figure 8.12 Blue Empty Box symbol located on Temp Background layer.
220
Flash Site Workshop
The Blue Empty Box symbol is used to outline the video links. It’s found on the Temp Background layer of the movie as well as in the STATIC GRAPHICS folder of the Library. You can change the color or width of the line in the Stroke panel, or add a fill. I found this symbol to be extraneous, so I deleted its instance for my redesign. This symbol is also used in the Launch Real Player button; if you modify it here, those changes will be seen there as well.
Check out Our Web Presentation Figure 8.13 Check Out Presentation button located on Check Out Video layer.
This button is located on the Check Out Video layer and can be accessed directly from the BUTTONS folder of the Library. The following code is attached to this button: on (press) { if (_root.services.service_text eq ➥_root.services.servicelist[0]) { getURL (“javascript:openNewWindow(‘quicktime_1.htm’, ➥’thewin’,’height=260,width=340,toolbar=no,scrollbars=no’)”); } else if (_root.services.service_text eq _root. ➥services.servicelist[1]) { getURL (“javascript:openNewWindow(‘quicktime_2.htm’, ➥’thewin’,’height=260,width=340,toolbar=no,scrollbars=no’)”); } else if (_root.services.service_text eq _root. ➥services.servicelist[2]) { getURL (“javascript:openNewWindow(‘quicktime_3.htm’, ➥’thewin’,’height=260,width=340,toolbar=no,scrollbars=no’)”); } else if (_root.services.service_text eq _root. ➥services.servicelist[3]) { getURL (“javascript:openNewWindow(‘quicktime_4.htm’, ➥’thewin’,’height=260,width=340,toolbar=no,scrollbars=no’)”); } }
This code is used to launch a pop-up HTML window using the JavaScript function openWindow, and loads the corresponding quicktime_1.htm file. These .htm files are named sequentially, corresponding
Chapter 8
Set Up a Services Catalog
221
with the servicelist array. Each .htm page also loads in a corresponding .mov file. You’ll want to make sure that you replace or overwrite the QuickTime files with your own, and if they are of different size, modify the height and width arguments in the code shown above. If you open quicktime_1.htm in a text editor, you’ll see the following code: <embed height=240 src=qt.mov width=320 border=”0” bgcolor=”FFFFFF” target=”myself” controller=”false” name=”qtmovie” vspace=”0” hspace=”0”>
You should make sure the line src=qt.mov points to your QuickTime video. You can also edit the background color and other options here. Don’t change the name of the HTML file though, because that’s what Flash uses to open the window. This button wasn’t changed too much in the redesign. I duplicated the Text layer and changed the color to white, as we did earlier. I then offset the top layer to give the text some depth. You could also play with the Character panel and modify font, size, and color properties.
Launch Real Player The Launch Real Player button, located on the Check Out Video layer, is a button symbol found in the BUTTONS folder of the Library. This button is responsible for loading RealVideo files that correlate with the selected service. You’ll need to ensure that the Service names on the button action match those set in the initial servicelist array. on (press) { if (_root.services.service_text eq ➥_root.services.servicelist[0]) { getURL (“livefeed_1.ram”); } else if (_root.services.service_text eq ➥_root.services.servicelist[1]) { getURL (“livefeed_2.ram”); } else if (_root.services.service_text eq ➥_root.services.servicelist[2]) { getURL (“livefeed_3.ram”);
Figure 8.14 Launch Real Player button on the Check Out Video layer.
222
Flash Site Workshop
} else if (_root.services.service_text eq _root. ➥services.servicelist[3]) { getURL (“livefeed_4.ram”); } }
livefeed_1.ram is the file that loads when the first service is selected. Like the QuickTime movies, you will need to replace these RealVideo files with ones of your own. Be sure that the file references in the quotation marks match the name of your files. You can also opt to delete this button, if there are no corresponding RealVideo files; likewise for the above mentioned QuickTime links. I made the original layer a Guide layer in this redesign, which allowed me to import my own custom graphics. I imported two graphics: one for the Up state and one for the Down state. You might consider extending the interactivity of the buttons by placing animated Movie Clips in these states.
Video Player Plug-Ins Figure 8.15 QuickTime Button and Real Player Button located on Quick/Real layer.
These are symbols that you most likely will not alter. They simply link to QuickTime and RealVideo Web sites so your users can download the latest player. I left them as is, and simply repositioned them in the redesign layout. If you do not have supporting movies, you can remove these Clips completely.
Services Request Form Title Figure 8.16 The Services Request Form title.
The Services Request Form Title Text is a graphic symbol located on the Services Request Form layer and found in the STATIC GRAPHICS folder of the Library. This symbol is used to head the form. In my redesign, I made a new layer and imported a custom graphic into it. I placed this layer below the layer containing the text and then duplicated the text layer. With this duplicated layer on top, I changed the color to white in the Character panel and offset it against the layer below to create some depth.
Services Request Form Input Fields Figure 8.17 Text Input located on Services Request Form layer.
The input fields that your user can fill out are standard one-line input text fields, associated with the variables name, email, and company, respectively. These variables will be sent to the emailer.asp file so
Chapter 8
Set Up a Services Catalog
223
they can be placed in the e-mail sent to you. The text labels next to these fields are static text fields, and can be modified accordingly. Below the input text fields is a graphic symbol called Text Input. This symbol is located on the Services Request Form layer, and is stored in the STATIC GRAPHICS folder of the Library. This symbol resembles standard form fields used in HTML pages; however, I wanted a more customized look for my fields. To do this, I needed to import our custom graphic on a newly created layer in the Text Input symbol. Once this graphic was imported and aligned, I made the original layer a Guide layer.
Type of Business PullDown Figure 8.18 Type of Business Pulldown MC Timeline.
The Type of Business Pulldown Movie Clip, located on the Business Name layer, can be found in the BUTTONS folder of the Library. This Clip is built similar to the Service Pulldown covered earlier in this chapter. Before I modified the look and feel of the Movie Clip, I first modified the array that is used to display the available options for the dropdown menu. Take a look at this code: bizlist = new Array(); bizlist = [“Business name 1”, “Business name 2”, “Business ➥name 3”, “Business name 4”];
This code is found on the Actions layer of the Movie Clip on frame 1. Notice the bizlist elements. You should replace these with the options you want to have available to the user.
224
Flash Site Workshop
Like the servicelist array covered earlier in the chapter, you can easily add or delete items from this array. These items are scrolled in the pulldown menu, so you can add as many new types of businesses as you like. When modifying the look, I started by making the Box and Dotted Line layers Guide layers because they did not support my design. I also imported my custom pull-down graphic on a layer created above. I had already changed the Down arrow button earlier in the movie (in the Services Pulldown), thus that change is reflected here. Like the Services pull-down, I wanted the scrolling arrows to be white. I selected the arrows from the Scroll Control layer and increased their brightness to 100% in the Effect panel. Finally, I switched the “Type of Business” text found on the Text layer to white text. With the black text on the layer below, I simply offset the x and y properties of the top layer to create the shadow effect I have used throughout the movie. Feel free to be creative when modifying your own buttons.
State PullDown Figure 8.19 State Pulldown Movie Clip.
The State Pulldown Movie Clip is located on the State layer of the movie and can be also found in the BUTTONS folder of the Library. This Movie Clip is built the same as the preceding pull-down menus. The current array includes the names of all 50 states in the U.S. as well as the District of Columbia. If you want to change this array to reflect geographical regions in another country, or add or delete states, go into the Actions panel for frame 2 of this MC and edit the array items. The Down button already reflects prior changes, so I only needed to change the Text and the Scroll Engine Movie Clip. I modified the text on the Text layer, and made the text white to complement the design. I then turned the brightness of the Scroll Engine Movie Clip, located on the Scroll Control layer, to 100% to match the changes I made in previous pull-down menus. The pull-down button elements will also be the same as previous pull-downs because they all incorporate the Bar button that was modified in the beginning of this chapter. Finally, I made the Interface layer a Guide layer and then imported my custom pull-down graphic onto a new layer created above.
Set Up a Services Catalog
225
The Country Pulldown Movie Clip, like the State Pulldown, is located in the BUTTONS folder of the Library, and can be found on the Country layer of the movie.
Figure 8.20 Country Pulldown Movie Clip.
Chapter 8
Country Pulldown
If for some reason, you need to modify the current list, you can do so by editing the sortlist array located on frame 2 of the Actions layer of the Country Pulldown Movie Clip. This Movie Clip was altered in the same way as all other pull-down menus.
Radio Button Figure 8.21 Radio Button MC.
The Radio Button Movie Clip, located on the Services Request Form layer, and found in the MOVIE CLIPS folder of the Library, is used to select the newsletter preference. I don’t recommend modifying this symbol, because it accurately represents the radio buttons used on standard Web forms.
Send Newsletter Text The Send Newsletter text is located on the Services Request Form layer, and can be found in the TEXT folder of the Library. You should modify this text so it says what you want it to say. Also, the look should be changed to match the other text on your site. For my modification I simply modified the text on the Text layer and then duplicated it onto a layer above. Once duplicated, I changed the text on the top layer to white in the Character panel, and offset it by several pixels to create the shadow effect with the layer below.
Figure 8.22 Send Newsletter Text on Services Request Form layer.
226
Flash Site Workshop
Service Request Form Send Figure 8.23 Arrow button located on Send layer.
To send the Services Request form, the user clicks the Arrow Button symbol. The Arrow button is located on the Services Request Form layer of the movie and in the BUTTONS folder of the Library. This is an important button, as it is responsible for validating the user’s entries and submitting the information via e-mail. Let’s take a look at the code: on (release) { if ((_root.name ne “”) && (_root.company ne “”) && ➥(_root.email ne “”) && (_root.topic_clip.biz_text ne “”) && (_root.state. ➥main ne “”) && (_root.country.main ne “”)) { _root.complete.gotoAndStop(1); _root.play(); strBody = “Name:” + “ “ + Name + newline + ➥“Company:” + “ “ + Company + newline + “Email:” + “ “ + Email + newline + “Business:” + “ ➥“ + topic_clip.biz_text + newline + “State:” + “ “ + state.main + newline + “Country:” + ➥“ “ + country.main + newline + “Send Email:” + “ “ + SendMail + newline + “Service:” + “ “ + services.service_text loadVariablesNum (“http://yourServer/emailer.asp”, ➥0, “POST”); } else { _root.complete.gotoAndStop(2); } }
The first four lines of code check to see that the fields have been entered. If they are empty, an action targets the Please Complete Movie Clip which contains a text message alerting the user to complete all fields before submitting. The rest of the code creates the parameters for the e-mail contents based on the information in the Flash movie. It is important to note the line right above } else {. This piece of code sends this information to the emailer.asp page which is included with this movie. You will need to modify this location to reflect the address of your server. The interface of this button should match the rest of your site identity. I modified the look of the button by altering both the Text and
Chapter 8
227
Set Up a Services Catalog
Button layers. I first made the Button layer a Guide layer, and imported custom graphics into a new layer. I placed one graphic in the Up state, and the other graphic on the Over state. Finally, I modified the text to white on the Text layer and then centered it over the newly imported graphics.
Services Header The Services Text symbol, located on the Services layer and stored in the TEXT folder of the Library, contains a static text field. You can change the contents of this field, and alter its font, size, and color to match your site identity.
Figure 8.24 Services Text graphic symbol located on Services layer.
I deleted this symbol from the Stage in my redesign. I found the symbol redundant, considering I already had a Services header in the Box 1 Text Movie Clip.
Movie_1.swf This external movie is loaded when the first service is selected from the drop-down menu in the main Services Catalog movie. These service movies are loaded into the Container Movie Clip, one for each corresponding option in the drop-down menu. These movies contain no interactivity, and are used for content display purposes only. The files movie_2, movie_3, and movie_4 are built identically, so we will stick to movie_1 when covering how the movies are customized. Figure 8.25 Movie_1.fla.
228
Flash Site Workshop
Open movie_1.fla in the Flash application and take a look at the Timeline. This movie can be set up any way you like. It can even be a whole mini-site unto itself! You can add interactivity inside this movie, or use it to simply display a product or service image. There is no need to follow the example file, and you should build this file in the manner that best supports your content. You need to know that each movie corresponds with the services that you create in the servicelist array, and is loaded in when the service is selected by the user. For this reason, you should make sure your movies are called movie_1.swf, movie_2.swf, movie_3.swf, and movie_4.swf. As mentioned earlier, it is important that these movies match the number of services in the serviceList array. If you add movies to correspond with additional services, you must also add code to reference these additional movies on the Service Text Pulldown as well as the two print buttons. These external Flash movies must also reside in the same directory as the main Flash file, so if you create additional files make sure to place them in this directory.
The Customized Movie Here is my customized Services Catalog movie. Figure 8.26
CHAPTER
9
Generate Dynamic Content: News and Reviews
1 Temporary Background
7 Drop-Down Clips
2 Blue Background
8 Clear Button
3 News and Reviews
9 Submit Button
4 Company Name Button
10 Message Movie Clip
5 Recessed Box
11 Summary Movie Clip
6 Static Text Fields
Chapter 9
Generate Dynamic Content: News and Reviews
What to Expect from This Chapter This chapter is composed of a single movie file with a single scene. The News and Reviews section of the site is mainly generated dynamically from the back-end database and .xml coding. Scripting in the News and Reviews movie passes the queries back to the database and retrieves information accordingly. The front end enables the user to quickly choose whether they want to search the archive by author, date, or topic. All of the information is stored in and called from the main back end database. This means that the information is kept up to date at all times without having to change the actual Flash movie file. In the next section we will look at where the information is stored in the database, and how it gets delivered to the user via an XML object. As with all of the other chapters in the book, you should customize the basic design of the movie to represent your site. Notice that the clean layout of the area makes it user friendly and easy to navigate. There is no need to add text instructions onto the page; the page is self-explanatory, just by looking. For my customization, I’m working on the Caribbean Calabash site— an international site dealing with historical memories of how herbs have been used to promote recovery from many ailments. There are many published and archived references to this topic, and having a News and Reviews section allows the distribution of this information to interested people worldwide. The next section will walk through the structure of the Flash file. We will look at customizing all of the components individually in a few moments, but for now let’s look at this chapter as a whole to see what we have and how it comes together.
How the News and Reviews Movie Works Let’s start by looking at the sequence of events that occur when the movie is first loaded. As this section of the site is mainly constructed dynamically, there is not a huge amount visible on the Stage when simply looking at the .fla file. The clever stuff happens only when the site is running from a properly-configured server. Copy the News_Reviews.fla file from the CH09-Files/CH09-Originals folder on the CD to your working
231
232
Flash Site Workshop
folder on the hard drive. Open the file in Flash and Test Movie. If you don’t have your database configured before playing, the buttons won’t work. Refer below and to Chapter 13, “Site Publishing Considerations,” for more information about the database. When you test the movie, the graphic interface elements all animate into place. The Company Name button slides into view above the left box. As in other chapters, this needs to be linked back to the company home page. The News and Reviews text fades into its final position directly below the left box. The recessed area inside the left box seems to be the center of activity at this point because it acts as the container for the drop-down search options that are the next elements to load. Each drop-down search option has a text description above it, ensuring that the visitor has no doubt how each is to be used. Once the search options are in place, a second instance of the Recessed Box loads at the top of the blue background. This is where the initial search results will appear as clickable links in summary form. A scroll bar fades in at the right of the box to allow visitors to scroll through results as required. A third instance of the Recessed Box then appears at the bottom of the blue background. This is where the detailed search results will be displayed, once a visitor has selected the item or article that interests them. A scroll bar then fades in on the right to enable visitors to scroll through the entire article when size requires it. Informative text saying Search Results and Click to Read loads to inform users what they need to do. That’s it—187 frames later and the survey is ready to roll. As I said, it looks straightforward so far. Now let’s look at how it actually works. When a search option is selected from one of the drop-down menus on the left, a list of results appears as hyperlinks in the top right box. This can scroll, if required. When any link is clicked, the actual result appears in the lower right box, which again will scroll as required to show the complete article. Clicking a different search option regenerates the information and immediately displays a new set of results summaries in the top right box. There are a couple of reasons to use drop-down search options rather than a text-input search field. First, the search options make the
Chapter 9
Generate Dynamic Content: News and Reviews
criteria for searching obvious. Author, subject, and date cover the most likely areas that someone will want to use for finding a news article or review. On a site where there are many authors and subjects from which to choose, the date option will be a huge bonus, enabling the user to simply select a more recent date than the ones they have previously seen. Also, using simple drop-down search options enables the user to select and click what they want. The database discussed below uses a simple table structure that keeps the information easy to manage. The back end coding, although not for the faint-hearted, is clearly commented to make customizing it as simple a process as possible. Unless you need to make major changes in the way the movie file works and integrates with the database, you should be able to follow the comments to make the changes that you need. When there is reason for caution in making changes, this again is well-documented for you in the code comments, which you can see in the Actions panel.
Flash Actions Before you can see the functionality of this section, you need to set the path to your server. This is done directly into the Actions panel; the comments clearly tell you how to do this. The following lines of code in frame 185 define the root to your server, and must be edited to point to the server on which your files and database will be hosted: _root.yourServer = “”; rscXML.load(_root.yourServer add “reviewSearchCriteria.asp”);
Insert the complete path to your server and the reviewSearchCriteria.asp file, including a final /. This final / is required because the file name is added immediately to the end of the command. Depending on the hosting company you use, the database may need to be stored in a special area. If you are in any doubt as to the path or location, check with your hosting company first. The Actions layer on the Timeline for this movie is important to understanding how the movie works. As early as frame 1, we encounter an action and a comment from the coders. The comment is a warning for anyone using Netscape 6.0 and above to make sure
233
234
Flash Site Workshop
that the .swf file is placed inside an HTML document. This is a known bug with Netscape and Flash in the way that Netscape interprets Flash files. The actions for the frame are as follows: _root.closer1 = null; _root.closer2 = null; _root.closer3 = null;
Figure 9.1 The instructions for setting the path to your server.
This script enables the menus to close when the user clicks away from the drop-down menus. Closer 1 is the first drop-down menu and so on. In frame 84, the navigation bar used throughout the site is loaded. Frame 185 is possibly the most important in terms of the actions contained. There are three specific sections to the code in this frame; we will look at them in the order they appear. The following section of code relates to the actions of the Clear button. It resets all fields and variables to be empty and clear all results from the screen. This code will not need to be edited unless you are using your own database or changing the field names in the one supplied.
Chapter 9
Generate Dynamic Content: News and Reviews
_root.summary.title = “”; _root.summary.article = “”; _root.message.gotoAndStop(1); _root.message.none = “” _root.topic = “”; _root.topicID = “”; _root.authors = “”; _root.authorsID = “”; _root.date = “”;
The next code snippet loads the XML document into a new XML object called rscXML, and declares a function called populateTopics. rscXML = new XML; rscXML.onLoad = populateTopics;
Also in this frame is the section you saw earlier, where you set the root to your server. This must be done for the file to work correctly. Now that the server has been set, the populateTopics function can be defined. This function loops through the XML and populates the rscXML object via the reviewSearchCriteria.asp file. function populateTopics() {
rscXML = this.firstChild; topList = new Array; trace(rscXML.nodeName.toLowerCase()); if (rscXML.nodeName.toLowerCase() == ➥“reviewsearchcriteria”) { topList = rscXML.childNodes; } } play();
Finally, frame 188 has a stop command in place.
Back End Files The back end database uses the following three tables in this section. If you are working through the book in chapter order, you will
235
236
Flash Site Workshop
already have come across the MySQL database by now in Chapter 6, “Create the Online Store and Cart.” If you haven’t read Chapter 6 yet, don’t worry. We will now look at the database tables and fields used in this chapter. The database used to store the news and reviews, like all of the other database components in the book, is stored in a MySQL database which needs to reside on the server, as outlined above. The required information is pulled out in XML form and passed into the Flash movie via the .asp scripts provided. It’s fine to use your own database if you have the experience with .asp and .xml to do so. Obviously all of the scripting in the chapter is designed to integrate with the supplied database, so you will need to update all of the scripts to reference your table and field names instead of ours. Below are the tables and what they contain: Newstopic,
which contains the following information:
• topicID • topicName NewsReview,
which contains the following information:
• reviewID • topicID • authorId • reviewDate • review • title NewsAuthor,
which contains the following information:
• authorId • firstname • lastname • email
Chapter 9
Generate Dynamic Content: News and Reviews
These tables are accessed using the following two .asp files. reviewSearchCriteria.asp
The reviewSearchCriteria.asp file retrieves the information from the database in each of the three possible search categories, and then defines the .xml document to write back to the file. Note that if you choose to use your own database with different field or table names, you MUST be careful to make sure that any changes are also made in the .asp file as well. reviewSearchResults.asp
The reviewSearchResults.asp document receives and processes the results of a search based on the selections made by the user before the Submit button is clicked. Using standard coding, the file first checks which of the search options have been selected in the movie and then passes the query back to the database. The file then loops through the records displaying all records, which match the search criteria to the visitor. The file then checks if there are any results and then writes them back via the XML object. These are passed back to the .fla file as a hyperlink that appears in the top right of the screen. When one of these hyperlinks is clicked, the review.asp file is activated. Review.asp
The review.asp file is called in when a user clicks one of the displayed summary results that they would like to see in detail. This file pulls the entire contents of the review field from the newsreview table and displays it for the viewer to see.
Customize the News and Reviews Movie Because most of the hard work for this chapter goes on behind the scenes and works well without too much intervention, the changes you make here will be mainly cosmetic. I imagine that by this stage of the book you will have already completed customizing the generic elements throughout your site. The navigation bar, for instance, is covered in Chapter 3, “Design the Home Page and Site Identity,” so we won’t talk about it. If you haven’t already customized your navigation bar, refer to Chapter 3.
237
238
Flash Site Workshop
Temporary Background The Temporary Background symbol appears immediately when the file is loaded. You can simply edit the Temporary Background symbol to add images or other static elements. As it is static at all times, make sure that anything you add will not affect the rest of the visuals as they load. The background can be renamed to suit your naming conventions as required. For my customization, I added a site logo and title to this background. This gives a nice effect when the two instances of the Blue Background symbol slide over it. By positioning the Caribbean Calabash text and logo where I did, they will appear to fade as other elements load. The image of a calabash is positioned to be in a blank area that will not be affected by any other element, and the changes give a far more interesting opening than the plain screen. I think that the customization works well in this case, partly because of the colors involved—although it may not work in all cases. Figure 9.2 The Temporary Background.
Blue Background There are two instances of the Blue Background symbol in this movie. The left box referred to in the text above is simply an instance of the Blue Background symbol that has been transformed in size. All changes to the fill, shape, or color of the Blue Background symbol will be reflected in both instances. To match my Caribbean Calabash site, I changed the overall color to match the site overview. I chose to change the blue background to a more appropriate color, and used the Fill panel to add a gradient fill.
Chapter 9
239
Generate Dynamic Content: News and Reviews
The gradient fill enhances the effect of elements fading into view. Changing the shape to a rounded rectangle is another option that can also add interest to your site. Figure 9.3 The Blue Background.
News and Reviews The News&Reviews Text symbol is the only plain text symbol in the movie and is located in the TEXT folder of the Library. It’s simply a graphic symbol that only contains a static text field. You could actually change the text itself, if you feel that News and Reviews is not totally appropriate to your site. To change the look of it, simply edit the master symbol and alter the font, size, or color to match your site.
Figure 9.4 The News&Reviews Text symbol.
When I customized it, I changed the text symbol to match the colors and fonts of the project logo by editing the master symbol. Editing the master symbol ensures that both keyframes for the symbol are updated. I chose to add a black copy of the text behind the white and then offset it slightly to give the illusion of a shadow effect.
Company Name If you’ve already customized other movies in this book, you know that this symbol has already been used many times and is a constant link back to the company home page. You may want to open a previously customized movie as a Library and use the Company Name button you’ve already edited. Be aware that the Company Name button is actually two symbols: a graphic symbol called Company Name and a button symbol called Company Name Button, which appears in frame 185. The reason for this is so the viewer won’t be able to click the
Figure 9.5 The Company Name button.
240
NOTE: Having the lighter color at the top left will create an illusion of an embossed box, rather than a recessed one. Feel free to see which best suits the look and feel of your site.
Flash Site Workshop
button until the movie is completely loaded. The Company Name Button symbol uses the Company Name graphic symbol as its Up and Over states, so any changes you make in the Company Name graphic symbol will be automatically updated in the button. Be sure to update the link in the Actions panel for the button, if it has not yet been done. If you don’t insert the link, it will result in the button doing nothing! on (release) { }
You need to add a getUrl function into the script above, pointing to the home page of your site. The amended script should look as follows on (release) { getURL (“http://www.yoursite.com”, “_self”); }
I changed the text to match the appropriate company name, and added a shadow effect to the original symbol to match the overall feel of the Caribbean Calabash site. This was done the same way as the News and Reviews text above. You could also change the button to include a company logo instead of being text based.
Recessed Box Exactly as the name implies, the Recessed Box gives the illusion of depth when displayed on top of the background images. Using two contrasting colors for the lines of the box creates that illusion. The symbol is located in the STATIC Graphics folder of the Library and first fades into view in frame 97. Once on the Stage, the symbol is present throughout the movie. For my modification, I edited the symbol and used the same two colors I used in the gradient fill for the blue background: green and yellow. Figure 9.6 The Recessed Box symbol.
Now that all of the static elements are onscreen, let’s look at the dynamic elements. We will address these in the order they appear on the Stage because this is the order in which you will see them.
Chapter 9
241
Generate Dynamic Content: News and Reviews
Static Text Fields The Text layer contains the text labels associated with the search options. The text on this layer is simply typed onto the Stage, rather than being individual symbols. The layer includes the text fields shown in Figure 9.7 as well as the Search results and Click to Read text fields at the top of the large blue background. To edit any of the text, simply select the text on the Stage you want to edit and then change it to match the style of your site. I have changed the color and font of the text to match the Caribbean feel of my site.
Topic, Author, and Date Drop Down Menus The Topic Drop-Down menu is the first of the three drop-down menus to appear on the Stage. As the construction is the same for all three drop-down menus, we will give a detailed explanation here of how the elements are constructed. You will be able to use this information to then customize the Author Drop-Down menu and the Date Drop-Down menu. As you may well have gathered from other chapters in the book, “things” in Flash are not always exactly as they seem. This is especially true for the drop-down menus used in this movie. Although the Topic Drop-Down menu seems to be on the Stage from frame 116 onwards, the reality is somewhat different. The symbol on the Stage from frame 116 to 184 is actually named Menu graphic and is a static graphic. The actual clickable drop-down menu, called Topic Drop-Down, does not appear on the Stage until frame 185, and is usable from that point onwards. This is to keep your viewers from clicking on the drop-down menus until they’re ready.
Figure 9.7 The Text layer.
Let’s look at the symbols now and see how they can be customized to suit your site. The Topic Drop-Down Movie Clip The Topic Drop-Down Movie Clip is the clickable version of the Menu graphic symbol mentioned above. It is a two-framed, threelayered Movie Clip. The Author and Topic drop-down menus are made up of nearly identical Movie Clips called AuthorDrop-Down and DateDrop-Down, respectively. The Actions layer contains an action in each frame. Frame 1 has the following action: _root.closer1 = null; stop();
Figure 9.8 The Topic Drop-Down Movie Clip.
242
Flash Site Workshop
This ensures that the drop-down menu is closed. As you may recall from earlier in this chapter, there is an identical script in frame 1 of the root Timeline. Frame 2 has a simple stop() action. Frame 1 of the Drop-Down layer is empty, but frame 2 contains a Movie Clip, called Subject Row, that is explained below. The Button layer contains the Drop-Down button symbol, also explained below. Subject Row Movie Clip This is an invisible Movie Clip with the instance name of column. The Author and Topic drop-down Movie Clips use Author Row and Date Row, respectively, and both of those Movie Clips have the instance name of column, as well. Attached to the instance of Subject Row is a script that builds the topic list by looping through the XML object created from your database. Also in the script attached to this empty MC is this action:
Figure 9.9 The Instance panel for the Subject Row Movie Clip.
_root.clip.attachMovie( “short row”, “row” add Number(z+1), ➥Number(z+1) );
This activates the Duplicated_Drop-Down Movie Clip in which the results are displayed. To activate this Clip, it uses the linkage name (short row) set via the Linkage option in the Library. This MC is discussed below. The Author Row MC activates the Author Duplicated Drop-Down Clip (author row) and the Date Row MC activates the Date Duplicated Drop-Down Clip (date row). Drop-Down Button
Figure 9.10 The Drop-Down Button symbol.
This is a standard button symbol with four states. It’s used in all three drop-down menus. The Over state has a dotted blue outline, the Down state has a green gradient fill, and the Hit state contains a box over the down arrow, making it the only active area of the button. When I customized this, I retained the 3-D look of the button, but changed the fill colors, outline color, and the color of the drop-down button. We will look at what happens when this button is clicked in a couple of minutes. Menu Graphic
Figure 9.11 The Menu graphic symbol.
As mentioned above, the Menu graphic symbol is a static graphic located in the Drop-Down Elements folder of the Library. To edit this, I copied the Up state of the Drop-Down Button symbol. This guarantees that the buttons all look the same.
Chapter 9
243
Generate Dynamic Content: News and Reviews
Duplicated Drop-Down Movie Clip So now the symbols are on the Stage—what happens when a user selects to search by topic? Figure 9.12 shows a drop-down button in action so you can see the populated drop-down. We will now look at how that is created and what symbols are used. When a user clicks the Topic Drop-Down button, it advances the Movie Clip in which it’s contained to frame 2, where the column Clip uses the XML object to query the database and retrieve the topic listing. The results are then displayed in the Duplicated Drop-Down Movie Clip below the drop-down button. Because this Movie Clip (like the Author Duplicated Drop-Down and Date Duplicated Dropdown clips) is only displayed when called by it’s linkage name, you can only get to it by double-clicking it in the Library.
Figure 9.12 The Drop-Down Button symbol in action.
Like many other Movie Clips, the Duplicated Drop-Down has nested elements in each layer. On the Dynamic Text Field layer, there is a dynamic text field that displays the text variable from the database. It is a single line text field, and again you can change font, color, or size of the text as long as you follow the normal rules. Located in the Dynamic Button layer is the Dynamic Drop-Down button, a four-state button that can be edited to match the colors and style of your site. The Down and Over states of this button have an arrow drawn on it to indicates which item is currently selected. Layer 1 of the Dynamic Drop-Down button has an instance of the Duplicated button Green GFX symbol. This is a static graphic that can be edited to suit your needs. The final layer of the Duplicated Drop-Down Movie Clip contains a simple green rectangle that acts as a background for the other graphics. You can edit this as you like.
Figure 9.13 The Duplicated Drop-Down Clip.
Figure 9.14 The Over and Down states of the Dynamic Drop-Down button.
Figure 9.15 The Duplicated button Green GFX.
Static Submit Button The Submit Button Static symbol begins to slide on the Stage in frame 124. It is located in the STATIC GRAPHICS folder of the Library. In appearance it is exactly the same as the Up state of the Submit button described below.
Figure 9.16 The Submit Button symbol.
244
Flash Site Workshop
Any changes you make to the static graphic will have to be repeated in the active button. Make sure that you match all color, font changes, and so on exactly between the two. The raised curve effect of the button is created by using three filled rectangles for the button fill. Each of these rectangles uses a linear gradient fill between gray and white. Outlining the button in contrasting colors gives the button a recessed effect. For my customization, I left this button as is until after I had customized the Submit button (below), and then copied the Up state from the customized Submit button and replaced the artwork in the static symbol. This guarantees that they remain the same in appearance.
Submit Button The Submit button is on the Stage from frame 185 onwards and is located in the BUTTONS folder of the Library. The button is a fourstate button made up of three layers. The Submit button has actions associated with it, as shown below. There is no reason why you would need to change these actions, but we will show them here so that you can see what happens when a user submits a search. This coding works very well, but looks incredibly complicated. Let’s break it down into sections. The start of the code activates the script on release of the Submit button, or when the Enter key is pressed: on (release, keyPress “<Enter>”) {
The code then checks which of the search options have been completed: if ((_root.topic == “”)) { passTopic = “”; } else if ((_root.authors == “”) and (_root.date == “”)) { passTopic = “topicID=” add _root.topicID; } else { passTopic = “topicID=” add _root.topicID add “&”; } if ((_root.authors == “”)) { passAuthor = “”; } else if (_root.date == “”) { passAuthor = “authorID=” add _root.authorsID; } else {
Chapter 9
Generate Dynamic Content: News and Reviews
passAuthor = “authorID=” add _root.authorsID add “&”; } if ((_root.date == “”)) { passDate = “”; } else { passDate = “date=” add _root.date; }
Having identified which search boxes have been completed, the script then passes the query back to the database as follows: _root.url = _root.yourServer add “reviewsearchresults.asp?” ➥add passTopic add passAuthor add passDate; trace (_root.url);
If the search returns no results, a message is displayed onscreen telling the user no results were found. You can edit the text of this message directly within the Actions panel. Simply change the text within the quotation marks of the second line below. if (_root.url == _root.yourServer add ➥“reviewsearchresults.asp?”) { _root.message.none = “Please select search criteria from ➥the menus ➥on the left.”;
Assuming that there are results to display, the script continues with a blank message, so the user sees nothing. } else { _root.message.none = “”; _root.rsrXML = new XML();
The new XML object is then created and continues to populate the Subject Row Movie Clip in the scene. _root.rsrXML.onLoad = populateSR; _root.rsrXML.load(_root.url); trace (_root.rsrXML); function populateSR () { _root.rsrXML = this.firstChild; _root.rsrList = new Array(); trace ➥(_root.rsrXML.nodeName.toLowerCase()); if (_root.rsrXML.nodeName.toLowerCase() == ➥”messagelist”) {
245
246
Flash Site Workshop
_root.rsrList = ➥_root.rsrXML.childNodes; } _root.message.gotoAndPlay(2); } }
To customize the look of the button, I removed the dots and edited the outlines, font, and text size. I also changed the fill color for the Down state of the button.
Clear Button Figure 9.17 The Clear Button symbol.
Like the Submit button, there are two versions of Clear in the movie. The difference between the Clear button and the Submit button is that the static version is not actually a symbol. It is simply a group placed on the Stage in the Clear Button layer at frame 127. The Clear button loads in frame 185 and is immediately clickable. To customize both versions, the easiest way is to customize the Clear button to match the design of your site, and then to copy the Up state of the new button to the appropriate frame and layer on the Stage. I edited my Clear button to match the Submit buttons to give consistency and clarity to the site. The actions for the clear button are as follows: on (release){ gotoAndPlay(“clear”); }
This script sends the play head to the frame labeled Clear (frame 185). There is a large amount of script in the frame, which was described at the beginning of the chapter.
Search Results Elements Figure 9.18 The Search Results Elements.
Chapter 9
Generate Dynamic Content: News and Reviews
247
Now we have all of the static elements in place as well as the dropdown menus, and Clear and Submit buttons. All that we are left with is the actual search and result elements of the movie. The results of a user search are displayed in two sections. First, the search results are displayed in the Message Movie Clip at the top right of the scene as clickable links. When a user chooses which result they want to view in full, they click the appropriate record. The summary result for this record is then displayed in the bottom right of the scene, in the Summary Movie Clip. The construction of the two results boxes is the most important thing here. There are numerous Movie Clips, symbols, and scripts involved in making the process work, so let’s start by breaking down the elements for the search results. Search Results Outline The Search Results Outline layer contains the first visible sign in the movie of the instance of the Recessed Box symbol which outlines the search results. This fades in at frame 155 and was customized earlier. Message Movie Clip The Search Results Elements (Top Box) layer is blank until frame 167. Over the next several frames, the Message Movie Clip fades into place onscreen and is then present throughout the movie. In Figure 9.19, you can see the Timeline for the Message Movie Clip. If you look at the Instance panel, you will see that the Clip is named message; this is how it is referenced by the script. Figure 9.19 The Timeline for the Message Movie Clip.
248
Flash Site Workshop
The Actions layer for the script is very simple. Frames 1 and 3 have stop() actions in them, and frame 2 has a play() command. The Scrolling Engines layer contains the empty ObjUP and ObjDown Movie Clips. There is no need to change these in any way. Both instances of the Movie Clips are named the same as their symbol names, and these names are referenced in the ActionScript for the actions of the Scroll Box Arrow Buttons. The results from the database are displayed in a dynamic text box in the Message Movie Clip. The default font for text to be displayed in this box is _sans, although you could specify a font of your own choosing. As always, you need to be careful when changing fonts. Remember to stick to system fonts in case the visitor does not have the font you specified. Scroll Box Arrows Two instances of the Scroll Box Arrow Button are nested inside the text box slider graphic. Inside the Scroll Box Arrow Button is the Scroll Box Arrow symbol. Both instances of the button have actions attached. The top instance is use for scrolling upwards and the bottom instance for scrolling downwards. Figure 9.20 The scroll box arrow symbol and slider graphic.
Here is the code for scrolling upwards: on (press, dragOver) { objUp.gotoAndPlay(2); } on (release, releaseOutside) { objUp.gotoAndStop(1); }
When the button is held down, the movie is sent to frame 2 of the ObjUp Movie Clip. When the mouse is released, the play head is sent to frame 1 of the ObjUp Movie Clip and stops at that point. There is no reason for this code to be changed in any way. You can, however, edit the button, change the color of the button, and edit the effects for the different button states. I changed the button to fit in with the overall feel of my site. The Text Box Slider Graphic acts as a container for the scroll arrows. It is a simply rectangle shape with no fill and a single color outline. You can change the line color, add a fill, or even remove the line all
Chapter 9
249
Generate Dynamic Content: News and Reviews
together giving the scroll arrows a floating feel to them. I simply changed the line color to match the colors already in use in my customized movie.
Summary Elements Figure 9.21 The Summary Elements.
Again, these results are generated dynamically via the XML we have already examined. The Summary Elements (Bottom Box) layer contains the Summary Movie Clip that shows the detailed results of a search. Once the user has selected an article to read from the search results, this bottom box is populated with the complete article from the database. Some of these elements have already been seen in the previous section. Let’s start by looking at the Timeline for the Summary Movie Clip. Summary Movie Clip This Timeline gives you a good idea of what is within this Movie Clip. The layer names are informative in terms of what appears in what location. The Article Text Field layer contains a dynamic text box associated with the variable article. This pulls the entire article from the database. The Article Header Text Field layer contains a dynamic text field that is associated with the variable title. This variable calls in the title field of the newsreview table in the database. You can change the font used to display the information, but be aware of the usual font considerations with dynamic text fields. The Scrolling Engines layer holds two empty Movie Clips that perform in exactly the same way as the scrolling elements in the Message Movie Clip. The only difference here is that the symbols are named scrollDown and scrollUp.
Figure 9.22 The Timeline for the Summary Movie Clip.
250
Flash Site Workshop
The Up/Down buttons contain the up and down arrows. Again, these are the same as in Message Movie Clip and require no further comment.
The Customized News and Reviews Movie Here is my customized News and Reviews movie. Figure 9.23
Summary Make sure that you take some time to look through the Actions in either Movie Explorer or the Actions panel, as this will give you an overview of the back-end processing for the site. Remember that the ActionScript is well commented, which should also help you. Anytime that you see the words Be Careful in the comments, pay close attention. Those comments are there for your benefit. Even basic color and text changes will help to give a unique feel to your News and Reviews movie. Have fun developing this movie to meet the needs of the people who use your site. After all, it is a wellknown fact that surfers are more likely to keep visiting a site that has up-to-date information. Keep your section current and it will
Chapter 9
Generate Dynamic Content: News and Reviews
draw visitors back on a regular basis. Regular visitors hopefully mean regular sales and the success of not only your Flash Web site, but also your company. As this is not an in-depth learning tool for .xml or .asp, we have not gone into the detailed description of how to rewrite the back end coding. For those of you who feel competent to do so, go ahead and modify the code to suit your own needs and applications. I would recommend that you work only on a copy to start with so that you retain the functionality of the originals. For those of you happy to use the code as supplied, read the comments and warnings carefully before changing anything. Use the comments in the code as a learning tool to help you understand how Flash 5 can integrate seamlessly not only with .asp, but with .xml as well. Reading the code here and seeing what it will do is a great starting point for any learning curve.
251
CHAPTER
10
1 Company Name Button 2 Banner Animation Placeholder 3 Scroll Box Smart Clip 4 Search Our Resources Text 5 Resource List Buttons 6 Resources Text 7 Resources Box Outline
Preview Related Links
Chapter 10
Preview Related Links
What to Expect From This Chapter The Preview Related Links movie allows you to easily put up a list of links that can be dynamically viewed by the user. The list of sites that are referenced contain a description and full URL which is “popped-up” in an info box when the site is rolled over. This creates an interactive and efficient way to explore the list of links. Like most other chapters in this book, this movie is built to be modular— allowing you to place this element in your site with ease. The Preview Related Links movie will illustrate another exciting feature of Flash 5—Smart Clips. Smart Clips are Movie Clips that contain predefined Clip parameters that can be easily modified when developing. These Clip parameters are passed to actions or functions contained within the Smart Clip, thus altering the behavior of the clip. Smart Clips are an excellent way for programmers to build functionality into a Flash piece, as designers can then simply modify a number of parameters to produce different results with no need to touch the original code. In this chapter you will see how the Preview Related Links movie uses a Smart Clip to store multiple pieces of data in arrays. These arrays are manipulated through scripts located inside the Smart Clip, which also creates dynamic buttons and links based on the information stored inside the arrays. This means that you simply need to alter the array values in the Clip parameters to customize the data/information in your version of this application. If you are familiar with ActionScript, taking a close look at how this Smart Clip was built will illustrate the power and flexibility of incorporating Smart Clips into your own Flash work. I chose to customize this movie by catering to the Flash developer. A wealth of Flash and development-related links have been added to this movie, illustrating the flexibility we have when customizing Movies that contain Smart Clips. The redesign of this movie is similar in style to the one I created for Chapter 12, “Build a Threaded Message Board.” Here, I used elements that gave my movie an application-like look and feel. It was important to create an intuitive interface that developers would have no problem identifying with. Also, the application-like interface instills in the user that this is not just a Web site, but a tool that can be used much like an application.
253
254
Flash Site Workshop
How the Preview Links Movie Works Before we begin, you’ll want to open the .fla for this chapter by browsing the included CD. Look for the CH10-Files/CH10-Originals folder and copy PreviewLinks.fla located inside to your hard drive. Once it is copied to your machine you can open it in Flash and follow along as we discuss how this movie works. Figure 10.1 Main Timeline of the movie.
The movie begins with a series of animations that bring the movie elements onto the Stage. All elements are animated between frame 0 and 93, except for the Blank Info Window, Banner Animation, and Resource buttons. A graphic symbol identical in appearance to the Resource buttons animates in to eliminate the possibility of someone triggering a button while it is in motion. Once the graphic is in its final resting position on frame 102, it is replaced by the actual button instance. The Blank Info Window and Banner Animation are not animated at all; they simply appear on frame 102 which is the last frame of the movie’s Timeline. Once objects are in their final positions, the movie is almost completely controlled by the Scroll Box Smart Clip. First though, Actions are placed on the resource buttons that reference the Smart Clip to the appropriate array contained in the Clip parameters. on (release){ _root.message.list = _root.message.listB _root.message.link = _root.message.listBLinks _root.message.info = _root.message.infoB _root.message.gotoAndPlay(“go”); }
Chapter 10
Preview Related Links
The code above was taken from Resource List button B, so you’ll see how the message list, link, and info values have been synchronized to correspond with the B list information contained in the Smart Clip. This Action also contains a gotoAndPlay command on the last line that targets the Scroll Box Smart Clip with the instance name of message to play the Go label. This message instance of the Scroller Box Smart Clip holds the arrays that are referenced when creating the buttons. We’ll take a closer look at these arrays in the Customization section of the chapter. For now, let’s take a look at how these buttons are placed on the Stage. The buttons are dynamically built by the Duplicated Button MC located on the Row layer of the Scroller Box Smart Clip. This Duplicated Button Clip is accessed once the user clicks the Resource button, as it is contained in the Go label of the Smart Clip. This is done with the following onClipEvent action: onClipEvent (load) { for (i=0; i < _parent.list.length; i++){ this.attachMovie( “long row”, “row” add ➥Number(i + 1), Number(i + 1) ); name = “row” add Number (i+1); if (name ne “row1”) { setProperty ( “row” add Number (i+1), ➥_y, (getProperty ( “row” add i, _y ) + ➥getProperty ( “row” add i, _height) ➥+ 1) ); } set ( “row” add Number (i+1) add “/:text”, ➥_parent.list[i]); set ( “row” add Number (i+1) add “/:link”, ➥_parent.link[i]); set ( “row” add Number (i+1) add “/:info”, ➥_parent.info[i]); } }
Here we have a loop that cycles through the length of the array, as defined by the Resource buttons (A or B) and places buttons on the Stage using the attachMovie command. Note that attachMovie
255
256
Flash Site Workshop
targets the symbol to use through the Linkage Properties in the Library. The script does not place a long row button on the Stage as you might think, but instead places instances of the generic button on the Stage as it is defined as long row in it’s Linkage Properties. The final bit of interactivity in this movie is found on the Actions of the generic button Movie Clip that is dynamically placed on Stage. You can find this MC in the Library in the folder Scroll Box Materials/MC’s. The following code is an Object Action placed on the button inside of the generic button Movie Clip: on (release) { getURL (link, “_blank”); } on (rollOver) { yLoc = getProperty(_root._parent, _y); setProperty (“_root.bubble”, _alpha, “100”); setProperty (“_root.bubble”, _yLOC+72); _root.bubble.gotoAndPlay(2); //setProperty (_root._parent, _alpha, “50”) _root.bubble.win = info; _root.bubble.url = link; } on (rollOut) { setProperty (“_root.bubble”, _alpha, “0”); _root.bubble.gotoAndStop(1); //setProperty (_root._parent, _alpha, “100”) _root.bubble.win = “”; _root.bubble.url = “”; }
This code is responsible for displaying the Blank Info Window found on the Window Bubble layer on rollOver. This Movie Clip contains the Web links and information from the array information defined in the Smart Clip, triggered by the Resource buttons. This code also dynamically sets the Y position of the Window Clip 72 pixels above the Y position of the viewer’s mouse. This ensures that the window pops up next to the button that is rolled over. It also contains a getURL action that loads the viewed link in a new browser window when the viewer clicks the button.
Chapter 10
Preview Related Links
257
Customize the Preview Related Links Movie Link Pop-Up Window The Blank Info Window, located in the Pop-Up Bubble Materials folder of the Library, is a Movie Clip placed on the Window Bubble layer of the Timeline. This Movie Clip pops up to display the link URL and description when buttons are rolled over. There are many ways to approach customization of this Clip. You can alter the animation style that is used in the first few frames by adding or reducing frames to affect the length of the animation, and how quickly it responds when triggered. You can also completely modify the look of the popup box as well as the variables (url, win) that are associated with the text fields to display the link and description info for the current site.
Figure 10.2 Blank Info Window located on the Window Bubble layer.
To first customize this Clip I modified the Yellow Bubble GFX symbol contained on the Yellow Bubble layer of the Clip, by importing my own custom graphic and removing the previous graphic. After this new graphic was in place, the text fields were repositioned and sized to fit the area of the new custom graphic. I also modified the text color properties in the Character panel. Finally, I moved the horizontal position of the Clip to change its onstage position when it appears on rollover. Although the Y position is set via a script on the buttons, its X position is determined by its physical location on the Stage.
The Banner Advertisement Figure 10.3 Banner Animation Timeline used to display banner ads.
258
Flash Site Workshop
Here we have the Banner Animation Movie Clip that is responsible for displaying ads in the movie. This Clip is placed on the Advertisement Banner layer of the Timeline, and can be accessed from the Banner Materials folder of the Library. There are several things that you may want to take a look at when customizing this aspect of the file. First, rather than just add brand new banner buttons, each of your custom banner ads should be added to one of the individual Banner Buttons located in the Banner Materials folder in the Library. Probably the best way to do this is to open up one of the button symbols and either edit the contents directly, or add a new layer, place your custom banner image in the Up, Over, and Down states as necessary, and then change the existing layers to Guide layers so they don’t export. Then, in the Banner Animation Movie Clip, you need only to go to the Actions attached to that movie and insert the URL destination on the action by selecting the button and adding the URL in the Actions panel. Figure 10.4 The Banner Materials folder in the Library with an imported bitmap.
If you would like to change the tempo at which the banners are displayed you can either alter the frame rate of the movie or insert/ delete frames in the Banner Animation Timeline. If you choose to add/delete frames, make sure that the first frame of each Banner Button is aligned with the first frame of the mask animations located in the Mask layer. The only modification that I made to this Clip was the addition of a custom graphic (which I placed on a new layer called Banner Outline) to strengthen the beveled feel of the redesign.
Resource Buttons
Figure 10.5 Resource button A and Resource button B.
The Resource buttons are located on their own respective layers and stored in the Resource List Button Materials folder of the Library. These buttons are responsible for defining the arrays to be displayed by the Smart Clip when dynamically building the link buttons. I modified these buttons by removing the original image and replacing it with our custom button image. I then copied the text that sat above the button and pasted it on a layer below. Once the two layers of text were stacked, I colored the top text white and the bottom text black, offsetting the bottom layer by several pixels. This created a shadow effect on the text and added more depth to the button.
Chapter 10
Preview Related Links
259
If you choose to alter these buttons, you must be careful that you keep their actions intact. You can do this by either editing directly inside of the button symbol or swapping the button symbol on the main stage using the Instance panel.
Resources Box Outline The Recessed Box symbol, located in the STATIC GFX folder of the Library, is a graphic symbol on the Resources Box layer. This symbol is used to frame and contain both the introductory copy and the Resource buttons. You could alter this symbol’s fill, stroke, or shape to fit your design by editing the symbol directly. If you’ve already customized a symbol similar to this, you might want to simply replace this symbol with that one. When I redesigned this application, I chose not to keep this symbol, and deleted its instance from the Stage.
Figure 10.6 Recessed Box graphic symbol used for framing the Resources Box area.
Company Name Button The Company Name button resides on the Company Name Button layer and can be found in the Company Name Materials folder inside the Scroll Box Materials folder of the Library. You may be familiar with this symbol from other chapters in this book. This is an excellent symbol to reuse to keep the company branding consistent. If you don’t already have a modified symbol to use, you could either edit the symbol directly to make it consistent with your site’s design, or you could use the Instance panel to swap this symbol with an imported logo. Swapping is ideal here because there’s a script attached to this so that the viewer can click on this symbol and be taken back to the site’s home page. If you’d like the symbol to link to your site’s home page, place a getURL action in the following script attached to the instance of the button: on (release) { //This is where you link to the home or main page of your site. }
In my redesigned example, I opted to exclude this symbol from the movie. Since I was creating more of a resource application and not something directly related to a company, this symbol was not needed.
Figure 10.7 Company Name button located on Company Name Button layer.
260
Flash Site Workshop
Search Our Resources Text
Figure 10.8 Text used for positioning.
The “search our resources text” symbol is located on the Resources Text layer and is used to welcome the user and invite them to explore the available resource links. You can find this symbol in the Text folder of the Library. You should replace this text with your own and modify the font size and color to match your site identity. In the customized design, I resized the text field used in the symbol to fit our new layout. Once I had it resized, I duplicated the text and pasted it on a layer below creating the shadow effect that was used on the Resource buttons. I also added an outline graphic to better define this area in the movie. This outline graphic was imported and put on a new layer of this symbol, which was then placed at the bottom of the Timeline.
Section Header Title Figure 10.9 Resources text found on the Resources layer.
Resources text, located on the Resources layer, is a graphic symbol found in the TEXT folder of the Library. This symbol acts as a header, clearly identifying to the user what area they are currently in. It describes the content of the movie. You should modify this to correctly identify the content of your movie and to reflect your overall design. In my redesign, this symbol was modified by importing a new graphic to act as an orange background element to the header. This graphic was placed on a new layer of the Resources Text symbol and moved to the bottom of the Timeline. The existing text layer of the Resources text symbol was altered in the Character panel to accommodate white text and a larger font size. I then duplicated this text layer, placing it below the original text layer and above the imported graphic. The text color was then switched to black and offset to produce the shadow effect used elsewhere in the redesign of this movie.
Scroll Box Smart Clip This Movie Clip is a Smart Clip, and is responsible for dynamically displaying the lists of links based on arrays defined by the Clip parameters. It is located on the Smart Clip layer of the movie and in the Smart Clip folder of the Library.
Chapter 10
Preview Related Links
261
Figure 10.10 Clip parameters used to modify Smart Clip content.
To modify the content used in this movie, you need to select the Scroll Box Smart Clip and then open the Clip Parameters panel for editing. When this is selected you will be given a pop-up window containing the following arrays that are used in this movie: listA—This
array contains the title of the links that will be shown on the buttons for Resource list A.
listALinks—This
array contains the actual URL addresses of the links in Resource list A. infoA—This
array contains the descriptions that pop up in the Blank Info Window for Resource list A.
listB—This
array contains the title of the links that will be shown on the buttons for Resource list B.
listBLinks—This
array contains the actual URL addresses of the links in Resource list B. infoB—This
array contains the descriptions that pop up in the Blank Info Window for Resource list B.
You can modify these array lists by double-clicking the array you want to edit. When I customized this application, I spent time going through the arrays and adding a plethora of Flash-related links and resource sites. Other elements contained inside the Smart Clip will be mentioned later in the text. You will want to spend some time double-checking that each list item’s button title, URL, and description matches.
262
Flash Site Workshop
Message Button Figure 10.11 Button used for displaying Resource Links.
The Generic Button Movie Clip is not found directly on the Stage. It has Linkage Properties attached to it in the Library. It is given the Linkage name long row which is targeted by the Duplicated Button MC so that instances of this MC are dynamically placed on the Stage in the Scroll Box Smart Clip. To edit it, you can find it in the MC’s folder of the Scroll Box Materials folder in the Library. I customized this Clip by editing the Plain 3D Button symbol that is located inside the Generic Button Movie Clip. I modified this button by first creating two Movie Clips: one for the rollOver action and one for the rollOut action. Once I created these animation effects, I placed each Movie Clip on the matching frame of the button (Up, Over). By adding these animations to the different states of the Plain 3D Button symbol, I was able to create a visually interesting effect on all of the buttons that are dynamically placed on the Stage using the Generic Button Clip. You may want to explore adding further interactivity to your buttons by placing sound effects on button states. You can do this by selecting a button frame, and then importing a sound and selecting it through the Sound panel. Figure 10.12 Image used in Smart Clip Scroller.
Text Box Slider Graphic The Text Box Slider graphic, located on the edge/buttons layer of the Scroll Box Smart Clip, is a graphic symbol found in the Scroll Box GFX folder of the Scroll Box Materials folder in the Library. This is a decorative element that serves no real purpose other than visually identifying the scrolling region. I customized this symbol by importing a custom graphic on a layer above the original graphic in the Text Box Slider Graphic symbol.
Chapter 10
263
Preview Related Links
Once this image was imported, I made the original layer a Guide layer so that it would not be visible on final output. Scroll Box Arrow Button Located on the New Buttons layer of the Scroll Bar Smart Clip, the Scroll Box Arrow button is an element in the Buttons folder of the Scroll Box Materials folder of the Library. It’s used to scroll through the available Resource links that are pulled dynamically from the Smart Clip array.
Figure 10.13 Button used for scrolling through Resource Links.
I chose to modify these buttons to reflect the design I implemented in the multi-threaded message board. The new button image was imported on a layer inside of the Scroll Box Arrow button and placed directly on top of the original image. This original layer was made into a Guide layer. I then created a keyframe on the Over state of the button and scaled the new graphic 120% to give feedback to the user when rolled over. Finally, I added a keyframe on the Down frame and copied and pasted the graphic from the first frame over this scaled up version—creating a unique Down state for the redesign.
The Customized Preview Links Movie Figure 10.14
264
Flash Site Workshop
Summary Like other chapters in this book, you will have learned how customizable and modular applications created in Flash can be. Feel free to explore the other chapters and experiment with utilizing different Clips and elements in this sample movie. The most powerful feature covered in this chapter is by far the Smart Clip. They are a great way to add interactivity to Flash, while maintaining ease of updating and maintenance. I encourage you to take a closer look at the movie and experiment with the Smart Clip. If you are experienced with ActionScript, or just plain eager to grasp what Flash can offer, pull it apart and try building Smart Clips of your own. Soon enough you or your team might be using these clever widgets in your own upcoming project!
CHAPTER
11
Tell Your Customer About Your Enterprise
1 Company Name
6 Bottom Header Text
11 Navigation Bar
2 Category Boxes
7 Quick Info Caption
12 Grey Background Graphic
3 Category Box Buttons
8 About Us Caption
13 Green Background Graphic
4 Information Box
9 Color Bar
14 Blue Background Graphic
5 Header Text
10 Side Line Animation
15 Scroll Bar
Chapter 11
Tell Your Customer About Your Enterprise
What to Expect from This Chapter The About the Business movie is designed to provide easy access to information about your company. The business container is comprised of three categories of information: history, locations, and contacts. The viewer sees information in a category by clicking one of the three buttons on the left side of the screen. When a button is clicked, the corresponding information is displayed in an adjacent dynamic text box. These categories might fit your needs, or you might want to edit the Movie Clip symbols and create new information categories. In this chapter, I’ll discuss how to edit the categories and their supporting elements to reflect your company’s image.
How the About the Business Movie Works This movie provides eye-catching animation and interactivity designed to encourage visitors to explore your company site. Go to the CH11-Files/CH11-Originals folder on the CD and copy Business_Container.fla to the appropriate folder on your hard drive. Open it up in Flash and test the movie. The following describes what you’ll see when you play the movie. 1. The green square animates in from the top of the screen and
the blue rectangle comes in from the left. At the same time the animated vertical bar on the right fades in on the right side of the screen. 2. Three light blue rectangles animate into place from the left side
of the screen. These rectangles contain rollover buttons for the company’s history, locations, and contact information. 3. An animated color bar located to the left of the buttons fades
in simultaneously with the information box. 4. The company name and about us animate onto the screen
together. At the same time the caption “rollover for quick info” fades in. 5. The navigation bar is the final element to appear on the screen.
It is loaded in as a .swf file and is located at the bottom of the screen.
267
268
Flash Site Workshop
6. When the viewer rolls over one of the buttons on the left, a
text caption that identifies the button’s function is displayed below it and an animated Movie Clip plays. Clicking a button displays corresponding text in an adjacent dynamic text box. A text caption identifying the topic appears above the upper left corner of the information box. Scroll bars allow you to scroll through the text located in the field.
Customize the About the Business Movie Before I customized this movie, I wanted to familiarize myself with the different elements. Initially, I played the movie several times and then slowly scrubbed through the Main Timeline. Next, I looked at the structure of the movie in the Movie Explorer. This provided a quick way to discover nested symbols and examine the movie’s code and programmer’s comments. Because the Main Timeline contains so many layers, I hid all of the layers and then turned them back on one at a time. I started with the Bottom layer and continued turning layers on and scrubbing through the Timeline until I reached the Top layer. Once I felt comfortable with the structure of the movie, I began customizing it. You will find a Guide layer in the Main Timeline about midway down. It is titled Navigation Bar Placeholder Graphic. If you turn on this layer, you will see a copy of the navigation bar graphic. This is simply a placeholder for the navigation bar .swf file that will load in during runtime. You may want to leave this on to help you arrange elements around the location of the bar.
ActionScripts The ActionScripts used in this movie contain annotations describing what the code does. The easiest way to locate elements with ActionScripts is to view the movie’s organization in the Movie Explorer. When you see an object or frame that has an action icon in its hierarchy, click the action icon once. This will display the icon’s ActionScripts. Double-click the action icon to open the Actions panel and customize the code for your movie.
Chapter 11
269
Tell Your Customer About Your Enterprise
Background Elements Figure 11.1 The temporary background symbol.
Figure 11.2 The blue background symbol.
Figure 11.3 The green background symbol.
The gray background, green box, and blue rectangle provide the setting for the movie. You might have already customized these elements in other movies to reflect your company’s image and color scheme. As you edit an element, you must want to change the name of the layer in which it’s located to reflect the contents of the layer. This will make the elements easier to locate and update in the future. You can change the appearance of any of these elements by changing the properties of an instance or by editing a master symbol. Because the elements are used throughout the site, you will need keep in mind the overall consistency of design and edit them where they appear in other movies used in the site.
270
Flash Site Workshop
If you’ve customized any of this movie’s elements in another movie, open the movie as a Library. Drag their symbols to the Library of the file you are working in. Select an instance of a symbol on the Stage you want to replace with the customized symbol. In the Instance panel click on the Swap Symbol button. Choose the symbol you want to use. A more efficient technique for updating and making global changes to a symbol is to make it part of a Shared Library. This is especially useful if different people are responsible for different movies in the site. Create a Flash file that contains the symbols you will use throughout the site. In the Library set each symbol’s linkage to export. Publish the movie as a .swf file. To use the use the Shared Library, open the .swf file as a Shared Library. Another option for making symbols universally available is to create and store symbols in a common Library folder. Because the common Library folder must reside in the Flash program folder on the development computer, this technique is best if only one person is designing and maintaining the site. Open each of the background graphics in turn in the symbol-editing mode to make changes. Each is a graphic symbol containing a group that might need to be ungrouped. When customizing my About the Business movie, I changed the fills of the graphics to gradients and reshaped the green background. I curved the left side of the box out and the right side in. I also increased the height of the box. The curved vertical edges and increased height added visual interest to the screen without increasing the file size. The temporary background graphic has a 4-point, light blue stroke. When I customized my movie, I used the Stroke panel to increase the stroke width to 10 points. Next, I converted the stroke to a fill and then filled it with the same gradient I used in the graphic. Last, I used the eyedropper to change the background color of the movie to one of the colors in the gradient. The result provided a soft contrast between the Flash movie and HTML page. Table 11.1 lists each instance’s layer, folder, and master symbol name so you can locate it easily.
Chapter 11
Tell Your Customer About Your Enterprise
271
Table 11.1 Instance Locations Layer
Folder
Symbol Name
Temporary Background
Backgrounds
Temporary background
Green Background
Backgrounds
Green background
Blue Background
Backgrounds
Blue background
Category Boxes The three blue rectangles on the left are graphic symbols. You can change their appearance by changing their instances properties or editing their symbols. The boxes are located in layers: Category Box 1, Category Box 2, and Category Box 3. The first box begins to animate onto the Stage at frame 20 and is in place in frame 26. In addition to tweening on the Stage, the instance’s alpha is set to 0% at its beginning keyframe and set to 100% ending keyframe. At frame 25 of the Category Box 2 layer, the second category box is positioned under the first box. It animates into place at frame 32. In frame 31 of the Category Box 3 layer, the third category box is positioned under the second box and animates into place at frame 38. The category box graphic, named Light Blue Box Graphic, is used for each of these elements and is located in the Static Graphics folder of the Library. If you make significant changes to the look of the box, you might want to change the layer names to correspond with the elements in the layer. The only change I made to the graphic was to change the fill color to white. This provided more contrast and helps direct the viewer’s attention to this area of the screen. If you want to add sound effects as each box animates on the Stage, you will need to import your own sound files. Use the Sound panel to apply a sound effect from your Library. Select the beginning keyframe of each box, and then select a sound from the pop-up menu in the Sound panel. The Sound panel contains four options for synchronizing a sound with animation. The setting you select depends on whether you’re using a sound created to play exactly the length of the animation or the sound needs to be altered within Flash.
Figure 11.4 Illustration of category boxes with button images showing.
272
Flash Site Workshop
If you’re using a sound designed to play exactly the length of the animation, choose Stream and set Loop to 0. Stream synchronizes the sound to the Timeline. As soon as the animation reaches the end keyframe, the sound stops. If the sound is longer than the animation you can fade the sound out at the appropriate point in Flash and use the Stop Sync setting to synchronize the sound. To use Stop, you will need to do the following: 1. Insert sounds in the beginning keyframes of each of the
Category Box animations. 2. Set the synchronization to Event for each sound. 3. Change the Out Point of each sound in the Edit Envelope
dialog box. To access this box, click Edit in the Sound panel. 4. Insert a new layer for the sounds above the layer Category Box
1. You might want to name the layer Sound Control. 5. Insert keyframes in frames 25, 31, and 37. In each keyframe
select the sound you want to stop from the Sound panel. Set the synchronization to Stop. Because Event sounds run independent of the Timeline, using Stop is the only way to guarantee a sound will stop at a specific frame. Using the stopAllSounds ActionScript can stop all sounds whose Sync is set to Event, but if you have any sounds whose Sync is set to Stream, it won’t affect them. Even though you can adjust the length and volume of a sound in Flash, it is best to create the exact sounds you need with an audio editing program. Using sound files that play longer unnecessarily increase file size.
Category Box Buttons The static image seen in a category box before its button is rolled over is a Movie Clip symbol that only contains a button. The animation that occurs when the Movie Clip is rolled over is inside the button symbol. The Movie Clip instances are located in the Picture Button Clips layer; they appear at frame 70.
Chapter 11
Tell Your Customer About Your Enterprise
The static images in the category boxes provide visual representations of the information each category contains. Whether you keep the current categories or change them, you might want to replace the graphics with your own. For example, you may choose to use photographs of your employees, facilities, and products. Photographs of people and real objects can help assure site visitors your company has the resources for meeting their business needs. If you understand how the Movie Clip symbols are constructed, you’ll find them easy to customize. The three Movie Clips are assembled the same. Let’s examine the construction of the History Movie Clip to identify the different elements you will need to change to customize a Clip. The History symbol, History Button MC, contains two layers—Actions and Button/Graphics—with two keyframes each. Each keyframe in the Actions layer contains a stop() script. Frame 1 of the Button/Graphics layer contains the Button symbol, History Button. Frame 2 contains the image Imaginary Product 1, which is located in the Static Graphics folder. The code attached to the instance of History Button targets the frames of corresponding Movie Clips: Bottom Headers, Location, and Contact. The Bottom Headers Movie Clip, with the instance name bottom, is located on the Stage beneath the category boxes. When the viewer rolls over the History button, the frame labeled his in the Bottom Headers Movie Clip is targeted, which displays the history caption because the his frame contains the text object history. The code also targets the first frames of the Location and Contact Movie Clips (_root.lclip and _root.clip, in the code below) to make sure the images in each Clip continue to display. on (rollOver) { _root.bottom.gotoAndStop(“his”); _root.lclip.gotoAndStop(1); _root.cclip.gotoAndStop(1); }
The next part of the code targets frame 1 in the Bottom Headers Movie Clip when the viewer rolls off the button. Since the frame is empty, the history caption disappears.
273
274
Flash Site Workshop
on (rollOut) { _root.bottom.gotoAndStop(1); }
The final part of the code targets the empty text field located in frame 70, and the his frames in the Header Text and Bottom Headers Movie Clips when the user clicks the button. The text displayed in the text box is contained in the variable _root.text 01. This variable is initialized in the first frame of the Main Timeline. on (release) { _root.text = _root.text_01; _root.header.gotoAndStop(“his”); _root.bottom.gotoAndStop(“his”); nextFrame (); }
If you open up the History Button symbol, you’ll see that the Up State of the button contains an instance of the Imaginary Product 1 Graphic symbol, which is replaced in the Over and Down States by an instance of the History Object Animation symbol. This just means that when the viewer rolls over or clicks the History button, the static graphic begins to animate. As you can see, the Movie Clips for the category boxes contain several different elements that you will need to change. These elements are listed in Table 11.2. Table 11.2 Movie Clip Elements Figure 11.5 The four keyframes of a button symbol.
Movie Clip
Corresponding Button
Static Image
History Button MC
History button
Imaginary Product 1
Location Button MC
Locations button
Imaginary Product 2
Contact Us Button MC
Contact Us button
Imaginary Product 3
The final element you may want to customize in each button is sound. Each category button contains a sound in the Down state of the button. To use a different sound, import a .wav or .aiff (Macintosh) file into your Library. In the symbol-editing mode of the button, select the
Chapter 11
Tell Your Customer About Your Enterprise
275
keyframe in the down. Select a sound from the pop-up menu in the Sound panel. Set the synchronization to Event. In my movie, the only change I made to the appearance of the category boxes and buttons was to change the category boxes’ tint. However, you will probably want to use your own artwork.
Header Text
Figure 11.6 The Sound panel allows you to assign and set properties for sounds.
Figure 11.7 The Header Text symbol and Timeline.
The text that appears above the information box when a button is clicked is located in the Header Text Movie Clip. You can find the symbol in the Header folder. Tip: The header text is light blue and hard to see against the movie’s white background when you are editing it. Set the movie background to a darker color to make it easier to edit the text. The symbol contains the Action and Text layers. The text for each category is contained in the keyframes in the Text layer. Use the Character panel to change the font, color, kerning, and style. When customizing my movie, I increased the font size and changed the color to white to make it easier for the viewer to read. You may also want to adjust the kerning, or spacing, between letters.
276
Flash Site Workshop
Bottom Header Text Figure 11.8 The Bottom Header symbol and Timeline.
The text that appears below a category button when it is rolled over is located in the Bottom Headers Movie Clip, located in the Header folder in the Library. Like the Header Text symbol, this symbol contains the Actions and Text layers. The Actions layer holds the frame labels that are targeted from the Category buttons. The text for each category is contained in the keyframes in the Text layer. Use the Character panel to change the font, color, and style. I increased the font size and changed the color to white to make it easier for the viewer to read.
Information Box Figure 11.9 The Information Box displays dynamic text selected by the viewer.
Chapter 11
Tell Your Customer About Your Enterprise
277
The information box is made up of elements on seven different layers: Text Box, Scrolling Engines, Top Arrow, Bottom Arrow, Container, Blue Box, and Scroll Box 3-D. The Outline graphic symbol, located in the Scroll Box 3-D layer and in the Scroll Box Elements folder in the Library, contains the outline of the box. The Container graphic symbol, on the Container layer, contains many of the interior elements. If you open the symbol you will find it only has one layer that holds the Text Box Slider Graphic and two instances of the Blue Box graphic symbol. There is another instance of Blue Box on a layer by itself, and the two instances of Scroll Box Arrow Button are in the Top Arrow and Bottom Arrow layers, respectively. These are also located in the Scroll Box Elements folder. The Scrolling Engines folder in the Library contains the scrollDown_02 and scrollUp 02 Movie Clips. These Movie Clips contain the code that is targeted by the arrow buttons in the Top Arrow and Bottom Arrow layers. The text box layer contains a dynamic text box that displays different information about the company, depending on which button is clicked. Three variables are used to display the text in the information box. These variables are located in frame 1 of the action layer in the main Timeline. To customize the text content, it’s best to use a text editor or word processing program to compose your text: Flash doesn’t contain a spell checker, and when you put the text into the variable string, it doesn’t wrap in the panel, so it can be really difficult to read. Once you’ve finished writing your text, copy it from your word processor document and paste it the corresponding value field of the variable between the quotes. Figure 11.10 The variable text in frame 1 continues past the end of the Movie Explorer panel.
I found it easier to change the Actions panel from expert mode to normal, and then replace the text in the variable’s value field in the
278
Flash Site Workshop
parameters below the Script Area. However, you can make changes in the expert mode if that’s how you’re more comfortable working. If you’d like to alter the way the text displays in the Information Box, use the Character panel to change the color of the text displayed in the dynamic text box. The text in the box is set to 12-point _sans. To make the text easier to read, I used the Paragraph panel to increase the line spacing. While it may be tempting to embed a special font to display text, it is best to use device fonts. Embedding a font dramatically increases the file size of your exported swf. You can maintain small files by using device fonts. Device fonts are listed in the font menu in the Character panel. They are: _sans, _serif, and _typewriter. The device font option finds the fonts on a viewer’s computer that most closely matches the specified font. Using device fonts assures that the viewer sees text similar to how it is displayed in the authoring environment. However, there are three drawbacks to device fonts: They are not antialiased, cannot be tweened, and cannot be masked. Figure 11.11 Paragraph panel options for formatting text.
The elements for the text box and scroll bar are located in the Scroll Box Elements folder of the Library. In their symbol editing mode, you will need to ungroup the different graphics to change their fill and stroke color. The up and down arrows for the scroll bar are buttons. The code for changing how many lines the text scrolls up or down when the up or down arrows are clicked is located in frame 2 of the ScrollDown_02 and ScrollUp_02 Movie Clips. Since the text in the box scrolls smoothly, you will probably not want to change the code. However, it is nice to know where the script is located if you want to create another scrolling text box. Because of the code, however, if you want to replace these arrows, you should either swap symbols in the Instance panel or drill down and edit the Scroll Box Arrow Button symbol directly. Deleting these symbols will remove the code so they can’t function properly.
Chapter 11
279
Tell Your Customer About Your Enterprise
Figure 11.12 The code for frame 2 of the scrollDown_02 MC.
Company Name and Button To customize the Company Name button, you will need to make changes to the Company Name graphic symbol, button symbol, and keyframes in the Company Name layer. The Company Name graphic symbol animates from keyframe 62 to keyframe 70. In keyframe 74 the Company Name Button symbol replaces the graphic symbol. Replacing the graphic with a button gives your viewer an intuitive way to click back to the home page. If you’ve already customized the Company Name symbol in a previous movie, replace it with your customized symbol. Either open the movie containing the customized symbol as a Library, or if you created a Shared Library, open the Shared Library file and drag the symbol to the current Library. If you haven’t already modified this in another movie, let’s look at it here. The Company Name graphic symbol is located in the Button folder. The symbol has only one layer and frame, which contains the text object. Use the Character panel to change the font, style, and color of the text. You might also want to have your logo appear in this symbol along with your company name. If so, it is best to add another layer for the graphic. Import your logo into the new layer and position it next to your company name. To adjust the placement in relation to the other elements on the screen, return to the main Timeline. Select the symbol in frame 70 and open it in the edit in place mode. To customize the Company Name button, you need to make changes in all of the button symbol’s keyframes. When I customized my company button, I placed the Company Name graphic symbol in the keyframes of the button symbol. This made it easy to quickly edit the button’s appearance. If your company name is larger than the example, you will need to increase the hit area inside the button symbol.
Figure 11.13 The Company Name and button may have been previously customized.
280
Flash Site Workshop
Figure 11.14 The Company Name button allows the viewer to click back to your home page.
A quick way to change the appearance of the button is to change the tint of the company button instances in keyframes 60 and 70. You might want to set the tint in frame 60 to a different color of the button will transform from one color to another as it animates onto the Stage. You might also want to add a link to the button to your company’s home page. To add a link, select the Company Name Button instance in frame 74 of the Company Name layer. Open the Actions panel and enter the correct URL in the script.
About Us Caption Figure 11.15 The about us caption.
The about us caption is a text object. Use the Character panel to change the font, style, and color. This may be another area of the screen that you might want to incorporate your logo. If so, you may want to convert the caption to a graphic symbol and then add your logo to a new layer. This will enable you to use your caption design in other movies in the site easily. The about us caption is located in the Static Text layer.
Quick Info Caption Figure 11.16 The rollover for quick info caption should be clarified.
The quick info caption is located in the Rollover. The quick info caption refers to the three images on the screen. When an image is rolled over, the caption identifies the corresponding topic. I changed the caption to rollover image for quick info to clarify the meaning of the caption for the viewer. Because the caption is a text object, use the Character panel to change its attributes. I increased the font size and changed its color to make the caption easier to read.
Chapter 11
281
Tell Your Customer About Your Enterprise
Color Bar The color bar is a Movie Clip animation that appears throughout the site. You may have already modified this symbol. You can easily change the appearance of the animation by editing its graphic symbol and Movie Clip. Inside the Movie Clip there are five layers. The first layer contains actions for looping the animation. The other four layers each contain tweened instances of the Animation Square graphic symbol. The tint of each instance is set to different percentages in the keyframes of each layer. The different tint settings in each keyframe create the running lights effect. I changed the color of the square in the graphic symbol to compliment my color scheme. You might try changing the alpha and tint in the Movie Clip keyframes to create a new look. The graphic and Movie Clip symbols for the color bar are located in the Animation folder.
Figure 11.17 The Color Bar is one of the recurring symbols from this book.
Figure 11.18 The Side Line Animation.
Side Line Animation Another frequently used design feature is a Movie Clip that plays the animated, notched bar at the right of the screen and is located in the Side Line Animation layer. The combination of a vertical animation here and the horizontal color bar animation on the left can distract the viewer. To draw the user’s attention to the left side of the screen, I decreased the vertical bar instance’s alpha from 100% to 33% in frame 13. This allowed me to keep the bar, which provides balance to the screen design, without distracting the viewer’s focus from the information area of the screen. Figure 11.19 The customized navigation bar in Chapter 3.
The Navigation Bar The navigation bar appears last and is located at the bottom of the screen. Frame 70 of the Actions layer contains the script for loading the navigation bar. The script loads the external movie hz_Nav_Bar_new.swf in Level One of the movie. You can change the location of the script in the Timeline to have the navigation bar load sooner. To change the timing, drag the keyframe in frame 70 to a new location in the Timeline.
Figure 11.20 The ActionScript for loading the navigation bar, located in frame 70.
282
Flash Site Workshop
I didn’t change the timing of the bar’s appearance, but I did change the fill and outline of the bar to fit my site’s color scheme. If you’d like to change the bar’s appearance, refer to Chapter 3, “Design the Home Page and Site Identity.” Figure 11.21 My customized About the Business Movie.
Other Issues Resources for Audio Tracks Only one sound effect is included in this file. It is used in the Down state of the Category buttons. To grab your visitor’s attention, you may want to use additional sounds as elements of the movie animate onto the Stage. Flashkit.com has a large selection of audio files that you can use in your movie. If you’d like to create audio files for your site but have limited musical skills, check out Smartsound at smartsound.com. This commercial program lets you “compose” music files using musical clips from different styles of music.
Editing Elements Remember that certain elements in this movie appear throughout the site. If you make changes to an element, be sure to change it in the other movies used in the site. Once again, you may want to create a Shared Library and make these elements Shared Library items.
CHAPTER
12
Build a Threaded Message Board
The Login Scene
The Subject Scene
The Message Scene
The Post Scene
Chapter 12
Build a Threaded Message Board
285
What to Expect from This Chapter You can expect to walk away from this chapter inspired. This multithreaded message board is an excellent example of the power and flexibility you have when using the newest features of Flash. Flash has long been the standard for producing amazing Web interactivity with small file sizes, and in this example we will flex Flash 5’s new muscles with its integration of XML objects. You’ll find just how easy it is to customize dynamic Web applications using Flash as we walk through an XML driven multi-threaded message board. We will also detail how the elements can be modified to give the board your own distinct look while maintaining full functionality. The threaded message board movie is divided into four distinct scenes: Login, Subject, Message, and Post. Each scene serves a unique purpose, but all are tightly integrated using the new XML object found in Flash 5, used for passing and processing information across scenes.
The Login Scene The Login scene is the first screen presented to the user when the multi-threaded message board is loaded. In this scene the user is greeted with a welcome message and is prompted to enter their login information for access to the message board. The Login scene ensures that only “registered” users access the message board. This is accomplished by requiring the user to submit their name, e-mail, and password as part of the login process. If the user fails verification, an Alert message pops up to inform the user that the information submitted was incorrect and needs to be re-entered, or contact a system administrator. Upon successful verification, the user is advanced to the Subject scene of the Flash movie.
The Subject Scene The Subject scene is the initial interface for the multi-threaded message board. It is in this scene that users interact directly with the message board. The primary purpose of this scene is to allow the user to select an existing subject topic to review or to post a new subject topic. Selecting a subject topic will dynamically load a sublist of messages that have been created for the selected subject topic. Selecting one of these messages will advance the user to the Message scene.
NOTE: The threaded message board included in this book is a secure environment. What this means is that the System Administrator will have to set user privileges via the MySQL database. Details on administering this database can be found in Chapter 13, “Site Publishing Considerations.” Located at http://www. oncallinteractive.com/ flash5workshop/ will be a
bonus file: a non-secure threaded message board that you can download and modify.
286
Flash Site Workshop
The Message Scene The Message scene displays the contents of the message that was selected in the previous Subject scene and lists other user’s replies to that message. The scene also contains a respond button that allows the user to add a unique reply to any of the current threaded messages. Clicking this button advances to the Post scene where the user enters and submits a response.
The Post Scene The Post scene allows users to post messages directly to the database so that they can be viewed and read by other members of the message board. User information gathered from the Login scene is automatically inserted into the XML object when posting messages. This scene is used both to post new subject topics and to respond to previously posted messages. I’ve chosen to customize this multi-threaded message board as a resource for Web developers. I used a similar style to the Preview Links covered in Chapter 10, “Preview Related Links,” so that these two separate components could be used together on the same site. In planning out the design of the message board I wanted to create something that had the feeling of an application. I wanted to create an environment that would seem familiar and comfortable for developers, and something that would support the concept that this information was a tool. Since this application is used for accessing information, it was important to not go overboard with the design, but rather create something that allowed quick and intuitive access to the information.
The Login Scene
1 Temporary Background
6 Alert Box
11 Submit Button
2 Blue Background
7 Close Button
12 Login Input Fields
3 Green Background
8 Failed Login Alert Message
13 Variables Used for Login
4 Log In Welcome
9 Welcome Message Outline
5 Login Parameters
10 Welcome Text
Verification
14 Threaded Message Header
288
Flash Site Workshop
How the Login Scene Works Before we roll up our sleeves and take a peak under the hood, you’ll want to open up the message board.fla file from the CH12Files/ CH12-Originals folder on the CD. Make sure to copy the files in this folder to your hard drive from the CD and, when open, double check that you are viewing the Login scene. You will need to have the ASP pages and MySQL properly set up for this application to display content. Consult Chapter 13, “Site Publishing Considerations,” if you require instructions on configuring for publishing. Figure 12.1 The Login scene main Timeline.
With the file open, take a look at the main Timeline. The bottom four layers in the Timeline contain the elements that are used to structure the graphical layout of the interface including backgrounds, graphics, and text. The core functionality of this scene is contained in the top three layers. First, let’s take a look at the Text Fields layer. This layer contains the Input fields that the users will use to enter their name, password, and e-mail information. Once they have entered the information, they will use the Submit button located on the Buttons layer to query the database. The ActionScript on the button creates the XML object used to communicate with the ASP page. Let’s take a quick look at that code: on (release, keyPress “<Enter>”) { 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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Build a Threaded Message Board
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
Site Publishing Considerations
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
Site Publishing Considerations
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
Site Publishing Considerations
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
Site Publishing Considerations
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
Site Publishing Considerations
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 Resources on the Web
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
Flash Resources on the Web
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
Flash Resources on the Web
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
Flash Resources on the Web
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
Flash Resources on the Web
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.)
