In my spare time, I often browse through the threads located in the "best of" forum in the kirupaForum. An interesting effect that I discovered during my random scavenger hunts was a vibration effect posted by suprabeener.

I modified the effect slightly by adding some extra features, and the following animation shows you the result of my modification:

[ the vibration effect ]

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:

1. Make sure you launch Flash MX if you have not already done so.
2. 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 ]

3. 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.
4. 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:

onClipEvent (load) {
  // movie width / height
  height = 200;
  width = 300;

  //------------------------//
  // 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;

  // setting initiation position
  cx = this._x;
  cy = this._y;
}

onClipEvent (enterFrame) {
  // causes the object to be offset
  this._x = cx + (1 + Math.random() * 5);
  this._y = cy + (1 + Math.random() * 5);
}

[ copy and paste the above code ]

5. 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.
6. 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> with the name circle:

[ give the circle the instance name circle ]

7. 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:

for (var i = 0; i < 25; i++) {
  circle.duplicateMovieClip(i, i);
}

[ copy and paste the above code ]

8. You have finished the animation. The following section will help explain why everything works.

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 of 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 appearance 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.

// setting initial position
cx = this._x;
cy = this._y;

These lines of code set the initial x and y position of the movie clip. You will see later that these variables act like an anchor that tell the vibration effect where its source is.

Now, we venture to the chaotic code of onClipEvent(enterFrame):

// causes the object to be offset
this._x = cx + (1 + Math.random() * 5);
this._y = cy + (1 + Math.random() * 5);

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 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. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇