Learn Flash: Volume Slider	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash - Volume Controls

Free Flash Volume Slider Tutorial

Step Two: Creating the Slider

First we will create the horizontal volume control bar:

1. Go to: Insert > New Symbol
2. Name the symbol: Control Bar MC
3. Behavior: Movie Clip
4. Click: OK
5. Using the Rectangle tool: Draw a rectangle
6. When you have finished drawing the rectangle return to your Arrow tool:
7. If the Property Inspector is closed, Open it: Window > Properties
8. In the Property Inspector select any colour you may want for the stroke and fill.
   Mine has a black outline with a gradient fill.
9. In the Property Inspector set the size as follows: 30 x 8 pixels
10. Center the rectangle: X = -15  Y = -4
    
    
    Details in the Property Inspector.
    
    It is now time to create the vertical slider bar:
    
    
11. Go to: Insert > New Symbol
12. Name the symbol: Slider MC
13. Behavior: Movie Clip
14. Click: OK
15. Using the Rectangle tool: Draw a rectangle
16. When you have finished drawing the rectangle return to your Arrow tool:
17. In the Property Inspector select any colour you may want for the stroke and fill.
18. In the Property Inspector set the size to: 10 x 100 pixels
19. Center the rectangle on the horizontal X axis: X = -5
20. On the vertical Y axis the bottom of the slider must be located on the registration point: Y = -100
    It is -100 because Flash measures from the top of the rectangle down.
    
    
    Details in the Property Inspector. Note at the bottom of the slider the position of the registration point:
    
    It is now time to add the Control Bar MC.
    
    
21. Re-name Layer 1: Up Bar
22. In the Timeline click the Insert Layer Button:
23. Name the new layer: Slide Bar
24. Open the Library: Window > Library
25. From the Library drag onto Stage the symbol: Control Bar MC
26. Center the symbol on the horizontal X axis: X = -15
    
    Note: The position of the symbol on the Y axis is not important as it is controlled by ActionScript.
    
    
27. In Property Inspector give the symbol, Control Bar MC an Instance Name: control
    
    
    The completed Slider.
    
    The slider is now completed. Go back to the main Stage by clicking on the Tab: