Data Tutorials
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

Web Service Tutorial: Macromedia Tips (Flash Professional Only). 5
Connect to a public web service. 5 Create a user interface and bind the components with the web service. 7
XML Tutorial: Timesheet (Flash Professional Only). 11
Create the user interface. 12 Edit the data. 16
XUpdate Tutorial: Update the Timesheet (Flash Professional Only). 17

Update the timesheet. 18

Contents
Web Service Tutorial: Macromedia Tips (Flash Professional Only)
In this tutorial, you use the Web Services panel to connect to a web service, which you use to return a random tip about Macromedia software. You then use components to set up a simple user interface. In this tutorial, you will complete the following tasks:

Connect to a public web service on page 5 Create a user interface and bind the components with the web service on page 7
This tutorial uses a public web service and therefore requires that you have an Internet connection. If you have trouble downloading or decompressing the files, see TechNote 13686 at www.macromedia.com/support/general/ts/documents/downfiles.htm.
Note: The use of a public web service in this tutorial in no way implies that you should use one for realworld applications. In fact, Macromedia does not recommend using public web services directly from within any client-side application. For more information, see About data connectivity and security in Flash Player in the Data Integration chapter in Using Flash (in Flash, select Help > Using Flash). In a production environment, you should use web services that are placed on your own web server.
The finished FLA file for this tutorial installs with Flash. The following list provides typical paths to this directory.
Windows: \Program Files\Macromedia\Flash MX 2004\Samples\HelpExamples\tips Macintosh: HD/Applications/Macromedia Flash MX 2004/Samples/HelpExamples/tips Connect to a public web service
Define a web service in Flash that will connect to a public web service.
1. Create a new Flash document using Flash MX Professional 2004. Make sure your computer is
connected to the Internet.
2. Open the Web Services panel (Window > Development Panels > Web Services), and click the
Define Web Services button.
3. In the Define Web Services dialog box that appears, click the Add Web Service (+) button, then
click the highlighted line to edit it.
4. Enter the URL http://www.flash-mx.com/mm/tips/tips.cfc?WSDL and click OK.
5. In the Web Services panel, inspect the methods, parameters, and results of the Macromedia Tips

web service.

The web service has one method, called getTipByProduct. This method accepts a single parameter called product. The parameter is a string that tells the web service what Macromedia product you want to see a tip for. In the next step, you bind this parameter with a ComboBox instance in your application.
6. Right-click the getTipByProduct method, and select Add Method Call from the context
An instance of the WebServiceConnector component is added to the Stage.
7. In the Property inspector, enter the instance name tips_wsc.
The component is now configured and on the Stage. You can place the component anywhere on or off the Stageit is invisible when you run the application.

Create a user interface and bind the components with the web service
Next, you use components to create a simple user interface that you can use to select a product, click a button, and see a random tip about the product. You create this application by binding the user interface components on the Stage to the parameter and results in the Macromedia Tips web service.
1. In the Components panel, select UI components > ComboBox. Drag a ComboBox component
to the Stage. In the Property inspector, enter the instance name products_cb.
2. In the Components panel, select UI components > Button. Drag a Button component to the
Stage. In the Property inspector, enter the instance name submit_button and for the label property type Get Tip, as follows:
3. In the Components panel, select UI Components > TextArea. Drag the component onto the
Stage. In the Property inspector, enter the instance name tip_ta.
4. In the Components panel, select UI Components > Label and drag a Label component onto the
Stage. Place it above the ComboBox component.
5. In the Property inspector, in the Instance name field type products_lbl and for the text property
type Select a Product, as follows:
The Property inspector showing the instance name products_lbl and the text Select a Product.
6. Drag another Label component above the tip_ta TextArea component. In the Property
inspector, give it the Instance name tip_lbl and in the text field type Tips.
Now add a binding for the WebService connector component from the Macromedia Tip service to ComboBox component that allows the user to choose a product and return a tip about the product.
7. Select the WebServiceConnector component on the Stage. Open the Component inspector,
and click the Bindings tab. Click the Add Binding (+) button. In the Add Binding dialog box, select product:String (under params:Object), and then click OK.
8. In the Component inspector, double-click the empty value in the Bound To field. In the Bound
To dialog box, select ComboBox, <products_cb> for the component path and value:String for the schema location. Then click OK.
Bound To field in the Component inspector
Selecting the component path and schema location in the Bound To dialog box Next, you will bind the results parameter in the web service connector to the TextArea component on the Stage.
9. In the Component inspector, click the Add Binding (+) button again. In the Add Binding
dialog box, select results:String, then click OK. In the Component inspector, double-click the empty value in the Bound To field, and in the Bound To dialog box, select TextArea, <tip_ta> as the component path and text:String as the schema location. Then click OK. Finally, you will use a Button component and the trigger() method to trigger the service. You use the trigger method to attempt to retrieve a tip whenever you click the button.

10. Open the Actions panel and add the following ActionScript on Frame 1 of the Timeline:
submit_button.onRelease = function(){ tips_wsc.trigger(); };
11. Next, add the following ActionScript after the code from step 10. The code uses the
dataProvider property to set the items in the ComboBox instance to the contents of the array. products_cb.dataProvider = ["Flash", "Dreamweaver"]; Note: If necessary, you can use the setStyle method to change the color of the Label instance text to white using products_lbl.setStyle("color", 0xFFFFFF);
12. Save your file. 13. Test the application (Control > Test Movie). Select Flash from the ComboBox instance and
click the Get Tip button. The results should look similar to the following graphic:
Select Dreamweaver and click the Get Tip button again to view another tip.
XML Tutorial: Timesheet (Flash Professional Only)
In this tutorial, you will create an application for editing timesheet data. The timesheet data is stored as XML within a native XML database. The XUpdateResolver component is the best choice for this type of application, because it generates XUpdate statements that can be sent to the server to update the data. You will complete the following tasks:
Create the user interface on page 12 Edit the data on page 16
This tutorial uses a public web service and therefore requires that you have an Internet connection. In addition, the tutorial wont work in a browser because of sandbox restrictions, but will work in the Flash authoring environment or Flash Player.
Note: The use of a public web service in this tutorial does not imply that you should use one for realworld applications. In fact, Macromedia does not recommend using public web services directly from within any client-side application. For more information, see About data connectivity and security in Flash Player in the Data Integration chapter in Using Flash (in Flash, select Help > Using Flash).
For this tutorial, you will need to download the Data Tutorials ZIP file from www.macromedia.com/go/flmx2004_data_tutorials. The ZIP file contains the data.xml file you use in the tutorial. If you have trouble downloading or decompressing the files, see TechNote 13686 at www.macromedia.com/support/general/ts/documents/downfiles.htm.
Note: For demonstration purposes, you will access the XML data from your hard disk and display the DeltaPacket within your screen. In the real world, the XUpdate would be sent to the server for processing.
Create the user interface
You will begin by creating a user interface, which displays the information in the XML file.
2. From the Components panel, drag an XMLConnector component to the Stage. In the Property
inspector, enter the instance name timeInfo_con.
3. In the Component inspector or the Property inspector, click the Parameters tab. For the URL

parameter, enter data.xml, and for the Direction parameter, select Receive from the pop-up menu.
4. From the Components panel, drag a DataSet component to the Stage. In the Property
inspector, enter the instance name timeInfo_ds.
5. On the Stage, select the XMLConnector component. In the Component inspector, click the
Schema tab. Select the results:XML property, then click the Import a Schema from a Sample XML File button, at the upper right of the Schema tab.
Note: Alternatively, you can select Import XML Schema from the Component inspector title bar menu.
6. Browse to where you saved the data.xml file, and select the file.
The Schema tab now shows the structure of the data in the file. The row node is mapped to an ActionScript array of anonymous objects, because it repeats several times within the XML file. Any subnodes or attributes directly under the row node are considered properties of the anonymous objects contained within the array. For more information about how Flash translates XML documents into an internal schema representation, see the Data Integration chapter in Using Flash (in Flash, select Help > Using Flash).
Note: The XMLConnector component stores information internally as strings. When a request is made for the data through a DataBinding component, you can define how the string data is converted into the correct ActionScript types. This is accomplished by selecting an item within the Schema Tree pane and modifying its settings.
7. Select the Date schema field. Its type is set to String. This is because the Flash authoring tool
cannot determine that it is a date type based on its value. You need to give it some additional information to encode this value correctly.
8. Select the Data Type parameter for the Date schema field and change it to Date. This tells the
DataBinding component to try to work with this value as a date.
For more information on data binding and data types, see Schema data types in the Data binding section of the Data Integration chapter in Using Flash (in Flash, select Help > Using Flash).
9. Select the encoder parameter for the Date schema field and change it to Date. Select the encoder

options parameter and select the value MM/DD/YYYY. This tells the DataBinding component how the string value is represented in the XML file. With this information, the DataBinding component can successfully take any string in this format and convert it into an ActionScript date object.
For more information on data binding and encoders, see Schema encoders in the Data binding section of the Data Integration chapter in Using Flash (in Flash, select Help > Using Flash).
10. Select the @billable schema field.
Notice that the fields data type was automatically set to Boolean by the authoring tool, which looks for certain patterns to guess the type of an XML element. However, you need to modify the Encoder Options for the field. For Boolean data types, the encoder options specify strings that indicate true and false values.
11. With the @billable schema field still selected, double-click the Encoder Options field. 12. In the Boolean Encoder dialog that appears, enter true in the String That Mean True text box
and enter false in the Strings That Mean False text box.
13. Select the @duration schema field.
Notice that the fields data type was automatically set to Integer. This is because the sample XML field contained only whole number values for this attribute.
14. Select the Data Type setting for the @duration schema field and change it to Number so that
it is not limited to integer values.
15. In the Component inspector, click the Bindings tab and create a binding between the row array
and the DataSet components dataProvider:Array property. Select the Direction property and set it to Out.
The DataBinding component copies each object within the row array into a new record (transfer object) within the DataSet component. It applies the settings you selected as the data is copied, so that the DataSet component receives ActionScript Date, Boolean, and Number fields for the @date, @billable and @duration attributes. Next, you will create fields for the DataSet component that match those in the XMLConnector component.
16. On the Stage, select the DataSet component. In the Component inspector, click the Schema

17. Click the Add a Component Property (+) button and enter id for Field Name and Integer for

Data Type.

18. Using the same method, create the following new fields:
Field Name = billable, Data Type = Boolean Field Name = date, Data Type = Date Field Name = duration, Data Type = Number Field Name = rate, Data Type = Number
Note: The field names must exactly match the names of their corresponding properties within the XMLConnector component (@date = date, @billable = billable, @duration = duration), including capitalization.
19. Select the Date field that you just created. Select the encoder setting and change it to

DateToNumber.

Note: The DataSet component needs to store date values in their numeric equivalents so that they can be sorted correctly. This encoder converts a Date into a Number whenever the value is set. It converts a Number into a Date whenever the value is accessed.
20. With the Date field still selected, double-click the Formatter field in the Component Inspector
and choose Date from the pop-up menu.
21. Double-click the Formatter Options field in the Component Inspector. 22. In the Date Formatter Settings dialog that appears, enter MM-DD-YYYY in the Format

text box.

23. Drag a DataGrid component to the Stage, and in the Property inspector enter the instance

name timeInfo_grd.

24. In the Component inspector, click the Bindings tab. Create a binding between the DataGrid
components dataProvider property and the DataSet components dataProvider property. Set the direction to In.
25. Add another binding between the DataGrid components selectedIndex property and the
DataSet components selectedIndex property.
26. Drag a Button component to the Stage, and give it the instance name loadData_btn in the

Property inspector.

27. In the Component inspector, click the Parameters tab. In the Label field, type Load Data. 28. With the button still selected on the Stage, open the Behaviors Panel (Window > Development

Panels > Behaviors).

29. Click the Add Behavior (+) button, and select Data > Trigger Data Source. In the Trigger Data
Source dialog box, select the timeInfo_con component, and click OK.
30. Save the file in the same folder where the data.xml file resides. 31. Run the application, and click the Load Data button.
The XML data is retrieved, converted, and loaded into the DataSet component. The binding between the DataSet and the DataGrid copies the data into the Grid for display.

Edit the data

Now you will modify the application so that you can edit data through the DataGrid component.
1. On the Stage, select the DataGrid component. Then click the Parameters tab in the

Component inspector.

2. Set the editable property to true. 3. Run the application.

You can now edit the data within the grid.
XUpdate Tutorial: Update the Timesheet (Flash Professional Only)

Prerequisite: XML

Tutorial: Timesheet (Flash Professional Only)
This tutorial starts where the XML tutorial: Timesheet left off. Now that the DataSet component is managing the Data, it is tracking changes that are made to the data into the DeltaPacket. A resolver is needed to send the changes back to the server in an optimized way. The XUpdateResolver component is the best choice for updating an XML source, because it generates XUpdate statements that can be sent to the server to update the data. You will complete the following task:
Update the timesheet on page 18
Note: The use of a public web service in this tutorial in no way implies that you should use one for realworld applications. In fact, Macromedia does not recommend using public web services directly from within any client-side application. For more information, see About data connectivity and security in Flash Player in the Data Integration chapter in Using Flash (in Flash, select Help > Using Flash).
For this tutorial, you will need to download the Data Tutorials ZIP file from www.macromedia.com/go/flmx2004_data_tutorials. The ZIP file contains the data.xml file that you use in the tutorial. If you have trouble downloading or decompressing the files, see TechNote 13686 at www.macromedia.com/support/general/ts/documents/downfiles.htm.

Update the timesheet

1. Begin with the file you created in the XML Tutorial: Timesheet (Flash Professional Only) 2. Drag an XUpdateResolver component to the Stage, and in the Property inspector enter the
instance name timeInfo_rs.
3. Click the Schema tab in the Component inspector, and select the deltaPacket component
property within the Schema Tree pane.
4. Change the DeltaPacket components encoder setting to DataSetDeltaToXUpdateDelta.
This encoder converts data within the DeltaPacket into XPath statements that are supplied to the XUpdateResolver component, but it needs additional information from you to do its job.
5. Double-click the encoder options property. When prompted for a value for the rowNodeKey
property, type datapacket/row[@id='?id']. This property identifies which node within the XML file will be treated as a record within the data set. It also defines which element or attribute combination makes the row node unique, as well as the schema field within the DataSet component that will represent it. See DataSetDeltaToXUpdateDelta encoder in the Data Integration chapter of Using Flash (in Flash, select Help > Using Flash). In the sample XML file, the id attribute of the datapacket/row node is the unique identifier, and it will be mapped to the DataSet components ID schema field. This is defined with the following expression:

datapacket/row[@id=?id]

6. In the Component inspector, click the Bindings tab. Add a binding from the XUpdateResolver
components deltaPacket property to the DataSet components deltaPacket property. This binding will copy the DeltaPacket component to the XUpdateResolver component so that it can be manipulated before it is sent to the server.
Note: The data is copied after the DataSet components applyUpdates() method is called.
7. Drag a TextArea component to the Stage, and in the Property inspector enter the instance name
deltaText. Select the component, and then in the Component inspector, click the Bindings tab. Add a binding from the TextArea components text property to the XUpdateResolver components xupdatePacket property. The update packet contains the modified version of the DeltaPacket that will be sent to the server.
8. Drag a Button component onto the Stage, and in the Property inspector enter the instance
name btn_show. In the Component inspector, click the Parameters tab and change the label to Show Updates.
9. With the button selected, open the Actions panel (F9) and enter the following code:
on (click) { _parent.timeInfo_ds.applyUpdates(); }
10. Test the application (Control > Test Movie). Load the data and make a change to one or more
fields in multiple records.
11. Click the Show Updates button. Review the XML packet in the TextArea component.
Tip: You can copy the XML data into your favorite XML editor to make it easier to read.
12. Try setting the includeDeltaPacketInfo parameter of the XUpdateResolver component to
using the Component inspector.
Note: Additional information is added to the update packet. This information can be used by the server to uniquely identify this update operation. With this information, the server can generate a result packet that can be used by the XUpdateResolver component and the DataSet component to update the client data with changes from the server.

Flash MX 2004 Tutorial: A Quick Tour

What is Flash?

Macromedia Flash is a multimedia graphics program specially for use on the Web Flash enables you to create interactive "movies" on the Web Flash uses vector graphics, which means that the graphics can be scaled to any size without losing clarity/quality Vector-based content and applications download faster than their bitmap equivalents. Streaming data content appears immediately, without having to wait for the entire piece to download. Examples can be found at: http://members.aol.com/lpang10473/flash.htm
Who can Create Flash Movies? To create your own Flash movies you need to buy a Macromedia Flash program such as Flash MX 2004. You can also download a 30-day trial copy of the Flash product (for building Flash movies) at: http://www.macromedia.com/downloads/ Who can View Flash online? To view a Flash movie, a Macromedia Flash Player (a plug-in) needs to be loaded on your computer. However, practically all web users have it loaded as part of their browser package. If you do not have the Flash Player installed you can download it for free from Macromedia's site: http://www.macromedia.com/downloads/
Getting Started To begin, open Flash MX 2004 and you will see the opening window that allows you to open an existing movie, create a new movie, or create a movie using a template. Choose Create New - Flash Document. You will see this screen next.
The upper left corner of the screen displays the Toolbox, which contains the tools to create or modify graphics and text. Tool modifiers for the selected tool display below the Tool palette. You use modifiers to set tool options. The Timeline appears in the upper portion of the screen. You use the Timeline line to lay out the sequence of the movie. The Stage displays in the center of the screen. You create your movie on the Stage. At the bottom of the screen are two more windows (also called panels) which are not shown in the above picture. First, the Action panel where you can enter commands in the form of ActionScript which is similar to JavaScript. Second, the Properties (or Property Inspector) is the panel where you can change the characteristics of the selected object. There may be other panels visible. You can collapse or expand any panel by toggling the triangle on its title bar. You can remove a remove (by right-clicking its title bar, and selecting Close Panel) and later bring them back through the Windows menu. Panels are dockable.
Example You start creating your movie by setting the Dimensions, Background Color, Frame Rate, and Ruler Units.
Dimension Background Color Frame Rate Ruler Units The size of the Stage in terms of width and height. The color of the Stage. The speed of the movie (usually 12-18 frames per second) The unit of measure the ruler displays.
You set these properties in the Properties Inspector (if it is collapsed, click the triangle to open it). Click the button right of the word Size. Ensure that you have the following settings: Width = 800 px Then click on OK. Toolbox Height = 400 px Background color = White Frame Rate = 12
Arrow move/select objects Line draw lines Pen draw Bzier curves Oval draw oval and circles Pencil draw freeform lines Free transform modify object Ink bottle change color of lines Dropper select colors Hand move a segment on the screen Stroke set color of the border of an object Fill set color of the fill of an object
Subselect arrow select and modify points on a curve Lasso select sections of a drawing Text create text Rectangle draw rectangles and squares Brush paint fills Fill Transform modify fills Paint Bucket fill enclosed shapes with a color Eraser erase objects Zoom zoom in or out
Try out these tools. When done, clear the screen by double-clicking the Eraser. Throughout your session, dont forget about the Undo function (Edit, Undo or Ctrl-Z.) Timeline, Frames and Layers The Timeline organizes and controls a movie's content over time in frames and layers. Like films, Flash movies divide lengths of time into frames. Each frame represents a different image that appears on the Stage. Layers in a movie (explained later) are listed in a column on the left side of the Timeline. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers. The playhead indicates the current frame displayed on the Stage.
Flash Tweening Tweening comes from the words "in between". With tweening you can go from one keyframe to another and specify changes in the animation and let the Flash program create the frames in between. (Note: A keyframe specifies changes in an animation. You create keyframes at important points in the Timeline and let Flash create the frames in between.)
Example In this example you will learn how to make an object move across the screen. The basic steps are: 1. 2. 3. 4. 5. 6. If not at the beginning frame of a movie, create a keyframe. Create the object. Convert the object to a symbol. At a later frame, insert a keyframe. Modify the object. Create a Movie Tween between the initial and ending frames.

Step 1 Create a new movie by selecting File, New. Add a small circle on the left side of the Stage area -- do this by selecting the oval tool from the left toolbar. Choose a fill color in the Modifiers section of the Toolbox. While pressing the Shift key, draw the circle in the Stage area (If you dont press the Shift key, it will be an oval). Step 2 Select the Arrow tool from the left toolbar (or hit the letter V). Double-click on the circle to select the whole object (it must be shaded). Step 3 Now we have to convert the circle to a symbol. Note: Symbols are reusable elements that you use with a document. Symbols can include graphics, buttons, video clips, sound files, or fonts. When you create a symbol, the symbol is stored in the library (access it by going to Window, Library). When you place a symbol on the Stage, you create an instance of that symbol. Symbols reduce file size because, regardless of how many instances of a symbol you create, Flash stores the symbol in the file only once. It is a good idea to use symbols, animated or otherwise, for every element that appears more than once in a document. You can modify the properties of an instance without affecting the master symbol, and you can edit the master symbol to change all instances.
Right-click the ball object and chose Convert to Symbol. Name the symbol "Ball", select Behavior as Graphic and select OK. You can check if the object made it to the Library by selecting Window, Library or hitting Ctrl-L. Step 4 Go to Frame 20 in the Timeline. Do this by clicking the gray field below 20. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the previous image in the current frame. Note: A keyframe is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a keyframe. In tweened animation, you define keyframes at significant points in the animation and let Flash create the contents of frames in between. Flash displays the interpolated frames of a tweened animation as light-blue or light-green with an arrow drawn between keyframes. Because Flash documents save the shapes in each keyframe, you should create keyframes only at those points in the artwork where something changes. Keyframes are indicated in the Timeline: a keyframe with content on it is represented by a solid circle, and an empty keyframe is represented by an empty circle before the frame. Subsequent frames that you add to the same layer will have the same content as the keyframe. Step 5 Using the Arrow tool, select the circle and move it to the right side of the stage. With the circle still selected, click the Free Transform Tool and resize the circle to make it larger. To maintain proportionality, use the Shift-key while dragging a corner. From the Property Inspector, select the Color dropdown list box and make the following changes: Brightness = 70% Tint = Pick a new color off the palette Step 6 Click on the Timeline any place between Frame 1 and Frame 20. Then right click and choose Create Motion Tween. Note the solid arrow on the Timeline.

Step 7 Choose Control, Test Movie from the top menu to test your Flash movie. (You can also use Ctrl-Enter). When done reviewing the test, close the Document Window to return (pick the lower x in the upper right hand corner of the Window).
Layers Every Flash movie consists of one or more layers. A layer represents a level of content that can sit on top or below another layer. Think of it as a sheet of clear acetate. You can use it to organize your movie one layer for text, one for background graphics, another for foreground objects and another for sound. By having layers you prevent objects from conflicting with each other. Also, you can hide layers so you can easily work on specific graphics. You can lock layers to avoid content being inadvertently edited. Example In this example, we will rename a layer, add a layer, then add text to our movie (have the word Strike on the bowling ball at the end of the clip). Step 1 Go to the Timeline and change the name of the layer from Layer 1 to Ball Motion. To make this change, double-click the current layer name, typeover the new name, and hit Enter. Add a new layer by clicking the Insert Layer icon on the lower left hand side of the panel. A new layer will appear over the original one. Name the layer Text. Step 2 Click the last frame of the new layer. Right-click it and select Insert Keyframe. Step 3 Select the text tool and choose the following settings: Static Text Font = Arial Font Size = 30 Color = Select a color that contrast well against the color of the ball
On the circle, click it and release then type in the placeholder: Strike! Click the arrow tool. Step 4 Test your Flash movie by selecting Ctrl-Enter.
In this example, we will add sound effects to our movie. Step 1 Go to the Timeline and add another layer by clicking the Insert Layer icon. Name the layer Sound Effects. Step 2 From the menu, select File, Import, Import to Library. Locate a sound file such as: bowling.wav. Click Open. Step 3 Open the Library by selecting Window, Library (or use Ctrl-L). You should see the sound file with its waveform displayed in the small window. You might want to preview your sound here by clicking on the Play button. Note: The library in a Flash document stores symbols created in Flash, plus imported files such as video clips, sound clips, bitmaps, and imported vector artwork. The Library panel displays a scroll list with the names of all items in the library, allowing you to view and organize these elements as you work. An icon next to an item's name in the Library panel indicates the item's file type. Objects in the library are reusable so you can use the same symbol multiple times in a movie. You can also open the library of any other Flash movie while you are working in Flash, to make the library items from that file available for the current movie.

Step 4 Click the first frame of the new layer. Drag the sound file from the library to the Stage (not the timeline). Its waveform should appear in the Timeline. Step 5 Test the movie (Ctrl-Enter). You may have to insert frames to synchronize the movie with the sound effect. Back in the Timeline, highlight frames across the layers, right-click, and select Insert Frames.

Action

In this example, we will add an Action that will stop the movie from playing. Step 1 Go to the Timeline and add another layer by clicking the Insert Layer icon. Name the layer Action Settings. Step 2 Right-click the last frame of the new layer. Insert a new keyframe. Below the Stage, locate the Actions panel. (Open it if necessary) Note: ActionScript, the scripting language of Flash, lets you add interactivity to a movie. ActionScript provides elements, such as actions, operators, and objects, that you put together in scripts that tell your movie what to do; you set up your movie so that events, such as button clicks and keypresses, trigger these scripts. For example, you can use ActionScript to create navigation buttons for your movie. In Flash, you use the Actions panel to write scripts with ActionScript. Using the panel in normal editing mode, you build scripts by choosing options from menus and lists. Using the panel in expert editing mode, you enter text directly into the Script pane. In both modes, code hints help you complete actions and insert properties and events. Once you have a script, you can attach it to a button, movie clip, or frame to create the interactivity you need.
Step 3 Open Global Functions, Timeline Control and double-click the stop icon. Note that Flash automatically entered the script code for you. On the Timeline, you should see the letter a in script in the appropriate frame. Step 4 Test your movie (Ctrl-Enter).
Saving the File and Viewing the Flash Movie on the Web
Step 1 After creating a Flash movie you choose File, Save As from the top menu to save your movie. Save the file as: "myflash.fla" note the files folder location.) Note: Flash documents, which have the.fla filename extension, contain all the information required to develop, design, and test interactive content. Flash documents are not the movies the Flash Player displays. Instead, you publish your FLA documents as Flash movies, which have the.swf filename extension and contain only the information needed to display the movie. Step 2 Choose File, Publish. Note: This will create an.swf file (myflash.swf) which is a compiled (uneditable) version of your.fla working file. Also, it will create an HTML file (myflash.html) where you can view your movie as a web page. Note how small swf files are. Because of it compact size, it relatively fast to download these movies and render them on web pages. Step 3 Go into your browser and select File, Open. Click the Browse button and locate the HTML document (e.g. myflash.html) that Flash created. It is found in the same directory as your.fla file. Click Open then OK. Watch and enjoy your Flash movie. If you have a web page, you can include a hyperlink to the HTML file containing the movie (e.g. myflash.html).

Supplemental Information

Viewing the Flash Movie in PowerPoint
Step 1 Before you start, you will need to know the exact location of your Flash movie such as C:\Documents and Settings\irmcstudent\My Documents\Powerpnt\myflash.swf. Open Powerpoint and right-click a blank area on the top menu bar. Select the "Control Toolbox. At the bottom of the Control toolbox, click on the icon for "other" controls which appears like a little hammer. Step 2 Select "Shockwave Flash Object" from this menu. Dont select any other "Flash" or "Shockwave" related components on your machine. Your cursor will change to crosshairs. Drag these crosshairs to form the box in which you would like your movie to appear. This can be full-screen or a portion of the screen. Step 3 Get properties on the box you have just created by right-clicking on the box and selecting "Properties." At the top of this code box is a line entitled "Custom." Click on this line and then select the. button at the end of the line. Step 4 In the dialog box, hard code the exact location of your movie into the "Movie URL" box. Check the "Embed Movie" box so that no matter where the presentation goes, the movie will remain with it in one PowerPoint presentation file. Step 5 Save and run your slide show in presentation view. Sometimes the object box will not show the movie (refresh) until you have done this. Once you run the show, your movie should pop-up in the slide you've just created.
How to Create Simple Buttons Creating a button that changes upon mouse events is simple. Merely tell Flash how you want the button to look 1) in normal state, 2) when the mouse moves over the button (mouseover) and 3) when the user clicks the button (mouseclick). 1. Add a new layer named Button. 2. Choose Insert, New Symbol (or press Ctrl-F8) and the Create New Symbol window appears.
Add a name for your button (such as mybutton) and be sure the Button option is selected. 3. Click OK and the Button Object Editor opens. Note that there are only four frames in the timeline.
4. Draw a button the way you want it to be when no mouse event is detected. Notice that the active frame is labeled "Up" in the timeline. 5. Insert a keyframe in the frame labeled "Over" in the timeline. To do this, rightclick on Layer 1 in the white cell below where it says "Over" then choose Insert Keyframe.
Draw a button the way you want it to be when a mouseover event is detected. 6. Insert a keyframe in the frame labeled "Down" in the timeline. Draw a button for when a mouseclick event is detected. You've created a button with three looks that will change upon mouse events. Next you will specify which area should be clickable as well as what should happen when the button is clicked. Defining the Clickable Area The last frame, labeled "Hit", is unique. It is simply used to specify the area that triggers mouse events. If you leave this frame blank then mouse events will be triggered when the mouse moves over the visible button. If you want to change the default hit area, follow these steps: 1. Insert a keyframe in the frame labeled "Hit" in the timeline. 2. The hit area of your object will be shaded. If you want another area, use one of tools to redefine the area such as the oval, rectangle, or pencil tool. Note: If you draw an area that is bigger than the button then the mouse event will occur as soon as the mouse gets even close to the button. On the contrary you can draw an area that is smaller than the button, so that mouse events are only triggered when the mouse is at the center of your button. Adding Actions to the Button The button we created so far is still in the Button Object Editor. We still haven't dragged it onto our main movie. If you look above the timeline you see two icons labeled "Scene 1" and "mybutton".

1. Click the "Scene 1" icon to return to the main movie. 2. Click the frame where you want the button to appear then insert a keyframe. 3. Click on the button in the Library window and drag it onto the movie. If your Library is not visible, choose Window >Library (or press Ctrl-L) to make it visible.
4. Once the button has been placed correctly in your movie, make sure that it is selected (for example, there is a rectangle around a circle and/or it has a crosshair on it). Drag the button to the Stage. 5. Open the "Actions" panel. Want the button to go back to the beginning when clicked. Click Global Functions, Movie Clip Control Icon to expand the list and double click the "On icon. Double-click "Release". We have told Flash that it should react on a mouse-click release event but we still haven't told what should happen when the event is detected. We want to jump to another frame, namely Frame 1 in Scene 1. Place the cursor after the curly bracket: { Select Global Function, Timeline Control, gotoAndPlay.
We need to specify the scene and frame you want to jump to. Insert: Scene 1, 1 between the pair of parentheses. The final code should look like this: on (release) {gotoAndPlay(Scene 1, 1); } Dont worry if the last curly bracket is on another line. (Note: When you add or remove frames, the frame numbering may change. You might want to permanently label the destination frame using the Frame Label property in the Property Inspector and refer to this label in the code instead of frame number.) Test the Movie Select Ctrl-Enter. Save and publish the file as needed.
Flash Tutorial_mx2004.doc