Flash Tutorials
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 eith
Contents Chapter 1: Basic Tasks: Create a Document . . . . . . . . . . . . . . . . . 13 Take a tour of the user interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Change background and Stage size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Change your view of the Stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 View the Library panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 4: Basic Tasks: Creating a banner, Part 3 . . . . . . . . . . .63 Examine the completed FLA file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Considering your audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Checking your publish settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Inserting Flash on a Dreamweaver site. . . . . . . . . . . . . . . . . . . . . . . . . . . .71 Using roundtrip editing . . . . . . . . .
Write a function. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103 Write an event handler for the component . . . . . . . . . . . . . . . . . . . . . . .104 Test your application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Chapter 8: Basic Tasks: Use Layout Tools . . . . . . . . . . . . . . . . .
Chapter 11: Basic Tasks: Create a Presentation with Screens (Flash Professional Only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 View the screen hierarchy and screen Timelines . . . . . . . . . . . . . . . . . 137 View screen properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Add content to a presentation slide. . . . . . . . . . . . . .
Chapter 15: Creating Graphics: Applying Gradients . . . . . . . . . . 177 Examine the completed FLA file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Open the starter document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Apply a linear gradient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Create a radial gradient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 19: ActionScript: Write Scripts . . . . . . . . . . . . . . . . . . 225 Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Create an instance of a symbol. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Name button instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228 Initialize the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 22: ActionScript: Work with Objects and Classes . . 255 Set up your workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Learn about classes and object types . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Create an object from a class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Create a custom class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Create two objects from the Product class. .
Contents
Introduction This part of Flash Help includes several step-by-step tutorials, designed to teach you the fundamentals of Flash. Macromedia recommends that you go through the lessons using the sample files provided. The path to the sample file is provided in each lesson. By completing these hands-on lessons, you’ll learn how to use Flash to add text, graphics, and animation to your Flash applications.
Introduction
CHAPTER 1 Basic Tasks: Create a Document 1 You’re about to experience the power of Macromedia Flash Basic 8 and Macromedia Flash Professional 8. You’ll see how, in a few minutes, you can create a compelling web experience that combines video, text, graphics, and media control behaviors. You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www.macromedia.com/go/ fl_documentation.
Take a tour of the user interface First, you’ll open the starting FLA file that you’ll use to complete this lesson. Each lesson includes one start file, and a finished file that demonstrates how the FLA file should appear upon completion of the lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create a Document and double-click document_start.
Select panel sets and arrange panels The Default Workspace Layout panel set arranges your workspace in a way that facilitates taking lessons. You’ll use this layout for all lessons that you take in Flash. ■ Select Window > Workspace Layout > Default. You can move panels around, and resize them, as follows: ■ You can undock a panel by clicking the upper-left corner of the panel, in the title bar, and dragging the panel to another location in the workspace.
Undo changes Flash can undo a series of changes to your document. You’ll undo the artwork that you just created. 1. To see the undo feature in action, first open the History panel (Window > Other Panels > History). The Pencil tool appears in the panel, because using the tool was your last action. 2. Do one of the following: ■ Select Edit > Undo Pencil Tool. ■ Press Control+Z (Windows) or Command+Z (Macintosh). Your scribbles disappear from the Stage.
The playhead (the red indicator line) is on Frame 1 in the Timeline. The keyframes are designated by small circles in the frames, which are filled, indicating there’s content in those frames. You can add a keyframe to a document when you want the Flash content to change in some way in that frame. Change background and Stage size The Stage provides a preview of how your Flash content will appear in your published file.
Change your view of the Stage You can change your view of the Stage without affecting the actual Stage size of your document. 1. In the Stage View text box, above the right side of the Stage, enter 500%. Then press Enter (Windows) or Return (Macintosh). Your view of the Stage enlarges to 500%. 2. In the Stage View pop-up menu, which you access by clicking the control to the right of the text box, select 100% to view the Stage in dimensions that correspond to the size of the published Flash content.
Add graphics to the Stage To add library items to your document, you verify that you’re adding the object to the correct layer, and then drag the item from the Library panel to the Stage. 1. In the Timeline, click the Content layer name to select that layer. With the Selection tool selected, drag the Title movie clip, which contains a bitmap image and vector graphic, from the Library panel to the Stage and align it on top of the gray bar at the top of the Stage that contains the word Title.
View object properties When you add an object to the Stage, you can select it, and then view and change its properties in the Property inspector. The type of object selected determines which properties appear. For example, if you select a text object (not a text graphic, which you use in this lesson), the Property inspector displays settings such as font, type size, and paragraph formatting, which you can either view or change.
3. In the Play Video dialog box, verify that Relative is selected. Select video, which is the instance name that you gave to the video clip, and click OK. 4. On the Stage, click the Pause movie clip instance to select it. In the Behaviors panel, click Add (+) and select Embedded Video > Pause. 5. In the Pause Video dialog box, again select the video movie clip, and click OK. 6. On the Stage, click the Rewind movie clip instance to select it.
Use the Movie Explorer to view the document structure The Movie Explorer helps you arrange, locate, and edit media. With its hierarchical tree structure, the Movie Explorer provides information about the organization and flow of a document. 1. Select Window > Movie Explorer. If necessary, enlarge the Movie Explorer to view the tree structure within the pane. The Movie Explorer filtering buttons display or hide information. 2.
Test the document As you author a document, you should save and test it frequently to ensure the Flash content plays as expected. When you test the SWF file, click the video control buttons to see if the video stops, plays, and rewinds as expected. 1. Save the document (File > Save) and select Control > Test Movie. The Flash content plays in a SWF file window. Although .fla is the extension for documents in the authoring environment, .swf is the extension for tested, exported, and published Flash content.
■ View object properties ■ Add video control behaviors ■ Use the Movie Explorer to view the document structure ■ Test the document ■ Find help To learn more about Flash, take another lesson.
CHAPTER 2 Basic Tasks: Creating a banner, Part 1 2 Macromedia Flash Basic 8 or Macromedia Flash Professional 8 can seem like a very complex programs to learn. One reason for this seeming complexity is that you can use it for so many different things, such as cartoon animations, media players, and sophisticated software. This tutorial is suitable for you if you're opening Flash 8 for the first time.
In Part 1 of this tutorial, you will complete the following tasks: Examine the completed FLA file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Creating a new document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 Changing document properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30 Importing graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Introducing layers and the timeline. . . . . . . . . . . . . . .
Examine the completed FLA file As you examine the finished version of an application that you’ll create, you’ll also look at the Flash workspace. In this section, you will complete the following tasks: ■ “Open the authoring document” on page 163 ■ “Review the completed FLA file” on page 28 ■ “Close the completed FLA file” on page 28 In subsequent sections you’ll go through the steps to create the application yourself starting with a brand new FLA file.
Review the completed FLA file In the completed FLA file, you will see the structure that makes up the finished SWF file for Part 1 of this tutorial. The application, a Flash banner for a gnome website, looks like this at the end of Part 1: The completed banner at the end of Part 1. By the end of Part 3 of this tutorial, you will add the graphics, animation, and interactivity to the banner. Then, you’ll insert the banner on a website using Dreamweaver.
Creating a new document You can create all kinds of different elements for the web or for CD-ROMs and devices using Flash 8. First, you create a file in the Flash authoring tool, which you use to output SWF files. SWF files are the files that you can put online when you embed it in a web page. The Macromedia Flash Player plug-in then displays the SWF file, so your website visitors can view or interact with the content. Your SWF file can contain video, MP3 sound, animations, images, data, and so forth.
2. Click Flash Document from the Create New column on the Start Page to create a blank document. NO T E If Flash doesn’t display the Start Page (the feature might have been disabled earlier if you share a computer) you can select File > New from the main menu to create a new document. Make sure the General tab is active, select Flash document, and click OK. 3. Select File > Save As from the main menu. 4. Name the file banner.
Around the Stage you see a variety of panels. The panel on the left is called the Tools panel (see the following figure). This panel includes tools you can use to create and modify documents, such as tools you use to draw and make selections. Use the Tools panel to draw and make selections. You use the Selection tool (the black arrow) to make selections in these tutorials. A panel near the bottom of the Flash application is titled Properties.
If you don't have any objects or frames selected, the Property inspector allows you to modify properties for the document itself. 1. Open the Property inspector (Window > Properties > Properties) and click the button next to the text that says Size to open the Document Properties dialog box. NO T E Make sure that you don’t have a frame selected. Click the Stage if you do not see the button mentioned in the previous step.
3. Click OK when you finish entering the new dimensions to return to the authoring environment. When you return to the authoring environment, notice how the dimensions of your document change. You can also change the current document's background color and frame rate directly in the Property inspector, without going to the Document Properties dialog box. You'll find information about frame rate in Part 2 of this tutorial, “Basic Tasks: Creating a banner, Part 2” on page 43. 4.
You'll see the Import dialog box (see the following figure), which enables you to browse to the file you want to import. Browse to the folder on your hard disk that contains an image to import into your Flash document. 2. Navigate to the directory where you saved the tutorial’s source files, and locate the bitmap image saved in the FlashBanner/Part1 directory. 3. Select the gnome.png image, and click Open (Windows) or Import (Macintosh). The image is imported into the document's library.
6. Click the Selection tool, and select the instance on the Stage. If you look at the Property inspector you'll notice that you can modify the image's width and height, as well as the image's X and Y position on the Stage. When you select an object on the Stage, you can see and modify the current coordinates in the Property inspector (see the following figure). The X and Y coordinates match the registration point, which is the upper left corner of this movie clip symbol. 7.
Setting new coordinates moves the upper-left corner of the image to the upper-left corner of the Stage. You can drag the bitmap image around the Stage using the Selection tool instead of changing coordinates in the Property inspector. Use the Property inspector when you need to set a specific position for an object, like you did in this step. 8. Select File > Save to save the document before you proceed to the next section (“Introducing layers and the timeline”).
In this section, you will complete the following tasks: ■ “Creating a new layer” on page 38 ■ “Importing to a layer” on page 39 1. Select Layer 1 in the Timeline and click the dot below the lock icon, as shown in the following figure. Lock a layer so its contents aren’t accidentily moved or deleted from the Stage. You can also prevent inadvertently adding other assets to that layer. With your only layer locked, you need to add new layers before you can add any other objects to the Stage.
Creating a new layer In just about any Flash project where you use imported graphics and animation, you'll need to create at least a few layers. You need to separate certain elements onto their own layers, particularly when you start to animate objects. You can also stack graphics on top of each other, and even create a sense of depth or overlapping by using multiple layers. 1. Select the background layer on the Timeline, and click Insert Layer to create a new, empty layer.
Importing to a layer In an earlier exercise, “Importing graphics”, you imported the gnome.png image directly into the document's library. Then you dragged the image onto a selected layer on the Stage. You can also import assets directly to the Stage instead of into the library. First you need to select the frame into which you want to import the image on the Timeline. Then you can import the image onto that frame, which displays on the Stage.
Move the star.png file on the Stage to just above the gnome's head in the image, as shown in the following figure. Move the star.png image just above the gnome’s head. 6. Select File > Save to save your document before moving on to “Test the application”. Test the application To finish, you can test your document using Flash. Doing so tests the SWF file in Flash Player. For example, you can see how your code works in Flash Player, how animations play on the Timeline, test user interactivity, and more.
2. Click the close button of the window that contains the SWF file to return to the authoring environment. Find the folder on your hard disk where you saved banner.fla at the beginning of this tutorial in “Creating a new document”. When you open this folder, you should see an additional SWF file called banner.swf. This is the compiled version of the banner.fla file.
Basic Tasks: Creating a banner, Part 1
CHAPTER 3 Basic Tasks: Creating a banner, Part 2 3 Welcome to Part 2 of this three-part introduction to Macromedia Flash Basic 8 or Macromedia Flash Professional 8. You successfully completed Part 1 of this tutorial, where you created, set up, and imported content into an FLA file. Because you're reading Part 2, you're probably ready to learn more about Flash.
■ “Creating a symbol” on page 49 shows you how to create a movie clip symbol, to which you’ll add an animation. ■ “Adding animation to a timeline” on page 51 shows you how to create animation using the main Timeline and motion tweens. ■ “Creating a button” on page 56 shows you how to create a button to add interactivity to your banner. ■ “Writing simple actions” on page 59 shows you how to write simple ActionScript to make the button work.
Copy the FlashBanner folder to another location on your hard disk to which you have access. Inside this folder are three directories for each part of this tutorial: Part1, Part2, and Part3. In the FlashBanner/Part2 folder, you will find a Flash file called banner2_complete.fla. Double-click the file to open it in Flash. You now see the completed tutorial file in the Flash authoring environment.
This file contains an animation in a movie clip, text, an invisible button, and the assets that you imported in Part 1 of this tutorial. ■ The movie clip instance contains a graphical instance that you animate. ■ Text fields contain static, stylized text that you display on the Stage. ■ The invisible button covers the entire Stage, and it lets your visitors click the banner and open a new web site.
You can add any of these types of text using the Text tool. For this exercise, you will add some static text to the Stage for decorative purposes. To add static text, follow these steps: Open the banner.fla file you created in Part 1 of this tutorial, and rename the file banner2.fla. NO T E If you didn't finish Part 1 of this tutorial, or lost your file, open the source files ZIP archive that accompanies this tutorial. Inside the start folder, find banner2.fla and use this file to begin the tutorial. 1.
When you finish, the text should be similar in size and in position to the text in the following figure. Add some static text to the banner. Select any font you want to use. 9. Select the Text tool again, and type Underpaid? below the text you added previously. 10. Select the text field, and open the Property inspector, and then change the text to the same font you selected in the earlier steps. 11. Select a font size so the text is large but still fits on the Stage. 12.
Creating a symbol A symbol is an object that you create in Flash. As you discovered in Part 1, a symbol can be a graphic, button, or movie clip, and you can then reuse it throughout the current FLA or other FLA files. Any symbol that you create is automatically added to the document's library (Window > Library), so you can use it many times within a document.
Use the Convert to Symbol dialog box to convert selected content into a symbol, give it a name, and click OK (shown above) add it to the document’s library. You might see a smaller dialog box without the advanced linkage and source information when you convert a symbol. 3. Select the Movie clip option, and click OK. This means that you will convert the graphic image into a movie clip symbol. Movie clip symbols have their own timelines.
Adding animation to a timeline You have already used the Timeline in Part 1 of this tutorial (“Basic Tasks: Creating a banner, Part 1” on page 25) to insert new layers and add content onto those layers. In Part 1 you added assets to a frame on the Timeline. You might have noticed that after you add content on a frame, a filled circle appears on the frame to signify content on that frame. Whenever there's new or changed content on a frame, it's called a keyframe and has a filled black dot on the frame.
3. Double-click the join us symbol instance on the Stage. This opens the symbol in symbol-editing mode (see the following figure). In this mode, you see the movie clip symbol's timeline, which runs independently of the timeline for the main FLA file (the one you saw before double-clicking the symbol). This means you can have animations that play and stop independently from animations on the main timeline. Remember that a movie clip still plays at the document's frame rate (18 fps).
Scene 1 refers to the main timeline of the FLA file. You can click this button on the edit bar to return to the main timeline. The names after it point to the symbol that you're editing. If the symbol is nested within other symbols, this path might contain several names. In the previous figure, you can see that you're editing the join us symbol that's on the main timeline (Scene 1). 4. Select the PNG file that's inside the movie clip, and then press F8 to convert it into another symbol. 5.
10. Change the slider value to 75% (see the following figure). Change the brightness of the movie clip instance. The brightness changes for the instance on Frame 15. The instances on Frames 1 and 30 do not change. This means that you can now add a motion tween that animates the brightness value between Frames 1 and 15, and then from Frames 15 to 30. After playing Frame 30, the playhead loops back to Frame 1 and the animation starts again.
You can create several kinds of animation in an FLA file, such as motion tweens, shape tweens, and frame-by-frame animation. In this tutorial, you will create a motion tween. A motion tween is an animation where you define properties such as position, size, and rotation for an instance at one point in time, and then you change those properties at another point in time. In this animation, you change the brightness and size of the instance. 12.
15. Select Control > Test Movie. N OT E A quicker way to test your SWF file is to use keyboard shortcuts. Press Control + Enter (Windows) or Command + Return (Macintosh) to test the file The test environment opens where you can see the animation. Notice how it loops, appearing to fade in and out because of the change in brightness. By default, the playhead returns to Frame 1 and replays the animation after it reaches the final frame on the Timeline.
5. Select No Color, as shown in the following figure. Doing so disables the rectangle's outline. Select No Color for the stroke color control. 6. Drag the mouse diagonally across the Stage to create a rectangle. The size of the rectangle does not matter—you'll resize it later using the Property inspector. 7. Click the Selection tool in the Tools panel, and click the rectangle on the Stage to select it. A cross-hatch pattern appears over the rectangle when you select it. 8.
12. Double-click the new button on the Stage to enter the Symbol-editing mode. The rectangle is currently on the first Up frame of the button you created. This is the Up state of the button—what users see when the button sits on the Stage. Instead, you want the button not to have anything visible on the Stage. Therefore, you need to move the rectangle to the Hit frame, which is the hit area of the button (the active region that a user can click to activate the button's actions). 13.
Writing simple actions You need to add some simple ActionScript to your banner in order for the invisible button to open a website or send information about how many clicks the banner has received. There are several different places you can add ActionScript in a Flash document. You can select an instance, and add ActionScript that attaches directly to that instance. To access the code, you would need to find and select that instance again.
Before you add the code, you need to give the button a unique instance name. The instance name enables you to target the button with ActionScript code. If you don't name the button, your code doesn't have a way of targeting the button from the timeline. The first step is to assign the invisible button an instance name, and then you add code that targets that button using its name. 1. Select the invisible button on the Stage. 2.
7. Select File > Save to save your progress before moving on. After you finish saving the file, proceed to the following exercise, “Test the application”. Test the application Now you have a Flash banner, with graphics and animation, which also reacts to button clicks. You have completed your first interactive and animated Flash document. Let's take a look at it in action, within a browser window. 1. Return to your banner2 document, and then select File > Publish Preview (HTML).
Summary Congratulations for completing the next step of creating a banner in Flash. You used the Flash authoring tool to add text, create symbols, animate on a timeline, and add interactivity to your application. In Part 2 of this tutorial, you learned how to use the Flash workspace to accomplish the following tasks: ■ Create text. ■ Create symbols. ■ Create an animation. ■ Create buttons. ■ Write ActionScript. You now have a banner that you can export and add to a web page.
CHAPTER 4 Basic Tasks: Creating a banner, Part 3 4 This is Part 3 of a three-part article on how to build a simple animated banner in Macromedia Flash Basic 8 or Macromedia Flash Professional 8, and add it to a web page using Macromedia Dreamweaver. In this final part, you learn about file size, banner standards, how to set publish settings, how to add the banner to a Dreamweaver web page, and how to add Macromedia Flash Player detection.
The tutorial workflow includes the following tasks: ■ “Examine the completed FLA file” on page 64 lets you view the completed Flash document for Part 3. ■ “Checking your publish settings” on page 68 shows you how to check and modify your publish settings before you compile the finished banner. ■ “Inserting Flash on a Dreamweaver site” on page 71 shows you how to insert a Flash animation into a web page using Dreamweaver.
Open the finished project The files for this tutorial are located in the Samples and Tutorials folder in the Flash installation folder. For many users, particularly in educational settings, this folder is read-only. Before proceeding with the tutorial, you should copy the entire FlashBanner tutorial folder to the writable location of your choice. In Part 1 or Part 2, you might have already copied the FlashBanner source files to another location of your hard disk.
Review the completed project In the completed project, you will see the structure that makes up the finished project for Part 3 of this tutorial. The application, a Flash banner inserted into an HTML page for a gnome website, looks like this at the end of Part 3: The completed banner for Part 3 By the end of Part 3 of this tutorial, you will add the banner that you created which contains graphics, animation, and interactivity to a website using Dreamweaver.
Considering your audience When you create a site, you often need to follow certain guidelines for submitting a Flash banner. For the purposes of this article, following established advertising guidelines is not a great concern because you're not submitting the banner to a company for advertising purposes. This section briefly explores some of the considerations you might have when creating a banner in a real-life project, or a project for wide distribution.
The purpose of this article is understand how to create Flash content, export it from Flash, and add it to your own website. The lesson to draw from considering banner guidelines is that you need to consider your audience. Whenever you create a Flash site, think about the kind of people who will see the content—much like when you create any website.
In earlier parts of this tutorial, you made changes in the Document Settings dialog box. You set the dimensions and frame rate (fps) for the SWF file. In this final section, you will make sure that the Flash Player setting you want to target is correct, and that you export the files you need. Many Flash developers make these settings when they start the FLA file, because they are aware of what they need to output and target. 1. Open the banner2.
8. In the Options section, select Compress movie. You do not need to make any other selections on the Flash tab. 9. When you finish, click OK to accept the changes to your document. 10. Select File > Publish when you have finished editing your FLA file. This publishes the SWF file to the directory where you saved the SWF file. 11. Go to the directory to which you published the banner's SWF file. Check the file size of the document (it's called banner3.swf).
Inserting Flash on a Dreamweaver site You might have a web page already created for a banner. We have created a page for you to use for the purposes of this exercise, which is ready to have a banner of this size placed on it. Make sure that you have the FlashBanner/Part3 directory available (see “Open the finished project”), and find the website folder inside this directory. Inside the website folder are the documents that you need to edit in Dreamweaver. You will modify the gnome.
This is where you want to add the Flash banner to the website. Select the large image placeholder on the right side of the web page in Dreamweaver. Notice that the dimensions are the same as your banner file. 6. Press the Backspace or Delete key to delete the image. Leave the text selection pointer at that position in the HTML document. 7. Select Insert > Media > Flash. This opens the Select File dialog box, where you can select the SWF file of the banner you created. 8. Select the banner3.
Using roundtrip editing By now, you might want to change something in your Flash banner. Say you want to change the frame rate, or add some more text. It's easy to return to Flash to edit the document from Dreamweaver. 1. In gnome.html, select the SWF file in Design view (where you see the layout of the page below the HTML code), and then open the Property inspector (Window > Properties). The Property inspector displays controls for the SWF file. 2.
Checking for Flash Player Most people who visit your website will have the Flash Player 6 or greater plug-in installed. In rare circumstances, a visitor might not have the plugin installed. There are several different things you can do when a visitor without Flash Player visits your site. When you have a site that uses Flash primarily for functionality, you might want to send that user to a custom page that links to the Macromedia site, where the user can download the player.
6. Select the Always go to first URL if detection is not possible option. When selected, this option effectively means "assume that the visitor has the plug-in, unless the browser explicitly indicates that the plug-in is not present." Because you add an alternate ad for visitors without the plug-in, this option is preferable for this exercise. The following figure shows the selections you have made up to this point to add Flash Player detection.
Test the application Now you have a Flash banner, with graphics and animation, which also reacts to button clicks. You have completed your first interactive and animated Flash document, and then you inserted it into a website using Dreamweaver. Let's take a look at the banner in action, within a browser window. 1. Click the gnome.html document that you modified in the previous exercises to open the web page that contains your banner. A new browser window opens and display the gnome website. 2.
Summary Now you have completed your first Flash site and inserted it into a Dreamweaver web page. You have learned how to create a new file, import content, create new assets in Flash, add simple animation and ActionScript, and publish your work for the web. You also learned how to use Dreamweaver to insert the SWF file into an existing web page, probably one that's similar to a simple page you've created in the past.
Basic Tasks: Creating a banner, Part 3
CHAPTER 5 Basic Tasks: Create Accessible Flash Content 5 With knowledge of a few design techniques and accessibility features in Macromedia Flash Basic 8 and Macromedia Flash Professional 8, you can create Flash content that is accessible to all users, including those with disabilities. This lesson demonstrates how to create an accessible document, designed for use with screen readers (which read web content aloud for visually impaired users) and other assistive technologies.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ 2. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create Accessible Content and double-click accessibility_start.
Make your document accessible to screen readers You’ll now specify that your document is 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.
Provide a title and description for instances Now that you’ve provided information about the entire document, you can provide information about Stage objects included in the document. 1. Select the Trio Motor Company logo along the top of the Stage. In the Accessibility panel, enter 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.
Specify that screen readers ignore elements in your document Screen readers follow a specific order when reading web content. However, when content on the web page changes, most screen readers will begin reading the web content all over again. This screen reader feature can be problematic when Flash content contains, for example, animation, which could cause the screen reader to begin again each time there’s a change in the animation.
2. In the Property inspector, select Dynamic Text from the Text Type pop-up menu. Accessibility settings now appear in the Accessibility panel. 3. In the Instance name text box, enter text9_txt. NO TE To specify a tab order and reading order, which you’ll do next, you must provide an instance name for all instances. The instance name must be unique in your document.
To create a tab order in this lesson, use one of the following procedures. To create a reading order along with a tab order, follow the procedure to control the tab order and reading order using ActionScript. If you have Flash Professional 8, you can follow this procedure to create a tab order using the Accessibility panel: 1. With the Accessibility panel open, select the logo_mc instance at the top of the Stage. In the Accessibility panel, enter 1 in the Tab Index text box. 2.
If you have Flash Professional 8, follow this procedure to view a tab order: ■ Select View > Show Tab Order. The tab index number that you entered appears next to the instance on the Stage. NO TE A tab order created with ActionScript, rather than the Accessibility panel, does not appear when Show Tab Order is enabled. Follow this procedure to control the tab order and reading order using ActionScript: 1. In the Timeline, select Frame 1 of the Actions layer. 2.
About testing your document with screen readers You already know the importance of regularly testing your Flash document as you create it to ensure it performs as expected. Frequent testing is even more important when you design a document to work with assistive technologies such as screen readers. In addition to testing tab order in your SWF file, you should also test your tab order in various browsers; some browsers differ in how the user tabs to or out of Flash content.
Basic Tasks: Create Accessible Flash Content
CHAPTER 6 Basic Tasks: Work with Layers 6 In Macromedia Flash Basic 8 and Macromedia Flash Professional 8, layers are analogous to transparent sheets of acetate stacked on top of each other. In the areas of a layer that don’t contain content, you can see through to content in the layers below. Layers assist you in organizing content in your document. For example, you can keep background art on one layer and navigational buttons on another.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Work with Layers and double-click layers_start.fla.
Select a layer You place objects, add text and graphics, and edit on the active layer. To make a layer active, you either select the layer in the Timeline or select a Stage object in the layer. The active layer is highlighted in the Timeline, and the pencil icon indicates it can be edited. 1. In the Tools panel, click the Selection tool. 2. On the Stage, select the red car. A pencil icon in the Timeline indicates that the Red Car layer is now the active layer. 3. Select the Text layer in the Timeline.
Hide and show layers You can hide layers to view content on other layers. When hiding layers, you have the option of hiding all layers in your document simultaneously or hiding layers individually. 1. Click the eye icon above the layers so that a red X appears in the Eye column. All content disappears from the Stage. 2. One by one, click each red X in the column and watch the content for the layer reappear on the Stage.
Add and name a layer You’ll now add a layer, name the layer, and then add a graphic symbol to the layer. 1. In the Timeline, click the Car layer. 2. Click Insert Layer below the Timeline. The new layer appears above the Car layer and becomes the active layer. 3. Double-click the layer name, type Background as the new name for the layer, and press Enter (Windows) or Return (Macintosh).
Organize layers in a folder You can create layer folders to organize layers and reduce Timeline clutter. The Timeline contains two layers that contain navigation objects: one for navigational buttons and another for navigational art. You’ll create a layer folder, named Navigation, for both layers. 1. In the Timeline, select the Buttons layer. 2. Click Insert Layer Folder, which is below the layer names.
4. In the Timeline, drag the Road layer to the Mask layer, placing it below the Car layer. The mask layer and the layers it masks are automatically locked. 5. To view the mask effect, select Control > Test Movie. 6. When you finish viewing the mask effect, close the SWF file window to return to your document. Add a guide layer So far you’ve learned about regular layers and mask layers. The third type of layer is a guide layer.
Delete a layer Because you don’t really need the guide layer in your document, you’ll delete it. ■ In the Timeline, with the Notes layer selected, click the Delete Layer button. Summary Congratulations on learning how to work with layers in Flash. In just a few minutes, you learned how to accomplish the following tasks: ■ Select a layer. ■ Hide and show layers. ■ Lock a layer. ■ Add and name a layer. ■ Change the order of layers. ■ Organize layers in a folder. ■ Add a mask layer.
CHAPTER 7 Basic Tasks: Create an Application 7 The application that you’ll create in this lesson lets users view the cost of selecting multiple products. A Calculate button then adds the total cost. You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www.macromedia.com/go/ fl_documentation. In this tutorial, you will complete the following tasks: Copy input and dynamic text fields . . . . . . . . . . . . . . . . . . . . . . . . . .
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create an Application and double-click calculator_start.fla.
Copy input and dynamic text fields You’ll use input text fields to create a form. 1. Click the input text field where users enter the quantity of CD players. Press Alt and drag the copy of the field down to the Shocks QTY area. 2. Alt-click the input text field that you just dragged; then drag the new copy of the field to the Cover QTY area. 3. Alt-click the dynamic text field for the CD player’s price; then drag the copy of the field to the Shocks price area. 4.
Add and name a Button component Components are movie clips that offer an easy way of adding advanced functionality to your document without having to know advanced ActionScript. You’ll use the Button component to create a Calculate button that totals prices. Because the component you’re using is based onv ActionScript 2.0, you first need to configure your Publish Settings dialog box to ensure your Flash content plays as expected. 1. Select File > Publish Settings. 2.
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 > Actions). 2. In the Script pane, type the following: // Declare variables and values for car part prices.
Specify values for input text fields You must specify values for the input text fields. You’ll 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 (Windows) or Return (Macintosh) twice and type the following: //Set initial values for the quantity text fields. 2. Press Enter or Return, and type the following: qty1_txt.
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. You’ll write that function now. 1. In the Script pane, with the insertion point after the ActionScript that reads qty3_txt.
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. You’ll 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 Learning ActionScript 2.0 in Flash. 1. On the Stage, click the Button component and go to the Actions panel.
When you finish, your script should appear as follows: on(click) { with(_parent){ priceTotal_txt.text = Number (price1_txt.text) + Number (price2_txt.text) + Number (price3_txt.text); } } The event handler that you typed specifies that the text in the priceTotal_txt field should be the sum of the values in the price1_txt, price2_txt, and price3_txt fields. Test your application You’ll test your application to ensure that it executes as expected. 1. Save your document and select Control > Test Movie. 2.
Basic Tasks: Create an Application
CHAPTER 8 Basic Tasks: Use Layout Tools 8 Macromedia Flash Basic 8 and Macromedia Flash Professional 8 offer a variety of ways to place objects on the Stage. This tutorial teaches you how to use the layout tools in Flash to create a user interface. You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www.macromedia.com/go/ fl_documentation. In this tutorial, you will complete the following tasks: Use guides to align an object. . . . . . . . . . .
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Use Layout Tools and double-click layout_tools_start.fla.
4. Ensure that you have Snap to Guides turned on by selecting View > Snapping > Snap to Guides. 5. In the Tools panel, click the Selection tool. 6. On the Stage, click inside the upper-left corner of the blue text border and drag it to the intersection of the two guides. A small circle appears in the upper-left corner of the text border when you drag near the corner of the text border. The circle indicates that snapping is engaged. 7.
Resize objects to match the Stage size When you changed the Stage size, art on the Stage extended off the Stage and into the workspace. You can easily resize the art to match the Stage size again. 1. On the Stage, click the gray mountains to select them. Shift-click the blue banner at the top of the Stage to add it to the selection. 2. Open the Align panel (Window > Align). Tooltips appear in the Align panel showing the names of alignment options. 3.
Specify snap alignment settings Snapping offers a way of precisely placing an object on the Stage by having the object affix itself to other objects and alignment tools. You’ll specify snap align settings to show horizontal and vertical guides, which will assist you in placing art on the Stage. 1. Select View > Snapping > Snap Align to set this option, if it is not already selected. 2. Select View > Snapping > Edit Snap Align. 3.
5. While keeping the car centered with the body text (you should continue to see the center alignment guide), drag the auto in a straight line, toward the left of the Stage, until the guide snaps at the 30-pixel border that you created previously. You’ve aligned the car with the text as well as to the snapping border. Align objects using the Align panel Previously, you used the Align panel to match objects to the size of the Stage.
Snap objects to each other You can snap objects on the Stage to other objects on the Stage, thereby setting the alignment of objects to each other. Using the Snap to Objects feature, you’ll align a navigation bar with the top Stage banner. 1. Select View > Snapping. In the submenu, select Snap to Objects if it’s not already selected. 2. In the Timeline, select the Nav layer. 3. From the Library panel, drag the nav graphic to any area of the Stage below the blue banner, and then release the nav graphic.
Align objects using the Property inspector The Property inspector lets you precisely align objects on the x and y Stage axes, from the registration point of the Stage object. The registration point is the point from which a symbol aligns or rotates. You’ll use the Property inspector to align the logo. 1. In the Timeline, select the Top layer. 2. From the Library panel (Window > Library), drag the logo to an empty area of the Stage. 3.
Align objects using the grid and arrow keys You can use the grid to assist you in placing objects on the Stage. 1. Select View > Grid > Show Grid. The grid does not appear when you test or publish your document. N OT E If you wanted to snap objects to the horizontal and vertical grid lines, you would also select Snap to Grid (View > Snapping > Snap to Grid). For this lesson, you won’t snap objects to the grid. 2. On the Stage, select the title text you previously grouped together. 3.
Basic Tasks: Use Layout Tools
CHAPTER 9 Basic Tasks: Create Symbols and Instances 9 A symbol is a reusable object, and an instance is an occurrence of a symbol on the Stage. Repeatedly using instances does not increase the file size and is a good part of a strategy for keeping a document file size small. Symbols also simplify editing a document; when you edit a symbol, all instances of the symbol update to reflect the edits. Another benefit of symbols is that they allow you to create sophisticated interactivity.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create Symbols and Instances and double-click symbols_start.fla.
Create a graphic symbol A graphic symbol is well suited for repeated use of static images, or for creating animations associated with the main Timeline. Unlike with movie clip and button symbols, you cannot give instance names to graphic symbols, nor can you refer to them in ActionScript. You’ll take vector art on the Stage and turn it into a graphic symbol. 1. In the Tools panel, click the Selection tool. 2. On the Stage, drag around the car to select it. 3. Select Modify > Convert to Symbol. 4.
Duplicate and modify an instance of a symbol After you’ve created a symbol, you can use instances of it repeatedly in your document. You can modify the following instance properties for an individual instance without affecting other instances or the original symbol: color, scale, rotation, alpha transparency, brightness, tint, height, width, and location. If you edit the symbol later, the instance retains its modified properties in addition to acquiring the symbol edits.
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 you’re in symbol-editing mode for the named symbol. 2.
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, and then reference the instance name in ActionScript. You’ll convert the tire on the Stage into a movie clip. 1.
Add an effect to the movie clip You can create an animation within a movie clip Timeline, in symbolediting mode, that plays independent of the main Timeline. You’ll add an effect to the MCWheel symbol that will cause all instances of the symbol to spin. 1. With the Selection tool, double-click the wheel_mc instance to enter symbol-editing mode. 2. Right-click (Windows) or Control-click (Macintosh) the symbol and select Timeline Effects > Transform/Transition > Transform. 3.
Basic Tasks: Create Symbols and Instances
CHAPTER 10 Basic Tasks: Add Button Animation and Navigation 10 A button is a symbol that contains special frames for different button states, such as when the user’s mouse pointer is over the button or when the user clicks the button. When you select the Button behavior for a new symbol, Macromedia Flash Basic 8 and Macromedia Flash Professional 8 create the Timeline for the button states. You can add navigation to buttons by using behaviors or by writing ActionScript.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Add Button Animation and Navigation and double-click buttons_start.fla.
Create a button from grouped objects You can create buttons from text and graphics, including bitmap images and grouped objects. In this lesson, you’ll turn a logo and some text into one large button. 1. In the Tools panel, click the Selection tool. On the Stage, select the grouped text and logo, and then select Modify > Convert to Symbol. 2. In the Convert to Symbol dialog box, name the symbol BTNLogo, and select Button as the behavior. 3.
View the hit area by enabling buttons When the Enable Simple Buttons feature is active, you can view the less complex aspects of your buttons, such as the hit area (the clickable area of a button) and the colors used for the button states. More complex button design, such as animation, does not play. 1. Click in an empty space in the workspace to make sure you don’t have any objects selected. 2.
3. Select the Hit frame (Frame 4) of the Hit Area layer in the BTNLogo Timeline, and press F6 to add a keyframe. 4. In the Tools panel, select the Rectangle tool. The stroke and fill color for the rectangle are unimportant. On the Stage, draw a rectangle that covers, as closely as possible, the logo and text. The rectangle now defines the clickable area of the button. 5. Click Scene 1, above the upper-left side of the Stage, to exit symbolediting mode for the button. 6.
7. Using the Selection tool, drag to select all three buttons. 8. Open the Align panel by selecting Window > Align. Verify that To Stage is not selected, because you do not want to align the buttons relative to the Stage. 9. In the Align panel, click Align Vertical Center, and then click Distribute Horizontal Center. The buttons align on the Stage. 10. Close 11. the Align panel.
7. With the playhead still on Frame 15, select the button shape on the Stage, and in the Property inspector select a bright shade of red from the Fill Color pop-up menu. 8. In the Timeline, click any frame between Frames 1 and 15. In the Property inspector, select Shape from the Tween pop-up menu. Drag the playhead from Frames 1 to 15 to see the color change.
Add navigation to a button With behaviors, you can quickly add navigation to a button without having to know ActionScript. You’ll add navigation to open a web page when the user clicks a button. 1. On the Stage, select the instance of Button 1. 2. In the Behaviors panel (Window > Behaviors), click Add Behavior and select Web > Go to Web Page. 3. In the Go to URL dialog box, select _blank in the Open In pop-up menu to open the URL in a new browser window.
Test the SWF file You’ll test your document to view the button animation and see if the navigation works as expected. 1. Save your document and select Control > Test Movie. 2. Move the mouse pointer over the instance of Button 1 to view the color animation that you created. 3. Click the button to see if your web browser opens to the URL that you specified. 4. If you added navigation to the other two buttons, test those buttons as well. 5.
Basic Tasks: Add Button Animation and Navigation
CHAPTER 11 Basic Tasks: Create a Presentation with Screens (Flash Professional Only) 11 Flash Professional 8 offers a new way to create presentations with slide screens. If you can imagine placing media on slide screens, adding nested slides that inherit media from other slides, and using the built-in controls to navigate through the slides at runtime, you’ve imagined exactly how easy it is to create a presentation with slide screens.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Presentation with Screens and double-click presentation_start.fla.
View the screen hierarchy and screen Timelines You add content to screens in much the same way that you add content to the Stage, but screens are nested movie clips, relying on a hierarchy, nested timelines, and inheritance. All screens exist in the first frame of the root timeline, which is hidden, and all screen content loads on the first frame. For more information about screens, see “Working with Screens (Flash Professional Only)” in Using Flash. 1.
2. In the Screen Outline pane, select the presentation screen. All slide screen documents contain a presentation screen, which is at the top level of the screen hierarchy. Think of the presentation slide as a master slide: content on the presentation slide can appear in all slides in your document. N OT E You cannot delete or move the presentation screen.
Add content to a presentation slide You’ll add navigation buttons to the presentation slide so that the buttons appear on each slide in the presentation. 1. In the Screen Outline pane, select the presentation slide thumbnail. In the Timeline, select Frame 1 of the Navigation layer. 2. From the Library panel, drag the NextBtn symbol to the screen, placing it within the black band at the bottom of the screen. 3.
Add screen navigation behaviors to buttons When you open a new Flash Slide Presentation, the document already includes functionality that lets users navigate between slide screens using the keyboard arrow keys. You’ll also add navigation behaviors to the buttons, offering users an additional option to navigate between slides. NO TE By default, keyboard arrow keys let you navigate between screens on the same level, not between nested screens. 1. On the presentation slide, select the forwardBtn instance.
Add and name a slide You can easily add slides to your presentation using the context menu in the Screen Outline pane. 1. In the Screen Outline pane, select the title thumbnail. Right-click (Windows) or Control-click (Macintosh) and select Insert Screen from the context menu. A new screen appears in the Screen Outline pane, at the same level as the title slide. The new slide automatically inherits media from the presentation slide. 2.
Add content to a new slide The features slide, as a child of the presentation slide, inherits properties from that slide. Additionally, because the features slide is a parent to the three slides that you copied and pasted, content that you add to that slide appears on the three children slides. 1. In the Screen Outline pane, select the features thumbnail. From the Library panel, drag the Features Content symbol to anywhere in the Document window. 2.
4. To add the Fly behavior, verify that the features slide is still selected. In the Behaviors panel, click Add (+) and select Screen > Transition from the menu. 5. In the Transitions dialog box, select Fly from the list of transitions, and select Out as the direction. 6. In the Duration text box, enter .5 as the length of time to complete the transition. 7. In the Start Location pop-up menu, select Left Center and watch the transition preview, and then click OK.
Basic Tasks: Create a Presentation with Screens (Flash Professional Only)
CHAPTER 12 Creating Graphics: Draw in Flash 12 When you draw in Flash, you create vector art, which is a mathematical representation of lines, curves, color, and position. Vector art is resolutionindependent; you can rescale the art to any size or display it at any resolution without losing clarity. Additionally, vector art downloads faster than comparable bitmap images. This tutorial shows you how to create vector art of a bolt and logo.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Draw in Flash and double-click drawing_start.fla.
3. Click anywhere in the gray workspace beside the Stage to display properties for the shape you’ll create. In the Property inspector (Window > Properties), verify that black is selected as the stroke color, 1 pixel is selected as the stroke height, and Solid is selected as the stroke style. The stroke is the line that outlines your shape. 4. Click the Fill Color control and select blue with a hexadecimal value of #0000FF. The fill color appears within the stroke in a shape.
Rotate the shape After you’ve created a shape, you can use the Transform panel to specify a precise number of degrees in which to rotate the shape. 1. In the Tools panel, click the Selection tool. On the Stage, double-click within the hexagon to select both the stroke and the fill. Clicking once within a shape selects only the fill. 2. Select Window > Transform. In the Transform dialog box, verify that Rotate is selected, and enter -15 in the Rotate text box to rotate the shape 15º clockwise.
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. You’ll 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.
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.
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 you’ll 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.
5. With the Selection tool, move the pointer around the logo that you created. When you move the pointer over a corner point, which you can drag to create various angles, the pointer appears as follows: When you move the pointer over a curved line segment (you don’t have curve points in your logo), which you can drag to create various curved lines, the pointer appears as follows: Summary Congratulations on learning how to use some of the various drawing tools in Flash.
CHAPTER 13 Creating Graphics: Create a Timeline Animation 13 Macromedia Flash Basic 8 and Macromedia Flash Professional 8 provide powerful tools for creating animation. Most simple animation in Flash is done using a process known as tweening. Tweening is short for “in between” and refers to filling in the frames between two keyframes so that a graphic displayed in the first keyframe changes into the graphic displayed in the second keyframe.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Timeline Animation and double-click animation_start.fla.
Create a motion tween You create a motion tween by defining properties for an instance, a grouped object, or text in a starting keyframe, and then changing the object’s properties in a subsequent keyframe. Flash creates the animation from one keyframe to the next in the frames between the keyframes. To create a motion tween, you’ll take an instance of a tire symbol and make it appear to bounce. 1. In the Timeline (Window > Timeline), double-click the Layer 1 title and type TireAnim.
7. In the TireAnim layer, select any frame between Frames 2 and 14. In the Property inspector, select Motion from the Tween pop-up menu. An arrow appears in the Timeline between the two keyframes. 8. Select any frame between Frames 16 and 29. Again, use the Tween popup menu in the Property inspector to select Motion. 9. Select File > Save to save your changes.
5. If the Color Mixer is not already open, select Window > Color Mixer to open it, and change the Alpha value from 25% to 10%. 6. Click the pop-up menu control in the upper-right side of the Color Mixer and select Close Panel. 7. Select any frame between Frames 2 and 14 on the ShadowAnim layer. In the Property inspector, select Shape from the Tween pop-up menu. 8. On the ShadowAnim layer, select any frame between Frames 16 and 29.
4. Select the transformation center point (the small circle near the center of the movie clip) and drag it to the bottom of the tire. The center point snaps to the lower-middle transform handle. 5. On the Stage, drag the upper-middle transform handle down to slightly compress the tire shape. If necessary, drag the tire to align it over the shadow. To view the positioning, drag the playhead over Frames 1 and 2. 6. Save your file.
Change the frames per second speed The frame rate, measured in frames per second (fps) is the speed at which the animation plays. By default, Flash animations play at a rate of 12 fps, which is ideal for web animation. Sometimes, however, it’s desirable to change the fps rate. You’ll now change the frame rate to 36 frames per second, which will make the tire appear to bounce more rapidly. 1. Click the Stage, away from any objects. 2. In the Property inspector, type 36 in the Frame Rate text box.
Test the SWF file You’ll test your document to view the animation and see if it works as expected. 1. Save your document and select Control > Test Movie. 2. When you finish viewing the animation, close the SWF file window. Summary Congratulations on learning how to animate objects in Flash. In just a few minutes, you learned how to accomplish the following tasks: ■ Create an animation using motion tweening. ■ Create an animation using shape tweening. ■ Copy and paste keyframes in an animation.
CHAPTER 14 Creating Graphics: Making Animations with Easing (Flash Professional only) 14 This tutorial guides you through the process of using the tweening tools in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. Tweening is the process of animating a graphic by setting starting and ending values for its properties and letting Flash calculate the values in between. The term tween comes from “in between.
In this tutorial, you will complete the following tasks: Examine the completed FLA file. . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Open the starter document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Create a motion tween . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Use easing controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Create a motion tween with an alpha setting . . . . . . . . . . . . . .
Examine the completed FLA file As you examine the finished version of the application you’ll create, you will also look at the Flash workspace. In subsequent sections, you’ll go through the steps to create the application yourself. Open the authoring document It’s helpful to analyze the completed authoring document, which is a FLA file, to see how the author designed the animation and understand what you are going to create.
Review the completed FLA file In the completed FLA file, you will see a graphic of an eight ball with a shadow beneath it on a green background. The illustration looks like this: The completed FLA file There are two tweens in the document: ■ A motion tween of the ball bouncing down to the green surface. ■ A motion tween of the shadow becoming larger and smaller according to the proximity of the eight ball. There are two ways to see the animation in action.
See the animation play in a separate window as a SWF file To see the animation play in a separate window as a SWF file, select Control > Test Movie. See the animation on the Stage in the Flash authoring environment To see the animation on the Stage in the Flash authoring environment, drag the red playhead across the Timeline. Close the application To close the document, select File > Close.
Add the necessary frames to the Timeline To add the necessary frames to the Timeline: 1. In the Timeline, drag the pointer to select all the frames from 1 to 60 in all four layers. Selecting multiple frames in the Timeline 2. Select Insert > Timeline > Frame. You should see the frames added to all four layers in the Timeline. The frames added to the Timeline Create a motion tween in the new frames To create a motion tween in the new frames: 1. Select Frame 61 of the layer named Ball. 2.
3. On the Stage, press Shift and drag the eight ball downward until the bottom of the eight ball is in the middle of the shadow graphic. The eight ball correctly placed on the shadow You have now defined a new position for the eight ball on the Stage in Frame 61. The ball now has one position for the first 60 frames, and a different position for the keyframe in Frame 61.
6. In the Timeline, drag the playhead from Frame 1 to Frame 61. You will see the eight ball animate downward towards the shadow graphic. NO T E The speed of the ball’s motion is constant throughout the animation. In the next section you will learn to control the speed with which your animations begin and end their motion. 7. Select File > Save As. 8. Name the file my_tween_start.fla and click OK.
Ease out the eight-ball animation 1. In the Timeline, select the entire Ball layer by clicking the layer name. 2. In the Property inspector, drag the Ease slider up until the value is 100. This will provide the maximum amount of easing out, thereby causing the eight-ball motion to start abruptly and then decelerate. 3. Drag the playhead across the Timeline and observe the animation speed. 4. In the Timeline, select the entire Ball layer. 5.
The Custom Ease In / Ease Out dialog box displays a graph representing the degree of motion over time. Frames are represented by the horizontal axis, and the percentage of change is represented by the vertical axis. The Custom Ease In / Ease Out dialog box 3. In the Custom Ease In / Ease Out dialog box, Control-click (Windows) or Command-click (Macintosh) on the diagonal line where it crosses Frame 20 in the horizontal axis and on about 32% in the vertical axis. Click just once.
4. Drag the line to the top of the graph (the 100% line) while keeping it at Frame 20 on the horizontal axis. The line is now a complex curve. Dragging the control point to the top of the graph 5. Drag the left vertex handle of the new control point to the right until it touches the control point. Drag the right vertex handle to the left until it touches the control point. This makes the curve pass through the control point with a simple sharp angle.
6. Control-click (Windows) or Command-click (Macintosh) the flat part of the curve at the top of the graph near Frame 32 and drag the new point downward to approximately 76% along the vertical axis. Dragging the point at Frame 32 7. Drag the vertex handles so that the line connecting them to the control point is horizontal and each handle is the same distance from the control point. Dragging the vertex handles 8.
9. Drag the vertex handles for the new control point onto the control point. 10. Control-click (Windows) or Command-click (Macintosh) the curve at about Frame 52 and drag it down to about 95% on the vertical axis. 11. Drag the vertex handles so that the line connecting them to the control point is horizontal and each handle is the same distance from the control point.
Create a motion tween with an alpha setting In this section, you will create a tween of the alpha value of the shadow graphic that appears under the eight ball. Because the changes in the shadow should match the speed and timing of the bouncing eight ball, you will use the same easing curve you created in the previous section. Create the tween of the alpha value for the shadow 1. In the Timeline, select Frame 61 of the layer called Shadow. 2. Select Insert > Timeline > Keyframe. 3.
8. In the Timeline, click the layer named Ball to select the frames in that layer. 9. In the Property inspector, click Edit next to the Ease slider. 10. In the Custom Ease In / Ease Out dialog box, press Control-C (Windows) or Command-C (Macintosh) to copy the easing curve you applied to the ball tween. 11. Click Cancel to dismiss the dialog box. 12. In the Timeline, click the layer named Shadow to select all the frames in that layer. 13.
Test the application At any point during authoring, you can test how your application plays as a SWF file. Because this tutorial contains no animation or interactivity, the file will look the same in test mode as it does in authoring mode. 1. Select File > Save to save your FLA file. 2. Select Control > Test Movie. 3. When you finish viewing the application, close the SWF file by clicking the close box in the test window.
CHAPTER 15 Creating Graphics: Applying Gradients 15 This tutorial guides you through the process of using the gradient tools in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. With Flash, you can create simple color gradients and complex gradient effects. In this tutorial, you learn how to do some of both. A gradient is an area of a graphic where one color changes into another color. Flash can create two main types of gradients: linear and radial.
After examining the completed illustration, you’ll begin by opening a starter Flash document and end by publishing the document for web playback. The tutorial should take approximately 20 minutes to complete. Before you take this tutorial you should read Chapter 2, “Flash Basics,” in Getting Started with Flash. In this tutorial, you will complete the following tasks: Examine the completed FLA file. . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Open the starter document . . . . . . . . . . . . .
Examine the completed FLA file As you examine the finished version of an application you’ll create, you will also look at the Flash workspace. In subsequent sections, you’ll go through the steps to create the application yourself. Open the authoring document It’s helpful to analyze the completed authoring document, which is a FLA file, to see how the author designed the illustration and understand what you are going to create.
Review the completed FLA file In the completed FLA file, you will see the combined effects of several gradients. The illustration looks like this: There are five gradients in the illustration: ■ A gradient from black to green on the background. ■ A gradient from black to green to black on the bottom of the eight ball. ■ Another from white to black in the highlight on the top of the eight ball. ■ A subtle gradient on the white circle surrounding the number “8.
Close the completed FLA file To close the document, select File > Close. If you prefer to keep the finished file open as a reference while working with the starter file, be careful not to edit it or save any changes to it. Open the starter document Now that you have seen the completed file, it is time to create your own Flash document. To get started, you’ll open a starter file that contains a few graphics to which you will apply gradients. 1. In Flash, select File > Open. 2.
5. Double-click the right gradient color swatch and select the color green (#006600). Selecting the right gradient color swatch in the Color Mixer Selecting the color green #006600 in the Color Picker 6. Double-click the left gradient color swatch and select the color black (#000000). 7. Select the Gradient Transform tool from the Tools panel. The Gradient Transform controls appear on the Stage around the gradient.
8. Drag the Gradient Rotate handle to rotate the linear gradient clockwise as shown. The Gradient Rotate handle Rotating the gradient clockwise 9. Lock the Background layer in the Timeline to prevent further changes to this layer. 10. Select File > Save to save your FLA file. Create a radial gradient Next, you will add a radial gradient to the black eight ball. 1. Double-click the black circle in the layer called Ball. This opens the group containing the eight-ball shape. 2.
3. In the Color Mixer panel select Radial from the Type pop-up menu. Select Mirror Overflow mode from the Overflow pop-up menu. The correct Radial Type and Mirror Overflow settings 4. Double-click the left gradient color swatch and select the color black (#000000). 5. Double-click the right gradient color swatch and type 002200 into the color text box. Press Enter. 6. Drag the left gradient color swatch to the right about three-fourths of the way as shown in the following illustration.
9. Rotate the radial gradient 90º clockwise by dragging the Gradient Rotate handle. Dragging to rotate the gradient 90º clockwise. 10. Select the Focal Point control and drag it near the top of the circle. Dragging the Focal Point control toward the top of the circle shape 11. Select the center control point and drag the entire gradient upward a short distance as shown in the following illustration. The mirrored overflow gradient is at the bottom of the circle.
Create a transform gradient with a shape In this section, you will create a gradient and then use the Free Transform tool to change its shape. 1. Select the Shadow layer in the Timeline. 2. Select the Oval tool in the Tools panel. 3. Hold down Shift and then drag on the Stage with the Oval tool to draw a circle approximately 150 pixels square. This should be about the same diameter as the eight ball. 4. In the Color Mixer’s Type menu, select Radial. 5.
12. Select 13. Drag the shadow shape under the eight ball with the Selection tool. 14. Click 15. the Selection tool from the Tools panel. outside the Stage to deselect the shadow. Select File > Save to save your FLA file. Apply the finishing touches To complete the illustration, you will apply two more linear gradients: one to the white circle on the eight ball and one to make a highlight on the top of the eight ball.
12. Set the Alpha value for the black color swatch to 100%. Your gradient settings should match those in the following illustration: The Color Mixer with the correct settings for the gradient on the white circle 13. Select the Gradient Transform tool from the Tools panel. 14. Drag the Gradient Rotate handle approximately 120º clockwise. The gradient rotated 120º 15. Select the Selection tool in the Tools panel. 16.
3. Select the highlight shape. 4. In the Color Mixer, select Linear from the Type menu. 5. Select Non-repeating from the Overflow menu. 6. Drag the left gradient color swatch all the way to the left and doubleclick it. 7. Select the color white (#FFFFFF) from the Color Picker. 8. Set the Alpha value for the left swatch to 0%. 9. Drag the right gradient color swatch all the way to the right and doubleclick it. 10. Select 11. the color white from the Color Picker.
14. Drag the Gradient Scale control downward until it touches the top of the highlight shape. The Gradient Scale control Dragging the Gradient Scale control downward to touch the highlight shape 15. Select the Selection tool from the Tools panel. 16. Double-click outside the Stage twice to deselect the highlight group. The finished Flash illustration looks like this: 17. Select File > Save to save your FLA file.
Test the application At any point during authoring, you can test how your application plays as a SWF file. Because this tutorial contains no animation or interactivity, the file will look the same in test mode as it does in authoring mode. 1. Select File > Save to save your FLA file. 2. Select Control > Test Movie. 3. When you finish viewing the application, close the SWF file by clicking the close box in the test window.
Creating Graphics: Applying Gradients
CHAPTER 16 Creating Graphics: Apply Graphic Filters and Blends (Flash Professional Only) 16 This tutorial guides you through the process of creating eye-catching graphic effects using some of the authoring features in Macromedia Flash Professional 8 (Filters are not available in Flash Basic). By using the graphic filters and blend modes available in Flash, you can transform ordinary graphic objects into much more visually compelling content.
Review your task In this tutorial, you will add some graphics to the Stage and apply filters to them to create a realistic-looking image of a pool table with a narrow depth of field. The balls in the foreground and background will appear out of focus, as if seen through a camera. The completed FLA file To see the completed FLA file (Filters&Blends_finished.
Open the starter document Now that you have seen the document you will create, it is time to create your own version of the document. The first thing to do is open the starter document, which contains the graphic objects you will use with the filter and blend features of Flash. 1. In Flash, select File > Open. 2. Browse to one of the following locations: ■ ■ 3.
4. Drag the 9ball outlines movie clip from the Library panel onto the Stage so that it perfectly covers the 9ball instance. You can use the Arrow keys to make fine adjustments to the placement of the 9ball outlines instance. 5. With the 9ball outlines instance still selected, go to the Property inspector and select Multiply from the Blend menu. 6. Double-click outside the Stage to exit symbol-editing mode. The 9ball instance should still be selected on the Stage. 7.
Apply filters and blends to the cue ball The last step is to use a color effect and a filter to make the cue ball appear to be in the background of the Stage. 1. Drag the CueBall movie clip from the Library panel to the upper-left corner of the Stage. 2. With the new CueBall instance still selected on the Stage, go to the Transform panel and enter 70 in the W (Width) and H (Height) text boxes. This makes the CueBall instance appear smaller than the 8ball instance. 3.
Creating Graphics: Apply Graphic Filters and Blends (Flash Professional Only)
CHAPTER 17 Text: Add Text to a Document 17 Macromedia Flash Basic 8 and Macromedia Flash Professional 8 provide a variety of text features and options. This lesson introduces you to the three primary types of text you can add to a document. You can add static text for titles, labels, or other text content you want to appear in a document. You can also use input text options to allow viewers to interact with your Flash application—for example, to enter their name or other information in a form.
Create a dynamic text field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Specify format options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 View ActionScript for the dynamic text field . . . . . . . . . . . . . . . . 207 Test the SWF file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Check spelling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Create an expanding-width text block You can define the size of a text block, or you can use a text block that expands to fit the text you write. You’ll begin this lesson by simply adding text to a document. 1. Click in a blank area in the workspace to make sure no Timeline frames or objects on the Stage are selected. 2. In the Tools panel, select the Text tool. 3.
Create a fixed-width text block In addition to creating a line of text that expands as you type, you can create a text block that has a fixed width. Text that you enter into a fixedwidth text block wraps to the next line at the edge of the block. You’ll now create a static text block with fixed dimensions. 1. Verify that the Static Text layer is still selected in the Timeline, and use the Selection tool to deselect any objects on the Stage or Timeline frames (click in the workspace, away from objects) 2.
3. In the Tools panel, click the Selection tool. Use the Property inspector to select the bold style. 4. Click the text Fill Color control and select a different text color, such as another shade of gray. Select device fonts When you use a font installed on your system in a Flash document, Flash embeds the font information in the Flash SWF file to ensure that the font is displayed properly. In addition to embedding fonts, you can use the device fonts option.
4. In the text Property inspector, set the following options: ■ Select Input Text in the Text Type pop-up menu ■ Select Arial in the Font pop-up menu. ■ For the font size, enter 8. ■ Click the text color box and select a shade of dark blue. ■ Select the Alias Text button. The Alias Text button renders text so that it appears more readable at small sizes. For input text, this option is supported if the end user has Macromedia Flash Player 7 or later.
Assign instance names to text fields An input text field on the Stage is an instance of the ActionScript TextField object, to which you can apply properties and methods. As a best practice, you should name text field instances so that you or others working on the project can refer to the instance in ActionScript. 1. Select the input text field that you placed next to First Name. In the Property inspector, enter firstName_txt in the Instance Name text box. 2.
4. On the Stage, drag to create a text field in the area between the two horizontal rules. 5. In the Instance Name text box of the Property inspector, name the dynamic text field newFeatures_txt. The ActionScript in this document loads an external text file, which is in the same folder as your document. The ActionScript is set up to load the text into a field named newFeatures_txt. Specify format options The Format Options dialog box allows you to specify margin and indentation settings for the text. 1.
View ActionScript for the dynamic text field You can view the ActionScript that loads text from the external text file into the dynamic text field. This script uses LoadVars actions to load the safetyfeatures.txt content in the newFeatures text field. 1. In the Timeline, select Frame 1 of the Actions layer. 2. Select Window > Actions, or press F9.
Check spelling Flash Basic 8 and Flash Professional 8 introduce new features that let you check spelling in most places where text occurs in your document, including text fields, layer names, and ActionScript strings. To check spelling, you first configure the Spelling Setup options, and then run the spell checker. 1. Select Text > Spelling Setup. 2. Verify that Check Text Fields Content is selected, and that you’ve selected the appropriate dictionary. Select any other options, as desired. Then click OK.
CHAPTER 18 ActionScript: Use Script Assist mode 18 This tutorial guides you through using Script Assist mode in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. Script Assist mode prompts you to enter the elements of a script, and helps you to add simple interactivity to your SWF file (a compressed version of a Flash .fla file with the .swf extension) or application more easily.
In this tutorial, you will complete the following tasks: Examine the completed FLA file. . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Open the starter document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Add a script to a button by using Script Assist mode. . . . . . . . . . 213 Add frame scripts to the Timeline by using Script Assist mode . 218 Add a frame script to the Title movie clip . . . . . . . . . . . . . . . . . . . .
Examine the completed FLA file As you examine the finished version of an application that you’ll create, you’ll also look at the Flash workspace. In subsequent sections you’ll go through the steps to create the application yourself. Open the authoring document It’s helpful to analyze the completed authoring document, which is a FLA file, to see how the author designed the application. You should examine what kinds of scripts were used to add interactivity, and understand what you are going to create.
Review the completed FLA file In the completed FLA file, you will see all the objects (buttons, movie clips, and graphics) that make up the sample application. The application, a Flash-based company information website, looks like this: The completed FLA file There are three movie clips in the application: ■ The Title movie clip, which displays the section titles of the site when the user clicks the corresponding navigation links (Home, About, Products, Contact).
Open the starter document Now that you have seen the completed file, it is time to create your own Flash document. To get started, you’ll open a starter file that contains the elements to which you will add ActionScript code using Script Assist mode. To open the starter document: 1. In Flash, select File > Open. 2. Navigate to the following directory: ■ ■ 3.
4. In the Actions panel, you’ll see the Script Assist button above the ActionScript editor. Click Script Assist to display Script Assist mode. With no functions selected, the Script Assist pane is blank. Initially, the Script Assist portion of the Actions panel is blank. Script Assist mode prompts you to select options and set parameters for the functions that you add to the selected button. The parameters are displayed when you add an ActionScript function.
6. From the Movie Clip Control option, select the on event handler. N OT E An alternative method of adding ActionScript functions is to browse for and then select them from the Actions toolbox. The Add button on the Actions panel toolbar and the Actions toolbox display the same categories of functions and you can add functions to the editor from both. Script Assist mode prompts you to set the function’s parameters. The release event of the on event handler is selected by default.
7. Click Add again and then select the goto() function from the Global Functions > Timeline Control option. Adding the function that is triggered when the event occurs The goto() function is added as the action of the on event handler. In other words, when the Home button is pressed (the on handler) and released (the release event), the goto() action is executed. When the Home button is clicked, the movie clip should move to and stop at the Home frame of the Timeline.
10. In the Frame text box, enter home. Modifying function parameters to complete the script The changes you made with Script Assist mode are displayed in the ActionScript editor. You’ve just created a script without manually writing code in the ActionScript editor. When you test the application, clicking the Home button will display the title “Home” in the Title movie clip, indicating that the Home frame is currently displayed. Clicking the Home button displays “Home” in the Title movie clip.
Add frame scripts to the Timeline by using Script Assist mode Rather than adding scripts to individual objects, and acting on objects directly but also dispersing code in many different places in your Flash document, place the scripts in a frame in the timeline instead. This section demonstrates how you add scripts to a timeline. 1. On the main Timeline, select Frame 1 of the Actions layer. 2. In the Actions panel toolbar, click Script Assist to display the Script Assist window. 3.
5. Click the Insert a Target Path button to display the Insert Target Path dialog box. Selecting the target object from the Insert Target Path dialog box 6. Select the About button (about_btn) from the tween_mc movie clip. 7. Make sure that the Relative Path option is selected and then click OK. The target object (the Menu tween) is added. The path to the target object is added to the event handler.
You now need to add the goto() function, the action that occurs when the About button is clicked. 1. Using the Actions toolbox or the Add button on the Actions panel toolbox, select Global Functions > Timeline Control and insert the goto function. 2. In the Script Assist pane, select the Go To and Stop option. 3. Set the Type to Frame Label by selecting it from the Type pop-up menu. 4. In the Frame text box, enter about.
Add a frame script to the Title movie clip The final step is to add a script to the last frame of the Title movie clip. This script is used to display the text “Home” in the Title movie clip when its animation has completed. 1. From the Library panel, select the Title movie clip and its timeline is displayed. Selecting the Title movie clip timeline to add a script to the last frame 2. With the Actions layer selected, select the last frame (14) on the Timeline. 3.
5. Next, using either the Actions toolbox or the Add button, select ActionScript 2.0 Classes > Movie > MovieClip > Methods > gotoAndStop. Modifying function parameters to complete the script 6. In the Script Assist panel, select the gotoAndStop action on line 2. 7. Click in the Object text box. 8. Click the Insert Target Path button. 9. In the Insert Target Path dialog box, click the _root object and click OK. 10. In 11. the Frame text box, enter home. Deselect the Expression checkbox.
Test the application At any point during authoring, you can test how your application plays as a SWF file. Now that you’ve added scripts to the application with Script Assist mode, you can test the interactivity you’ve just added to it. 1. Select File > Save to save your FLA file. 2. Select Control > Test Movie. 3. Click any of the buttons (About, Products, Contact, and Home) to test that those frames are loading and that the corresponding title is displayed in the Title movie clip. 4.
ActionScript: Use Script Assist mode
CHAPTER 19 ActionScript: Write Scripts 19 The ActionScript language that is part of Macromedia Flash Basic 8 and Macromedia Flash Professional 8 offers designers and developers a variety of benefits.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Write Scripts and double-click scripts_start.fla.
3. From the Library panel (Window > Library), drag map_skewed to the black background area of the Stage. Because guides don’t appear when you first drag an object from the Library panel, you’ll release the object, and then drag it again. 4. Drag the map_skewed movie clip on the Stage again so that the align guides appear. Use the guides to align the movie clip to the top and left edges of the GPS screen.
Name button instances Using the appropriate suffix to prompt code hinting, you’ll provide instance names for two button instances that are already on the Stage. 1. In the Timeline, unlock the Buttons layer. 2. On the Stage, select the instance of play_button (the large green button). 3. In the Instance Name text box of the Property inspector, type onButton_btn to name the instance. 4. On the Stage, select the instance of button_stop (the small red button). 5.
4. Click in the Script pane, at the end of the screen_mc text, and type a period (.). 5. When you type the period, code hints appear for the movie clip, because you used the _mc suffix when naming the instance. Double-click _visible from the list of code hints, and type the following: = false; This line of code makes the screen_mc movie clip invisible on the Stage. NO T E If code hints don’t appear, you don’t have code hints selected as a preference in the Actions panel.
Locate ActionScript reference documentation During authoring, if you’d like additional information about the ActionScript that you enter, you can select the action in the Actions toolbox or Script pane and click Reference. The Help panel displays information about the selected action. 1. In the Script pane of the Actions panel, double-click visible to select the term. NO T E After completing the next step, you’ll change topics in the Help panel and you will no longer be on this lesson topic.
Write a function for a button A command in ActionScript is called a function. A function is a script that you can write once and use repeatedly in a document to perform a certain task. You’re going to write a function that makes the screen_mc movie clip appear (visible = true) when the user releases the mouse button. 1. In the Script pane of the Actions panel, click after the last line of code, press Enter (Windows) or Return (Macintosh) twice, and type // function to show animation 2.
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. You’ll create that function now. 1.
Check syntax and test your application As you learned earlier in this lesson, ActionScript depends on correct syntax to execute properly. Flash offers a variety of ways for you to test your syntax. 1. To check the syntax, do one of the following: ■ ■ Click the pop-up menu in the upper-right corner of the Actions panel title bar and select Check Syntax. Click Check Syntax along the top of the Actions panel. If the syntax is correct, a message appears stating that the script contains no errors.
Summary Congratulations on learning a few basics about writing scripts with ActionScript. In a short amount of time, you learned how to accomplish the following tasks: ■ Name instances following recommended practices. ■ Initialize a document. ■ Apply ActionScript syntax. ■ Locate ActionScript reference documentation. ■ Add comments to ActionScript. ■ Write a function. ■ Copy and modify a function. ■ Check syntax and test your application.
CHAPTER 20 ActionScript: Add Interactivity 20 Macromedia Flash Basic 8 and Macromedia Flash Professional 8 offer numerous ways to engage users with interactivity. When you incorporate interactivity, you’re not limited to playing each frame in a timeline sequentially; however, sequential playing offers greater design and development options. This tutorial will show you some of the ways to implement interactivity in Flash.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Add Interactivity and double-click interactivity_start.fla.
Name button instances You’ll provide instance names for the buttons on the Stage so that you can refer to the instance names in ActionScript. 1. On the lower-right side of the Stage, select the button at the left. In the Property inspector (Window > Properties), type goScene_btn in the Instance Name text box to name the instance of the symbol. 2. Select the middle button and use the Property inspector to give the button an instance name of attachMovie_btn. 3.
3. Use the Property inspector to give the Animation movie clip an instance name of animation_mc. 4. Rename Layer 1 Animation. Create a new layer and name it Buttons. Drag an instance of the BTNback symbol to the Stage, and place it anywhere to the right of the movie clip. 5. Use the Property inspector to give the button an instance name of back_btn. Move between scenes You can move between scenes in the authoring environment by selecting a scene in the Scene panel. 1.
Link a button to a scene Now that the playhead stops at Frame 1, you’ll add ActionScript that takes the user to Scene 2 upon releasing the goScene_btn instance. ■ Press Enter (Windows) or Return (Macintosh) twice and type the following comment. Then write the function that takes users to Scene 2 upon release of the goScene_btn instance: // This script takes the user to Scene 2 when goScene_btn // is released. goScene_btn.
Play a movie clip You can configure your document to play a movie clip at runtime. Using the attachMovie() method, you can attach an instance of a movie clip in the Library panel to the Stage even though you have not placed an instance on the Stage. With the attachMovie() method, you must export the symbol for ActionScript and assign it a unique linkage identifier, which is different from the instance name. 1. In the Library panel, right-click the MCTrio symbol and select Linkage from the context menu. 2.
Next, you’ll specify what the function does: it plays the movie clip on the root Timeline, which is the main timeline. In your script, you’ll refer to the movie clip by the linkage identifier name in the Linkage Properties dialog box (MCTrio). Additionally, even though you didn’t place an instance of the MCTrio symbol on the Stage, you’ll use ActionScript to create an instance name for the symbol. The instance name that you’ll specify is trio_mc. 3.
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.
Use a behavior to play an MP3 file When you want to add interactivity to your document with ActionScript, you can often rely on behaviors to add the ActionScript for you. You’ll use a sound behavior to play an MP3 file from the library. 1. In the Library panel, right-click (Windows) or Control-click (Macintosh) ping.mp3 and select Linkage from the context menu. 2. In the Linkage Properties dialog box, select Export for ActionScript and verify that Export in First Frame is selected. 3. Verify that ping.
Summary Congratulations on learning how to create an interactive document. In a few minutes, you learned how to accomplish the following tasks: ■ Create a new scene. ■ Write ActionScript to navigate between scenes. ■ Write ActionScript to play an animated movie clip at runtime. ■ Use a behavior to play an MP3 file. To learn more about ActionScript, take another lesson in the Basic ActionScript series.
CHAPTER 21 ActionScript: Create a Form with Conditional Logic and Send Data 21 You can create a form with conditional logic that allows the SWF file to respond to user interaction and send the form data from the SWF file to an external source. This tutorial shows you how to create a simple form. Before taking this lesson, you should be familiar with writing functions and variables; to learn about these, select Help > Flash Tutorials > Basic Tasks: Create an Application.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Create a Form and double-click simpleForm_start.fla.
3. In the Property inspector, do the following to set text attributes: ■ Select Input Text from the Text Type pop-up menu. ■ Select _sans from the Font pop-up menu. ■ Enter 10 in the Font Size text box. ■ Click the text color box and select a shade of dark blue. ■ Verify that Align Left is selected. ■ Verify that Single Line is selected in the Line Type pop-up menu. 4. In the Timeline, select Frame 1 of the Input Text layer. 5.
Add an error message You’ll add a message to display if the user clicks the Submit button before entering data. 1. In the Timeline, with the Branding layer selected, click Insert Layer and name the layer Dialog Boxes. 2. Select Frame 5 of the Dialog Boxes layer. Right-click (Windows) or Control-click (Macintosh) the selected layer and select Insert Blank Keyframe from the context menu. 3. From the Library panel, drag the Dialog Box-error movie clip to the center of the Stage. 4.
Add a confirmation message Next, you’ll add a message to display when the user submits an entry in the text field. 1. In the Dialog Boxes layer, select Frame 10. Right-click (Windows) or Control-click (Macintosh) the selected frame and select Insert Blank Keyframe from the context menu. 2. From the Library panel, drag the Dialog Box-confirm movie clip to the center of the Stage. 3. Close the Library panel.
4. Click in the Script pane of the Actions panel, and type the following comment: // Stops the playhead at Frame 1. Press Enter (Windows) or Return (Macintosh). 5. Type stop(); to add the stop action. Add frame labels for navigation When the viewer presses the Submit button, you want Flash to jump to either the error message or the confirmation message, depending on what is entered in the text field. Labeling a frame helps you reference it in ActionScript easily.
Add conditional logic for the Submit button With ActionScript, you can have Flash compare information and take action based on criteria you specify. In this example, you’ll add ActionScript for Flash to take one action if the user enters no data in the text field, and a different action if the user does enter data. 1. Select Frame 1 of the Actions layer. In the Script pane, place the insertion point after the stop(); code. Press Enter (Windows) or Return (Macintosh). 2.
11. Type gotoAndStop("confirm") in the Script pane. Press Enter or Return, and type }, and then press Enter or Return again and type };. Your script should appear as follows: // Stops the playhead at Frame 1. stop(); // Adds conditional logic for the Submit button that // validates user input. this.submit_btn.onRelease = function(){ if (url_txt.text == null || url_txt.
Write a function for the Try Again button 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 example, when the user clicks the Try Again button, a function runs that returns the playhead to Frame 1. You’ll write that function now. In this script, you’ll type the frame number, because you did not label Frame 1. 1. In the Timeline, select Frame 5 of the Actions layer. 2.
Summary Congratulations on learning how to write a script with conditional logic and send data. In a few minutes, you learned how to complete the following tasks: ■ Add an input text field to a document. ■ Create a button symbol. ■ Add a stop() action. ■ Write a script that validates the form with conditional logic. ■ Pass data out of a SWF file. ■ Write a function. To learn more about Flash, take another lesson.
CHAPTER 22 ActionScript: Work with Objects and Classes 22 Classes are the blueprint for objects in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. All objects in Flash have an underlying class; for example, all movie clips have a method called getURL(), and getURL() is defined in the class definition for a movie clip. Flash contains many predefined classes, such as the MovieClip class, the Array class, the Color class, and the CheckBox class.
Set up your workspace First, you’ll view the finished files and set up your workspace to use an optimal layout for taking lessons. 1. View the finished files. This lesson does not include start files. You can find finished files of handson1.fla, handson2.fla, handson3.fla, Product.as, and Drag.as, which are examples of the files that you’ll create in this lesson: ■ ■ 2.
Create an object from a class You’ll create an existing class using visual tools (the TextField class) and code (using the Date class). 1. Open a new Flash document and change the name of Layer 1 to Text. 2. In the Text layer, create a dynamic text field and assign it the instance name of currentDate_txt. 3. Create an Actions layer. With Frame 1 of the Actions layer selected, open the Actions panel. 4.
Modify your script You’ll modify your script to compensate for the zero indexing. 1. Add +1 to the value when you create currentMonth, and test your document to be sure the expected month number appears. That line of script should read as follows: var currentMonth:Number = myDate.getMonth()+1; 2. Comment the trace statement: // trace (currentMonth); 3. Below the trace statement, set the autoSize property of your text box to true: currentDate_txt.autoSize = true; 4.
Create a custom class Although ActionScript includes many classes of objects, such as the MovieClip class and the Color class, there will be times when you need to construct your own classes so you can create objects based on a particular set of properties or methods.
To create objects from this class, you could now use the following code: N OT E The following ActionScript is an example only. Do not enter the script in your lesson FLA file. var cliplessPedal:Product=new Product(1, "Clipless Pedal", 11); var monkeyBar:Product=new Product(2, "Monkey Bar", 10); However, in ActionScript 2.0, variables that are part of a class structure should not be accessed directly. Write methods within the class that will access these variables directly.
Build a custom class You’ll now build a new Product class with getter and setter methods and create an object from the Product class. 1. Create an ActionScript file by doing one of the following: ■ ■ 2. If you’re using Flash Professional 8, select File > New > ActionScript File (Not Flash Document). Save the document with the name Product. If you’re using Flash Basic 8, open a text editor, such as Notepad. Save the file with the name Product.as. (Remember to give the file the .
5. Define getter and setter methods for each property of the class, as in the following example. Specify Void as the return type for the setter methods, and indicate the data type returned for the getter methods. class Product { var id:Number; var prodName:String; var description:String function Product (id:Number, prodName:String, description:String) { setID(id); setProdName(prodName); setDescription(description); } public function setID (id:Number) :Void { this.
Create two objects from the Product class You’ll create a new FLA file, and then create two objects from the Product class. 1. Open a new Flash document and save it in the same location where you saved Product.as. 2. In the new document, select Frame 1 in the Timeline. 3. In the Actions panel, create two objects from the Product class using the data shown in the following table (the ActionScript that you’ll create appears after the table).
Learn 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.
Extend the MovieClip class to create a new class You’ll 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.
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 11.
Summary 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.
ActionScript: Work with Objects and Classes
CHAPTER 23 Data Integration: Overview (Flash Professional Only) 23 The following tutorials illustrate several ways to use data binding and the data components in Macromedia Flash Professional 8. Many of the tutorials use public web services and therefore require that you have an Internet connection. In addition, the tutorials won’t work in a browser because of sandbox restrictions, but they will work in the Flash authoring environment or Flash Player.
Data Integration: Overview (Flash Professional Only)
CHAPTER 24 Data Integration: Using the Macromedia Tips Web Service (Flash Professional Only) 24 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. You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www.macromedia.com/go/ fl_documentation.
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 Professional 8. Make sure your computer is connected to the Internet. 2. Open the Web Services panel (Window > Other Panels > Web Services), and click Define Web Services. 3. In the Define Web Services dialog box that appears, click Add Web Service (+), and then click the highlighted line to edit it. 4. Enter the URL http://www.flash-mx.com/mm/tips/tips.
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 menu. An instance of the WebServiceConnector component is added to the Stage. 7.
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 parameters and returned results of the Macromedia Tips web service. 1. In the Components panel, select UI Components > ComboBox. Drag a ComboBox component to the Stage.
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 web 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 Add Binding (+).
8. In the Component inspector, double-click the empty value in the Bound To field. In the Bound To dialog box, select ComboBox, for the component path and value:String for the schema location. 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 Add Binding (+) again. In the Add Binding dialog box, select results:String, and 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, as the component path and text:String as the schema location. Click OK. Finally, you will use a Button component and the trigger() method to trigger the service.
13. Test the application (Control > Test Movie). Select Flash from the ComboBox instance and click Get Tip. The results should look similar to the following screen shot: 14. Select Dreamweaver and click Get Tip again to view another tip.
CHAPTER 25 Data Integration: Using XML for a Timesheet (Flash Professional Only) 25 This tutorial shows you how to 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.
For this tutorial, you will need to the data.xml file provided in the Tutorial Assets folder. This file can be found in one of the following locations: ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Data Integration\Using XML for a Timesheet\data.xml ■ On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration/Using XML for a Timesheet/data.
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 on 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.
NO T E 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.
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 “About handling data types in data binding (Flash Professional only)” in 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”.
For more information on data binding and encoders, see “Schema encoders” in Using Flash (in Flash, select Help > Using Flash). 10. Select the @billable schema field. The field’s 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.
20.In the Bound To dialog box, click the Data Set component, and then select the dataProvider: Array schema location and click OK. 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.
23.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 N OT E The field names must exactly match the names of their corresponding properties within the XMLConnector component (@date = date, @billable = billable, @duration = duration), including capitalization. 24.Select the Date field that you just created.
4. In the Component inspector, click the Bindings tab. 5. Click the Add Binding button. 6. In the Add Binding dialog box, select the dataProvider: Array item and click OK. 7. In the Bindings tab, click the Bound To property. 8. In the Bound To dialog box, click the Data Set component, and then select the dataProvider: Array schema location and click OK. 9. In the Bindings tab, set the Direction to In. 10.
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.
CHAPTER 26 Data Integration: Using XUpdate to Update the Timesheet (Flash Professional Only) Prerequisite: “Data 26 Integration: Using XML for a Timesheet (Flash Professional Only)” This tutorial starts where the “Data Integration: Using XML for a Timesheet (Flash Professional Only)” tutorial left off. Now that the DataSet component is managing the data, it is tracking changes that are made to the data into the DeltaPacket property.
For this tutorial, you will need to the data.xml file provided in the Tutorial Assets folder. This file can be found in one of the following locations: ■ In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Data Integration\Using XML for a Timesheet\data.xml ■ On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration/Using XML for a Timesheet/data.
6. 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 “Updates sent to an external data source” in Using Flash (in Flash, select Help > Using Flash).
16. In the Add Binding dialog box, click the text: String property and click OK. 17. In the Bindings tab, double-click the Bound To property. 18. In the Bound To dialog box, click the XUpdateResolver component, and then click the xupdatePacket schema location and click OK. The update packet contains the modified version of the DeltaPacket that will be sent to the server. 19. In the Components panel, open the User Interface category and drag a Button component onto the Stage. 20.
