Using Components in Your Movie


In the following exercise, you use various components in a movie to activate and deactivate a series of elements. It provides an example of how you may use components in your movie to create interactivity.

On the CD-ROM 

The source file for this exercise called components_starter.fla is located in the ch33 folder on this book's CD-ROM. You will notice several components have been added to the Stage and have been given instance names. You'll also need to copy the component.txt file from this folder as well.

  1. Open the components_starter.fla file and resave it as components_100.fla.

  2. Locate the TextArea instance on the first frame. This instance is already named ctaInfo. You will write the ActionScript code to dynamically load a text file named component.txt into the movie at run time. If you open the component.txt file in a text editor, you'll see that this file declares a variable named strIntro, whose value will be used by the TextArea component. Add the code shown in Listing 33-1 to frame 1 of the actions layer, before the existing actions.

    Listing 33-1: The text_data Object

    image from book
     var ctaInfo:mx.controls.TextArea; var lvData:LoadVars = new LoadVars(); lvData.onLoad = function(bSuccess:Boolean):Void {    if(bSuccess){       trace("---text file loaded successfully");       ctaInfo.text = this.intro_text;    } else {       trace("---text file did not load.");    } }; lvData.load("component.txt"); 
    image from book

    Here, a LoadVars object named lvData loads the component.txt file, and sets the text property of the ctaInfo component instance to the strIntro variable declared in the component.txt file.

    Cross-Reference 

    For more information on the LoadVars object, refer to Chapter 29, "Sending Data In and Out of Flash."

    Tip 

    Throughout this chapter, you'll see that component instances have a specific name convention. All component instance names start with the letter "c," for component, which is then followed by a two-letter abbreviation of the component's name. For example, a prefix of cta denotes a TextArea component. This is our own naming convention; feel free to make one of your own.

  3. Save the Flash document, and test it (Ctrl+Enter or z+Enter). When the movie loads, you should see a trace() message appear in the Output panel indicating whether or not the text file loaded successfully. If it did load, the TextArea component should have filled with the text described in the component.txt file.

  4. Now that text is loading into the TextArea component, you will group the two RadioButton instances on the Stage so that they cannot be selected at the same time. On frame 1 of the Main Timeline, select each instance of the RadioButton components. In the Property inspector, enter the same text string into the groupName parameter for each instance. Let's give the radio buttons a group name of rgNews, which best describes their purpose in the movie. This identifier places both buttons in the same group.

  5. Give each instance a different value in the data field in the Property inspector's Parameters tab. This data is what is returned to the movie indicating the selection. Give the first RadioButton instance, crbDigest, a value of digest. For the crbNormal instance, assign a data value of normal.

  6. It is also a good practice to have one radio button already selected by default. In the Parameters tab for the crbDigest instance, set the selected value to true.

    Note 

    The live preview of the RadioButton component does not update the Stage to show the radio button as selected. You need to test your movie to see the selection occur.

  7. Now you are ready to have the "sign me up" button (the cbtSignup instance) send the movie to the right location, based upon which RadioButton instance is selected. Add the bold code shown in Listing 33-2.

    Listing 33-2: The onSignUpClick() Handler for the Button component

    image from book
     import mx.utils.Delegate; var ctaInfo:mx.controls.TextArea; var cbtSignup:mx.controls.Button; var rgNews:mx.controls.RadioButtonGroup; var lvData:LoadVars = new LoadVars(); lvData.onLoad = function(bSuccess:Boolean):Void {    if(bSuccess){       trace("---text file loaded successfully");       ctaInfo.text = this.intro_text;    } else {       trace("---text file did not load.");    } }; lvData.load("component.txt"); function onSignUpClick(oEvent:Object):Void {    trace(oEvent.target + "clicked");    var sData:String = rgNews.selectedData;    trace("\tsData: "+ sData);    if (sData == "digest") {       this.gotoAndStop("digest");    } else if (sData == "normal") {       this.gotoAndStop("normal");    } } cbtSignup.addEventListener("click", Delegate.create(this, onSignUpClick)); _lockroot = true; stop(); 
    image from book

    The first line of code imports the Delegate class that we discussed earlier in the chapter. This class assists us in controlling the scope of event handlers within our code.

    The cbtSignup instance is declared as a Button component, and the rgNews group name established in Step 4 is declared in your code. It doesn't need to be set to any particular value since the RadioButton components on the Stage will automatically create the rgNews object.

    In the onSignUpClick function, the current value of the rgNews group is assigned to a local variable named sData. Notice that the way in which you can retrieve the value of a radio button group is through the selectedData property. If sData is equal to "digest" (the data value for the crbDigest instance), the movie goes to the digest frame label. If sData is equal to "normal" (the data value for the crbNormal instance), the movie goes to the normal frame label.

    After the function is defined, the function is used within a Delegate.create() method as the listener of the "click" event of the cbtSignup button. If you didn't use the Delegate class here, then the gotoAndStop() actions in the onSignUpClick() function would fail because this scope would refer to the cbtSignup button.

  8. Save your Flash document, and test it (Ctrl+Enter or z+Enter). When you click the "sign me up" button, the movie should jump to the digest frame label. Click the Home button to go back to the first frame of the movie. Now, choose the Normal radio button, and click the "sign me up" button. The movie will jump to the normal frame label.

  9. Let's activate the ComboBox instance, ccbSections, so users who select an item from the menu are automatically taken to a certain area of your movie. This is very similar to what you have accomplished with the RadioButton instances, although you will use a different method this time. The instance name of the ComboBox has already been set to ccbSections. The values for the combo box's labels and data have also already been entered for you into the label and data fields, respectively. You can activate the instance of the ComboBox in two different ways. Because the data and labels are the same names, you could simply create a Button component instance and enter the following code onto the button:

     on (click) {   this._parent.gotoAndStop(this._parent.ccbSections.value); } 

    However, if you are not using the same data and frame label names, you need to do something a bit more complex, which can easily be applied to many different components. To avoid putting a lot of code on a button, and to make your drop-down box automatically take your user to a different area of the movie, you create a listener object for the ccbSections instance. Add the bold code shown in Listing 33-3 to the code on frame 1 from Step 7.

    Listing 33-3: The onSectionChange() Handler for the ComboBox Component

    image from book
     import mx.utils.Delegate; var ctaInfo:mx.controls.TextArea; var cbtSignup:mx.controls.Button; var ccbSections:mx.controls.ComboBox; var rgNews:mx.controls.RadioButtonGroup; var lvData:LoadVars = new LoadVars(); lvData.onLoad = function(bSuccess:Boolean):Void {    if(bSuccess){       trace("---text file loaded successfully");       ctaInfo.text = this.intro_text;    } else {       trace("---text file did not load.");    } }; lvData.load("component.txt"); function onSignUpClick(oEvent:Object):Void {    trace(oEvent.target + "clicked");    var sData:String = rgNews.selectedData;    trace("\tsData: " + sData);    if (sData == "digest") {       this.gotoAndStop("digest");    } else if (sData == "normal") {       this.gotoAndStop("normal");    } } function onSectionChange(oEvent:Object):Void {    var sVal:String = oEvent.target.value;    this.gotoAndStop(sVal); } cbtSignup.addEventListener("click", Delegate.create(this, onSignUpClick)); ccbSections.addEventListener("close", Delegate.create(this, onSectionChange)); _lockroot = true; stop(); 
    image from book

    Here, a function named onSectionChange is created. Its retrieves the currently selected value from the ccbSections instance (oEvent.target.value) and sets that as the value of a frame label used for a gotoAndStop() action.

  10. Save your Flash document, and test it. Click the ComboBox instance, and choose a section name. When you make a choice, the movie goes to the appropriate frame of the Flash movie.

  11. Now add a ScrollPane instance to the movie. The ScrollPane component enables you to add a Movie Clip symbol to a scrollable window. On frame 15 of the pages layer, drag an instance of the ScrollPane component onto the Stage from the Components panel. Size and position the new instance however you prefer.

  12. Open the Library panel. Select the file named beach.jpg, and drag it to the Stage. Convert it to a Movie Clip symbol by pressing the F8 key. In the Convert to Symbol dialog box, name the symbol pictureClip. Assign a registration point in the top-left corner. Click the Advanced button in the dialog box. Select the Export for ActionScript check box (which also selects the Export in first frame check box). The linkage identifier should also automatically be set to pictureClip. Refer to Figure 33-17 for these details.

  13. Select the instance of the ScrollPane component on your Stage. Open the Property inspector, and name the instance cspImg. Select the Parameters tab. For the contentPath parameter, enter the string pictureClip that you set as your symbol's linkage ID.

  14. Save your Flash document, and test the movie. Choose new from the ComboBox instance, and, on the new frame, you will see the image within the ScrollPane window. If you want to be able to drag the picture with the mouse, go back to the Parameters tab in the Property inspector and change scrollDrag to true.

image from book
Figure 33-17: The settings for the pictureClip symbol

On the CD-ROM 

You can find the finished file, components_100.fla, in the ch33 folder of this book's CD-ROM.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net