This tutorial was written for the Flash Designer software, which allows you to create flash animations in a much easier way than by using Macromedia Flash. You may get Flash Designer here.
you need the ability to dynamically adjust the properties of flash
content a slider is often a good way to do it. This slider allows you
to make simple changes to its ActionScript to accomplish a variety of
tasks, and it has the advantage of a fairly small file size. In this
tutorial we'll use it to adjust the width and height of a rectangle.
Drag the blue dot back and forth to try it out.
this case, the "range" of the slider is 5 to 150. This is accomplished
by constraining the blue dot's "drag area" to 5 (left) and 150 (right).
It's vertical drag limit is a constant 186, making it stay in a
straight line. More on that shortly. The value returned by the slider
(the x coordinate of the blue dot) is used as the width and height of
the green rectangle. The range and increments of the slider can be
easily changed to fit your needs.
Create a new .sfd file and size it to 280 x 220. Set frame delay to "Stop".
Create a rectangle and size it to 50 x 50. Place it in the top left corner of the frame. Set its colors to suit your taste.
Keep it selected and click Edit > Convert to Sprite. NOTE: When you convert it to a sprite it's size will increase by a pixel or two.
Click Item > Placement Properties. Name it "block" and check the "ActionScript Target" checkbox, then click "OK"
another rectangle and size it to 251 x 28. Drag it to position 2(x) and
184(y). Set colors to your taste. This'll be the body of the slider bar.
a rectangle and size it to 150 x 7. Position it a 5(x) and 194(y). Set
it's color to contrast with the larger rectangle. This is the track of
the slider bar.
Select the circle tool in the left-hand toolbar and
draw a small circle while depressing the CTRL key (draws a perfect
circle). Size it to 22 x 22. Set color to taste. Color should contrast
with the previous rectangles. Position the circle at 52(x) and 186(y).
This is the dot you drag in the slider.
With the circle
still selected, click Edit > Convert to Sprite. Rename it "ball" and
click the "ActionScript" target checkbox.
Create a rectangle
and size it to 60 x 24. Set the fill color to black and the line color
slightly lighter than the color of the "body" of the slider. Set line
width to 2 pixels. Position it at 187 (x) and 186 (y).
an edit field and size it to 42 x 18. Position it at 191(x) and 188(y).
Double-click it to open its properties dialog box. Rename it as "disp".
Set its initial value as 52. Make sure that the ONLY checkbox checked
is "No selection." Click "OK". Set the text color of the edit field to
light gray or white.
If you wish, add the "Min" and "Max" text objects. HTML text is best because it's a small font. I used 10-pt Arial.
Click Frame > ActionScript and paste the code into the dialog box, then click "OK".
Save the .sfd.
Using the Slider...
Click the green Preview button to see it work. Dragging the dot left
or right should size the rectangle up or down. The value displayed in
the edit field is the width and height of the rectangle derived from
the "x" coordinate of the ball.
How It Works...
In the first block of code, note that the "y" value for the drag
area is set at 186 for both the start and end values. This keeps the
dot from moving vertically thus keeping it on the track. The "x" values
for the drag area are set at 5 and 150. This sets the horizontal limits
for the StartDrag() command. The rectangle is resized according to the
horizontal position of the dot. Drag it to position 100, and the
rectangle sizes up to 100 x 100. Drag the dot left to 25, and the
rectangle downsizes accordingly.
The second code block stops drag action when you release the mouse.
Note that in the next code block, there is an "if" statement. This
checks the vertical position of the mouse pointer. If it gets too far
above or below the dot, drag is disabled. I used this due to a quirk in
ActionScript's "ondragout()" command. It's possible for the mouse to
temporarily outrun the dot if you move it too quickly, thereby stopping
the drag action before you're ready. Trust me, this is irritating. The
"if" statement is a workaround for the problem. The remaining lines of
code update the display and resize the rectangle. The "d" variable
disables the resize when you release the mouse. Otherwise, you'd get a
new value when you release the mouse button.
t's also possible to use the slider's values as percentages. This
would, for example, allow you to resize an image while keeping it
properly scaled. This is a good bit more complex than the example above
and as such I didn't use it for this tutorial. Suffice it to say that
almost any property which can be adjusted programmatically with
ActionScript can be set dynamically with a slider. Zoom, font size,