Macromedia FLASH MX LEARNING FLASH User Manual
Learning Flash
Trademarks
Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware,
Authorware Star, Backstage, Bright Tiger, Clustercats, ColdFusion, Contribute, Design In Motion, Director, Dream Templates,
Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Flash Lite, Flex, Fontographer, FreeHand,
Generator, HomeSite, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track,
LikeMinds, Lingo, Live Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Breeze,
Macromedia Flash, Macromedia M Logo and Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel,
Made with Macromedia, Made with Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic,
Open Sesame!, Roundtrip, Roundtrip HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what
the web can be, and Xtra are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United
States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned
within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be
registered in certain jurisdictions including internationally.
Third-Party Information
This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not
responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your
own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia
endorses or accepts any responsibility for the content on those third-party sites.
Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com).
Sorenson™ Spark™ video compression and decompression technology licensed from Sorenson Media, Inc.
Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved.
Apple Disclaimer
APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE
ENCLOSED COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY
PARTICULAR PURPOSE. THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES.
THE ABOVE EXCLUSION MAY NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC
LEGAL RIGHTS. THERE MAY BE OTHER RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO
STATE.
Copyright © 2004 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,
translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of
Macromedia, Inc.
Acknowledgments
Director: Erick Vera
Project Management: Julee Burdekin, Erick Vera
Writing: Jay Armstrong, Jody Bleyle, Mary Burger, Francis Cheng, Jen deHaan, Stephanie Gowin, Phillip Heinz, Shimul Rahim,
Samuel R. Neff
Managing Editor: Rosana Francescato
Editing: Mary Ferguson, Mary Kraemer, Noreen Maher, Antonio Padial, Lisa Stanziano, Anne Szabla
Production Management: Patrice O’Neill
Media Design and Production: Adam Barnett, Christopher Basmajian, Aaron Begley, John Francis
Second Edition: June 2004
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
CONTENTS
INTRODUCTION: Learning Macromedia Flash MX 2004 . . . . . . . . . . . . . . . . . . . 9
Additional resources for learning Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
CHAPTER 1: Create a Document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Take a tour of the user interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Change background and Stage size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Change your view of the Stage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
View the Library panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Add graphics to the Stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Add video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
View object properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Add video control behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Use the Movie Explorer to view the document structure . . . . . . . . . . . . . . . . . . . . 19
Test the document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Find help. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
CHAPTER 2: Create Accessible Flash Content . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Specify that your document be accessible to screen readers . . . . . . . . . . . . . . . . . . 22
Provide a document title and description. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Provide a title and description for instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Specify that screen readers ignore elements in your document. . . . . . . . . . . . . . . . 23
Change static text to dynamic text for accessibility . . . . . . . . . . . . . . . . . . . . . . . . 24
Control the tab order and reading order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
About testing your document with screen readers . . . . . . . . . . . . . . . . . . . . . . . . . 26
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3
CHAPTER 3: Write Scripts with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Create an instance of a symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Name button instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Initialize the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
About ActionScript syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Locate ActionScript reference documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Add comments to ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Write a function for a button. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Copy and modify a button function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Check syntax and test your application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
CHAPTER 4: Create an Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Copy input and dynamic text fields. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Name text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Add and name a Button component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Declare variables and values for the prices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Specify values for input text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Write a function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Write an event handler for the component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Test your application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
CHAPTER 5: Work with Layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Select a layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Hide and show layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Lock a layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Add and name a layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Change the order of layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Organize layers in a folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Add a mask layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Add a guide layer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Delete a layer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
CHAPTER 6: Create a User Interface with Layout Tools . . . . . . . . . . . . . . . . . . . 47
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Use guides to align an object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Change the Stage size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Resize objects to match the Stage size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Specify snap alignment settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Align an object using the alignment guides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Align objects using the Align panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Snap objects to each other . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4 Contents
Align objects using the Property inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Align objects using the grid and arrow keys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
CHAPTER 7: Draw in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Select a shape tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Select options to create a polygon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Draw a polygon. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Rotate the shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Use the cut-out feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Transform the shape of your drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Copy strokes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Draw with the Line tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Select and add a different fill color. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Group the shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Create a logo with the Pen tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
CHAPTER 8: Create Symbols and Instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
About creating symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Create a graphic symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Duplicate and modify an instance of a symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Modify a symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Create a movie clip symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Assign an instance name to the movie clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Add an effect to the movie clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
CHAPTER 9: Add Animation and Navigation to Buttons . . . . . . . . . . . . . . . . . . . 69
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Create a button from grouped objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Name a button instance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
View the hit area by enabling buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Change the hit area of a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Align buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Create animation for a button state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Add an action to a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Add navigation to a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Test the SWF file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Contents 5
CHAPTER 10: Add Static, Input, and Dynamic Text . . . . . . . . . . . . . . . . . . . . . . . 77
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Create an expanding-width text block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Create a fixed-width text block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Edit text and change font attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Select device fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Add an input text field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Copy a text field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Assign instance names to text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Create a dynamic text field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Specify format options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
View ActionScript for the dynamic text field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Test the SWF file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Check spelling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
CHAPTER 11: Create a Timeline Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Create a motion tween . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Create a shape tween . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Copy and paste keyframes in an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Change the speed of the animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Test the SWF file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
CHAPTER 12: Create a Presentation with Screens (Flash Professional Only) . . . 91
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
View the screen hierarchy and screen Timelines. . . . . . . . . . . . . . . . . . . . . . . . . . . 92
View screen properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Add content to a presentation slide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Add screen navigation behaviors to buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Add and name a slide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Select and move slides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Add content to a new slide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Add transition behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Test your presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
6 Contents
CHAPTER 13: Add Interactivity with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . 97
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Name button instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Add a scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Move between scenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Control the document with a stop() action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Link a button to a scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Add navigation to return to Scene 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Play a movie clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Use a behavior to play an MP3 file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Test your document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
CHAPTER 14: Create a Form with Conditional Logic and Send Data . . . . . . . . 105
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Add an input text field to collect form data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Add a Submit button to the form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Add an error message. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Add a confirmation message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Add a stop() action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Add frame labels for navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Add conditional logic for the Submit button. . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Pass data out of a SWF file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Write a function for the Try Again button. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Test your SWF file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
CHAPTER 15: Work with Objects and Classes Using ActionScript 2.0 . . . . . . . 113
Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
About classes and object types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Creating an object from a class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Creating a custom class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Create two objects from the Product class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
About extending existing classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Extend the MovieClip class to create a new class . . . . . . . . . . . . . . . . . . . . . . . . . 120
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Contents 7
8 Contents
INTRODUCTION
Learning Macromedia Flash MX 2004
Learning Flash overview
Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 provide everything
you need to create and deliver rich web content and powerful applications. Whether you’re
designing motion graphics or building data-driven applications, Flash has the tools necessary to
produce great results and deliver the best user experience across multiple platforms and devices.
This lessons in this book are designed to introduce you to Flash. As you complete the lessons, you
will learn many of the basic tasks of creating Flash applications.
Note: This book is not a comprehensive manual detailing all the features of Macromedia Flash MX
2004. For in-depth information about using Flash, from within the Flash application, select Flash
Help (Help > Help).
About the lessons
The book includes several step-by-step lessons, designed to teach you the fundamentals of Flash.
We recommend that you go through the lessons using the sample files provided. The path to the
sample file is provided in each lesson.
By completing these hands-on lessons, you’ll learn how to use Flash to add text, graphics, and
animation to your Flash applications. Additionally, you’ll learn how easy it is to customize your
Flash application by using ActionsScript and behaviors.
The lessons are targeted toward beginners to intermediate-level Flash designers and developers
who want to get up to speed quickly.
Each lesson focuses on a specific Flash design feature or topic and takes approximately 10–20
minutes to complete, depending on your experience. You can follow the lessons in this book in
order, or you can start with a lesson or task that best suits your interests and experience.
The Quick Start, Basic Flash, and Basic ActionScript lessons provide an opportunity to explore
the Flash workspace. In these lessons, you learn how to create a Flash document, write
ActionScript, work with video and video control behaviors, and add a Flash component.
9
Where to start
If you are new to Flash, start with the “Getting Started with Flash” chapter in Help (Help >
Help > Using Flash > Getting Started with Flash) to help you become familiar with Flash before
proceeding to the Flash lessons.
To complete the Flash lessons, you can follow the lessons in this book or open the lessons in the
How Do I panel in Flash Help (Help > How Do I). Although the lessons can be completed in any
order, the best way to build your understanding of Flash is to take the lessons in the order they
appear in the How Do I panel.
Typographical conventions
The following typographical conventions are used in this book:
• Menu items are shown in this format: menu name > menu item name. Items in submenus are
shown in this format: menu name > submenu name > menu item name.
• Code font indicates HTML tag and attribute names as well as literal text used in examples.
• Italic code font indicates replaceable items (sometimes called metasymbols) in code.
• Bold roman text indicates text that you should enter verbatim.
Additional resources for learning Flash
Flash contains a variety of media to help you learn the program quickly and become proficient in
creating your own Flash applications.
About the electronic manuals and lessons
The following electronic manuals are available through the Help panel (Help > Help):
• Getting Started with Flash (or Getting Started Help) provides a hands-on introduction to
Flash.
• Using Flash (or Using Flash Help) contains complete information on working in the Flash
authoring tool, including all commands, features, and user interface elements.
• Using Components contains information on adding and configuring components in a Flash
document, as well as information on creating components.
• Using ActionScript in Flash (or Using ActionScript Help) provides a conceptual introduction to
the ActionScript language
• Flash ActionScript Language Reference (or Flash ActionScript Language Reference Help)
documents all actions, methods, and properties in the ActionScript API.
If you are a new user, you’ll find the following information useful:
• Getting Started with Flash (or Getting Started Help) provides basic information about the
Flash workspace and guides you in creating a simple document.
• The lessons on the How Do I tab offer an introduction to using Flash. Refer to the Quick
Start, Basic Flash, and Basic ActionScript lessons (Help > How Do I).
10 Introduction: Learning Macromedia Flash MX 2004
Using the Help panel
The updatable Help panel provides access to information on how to use Flash. For more
information about the Help panel, see the following sections.
Accessing help
The tabs in the Help panel—Help and How Do I—contain the full set of user assistance
information provided with the Flash application.
• You can select the Help tab to display general help information.
• You can select the How Do I tab to display a list of 10- to 20-minute lessons that guide you
through many of the features in Flash.
To access help and the table of contents:
1.
Select Help > Help to open the Help panel.
2.
If the table of contents is not visible, click the Table of Contents button to display it.
A list of help books is displayed. The Help tab is selected by default.
3.
Click a book to open it and display its topics.
4.
Click a topic to select it.
The How Do I tab contains brief lessons that introduce you to the main features of Flash, letting
you practice on isolated examples. If you are new to Flash, or if you have used only a limited set of
features, start with the How Do I tab.
To start the lessons:
1.
Select Help > How Do I to display the How Do I tab of the Help panel.
In the table of contents, you’ll find a list of lessons.
2.
Click a lesson topic to open it.
To search for a word or phrase in the Help panel:
1.
Click the Search icon in the Help panel toolbar.
2.
Type a word or phrase in the text box, then click Search.
A list of topics that contain the word or phrase is displayed.
To close the help table of contents:
• Click the X above the table of contents.
Note: You can access the table of contents again by clicking the Table of Contents button.
To print a help page:
1.
Click the Print button in the Help panel toolbar.
2.
In the Print dialog box, select the printer and other printing options, then click Print.
Additional resources for learning Flash 11
Updating the Help panel
The Update feature allows you to update your help system with new and revised documentation,
including procedures and lessons. You can click the Update button to see if new information is
available. Additionally, if you see a topic in help with the text “For the latest information about
this topic, click the Update button at the top of the Help tab,” you can click this button to update
Flash Help.
To update Flash Help:
1.
Verify that you’re connected to the Internet.
2.
Click the Update button in the Help panel toolbar and follow instructions to download the
help system.
12 Introduction: Learning Macromedia Flash MX 2004
CHAPTER 1
Create a Document
You’re about to experience the power of Macromedia Flash MX 2004 and Macromedia Flash MX
Professional 2004. You’ll see how, in a few minutes, you can create a compelling web experience
that combines video, text, graphics, and media control behaviors. In the process, you’ll learn
about the Flash authoring environment as you accomplish the following tasks:
• Tour the user interface
• Dock and undock panels
• Change the background and Stage size
• Change your view of the Stage
• View your document library
• Add graphics to the Stage
• Add video
• View object properties
• Add video control behaviors
• Use the Movie Explorer to view the document structure
• Tes t t h e d o c u m en t
• Find help
Before taking this lesson, we recommend that you read Getting Started with Flash, to learn about
the Flash workspace. To access this guide, select Help > Getting Started in Flash Help.
13
Take a tour of the user interface
First you’ll open the starting FLA file that you’ll use to complete this lesson. Each lesson includes
one start file, and a finished file that demonstrates how the FLA file should appear upon
completion of the lessons.
1.
To open your start file, in Flash select File > Open and navigate to the file:
■ On Windows 2000 or XP, browse to boot drive\ Documents and Settings\All
Users\Application Data\Macromedia\Flash MX 2004\language\Configuration\ HelpPanel\
HowDoI\ QuickTasks\start_files and double-click document_start.fla.
Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer
settings to see the folder.
■ On Windows 98, browse to boot drive\Windows\ Application Data\Macromedia\Flash MX
2004\language\Configuration\HelpPanel\ HowDoI\QuickTasks\start_files and double-click
document_start.fla.
■ On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/
Flash MX 2004/language/Configuration/HelpPanel/HowDoI/QuickTasks/start_files and
double-click document_start.fla.
Note: The QuickTasks\finished_files folder contains completed versions of lesson FLA files, for
your reference.
The document opens in the Flash authoring environment. The document already includes two
layers in the Timeline. To learn more about layers, select Help > How Do I > Basic Flash >
Work with Layers.
One of the layers is a guide layer, which assists you in placing objects on the Stage. The other
layer is a content layer in which to place the objects that will compose your document.
Note: Guide layers do not appear in the Flash content that you test or publish.
2.
Select File > Save As and save the document with a new name, in the same folder, to preserve
the original start file.
As you complete this lesson, remember to save your work frequently.
Select panel sets and arrange panels
The Training Layout panel set arranges your workspace in a way that facilitates taking lessons.
You’ll use this layout for all lessons that you take in Flash.
• Select Window > Panel Sets > Training Layout.
You can move panels around, and resize them, as follows:
■ You can undock a panel by clicking the upper left corner of the panel, in the Title bar, and
dragging the panel to another location in the work area.
If the panel snaps against a border, it is docked in a new location (or docked in the same
location, if you moved it back). Otherwise, the panel is undocked.
■ You can resize an undocked panel by dragging the lower right edge out to enlarge the panel.
14 Chapter 1: Create a Document
Use tools to create Flash content
The white rectangular Stage area is where you can arrange objects as you wish them to appear in
your published file.
Note: In Windows operating systems, you can open several documents at once and use document
tabs, above the Stage, to navigate between them.
The Tools panel, next to the Stage, offers a variety of controls that let you create text and vector
art. To learn more about Tools panel tools, select Help > How Do I > Basic Flash > Draw in Flash
and Help > How Do I > Basic Flash > Add Static, Input, and Dynamic Text.
1.
Click the Pencil tool in the Tools panel. Click the Stroke color box, in the Tools panel Colors
area, and select any color except white.
2.
Click and drag around the Stage, without releasing the mouse, to draw a line.
You’ve created Flash content. Your finished document will be much more impressive.
Undo actions
Flash can undo a series of changes to your document. You’ll undo the artwork that you
just created.
1.
To see the undo feature in action, first open the History panel (Window >
Other Panels > History).
The Pencil tool appears in the panel, because using the tool was your last action.
2.
Do one of the following:
■ Select Edit > Undo Pencil Tool.
■ Press Control+Z (Windows) or Command+Z (Macintosh).
Your scribbles disappear from the Stage. The History panel now shows a dimmed Pencil tool,
which indicates the undo action was executed.
Flash, by default, is set to undo 100 of your changes, in reverse order of execution. You can
change the default setting in Preferences. To change your preferences, see Setting Preferences
in Flash in the “Getting to Know the Workspace” chapter of Getting Started with Flash (Help >
Getting Started.
3.
To close the History panel, click the options menu in the upper right corner of the panel and
select Close Panel.
View the Timeline
Just above the Stage, you see the Timeline and layers. You can create and name layers, then add
content to frames on layers to organize how your Flash content plays as the playhead moves across
the frames.
Take a tour of the user interface 15
• Move the mouse pointer over the area that separates the Stage from the Timeline. When the
resizing handle appears, drag up or down slightly to resize the Timeline as necessary.
Playhead
Keyframe
Resizing handle
The playhead (the red indicator line) is on Frame 1 in the Timeline. The keyframes are
designated by small circles in the frames, which are filled, indicating there’s content in those
frames. You can add a keyframe to a document when you want the Flash content to change in
some way in that frame.
Change background and Stage size
The Stage provides a preview of how your Flash content will appear in your published file. You’ll
change the size of the Stage, to accommodate artwork designed for a larger Stage, and you’ll
change the background color of the Stage.
1.
In the Tools panel, click the Selection tool.
2.
On the Stage, click anywhere in the gray work area that surrounds the Stage, or on the
background area of the Stage, so that no objects are selected.
The Property inspector, below the Stage, displays properties for the document when no objects
are selected.
3.
To change the Stage background color, click the Background color box and select a light shade
of gray, such as gray with the hexadecimal value of #CCCCCC.
4.
To change the Stage size, click the Size button in the Property inspector. In the Document
Properties dialog box, enter 750 for the Stage width, then click OK.
The Stage resizes to 750 pixels wide.
Change your view of the Stage
You can change your view of the Stage without affecting the actual Stage size of your document.
1.
In the Stage View text box, above the right side of the Stage, type 500%. Then press Enter
or Return.
Your view of the Stage enlarges to 500%.
2.
In the Stage View pop-up menu, which you access by clicking the control to the right of the text
box, select 100% to view the Stage in dimensions that correspond to the size of the published
Flash content.
16 Chapter 1: Create a Document
View the Library panel
Flash content that you import or that is a symbol is stored in your Library panel. To learn
more about symbols and instances, select Help > How Do I > Basic Flash > Create Symbols
and Instances.
• To view the Library panel, select Window > Library.
We’ve already imported library items and created symbols for objects that you’ll use in
this lesson.
Note: Flash also contains a library of buttons that you can use in your document. To view this
library, after taking this lesson, select Window > Other Panels > Common Libraries and select the
Buttons library.
Add graphics to the Stage
To add library items to your document, you verify that you’re adding the object to the correct
layer, then drag the item from the Library panel to the Stage.
1.
In the Timeline, click the Content layer name to select that layer. With the Selection tool
selected, drag the Title movie clip, which contains a bitmap image and vector graphic, from the
Library panel to the Stage and align it over the Title guide.
In Flash, you can work with both bitmap images, which describe graphics using pixels, and
vector art, which uses mathematical representation to describe art. For more information, see
“About vector and bitmap graphics” in Using Flash.
2.
With the Content layer still selected, drag the text symbol from the Library panel to Stage, and
align it with the Trio ZX2004 text that’s already in place as a guide. You can use your keyboard
arrow keys to nudge the text into place.
The title text is actually a graphic created from text.
Add video
The Library panel includes an imported Flash video file (FLV). You’ll add the video to your
document, and Flash will add the necessary frames to play the video.
To learn more about using video in Flash, see “Working with Video” in Using Flash.
1.
Verify that the Content layer is still selected in the Timeline. From the Library panel, drag the
ggb_movie_for_trio_new video to the dark gray Video guide on the Stage.
2.
A dialog box appears that indicates Flash will add 138 frames to the Timeline for the video.
Click Yes.
3.
Drag the playhead across the Timeline to view the video.
Add video 17
View object properties
When you add an object to the Stage, you can select it, then view and change its properties in
the Property inspector. The type of object selected determines which properties appear. For
example, if you select a text object (not a text graphic, which we use in this lesson), the Property
inspector displays settings such as font, type size, and paragraph formatting, which you can
either view or change. If no object is selected, the Property inspector displays properties for the
entire document.
1.
On the Stage, with the Selection tool selected, click the Title graphic.
The Property inspector (Window > Properties) shows specifications, such as height, width, and
Stage coordinates, for the grouped object.
2.
On the Stage, click the bounding box for the video movie clip that you dragged to the Stage and
view its attributes in the Property inspector.
3.
In the Instance Name text box of the Property inspector, enter video as the instance name.
Note: Because ActionScript, the Flash scripting language, often refers to instance names, it is a
good practice to name instances. To learn more about naming instances, select Help > How Do I >
Quick Tasks > Write Scripts with ActionScript.
Add video control behaviors
Behaviors let you add complex functionality to your document easily, without having to know
ActionScript, the Flash scripting language. You’ll now add behaviors for video control.
1.
In the Timeline, click Frame 1 of the Content layer to select it, if it’s not already selected.
2.
On the Stage, click the Play movie clip instance (which looks like a play button) to select it. In
the Behaviors panel (Window > Development Panels > Behaviors), click the Add (+) button and
select Embedded Video > Play. To learn more about symbols and instances, select Help > How
Do I > Basic Flash > Create Symbols and Instances.
3.
In the Play Video dialog box, verify that Relative is selected. Select video, which is the instance
name that you gave to the video clip, then click OK.
4.
On the Stage, click the Pause movie clip instance to select it. In the Behaviors panel, click the
Add (+) button and select Embedded Video > Pause.
5.
In the Pause Video dialog box, again select the video movie clip, then click OK.
6.
On the Stage, click the Rewind movie clip instance to select it. In the Behaviors panel, click the
Add (+) button and select Embedded Video > Rewind.
18 Chapter 1: Create a Document
7.
In the Rewind Video dialog box, select video.
8.
In the Number of Frames to Step Back text box, enter 20.
The Number of Frames to Step Back text box indicates how many frames the playhead should
move back when the user clicks the Rewind button.
Note: Additional video control behaviors let you fast-forward, hide, and show a video.
Use the Movie Explorer to view the document structure
The Movie Explorer helps you arrange, locate, and edit media. With its hierarchical tree structure,
the Movie Explorer provides information about the organization and flow of a document.
1.
Select Window > Other Panels > Movie Explorer.
If necessary, enlarge the Movie Explorer to view the tree structure within the pane.
The Movie Explorer filtering buttons display or hide information.
2.
Click the pop-up menu in the title bar of the Movie Explorer, and select Show Movie Elements
and Show Symbol Definitions, if they’re not already selected.
3.
Configure the filtering buttons, along the top of the Movie Explorer, so the only ones selected
are Show Buttons, Movie Clips, and Graphics; Show Action Scripts; and Show Video, Sounds,
and Bitmaps.
If you move your mouse pointer over a button, a tooltip displays the name of the button.
Examine the list to view some of the assets included in the document, and to see their
relationship to other assets.
4.
In the Movie Explorer pane, expand Actions for Play to view ActionScript that Flash created
when you added the Play video control behavior.
5.
To close the Movie Explorer, click its close box.
Test the document
As you author a document, you should save and test it frequently to ensure the Flash content
plays as expected. When you test the SWF file, click the video control buttons to see if the video
stops, plays, and rewinds as expected.
1.
Save the document (File > Save) and select Control > Test Movie.
The Flash content plays in a SWF file window. While FLA is the extension for documents in
the authoring environment, SWF is the extension for tested, exported, and published
Flash content.
2.
When you finish viewing the SWF content, close the SWF file window to return to the
authoring environment.
Test the document 19
Find help
The lessons provide an introduction to Flash, and suggest ways that you can use features to
create exactly the kind of document required. For comprehensive information about a
feature, procedure, or process described in the lessons, see the Help tab of the Help panel (Help >
Help).
Summary
Congratulations on creating a Flash document that includes graphics, a video, and video control
behaviors. In a few minutes, you learned how to accomplish the following:
• Tour the user interface
• Dock and undock panels
• Change the background and Stage size
• Change your view of the Stage
• View your document library
• Add graphics to the Stage
• Add video
• View object properties
• Add video control behaviors
• Use the Movie Explorer to view the document structure
• Tes t t h e d o c u m en t
• Find help
To learn more about Flash, take another lesson.
20 Chapter 1: Create a Document
CHAPTER 2
Create Accessible Flash Content
With knowledge of a few design techniques and accessibility features in Macromedia Flash MX
2004 and Macromedia Flash MX Professional 2004, you can create Flash content that is
accessible to all users, including those with disabilities. This lesson demonstrates how to create an
accessible document, designed for use with screen readers (which read web content aloud for
visually impaired users) and other assistive technologies, as you accomplish the following tasks:
• Specify that your document be accessible to screen readers
• Provide a document title and description
• Provide a title and description for document instances
• Specify that screen readers ignore elements in your document
• Change static text to dynamic text for accessibility
• Control the order in which users navigate with the Tab key
• Control the reading order with ActionScript
The lesson offers an introduction to basic techniques of making your Flash content accessible. For
detailed and comprehensive information about incorporating accessibility features in your Flash
content, see “Creating Accessible Content” in Using Flash.
21
Set up your workspace
First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout
for taking lessons.
1.
To open your start file, in Flash select File > Open and navigate to the file:
■ On Windows 2000 or XP, browse to boot drive\ Documents and Settings\All
Users\Application Data\Macromedia\Flash MX 2004\language\Configuration\ HelpPanel\
HowDoI\ QuickTasks\start_files and double-click accessibility_start.fla.
Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer
settings to see the folder.
■ On Windows 98, browse to boot drive\Windows\ Application Data\Macromedia\Flash MX
2004\language\Configuration\HelpPanel\ HowDoI\QuickTasks\start_files and double-click
accessibility_start.fla.
■ On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/
Flash MX 2004/language/Configuration/HelpPanel/HowDoI/QuickTasks/start_files and
double-click accessibility_start.fla.
2.
Select File > Save As and save the document with a new name, in the same folder, to preserve
the original start file.
Note: As you complete this lesson, remember to save your work frequently.
3.
Select Window > Panel Sets > Training Layout to modify your workspace for taking lessons.
Specify that your document be accessible to screen readers
You’ll now specify that your document be accessible to screen readers, and provide a name and
description of your document that a screen reader can read aloud.
1.
With nothing selected on the Stage, select Window > Other Panels > Accessibility.
2.
In the Accessibility panel, verify that the following options are selected:
Make Movie Accessible is selected by default and allows Flash Player to pass accessibility
information to a screen reader.
Make Child Objects Accessible allows Flash Player to pass accessibility information nested
inside a movie clip to a screen reader. If this option is selected for the entire document, you can
still hide child objects for individual movie clips.
Auto Label associates text next to another Stage object, such as an input text field, as a label or
title for that element.
22 Chapter 2: Create Accessible Flash Content
Provide a document title and description
In the Accessibility panel for the document, you can enter a name and description for your
document for screen readers.
• In the Name text box, enter Trio ZX2004. In the Description text box, enter Corporate
website about the Trio ZX2004. Includes 6 navigation buttons, overview text, and an
animated car.
Provide a title and description for instances
Now that you’ve provided information about the entire document, you can provide information
about Stage objects included in the document.
1.
Select the Trio Motor Company logo along the top of the Stage. In the Accessibility panel, enter
Tri o M ot or Co mp an y in the Name text box. Do not enter anything in the Description text box.
Not every instance needs a description, which is read with the title information. If the title
name sufficiently describes the function of the object, then you don’t need to include
a description.
2.
With the Accessibility panel still open, select the Dealers button on the Stage.
Information in the Accessibility panel changes to reflect Accessibility options for the
selected object.
In the Accessibility panel for the Dealers button, you do not need to provide a name in the
Title text box, because the button includes a text label that the screen reader will read. If you
did not want the screen reader to read the text in the button, you could deselect Auto Label
when you set up accessibility for the document.
3.
In the Description text box, enter Links to a web page with information about
dealers nationwide.
The other buttons also include text, which the screen reader will read aloud; therefore, you do not
need to provide a title. Since the title of the buttons is fairly self-explanatory, there’s no need for
you to include descriptions.
Specify that screen readers ignore elements in your document
Screen readers follow a specific order when reading web content. However, when content on the
web page changes, most screen readers will begin reading the web content all over again. This
screen reader feature can be problematic when Flash content contains, for example, animation,
which could cause the screen reader to begin again each time there’s a change in the animation.
Fortunately, you can use the Accessibility panel to either deselect Make Object Accessible, so that
the screen reader does not receive accessibility information about the object, or deselect Make
Child Objects Accessible, so that the screen reader does not receive accessibility information
nested within a movie clip. You’ll now do the latter so that users will know the web page contains
an animation, and the animation won’t cause the screen reader to constantly refresh.
Specify that screen readers ignore elements in your document 23
1.
On the Stage, click the car, which is the safety_mc movie clip instance.
2.
In the Accessibility panel, deselect Make Child Objects Accessible. In the Name text box, enter
Trio ZX2004 animation. In the Description text box, enter Animation that includes three
views of the Trio ZX2004.
Change static text to dynamic text for accessibility
Static text is accessible to screen readers. However, you cannot provide static text with an instance
name, which is required to control the tab order and reading order. You’ll change the overview
text paragraph to dynamic text and specify accessibility options.
1.
On the Stage, select the text that begins “The TRIO ZX2004 provides the ultimate in
efficiency ...”
The Accessibility panel changes to indicate that you cannot apply accessibility features to
this selection.
2.
In the Property inspector, select Dynamic Text from the Text Type pop-up menu.
Accessibility settings now appear in the Accessibility panel.
3.
In the Instance name text box, enter an instance name of text9_txt.
Note: To specify a tab order and reading order, which you’ll do next, you must provide an instance
name for all instances. The instance name must be unique in your document.
Control the tab order and reading order
You can create a tab order that determines the order in which objects receive focus when the users
press the Tab key. You can also control the order in which a screen reader reads information about
the object (known as the reading order). You can create both the tab and reading order using the
tabIndex property in ActionScript (In ActionScript, the tabIndex property is synonymous with
the reading order). If you have Flash MX Professional 2004, you can use the Accessibility panel
to specify the tab order, but the tab index that you assign does not necessarily control the
reading order.
To create a reading order, you must assign a tab index to every instance in ActionScript.
If you have Macromedia Flash MX Professional 2004, creating a tab order is as easy as entering a
number in the Tab Index text box. You can then view the tab order directly on the Stage.
To create a tab order in this lesson, use one of the following procedures. To create a reading order
along with a tab order, follow the procedure to control the tab order and reading order using
ActionScript.
24 Chapter 2: Create Accessible Flash Content
If you have Flash MX Professional 2004, you can follow this procedure to create a tab order using
the Accessibility panel:
1.
With the Accessibility panel open, select the logo_mc instance at the top of the Stage. In the
Accessibility panel, enter 1 in the Tab Index text box.
2.
Continue to select each instance on the Stage and enter a tab order number in the Tab Index
text box, using information from the following table:
Instance name Enter the following number in the Tab Index text box
logo_mc 1
dealers_btn 2
orders_btn 3
research_btn 4
text4_txt (the text
above the Overview
button that reads TRIO
ZX2004)
overview_btn 6
powerplant_btn 7
news_btn 8
safety_mc 9
text8_txt 10
text9_txt 11
bevel_mc (the bar
along the bottom of the
Stage)
5
12
If you have Flash MX Professional 2004, follow this procedure to view a tab order:
• Select View > Show Tab Order.
The tab index number that you entered appears next to the instance on the Stage.
Note: A tab order created with ActionScript, rather than the Accessibility panel, does not appear
when Show Tab Order is enabled.
Control the tab order and reading order 25
Follow this procedure to control the tab order and reading order using ActionScript:
1.
In the Timeline, select Frame 1 of the Actions layer.
2.
In the Actions panel (Window > Development Panels > Actions), view the ActionScript that
creates the tab index for each instance in the document.
3.
If you’re using Flash MX 2004, or if you’re using Flash MX Professional 2004 and you did not
create the tab index using the Accessibility panel, delete the /* and */ in the script to uncomment the script:
_root.logo_mc.tabIndex = 1;
_root.dealers_btn.tabIndex = 2;
_root.orders_btn.tabIndex = 3;
_root.research_btn.tabIndex = 4;
_root.text4_txt.tabIndex = 5;
_root.overview_btn.tabIndex = 6;
_root.powerplant_btn.tabIndex = 7;
_root.news_btn.tabIndex = 8;
_root.safety_mc.tabIndex = 9;
_root.text8_txt.tabIndex = 10;
_root.text9_txt.tabIndex = 11;
_root.bevel_mc.tabIndex = 12;
About testing your document with screen readers
You already know the importance of regularly testing your Flash document as you create it, to
ensure it performs as expected. Frequent testing is even more important when you design a
document to work with assistive technologies such as screen readers. In addition to testing tab
order in your SWF file, you should also test your tab order in various browsers; some browsers
differ in how the user tabs to or out of Flash content. For information about resources to test your
document with a screen reader, see “Testing accessible content” in Using Flash.
Summary
Congratulations on creating accessible Flash content. In a few minutes, you learned how to
accomplish the following tasks:
• Specify that your document be accessible to screen readers
• Provide a document title and description
• Provide a title and description for document instances
• Specify that screen readers ignore elements in your document
• Change static text to dynamic text for accessibility
• Control the order in which users navigate with the Tab key
• Control the reading order with ActionScript
Macromedia maintains an extensive website devoted to accessibility. For more information
about accessibility with Macromedia products, see the Macromedia accessibility website at
www.macromedia.com/macromedia/accessibility.
26 Chapter 2: Create Accessible Flash Content
CHAPTER 3
Write Scripts with ActionScript
The ActionScript language that is part of Macromedia Flash MX 2004 and Macromedia Flash
MX Professional 2004 offers designers and developers a variety of benefits. With ActionScript
you can control document playback in response to events such as elapsed time and loading data;
add interactivity to a document in response to user actions, such as a button click; use built-in
objects, such as a button object, with built-in associated methods, properties, and events; create
custom classes and objects; and create more compact and efficient applications than you could
create using user interface tools, all with code that you can reuse.
ActionScript is an object-oriented scripting language that offers control over how your
Flash content plays. In subsequent lessons, you’ll see how ActionScript has evolved into
ActionScript 2.0 to comprise a core set of language elements that make it easier to develop
object-oriented programs.
You’ll now use ActionScript to accomplish the following tasks:
• Name instances following recommended practices
• Initialize a document
• Apply ActionScript syntax
• Locate ActionScript reference documentation
• Add comments to ActionScript
• Write a f unct i on
• Copy and modify a function
• Check syntax and test your application
27
Set up your workspace
First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout
for taking lessons.
1.
To open your start file, in Flash select File > Open and navigate to the file:
■ On Windows 2000 or XP, browse to boot drive\ Documents and Settings\All Users\
Application Data\Macromedia\Flash MX 2004\language\Configuration\ HelpPanel\
HowDoI\ QuickTasks\start_files and double-click scripts_start.fla.
Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer
settings to see the folder.
■ On Windows 98, browse to boot drive\Windows\ Application Data\Macromedia\Flash MX
2004\language\Configuration\HelpPanel\ HowDoI\QuickTasks\start_files and double-click
scripts_start.fla.
■ On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/
Flash MX 2004/language/Configuration/HelpPanel/HowDoI/QuickTasks/start_files and
double-click scripts_start.fla.
Note: The QuickTasks\finished_files folder contains completed versions of lesson FLA files, for
your reference.
2.
Select File > Save As and save the document with a new name, in the same folder, to preserve
the original start file.
3.
Select Window > Panel Sets > Training Layout to modify your workspace for taking lessons.
Create an instance of a symbol
You’ll drag an instance of an animated movie clip from the library to the Global Positioning
System artwork on the Stage. You’ll then follow the recommended practice of always naming
instances—both to prompt code-hinting and because in your scripts you generally refer to
instance names rather than symbol names. Code hints are the tooltips that prompt you with the
correct ActionScript syntax.
1.
In the Tools panel, click the Selection tool. Select the map layer in the Timeline, and click the
padlock next to the map layer to unlock that layer.
2.
To place the movie clip accurately, select View > Snapping. Select Snap Align and Snap to
Objects if the commands are not already selected.
3.
From the Library panel (Window > Library), drag map_skewed to the black background area
of the Stage.
Because guides don’t appear when you first drag an object from the Library panel, you’ll release
the object and then drag it again.
28 Chapter 3: Write Scripts with ActionScript
4.
Drag the map_skewed movie clip on the Stage again so that the align guides appear. Use the
guides to align the movie clip to the top and left edges of the GPS screen.
Note: If you make an error in placement, either drag the movie clip again, or press Control+Z
(Windows) or Command+Z (Macintosh) to undo your changes.
5.
With the instance of map_skewed selected on the Stage, type screen_mc in the Instance Name
text box of the Property inspector (Window > Properties).
Flash is designed to present code hints when you name your instances with the
appropriate suffix:
■ When naming a movie clip instance, always give the instance a suffix of _mc, as
in screen_mc.
■ When naming a button, use the _btn suffix.
■ When naming a text field, use the _txt suffix.
Note: For more information about additional instance name suffixes that prompt code hints, see
“Writing code that triggers code hints” in Using ActionScript in Flash.
Name button instances
Using the appropriate suffix to prompt code hinting, you’ll provide instance names for two
button instances that are already on the Stage.
1.
In the Timeline, unlock the Buttons layer.
2.
On the Stage, select the instance of play_button (the large green button).
3.
In the Instance Name text box of the Property inspector, type onButton_btn to name
the instance.
4.
On the Stage, select the instance of button_stop (the small red button).
5.
In the Instance Name text box of the Property inspector, type offButton_btn to name
the instance.
Name button instances 29
Initialize the document
Applications have an initial state that specifies how the content first appears to users. You initialize
properties and variables in the first frame of a document. You’ll specify that the map movie clip
not be visible when the SWF file first plays.
1.
Select Frame 1 of the Actions layer. If the Actions panel isn’t open, select Window >
Development Panels > Actions.
Actions - Frame appears at the top of the panel, which indicates that you selected a frame in
which to apply ActionScript. It’s a good practice to verify that you’re attaching ActionScript to
the intended frame or object.
The Actions panel includes a Script pane, the blank text entry area, in which you can enter text
directly; an Actions toolbox, which lets you select ActionScript to add to your script; and a
Script navigator, which functions like the Movie Explorer.
2.
Along the top of the Actions panel, click Insert Target path.
3.
In the Insert Target Path dialog box, verify that Relative, meaning relative path, is selected.
From the hierarchical tree in the dialog box, select screen_mc. Then click OK.
A target path tells ActionScript the location of an object within the overall structure of
a document. For more information about paths, see “Using absolute and relative target paths”
in Using Flash.
4.
Click in the Script pane, at the end of the screen_mc text, and type a period (.).
5.
When you type the period, code hints appear for the movie clip, because you used the _mc suffix
when naming the instance. Double-click
the following:
= false;
This line of code makes the screen_mc movie clip invisible on the Stage.
Note: If code hints don’t appear, you don’t have code hints selected as a preference in the Actions
panel. You can type
clicking the options menu in the upper right corner of the Actions panel. From the options menu,
select Preferences, and then select Code Hints on the ActionScript tab.
_visible directly in the Script pane. You can also change your preferences by
_visible from the list of code hints, and type
Throughout authoring, remember to save your document frequently.
About ActionScript syntax
All languages, whether computer languages or written and spoken “human” languages, follow
specific rules that foster comprehension. These rules are known as the language syntax.
Flash uses dot syntax, which means that the period (.) links parts of a script. Other ActionScript
syntax elements include the following:
• A semicolon (;) in an ActionScript statement, like a period in an ordinary sentence, indicates
the end of a statement.
• Parentheses () group arguments that apply to an ActionScript statement.
• Curly braces {} group related ActionScript statements. You can use nested braces to create a
hierarchy of statements.
30 Chapter 3: Write Scripts with ActionScript
Loading...