Thursday, September 19, 2024

Circular Movement

Hey scripters Here’s Deamothul – the script keeper again with this time a little tutorial about a shape that follows another shape, while spinning around it. I hope u all find it usefull. I explained the prototype for making the shapes a little more at http://www.actionscripts.co.uk/tutorials.asp, see the tutorial “actionscript based shapes that move”. U can cut and paste all relative content to flash and it will work.

By the way, i used a framerate of 30 and a dimension of 500X500.

Step 1: The MovieClip.prototype.drawShape(), this makes the shapes we’ll use.

/* This first part of the script is a MovieClip.prototype i use it very very very often. It can make a normal circle, but it can make a whole lot of different shapes too, You only have to edit one variable to accomplish this. –> style is the variable to edit. This comes in very useful when you quickly want to drop a shape on stage, that exists completely of actionscript, and then quickly release your ASmagic on it. Set style to 22.5 and you have a perfect circle but set it to other values (stay under 90) and you get cool different shapes.*/

// Here i will give a short description of the variables used in the prototype.
// radius = Sets how big the shape will be.
// x = The startX position, good to keep it at 0,then set the _x of the MC yourSelf.
// y = The startY position, good to keep it at 0,then set the _y of the MC yourSelf.
// lW = This is the line width of the shape that will be created.
// lC = This is the line color of the shape that will be created.
// lA = This is the line alpha of the shape that will be created.
// fC = This is the fill color of the shape that will be created.
// fA = This is the fill alpha of the shape that will be created.
// style = Sets the look of the shape, 22.5 is a perfect circle.(keep the value below 90)

MovieClip.prototype.drawShape= function(radius,x,y,lW,lC,lA,fC,fA,style)
{
&nbsp&nbsp&nbsp &nbsp this.moveTo(x+radius,y);
&nbsp &nbsp &nbsp &nbsp this.lineStyle(lW,lC,lA);
&nbsp &nbsp &nbsp &nbsp this.beginFill(fC,fA);
&nbsp &nbsp &nbsp &nbsp a = Math.tan(style * Math.PI/180);
&nbsp &nbsp &nbsp &nbsp for (var angle=45;angle

Step 2: Making ShapeA, the rotation center point for shapeB

/* Now lets firstly make shapeA, this will be the shape around which shapeB will move.*/

// We set degrees to zero.
degree = 0;
// This sets the center point of my stage.
stageCenter = 250;
// Makes an emptyClip "shapeA" at depth 1.
shapeA= this.createEmptyMovieClip("shapeA",1);
// Put all the properties of shapeA in a "with", this is tidy, and saves us typing
with(shapeA){
// Call the drawShape function to make the shape.
drawShape(80,0,0,6,0xff0000,100,0x0000ff,50,54)
// Stage the clip at XstageCenter.
_x = stageCenter;
// Stage the clip at YstageCenter.
_y = stageCenter;
}

// This triggers the shapeA frame actions, executed each frame.
shapeA.onEnterFrame=function(){
// This make the shape rotate.
this._rotation += 17;
// This makes the shape follow a SineWave, speed = 0.1, Xrange = 200, center = stageCenter.
this._x = Math .sin(angleX += 0.1)* 200 + stageCenter;
//this makes the shape follow a SineWave,speed = 0.05, Yrange = 200, center = stageCenter.
this._y = Math .sin(angleY += 0.05) * 200 + stageCenter;

Step 3: Making ShapeB, shape that moves around shapeA

/*Now we will make shapeB, we make it by calling our prototype drawShape and give It the values needed. Then we'll kickoff rotation and we'll set a radian variable tu use when calculating.*/

// Now we'll make the shape that will move in a circular motion around shapeA.
shapeB= this.createEmptyMovieClip( "shapeB",2);
// Again a "with" is set here to make things a bit more efficint.
with(shapeB){
// Here we call the function to make us shapeB.
drawShape(40,0,0,8,0xff0000,100,0x0000ff,40,60)
}
// This triggers the shapeB frame actions, executed each frame.
shapeB.onEnterFrame=function(){
// This sets a negative rotation
this._rotation += -24;
// Increase degrees,high value make the shapeB circle faster round it's rotationPoint(x/ycenter)
degree=degree+9;
// Set the degree2radian conversion of the angle in a variable for using in the formulas.
// Flash works with radians, humans best with degrees, so conversion is needed.
radian=degree*( Math. PI/180);
// Now we use the cosine formula to find out the distance on x-axis.
x= Math. cos (radian) * 150;
// Now using the sine formula we find out the distance on y-axis.
y= Math. sin (radian) * 150;
// Now we take the center(xcenter,ycenter) of the shape minus the distance.
// thus we get the coordinate of the shape.
this. _x = shapeA. _x + x;
this. _y = shapeA. _y - y;

Well, this was my tutorial on circular movement. Hopefully you now have an idea of how to make an object circle from a certain point of origin.(here it was shapeA). Lets hope it was useful to some of you outThere. If ya liked the tut or have questions about it, you can alwayz mail me at i_love_actionscript@hotmail.com.

My name is Erwin Schiphouwer a.k.a deamothul, im 25 and live in Groningen in
the Netherlands.
Im totally hooked on actionscript and especially in combination with php and
mysql.
I taught what i know by myself and still learn new things every day.
I hope to spread some love for scripting and make it a bit more easy for
people just starting out.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles

What is third party intent data ?.