Creating Unique Shapes Using Actionscript

Every so often, projects come along that are so unique that it's difficult to find others like them on the net. When building a project, take a video player for example; I often search for others like it to see how other developers have handled the same problems and make any attempt to add improvements wherever possible.

Such a project came along recently which needed to give users the ability to create their own floor plans. Since floor plans come in infinite shapes and sizes, I needed to give every user almost limitless control over their shapes. How does one go about doing this?

My solution is to start with a square and let the users edit from there. The user is initially presented with a square shape. In each corner is a dragable indicator that enables the user to expand the shape to their desired size. Drag the black indicators below to see it in action:

The way I accomplished this was to dynamically place the indicators on the stage and create an array of their instances. Then I draw a shape based on their x and y positions. As the indicators move, the shape redraws based on the indicators' new locations. The shape will keep redrawing as long as the indicator is moving.

Done? Nope. Unless you grew up in a shoe box you know that floor layouts vary like snowflakes. The next challenge was to add the ability to add new walls and angles -- in effect, to enable the user to click on the area between the walls to split them up to create new angles. I achieved this by drawing a line from each indicator, which enabled clicking.

When clicking on a wall, a new indicator was added to the floor plan. This was done on the backend by inserting the instance of the indicator into the array. The first indicator is on the top left and the second is on the bottom right and so on. If I were to click between the top left indicator and the bottom right, I would be inserting an indicator to the second position of the array and the indicator on the bottom left would move from second position to third.

At this point, you have the ability to create any dynamic shape with straight lines you need to. But what if you make a mistake? What if you add an extra angle; how do you remove it? The solution is simple. All we need to do is subtract the errant indicator from the array. To do this, I used the double click function in AS (don't you just love AS3?!). When you double-click the indicator, it will be removed from the array.

At this point, we could be done ... but why not take it one step further? For the sake of usability, the last feature I added is a readout of the wall lengths and angles. The data used here is from the length and angle of the now invisible lines. For this example, I am using a dummy scale of (lineLengthInPixels/10).

I apologize for not getting into the nitty gritty of the code more. For all of those curious about the code you can download all the source files here. Feedback is greatly appreciated!