|
Dear
Friend,
Hello
& welcome back to Firewire,
your friendly guide to the exciting world of web-design
& web-solutions!
In
this newsletter we will learn to create Sound
Controllers in Flash Mx. It consists of 2
background sound options with volume control slider
and an option to switch off and switch on, the playing
sound track.
Click
here to download the source (.fla) file.
|
1.
Create a new movie with dimensions of
75px. X 130px. and fps=30
with white color as background color.
1.
With the help of Rectangle tool create a gradient rectangle
of the stage size.
2. Select the gradient rectangle along with its outline, convert
it into a Movie Clip
(Choose Insert > Convert to Symbol)
with the center registration point selected and name
it as 'background'.
3. Also rename the layer as 'Background'.
1.
In volume slider, first create the slider path on which the
slider button will move.
2. Choose Insert > Layer
to create a new layer above Background layer
and rename it as 'Slider'.
3. Create a slider path of height
= 100 px as shown in the image. Choose Window
> Info and in the Info panel check the
height of the slider path.
4. Select the slider path on the stage and choose
Insert > Convert to Symbol
5. Create a Movie Clip and name it as 'slider path'
and set Registration point at the bottom left.
6. Select the slider path movie
clip on the stage and choose Insert
> Convert to Symbol.
7. Create a Movie Clip and name it as 'slider'
and set Registration point at the bottom left.
8.
Select the slider movie clip on the stage and choose
Edit > Edit in Place
9. Rename the existing layer as 'Slider Path'.
10. Insert a new layer above Slider Path layer
and rename it as 'Slider Drag'
11. Create a rectangular object on the stage
and convert it into a Graphic and name it as 'slider
button graphic' and set Registration point at center.
12.
Select the slider button graphic on the stage
and choose Insert > Convert to
Symbol to place it into a Button and name
it as 'slider drag button'.
13.
Choose Window > Info
14. In the Info panel set x=0
so that slider drag button should come at the center. i.e.
x position = 0
15.
Select the slider drag button and choose Window
> Actions
16. In the Button Actions panel type the following
actions
| on
(press) { |
| |
startDrag("",
false, 0, -100, 0, 0); |
| } |
| on
(release, releaseOutside)
{ |
| |
stopDrag(); |
| } |
| //
on
(press) { |
| |
startDrag("",
false, 0, -100, 0, 0); |
| } |
This
action makes the start drag button to drag when the button
is pressed. The dragging area is specific i.e. left=0,
top= -100, right=0, bottom=0
| //
on
(release, releaseOutside)
{ |
| |
stopDrag(); |
| } |
When
the button is released the above actionscript stops dragging
the start drag button.
17. Select the slider drag button and choose Insert
> Convert to Symbol to place it into a Movie
Clip and name it as 'slider drag'.
18. Choose Window > Properties.
In the Properties panel check the position of
the slider drag movie clip which should be
x=0 and y=-100
19.
Select Slider Path layer and insert a new layer
above it and rename it as 'Sign'
20. Draw a sign showing the level of volume as shown in the
image.
21.
Go back into the Scene 1 and shift the slider
movie clip to the left side of the stage.
|
