Quick Tip: Easy Shape Creation with UniqueShape

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.

Flash common vector symbols and shapes


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.

Flash common vector symbols and shapes


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!

Add Comment

Discussion 5 Comments

  1. james says:

    What a great little library!

    Thanks Carlos for the tip.

  2. Martin says:

    This library is useful, thnks.

  3. Peter Bergen says:

    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);

  4. 若比邻 says:

    how can i change the color? Thanks

  5. 若比邻 says:

    Thanks Peter Bergen, I see

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.