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 ONeill 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 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
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 youre 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, youll learn how to use Flash to add text, graphics, and animation to your Flash applications. Additionally, youll 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 1020 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.

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, youll find the following information useful:

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.

Set up your workspace

First, youll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.
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.
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.

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

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 youve 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
Trio Motor Company 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 dont 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, theres 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 theres 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. Youll now do the latter so that users will know the web page contains an animation, and the animation wont cause the screen reader to constantly refresh.

= function(){

The line of code that you just completed should appear as follows:
this.onButton_btn.onRelease = function(){
You already know how to select objects in the Insert Target Path dialog box; youll now enter the instance names directly into the Script pane.
5. Press Enter or Return and type the following:
screen_mc._visible = true;
6. Press Enter or Return and type }; to specify the end of the statement.
The function should appear as follows:
//function to show animation this.onButton_btn.onRelease = function(){ screen_mc._visible = true; };
Copy and modify a button function
You just created one function that sets the visible property of a movie clip to true when the user releases the mouse button after a button click. You can probably guess how to create another function that hides the screen_mc movie clip: by setting the movie clip _visible property to false when the user clicks an Off button. Youll create that function now.
1. In the Script pane, select the entire function that you just typed, including the comment, curly
brackets, and semicolon. Copy the text as you normally would, using Control+C (Windows) or Command+C (Macintosh).
2. In the Script pane, place the insertion point after the last line of code. Then press Enter or
Return twice, and paste the text as you normally would, using Control+V (Windows) or Command+V (Macintosh).
3. In the copied function, change the text in onButton_btn to read offButton_btn.
Remember, earlier you assigned an instance name of offButton_btn to an instance.
4. In the copied function, change the visible property of the screen_mc movie clip from true

to false.

5. In the copied function, change the commented text after the slashes to read function to

hide animation.

Your entire script should appear as follows:
//Initialize document to hide screen movie clip. this.screen_mc._visible = false; //function to show animation this.onButton_btn.onRelease = function(){ screen_mc._visible = true; };
//function to hide animation this.offButton_btn.onRelease = function(){ screen_mc._visible = false; };

Declare variables and values for the prices
For your application to multiply the quantity of parts selected by the price of the part, you need to define a variable for each part in ActionScript. The value for the variable is the cost of the part.
1. In the Timeline, click Frame 1 of the Actions layer and open the Actions panel (Window >
Development Panels > Actions).
2. In the Script pane, type //declare variables and values for car part prices.
The parallel slashes (//) indicate that the text that follows is a comment. As a best practice, always add comments that offer an explanation of your ActionScript.
Note: As you take this lesson, you might find that youd like to turn off code hintsthe tooltips that prompt you with the correct ActionScript syntax. If so, you can turn off code hinting by clicking the options menu in the upper right corner of the Actions panel. Select Preferences, and then deselect Code Hints on the ActionScript tab.
3. Press Enter or Return and type the following to indicate the cost of each part:
var priceCD = 320; var priceShocks = 150; var priceCover = 125;
Specify values for input text fields
Youll specify values for the input text fields. Youll use the values when you write ActionScript that multiplies the quantity and cost values.
1. In the Script pane, with the insertion point after the text that reads 125;, press Enter or Return
twice and type the following comment:
//set initial values for the quantity text fields
2. Press Enter or Return, and type the following:
qty1_txt.text = 0; qty1_txt.text
is the instance name that you gave the first input text field under the QTY column. is a property that defines the initial value in the text field, which you specify is 0.
3. Press Enter or Return and type the following two lines to set values of 0 for the other two

QTY fields:

qty2_txt.text = 0; qty3_txt.text = 0;
When you finish, the ActionScript should appear as follows:
//set initial qty1_txt.text qty2_txt.text qty3_txt.text values for the quantity text fields = 0; = 0; = 0;

Write a function

A function is a script that you can use repeatedly to perform a specific task. You can pass parameters to a function, and it can return a value. In this lesson, every time your user clicks the Calculate button, a function will run that multiplies data in the input text fields and returns values in the dynamic text fields. Youll write that function now.
1. In the Script pane, with the insertion point after the ActionScript that reads qty3_txt.text =
press Enter or Return twice and type the following comment:
//calculate quantity times price
2. Press Enter or Return and type the following to create a function that runs when the playhead

enters Frame 1, where youre attaching the script:
this.onEnterFrame = function (){
3. Type the following ActionScript to specify how the function should multiply the values in the
input text fields for the airplane:
price1_txt.text = Number (qty1_txt.text)*Number (priceCD); price1_txt.text
is the instance name that you gave to the top price input text field on the Stage.
defines the text that should appear in the text field, which is the number of parts multiplied by the cost of the part: the $320 that you set as the value for the priceCD variable.
4. Press Enter or return and type the following two lines:
price2_txt.text = Number (qty2_txt.text)*Number (priceShocks); price3_txt.text = Number (qty3_txt.text)*Number (priceCover); };
Your function should appear as follows:
//calculate quantity times price this.onEnterFrame = function (){ price1_txt.text = Number (qty1_txt.text)*Number (priceCD); price2_txt.text = Number (qty2_txt.text)*Number (priceShocks); price3_txt.text = Number (qty3_txt.text)*Number (priceCover); };
Write an event handler for the component
For your SWF file to react to events such as a mouse click, you can use event handlers ActionScript associated with a particular object and event. Youll use an on() event handler for the Button component that calculates the total price when users click the button. For more information about event handlers, see Handling Events in Using ActionScript in Flash.
1. On the Stage, click the Button component and go to the Actions panel.
The tab at the bottom of the Actions panel, labeled calculate, indicates that youre attaching the script directly to the selected object rather than to a frame.
2. In the Script pane, type the following comment:

//Calculates total price

3. After the comment, press Return or Enter and type the following to create a handler for the
PushButton component that you placed on the Stage:

on(click) {

You just typed the start of the on() event handler. The (click) specifies that the event should occur when the user clicks the Calculate button. A Button component has its own Timeline. In the Timeline hierarchy, the component Timeline is a child of the main Timeline. To point to elements from the Button component Timeline to the main Timeline in this script, you use the code with (_parent).

Note: If you make an error drawing the circle, press Control+Z (Windows) or Command+Z (Macintosh) to undo your circle.
3. In the Tools panel, click the Selection tool. On the Stage, click within the circle and press

Backspace or Delete.

Transform the shape of your drawing
Using the Free Transform tool you can scale, rotate, compress, stretch, or skew lines and shapes. Youll use the Free Transform tool to compress your drawing.
1. In the Tools panel, select the Free Transform tool. Double-click the hexagon on the Stage to
select both the stroke and the fill.
2. Drag the top middle handle of the Free Transform tool down to transform the hexagon into the

following shape:

Copy strokes
You can select and copy strokes, which youll do now to create the lower edge of the bolt.
1. With the Selection tool, click anywhere on the Stage or work area, away from an object, to

deselect the shape.

2. Hold Shift and click the three lines of the shape on the Stage that comprise the bottom of the
hexagon to select them, as shown in the following illustration:
3. Press Shift + Alt and drag down slightly to drag a copy of the three lines, as in the

following illustration:

Draw with the Line tool
The Line tool allows you to draw straight lines in any direction.
In the Tools panel, select the Line tool. On the Stage, draw four vertical lines from the hexagon
to the stroke copies that you dragged down, as shown in the following illustration:
Select and add a different fill color
You can use the Paint Bucket tool to change an existing color and to fill empty areas surrounded by lines. Youll use the Paint Bucket tool to add a fill color to the empty areas of your drawing.
1. In the Tools panel, select the Paint Bucket tool. In the Colors area, click the Fill Color control
and select blue with the hexadecimal value of #3366FF.
2. On the Stage, click within the lines to add the selected color to the empty areas:

Group the shape

You can manipulate the stroke and fill of a shape as separate entities, as you did earlier, or you can group the stroke with the fill to manipulate the shape as a single graphic, which youll do now.
1. With the Selection tool, drag around the shape to select both the stroke and the fill. Select

Modify > Group.

2. Click the fill area and move the shape around the left side of the Stage, as desired, to place it.
Create a logo with the Pen tool
The Pen tool offers a way to draw precise straight or curved line segments. You click to create points on straight line segments, and click and drag to create points on curved line segments. You can adjust the segments by adjusting points on the line. Youll use the Pen tool to create the logo.
1. In the Tools panel, select the Pen tool. 2. Click the dot next to the number 1, and then click the dot next to the number 2 to create a

2. With the duplicate selected, select Tint from the Color pop-up menu in the Property inspector. 3. In the RGB area, enter 0 in the Red Color pop-up menu, 0 in the Green Color pop-up menu,
and 255 in the Blue Color pop-up menu. Then press Enter or Return. The duplicate instance turns blue, but the original instance remains unchanged.

Modify a symbol

You can enter symbol-editing mode by double-clicking any instance of a symbol. Changes that you make in symbol-editing mode affect all instances of the symbol.
1. Do one of the following to enter symbol-editing mode:
On the Stage, double-click one of the car instances. In the Library panel, double-click the CarGraphic symbol.
Next to Scene 1 toward the top of the workspace, the name of the symbol appears, which indicates that youre in symbol-editing mode for the named symbol.
2. In the Tools panel, select the Free Transform tool and drag around the bottom car to select the
entire car. In symbol-editing mode, the car is a graphic, within a symbol, that you can manipulate as you would any other vector graphic.
3. Drag the middle-right sizing handle of the Free Transform tool slightly to the right, to stretch

the symbol.

4. Click Scene 1, above the Timeline, to exit symbol-editing mode.
Both instances of the symbol reflect the transformation.
Create a movie clip symbol
A movie clip symbol is analogous in many ways to a document within a document. This symbol type has its own Timeline independent of the main Timeline. You can add movie clips within other movie clips and buttons to create nested movie clips. You can also use the Property inspector to assign an instance name to an instance of a movie clip, then reference the instance name in ActionScript. Youll convert the tire on the Stage into a movie clip.
1. With the Selection tool, click the tire on the Stage to select it and select Modify > Convert

to Symbol.

2. In the Convert to Symbol dialog box, enter MCWheel as the name, and select MovieClip as
3. In the Registration grid, this time select the center square as the registration point, so the center
of the movie clip becomes the axis around which the symbol rotates. Then click OK. The image on the Stage is now an instance of the MCWheel symbol in the library.
Assign an instance name to the movie clip
To refer to an instance in ActionScript, and as a general best practice, always assign instance names to buttons and movie clip symbols. (You cannot assign an instance name to a graphic symbol.)

Next, youll specify what the function does: it plays the movie clip on the root Timeline, which is the main Timeline. In your script, youll refer to the movie clip by the linkage identifier name in the Linkage Properties dialog box (MCTrio). Additionally, even though you didnt place an instance of the MCTrio symbol on the Stage, youll use ActionScript to create an instance name for the symbol. The instance name that youll specify is trio_mc.
3. With the insertion point at the end of the last line of script, press Enter or Return. Then type
_root.attachMovie("MCTrio", "trio_mc", 1);
The number 1 in the script that you just typed refers to the depth on the layer in which to play the movie clip. Every movie clip instance has its own z axis (depth) that determines the stacking order of a movie clip within its parent SWF file or movie clip. When you create a new movie clip at runtime using the attachMovie() method, you always specify a depth for the new clip as a method parameter.
Note: For more information about the attachMovie() method, see attachMovie() in the Flash ActionScript Language Reference. Additionally, you can use the Flash ActionScript Language Reference for information about ActionScript that allows you to manage depth; getNextHighestDepth(), getDepth(), getInstanceAtDepth() are methods of the MovieClip class. The DepthManager class allows you to manage the relative depth assignments of a movie clip.
Specify movie clip Stage coordinates In addition to the z axis for the movie clip, you must specify the x and y coordinates to place the movie clip within the Stage area at runtime.
Press Enter or Return after the last line in the Script pane and type the following:
trio_mc._x = 275; trio_mc._y = 200; };
Unload the movie clip After the movie clip plays, you need a way to remove the movie clip from the Stage when the user goes to Scene 2. You can modify your script for the goScene_btn to unload the movie clip.
1. In the Timeline, select Frame 1 of the Actions layer. Then click at the end of the following line
of script in the Script pane, within the function that takes the user to Scene 2, to place the insertion point:
gotoAndStop("Scene 2", 1);
2. Press Enter or Return and type the following script, which unloads the movie clip when the
function runs, so that the movie clip does not continue to play when the user goes to Scene 2:
unloadMovie("trio_mc");
Your entire function for the goScene_btn should appear as follows:

from the Product class using the data shown in the following table (the ActionScript that youll create appears after the table).

Instance name

pedals
id prodName description 0 Clipless Pedals Excellent cleat engagement 1 ATB Available in comfort and aero design

handleBars

id prodName description
3. Verify that you created the objects as follows:
var handleBars:Product = new Product (1, "ATB", "Available in comfort and aero design"); var pedals:Product=new Product(0,"Clipless Pedals","Excellent cleat engagement");
4. Trace the description property of pedals:
trace (pedals.getDescription ());
5. Save and test the document. You should see the description of pedals in the Output panel.
Note: An example finished file of the document you just created, named handson2.fla, is located in your finished files folder. For the path, see Set up your workspace on page 113.
About extending existing classes
The extends keyword in ActionScript 2.0 allows you to use all the methods and properties of an existing class in a new class. For example, if you wanted to define a class that inherited everything from the MovieClip class, you could use the following:
class Drag extends MovieClip {}
The Drag class now inherits all properties and methods from the existing MovieClip class, and you can use MovieClip properties and methods anywhere within the class definition, as in the following example:
Note: The following ActionScript is an example only. You should not enter the script in your lesson FLA file. class Drag extends MovieClip { // constructor function Drag () { onPress=doDrag; onRelease=doDrop; } private function doDrag():Void { this.startDrag(); } private function doDrop():Void { this.stopDrag(); } } Note: The Convert to Symbol dialog box now offers a class field in which you can associate visual objects (such as movie clip) with any class that you define in ActionScript 2.0.
Extend the MovieClip class to create a new class
Youll create a new class by extending the built-in MovieClip class.

1. Create a new Flash document and name it Shape.fla. 2. Using the drawing tools, draw a shape on the Stage. With the entire shape selected, right-click
(Windows) or Control-click (Macintosh) the shape and select Convert to Symbol from the context menu.
3. In the Convert to Symbol dialog box, select Movie Clip as the behavior, and click Advanced.
Select Export for ActionScript.
4. In the Name text box, enter myShape. 5. In the AS 2.0 Class text box, enter Drag. Click OK.
This associates the movie clip with the Drag class that youll create.
6. Using the Property inspector, assign the movie clip an instance name. Then save the FLA file.
Note: An example finished file of the document you just created, named handson3.fla, is located in your finished files folder. For the path, see Set up your workspace on page 113.
7. Create an ActionScript file by doing one of the following:
If youre using Flash MX 2004 Professional, select File > New > ActionScript File (Not Flash Document). Save the document with the name Drag, in the same location where you saved Shape.fla. If youre using Flash MX 2004, open a text editor, such as Notepad. Save the file with the name Drag.as, in the same location where you saved Shape.fla.
8. In the ActionScript file that you just created, create a new class and constructor called Drag:
class Drag extends MovieClip { function Drag () { onPress=doDrag; onRelease=doDrop; } }
9. Define private methods in the class that use the existing movie clip methods, startDrag() and
stopDrag(): class Drag extends MovieClip { function Drag() { onPress=doDrag; onRelease=doDrop; } private function doDrag():Void { this.startDrag(); } private function doDrop():Void { this.stopDrag() } }
10. Save the ActionScript file. 11. Test the Shape.fla document. You should be able to drag the movie clip.
Note: An example of the ActionScript file you just created, named Drag.as, is located in your finished files folder. For the path, see Set up your workspace on page 113.
Congratulations on learning how to work with objects and classes in ActionScript 2.0. In a few minutes, you learned how to accomplish the following tasks:
Create and use objects from existing classes Create a custom class Create a property within a custom class Create a method within a custom class Extend an existing class and take advantage of inheritance

MACROMEDIA FLASH MX 2004 BIT102 SUBJECT GUIDE
Course Aim This course provides a comprehensive introduction to Macromedia Flash MX 2004. By the end of the course, the student should be able to easily understand all the major aspects of Flash MX and use it to produce their own Flash applications. Prerequisites This course assumes the student has no knowledge of Macromedia Flash at all. However, students must have access to a computer with a CD-ROM drive and Macromedia Flash MX installed. As with all our computer courses, they enable the student to purchase the software required (Flash MX) at a heavily discounted price (academic pricing). More information can be obtained about this from the school.
Download Course Files You need to download some course file materials for some of the assignments. In addition, some examples are also provided which are covered in parts of the lessons. To download the files, you simply need to follow these steps: 1. Go to www.acsedu.com, then click on Students Resources and choose Online Library from the menu. Alternatively, you can go to http://www.acsedu.com/Library/ directly. 2. Read the Library Copyright Warning and the click on I Agree to continue. 3. Select the IT link from the home page and then type Flash MX 2004 in the search box. 4. Click on Flash MX 2004 Course Files" from the list to access the files. This will provide you with a list of folders relevant to different areas in the course (e.g. assignments, example etc.). To download the files simply drag and drop the required files to your file explorer. Make sure you refer to the above location whenever you are asked to download files in the lessons. Disclaimer This institution accepts no responsibility for the attitudes or actions of our graduates. The education you receive through this course in no way guarantees your actions in the future will always be as they should be. Your actions in your profession, or in any other situation where you apply what you have learnt here, will be affected by many things other than just the learning from this course. The success or failure of a graduate is dependant upon not only what they learn in this course, but also, what they learn in studies elsewhere (formal and informal), as well as personal qualities and attitudes.
NOTE: WHERE POSSIBLE PLEASE KEEP A PHOTOCOPY OR COMPUTER BACKUP OF YOUR ASSIGNMENT IN CASE IT GETS LOST (It does happen occasionally).
Lesson 1 INTRODUCTION TO FLASH 8 Aim This lesson provides a brief description of Flash and how it fits into the Internet website development industry.
INTRODUCTION In the 1990s, most websites were simply made up of static graphics, text and sometimes simple animations (called animated Gifs) which made many sites nothing more than glorified brochures and text heavy resources. With the birth of the New Media industry, new tools were developed to make the internet a much more interactive and entertaining medium one of these tools was Macromedia Flash. Flash enabled website designers and developers to create complex animations, incorporate decent quality sound and develop unique and experimental interfaces for their online projects. Using vector graphics and special compression techniques, Flash allows websites to show high quality graphics, play great sound and add extra dimensions of interactivity without choking up bandwidth. This has made Flash one of todays most popular website development and design tools.
VECTOR GRAPHICS In the past, the web was restricted to display bitmap graphics. Bitmap graphics (such as jpeg, gif and bmp files) display graphics by storing information on every single pixel (or dot) that makes up the picture. This can lead to very high quality graphics such as photos but has the disadvantage of having large file sizes, which leads to slow downloading times on the internet. Flash uses vector graphics which are a different type of graphic. The information stored in the graphic file is less specific in respect to how the image is made up. For instance, say you had a simple graphic that was a line 20 pixels long and coloured red. A bitmap version of this image would have the following data: pixel #1, colour red, pixel #2, colour red, pixel #3, colour red, pixel #4, colour red. etc. all the way to pixel #20, colour red. A vector image, on the other hand, would have the following data for the same image: draw line from location 1 to location 20, colour red. As you can imagine, a complex graphic would have a lot less data in vector format than a bitmap graphic, this gives vector graphics a great advantage when using them on the internet as they load much faster. Another benefit of vector graphics is that they are scaleable which means they can be shrunk or magnified without losing any detail at all.

WHY USE BITMAP GRAPHICS? Although there are many advantages with vector graphics, bitmap graphics have their advantages too. The main advantage is that bitmap graphics handle gradients and other detailed information much better than vector graphics. This means that high detail graphics such as photos will display much more reliably in bitmap format.
STREAMING Flash uses another internet friendly technology called streaming. Streaming enables information to be displayed as it is downloading, rather than only displaying once downloading has completed. This enables a well designed Flash project to seem to load instantly or very quickly while in fact it is downloading information as the user views it. A good example of this technology is streaming audio where you can listen to music while it is downloading across the internet instead of waiting for it to completely download.
HOW FLASH WORKS For Flash to work on a website, the person visiting the website needs to have a plug-in installed. This plug-in enables the browser to identify and then display Flash content. Although the plug-in is a separate program, recent statistics show that around 95% of internet users already have the Flash plug-in installed. Flash is heavily supported by the I.T. industry and therefore comes installed with most windows based PCs and some Mac computers. In later lessons, we will show you how to make your website detect if the visitor has the plug-in installed and if they dont, how to direct them to the macromedia site to install it.
WHATS NEW IN FLASH MX 2004 There are two versions of Macromedia Flash MX 2004. Flash MX 2004 and Flash MX Professional 2004. These different versions are aimed at different groups. Flash MX 2004 is aimed at web designers; people who develop interactive media with flash and consider themselves Flash animators. Flash MX Professional 2004 is aimed at web developers. This version includes all of the features of Flash MX 2004 with added features specifically aimed at web developers and large project teams. New features in both versions: Accessibility Flash MX 2004 provides much improvement in the way of accessibility to all visitors. For e.g. there is now much better support for screen readers.

Behaviours With behaviours, you can add interactivity to Flash content without writing a line of code. For example, you can use behaviours to include functionality that links to a website, loads sounds and graphics, controls playback of embedded videos, plays movie clips, and triggers data sources.
Updated Templates Updated templates for creating presentations, e-learning applications, advertisements, mobile device applications, and other commonly used types of Flash documents.
ActionScript 2 Flash MX 2004 now supports an updated version of the ActionScript language called ActionScript 2. This new version more closely adheres to the standards of object-oriented programming models.
Help System Help system can now be accessed through a help panel. This integration can make it easier to access the help content that you need. It also incorporates an update button you can click to download the latest updates to the help system.
Timeline Effects You can apply Timeline effects to any object on the Stage to quickly add transitions and animations such as fade-ins, fly-ins, blurs, and spins. By using these effects, you can avoid figuring out which type of tween to use etc.
Video Import Wizard The Video Import Wizard makes it easier to import video content in your Flash movies. You can also do some editing as you import.
SET READING Although there is no set book for this course, it is recommended to do some additional readings in relation to the topics discussed in this course. Provided below, are some useful online materials relevant to this lesson. If you prefer to use printed materials, then it is recommended to acquire a copy of The Complete Reference: Macromedia Flash MX 2004, second edition, McGrawHill Osborne. For online materials, go to http://livedocs.adobe.com/flash/mx2004/ and read Getting Started and Installing Flash sections under the main heading Getting Started with Flash. For printed materials, refer to Macromedia Flash MX 2004 book indicated above and read the following chapters: Part 1: Chapter 1 Part 1: Chapter 2
SELF ASSESSMENT Perform the self assessment test titled ' Test 1.1 If you answer incorrectly, review the notes and try the test again.
ASSIGNMENT Download and do the assignment called Lesson 1 Assignment.