Here's How:
This tutorial, as you may presume, will help you to create the vibration
effect above. I will also take care to explain the code behind this effect
so that you can hopefully create a cooler animation on your own:
- Make sure you
launch Flash MX if you have not already done so.
- Draw a small
circle in your drawing area. The circle doesn't have to be anything fancy
at this point in time. Here is how my circle looks for this tutorial:
[ draw a small circle ]
- Once
the circle has been drawn, it is time to make it useful by converting it
to a movie clip. Select the circle and press F8 (Modify | Convert to
Symbol). The Convert to Symbol dialog box will appear. Select the Movie
Clip behavior option and press OK.
- Your circle is
now a movie clip. Let's add some actions to our newly created movie
clip. Right click on the circle and select Actions. Copy and paste the
following code:
[ copy and paste the
above code ]
-
Press Ctrl + Enter, and you should be able to see your circle
vibrating. If you are interested in learning how to duplicate the
circles around your movie, read on. If not, feel free to go to the
next section titled "The Code Explained" to learn why the circle
vibrated.
- Duplicating
the movie clip isn't overly complicated. First, we need to give our
circle an instance name. Select your circle, and in the Properties
panel replace < Instance Name > replace that with the name circle:
[ give the circle the instance name
circle ]
-
After having given your circle the instance name 'circle', right
click on a frame on your timeline and select Actions. Copy and paste
the following code:
[ copy and paste the
above code ]
-
You have finished the animation. The following section will help
The Code Explained
As mentioned earlier, the following few sections
will help you to better understand why the code causes the circle to
vibrate, change shape, change location, and change transparency.
Let's start with the major lines code
in the onClipEvent(load):
//movie
width/height
height = 200;
width = 300;
The above variables represent the height and
width of your movie. If your movie's width and height are not 300 pixels
wide by 200 pixels tall, you must change the values to represent your
movie's dimensions.
//------------------------//
//makes everything random //
//------------------------//
this._x
= Math.round(Math.random()*width);
this._y
= Math.round(Math.random()*height);
var temp = this._alpha=Math.random()*100;
this._xscale
= this._yscale=temp;
The first two lines place your circle
movie clip in a random location on your movie. Notice the
appeareance of the width and height variables in the first and
second lines. Those variables help to keep the randomness of the
Math.random() confined to the dimensions of your movie.
In the third line, I declare a
variable called temp, and I initialize the temp variable to the
value of this._alpha
which equals a random number up to 100. Instead of spanning this
line over several lines, I found a common value (the variable
temp) and combined everything into one line. Nothing too
complicated I hope!
In the
fourth line, I set the scale of the circle equal to the value of
the variable temp declared in the previous line. Since Flash MX
does not have (as far as I know) a _scale property, I have to use
both the horizontal and vertical scale properties:
_xscale
and _yscale.
Both of those properties are set to the same value of temp so you
don't have a skewed circle with a different horizontal/vertical
stretch.
The two lines are largely responsible for
creating the vibration effect. The current position of the movie clip is set
to its initial position as determined by cx and cy in the load event. With
the initial position solidly anchored, the x and y positions are offset by
the value of whatever the output of
1+Math.random()*5
is.
The movie duplication is fairly
simple, and instead of me explaining you how that worked, I'll refer you to
the following tutorial instead:
http://www.kirupa.com/developer/actionscript/duplicate.htm
I hope
this tutorial helped. For your own convenience, I have provided the FLA of
this tutorial's example animation seen towards the top.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
Vibration
Effect
