Buttons

In this tutorial we are going to create a simple button to change the frame and then Drag and Drop amother button. I have used this Tutorial from FlashAndMath and have adapted it slightly. Every tutorial I come across and learn from will be listed in this blog, so that we progress together.

Firstly, set our FPS (frames per second) to 30, and draw a circle. Now convert that circle to a Button, and name it "circle". Now give it the Instance name of circle. The instance name is used in AS to make it do actions. It is basically its own unique name so that Flash knows what to do with it. Now let's do our first bit of AS!

In AS 2.0 to make a button do something would have put the code onto the button. However you cannot put code on anything except the main timeline (Key frames) in AS 3.0. So now we have to add an EventListener. This is basically used to state what we are going to do. I'll explain it better once you've seen it.


So with our circle with the Instance name of "circle" ready to be used as a button, we add this code into the frame:

circle.addEventListener(MouseEvent.MOUSE_DOWN, Moveframe);

Alright, basically we are using the circle as our button, so we put circle. at the beginning. This is telling Flash to do our actions on the circle. Our addEventListener is being used to say we are starting an action here. The action is within the brackets.

Now in the first part of our bracket I put (MouseEvent.MOUSE_DOWN, This is telling us when to perform the action. Anything after MouseEvent. is a mouse action. This can be clicking, rolling over, many things. What we are using is MOUSE_DOWN This means, putting the mouse left click down.

The second part of our button Moveframe is the Function that is going to be done. This part is split off from the part before through the comma. Also, you should know that the Function can have any name, it doesn't have to be "Moveframe".

Now for that Function:

function Moveframe(evt:MouseEvent):void {
nextFrame();
}

To start any Function we have to put function and then the functions name. In this example I have called the function "Moveframe". Therefore we have function Moveframe( Now in those brackets it has evt:MouseEvent This is to show that the function is connected to a mouse event.

Now we have a { This is very important and you will come across this in all Actionscripts you see. It is basically opening the function, so everything within that { will be done in the function. Every { has to be closed off by a } As you can see the last line is a } so it shows everything within those are the actions of the function.

Now our simple action that is going to make the frame go forward once. nextFrame(); makes Flash move the frame up by 1. So if we were on frame 2 and we used that we would go to frame 3. However it would stop at frame 3, if we wanted to make it play we have to change it to gotoAndPlay(3); which I will come across later.

Now that we have our code set up we need to see it in action. Add another Key Frame so that there are now 2 key frames. On the second frame delete the button and draw anything you like. If we tested that however the button and your drawing would keep flashing. That is because we haven't stopped the timeline. So on our first frame after all our other code add:

stop();

This will stop the timeline when you put it on a frame. Now if we test it when you click on the button it should take you to our next frame!

Our whole code on the first frame should now be:

circle.addEventListener(MouseEvent.MOUSE_DOWN, Moveframe);

function Moveframe(evt:MouseEvent):void {
nextFrame();
}

stop();


Now we shall make a square draggable in the second frame. On our second frame delete your picture and draw a square. Now convert it to a Movie Clip (not button) and call it "square" and give it the Instance name "square". Our new code will now go on the second Key Frame. Now we have the same code as before, because we are clicking down on the square, except we change nextFrame(); to:

square.startDrag();

Also on the first line change circle. to square. This is because our new button is called "square" and we want to be able to click on the square. We also change our functions name because we cannot have functions with the same name. So I have decided to call it "drag". Now our entire code on the second frame should be:

square.addEventListener(MouseEvent.MOUSE_DOWN, drag);

function drag(evt:MouseEvent):void {
square.startDrag();
}

Now when you test that you can't stop dragging it. That's because we need to setup another function so that when they let go of the mouse click it will stop dragging. So we put:

square.addEventListener(MouseEvent.MOUSE_UP, Updrag);

function Updrag(evt:MouseEvent):void {
square.stopDrag();
}

So what's changed? Well we now have a new MouseEvent called MOUSE_UP This is when we release the mouse click. Our new function is called Updrag so we changed all of the function names. Now our main bit of code square.stopDrag(); This will just stop the drag of the square. So we use that function when we release the mouse. Now our whole code for the second frame should be:

square.addEventListener(MouseEvent.MOUSE_DOWN, drag);

function drag(evt:MouseEvent):void {
square.startDrag();
}

square.addEventListener(MouseEvent.MOUSE_UP, Updrag);

function Updrag(evt:MouseEvent):void {
square.stopDrag();
}

Now if we test that the square should drag and drop. However the dragging isn't very smooth. There is a more advanced way to make it smoother covered in the tutorial however if you were to start dragging it, it would always have the middle of it following your mouse, rather than where you picked it up from.

That's all from this post, keep checking for regular updates!

-souled