Start Flash Application
Click CTRL + N (it means New File) and select Flash File(Action Script 3.0)
At the Properties Panel, set this :
Size : 450 x 300
Frame Rate : 25fps
Then, draw a circle on the stage . Make sure that the circle is black with no stroke.
------------------------------------------------------------------------------------------------------------------------
Ok, now you have a black circle on the stage. Next is to convert the circle into symbol. Press F8 or Right Click on the circle and choose “Convert to Symbol”.
Give the circle name : “blackcircle”
Wait, do not press OK yet. Hit the Advanced button to Check these:
Export for Action Script
Export in First Frame
And then name the class as : “colorsofcircle”
Make sure the base class is as follows : flash.display.MovieClip
And then click OK.
Now, save the file as circlecolors.fla (File->Save As)
now, click Ctrl + Enter. Can you see any animation? No, because there is no code to animate your circle…
------------------------------------------------------------------------------------------------------------------------
Next is , click Ctrl + N or (File-> New) and select ActionScript File.
You will see a blank file. Here is where you put your code. Just copy and paste the code below and save the file as “colorsofcircle.as”,..
package {
import flash.display.*;
import flash.events.*;
import flash.geom.*;
public class colorsofcircle extends MovieClip {
var radians:Number;
var speed:Number;
var radius:Number;
var originalX:Number;
var originalY:Number;
static var colorArray:Array = new Array(0xFFFF33, 0xFFFFFF, 0x79DCF4, 0xFF3333, 0xFFCC33, 0x99CC33);
public function colorsofcircle() {
originalX = this.x;
originalY = this.y;
setProperties();
this.addEventListener(Event.ENTER_FRAME, flyCircleIn);
}
function setProperties()
{
speed = Math.ceil(5*Math.random());
radius = 20*Math.random();
radians = 0;
trace(speed);
this.scaleX = 0;
this.scaleY = 0;
var randomColorID:Number = Math.floor(Math.random()*colorArray.length);
var myColor:ColorTransform = this.transform.colorTransform;
myColor.color = colorArray[randomColorID];
this.transform.colorTransform = myColor;
this.alpha = 1;
}
function flyCircleIn(e:Event) {
radians += Math.abs(speed/10);
this.x += Math.round(radius*Math.cos(radians));
this.y += Math.round(radius*Math.sin(radians));
this.scaleX += Math.abs(speed/10);
this.scaleY += Math.abs(speed/10);
this.alpha -= Math.abs(speed/100);
if (this.alpha < 0)
{
resetCircle();
}
}
function resetCircle()
{
this.x = originalX;
this.y = originalY;
setProperties();
}
}
}
now go back to your circlecolors.fla and hit Ctrl + Enter .
can you see that your blackcircle now animates and changes color? If yes, then you are on the right track ! Ok now Right Click on your circle you created and press Copy . then, paste around 3 or 4 or 10 more circle on your stage but at different location as image below :
Press Ctrl + Enter . Can you see the animation created? :)
Okay.Below is the explanation of the actionscript code ...
---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Each of your circle movie clips are associated with the colorsofcircle class file, and all that code that is contained inside the colorsofcircle class file gets excecuted each time for each circle.
Digging a bit deeper into each circle, the code does a few things on the circle:
- Sets the initial size, color, and position of each circle.
- Starts an enterFrame loop to create the animation.
- Scales the circle while fading it out at the same time.
- Resets the circle's size, color, and position once the circle completely fades out.
In the next section, let's go through each line of code and see how it fits in with the approimately four things our code does.
- package {
- import flash.display.*;
- import flash.events.*;
- import flash.geom.*;
- .
- .
- .
- .
- }
The very top is generic boilerplate code containing the package declaration and any import statements that you need. In ActionScript 3, a lot of the classes that you use are stored in different libraries. The import statements help the Flash compiler know which library the classes you are using are coming from.
- public class colorsofcircle extends MovieClip {
Here, I formally declare our colorsofcircle class. Notice that this class extends the base MovieClip class. This is done because our class isn't self-containing. We are not reimplementing everything needed to have our circle movie clip visual on the artboard associated with the class file itself. Instead, we are extending the existing MovieClip class and only adding our code on the top.
- var radians:Number;
- var speed:Number;
- var radius:Number;
- var originalX:Number;
- var originalY:Number;
In these lines, I am declaring some variables that I will be using in the rest of the code. Notice that I have strongly typed these variables as something that is a Number indicating that only numerical data will be stored here.
- static var colorArray:Array = new Array(0xFFFF33, 0xFFFFFF, 0x79DCF4, 0xFF3333, 0xFFCC33, 0x99CC33);
In this line, I am storing an array of color values. FFFF33 , FFFFFF is the color code
- public function ColorfulCircle() {
-
- originalX = this.x;
- originalY = this.y;
-
- setProperties();
-
- this.addEventListener(Event.ENTER_FRAME, flyCircleIn);
- }
This block of code defines the constructor for the colorofcircle class. You can think of the constructor as an entry way to your code. Each time a colorofcircle movie clip is created, this code is called automatically once...and only once! This means that any code you want executed automatically when your circle makes an appearance needs to live here.
- originalX = this.x;
- originalY = this.y;
What I do first in the constructor is get our circle's current X and Y position and store it in the originalX and originalY variables. Next up is the code that calls our setProperties function:
- setProperties();
I will describe this function in greater detail later, but it is just a simple function call. The next line is a little bit more interesting:
- this.addEventListener(Event.ENTER_FRAME, flyCircleIn);
Here I set up the event listener that associates an event with an event handler. The event I am listening for is ENTER_FRAME, and the event handler that gets called at each frame tick is flyCircleIn. We'll look at the flyCircleIn method later.
This line wraps up the code found in our constructor. Like I mentioned earlier, the constructor is the gateway to the class. As such, it contains some pretty heavy-hitting code that calls other functions that are essential to what your class does. We'll look at some of those classes first - starting with the setProperties function.
- function setProperties()
- {
- speed = Math.ceil(5*Math.random());
- radius = 20*Math.random();
-
- radians = 0;
-
- trace(speed);
-
- this.scaleX = 0;
- this.scaleY = 0;
-
- var randomColorID:Number = Math.floor(Math.random()*colorArray.length);
-
- var myColor:ColorTransform = this.transform.colorTransform;
- myColor.color = colorArray[randomColorID];
- this.transform.colorTransform = myColor;
-
- this.alpha = 1;
- }
The setProperties function, as its name implies, sets the properties that your circle will posses. The first couple of lines simply set some properties for our circle's zoom speed, its radius, current radians value, and initial size:
- speed = Math.ceil(5*Math.random());
- radius = 20*Math.random();
-
- radians = 0;
-
- trace(speed);
-
- this.scaleX = 0;
- this.scaleY = 0;
The
speed and
radius values use Math.random() to generate a random number each time this function is called, and these values determine how quickly your circles zoom in at you and how wide the circle's arc will be.
The next series of lines are related to picking a random color:
- var randomColorID:Number = Math.floor(Math.random()*colorArray.length);
-
- var myColor:ColorTransform = this.transform.colorTransform;
- myColor.color = colorArray[randomColorID];
- this.transform.colorTransform = myColor;
The last line in setProperties is:
- this.alpha = 1;
The alpha property determines the opacity of your circle, and setting it to 1 is the same as making it fully visible.
- function flyCircleIn(e:Event) {
-
- radians += Math.abs(speed/10);
-
- this.x += Math.round(radius*Math.cos(radians));
- this.y += Math.round(radius*Math.sin(radians));
-
- this.scaleX += Math.abs(speed/10);
- this.scaleY += Math.abs(speed/10);
- this.alpha -= Math.abs(speed/100);
-
- if (this.alpha < 0)
- {
- resetCircle();
- }
- }
The flyCircleIn function is responsible for creating the movement that you see. If you recall, in the constructor, you associated the Event.ENTER_FRAME event with this flyCircleIn event handling function. This means that each time your frame ticks this function gets called.
First, we increment our radians value by taking our speed value and dividing it by 10:
- radians += Math.abs(speed/10);
The radians value, like you saw earlier when I reset its value to zero, determines where in the circular path your circle currently is in. You'll see it used in the Circular Motion code found in the next two lines:
- this.x += Math.round(radius*Math.cos(radians));
- this.y += Math.round(radius*Math.sin(radians));
The circular movement is calculated by using the Cosine and Sine functions. Notice that I am passing our
radians value as an argument to the
Math.cos and
Math.sin functions, and I am multiplying our
Cosine and
Sine functions by the radius value.
Now that we have the circular movement out of the way, let's now look at the lines of code that animate the circle's size and transparency:
- this.scaleX += Math.abs(speed/10);
- this.scaleY += Math.abs(speed/10);
- this.alpha -= Math.abs(speed/100);
These lines are very straightforward as well, and they too involve the speed variable to determine how quickly the resizing or fading out will occur.
When the circle fully fades out, we want to put an end to the animation in its current state and reset everything to a new set of properties:
- if (this.alpha < 0)
- {
- resetCircle();
- }
We accomplish that by checking when the circle becomes fully transparent and calling the resetCircle function when that happens. Speaking of which, let's look at the resetCircle function next.
- function resetCircle()
- {
- this.x = originalX;
- this.y = originalY;
-
- setProperties();
- }
The resetCircle function is called when our circles become fully invisible. There are really only two things this function does. First, it resets our circle'ss position to what it was before it began its journey. Second, it calls our setProperties function again where initial values are set (or reset) for the next round of zooming, fading out, and color changing.
The preceding sections covered a lot of code, so let's use this moment to quickly recap what our code is doing.
- Each of our circles is like an independent life form with its own instance of ColorfulCircle powering it. First, the constructor gets called where the initial values of our circle are stored in various variables and our enter frame event is associated with our event handler.
- At each tick of the frame, 24 per second if you keep the default Flash CS4 value for frame rate, your circle gradually becomes larger, moves in a circular path, and becomes a bit less visible. Once your circle becomes fully invisible, we reset the circle back to a good starting point by calling the same function you called earlier for setting the initial properties.
- Even though we are calling the same function for setting the properties, the properties that get set will probably not be the same. There is a certain level of randomness that is introduced where the speed, radius, and color variables are set with the help of a Math.random call. This is nice because it keeps your animation a bit more unique and lively as each circle gets reset to a different variant of itself.
