PDA

View Full Version : Creating a Play Button[Flash]



WhoCares357
07-26-2008, 04:36 PM
Edit: I wasn't sure if I was supposed to post this in the main tutorial forum, or what..
Creating a Play Button

by WhoCares357

I'll just skip all the bullshit and get right to it. The title should explain this post well. Here are the two links. One is for youtube, the other is for veoh. Enjoy:

http://youtube.com/watch?v=qIZekFrBUZY
http://www.veoh.com/videos/v15113957Y34tNeZB

I've uploaded the video in very high quality to a free host:
http://whocares357.zxq.net/vids/index2.html


Here is my description of the code that I used in the video:

The code:

this.stop();

play_button.addEventListener(MouseEvent.MOUSE_DOWN , playMovie);
function playMovie(event:MouseEvent):void {
this.play();
}

This code is actually very simple. If you have programmed in any language this shouldn't be too hard for you to understand. But even someone who has never programmed before can use this code. I'll break it down for you.


this.stop();

The first thing you see is this.stop();. this.stop(); tells Flash to stop the movie (so it doesn't play when it opens up). "this" always refers to the movie. When you use "this" in front of a command you're always telling Flash to do something to the whole scene. stop() is a command that tells Flash to stop the scene at that frame (frame 1 in our case since we put the code in that frame). The semicolon (;) at the end of the line just tells Flash that the line has ended and that flash should move on to the next line of code.


play_button.addEventListener(MouseEvent.MOUSE_DOWN , playMovie);

Remember earlier when we gave the button an instance name of "play_button". Well, this is why we did it. In this line we tell Flash to add an "EventListener" to the button. An event listener just monitors the button for a special action that the user does to that button. In this case, we want Flash to monitor the button and do something when someone clicks on the button. MouseEvent.MOUSE_DOWN tells Flash to monitor the button to see when the mouse is pressed down on it. Once this happens, we need to tell Flash what to do. In this case we tell it to "playMovie".

But we can't just leave it at that. Flash won't recognize "playMovie." So we have to tell Flash what "playMovie" means. To do this we create a function.


function playMovie(event:MouseEvent):void {
this.play();
}

A function is sort of like your own command. We give it a creative name (so that we can later use it), set up the parameters (don't worry about this if you're not a programmer), and tell Flash what the function does when we use it.


function playMovie(event:MouseEvent):void

This line sets up the name and parameters of the function. Earlier, we used the playMovie to tell Flash what to do when "MOUSE_DOWN" occurred on the button. Since we are now defining what playMovie means, we're going to use it as the name for the function. Next, we have the parameters: "event:MouseEvent". Don't worry about this too much. Just know that you need it whenever you create a function that is triggered on a mouse event ("MOUSE_DOWN" in this case). :void just tells Flash that we aren't returning anything. Once again, if you have never programmed, don't worry about his. Just include it when you make a function.


{
this.play();
}

This is the final part of the code and it is very simple. The first things you notice are the two braces ( {, } ). These braces represent "begin" and "end". They tell Flash where the instructions for the project begin and where they end ({ is begin, } is end). this.play(); is a simple line that tells Flash to play the movie. Remember how I said that "this" represented the whole clip/movie? Well, it applies here, too. play() simply tells Flash to start playing the scene. The braces (one again) tell Flash to move on to the next line.

That's about it. Here are a few more commands you can use to make buttons:


this.play();
Plays the movie from the current frame.


this.stop();
Stops the movie at the current frame.


this.gotoAndPlay(frameNumber);
Goes to the indicated frame (number) and plays the movie from there. Example of use: this.gotoAndPlay(5);


this.gotoAndStop(frameNumber);
Goes to the indicated frame (number) and stops the movie at that frame. Example of use: this.gotoAndStop(5);

There are many more but these are just the basic ones you can use to start/stop your movies.

Try completing some of these challenges to see how much you learned from this tutorial:

1. Create a stop button.
2. Put the stop button in the same movie as the play button (have both buttons working at the same time).
3. Make a little book/quiz where the buttons turn the page (go to the next frame). Use gotoAndStop/gotoAndPlay for this.

ShowerThoughts
07-26-2008, 04:45 PM
Good job, how did you get that camtasia stuff on your own free ftp site? maybe make a tut?

WhoCares357
07-26-2008, 04:47 PM
I might just do that :D.

INuKe
08-05-2008, 08:02 AM
Very nice again :P i need to get CS3 Again..