FlashingTheNet.com .:|:. Orbiting With Actionscipt Tutorial

.:|:. home .:|:. resources .:|:. links .:|:. contact .:|:.

Orbiting With Actionscript Math
This method has named clips on layers and the code is centralized in a "code" layer. The individual variables for each planet are stored in arrays that are easy to change. See below for duplicating a single movie clip instead. All code uses relative references so wherever the planets are located will be the center of their orbits. Start a new project, make the background black and the fps 30. The example above is 700 x 225 pixels. Create a circle on the main stage then convert it to a movieclip named "orbitAni" or whatever. This will hold the animation. Double-click the clip to edit it, then convert it once more. Name it "sun". Create a layer at the top for the code and one for each of the other planets. Create as a movieclip, then name each planet in the "Properties" window. Keep each on a separate layer. Click the code layer's frame and paste the code found below into the "Actions" window. You should see an "a" in the frame. How it works: Flash doesn't really do anything before the "orbit.apply" line at the bottom besides load variables. The code then applies the "orbit" function to each planet as it loops through the "for" loop. This function contains two other functions, one for initializing the clips and another with instructions on what to do every frame. The clips name and orbiting properties are taken from the arrays and passed to the "orbit" function. Note that to pass variables using ".apply" they must be in array brackets except for the name of the clip, at least in MX. These variables are listed after the clips name you are applying the function to. This code is only excecuted once. But each clip is given instructions for what to do each frame by the "onEnterFrame" line found in the "orbit" function. As the "orbit" function is applied to each clip the first instruction is "this.init();" which applys the "this.init" function to it. It sets the clips starting position, variables, and gives it a color object we can use to shade it. This function is only called once. Note that the function must appear before the line "this.init();" that calls it. The next line to execute is "this.onEnterFrame = function()". Unlike the non-keyword "init" function, it is applied automatically. The instructions found in the function are executed at the movies frame rate even though this animation clip is only 1 frame long. That's about it. Now you have all the code in a central location. Feel free to shorten the variable names, this can add performance to the movie especially when many actions are taking place.
Code: function orbit(speed, radius, degrees, view) { this.init = function() { // the orbital center will be wherever the clip is located startX=this._x; startY=this._y; // perspective, range about 1.02 (larger when near) to about 4, for the z axis perspFactor=3; scaler=perspFactorradius; // how much to change brighter/darker when near/far, range is // 0 (no change) to about 1 (almost white/black), use positive // numbers to make brighter when closer planetBrightness=-.15; // give the clip a color object so we can tint it this.tint = new Color(this); // getTransform() allows us to add a tint to a clip this.thisColor = this.tint.getTransform(); } this.init(); this.onEnterFrame = function() { // degrees to radians so we can use trig to determine // where on a circular path the clip's x and y should be angle=degreesMath.PI/180; // add our speed variable for the next loop degrees+=speed; if(degrees>=360){degrees-=360;} if(degrees<=-360){degrees+=360;} // use trig to determin x and y position as well as // simulate a depth for tint and scale xPos=radiusMath.cos(angle); // determine "y" then squash with orbitAngle to simulate a perspective view yPos=radiusMath.sin(angle)view; // this determines near/far based on the clips y position zPos=radiusMath.sin(angle); // creates a factor to scale the clip by based on its computed depth "z" distance=1/(1-(zPos/scaler)); // place clip in new "x" and "y" positions this._x=xPos+startX; this._y=yPos+startY; // scale the clip this._xscale=this._yscale=distance100; // create a tint based on z position and the planetBrightness variable then apply it this.thisColor.rb=(this.thisColor.gb=this.thisColor.bb=(zPosplanetBrightness)); this.tint.setTransform(this.thisColor); // add a bit if the view is zero if(view==0){view=.001;} // determine which clip should be in front of which other planetDepth=zPos50+1; this.swapDepths(planetDepth); } } // create an array of clip names to match the clips we named on the stage planetClip=[sun,mars,venus,earth,mercury]; // speed of orbit, how many degrees to travel per frame planetSpeed=[0,9,6,2,1]; // gives radii of the orbits planetRadius=[0,140,230,330,430]; // starting angle of clip, 0 puts clip at far right planetStartDegrees=[0,0,0,0,0]; // view of orbit, range 1 (top view, perfect circle) to // -1 (bottom view), 0 is flat planetView=[0,-.15,-.15,-.15,-.15]; // use -1 to reverse the rotation rotation=1; // apply the "orbit" function to each of the clips, sending their corresponding variables with them // note the clips name is followed by the bracketed array variables when using "apply" // you can also just use the clips name if there are no variables you need to pass // if all the clips will use one particular setting you can use a constant instead: // planetStartDegrees[0] instead of planetStartDegrees[i] // this way there's no need to change all the array elements for(i=0; i<planetClip.length; i++) { // loop through the speed array and change to negative numbers if reverse rotation planetSpeed[i]=planetSpeed[i]rotation; orbit.apply(planetClip[i], [ planetSpeed[i], planetRadius[i], planetStartDegrees[i], planetView[i] ]); }
Orbiting A Duplicated Clip
This method is used when all the clips will be the same. Replace all the code found below the "orbit" function with that found below. It duplicates a clip named "ball" found on the stage eliminating the need to have a bunch of separate clips on the stage. You can either use the defined arrays or create them using simple math as shown below. The two "for" loops can be combined into one. Click Here for a popup.
Code: clipNumber=8; rotation=1; planetSpeed = new Array(); planetRadius = new Array(); planetStartDegrees = new Array(); planetView = new Array(); for(x=0; x<clipNumber; x++) { planetSpeed[x]=6rotation; planetRadius[x]=x30+36; planetStartDegrees[x]=x30; planetView[x]=x.05; } for(i=0; i<clipNumber; i++) { ball.duplicateMovieClip("ball"+i, i); orbit.apply(this["ball"+i], [ planetSpeed[i], planetRadius[i], planetStartDegrees[i], planetView[i] ]); } ball.swapDepths(-.1); ball._visible=1;