Creating Draggable Movie Clips Flash

Flash 4 introduced the drag’n’drop feature, which enables the user to pick up objects with the mouse pointer and move them around the movie stage. Flash 5 has added some new ways to use drag’n’drop with the new onClipEvent Movie Clip handler.

Drag’n’drop in Flash is based entirely on Movie Clips. The only objects that can be moved with the mouse are Movie Clip instances. So, if you want a drawing of a triangle to be moveable by the user, you have to first put that triangle into a Movie Clip, and then place a named instance of that clip onto the Stage. Flash’s drag’n’drop support is fairly broad, but more-complex drag’n’drop behaviors require some ActionScript knowledge. We’ll cover building drag’n’drop Movie Clips in two parts: “Drag’n’Drop Basics” and “Advanced Drag’n’Drop.”

Drag’n’drop basics
In mouse-based computer interfaces, the most common form of drag’n’drop goes like this: A user points to an element with the mouse pointer, clicks the element to begin moving it, and then releases the mouse button to stop moving it. In Flash 4, drag’n’drop functionality could only be achieved with the use of a nested Button instance in a Movie Clip symbol. Why? The Button symbol was the only Flash symbol that responded to mouse clicks. Furthermore, because Buttons couldn’t be targeted like Movie Clips, a Button instance needed to exist within a Movie Clip in order for it be draggable. Then, a Drag Movie Clip Action (in Flash 4) was added to that Button instance. This method still works in Flash 5 (with the startDrag method or action), and uses the least amount of ActionScript to enable drag behavior. Here’s how:

  1. Start a new movie. Create a new Movie Clip named dragObject.
  2. Create a simple button and place it on Frame 1, Layer 1 of the dragObject Movie Clip.
  3. Return to the main stage by choosing Edit➪Edit Movie (Ctrl+E or Command+E).Place a copy of the dragObject Movie Clip on Stage and, with it still selected, open the Instance Panel (Ctrl+I or Command+I). Type dragObject in the Name text field, and then press the Enter or Tab. This names our Movie Clip instance so that it can be referred to by the startDrag action.
  4. Return to the Symbol Editing Mode for the dragObject Movie Clip by doubleclicking the instance. Select the Button instance on the Stage, and open the Actions Panel. In the upper right-hand corner of the Actions Panel, make sure Normal Mode is selected in the options menu.
  5. Click the plus (+) button in the top-left corner of the Actions Panel and select Actions➪startDrag. In the parameter area of the Actions Panel, type _root.dragObject in the Target text field. The Target option specifies which Movie Clip should begin dragging when the startDrag action is executed. Note that though our startDrag action will be applied to the same Movie Clip that houses our button, a startDrag action can target any Movie Clip from any button, or from any keyframe.
  6. Now remember that we want to make our Movie Clip start moving as soon as the user presses the mouse button. So, change the button’s Event Handler from on (release) to on (press) by selecting the on (release) line in the Actions list, unchecking the Release option of the Event setting, and then checking Press.
  7. At this point, our button, when clicked, causes the dragObject Movie Clip instance to start following the mouse pointer. Now we have to tell the Movie Clip to stop following the pointer when the mouse button is released. With the last curly brace ( } ) highlighted in the Actions list, click the plus (+) button and select Actions➪stopDrag. The default Event Handler added is on (release), which is what we want, so that’s all we have to do. The stopDrag action stops any current dragging Movie Clip from following the mouse pointer.
  8. Test your movie with File➪Publish Preview➪Flash or Control➪Test Movie (Ctrl+Enter or Command+ Enter).Did it work? Great! Now we can tell you about the other basic settings for the startDrag action.

Constrain to rectangle
Check this setting in order to specify the limits of the rectangular region within which a draggable Movie Clip instance can be dragged. After you’ve checked Constrain to Rectangle, enter the pixel locations of the four corners of the rectangle.
The pixel coordinates are set relative to the top-left corner of the Stage upon which the draggable Movie Clip instance resides. For example startDrag (“drag-me”, false, 0, 0, 300, 300) would constrain the draggable Movie Clip instance named drag-me to a 300-pixel square region in the top-left corner of the Main Timeline’s Stage.

Lock mouse to center
This setting makes the dragged Movie Clip instance center itself under the mouse pointer for the duration of the drag. If the dragged Movie Clip instance is not already under the mouse pointer when the Drag Movie Clip action occurs, the instance will automatically be moved under the pointer, providing that the pointer is not outside the region defined by Constrain to Rectangle. When checked, this setting will add a Boolean value of true just after the specified instance name in the startDrag action.

Detecting the drop position: Using _dropTarget
In “Drag’n’Drop Basics,” we showed you how to make Movie Clip instances that the user can move around. But what if we wanted to force the user to move a Movie Clip Object into a certain location before we let them drop it? For instance, consider a child’s shape-matching game in which a small circle, square, and triangle should be dragged onto corresponding larger shapes. If the child drops the small circle onto the large square or large triangle, the circle returns to its original location. If, on the other hand, the child drops the small circle onto the large circle, the small circle should stay where it is dropped, and the child should receive a “Correct!” message. That kind of game is quite possible in Flash, but it requires some understanding of Movie Clip properties.

Here’s how it works we’ll use the circle as an example. First, create a draggable instance of the little circle Movie Clip just as you did earlier in the “Drag’n’Drop Basics” section (put a button in a Movie Clip, put a named instance of that clip on stage, and then add the startDrag and stopDrag actions to the button). Then, you create a large circle graphic Symbol, put it into a Movie Clip, and place an instance of that Movie Clip onto the Main Timeline’s Stage. Name the large circle Movie Clip circleBig. Here’s where the Movie Clip properties come in: When the user drops any Movie Clip instance, the instance’s _droptarget property is updated. The _droptarget property specifies the name of the Movie Clip instance upon which the dragged Movie Clip instance was last dropped. So if the user dropped the little circle Movie Clip instance onto the large circle instance, the _droptarget property for the little circle instance would be set to /circleBig. Knowing that, we can add an if . . . else condition to check whether the little circle was dropped onto the big circle. If it was, we simply let the little circle stay dropped, and we display a “Correct” message by targeting a Movie Clip to update a status-message contained within it. If the little circle wasn’t dropped onto the big circle, we return the little circle to its place of origin by setting the X and Y coordinate properties of the little circle instance. Here’s what the code on the little circle button would look like (note that the stopDrag action must occur before we check the _droptarget property):

Making alpha and scale sliders
A compelling use of a draggable Movie Clip is a slider that can alter the properties of another object. By checking the position of a Movie Clip, you can use the position’s X or Y coordinate value to alter the value of another Movie Clip. In this section, we create two sliders (one for alpha and another for scale) that will dynamically change the transparency and size of a Movie Clip instance on the Stage. Many thanks to Sandro Corsaro of spanktoons.com for supplying the artwork of Robert’s dog Stella and the park sign.

Assembling the parts
In this section, we set up the basic composition of the Stage, using elements from the slider_basic_starter.fla Library. You will add artwork of a dog and a park sign to the movie. The dog artwork will be duplicated using the duplicateMovieClip method, and the duplicate instance will be manipulated by the sliders that we create in the next section. The park sign will be used to remove the duplicate instance using the _dropTarget property and the removeMovieClip method.

  1. Open your copy of the slider_basic_starter.fla. Rename Layer 1 to dog_1.
  2. Access the movie’s Library by pressing Ctrl+L (Command+L). Open the dogElements folder, and drag the dog Movie Clip symbol onto the Stage. Place the instance in the upper-left corner of the Stage.
  3. With the dog instance selected, open the Instance Panel. In the Name field, type dog_1.
  4. Using the Text Tool, add the words Original Dog under the dog_1 instance. You don’t need to make a new layer for this artwork.
  5. The dog_1 instance will be used as our reference Movie Clip Object.

    The dog_1 instance will be used as our reference Movie Clip Object.

    The scale and transparency of this dog instance will not be changed.

  6. Create a new layer and name it parkSign. Move this layer below the dog_1 layer. Drag the parkSign Movie Clip symbol, located in the parkSignElements folder in the Library, to the lower-right corner of the Stage. In the Instance Panel, assign the instance the name parkSign. In the Transform Panel, reduce the size of the parkSign instance to 50.0%, as shown below.
  7. Create a new layer called actions, and place it above all the other layers. Double-click the first keyframe of this layer. In the Actions Panel (in Expert Mode), add the following actions:
  8. The first line of code duplicates the instance dog_1, names the new instance dog_2 and places it on the first depth layer of the _root timeline. The second and third lines of code position the dog_2 instance at the X coordinate of 350 (350 pixels from the left corner of the Main Timeline Stage) and the Y coordinate of 175 (175 pixels down from the left corner).

    The parkSign instance will be used to remove duplicates of the dog_1 Movie Clip instance.

    The parkSign instance will be used to remove duplicates of the dog_1 Movie Clip instance.

  9. Save your movie as a new .FLA file, and test the movie (Ctrl+Enter or Command+Enter). You should see a new instance of the dog_1 Movie Clip appear on the right side of the Stage.. Now that we have some artwork on the Stage, we can manipulate the duplicated Movie Clip with a pair of dynamic sliders.

Building the sliders
In this section, you’ll create two sliders: one for scale, and one for transparency. We’ll only need to make one slider Movie Clip symbol, and use a new instance for each slider. The basic “problems” of a dynamic slider are to (a) retrieve the position value of an object on the slider (we’ll call this the slider bar), and (b) set the value of another object equal to (or some factor of) the position value of the slider bar. Finding the position of a slider bar is relatively straightforward. The difficulty lies in creating the value scale for the slider.

The duplicateMovieClip method creates a new instance of a Movie Clip Object. Unless you alter the new instance’s X and Y position, it will appear directly above the parent instance.

duplicateMovieClip method creates a new instance of a Movie Clip Object

Because we have already determined the properties that will be altered (scale and transparency) we need to establish a range of values that each property can use.

Luckily, both scale (as _xscale and _yscale in ActionScript) and transparency (as _alpha) use percentage units. However, scale can be any value that’s greater than 0 percent and less than 3200 percent. Alpha has a range of 0 to 100 percent. If we want to use the same parent slider for each property slider, then we need to manipulate the position values of the slider bar differently for each property. Let’s start with building the basic slider.

  1. Create a new Movie Clip symbol (Ctrl+F8 or Command+F8) and name it slider. In Symbol Editing Mode, rename the first layer sliderRule. On this layer, drag an instance of the sliderRule Graphic symbol (located in the sliderElements folder of the Library) onto the Movie Clip Stage.
  2. With the sliderRule Graphic selected, open the Info Panel. On the right side of the Info Panel (on the diagram of the square bounding box), make sure that the registration point is set to the top-left corner of the selection’s bounding box. Then, enter the values –28.4 for the X coordinate and –12.4 for the Y coordinate, as shown below.
  3. The sliderRule’s starting point (just to the right of the first left-hand circle) needs to be at the slider Movie Clip’s zero X coordinate.

    sliderRule’s starting point (just to the right of the first left-hand circle) needs to be at the slider Movie Clip’s zero X coordinate.

  4. Create another layer for the slider Movie Clip and name it position. Drag an instance of the sliderBar Movie Clip (located in the sliderElements folder of the Library) to the slider Movie Clip Stage.
  5. With the sliderBar instance selected, open the Transform Panel. Type 90 in the Rotate field, and press Enter. In the Info Panel, click the center registration point in the bounding box diagram (on the right side), and enter 100 for the X coordinate and –0.3 for the Y coordinate.
  6. To see the position of the sliderBar instance, we need to assign a unique instance name. Select the sliderBar instance and type position in the Name field of the Instance Panel, as shown below.
  7. The starting X coordinate for the position Movie Clip instance is set to 100. When the Flash movie starts, this value will be applied to the scale and alpha properties of the dog_2 instance on the Main Timeline.

    starting X coordinate for the position Movie Clip instance is set to 100

  8. Now we need to make the position Movie Clip instance draggable. In earlier sections , you saw how to embed an invisible button in the draggable Movie Clip in order to receive mouseDown and mouseUp events. In this example, we’re going to make a button-free draggable Movie Clip instance, using the new onClipEvent handler for Movie Clip Objects. Select the position Movie Clip instance and open the Actions Panel. Add the following code to the Actions list:
  9. To make the position instance draggable, we need to detect the mouseDown event. Any Movie Clip that has the onClipEvent(mouseDown) handler will receive any and all mouse clicks on the Stage. Because this is the case, we need to determine whether the mouse click occurs within the space that the position instance occupies on the Main Timeline Stage.

    The first line of code uses the onClipEvent handler to detect the mouseDown event (the act of pressing down on the left mouse button). When a mouse click occurs, the actions nested within the onClipEvent action will be executed. The second line of code uses an if action to test whether the mouse click occurs on the position instance. The hitTest method can test the overlap of spaces in one of two ways: (a) by comparing a specific X and Y coordinate to an instance’s occupied space, or (b) by comparing one Movie Clip instance’s occupied space to another Movie Clip instance’s space. If the hitTest method is used in the first way, then you can also check whether the X and Y coordinate intersects with the bounding box of the instance (false) or the entire shape of the instance (true). In this example, we use the hitTest method to retrieve the current X and Y coordinates of the mouse pointer (_root._xmouse and _root._ymouse) and compare them to the occupied space of this, which is a reference to the current instance of the position Movie Clip. If the mouse pointer is over the position instance on a mouse click, then the hitTest method will return a true condition, and execute the nested if actions.

    The third line of code will execute only if the if condition on the second line is true. Here, we enable the dragging behavior of the position instance by using the startDrag method on this. Because it’s used as a method and not as an action, we don’t need to specify a target instance in the arguments. The arguments prescribed here lock the mouse to the center of the object and constrain the draggable region to a bounding box defined by 10, 0 and 200, 0. This effectively keeps the position instance confined to the line of our sliderRule Graphic.

    The fourth line of code sets a variable called state on the Main Timeline (_root) to the value of down. Because we’ll be using two instances of the slider Movie Clip symbol, we need to know whether any instance has received the mouseDown event. We’ll see why we need this code in later steps.

  10. Now we need to be able to stop dragging the position Object when the left mouse button is released. Again, we’ll use the onClipEvent handler to define our actions. Open the Actions Panel for the position instance:

  11. This block of code performs in the same manner that our code in Step 6 did. Once a mouseUp event (the act of releasing the left mouse button) is detected (line 1), we check whether the event occurred over the space of the position instance (line 2). If it did, then we stop the dragging of the position instance initiated in Step 6 (line 3). Finally, we set the state variable on the Main Timeline (_root) to up. Next, we’ll create two instances of the slider Movie Clip symbol on the Main Timeline Stage: one for scale, and one for alpha.

  12. Exit the Symbol Editing Mode, and return to the Scene 1 timeline (the Main Timeline). Create a new layer called scaleSlider. Open the Library and drag an instance of the slider Movie Clip to the Stage. Name this instance scaleSlider in the Instance Panel.
  13. Rotate the scaleSlider instance 180°, so that the registration point is on the right side of the slider. Move the scaleSlider instance to the lower right of the Stage.
  14. Create another layer called alphaSlider. Drag another instance of the slider Movie Clip on to the Stage, and name the instance alphaSlider. Rotate this instance –90°. Place the instance near the right edge of the Stage, as shown below.
  15. Save your Flash movie file and test it. You should be able to drag the position instances on both sliders.

Checking the positions of the sliders
Once we have a slider bar that is draggable, we need to access the new values of the position instance and apply the values to the properties of the dog_2 instance. To do this, we need to have a Movie Clip whose sole job is to check the X coordinate of the position instance. In this section, you’ll learn how to make a Movie Clip that uses the onClipEvent(enterFrame) handler.

  1. Create a new layer on the Main Timeline, and name it checkPosition. In the Library, you’ll find a Movie Clip symbol with the same name. If you doubleclick this symbol in the Library, you’ll find that there’s nothing inside of this symbol except some artwork indicating the symbol’s name on a single keyframe.
  2. At this point, your Flash movie Stage should contain the dog and parkSign artwork, as well as two instances of the slider Movie Clip symbol.

    Flash movie Stage should contain the dog and parkSign artwork

  3. Name the new instance checkPosition in the Instance Panel. Select the instance, and open the Actions Panel. In the Actions list, type the following code:
  4. Because the event enterFrame is specified for the onClipEvent handler, this block of code will execute continuously in our Flash movie. Why? Any timeline will continuously enter a frame for playback, even if a stop() action is applied to all timelines. The speed at which the enterFrame event occurs is determined by the frame rate of the Flash movie (as defined by the Modify➪Movie dialog). The frame rate of 20 fps was already set in the sample file before you opened it. Therefore, this block will execute 20 times each second.

    What happens on each execution of the enterFrame event? The second and third lines of code set the X and Y scale properties of the dog_2 instance to the value returned by the current X coordinate of the position instance (relative to the coordinates within the slider Movie Clip symbol).

    Notice that the target path for the position instance is the scaleSlider instance in lines 2 and 3. The fourth line sets the alpha property of the dog_2 instance equal to the X coordinate of the position instance within the alphaSlider instance.

  5. Save your Flash movie, and test it. When you drag the bar on the bottom scale slider, notice how the size of the dog_2 instance increases as you drag it to the left. Remember that we rotated this instance 180°, so it increases from right to left, not left to right. When you drag the bar down on the left alpha slider, you’ll see that the opacity of the dog_2 instance decreases.
  6. Okay, we have the sliders changing the size and opacity of the dog_2 instance. However, nothing happens as we drag the bar on the alphaSlider instance toward its upper limit. Because the X coordinate of the position instance starts at 100, we won’t see any visual effect to the alpha property as it increases beyond 100 percent. The lower limit of the alpha slider is 10 percent—it’s prevented from going below that value by the coordinate arguments of the startDrag method. Therefore, it would be better to have the alphaScale slider convert the X coordinate of the position instance to a true 0 to 100 range of
    values.

    To do this, we need to develop an equation that will do the work of automatically remapping values to a 0–100 scale. We know that the lowest X coordinate of the position instance is 10, and that the highest X coordinate is 200. If we want the highest position of the bar to provide 100 percent opacity, then we need to divide 200 by a number that will give us 100. Dividing 200 by 2 gives us 100. How does that work for the low end? If the X coordinate returns the lowest value of 10, then our lowest opacity value will be 5.

  7. Open the Actions Panel for the checkPosition instance, and modify the fourth line to read:
  8. _root.dog_2._alpha = (_root.alphaSlider.position._x)/2;
  9. Save your movie and test it. Now, as you drag up with the bar for the alphaSlider, the opacity increases. As you drag down, it decreases. So far, so good. However, it would be useful if the alphaSlider’s position instance started with an X coordinate of 200. This would initialize the dog_2 instance with an opacity of 100 percent. We could physically move the position instance within the slider symbol to an X coordinate of 200, but that would increase the scale of the dog_2 instance to 200 percent at the start. To change only the alphaSlider’s position instance at the start of the movie, we’ll add an onClip Event(load) handler to the position instance in the slider Movie Clip symbol. load events will be triggered as soon as a Movie Clip Object appears on the Stage. Within the onClipEvent action, we’ll check whether the position instance is within the alphaSlider instance. If it is, then we’ll move the position instance to an X coordinate of 200; otherwise, nothing will happen to the position instance.
  10. In the Library, double-click the slider Movie Clip symbol. In Symbol Editing Mode, select the position instance. Open the Actions Panel and add the following code to the Actions list:
  11. This block of code will execute once, when the position instance (a Movie Clip Object) first appears (or loads) on the Stage. Remember that the position instance occurs twice: once inside scaleSlider, and again inside alphaSlider. The second line of code checks which slider instance is executing this code. We use the _parent target to access the properties of the outer Movie Clip containing the position instance. Then, we access its name property (_name) to see if its name is alphaSlider. If it is, then, in line 3, we’ll change the X coordinate (_x) of this (which is the position instance) to 200.

  12. Save the Flash movie and test it. This time, the alphaSlider’s bar (its position instance) will immediately start at the upper limit.

Removing Movie Clips
At this point, you have two sliders that dynamically control the scale and alpha of the dog_2 Movie Clip instance on the Stage. What if you wanted to get rid the dog_2 instance? How would you delete it? The only way to remove a duplicated Movie Clip instance is to use the removeMovieClip method or action. In this section, we show you how to use the _dropTarget property and the remove MovieClip method of the Movie Clip Object.

  1. Select the dog_1 instance in the upper-left corner of the Stage, and open the Actions Panel. Type the following code into the Actions list:
  2. Most of this code is already familiar to you. Here we want to make only our duplicate dog instance (dog_2) draggable. We don’t want to be able to remove our original dog. Even if we wanted to, we couldn’t delete the dog_1 instance, as it is physically placed on the Stage of the Flash movie. Only duplicated Movie Clip instances can be removed with ActionScript.

    When a mouseDown event is detected, this code uses the hitTest method to see if the mouse pointer is over the current dog instance (this) and if the current dog instance (this) is not named dog_1. If both of these conditions are true, then the startDrag method of the current dog instance (this) will be enabled and constrained to the dimensions of the Flash movie Stage.

    When a mouseUp event is detected over the dog instance, then the stopDrag method will be executed. The last if statement checks whether the _drop Target property of the current dog instance is equal to the target path of the parkSign instance. If the dog instance is over the parkSign instance on the Stage when the dragging stops, then the current dog instance is removed.

  3. Save your Flash movie and test it. When you drag the dog_2 instance over the parkSign instance, it disappears.

Duplicating Movie Clips with new colors
What do we do after we’ve removed the dog_2 instance? How do we get more dog instances to use in the movie? This next section explores using the duplicate MovieClip method on a Button symbol. Not only will we duplicate the dog instance, but we’ll also change its color attributes using the colorTransformObject.

  1. On the Main Timeline, create a new layer and name it duplicateButton. Drag the crossHairsButton symbol from the Library onto the Stage. Place it in the lower-right corner, between the two sliders, as shown below.
  2. With the crossHairsButton instance selected, open the Actions Panel and type the following code:
  3. The crossHairsButton will contain actions that duplicate the dog_1 instance and apply different color attributes to the new instance.

    crossHairsButton will contain actions that duplicate the dog_1 instance and apply different color attributes to the new instance.

    Because we already covered the colorTransformObject earlier, we won’t explain its use here. However, we will describe the use of two new user-defined functions, randomPercent() and randomOffset(). These functions will be added to the Main Timeline (_root) in the next step. Instead of assigning fixed values to the color attributes, we supply new random values each time this button is clicked.

  4. Return to the Main Timeline and select the first keyframe in the actions layer. Open the Actions Panel, and add the following code to create the randomPercent() and the randomOffset() functions:
  5. Both of these functions work the same way. When each function is evoked, it will return a new random percent or offset value to the line of code that called the function. Each percent attribute (ra, ga, ba) evokes the randomPercent() function, while each offset attribute (rb, gb, bb) accesses the random Offset() function. The only difference between the two functions is the number multiplied to the Math.random() method. For percent, we need a value between 1 and 100. For offset, we need a value between 1 and 255.

  6. Save your Flash movie and test it. Click the Duplicate button and the dog_2 instance will be replaced with another instance of the same name. The new instance will have random color attributes.

Using the Mouse Object
While the onClipEvent(mouseDown) handler can be used instead of nested Button instances for draggable behavior, you may have noticed one small difference: The mouse pointer does not change the finger icon when you rollover a Movie Clip Object with onClipEvent(mouseDown or mouseUp) event handlers.

In Flash 4, we could emulate new mouse pointers by using the startDrag behavior (with lock to center true) on Movie Clips containing icon graphics. However, this technique did not hide the original mouse pointer it would appear directly above the dragged Movie Clip instance. In Flash 5, there is a Mouse Object, which has two simple methods:

  • show(): This method reveals the mouse pointer. By default, the mouse pointer will appear at the start of a movie.
  • hide(): This method turns off the mouse pointer’s visibility. To reveal the mouse pointer again, execute the show() method.

Once the Mouse Object (the mouse pointer) is hidden, you can lock a Movie Clip Object (containing a new icon graphic) to the position of the mouse pointer. If you have only one Movie Clip Object that works like a Button symbol, then attaching a new Movie Clip instance to the mouse pointer is relatively straightforward. However, in our slider example, we have two different sliders with draggable bars. If we want to enable a custom icon, we need to know which bar is being moused over, and which bar isn’t.

  1. On the Main Timeline, select the checkPosition Movie Clip instance. Open the Actions Panel, and add the following code to the Actions list:
  2. The first onClipEvent handler detects the load event. Remember that the load event happens when a Movie Clip instance first appears on the Stage. When the Movie Clip instance checkPosition appears on the Stage, the variable overSlider will equal false. This variable remembers if we’re currently mousing within one of the position instances. The second onClipEvent handler detects any mouse movements on the Stage with the mouseMove event. The two variables, scaleSliderOver and alphaSliderOver, will be either true or false, depending on the return of the hitTest method for the mouse pointer and the position instances. The first if statement checks to see if either hitTest returned a true value.

    The || operator indicates that only one hitTest needs to return a true value for the nested actions after the if statement to execute. If the mouse is over either slider, then the next if statement checks whether overSlider is not equal to true. When the checkPosition instance first loads, overSlider is equal to false. Therefore, the actions in this second if statement will execute.

    If overSlider is false, then the attachMovie method will be executed from the Main Timeline (_root). In this example, we are attaching the fingerIcon Movie Clip from the Library to a new instance of the same name. This new fingerIcon instance is a child of the _root timeline, and is located on its second depth layer—the dog_2 instance occupies the first depth layer. After the fingerIcon is attached to the _root timeline, we need to hide the mouse pointer.

    The code line Mouse.hide(); does just that. Then, we set overSlider to equal true so that these nested actions are not repeated until we leave a position instance and reenter its space. Then, we need to change its X and Y coordinates to match the position of the mouse pointer we can still track its position even if it’s hidden. The next two lines of code set the X and Y coordinates of the fingerIcon to the X and Y coordinates of the mouse pointer.

    If the mouse pointer is not over either of the sliders, then the else condition tells Flash what to do on mouseMove events: If the mouse isn’t currently dragging a slider’s bar (_root.state != “down”), then show the mouse pointer, remove the fingerIcon Movie Clip instance, and set overSlider back to false. If the mouse has clicked a position instance and is overdragging the area of the position instance (see the following Tip), we still want the fingerIcon to move with the hidden mouse pointer.

  3. Save the Flash movie, and test it. When you mouse over the bar of each slider, you should see the fingerIcon instance appear instead of the mouse pointer. That might have seemed like a lot of work to hide a mouse pointer, but in the process, you learned how to attach your own icons to the mouse pointer. If you want more than two Movie Clip instances to use the fingerIcon instance, you would add them to the first if statement that checks hitTest with the mouse pointer.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics