- Initializing the Paint Program
- Creating the Sliding Color Chooser
- Scripting the Tool Buttons
- Scripting the Paint Tools
- How It Works
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating the Sliding Color Chooser
In the first section, the AdjustColor() function was defined, allowing the position of each of the three color sliders to be converted into color information. But as they stand, the sliders themselves are just ordinary Movie Clip instances. To allow them to be dragged, more scripting is needed. In this section, Clip Events will be used to respond to mouse actions, as an alternative to using buttons. The instance names of each of the slider clips have been assigned for you; they are RedSlider, BlueSlider, and GreenSlider, respectively.
-
Select the red-colored slider handle, and bring up the Actions panel. Add the code for the first Clip Event handler (see Figure 10):
onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse, true)) { Dragging = true; } }In this block of code, some actions are being tagged for execution anytime the mouse button is clicked over the entire movie. Because Clip Events are global and affect the whole movie (unlike button actions that relate to only that button instance), more code is required to see if the user is actually clicking this slider handle.
Figure 10 The onClipEvent (MouseDown) code is added to the red slider handle.
The hitTest action performs basic collision detection in Flash, and, given a set of X and Y coordinates, it can let you know if a particular object exists there. So, hitTest can be applied to the slider using the current mouse coordinates. If hitTest returns true, it is known that the user is, in fact, clicking the slider, and the rest of the code is run. In this case, a variable named Dragging is set to true to indicate that the user is dragging the slider.
-
Insert this code (see Figure 11):
onClipEvent (mouseUp) { Dragging = false; }This code has the opposite effect of the code in Step 1. This time, the mouseUp Clip Event is being captured. Logically, when the user releases the mouse button, he can no longer be dragging the slider (or anything else, for that matter), so Dragging is set to false. No if statement is required because it doesn't matter where the mouse is released—all that counts here is that the user is no longer dragging.
Figure 11 The onClipEvent (MouseUp) code is added to the red slider handle.
The final section of the slider code is a Clip Event handler for enterFrame. The enterFrame event fires every time the Stage is refreshed. It is a global event, so it doesn't matter whether the Movie Clip that it is attached to is playing. Therefore, enterFrame is used in this technique as an "engine driver" event that allows for actions to be repeated continuously even though the movie itself comprises only one frame.
-
Add the final handler code (see Figure 12):
onClipEvent (enterFrame) { if (Dragging && _root._xmouse > 425) { _x = 425; } else if (Dragging && _root._xmouse < 365) { _x = 365; } else if (Dragging && _root._xmouse [ccc] < 425 && _root._xmouse > 365) { _x = _root._xmouse; } _root.AdjustColor(); }NOTE
Why are all the _root's necessary? Clip Event scripts are a little misleading because you appear to attach them to the outside of a Movie Clip instance. In fact, they are stored and run from inside the clip's unique Timeline. So, any references to variables or objects need to be written as though you were assigning them to a keyframe inside the Movie Clip—hence, all the _roots appended to the object references in this enterFrame handler.
The aim of all the scripts in this section is to make the slider behave a particular way. The desired behavior is that the slider should stick to the mouse cursor when clicked and should move left or right within a range of 60 pixels. So, the code in this step alters the position of the slider object to reflect the X coordinate of the mouse, but only if that position is between X: 365 (the leftmost point) and X: 425 (the rightmost point). If the mouse is outside that range but the mouse button is still pressed, the slider is forced to stay put at either end of its invisible tether.
This effect is achieved with a set of if statements, each written to check two things: first that Dragging still equals true, and second the position of the mouse. The _x property of the slider is altered accordingly, being set to 365, 425, or the X coordinate of the cursor.
The scripts assigned to the red slider are identical to those needed on the other two sliders.
Copy the code from the Actions panel that you just entered, select each of the other sliders in turn, and paste the code back into the panel. Now all three sliders are active.
Figure 12 The onClipEvent (enterFrame) code is added to the red slider handle.
NOTE
Where do the slider clips come from? Because Clip Event scripts are assigned to instances individually rather than via the parent symbol, it's possible to reuse Movie Clips and have each instance perform a unique set of tasks. So, these sliders are just instances of the same symbol used to create the CurrentColorDisplay object, with color effects applied to make them red, blue, and green.
){kind=link}
){kind=link}
){kind=link}