AS3 Tutorial - How to make a simple play button

Go down

AS3 Tutorial - How to make a simple play button

Post  Glenn on Sat Jan 02, 2010 11:57 pm

AS3 Tutorial - How to make a simple play button by .Glenn

Well, it seems like you didn't bother googling this, so let me teach you (not how to google)!

Do I need any experience?
No, absolutely not. You might as well copy/paste my code, but it's NOT recommended if you're trying to learn actionscript. I will tell you what to code and what the code does. If you have any experience with AS2, it won't be of much use here. You might want to know how to use the flash tools.



Step 1:
OK, start up by making a new flash file, ActionScript 3.0. Just for safety reasons, save it already so you won't lose your work. Now just make a square and put a text field inside it. Make the text field say "Play".
Screenshot

Step 2:
Now convert the play button into a button, and name it "btnPlayButton". That's the "professional" way to name them. Because it's a button symbol, we add a "btn". If it was a movie clip, it would have been "mc" instead. Weird, huh? But make sure you marked both objects, the text and the square behind.
Now, anyway, double-click the button. Everything behind should turn a bit white if there is anything behind it. Up on the timeline, you should see four frame spaces, each with a name.
The "Up" one is the one that will be displayed when the button is not held over or pressed. The "Over" one is in function when the mouse is held over the button. The "Down" one is not nessecary. The last one, "Hit", is the area where flash registers when your mouse is held over and clicked. Just feel free to add some color change or effect on the Over one, then skip a frame and just add one at Hit. Hit is not visible, so there is no need to change any visuals in it.

Step 3:
Now, go to the stage, and click on our button. On the properties tab, you should see some options. We need flash to recognise this button, because we can add many buttons on the stage at the same time, and Flash won't understand which one we want to add the script to. That is why the instance name was invented. Now, put this name into the field: "playButton_btn". We added a "btn" to make flash understand what sort of symbol this is, and make it easier for us to script.

Step 4:
Now, unlike ActionScript 2, we are going to make the script OUTSIDE the button. Open actions (F9). We need flash to stop on this frame, or else it would just start at once. Write this code:
Code:
stop();
This triggers a built-in function in flash that stops the animation from playing. We always end lines with an ";".

Step 5:
Now , we need to make Flash listen for something to happen. What we need is an EventListener. We need to add this to listen for a mouse click. Now skip a line, then this code is needed (followed by an explaination).
Code:
playButton_btn.addEventListener(MouseEvent.CLICK, playNow);
First, we entered a target path that directs this event listener to our button, you might remember we gave it the instance name "playButton_btn". The target path is followed with what we want to do here. We wanted to add an event listener. That's what that code does. The first word we see inside this is "MouseEvent". It's like a folder system. We need to specify what sort of event listener we need, and the go into detail. That is why it's followed by a "CLICK". It simply listens for a mouse click on our button. It is followed by the name of the function we want it to activate. We are going to write this function in the next step. And remember: We end every line with a ";".

Step 6:
Skip a line. This is the function we need:
Code:
function playNow(e:MouseEvent){
play();
}
First, we told Flash what we are specifying. It's a function. "function" is followed by the name of the function, which we specified in the step above. Everytime a function is triggered, it makes a variable with different information (NOTE: This is not important to understand). We call the variable "e". After that, we specify what sort of variable that is, and it's a MouseEvent. We can use this variable to drain information from the function trigger, but it's unnessecary now. Now we need to make clamps to hold the function that tells Flash what is inside the function and what is not. Inside these clamps, we find "play();". It's the opposite of stop()! We make the animation go instead. This is the only thing that happens when this function is triggered, unlike the stop() we wrote earlier that goes into effect when Flash enters the frame.

Your code should be looking like this now:
Code:
stop();

playButton_btn.addEventListener(MouseEvent.CLICK, playNow);

function playNow(e:MouseEvent){
play();
}
That's it! You're finished.
You can check out the source file here (Adobe Flash CS3 and higher).

Please tell me if you you have any problems with understanding, and you CAN point out grammar and spelling mistakes.
avatar
Glenn
Administrator
Administrator

Posts : 98
Join date : 2010-01-02
Age : 22
Location : Just here

View user profile http://justanotherpivotsite.roflforum.net

Back to top Go down

Re: AS3 Tutorial - How to make a simple play button

Post  Pivetor on Mon May 17, 2010 3:32 pm

Very nice, pretty thorough.
avatar
Pivetor
Administrator
Administrator

Posts : 72
Join date : 2010-05-17
Age : 24
Location : Virginia

View user profile http://www.Pivetworld.forumotion.com

Back to top Go down

Re: AS3 Tutorial - How to make a simple play button

Post  munste on Fri Aug 13, 2010 11:02 am

cool... buttons

_________________
COME ON we need more activity, get posting or i rape u.
avatar
munste
Administrator
Administrator

Posts : 71
Join date : 2010-08-13

View user profile

Back to top Go down

Re: AS3 Tutorial - How to make a simple play button

Post  Sponsored content


Sponsored content


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum