• 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"
• Create 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.
• Create 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).
• Create 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 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.

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.

Download Flash Designer source projects: t1035.zip (12 kb)