Create shape and drag 12262412

Project2 fla file

Project2 swf file

Create shape and drag

This post describes how I followed an online action script 3 tutorial called linesegment3. Once I completed the tutorial I then manipulated the code to allow for extra features that were not in the original tutorial.

Line segment 3 tutorial

http://www.flashandmath.com/basic/linesegment3/index.html

Original tutorial .fla

The line segment 3 tutorial can be found on the flash and math website. Its a tutorial that shows how you can use dynamic drawing in AS3. It allows the user to create shapes and sprites from mouse clicks, you can then drag the points of the shape to new positions which alter the original shape. There is also a reset button which allows wipes everything and allows you to start over.

The original allows you to use three points that when clicked creates a triangle. Its a basic tutorial but it does show you how to use some very interesting functions of AS3. The tutorial was complex to begin with as there were several aspects of AS3 implemented with it that I had not met before.

One part in particular that I had trouble with was the reset button. This was primarily because it was not explained within the project how to properly implement it. I had to refer to another online tutorial in order to get it to work. The problem I encountered with it was getting the removeLines function to work

//This remove function will allow our button (btn) to remove the drawn lines.

btn.addEventListener(MouseEvent.CLICK, removelines);
function removelines(event:MouseEvent):void
{
removeChild(lines);
}

The above code was taken from another tutorial and implemented into mine in order to get the reset button to clear the lines that define the shape.

Other than that the tutorial worked well and was intuitive enough to allow me to complete it without any further problems.

Create shape and drag

The create shape and drag project was interpretation of the original tutorial. I changed several aspects of the original such as, the stage layout and design, the amount of points implemented into the technique and the colours used across all areas of the project.

Stage layout

To change the stage layout I first changed the colours used in the original. I then added an effect which give a bit more detail than just a plain colour. I also played with the font type and size till I was happy with result.

Extra points

In order to add extra points I had to make several changes to the original AS3 code. All aspects of code that corresponded to the points had to be duplicated and renamed to the appropriate pointer.

I had to make extra sprites and then add the code for the graphical aspects as well. I also had to add to all the functions that the points referred to. 

/ The next function is executed when the mouse is moved.  Note that if all points are not placed and nothing

// is being dragged, this function does nothing.

function mouseUpdate(evt:MouseEvent):void {

if (numPoints == 7) {

if (isDragging1) {

point1.x = goodX(evt.stageX); // Set x- & y-coordinates.  See below for definition of 

point1.y = goodY(evt.stageY); // functions goodX & goodY

lines.graphics.clear(); // Remove lines shape and redraw it 

drawLines(); // with updated coordinates.

}

if (isDragging2) {

point2.x = goodX(evt.stageX);

point2.y = goodY(evt.stageY);

lines.graphics.clear();

drawLines();

}

if (isDragging3) {

point3.x = goodX(evt.stageX);

point3.y = goodY(evt.stageY);

lines.graphics.clear();

drawLines();

}

if (isDragging4) {

point4.x = goodX(evt.stageX);

point4.y = goodY(evt.stageY);

lines.graphics.clear();

drawLines();

}

if (isDragging5) {

point5.x = goodX(evt.stageX);

point5.y = goodY(evt.stageY);

lines.graphics.clear();

drawLines();

}

if (isDragging6) {

point6.x = goodX(evt.stageX);

point6.y = goodY(evt.stageY);

lines.graphics.clear();

drawLines();

}

if (isDragging7) {

point7.x = goodX(evt.stageX);

point7.y = goodY(evt.stageY);

lines.graphics.clear();

drawLines();

}

evt.updateAfterEvent();

}

}

The above code refers to the dragging aspect of the project. It shows that if for example point 7 is dragging then it will call the drawLines() method which in turn will draw the line.

Colour scheme

To finish the project I implemented colour changes to all aspect of the flash file. 

I  did this by using an online java colour palette. The palette allows you to pick a colour by hovering over it with your mouse, you then choose your desired colour, the program then gives you the appropriate java collour code for the selected colour. This code was then implement into the project by changing each fill, line and point colour from the original to my selections.

function placePoint(evt:MouseEvent):void {

if (numPoints == 0) {

point1.graphics.beginFill(0xFF3C00);

point1.graphics.drawCircle(0, 0, circleWidth/2);

point1.graphics.endFill();

point1.filters = [ new DropShadowFilter() ];

point1.x = drawBoard.mouseX;

point1.y = drawBoard.mouseY;

numPoints = 1;

}

  

Above shows point1 colour on graphics fill has been changed to red.

Summary

This tutorial gave me a good understanding of mouse click events and how they correspond with dynamic drawing events. It also gave me a great understanding of the code structure of the dynamic  point, drag and draw technique.  In order to visualize how the entire program works the code showed very clearly how all the independent parts come together to make the program work.  For example the area of code that tells the pointers not to allow dragging until the final point has been implemented is very interesting. If this was not implemented it would cause the program to be messy and not work well.