User manual MACROMEDIA FLASH 8 - FLASH SAMPLES

Flash Samples Trademarks 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and WebHelp are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally. Third-Party Information This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites. Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com). SorensonTM SparkTM video compression and decompression technology licensed from Sorenson Media, Inc. Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved. Macromedia Flash 8 video is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com. Visual SourceSafe is a registered trademark or trademark of Microsoft Corporation in the United States and/or other countries. Copyright © 2005 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without written approval from Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which this manual was provided may print out one copy of this manual from an electronic version of this manual for the sole purpose of such owner or authorized user learning to use such software, provided that no part of this manual may be printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation, commercial purposes, such as selling copies of this documentation or providing paid-for support services. Acknowledgments Project Management: Sheila McGinn Writing: Jay Armstrong, Jen deHaan Managing Editor: Rosana Francescato Lead Editor: Lisa Stanziano Editing: Evelyn Eldridge, Mark Nigara, Lisa Stanziano, Anne Szabla Production Management: Patrice O'Neill, Kristin Conradi, Yuko Yagi Media Design and Production: Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo Noda, Paul Rangel, Arena Reed, Mario Reynoso Special thanks to Jody Bleyle, Mary Burger, Lisa Friendly, Stephanie Gowin, Bonnie Loo, Mary Ann Walsh, Erick Vera, the beta testers, and the entire Flash and Flash Player engineering and QA teams. First Edition: September 2005 Macromedia, Inc. 601 Townsend St. San Francisco, CA 94103 Contents Chapter 1: Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Animated drop shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Animation and gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Chapter 2: Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Accessibility features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Chapter 3: Masking. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Device font masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Scriptable masks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Chapter 4: Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Text sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Multilingual content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Chapter 5: Behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Photo scrapbook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Chapter 6: Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Component application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Dial component sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Login component sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Tip calculator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Components jukebox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Chapter 7: ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Custom Flash Player context menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Filters with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Tween class, the TransitionManager class, and progress bars . ActionScript data types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bitmap caching with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 24 25 25 26 26 3 Drawing with ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 ActionScript arrays example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Interaction between the browser and Flash Player . . . . . . . . . . . . . . . . 28 Stage size control with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Text loading with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Formatted text with ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 FlashType sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Login sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 String processing with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Image manipulation with the BitmapData class . . . . . . . . . . . . . . . . . . . 31 Text field manipulation with ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . 31 Photo gallery with tree navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Photo gallery with thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 File upload with the FileReference API . . . . . . . . . . . . . . . . . . . . . . . . . . 33 XML blog tracker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 XML language picker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 XML menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Chapter 8: Data Integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35 News reader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 WebServiceConnector component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Data integration XML sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Flash and PHP integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Chapter 9: Extending Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39 Shape command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Get and set filters command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 PolyStar tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Trace Bitmap panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Sample DLL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Chapter 10: Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43 Two-way navigation sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Four-way navigation sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Input text field sample. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Movie clip menu sample. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Simple button menu sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Soft keys example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Animated cartoon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Flash Lite news reader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Strategy game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 4 Contents Introduction Macromedia Flash Basic 8 and Macromedia Flash Professional 8 provide everything you need to create and deliver rich web content and powerful applications. Whether you're designing motion graphics or building datadriven applications, Flash has the tools necessary to produce great results and deliver the best user experience across multiple platforms and devices. The samples in this book are designed to introduce you to Flash. As you explore the samples, you will see many of the basic techniques used in creating Flash applications. For additional samples see www.macromedia.com/go/flash_samples. This book is not a comprehensive manual that details all of the features of Flash. For in-depth information about how to use Flash, see Using Flash and Learning ActionScript 2.0 in Flash. NO TE 5 6 Introduction CHAPTER 1 Graphics Graphics samples are provided when you install Macromedia Flash 8. This chapter contains a brief overview of each sample. This chapter contains the following sections: Animated drop shadow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Animation and gradients. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 1 Animated drop shadow This sample shows how to create a realistic-looking animated drop shadow by layering two instances of the same movie clip and adding a drop shadow filter to the lower layer. To re-create the process of constructing this sample, you first create the shadow effect for the dog by nesting the animation inside a movie clip. You then duplicate the movie clip instance and place it behind the original instance. (You can keep the duplicate on the same layer and arrange it behind the original instance, or paste it to a new layer below the original.) You then select the duplicate instance and, in the Filters tab of the Property inspector, select Drop Shadow from the Plus (+) menu. Next, adjust the strength level to around 45% and select Hide Object. This hides the movie clip object but reveals the drop shadow filter properties. You can make further adjustments by setting Quality to Low, Medium, or High, or modifying the amount of blur, the color, the angle, or the distance of the blur effect from the original graphic. 7 To prevent this effect from looking too much like a drop shadow against a flat wall behind the original object, you can use the Free Transform tool to skew the filtered movie clip instance. This technique takes a bit of trial and error. Squash and skew the instance until it looks as if the shadow is being cast upon a floor. (You may need to reposition the instance.) Test the movie clip, and you see the effect come to life. You can find the sample source files, drop_shadow_dog.fla and drop_shadow_monkey.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Graphics\AnimatedDropShadow. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Graphics/ AnimatedDropShadow. These samples were developed by Chris Georgenes. Animation and gradients This sample shows how to create a realistic-looking animation with gradients and drop shadows. To re-create the process of constructing this sample, you first design the eight-ball graphic. Start by mixing a radial gradient containing three colors: black, white, and a medium gray. Then create a circle with the Oval tool (hold down Shift to constrain the shape so it is perfectly round), and fill it with the new radial gradient. Using the Gradient Transform tool, edit the radial gradient fill by offsetting it from the center of the circle. This gives the illusion of depth as the off-center white highlight gradually changes to black and a subtle amount of gray appears in the lower-right corner of the sphere. This is crucial for making a convincing-looking sphere; it suggests light wrapping around from behind the ball. Then convert the gradient fill to a graphic symbol and edit it further by adding a new layer and applying a shadow using a linear gradient. The linear gradient uses two colors with varying amounts of alpha mixed in. 8 Graphics The next step is to create a movie clip symbol and place this eight-ball graphic inside it. Inside this movie clip is where the "8" graphic is added along with a mask layer. Then add a mask that is the same size and shape as the eight ball, and use the Free Transform tool and motion tweening to create the illusion of the ball rolling in various directions by moving and squashing the "8" graphic across the surface of the circle. The mask constrains the visibility of the "8" graphic to the exact area of the circle below it. This makes for a convincing illusion of the ball rolling. Then add animations of the ball rolling to a stop and starting from a stationary position. Use descriptive frame labels and simple frame actions so this movie clip can be targeted later with ActionScript from the main timeline. The movie clip has to be set up this way; it uses a drop shadow, which can be applied only to movie clip instances. Applying the drop shadow is the easiest part, thanks to the graphics filters in Flash. You simply select the movie clip instance, and from the Filters tab of the Property inspector, click the Plus (+) pop-up menu and select Drop Shadow. From there you can adjust the amount of blur, strength, quality, color, angle distance, and so on. The drop shadow filter is used to create blurs only when the eight ball is animated moving rapidly across the screen. This emphasizes the speed at which the ball is moving and creates a dynamic visual effect. You can find the sample source file, animation_and_gradients.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Graphics\AnimationAndGradients. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Graphics/ AnimationAndGradients. This sample was developed by Chris Georgenes. Animation and gradients 9 10 Graphics CHAPTER 2 Accessibility An accessibility sample is provided when you install Macromedia Flash 8. This chapter contains a brief overview of this sample. This chapter contains the following section: Accessibility features. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2 Accessibility features This sample shows how to use accessibility features such as tab ordering, components, and the Accessibility panel. In this sample, you can see how to use the new authoring tool features and user interface, which are geared toward building applications that contain the accessibility features. An arrow moves to indicate which element on the Stage has the focus. Explore the source code to learn more about how to take advantage of the Flash accessibility features. You can find the sample source file, AccessibleApplications.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Accessibility\AccessibleApplications. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Accessibility/ AccessibleApplications. 11 12 Accessibility CHAPTER 3 Masking Masking samples are provided when you install Macromedia Flash 8. This chapter contains a brief overview of each sample. This chapter contains the following sections: Device font masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Scriptable masks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3 Device font masking This sample explores Flash Player support for masking device fonts. The main features illustrated in the sample are device font masking, components, and scriptable masks. Newly added support in Flash Player for masking device fonts expands the possibilities for using scriptable masks on Flash content. Device font masking allows device fonts to be used inside components that mask their content, as well as custom masks that you create. This sample shows examples of both types of masking. You can find the sample source file, DeviceFontMasking.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Masking\DeviceFontMasking. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Masking/ DeviceFontMasking. 13 Scriptable masks This sample shows how to dynamically mask Flash content at runtime using scriptable masks and components. Scriptable masking allows precise control over how masks behave at runtime, and allows the mask and the masked content to be dynamically changed at runtime. This sample shows different types of masks and masked content that are controlled by a user interface built with components. Explore this sample to learn more about masking and building interfaces with components. You can find the sample source file, ScriptableMasksPart2.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Masking\ScriptableMasksPart2. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Masking/ ScriptableMasksPart2. 14 Masking CHAPTER 4 Text Text samples are provided when you install Macromedia Flash 8. This chapter contains a brief overview of each sample. This chapter contains the following sections: Text sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Multilingual content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4 Text sample This sample uses the many new text enhancements added to Macromedia Flash Basic 8 and Macromedia Flash Professional 8. The features highlighted in this sample are text styles, inline images, hyperlink improvements, and small text optimization. The text enhancements provide better and more precise control over text as it is entered in Flash Player. This sample loads an external HTML file named sample.html into a text field in the SWF file. However, you could use any text file that incorporates a tag-based format such as XML or HTML. New support for Cascading Style Sheets allows Flash to style the text in a given text field for each tag before displaying it. This sample uses a style sheet named style.css. Additionally, Flash Player supports the img tag, allowing inline images that your text wraps around. You can find the sample source file, TextEnhancements.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Text\TextEnhancements. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Text/ TextEnhancements. 15 Multilingual content This sample, featuring the Strings panel, shows a streamlined approach to developing and managing content in several languages. The new Strings panel provides for easy and fast content development in different languages. Localized content for text fields inside the document is kept in language-specific XML files in directories alongside the document. This sample has content in several languages. The language displayed corresponds to the current language of the host operating system. Explore this sample to see how the Strings panel manages localized content. You can find the sample source file, MultiLingualContent.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Text\MultilingualContent. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Text/ MultilingualContent. 16 Text CHAPTER 5 Behaviors A behaviors sample is provided when you install Macromedia Flash 8. This chapter contains a brief overview of this sample. This chapter contains the following section: Photo scrapbook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 5 Photo scrapbook This sample shows how to build an interactive photo scrapbook by using behaviors instead of scripting. Behaviors provide an easy way to add interactivity to your Flash content without having to write ActionScript. In this sample, multiple behaviors are combined to create an interactive scrapbook. Explore the source file to learn more, or customize it by adding your own pictures. You can find the sample source file, BehaviorsScrapbook.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Behaviors\BehaviorsScrapbook. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Behaviors/ BehaviorsScrapbook. 17 18 Behaviors CHAPTER 6 Components Several component samples are provided when you install Macromedia Flash 8. This chapter contains a brief overview of each sample. This chapter contains the following sections: Component application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Dial component sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Login component sample. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Tip calculator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Components jukebox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 6 Component application This sample is the starter file you can use in the tutorial "Creating an Application with Components (Flash Professional Only)" in Using Components. The end result of the tutorial is a file identical to first_app.fla. You can find this starter Flash (FLA) file, first_app_start.fla, and the finished file, first_app.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Components\ ComponentsApplication. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Components/ ComponentsApplication. 19 Dial component sample This sample provides an example of a dial component with a getter/setter property that gets or sets the position of the needle on the dial. This sample is discussed in "Building your first component" in Using Components. You can find the sample source file, Dial.fla, in the Samples folder on your hard disk. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Components\DialComponent. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Samples/Components/ DialComponent. Login component sample The sample LogIn component files are the completed files created in the LogIn tutorial in Chapter 6, "Creating Components" in Using Components. This sample LogIn component demonstrates how to incorporate the power of Flash components into your own custom components using the version 2 Macromedia Component Architecture and ActionScript 2.0. This sample demonstrates how to create a form that captures and validates data, sends it to a server, and receives a response. You can bring Flash components into your own components by importing their uncompiled movie clip symbols from the library in StandardComponents.fla. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\language\Configuration\ComponentFLA\StandardComponents.fla. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Configuration/ComponentFLA/ StandardComponents.fla 20 Components