Creating dynamic sound controls in Flash

Constrain a slider over a groove for a volume-control interface

To constrain a slider over a groove for a volume-control interface:

1. Create a movie clip of a tall rectangle that is 100 pixels high and whose registration point lies at the bottom edge.
2. Place an instance of the clip on the Stage, and name it groove_mc in the Property inspector.
3. Create another movie clip of a slider.
4. Place the slider clip on the groove_mc movie clip, and name it slider_mc in the Property inspector (Figure 2).

Figure 2: The movie clip instance called groove_mc will limit the motion of the draggable movie clip called slider_mc. Make sure that the registration point of the groove_mc movie clip lies at its bottom edge.

1. Select the first frame of the main Timeline, and open the Actions panel.
2. Assign an onPress event handler to the slider_mc movie clip.
3. Enter the keyword this followed by a period.
4. Choose Global Functions > Movie Clip Control > startDrag.
5. With your pointer between the parentheses, enter the Boolean value false followed by a comma. The lockCenter parameter tells Flash to drag the object from wherever the mouse pointer clicks it.
6. Enter the following parameters for the left, top, right, and bottom constraints, respectively:
   • _root.groove_mc._x
   • _root.groove_mc._y - 100
   • _root.groove_mc._x
   • _root.groove._y

These parameter values constrain the left and right sides to the center of the groove_mc movie clip. The top is constrained to 100 pixels above the lower edge of the groove_mc movie clip, and the bottom is constrained to the lower edge of groove_mc (Figure 3).

Figure 3: In the onPress handler for the slider movie clip, the startDrag() method’s second through fifth parameters constrain the slider_mc movie clip from the center point to 100 pixels above the center point of the groove_mc movie clip. Here the method has been split onto five lines, but it works the same written out as one line.

11. Assign an onRelease event handler to the slider movie clip.
12. In the onRelease event handler, choose Global Functions > Movie Clip Control > stopDrag.
13. Test your movie (Figure 4).

Figure 4: The full script. The slider movie clip can be dragged along the groove movie clip.

Page 2 of 5

Previous Page

Next Page