Random Music Bars
Download Source
Description
In this tutorial you will learn how to dynamically perform the following:
FOR Loop
using Math.random
Scaling objects randomly
Positioning objects randomly
The example below demonstrates two different random techniques. The first one is the duplication of four circles in random positions. The second is a music bar player to give the impression the height of the bars jumps to the music.
A very easy technique that adds a little extra theme to a flash based music player.
Here is the final result:
ActionScript 2 Source Explained
[expand title=Complete Source Code]
onEnterFrame = function () // When the user enters this frame, initiate the following script
{
for (rPick = 1; rPick < 5; rPick++) // Set the variable rPick to get ready to choose a circle
{
var _vary = Math.random() * 50; // Declare variable _vary to randomly cause changes to happen up to 50 different ways
_root["r" + rPick + "_mc"]._xscale = _vary; // Change the width of the circle
_root["r" + rPick + "_mc"]._yscale = _vary; // Change the height of the circle
var _changeAlpha = 100 - (drag_mc._y - 340); // Set a variable to change the alpha of the slider
_root["r" + rPick + "_mc"]._alpha = _changeAlpha + 5; // Depending on the position of the slider, set the alpha
// Only use half the screen to display the circles
var _xPos = Math.random() * 640; // Declare variable _xPos to move the circle randomly between 0 and 640
_root["r" + rPick + "_mc"]._x = _xPos; // Change the position of the circle using _xPos
var _yPos = Math.random() * 240; // Declare variable _yPos to move the circle randomly between 0 and 240
_root["r" + rPick + "_mc"]._y = _yPos; // Change the position of the circle using _yPos
}
for (bPick = 0; bPick < 15; bPick++) // Set the variable bPick to get ready to choose a bar
{
var _bSize = Math.random() * 100; // Declare variable _bSize to randomly cause changes to happen to each of the bars, upto 100 different ways
_root.bars_mc["b" + bPick + "_mc"]._yscale = _bSize; // Select the each bar and change the yscale to the random value
var _changeAlpha = 100 - (drag_mc._y - 340); // Set a variable to change the alpha of the slider
_root.bars_mc["b" + bPick + "_mc"]._alpha = _changeAlpha + 5; // Depending on the position of the slider, set the alpha
}
}
drag_mc.onPress = function () {
drag_mc.startDrag(false,590,350,590,450); // when the drag is clicked - start dragging the slider
}
drag_mc.onRelease = drag_mc.onReleaseOutside = function () {
drag_mc.stopDrag(); // stop the slider dragging when letting go of the mouse button
}
[/expand]
[expand title=onEnterFrame function]
onEnterFrame = function () // When the user enters this frame, initiate the following script
{
...
}
In this instance, we are asking Flash to call the whole function of randomising the circles and the bars constantly, using onEnterFrame.
onEnterFrame tells us that we want to continue checking for changes constantly during the Flash animation. In this case, we want to continue checking to see if there is either a new random position created or a new random height.
[/expand]
[expand title=FOR Loop for Circles and Math.Random]
for (rPick = 1; rPick < 5; rPick++) // Set the variable rPick to get ready to choose a circle
{
var _vary = Math.random() * 50; // Declare variable _vary to randomly cause changes to happen up to 50 different ways
_root["r" + rPick + "_mc"]._xscale = _vary; // Change the width of the circle
_root["r" + rPick + "_mc"]._yscale = _vary; // Change the height of the circle
var _changeAlpha = 100 - (drag_mc._y - 340); // Set a variable to change the alpha of the slider
_root["r" + rPick + "_mc"]._alpha = _changeAlpha + 5; // Depending on the position of the slider, set the alpha
To begin with, we are telling Flash there are going to be four different circles to pick from.
Remember, (rPick = 1; rPick < 5; rPick++), is saying that the counter is starting at 1, is less than 5 and find all the others in between, i.e. starts at 1 then there’s 2, 3 and 4, BUT not 5, because we are not saying inclusive of 5 (which would be the operator <= 5 if we wanted to include 5).
We then tell Flash “Oi, we wanna start some random business!” – so we initiate a variable to constantly store a random number – in fact to choose a random number between 0 and 50.
The next line includes a familiar command, and that is _xscale and _yscale. We ask Flash to go back to the FOR loop initiated within the onEnterFrame function, and to pick one of those random circles placed on the stage.
The clever part about picking these circles is, we have given the instance name of each circle the same meaningful name of rX_mc, where X is 1, 2, 3 or 4. Flash randomly picks one of these numbers, slots it into the correct area, i.e. the “r” + rPick + “_mc” could be r1_mc or _root.r3_mc etc. With this in position we set the variable with the randomly created value to be the new _xscale and the new _yscale.[/expand]
[expand title=FOR Loop for Circles and Math.Random cont.]
// Only use half the screen to display the circles
var _xPos = Math.random() * 640; // Declare variable _xPos to move the circle randomly between 0 and 640
_root["r" + rPick + "_mc"]._x = _xPos; // Change the position of the circle using _xPos
var _yPos = Math.random() * 240; // Declare variable _yPos to move the circle randomly between 0 and 240
_root["r" + rPick + "_mc"]._y = _yPos; // Change the position of the circle using _yPos
}
We have now generated a random size for one of the four circles on the stage. Flash then moves on to positioning the circles, where a similar technique is used to obtain a random position on the screen. Each position is stored within a variable, ready to be called anytime and to equal that position when we go to place the circle on the stage.
Note how we are using * 640 (which in this case was the size of the stage in the actual Flash movie) and * 240 (which is half the stage in the Flash Movie). Therefore we are using only half the Stage of the movie to display this circle.
We add an alternative/extra function has been added to allow for interactivity – a slider bar where the alpha changes depending on the position of the slider bar.
Having created a random size for the circle and a random position for the circle, Flash goes back and performs exactly the same routine, whether it picks the same circle or a different one – it doesn’t really matter in this case, as the animation is performing extremely quickly – so what may look like only four circles on the stage, the human eye will register twice as many, if not more.[/expand]
[expand title=FOR Loop for Music Bars and Slider Bar control]
for (bPick = 0; bPick < 15; bPick++) // Set the variable bPick to get ready to choose a bar
{
var _bSize = Math.random() * 100; // Declare variable _bSize to randomly cause changes to happen to each of the bars, upto 100 different ways
_root.bars_mc["b" + bPick + "_mc"]._yscale = _bSize; // Select the each bar and change the yscale to the random value
var _changeAlpha = 100 - (drag_mc._y - 340); // Set a variable to change the alpha of the slider
_root.bars_mc["b" + bPick + "_mc"]._alpha = _changeAlpha + 5; // Depending on the position of the slider, set the alpha
}
}
drag_mc.onPress = function () {
drag_mc.startDrag(false,590,350,590,450); // when the drag is clicked - start dragging the slider
}
drag_mc.onRelease = drag_mc.onReleaseOutside = function () {
drag_mc.stopDrag(); // stop the slider dragging when letting go of the mouse button
}
It is then explained in a similar method for selecting one of the bars (again using a FOR loop). We store a random size in terms of a percentage in this case, i.e. from 0 to 100% (which is the tallest it can be according to the original creation on the stage).
Following this, again, we select one of the fourteen bars randomly on the stage and apply this variable storing the random percentage, as the new _yscale of that bar.
Flash continuously goes back to select another random bar and the procedure starts again (given that the whole routine is within an onEnterFrame function).
Finally, we declare the max and minimum dragging heights for the slider bar, using co-ordinates of the stage to decide how far up and down the slider bar can move.[/expand]