Quick Tip: Easy Shape Creation with UniqueShape
Tutorial Details
- Difficulty: Beginner
- Program: Flash
- Estimated Completion Time: 10 mins
- Libraries Used: UniqueShape
In this Quick Tip, I’ll introduce you to a library called UniqueShape that will help you create common shapes using ActionScript 3.
Final Result Preview
Let’s take a look at the final result we will be working towards:
Each of these vector shapes was created with a simple snippet of ActionScript, like so:
var cross:Shape = new SingleShape(new Cross());
Step 1: Brief Overview
Using a third-party class called UniqueShape, we will create different kinds of common shapes. You can download the source of the class from the developer’s site.
Step 2: Set Up Your Flash File
Launch Flash and create a new Flash Document; set the stage size to 470x300px and the frame rate to 24fps.

Step 3: ActionScript
The shapes are created using ActionScript.
Create a new ActionScript Class (Cmd+N), save the file as Main.as and write the following lines, please read the comments in the code to fully understand the class behavior.
package
{
import flash.display.Sprite;
/* Import the Shapes Source Classes */
import whirlpower.uniqueshape.SingleShape;
import whirlpower.uniqueshape.items.primitive.*;
import flash.display.Shape;
public final class Main extends Sprite
{
public final function Main():void
{
/* Heart */
var heart:Shape = new SingleShape(new Hart());
heart.x = heart.width * 0.5 + 30;
heart.y = stage.stageHeight * 0.5;
addChild(heart);
/* Club */
var club:Shape = new SingleShape(new Clover());
club.x = club.width + 80;
club.y = stage.stageHeight * 0.5;
addChild(club);
/* Cross */
var cross:Shape = new SingleShape(new Cross());
cross.x = cross.width + 170;
cross.y = stage.stageHeight * 0.5;
addChild(cross);
/* Diamond */
var diamond:Shape = new SingleShape(new Dire());
diamond.x = diamond.width + 260;
diamond.y = stage.stageHeight * 0.5;
addChild(diamond);
/* Droplet */
var water:Shape = new SingleShape(new Water());
water.x = water.width + 350;
water.y = stage.stageHeight * 0.5;
addChild(water);
}
}
}
As you can see, the creation is pretty easy, an instance is created using the SingleShape class and the class corresponding to the actual shape, and then it’s simply added to the stage like any display object.
Take a look in the \whirlpower\uniqueshape\items\primitive\ folder to see what other shapes are available.
Step 4: Document Class
Add the class name to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.

Conclusion
That’s it! Experiment using this class and have fun with the 18 shapes included!
I hope you liked this Quick Tip, thank you for reading!

What a great little library!
Thanks Carlos for the tip.
This library is useful, thnks.
Hi,
Don’t use the Rectangle primitive – Flash will fire an error thinking that you are trying to access the geom.Rectangle class. Also, don’t use the Primitive class because it does call some obviously non-existing methods. It seems that you can delete that class (in items.primitive) at all without breaking the uniqueshape package.
Nice tip though it would have been more useful to see how to change some properties of the shapes. Otherwise the tip is something like a more verbose description of the Sample.as file included in this fine package.
To change properties: DrawOption.as has some setter methods to access, among others, fillColor, fillAlpha, lineThickness etc.
Something like that may do it:
var dwo:DrawOption = new DrawOption();
dwo.fillColor = 0xffaa00;
var mc:Shape = new SingleShape(new Hexagon(),dwo);
mc.x = stage.stageWidth * 0.5;
mc.y = stage.stageHeight * 0.5;
mc.width = 100;
addChild(mc);
how can i change the color? Thanks
Thanks Peter Bergen, I see