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:
1 |
|
2 |
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.
1 |
|
2 |
package
|
3 |
{
|
4 |
import flash.display.Sprite; |
5 |
/* Import the Shapes Source Classes */
|
6 |
import whirlpower.uniqueshape.SingleShape; |
7 |
import whirlpower.uniqueshape.items.primitive.*; |
8 |
import flash.display.Shape; |
9 |
|
10 |
public final class Main extends Sprite |
11 |
{
|
12 |
public final function Main():void |
13 |
{
|
14 |
/* Heart */
|
15 |
|
16 |
var heart:Shape = new SingleShape(new Hart()); |
17 |
|
18 |
heart.x = heart.width * 0.5 + 30; |
19 |
heart.y = stage.stageHeight * 0.5; |
20 |
addChild(heart); |
21 |
|
22 |
/* Club */
|
23 |
|
24 |
var club:Shape = new SingleShape(new Clover()); |
25 |
|
26 |
club.x = club.width + 80; |
27 |
club.y = stage.stageHeight * 0.5; |
28 |
addChild(club); |
29 |
|
30 |
/* Cross */
|
31 |
|
32 |
var cross:Shape = new SingleShape(new Cross()); |
33 |
|
34 |
cross.x = cross.width + 170; |
35 |
cross.y = stage.stageHeight * 0.5; |
36 |
addChild(cross); |
37 |
|
38 |
/* Diamond */
|
39 |
|
40 |
var diamond:Shape = new SingleShape(new Dire()); |
41 |
|
42 |
diamond.x = diamond.width + 260; |
43 |
diamond.y = stage.stageHeight * 0.5; |
44 |
addChild(diamond); |
45 |
|
46 |
/* Droplet */
|
47 |
|
48 |
var water:Shape = new SingleShape(new Water()); |
49 |
|
50 |
water.x = water.width + 350; |
51 |
water.y = stage.stageHeight * 0.5; |
52 |
addChild(water); |
53 |
}
|
54 |
}
|
55 |
}
|
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!
