Limit drag and drop in AS3

Limit drag and drop in AS3

I previously created a drag and drop tutorial in Actionscript 3 where you could freely drag the object around the stage area. However, this means the object can also get dragged beyond the stage boundaries. In this tutorial you will learn how to limit the draggable object within the stage boundaries which will stop the object once it has reached the stage edges. You will need to have completed the previous tutorial before attempting this one as there are some minor additions to the startDrag() method.

In Actionscript 2 the startDrag() method contains five parameters, and now in Actionscript 3 there are only two parameters. The first parameter locks the centre value and the second parameter is the bounding area where you have to pass an instance of the Rectangle class to the method. The rectangle bounding area has to have four parameters which are: x, y, width, and height. For more information, checkout the AS3 startDrag() reference here.


Limit drag and drop in Actionscript 3 

Step 1 

Open up the drag and drop tutorial in Actionscript 3.


Step 2 

On the timeline select the Actions layer then open the actions panel (F9) and make the following adjustments.

//The x & y coordinates of the top-left corner of the rectangle.
var my_x:int=stage.stageWidth-sheep_mc.width;
var my_y:int=stage.stageHeight-sheep_mc.height;

//The height and width of the rectangle.
var myWidth:int=0-my_x;
var myHeight:int=0-my_y;

//Create a new instance of the rectangle class with the coordinates above.
var boundArea:Rectangle=new Rectangle(my_x, my_y, myWidth ,myHeight);

//Adds the mouse down and up event listeners to the sheep movie clip.
sheep_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
sheep_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

//This function drags the sheep but limits to the stage boundaries.
function drag(event:MouseEvent):void {
  sheep_mc.startDrag(false,boundArea);
}

//This function releases the sheep object.
function drop(event:MouseEvent):void {
  sheep_mc.stopDrag();
}

Step 3 

Test your movie clip Ctrl + Enter. Try moving the object around and you should notice it will not go over the stage boundaries.

Drag and drop in AS3

Drag and drop in AS3

This Flash tutorial will teach you about the basic drag and drop in Actionscript 3.0. You will learn how to drag an object around the stage. I have used an image of a sheep as the object to demonstrate the drag and drop functionality. This is an update from the previous create a draggable objects tutorial in Actionscript 2.0. The code in AS3 is slightly different from the AS2 version, but shouldn’t be too difficult to understand.

Drag and drop in AS3

Step 1 – Create the object

Open a new Flash document and create whatever object you wish.
Alternatively you could use an image as an object, like I have, by selecting File > Import > Import to stage select your file and click ok.


Step 2 – Convert object to symbol

Convert your object into a symbol by pressing F8.
Give your symbol an appropriate name, check movie clip and click ok.
Select your object using the selection tool (V) and give the instance name: sheep_mc
Step 3 - Add the code

On the timeline insert a new layer called “actions” right click on the first frame and select Actions from the drop down menu.



Add the following code:

sheep_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);

sheep_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(event:MouseEvent):void {

sheep_mc.startDrag();

}

function drop(event:MouseEvent):void {

sheep_mc.stopDrag();

}

**The first and second lines of code adds event listeners for the mouse up and mouse down events with the parameters drag and drop.

The drag function starts the dragging of the object when the mouse is pressed, and the drop function stops the dragging of the object when the mouse is released.

The drag and drop functions can also be adapted to be used multiple times. An example of this can be found here. And if you wish to limit the object to the stage boundaries, checkout this tutorial.

Step 4 – Test your movie

Test your movie Ctrl + Enter. Now use your mouse to drag and drop the sheep.

Custom cursor in AS3

Custom cursor in AS3

Custom cursor this time will be in Actionscript 3.0. The steps are similar, only the code needs to be changed. The rest of the tutorial is pretty much the same as the previous one.

Custom cursor using the timeline

Step 1

Open a new Flash document.
Create your custom cursor object on the stage. But you can create whatever object you wish.
Step 2
Convert your object into a symbol by pressing F8. Then give your symbol an appropriate name, check movie clip for the type and click ok.
**Note the registration point is where your custom cursor point will begin. I have selected the centre point for my cursor, but you will probably need to select the top left point for your cursor.

Step 3

Give your custom cursor the instance name: customcursor_mc.
Step 4
On the timeline insert a new layer called “Actions” like below:




Right click on the first frame and select Actions and add the following code:

Mouse.hide();
customcursor_mc.startDrag(true);

**The first line of code hides the default cursor. While the second line of code make the custom cursor follow the hidden default cursor.

If you run into any problems with the code above use the following code below.

stage.addEventListener(Event.ENTER_FRAME, moveCursor);

function moveCursor(event:Event) {
customcursor_mc.x=mouseX;
customcursor_mc.y=mouseY;
}

Step 5

Test your custom cursor Ctrl + Enter.

Follow object with mouse in Actionscript 3

Add caption

Follow object with mouse in Actionscript 3

In this tutorial you will learn how to follow an object with the mouse in Actionscript 3.0. This means that when you move the mouse the object will follow. I have created two different variations in this tutorial for the ‘follow object’. The first variation follows the mouse’s x and y position which will means the object moves when the mouse moves. The second variation follows the mouse’s position with a slight delay, so when you move the mouse the object will follow with a small pause.


Follow object with mouse in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select Oval tool (O) and create a simply circle shape on the stage like below. You can alternatively create a different shape or import an image if you wish.

Step 2

Convert your circle shape into a symbol by selecting F8. Give your symbol appropriate name, check movie clip, choose the centre registration point and click ok.

Select your movie clip and give it the instance name “ball_mc”.

Step 3 (first variation)

On the timeline create a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.

stage.addEventListener(MouseEvent.MOUSE_MOVE,followBall);



//2.

function followBall(event:MouseEvent):void {

ball_mc.x=mouseX;

ball_mc.y=mouseY;

}

Find mouse position in Actionscript 3

Find mouse position in Actionscript 3

This is an update from the previous mouse position tutorial in Actionscript 2.0. In this tutorial you will learn how to find the mouse position of the stage, and the position of a movie clip in Actionscript 3.0. This means that when you move the mouse you will see the x and y positions of the stage, and of the movie clip. The AS3 version is only a little different to the AS2 one. I have created this tutorial in Flash CS4.


Find mouse position in Actionscript 3

Step 1

Open a new Flash AS3 File.
Set an appropriate stage size and whatever background colour you wish. I have used #65FF98 colour, but you can use whatever colour you wish.
Select the text tool with dynamic text and drag four text boxes near the bottom left of the stage like below:


**Make sure your dynamic text boxes are of a reasonable size.


Step 2

Select each dynamic text box in turn and give them the following instance names: xstage_txt, ystage_txt, xmovie_txt and ymovie_txt
If you are using Flash CS4 you will need to embed the following for each dynamic text box: Uppercase, Lowercase, Numerals and Punctuation.

Step 3

Select the rectangle tool and drag a rectangle shape at the centre of the stage area like below. You can use whatever colour of rectangle you wish.
Convert your rectangle into a movie clip by selecting F8. Make sure you select the top left registration point. Then give the movie clip the following instance name: ‘box_mc’.
Step 4

On the timeline create a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.

stage.addEventListener(MouseEvent.MOUSE_MOVE, mousePosition);

//2.

function mousePosition(event:MouseEvent) {

xstage_txt.text= "X Stage: " + String(mouseX);

ystage_txt.text= "Y Stage: " + String(mouseY);

xmovie_txt.text= "X MovieClip: " + String(box_mc.mouseX);

ymovie_txt.text= "Y MovieClip: " + String(box_mc.mouseY);

}

Code:
1. This adds an event listener to the stage with the mouse move event and the parameter mousePosition.
2. This is the mousePosition function which displays the x and y position on the stage using the mouseX and mouseY properties. The movie clips position is also displayed using the mouseX and mouseY properties of the movie clip.


Step 5

Test your mouse position Ctrl + Enter. Now move your mouse and you should see the relative x and y positions, as well the positions of the move clip. So, the top left position should be (0, 0), and the top left the movie clip should also be (0, 0). If the messages on the dynamic text boxes are flashing or not showing up, try increasing the size of the text box.

Reversing a string in Actionscript 3

Reversing a string in Actionscript 3

In this tutorial you will learn how to reverse a string in Actionscript 3.0. You need to use the following three methods to reverse a string: split(), reverse() and join(). Some knowledge of basic buttons is also needed for this tutorial. I have created a simple Flash app where you enter your message you wish to reverse, and the result get displayed in an output textbox.

Reversing a string in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the text tool with input text and drag a textbox like below. I have also checked the ‘show border around text’ button, and included the message “Enter message” above the static textbox.



Step 2

Drag another textbox but this time select dynamic text. Again I have also checked the ‘show border around text’ button, and included the message “Reversed Message” above the dynamic textbox.



Step 3

Give your textboxes the following instance names accordingly: input_txt and output_txt. The ‘input_txt’ is for the input textbox, and the ‘output_txt’ is for the dynamic textbox.


Step 4

Create a button on the stage if you don’t know how to create checkout the basic buttons tutorials. I have basic black button with the text ‘reverse’ in the centre of the button.


Convert your button a symbol (F8) and give it the instance name: “change_btn”.


Step 5

On the timeline create a new layer called “Actions”. Select the first frame then hit F9 and enter the following code:

//1.
change_btn.addEventListener(MouseEvent.CLICK, reverseMessage);

//2.
function reverseMessage(event:MouseEvent):void {

var textInput:String = input_txt.text;

var inputArr:Array=textInput.split("");
inputArr.reverse();

var reverseStr:String=inputArr.join("");
output_txt.text = reverseStr;

}

Code:
1. This is an event listener to the ‘change_btn’ with the mouse click event and the reverseMessage parameter.
2. This is the reverseMessage function. The first line creates a new variable called ‘textInput’ which holds the data from when the user inputs text from the input box. The data from the input is then split into an array with an empty string as the delimiter. The reverse then is then called which reverses the order of the array. A new variable called ‘reverseStr’ is created which joins the reversed string together. Finally the reversed string is display in the output text box.

Step 6

Test your movie clip Ctrl + Enter. Now type some text and hit the reverse button and you should notice your text is reversed. Try reversing the following message: “enoyreve olleh” and leave a comment with the answer.

Superscript and Subscript - with Actionscript 3

Although I do like writing lovely elegant code I'm also a big fan of 'the cheap hack'! Here's one I used last week to get round the age old problem of dynamic text boxes in Flash not supporting superscript and subscript. You need to do the following:

1. Install the GGsuperscript and GGsubscript fonts, available from GG's Flash Blog
2. Make sure that you have 2 dynamic text boxes offstage with the 2 fonts embedded.
3. Then you can use the following code to insert text into a dynamic text box (in this example it's called 'textObject')
4. Job done!

//#######################################

var myString:String = "Adobe^TM C₂H₄";
var supStartExpression:RegExp = new RegExp("^{", "g")
var supEndExpression:RegExp = new RegExp("}", "g")
var subStartExpression:RegExp = new RegExp("_{", "g")
var subEndExpression:RegExp = new RegExp("}", "g")

myString = myString.replace(supStartExpression, "<font face="GG Superscript">")
myString = myString.replace(supEndExpression, "</font>")
myString = myString.replace(subStartExpression, "<font face="GG Subscript">")
myString = myString.replace(subEndExpression, "</font>")

textObject.htmlText = myString

//#######################################

The above code uses the new AS3 'replace' method along with it's really cool new support for Regular Expressions (the "g" bit in the regular expression makes sure that it matches and replaces ALL instances of the string). Of course you could just use the <font> tags in your code and forget all the Regular Expression stuff. I was just being a ponce!

If you could be bothered you could even extend the string class etc, etc. If you are using ActionScript 2.0 you could do something really nasty like:

//#######################################

String.prototype.replace = function(find, replace)
{
return this.split(find).join(replace);
};

var str = originalString.replace("^{", "<font face="GG Superscript">");
str = str.replace("}", "</font>");
str = originalString.replace("_{", "<font face="GG Subscript">");
str = str.replace("}", "</font>");
textField.htmlText = str;

//#######################################