Creating Custom Shapes with a MovieClip Prototype
When working in ActionScript 2, one of the most time‑saving tricks is to extend the MovieClip prototype with a drawing routine that can generate a wide variety of geometric figures. In this tutorial we’ll build a flexible drawShape function that lets you create circles, polygons, and even star‑shaped forms by adjusting just a handful of parameters. The routine will be used later to create two movie clips: shapeA, the rotating anchor, and shapeB, the follower that circles around it.
The prototype method receives eight arguments: radius, x, y, lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, and style. The first two define the size and initial coordinates of the shape; the next three set the outline properties; the following two handle the interior fill; and the final argument controls the overall shape style. If style is set to you get a perfect circle; any value below 90 produces a polygon with that many vertices, allowing you to quickly prototype a pentagon, hexagon, or star without writing new drawing code.
Below is the complete method. It begins at the shape’s top‑right corner, draws lines around a circle, and finishes by closing the path and applying the fill. The math inside the loop uses Math.tan to calculate the horizontal offset for each segment, which keeps the shape proportionate even when style is altered.
To keep the demo fast and readable we’ll work inside a 500 × 500 pixel stage and set the framerate to 30 frames per second. These values can be tweaked later if you need a different scale or smoother motion.
With the prototype ready, you can now create any shape on the fly by simply calling drawShape with the desired parameters. This approach eliminates the need for separate graphic assets and keeps your timeline clean, especially when you’re experimenting with dynamic layouts or generative art. Because the shape is created purely in code, you can also modify its properties at runtime - changing its color or size on the fly will instantly update the display without a reload.
One practical tip is to group all shape‑creation logic inside a with block. Although with is discouraged in modern JavaScript, in ActionScript 2 it can still save keystrokes and make the code easier to read when you’re repeatedly setting many properties on the same object. For example:
By placing the drawing call inside the Now that you have a versatile drawing function, you’re ready to create the two primary movie clips that will demonstrate circular motion. In the next section we’ll set up the animation loop for shapeA and shapeB, and we’ll walk through the trigonometry that keeps shapeB orbiting smoothly around its rotating anchor. After establishing the First, we declare a few global variables to keep track of the angles and stage center. Next, we create shapeA as an empty movie clip at depth 1 and use the with block, the code becomes a concise description of the shape’s appearance and position, rather than a list of property assignments. This pattern will appear again when we create shapeB
Implementing Circular Motion Between Two MovieClips
drawShape prototype, we can generate two distinct movie clips that interact: shapeA acts as the moving anchor, while shapeB orbits around it. The trick is to update each clip on every frame, adjusting both rotation and position based on simple sinusoidal and trigonometric formulas.stageCenter represents the pixel coordinates of the stage’s midpoint (250 on a 500‑pixel canvas). angleX and angleY feed the sine functions that give shapeA a gentle wave‑like motion, while degree drives the circular path of shapeB
drawShape method to give it a bright, easily visible appearance. In the onEnterFrame handler, we increment the rotation by 17 degrees per frame, creating a spinning effect. Simultaneously, we update the _x and _y properties using sine waves with different speeds (0.1 and 0.05). This combination of rotation and oscillation makes shapeA feel dynamic and unpredictable, which in turn keeps shapeB’s orbit interesting.
With the anchor in place, we turn to shapeB. This clip is created at depth 2 to sit on top of shapeA. Its appearance is similar but slightly smaller, ensuring it remains visible while orbiting. In its Using onEnterFrame handler, we spin it in the opposite direction by decrementing the rotation by 24 degrees each frame. The core of the motion logic lies in the conversion from degrees to radians - ActionScript uses radians for trigonometric functions, while it’s easier to think in degrees. We multiply the degree counter by Math.PI/180 to obtain radian
Math.cos and Math.sin, we calculate the horizontal and vertical offsets from shapeA’s current position. By multiplying the cosine result by 150 (the desired orbit radius) and adding it to shapeA’s _x, we position shapeB around the anchor. The same logic applies to the vertical coordinate, but with a negative sign to account for the coordinate system’s direction. The degree variable increments by 9 each frame, resulting in a smooth circular path.
When you run the project, shapeA rotates while drifting in a soft sine wave across the stage, and shapeB traces a clean circle around it, always staying at the same radius. By adjusting the rotation increments, orbit radius, or sine speeds you can create a whole family of animations - spirals, elliptical paths, or even synchronized beats for a music visualizer.
Because everything is coded, you can experiment with different parameters on the fly. For instance, change the line width or fill color of shapeA to match the background, or swap the orbit radius for shapeB to produce a nested animation where several shapes circle each other. The drawShape method keeps the code tidy and lets you focus on the dynamics rather than on drawing each frame.
Beyond the visual appeal, this example demonstrates a fundamental animation pattern: separating the anchor’s motion from the follower’s orbit and using trigonometric functions to keep the relationship precise. That same logic underlies many game mechanics, such as an enemy following a player or a planet orbiting a star. By mastering this pattern in ActionScript, you’ll find it easier to translate the concepts to other environments - whether you’re working in Flash, Unity, or a web canvas.
Feel free to tweak the variables, experiment with different shapes, and observe how the motion changes. If you run into trouble or have ideas you’d like to explore, you can reach out via the email address provided in the original tutorial. Happy coding!
No comments yet. Be the first to comment!