Flash tutorials
Home 3D (2) Actionscripting (66) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (54) Text Effects (38)

RGB Slider

25.1.2007, 0:39    Total views: 39728
Page:  1  2

Step 15

Take the Text Tool (A), and in the Properties Panel below the stage, select the following options:

1. Select a Dynamic Text field. You need this kind of text field to be able to manipulate it via ActionScript.
2. Select a Arial font and bold it.
3. Choose 12 as font size.
4. Select black as color.
5. As the rendering option, select Bitmap text (no anti-alias).



Then, click and drag out a text field on the stage below the slider. See the picture below.



Step 16

After that, in the Properties Panel below the stage, for Var type redRGB



Now, we're done with the first (red) slider. Repeat the previous steps to create the green and blue slider in an equivalent way like we have done the previous slider. See the picture below.



Step 17

Take the Oval Tool (O), for Stroke color choose no color, for Fill color choose any color and draw a "circle" about 230x230 pixels.





Step 18

While the "circle" is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 19

After that, while the new made Movie Clip (circle) is still selected, go to the Properties Panel below the stage, and for <Instance Name> type (call this Movie Clip) circle. See the picture.



Step 20

It's time for control point, so take again the Oval Tool (O), for Stroke Color choose no color, for fill color choose any color, and draw a "circle" 5x5 pixels, out of stage. See the picture below.



Step 21

While the "control point" is still selected, press F8 key to convert this "control point" into a Movie Clip Symbol.



Step 22

While the new made Movie Clip ("control point") is still selected, go to the Properties Panel and for <Instance Name> type ControlPoint.



Step 23

Take the Selection Tool (V), click once on the "control point" to select it and go to the Properties Panel again. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 24

onClipEvent(enterFrame){
 _parent.redRGB = (_parent.RedSlider.RedControlBar._y+122).toString(16);
 if (length(_parent.redRGB) == 1)
  _parent.redRGB = "0" + _parent.redRGB;
 _parent.greenRGB = (_parent.GreenSlider.GreenControlBar._y+122).toString(16);
 if (length(_parent.greenRGB) == 1)
  _parent.greenRGB = "0" + _parent.greenRGB;
 _parent.blueRGB = (_parent.BlueSlider.BlueControlBar._y+122).toString(16);
  if (length(_parent.blueRGB) == 1)
  _parent.blueRGB = "0" + _parent.blueRGB;
 finalColor =  "0x" + _parent.redRGB + _parent.greenRGB + _parent.blueRGB;
 _parent.circleColor.setRGB(finalColor);
 _parent.circleColor.setRGB(finalColor);
}

Step 25

Create a new layer and name it action. Click on the first frame and in Action Script Panel (F9), enter the following ActionScript code inside the Actions panel:

circleColor = new Color(circle);

Test your Movie (Ctrl+Enter)

We're done!

Download source file (.fla)

Previous:  RGB Slider
Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 225776

2. Water effect
Total views: 169740

3. Photo slide show
Total views: 157592

4. High-tech city animation
Total views: 154983

5. Special Picture Effect
Total views: 148811

Related links