This tutorial will help you to learn how to create RGB slider in flash 8 using the Action Script.



Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 450 pixels and the height to 350 pixels.Set the background color as whatever you like, I used white for this example. Set the frame rate at whatever you want, I use 14 fps for this example.



Step 2

Take the Rectangle Tool (R).In the Properties Panel put the Fill color to the same red, for Stroke color choose no color, and draw a "rectangle" 5x225 pixels. See the picture below.





Step 3

While the Rectangle Tool (R) is still selected, draw again a "rectangle" that will represent horizontal control bar 40x10 pixels, and place it on the stage like it is shown on the picture below.



Step 4

Select the whole slider (Ctrl+A) and press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 5

While the new made Movie Clip (slider) is still selected, go to the Properties Panel (Ctrl+F3) below the stage, to its left side. You will find the Instance name input field there.Then,call this Movie Clip RedSlider.



Step 6

Double-click on the Movie Clip on stage with the Selection tool(V).You should now be inside the movie clip.



Step 7

Take the Selection Tool (V), and select only the horizontal control bar (See step 3).Then, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 8

While the horizontal control bar (new made Movie Clip) is still selected, go to the Properties Panel below the stage, and for <Instance Name> type (call this Movie Clip) RedControlBar.See the picture below.



Step 9

Take the Selection Tool (V), click once on the horizontal control bar to select it, open the Action Script Panel (F9), and enter the following ActionScript code inside the Actions panel:

onClipEvent(load){
top = _y;
bottom = _y+224;
left = _x;
right = _x;
}

Step 10

Close the Action Panel (F9), and while the Selection Tool (V) is still selected, double click on a new made Movie Clip (horizontal control bar). See the picture below.



Step 11

While the horizontal control bar is still selected, press again F8 key and convert it into a Button. See the picture below.



Step 12

While the button (horizontal control bar) is still selected, in the Properties Panel for <Instance Name> type RedControlBarBtn.



Step 13

Take the Selection Tool (V), click once on the button, go to the Action Script Panel (F9), and enter the following ActionScript code inside the Actions panel:

on(press){
startDrag(this,false,left,top,right,bottom)
}
on(release){
stopDrag();
}

Step 14

Go back on the main scene (Scene 1).

Next:  Part 2

Have questions about this tutorial? Visit our friendly Community Forums!