Theme Heven » Flash AS

How to Create a MovieClip Rotating around the Center Continiously

themeheven — Wed, 26 Aug 2009 09:30:37 +0000

This article explain you how to create an object which rotate around the center continiously. In this tutorial you will learn more about the center and math, sine/cos/degrees/radians. Here I am going to explain you with the action script:

First Create an object of any shape which you want to rotate around the circle. And give a instance name for the object. In this example I have used a circle shape having circ instance name & I will describe you using the same instance name in this tutorial.

Here I want to start right now. First I will divide the stage from X & Y by 2 show that I can find the center position of the stage.

circ.centerX = Stage.width / 2;

circ.centerY = Stage.height / 2;

Now set the starting point on the circle, in degrees.

circ.angle = 0;

Define the radius of the circle.

circ.radius = 100;

Here I declare the amount of change in the angle (You know angle change will be in degree) for each iteration of the animation. Here I have used 20 degree for angle change. This will effect the rotation speed. If you need to increase speed you should increase angleChange and decrease for low speed.

circ.angleChange = 10;

Now write a function to convert degrees to radians. This function accepts degrees and returns radians.

function degreetoradian(degree) {

return degree * (Math.PI / 180);

}

Ok We got the radians.

Now I start AS to rotate the circle.

function animateCircle() {

Here I store the radian conversion of the degree

var radian = degreetoradian(this.angle);

Now set the x and y cordinate for this movieClip, based on the clip-specific. And variables storing the circle center and radius, determining x and y coordinates using cosine and sine, respectively.

this._x = this.centerX + this.radius * Math.cos(radian);

this._y = this.centerY + this.radius * Math.sin(radian);

Here I add the angle change to the master angle for this clip with each iteration, so we know how to determine the next x,y point.

this.angle += this.angleChange;

And now modulus to determine the correct angle for any angle which is greater than 360-degrees.

this.angle+= 3;

}

You can give required value for angle change.

And in the final assign a funcion to be called on every EnterFrame event for this clip to play movie continiously.

circ.onEnterFrame = animateCircle;

The Action Script Code:

//Define the stage for orbit and finding the center.

  circ.centerX = Stage.width / 2;

  circ.centerY = Stage.height / 2;

  //Define the starting anlge point on the circle, in degrees.

  circ.angle = 0;

  //Set the radius of the circle

  circ.radius = 110;

  //Set the angle change amount value.

  circ.angleChange = 10;

  //function to convert degrees to radians

  function degreetoradian(degree) {

return degree * (Math.PI / 180);

}

//Create function to animate circle

function animateCircle() {

//use a local variable to store the radian conversion of the degree

// value more familiar to most of us. See notes on Flash angles.

var radian = degreetoradian(this.angle);

//set the x and y cordinate for this slip, based on the clip-specific

// variables storing the circle center and radius. See notes for

// determining x and y coordinates using cosine and sine, respectively.

this._x = this.centerX + this.radius * Math.cos(radian);

this._y = this.centerY + this.radius * Math.sin(radian);

//add the angle change to the master angle for this clip with each 

// iteration, so we know how to determine the next x,y point.

this.angle += this.angleChange;

//use modulus to determine the correct angle for any angle greater

// than 360-degrees. See notes for an explanation of modulus.

this.angle+= 3;

}

//Now animate circle on onEnterFrame

circ.onEnterFrame = animateCircle

Download Zip

Flash Duplicate Movie Clip

themeheven — Fri, 07 Aug 2009 08:53:21 +0000

In this Tutorial I will show you how you can duplicate your instances of a movie clip using a simple action script.

1. Create a movie clip of your choice. (If you want to show animation use motion gudie path for Motion Twin).

2. Place movie clip in the stage and give a instance name here I use soccer_1

3. Create button for your movie clip duplication process.

4. Write Duplicate Code like below in your Actions Panel on your button’s release action:

on (release) {
_root.Soccer_1.duplicateMovieClip (”Soccer_”+”x”, x );
x++;
}

5. Play your movie for test.

Drawing Shape Using Action Script

themeheven — Tue, 28 Jul 2009 13:07:11 +0000

1. Draw Animating Circle

var cnt:Number = -90; // from which degree
  var radius:Number = 100;
  this.createEmptyMovieClip("circle",this.getNextHighestDepth());
  circle._x = 200;
  circle._y = 200;
  circle.lineStyle(1,0xFF0000,100);
  xx = 100*Math.cos(-90*Math.PI/180);
  yy = 100*Math.sin(-90*Math.PI/180);
  circle.moveTo(xx,yy);
intervalId = setInterval(this, "executeCallback", 5);

// function to darw a circele.
  function executeCallback() {
  xx = 100*Math.cos(cnt*Math.PI/180);
  yy = 100*Math.sin(cnt*Math.PI/180);
  circle.lineTo(xx,yy);
  cnt++;
  if (cnt>=270) {
  fillcolor();
  circle.endFill();
  clearInterval(intervalId);
  }
  }

// To fill the color to circle
  function fillcolor() {
  circle.beginFill(0x00ff00,50);
  for (var i = -90; i<=270; i++) {
  xx = 100*Math.cos(i*Math.PI/180);
  yy = 100*Math.sin(i*Math.PI/180);
  circle.lineTo(xx,yy);
  }
  }

2. Drawing Rectangle and Square

this.createEmptyMovieClip("rectangle_mc", 1);
  with(rectangle_mc){
  lineStyle(6, 0x003399, 100);
  moveTo(0, 0);
  lineTo(200, 0);
  lineTo(200, 200);
  lineTo(0, 200);
  lineTo(0, 0);
  _x=80;
  _y=80;
}

3. Draw Arc


//
function drawArc(centerX, centerY, radius, startAngle, arcAngle, steps){
//
// Rotate the point of 0 rotation 1/4 turn counter-clockwise.
startAngle -= .25;
//
var twoPI = 2 * Math.PI;
var angleStep = arcAngle/steps;
var xx = centerX + Math.cos(startAngle * twoPI) * radius;
var yy = centerY + Math.sin(startAngle * twoPI) * radius;
moveTo(xx, yy);
for(var i=1; i<=steps; i++){
var angle = startAngle + i * angleStep;
xx = centerX + Math.cos(angle * twoPI) * radius;
yy = centerY + Math.sin(angle * twoPI) * radius;
lineTo(xx, yy);
}
}
lineStyle(0, 0xFF0000);
drawArc(250, 250, 200, 45/360, -90/360, 20);
//

4. Draw Triangle

_root.lineStyle(3, 0x0000FF, 100); _root.moveTo(50, 200);
  _root.lineTo(150, 50);
  _root.lineTo(250, 200);
_root.lineTo(50, 200);

5. Draw Pentagon

createEmptyMovieClip("pentagon_mc", 1);
  pentagon_mc.beginFill(0x999999, 85);
  pentagon_mc.moveTo(0, 0);
  pentagon_mc.lineTo(0, -60);
  pentagon_mc.lineTo(-60, 0);
  pentagon_mc.lineTo(-60, 60);
  pentagon_mc.lineTo(60, 60);
  pentagon_mc.lineTo(60, 0);
  pentagon_mc.lineTo(0, -60);
pentagon_mc.endFill();

6. Draw Dimond

createEmptyMovieClip("diamond_mc", 1);
  diamond_mc.beginFill(0x000000, 100);
  diamond_mc._x=300;
  diamond_mc._y=100;
  diamond_mc.lineTo(0, -90);
  diamond_mc.lineTo(-90, 0);
  diamond_mc.lineTo(0, 90);
  diamond_mc.lineTo(90, 0);
  diamond_mc.lineTo(0, -90);
diamond_mc.endFill();

7. Draw Oval Shape

// Change "radius" to "xRadius" and add "yRadius" argument.
  function drawOval(centerX, centerY, xRadius, yRadius, sides){
//
// Change "radius" to "xRadius".
this.moveTo(centerX + xRadius, centerY);
//
for(var i=0; i<=sides; i++){
var pointRatio = i/sides;
var radians = pointRatio * 2 * Math.PI;
var xSteps = Math.cos(radians);
var ySteps = Math.sin(radians);
//
// Change "radius" to "xRadius".
var pointX = centerX + xSteps * xRadius;
//
// Change "radius" to "yRadius".
var pointY = centerY + ySteps * yRadius;
//
this.lineTo(pointX, pointY);
}
}
//
lineStyle(0);
//
// X, Y, W, H, steps.
drawOval(250, 200, 200, 150, 100);
//

Drawing a Circle Using Action Script Code

themeheven — Tue, 28 Jul 2009 12:01:16 +0000

Create Empty Movie Clip mycirlce

this.createEmptyMovieClip(”mycircle”, 3);

Set the Stage Position for x coordinate and y coordinate
You can change the movie position as your required

mycircle._x = 200;

mycircle._y = 200;

Create Circle code here

mycircle.createEmptyMovieClip(”circle”, 1);

mycircle.circle.lineStyle(5, 0×003399, 300);

mycircle.circle.moveTo(200, 0);

Define Radius of your circle

circleRadius = 200;

for (a=0; a<360; a++) {

radAngle = a*Math.PI/180;

xCoord = Math.cos(radAngle)*circleRadius;

yCoord = Math.sin(radAngle)*circleRadius;

Move Line to x, y coordinate show that circle will be print

mycircle.circle.lineTo(xCoord, yCoord);

}

Copy and Paste Action Script

this.createEmptyMovieClip(”mycircle”, 3);

mycircle._x = 200;

mycircle._y = 200;

mycircle.createEmptyMovieClip(”circle”, 1);

mycircle.circle.lineStyle(5, 0×003399, 300);

mycircle.circle.moveTo(200, 0);

circleRadius = 200;

for (a=0; a<360; a++) {

radAngle = a*Math.PI/180;

xCoord = Math.cos(radAngle)*circleRadius;

yCoord = Math.sin(radAngle)*circleRadius;

mycircle.circle.lineTo(xCoord, yCoord);

}

A simple circle code:

MovieClip.prototype.DrawCircle = function (x,y,r) {

var c1=r*(Math.SQRT2-1);

var c2=r*Math.SQRT2/2;

this.moveTo(x+r,y);

this.curveTo(x+r,y+c1,x+c2,y+c2);

this.curveTo(x+c1,y+r,x,y+r);

this.curveTo(x-c1,y+r,x-c2,y+c2);

this.curveTo(x-r,y+c1,x-r,y);

this.curveTo(x-r,y-c1,x-c2,y-c2);

this.curveTo(x-c1,y-r,x,y-r);

this.curveTo(x+c1,y-r,x+c2,y-c2);

this.curveTo(x+r,y-c1,x+r,y);

};

_root.createEmptyMovieClip(”circle”, 1);

_root.circle.lineStyle(5,0×000000);

_root.circle.DrawCircle(150, 150, 200);

Again Another Method

function magicTrigFunctionX (pointRatio){

return Math.cos(pointRatio*2*Math.PI);

}

function magicTrigFunctionY (pointRatio){

return Math.sin(pointRatio*2*Math.PI);

}

function drawCircle(centerX, centerY, radius, sides){

// Move the pen to the first point on the circle.

this.moveTo(centerX + radius, centerY);

for(var i=0; i<=sides; i++){

var pointRatio = i/sides;

var xSteps = magicTrigFunctionX(pointRatio);

var ySteps = magicTrigFunctionY(pointRatio);

var pointX = centerX + xSteps * radius;

var pointY = centerY + ySteps * radius;

this.lineTo(pointX, pointY);

}

lineStyle(0);

drawCircle(250, 250, 200, 100);

Flash CS3 Tutorial – Arrays

themeheven — Fri, 24 Jul 2009 02:43:28 +0000

An array is basically a container for holding data, similar to the way a variable hold data. The difference is that an array can hold multiple pieces of data. The location of each piece of data is referred to as its index and will always fall in a specific sequence. These indexes are numbers sequentially and begin at zero. Since Flash numbers each piece of data within the array it is easy for the programmer to access a specific piece of data at any given time. In ActionScript you are not forced to contain one type of data in an array. This means that an array may contain a number in index 0, a name in index 1, and a movie clip in index 2. Creating an array is rather simple an only requires two steps. The first is to declare the array, second is to populate the array with data.

Flash Array

Animation with Arrays

To Create an array select the first key frame on the actions layer in the time line. Copy the sample code. This code is pretty straight forward. You are creating a variable called colorsArray, data typing it as an array and setting it equal to a new array and that is it for creating the array. To add data to the array copy and past the code from the next example. With this code your are simply calling the name of the array, then in between the braces you are telling flash what index of the array to use. Lastly you are telling flash to put something in the specified index.


var colorsArray:Array = new Array();
var colorsArray:Array = new Array();

A loop will be used to access the data contained within the array, but first create another array by coping the example code. This is the section that makes this an advanced Flash CS3 Tutorial. The first line is the Array that this Flash CS3 Tutorial is all about. Next, is the for loop that you should already understand. Inside the loop is where the fun begins. The for loop is actually creating circles with a color from the first array and adding them to the cirArray so they can be used later. First, a variable num is created and set to be a random number between 0 an 4, (see math tutorials) if you need a better understanding. Next, the code is creating a new Sprite (object) and the next three lines are using graphics properties to create a circle (see controlling graphics tutorial) inside the Sprite or cir variable.


var cirArray:Array = new Array();
for (var i:int = 0; i < 15; i++){
var num = Math.floor(Math.random() * 5)
var cir:Sprite = new Sprite();
cir.graphics.lineStyle(1);
cir.graphics.beginFill(colorsArray[num]);
cir.graphics.drawCircle(0,0,30);
cir.x = Math.random() * 500
cir.y = Math.random() * 300
cir.alpha =.5
addChildAt(cir, i)

cir.name="cir"+i 

  cirArray[i] = this.getChildByName("cir"+i) 

  };

If you look at the line cir.graphics.beginFill(colorsArray[num]) you will see a reference to the array you first created holding the color values. This line of ActionScript is simply using the random number (num) to decide which index of the array to pull the color information from. You should understand the two lines that are setting the cir.x and cir.y to a random location, then the cir’s alpha is set to .5 making it semi transparent, and finally the circle is added to the stage with the addChildAt. The last two lines of this code are particularly important to the array. cir.name=”cir”+i names the current instance of cir as cir + i and the last line is a method of the DisplayObjectContiner class that returns the object with the specified name, thus placing the newly created and named instance of the cir inside a separate index of the cirArray. Sounds a little complicated but basically it is the same as manually adding an object to each index of the array as you did in the first array.


start_btn.addEventListener(MouseEvent.CLICK, startMotion);
function startMotion(event:MouseEvent):void{
stage.addEventListener(Event.ENTER_FRAME, motion);
stop_btn.visible = true
start_btn.visible = false
};

stop_btn.addEventListener(MouseEvent.CLICK, stopMotion); 

  function stopMotion(event:MouseEvent):void{ 

  stage.removeEventListener(Event.ENTER_FRAME, motion); 

  stop_btn.visible = false

start_btn.visible = true 

  };

At this point in the Flash CS3 Tutorial ActionScript has created two arrays and added data to each of them, now to interact with the data. Copy the example code to the actions panel below the arrays. In the source file you should have noticed two buttons, stop and start. This section of code is simple the event listeners to make the buttons work.

function motion(event:Event):void{
for (var i:int = 0; i < 15; i++){
if (cirArray[i].x > 520){
cirArray[i].x = -20
cirArray[i].y = Math.random()* 300
} else
cirArray[i].x +=15
}
};

Once again add the example code to the actions panel. The first line of code is a simple function that is being called by the start button. Next, is the for loop that moves through the array. You could change the number 15 to be the length of the array by replacing it with cirArray.lenght and it would automatically detect the length of the array. Next, is an if statement checks to see if the object contained with the specific index of the array is on the stage. If the object is on the stage it moves the object 15 pixels and if it is not on the stage is moves it to the other side of the stage and randomly changes the y position. This simple if statement is what makes the 15 simple circles seem to be an endless amount.

Press Control-Enter and test the movie, if all goes well you have a Flash CS3 Animation created with ActionScript Arrays

Download Flash CS3 Tutorial, Source Files

Adobe Flash CS4 Tutorials, The Information You Need is designed around the idea that knowledge helps everyone. If an individual so desires he/she should not need to spend $100k on a college education. The knowledge needs to be available to that said individual. Adobe Flash CS4 Tutorials, The Information You Need is an attempt to bring some knowledge to the masses.

Article Source: http://EzineArticles.com/?expert=Gordon_French

Flash CS3 Tutorial – Arrays

themeheven — Sun, 12 Jul 2009 07:33:21 +0000

Flash Array

Animation with Arrays


var colorsArray:Array = new Array();
var colorsArray:Array = new Array();


var cirArray:Array = new Array();
for (var i:int = 0; i < 15; i++){
var num = Math.floor(Math.random() * 5)
var cir:Sprite = new Sprite();
cir.graphics.lineStyle(1);
cir.graphics.beginFill(colorsArray[num]);
cir.graphics.drawCircle(0,0,30);
cir.x = Math.random() * 500
cir.y = Math.random() * 300
cir.alpha =.5
addChildAt(cir, i)

cir.name="cir"+i 

  cirArray[i] = this.getChildByName("cir"+i) 

  };


start_btn.addEventListener(MouseEvent.CLICK, startMotion);
function startMotion(event:MouseEvent):void{
stage.addEventListener(Event.ENTER_FRAME, motion);
stop_btn.visible = true
start_btn.visible = false
};

stop_btn.addEventListener(MouseEvent.CLICK, stopMotion); 

  function stopMotion(event:MouseEvent):void{ 

  stage.removeEventListener(Event.ENTER_FRAME, motion); 

  stop_btn.visible = false

start_btn.visible = true 

  };

function motion(event:Event):void{
for (var i:int = 0; i < 15; i++){
if (cirArray[i].x > 520){
cirArray[i].x = -20
cirArray[i].y = Math.random()* 300
} else
cirArray[i].x +=15
}
};

Press Control-Enter and test the movie, if all goes well you have a Flash CS3 Animation created with ActionScript Arrays

Download Flash CS3 Tutorial, Source Files

Article Source: http://EzineArticles.com/?expert=Gordon_French

Theme Heven » Flash AS

How to Create a MovieClip Rotating around the Center Continiously

Most Commented Posts

Flash Duplicate Movie Clip

See Also Following Topics:

Drawing Shape Using Action Script

See Also Following Topics:

Drawing a Circle Using Action Script Code

See Also Following Topics:

Flash CS3 Tutorial – Arrays

See Also Following Topics:

Flash CS3 Tutorial – Arrays

See Also Following Topics: