Save the starter file as dogColor_100.fla.

Select the instance of the dog graphic on the Stage. Open the Property inspector and name this Movie Clip instance dog_1.

Create a new layer on the Main Timeline, and name the layer buttons.

Open the Components panel and drag an instance of the Button component onto the Stage. Place the instance near the left corner of the Stage. We discuss components in more detail in Chapter 33, "Using Components." For now, we guide you through the use of this component for the purposes of this exercise.

Select the Button component instance on the Stage, and open the Property inspector. Make sure the Parameters tab is selected in the inspector. Name this instance redButton. Type the text Red in the label field. Refer to the settings shown in Figure 27.4.

Figure 27.4. The parameters for this instance of the Button component

Now you need to create a changeColor() function in the movie. This function is executed by the redButton instance when the button is clicked. Create a new layer on the Main Timeline and name it actions. Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9 on the Mac). Type the following code into the Script pane:

1.  import flash.geom.ColorTransform;
2.
3.  var dog_1:MovieClip;
4.  var redButton:mx.controls.Button;
5.
6.  redButton.addEventListener("click", changeColor);
7.
8.  function changeColor(evt:Object):Void {
9.     var label:String = evt.target.label.toLowerCase();
10.    if (label == "red") {
11.       var ct:ColorTransform = new ColorTransform();
12.       ct.rgb = 0xFF0000;
13.       dog_1.transform.colorTransform = ct;
14.    }
15. }

Line 1 imports the ColorTransform class so that the ActionScript compiler can correctly create the Flash movie on publish. Lines 3 and 4 declare the data types of the dog_1 and redButton instances, respectively.

Line 6 tells the redButton instance to register the changeColor() function as a listener for click events. Whenever the redButton instance is clicked, the changeColor() function is invoked.

The changeColor() function is defined on lines 8 through 15. In this function, the evt argument represents an event object that the Button instance passes to the function. When the redButton instance is clicked, evt.target will equal redButton. (You'll be adding another instance in short order.) Line 9 of this function establishes a local variable named label that returns the label text inside of the target instance and converts the label text to lowercase. If label equals "red" in line 10, lines 11 through 13 will execute. Line 11 creates a new ColorTransform object called ct. Once the ct object is initiated, you can access properties of the ColorTransform object, such as rgb. In line 10, you set the color to pure red, designated by 0xFF0000 in hexadecimal. In line 13, you apply the ct instance to the colorTransform property of the MovieClip.transform property.

Save the Flash document, and test the movie. Click the redButton instance on the Stage. The color of the dog_1 Movie Clip should change to bright red. Close the Flash movie and return to the Flash CS3 authoring environment.

To see that rgb is both a property you can write and read, let's create some trace() messages for the Output panel. Go back to the changeColor() function on frame 1. Add the following line of code just before the closing curly brace ( } ) of the if() action. Type this as one line of code:

trace("ct's RGB numeric value = " + ct.rgb);

Save the document and test the movie. When you click the redButton instance, the Output panel opens and displays the following text:

ct's RGB numeric value = 16711680

To change this value back to the hexadecimal value you entered in the rgb property, you need to convert the value to base 16. Add the following action after the last trace() action from Step 8:

trace("ct's RGB hex value = " + ct.rgb.toString(16));

Save the document and test the movie. When you click the redButton instance, the Output panel should open and display the new value:

ct's RGB numeric value = 16711680
ct's RGB hex value = ff0000

However, you won't need to convert rgb's native return value to set another ColorTransform object equal to a previous rgb value. In the following steps, you will create another dog and ColorTransform object team.

Duplicate the dog_1 Movie Clip instance on the Stage (Edit

Duplicate the Button component instance on the Stage, and position the new instance below the original one. In the Property inspector, change its instance name to passRedButton. Change its label value to Pass Red.

Select frame 1 of the actions layer, and open the Actions panel. On the closing curly brace line of the existing if() code in the changeColor() function, add the code shown in bold in Listing 27.2. Also, add the new variables shown in bold formatting at the top of the listing.

import flash.geom.ColorTransform;

var dog_1:MovieClip;
var dog_2:MovieClip;
var redButton:mx.controls.Button;
var passRedButton:mx.controls.Button;

redButton.addEventListener("click", changeColor);

passRedButton.addEventListener("click", changeColor);

function changeColor(evt:Object):Void {
   var label:String = evt.target.label.toLowerCase();
   if (label == "red") {
      var ct:ColorTransform = new ColorTransform();
      ct.rgb = 0xFF0000;
      dog_1.transform.colorTransform = ct;
      trace("ct's RGB numeric value = " + ct.rgb);
      trace("ct's RGB hex value = " + ct.rgb.toString(16));
   } else if (label == "pass red") {
      var ct:ColorTransform = new ColorTransform();
      ct.rgb = dog_1.transform.colorTransform.rgb;
      dog_2.transform.colorTransform = ct;
   }
}

dog_2.transform.colorTransform = dog_1.transform.colorTransform;

Save the Flash document and test the movie. When you click the redButton instance, the dog_1 Movie Clip instance turns red. When you click the passRedButton instance, the dog_2 Movie Clip instance turns red.

Resave the Flash document from the previous section as dogColor_200.fla.

Select the original dog_1 Movie Clip instance on the Stage. Open the Property inspector, and choose the Advanced option in the Color menu. Press the Settings button to the right of the menu. In the Advanced Effect dialog box, enter the following value on the left-hand side: −100% Blue. On the right-hand side, enter these values: 37 G and 255 B. Refer to Figure 27.5. Click OK to close the dialog box. With these values, the dog_1 instance should be a monochrome blue with yellow eyes. Normally, you would want to write these values down so that you had them to use later. Because you have them printed here in this book, erase them by choosing None from the Color menu in the Property inspector. The dog_1 instance should now appear in its original state.

Figure 27.5. These settings will change the color of the dog_1 instance.

Duplicate one of the existing Button component instances on the Stage. Place the duplicated instance underneath the last Button component instance. Name the instance rabidButton. Change the label value to Rabid.

With this new instance, you will create some code that will initiate a new ColorTransform object. The new object will be given properties that have the same values as those determined in Step 2.

Select frame 1 of the actions layer and open the Actions panel (F9, or Option+F9 on the Mac). Add the bold code shown in Listing 27.3.

import flash.geom.ColorTransform;

var dog_1:MovieClip;
var dog_2:MovieClip;
var redButton:mx.controls.Button;
var passRedButton:mx.controls.Button;
var rabidButton:mx.controls.Button;

redButton.addEventListener("click", changeColor);
passRedButton.addEventListener("click", changeColor);
rabidButton.addEventListener("click", changeColor);

function changeColor(evt:Object):Void {
   var label:String = evt.target.label.toLowerCase();
   if (label == "red") {
      var ct:ColorTransform = new ColorTransform();
      ct.rgb = 0xFF0000;
      dog_1.transform.colorTransform = ct;
      trace("ct's RGB numeric value = " + ct.rgb);
      trace("ct's RGB hex value = " + ct.rgb.toString(16));
   } else if (label == "pass red") {
      var ct:ColorTransform = new ColorTransform();
      ct.rgb = dog_1.transform.colorTransform.rgb;
      dog_2.transform.colorTransform = ct;
   } else if (label == "rabid"){
      var ct:ColorTransform = new ColorTransform();
      ct.blueOffset = 255;
      ct.blueMultiplier = −1;
      ct.greenOffset = 37;
      dog_1.transform.colorTransform = ct;
   }
}

In the preceding code, you created a new ColorTransform instance named ct. In addition to rgb, ColorTransform instances can have offset and multiplier values for each color (and alpha) channel. In Listing 27.3, you assigned the values you determined in Step 2. Offset values have a one-to-one relationship with the offset values displayed in the Advanced Effect dialog box, but multiplier values are divided by 100. So, if you have a multiplier value of −100 in the Advanced Effect dialog box, the equivalent ColorTransform multiplier value would be −1. After you have set the appropriate offset and/or multiplier values, you apply the ct instance to the colorTransform property of the transform property of the dog_1 instance.

Save the Flash document, and test the movie. Click the new Button instance that you added in Step 3. The colors of the dog_1 Movie Clip instance should change to match those you saw in Step 2. Close the Test Movie window, and return to the Flash CS3 authoring environment.

Now you will create a button that restores the original look of the dog_1 Movie Clip instance.

Duplicate one of the Button instances, and place the new instance underneath the last Button instance. In the Property inspector, name this component instance restoreButton. Change the label value to Restore.

Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9 on the Mac). Add the bold code shown in Listing 27.4 to the Script pane.

import flash.geom.ColorTransform;

var dog_1:MovieClip;
var dog_2:MovieClip;
var redButton:mx.controls.Button;
var passRedButton:mx.controls.Button;
var rabidButton:mx.controls.Button;
var restoreButton:mx.controls.Button;


redButton.addEventListener("click", changeColor);
passRedButton.addEventListener("click", changeColor);
rabidButton.addEventListener("click", changeColor);
restoreButton.addEventListener("click", changeColor);


function changeColor(evt:Object):Void {
   var label:String = evt.target.label.toLowerCase();
   if (label == "red") {
      var ct:ColorTransform = new ColorTransform();
      ct.rgb = 0xFF0000;
      dog_1.transform.colorTransform = ct;
      trace("ct's RGB numeric value = " + ct.rgb);

trace("ct's RGB hex value = " + ct.rgb.toString(16));
   } else if (label == "pass red") {
      var ct:ColorTransform = new ColorTransform();
      ct.rgb = dog_1.transform.colorTransform.rgb;
      dog_2.transform.colorTransform = ct;
   } else if (label == "rabid"){
      var ct:ColorTransform = new ColorTransform();
      ct.blueOffset = 255;
      ct.blueMultiplier = −1;
      ct.greenOffset = 37;
      dog_1.transform.colorTransform = ct;
   } else if (label == "restore"){
     var ct:ColorTransform = new ColorTransform();
     dog_1.transform.colorTransform = ct;
 }


}

In Listing 27.4, you simply need to create a new ColorTransform instance (ct) and pass it to the colorTransform property of the MovieClip instance, dog_1. A new ColorTransform instance has default multiplier and offset values. So, when it's passed to a MovieClip object, the color properties are set back to the original values.

Save the Flash document again, and test the movie. Click the rabidButton instance you created in Step 3. After the dog_1 Movie Clip instance changes color, click the restoreButton instance you created in Step 6. Voila! The dog_1 Movie Clip instance reverts to its original color. Click the redButton instance that you created in the previous section. This button changes the appearance of the dog_1 Movie Clip instance to a solid red color. Now click the restoreButton instance—the dog_1 Movie Clip instance reverts to its original look!

Using the Open External Library command in the File

If you don't have a new untitled Flash document open, create a new Flash file (ActionScript 2.0). Save the new document as soundLib_ActionScript.fla.

Change the background color of the document to black in the Document Properties dialog box (Modify

Open the new document's Library panel (Ctrl+L or

Close the pianoKeys_sounds Library panel, and save your Flash document.

Figure 27.6. The imported sounds with their linkage identifiers displayed

Now, you need to add the ActionScript code that will create your Sound objects. You will construct a function that, when executed, will form a list of sound instances. On the Main Timeline (that is, Scene 1), rename Layer 1 to actions. Alt+double-click (or Option+double-click on the Mac) frame 1 of this layer. This opens the Actions panel. Type the following code into the Script pane:

var sounds:Array;

function createLib(num:Number):Void {
  var lib:MovieClip = this.createEmptyMovieClip("lib", 1);
  sounds = new Array();
  for (var i:Number = 1; i<=num; i++) {

The first line establishes an array variable named sounds, which will store references to each new sound added to the sound library. The next line of code establishes the name of your function, createLib(). You will want to dynamically change the number of sounds you create with this function. Therefore, we assign an optional parameter (called an argument) num that will be passed to the nested actions within the function.

The third line creates an empty MovieClip object, lib. This instance will hold individual sound targets, which you create in the next step.

The fourth line creates a new Array object, sounds. This array stores the Sound objects that the createLib() function creates.

The fifth line starts a for loop that cycles its nested actions until the condition i<=num is no longer true. i starts (or initializes) with a value of 1, and the syntax i++ tells i to increase by 1 with each pass of the for loop.

In the next step, you want the for loop to create a new instance of the Sound object for each sound in the Library, and attach each sound in the Library to its new instance.

In the Actions panel, add the following ActionScript to the code from Step 6:

var mc:MovieClip = lib.createEmptyMovieClip("snd_"+i, i);
  var snd:Sound = new Sound(mc);
  snd.attachSound("key_"+i);
  sounds.push(snd);
 }
}

The first line creates a new MovieClip object, whose name starts with snd_. This instance is stored with the lib instance. The local variable mc is a reference to the new MovieClip object as well. With each pass of the loop, a new instance is created (for example, snd_1, snd_2, and so on). Each instance is used to store the attached sound later in the for loop.

The second line makes a new Sound object that points to the timeline referenced by the target variable. Ultimately, your Sound objects will be tied to instances nested within the lib Movie Clip instance, which you'll see later.

The third line uses the attachSound() method to take a sound element in the Library and attach it to the Sound object. The argument for the attachSound() method is specified as "key_" + i. On each pass of the for loop, this expression will return "key_1", "key_2", and so on until the limit prescribed by the num argument is reached.

The complete block of code on the first keyframe of the actions layer is shown in Listing 27.5.

var sounds:Array;

function createLib(num:Number):Void {
   var lib:MovieClip = this.createEmptyMovieClip("lib", 1);
   sounds = new Array();
   for (var i:Number = 1; i <= num; i++) {
      var mc:MovieClip = lib.createEmptyMovieClip("snd_" + i, i);
      var snd:Sound = new Sound(mc);
      snd.attachSound("key_" + i);
      sounds.push(snd);
   }
}

Now that you have a function defined to create all the Sound objects, you need to invoke the function. With the code for frame 1 of the actions layer displayed in the Actions panel, type the following code just before the createLib() function definition:

createLib(7);

This line of code invokes the createLib() function. In addition to executing the createLib() method, you're also sending the function the number 7 as the num argument. Therefore, seven Sound objects are created.

Save the Flash document and test it (Ctrl+Enter or

Variable _level0.sounds = [object #2, class 'Array'] [
    1:[object #3, class 'Sound'] {
      id3:[getter/setter] undefined,
      duration:[getter/setter] 1752,
      position:[getter/setter] 0
    },
    2:[object #4, class 'Sound'] {
      id3:[getter/setter] undefined,
      duration:[getter/setter] 1602,
      position:[getter/setter] 0
    },
    3:[object #5, class 'Sound'] {
      id3:[getter/setter] undefined,
      duration:[getter/setter] 1822,
      position:[getter/setter] 0
    },
    4:[object #6, class 'Sound'] {
      id3:[getter/setter] undefined,
      duration:[getter/setter] 1672,
      position:[getter/setter] 0
    },
    5:[object #7, class 'Sound'] {
      id3:[getter/setter] undefined,
      duration:[getter/setter] 1660,
      position:[getter/setter] 0
    },
    6:[object #8, class 'Sound'] {
      id3:[getter/setter] undefined,
      duration:[getter/setter] 1728,
      position:[getter/setter] 0
    },
    7:[object #9, class 'Sound'] {
      id3:[getter/setter] undefined,
      duration:[getter/setter] 1785,
      position:[getter/setter] 0
    }
  ]

Close the Test Movie window and return to the Flash CS3 authoring environment. Select frame 1 of the actions layer and add this last bit of code to the Script pane:

sounds[0].start();

The first line of code targets the first declared element, 0, of the sounds object and tells it to begin playback with the start() method of the Sound class. Remember that element 0 in the array is a Sound object, which references the key_1 ID in the Library.

Save the Flash document and test it. You will hear key_1 sound (key_1.wav or key_1.aif) play.

Open your copy of the slider_basic_104.fla file via the File

Create a new Flash file (ActionScript 2.0). Save this document as soundSlider_100.fla.

Rename Layer 1 to volumeSlider.

Drag the sliderClip symbol from the slider_basic_104.fla Library panel to the new document's Stage. When you have finished, close the slider_basic_104.fla Library panel.

With the slider instance selected on the Stage, open the Property inspector. Name the instance volumeSlider. In the Transform panel, rotate the instance −90 degrees. (You can also use the Free Transform tool to rotate the instance.)

Now you need to create a Sound object. Import a sound file into the Flash document. Use a sound file that is at least 20 seconds long. You can import the atmospheres_1.wav (or .aif) file located in the resources folder of this book's CD-ROM.

After you have imported a sound file, select the sound in the Library panel. Right-click (Control+click on Mac) the sound file and choose Linkage in the contextual menu. In the Linkage Properties dialog box, select the Export for ActionScript check box and type sound_1 in the Identifier field. Click OK to close the dialog box.

Create a new layer on the Main Timeline (that is, Scene 1), and name the layer actions.

Select frame 1 of the actions layer and open the Actions panel (F9, or Option+F9 on Mac). In the Script pane, type the following code:

var sndBg:Sound = new Sound();
sndBg.attachSound("sound_1");
sndBg.start(0, 999);

This code creates the Sound object that the volumeSlider instance will control. Line 1 uses the new Sound() constructor to establish a Sound object name sndBg. Line 2 links the sound_1 asset (that is, the sound file in the Library) to the sndBg object. Line 3 plays the sound, starting at the beginning of the sound (0), and looping it 999 times for near-indefinite playback.

Save your Flash document. Test the movie (Ctrl+Enter or

To change the volume of the sndBg object, you need to take the position of the bar in the slider and apply its value to the setVolume() method of the sndBg object. You'll use ActionScript's event handlers to accomplish this.

Select frame 1 of the actions layer on the Main Timeline. Open the Actions panel, and insert the following code after the last action in the Script pane:

var volumeSlider:MovieClip;

volumeSlider.onMouseMove = function():Void {
 var vol:Number = this.pos._x/2;
 sndBg.setVolume(vol);
};

This code declares an onMouseMove() handler for the volumeSlider instance. Each time a mouse move is detected, the function defined for this handler executes. The first line of the function retrieves the current _x value of the mcPos instance inside of volumeSlider and divides it by 2. (See our coverage of the slider in Chapter 25, "Controlling Movie Clips" to learn more about this operation.) This value, declared as vol, is then applied to the setVolume() method of the sndBg object.

Save your Flash document again, and test it. Click and drag the bar on the slider. As you move it up, the sound increases in volume. As you move it down, the volume decreases.

Creating a slider that controls the balance output is almost identical to the process of creating the volumeSlider instance. You will make another instance of the sliderClip symbol, and add a new onMouseMove() handler for the new instance.

Create a new layer on the Main Timeline, and name it balanceSlider.

Drag an instance of the sliderClip symbol from the Library to the Stage. Place the instance to the right of the volumeSlider instance. In the Property inspector, name the instance balanceSlider.

Select frame 1 of the actions layer, and open the Actions panel. After the last line of code in the Script pane, type the following code:

var balanceSlider:MovieClip;
balanceSlider.onMouseMove = function():Void {
 var pan:Number = this.pos._x - 100;
 sndBg.setPan(pan);
};

This code declares an onMouseMove() handler for the balanceSlider instance. When the mouse moves within the Flash movie, the function for the onMouseMove() handler executes. In this function, though, we need to translate the _x property of the mcPos instance differently. Because pan values are within a range of −100 to 100, we need to map the 0 to 200 range of the slider accordingly. In order for the lowest value (0) to equal −100 and the highest value (200) to equal 100, you simply subtract 100 from the current _x property value returned by the position instance. You then apply this value to the setPan() method of the sndBg object.

Save your Flash document and test it. As you drag the bar on the mcBal instance to the right, you should hear the sound play in the right speaker. As you drag the bar to the left, you should hear the sound play in the left speaker.