Welcome To MyFreeWebTemplates.info Flash Tutorials Area - Do-it-yourself scrollbar

Do-It-Yourself Slider

Should 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. In 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.
Getting Started... 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.
Making It Work... Copy the ActionScript below. ball.onpress=function() {ball.startDrag(false,5,186,150,186);d=1;}; ball.onrelease=function() {stopDrag();d=0;}; onmousemove=function() {if ((_ymouse>212) || (_ymouse<184)) {stopDrag();d=0;} else{ if (d==1){ disp=ball._x; block._width=disp; block._height=disp;} }}; 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. It'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, colors, etc. Click here for an "extreme" example of the slider at work. Download Flash Designer source projects: t1035.zip (12 kb)