Pause, Play and RW and FF Buttons

[Mark Han]

Hi,

A real newbie here, both to this forum and to Flash.

I've managed to get a movie running, but I want to add some navigation buttons to the movie.

I want a rewind button (which I know I use the gotoandplay script for), and similar for the fast forward.

But I also want a pause button that changes to a play button when clicked on.

I've got into a right mess trying to set up the button states, and am not sure at all how to go about this!

(I'm set up to use ActionScript 2.0)

Thanks,
Mark.

[Eralmidia]

First off all.. grats on starting up with flash ;) I would however recommend you starting with as3 if you're new. As3 offers more options and faster running movies (tho you wont notice that on small projects).

Navigating the timeline can be done with commands like


gotoAndStop(frameNr)
gotoAndPlay(frameNr)
stop()
play()
nextFrame()
prevFrame()


and others. The rewind would prob be done with a goto as you mentioned. For the pause button you could:

Create a MovieClip for the pause button with 2 frames (play and pause symbol) In the first frame inside the MovieClip add a
stop()
to prevent it from looping.

Then on you main timeline create an eventlistener for click on the button. Say we give the button (MovieClip) an instance name (in the properties window of the MovieClip) of mcPlayPause. In the main timeline add the following code:

mcPlayStop.addEventListener(MouseEvent.CLICK, mcPlayPauseClick);

function mcPlayPauseClick(e:MouseEvent):void
{
if(mcPlayStop.currentFrame==1)
{
mcPlayStop.gotoAndStop(2);
this.stop();
}
else()
{
mcPlayStop.gotoAndStop(1);
this.play();
}
}


Basicly, you could use a boolean variable to control the state of the button, or like in this example we use the currentFrame property of the MovieClip.

The code above is using the dot syntax directly to target the mcPlayStop inside the event listener function. In time you should read up on the e:MouseEvent parameter to create a more robust code than the one above :)

[Mark Han]

Thanks Eralmidia,

This looks more complex than I'd imagined. I haven't learnt javascript yet in my web learning, but from what I can see As looks similar!

A couple of questions:

When you say "main timeline" what are you referring to? I have several layers in the timeline...should I have a main layer to hold As?

Also, I am wondering...do I create the images for the buttons as Symbols => Button? And then insert into a frame on a new timeline layer? I am presuming by doing this I can have a different image for the mouseover to ease the client experience?

Also, many questions as to how this code you have given works...I'll get back to you in due course!!! Is there a tutorial on basic actionscript?

Thanks,
Mark.

[Eralmidia]

At first sight it might seem complex, but the key is to break it down. Its like reading a book. You cant just take a quick look at the page and understand the details. Study each line and you'll get there :)

Now
function mcPlayPauseClick(e:MouseEvent):void
{
if(mcPlayStop.currentFrame==1)
{
mcPlayStop.gotoAndStop(2);
this.stop();
}
else()
{
mcPlayStop.gotoAndStop(1);
this.play();
}
}


can be view kinda like a switch. If your mcPlayStop movieclip is on frame 1 you pause the main timeline, and you make mcPlayStop go to frame 2. If the current frame of mcPlayStop is not 1 (the else() statement) it has to be 2 right, cus the movieClip only has 2 frames, one for the play graphic and one for the pause. In that case you start playing the main timeline again.

By main timeline, I'm talking about the uppermost timeline. If you doubbleclick on a movieclip on the stage, you will "go into" the movieclip, and are no longer in the main timeline.

And yes, you could just as easily use two buttons (pause and play). Instead of the whole if and else structure, you could have the play button make the pause button invisible and vice versa, to create the illusion that it's actually the same button just changeing graphics.

But, if you're not familiar with the if() i would recommend studying up on its, cus its one of the most fundamental part of scripting/programming.. at any language really... and yes, actionscript and javascript originates from the same language family :)

[Mark Han]

Thanks,

I think I get the hang of it. I'm going to attempt this today.

I am fairly familiar with IF from my learning of BASIC many years back. But I'm sure I'll get the hang of it soon.

Mark.

[Mark Han]

I'm trying to do this.

I set up the Play and Pause buttons, but when I set up a new, uppermost timeline and add the code, I'm getting errors.

The main error seems to be that it cannot get the function:

function mcPlayPauseClick(e:MouseEvent):void


A question:

The mcPlayPauseClick ? Is this the name I should name the layer containing the buttons?

Or, do I name the buttons this? In that case, I cannot name two buttons the same name, can I? I have a symbol Pause (in frame 1 of Play-Pause) and symbol Play (in frame 2 of Play-Pause).

Thanks,
Mark.

(I'll move onto AS3 soon, but at the moment I'm trying to get this working in AS2.)

[Eralmidia]

No, layer names are just reminders for you to keep track of whats in a certain layer. Layers are linked to something calles the display list, so you can read up on as3 display list if you want to learn more about the link between a layer and your code.

if you have truble with the mcPlayPauseClick function, your issue lies with a socalled event. Events are flash's way of saying "Hey, something is happening". Then, we can register listeners for a certain event, and get notified a given place in out code when that event occour. For instance, in our case, we want to listen for mouse clicks on the button. We have different build in classes (and later you can also learn to build you own classes to create custom events) MouseEvent is a built in class we use to listen for mouse events. So, if you have a movieClip or button with a instance name of myButton, you can add a listener to this:

myButton.addEventListener(MouseEvent.CLICK, myButtonClick)

Now, we will get notified when the myButton button is clicked. And we get notified by flash firering the myButtonClick, which is a function we have to create:

function myButtonClick(e:MouseEvent):void
{
trace("the button was clicked");
}


And no, you should name two buttons the same name. Thats why I suggested the if() evalutaion and called the button mcPlayPause. But if you prefer two buttons instead, thats not a problem either, you will just have to create one listener for each button, and have like a playClick function and a pauseClicked function, and run whatever you like in each of the functions to make the code stop or play :)

[Mark Han]

The class or interface 'MouseEvent' could not be loaded.


That's the error message I'm getting. I also couldn't name the Buttons the same name...is it the Instance Name I should be naming?

Thanks,
Mark.

[Mark Han]

Em,

The suggestion you made about placing the Pause and Play buttons in separate frames... I have them there, but with the stop(); command in the first frame it stops the whole movie.

I'm getting a little disheartened. :(

Mark.

[Eralmidia]

Hi again

I'm very sorry Mark, I was about to go to work so the typing was a bit fast. It was suppose to be "And no, you should NOT give two buttons the same name." In general, it's a good thing to keep things unique.. symbol names, instance name, variable names...

I'm sorry to hear you're getting disheartened. Programming can be a struggle, sometimes, at least in the beginning you might get a bit lost, and even experienced coders get stuck every now and then. But I have to tell you, it's even better when you finaly find the sollution to a problem and everything suddenly makes sense.

Trying to make up for my typo, I've put togehter a small .fla file to show you how you can do this. I've left some quite detailed comments in the code to explain things. Let me know if you need some more help or explanation :)

Ps: The .fla is CS4, hope thats ok.

[Mark Han]

Thanks Eral,

I have downloaded the file and will come back to this tomorrow. I do know that often the disheartening is followed by accomplishment. And it is true that often one learns more by finding out what doesn't work than when everything goes smoothly!

I do, however, need a day's break from this. I'll come back to it tomorrow.

Thanks,
Mark.

EDIT: I'm using CS4 so that's great!

[Eralmidia]

Thats fine :) Let me know if things don't work out.

[Mark Han]

Thanks for that!

I see where I was going wrong..the mcPlayPause I see you have set as a movie clip symbol...now I was trying to do it within the main timeline!

However, a question..I have numerous layers on my main movie clip...will this interfere at all?

One more coffee and then I'm going to try to get this going!

Thanks eversomuch,
Mark. :)

[Mark Han]

I'm still getting problems with the

mcPlayPauseClick(e:MouseEvent):void

I'm thinking this is because I am currently using as2.0.

Is there a similar command in as2.0 to the command for MouseEvent in as3.0 ?

Thanks,
Mark.

[Eralmidia]

Ah, yes, the example was for as3. The logic behind the if() still apply, but if you're using as2 you use
on(release)
{
//code to be executed
}

with the code placed on the button or
myButton.onRelease = function()
{
//code to be executed
}

placed on the timeline. The latter is more versatile.

But I would recommend learning as3 if you're fairly new to as and since you use Flash CS4 :)

[Mark Han]

If I place the code on the button, how do I refer to the main timeline for the stop() and play() commands?

Thanks,
Mark.

P.S. I hope you don't mind, but I've also posted in the AS2 forum.

[Mark Han]

Just a thought...can I convert my file to run with as3 ?

Thanks,
Mark.

[Mark Han]

I managed to convert it to as3 and am trying the code, but still not working.

I also changed a few other things as I noticed my other movie clips may need to be individually declared...but I'm getting lots of errors.

I'm thinking I'm either making a small, but vital mistake, or, my layers and buttons etc. are mucking things up because I did this without thought of adding actionscript.

I've included my file.

Thanks,
Mark.

[Eralmidia]

Okey, you got a few things to sort out here.

All your instances seems to lack an instance name :) I'm not sure if you just forgot or you haven't heard of them, but basically, in flash, you can give objects two names, one symbol name for the library and an instance name, which is used in your code.

The reason for this, is that what you see in your library, can be thought of as objects. As you prob know, you can draw several instances of the same object out of the library. Thus you can have two instances of the same movie clip and call each of them with your code.

To give an instance name, simply select a movie clip or button on the stage and assign a name in the properties panel.

As you may have noticed, the output panel gave you a lot of 1120 errors, telling you that something was not defined. So, until you start learning to write your own classes and create things more dynamically, you have to always be aware of the two different types of names :)


Furthermore, you will have to delete some of the play() method calls. There is a difference between a movie clip and a button. The button is created from a class (kinda like a blueprint) call SimpleButton. A movie clip on the other hand, has a MovieClip class. The SimpleButton class does not have a play() method, simply because a button doesn't really play, it only changes state when you move the mouse over it or click it. So, simply remove these statements:


FoSButton.stop();
ProtestButton.stop();
PoliceButton.stop();

and the same for the else() (only with play() methods)


In addition there is one thing you need to structure in a different way. After removing the code not needed, your if() will then look like this:


if(mcPausePlay.currentFrame==1)
{
mcPausePlay.gotoAndStop(2);
mcPolice.stop();
mcVoltaire.stop();
mcProtest.stop();
}

But, if you think it through, the code now tell the 3 movie clips mcPolice, mcVoltaire and mcProtest to stop. But the button which calls this funtion (and in turn the if) can be clicked at any point in the movie. The movie clips however are not present at all times. This means, that it you press the button at some point where the mcPolice isnt existing in the timeline, flash will go look for it, and genreate an 1009 error, which means that the object you are trying to refer to has a value of null.

To solve this, make sure that all the movie clips are present at all times. If you need to get them out of sight however, you can set their visible property to false:

myMovieClip.visible = false

This will make it disabled and invisible, but it will still exist, and you will be able to target it with your code :)

[Mark Han]

Thanks Eralmidia,

I'll hope to get cracking on this later - but first a question:

The buttons (FoSButton, ProtestButton etc.) have motion tweens on them - should I convert these to movie clips? I've tried converting one to a mc and the movie plays fine - doing this I can set the stop(); and play(); commands. Am I think right?

Thanks,
Mark.

[Micheal douglas]

Hi All
I am glad it wasn't just me that couldn't do this!
Thanks all for the advice.

[Eralmidia]

Micheal douglas: You most definitely isn't the only one :)

Mark: Yes, thats correct. If you dobble click a button and take a look at the timeline, you'll see it has special states on the first few frames. The thing is in as3 there is a class called EventDispatcher, and a lot of the classes in flash are socalled subclasses of this class. Any class that extends the EventDispatcher class can add eventlisteners. One of the classes which can do this is the MovieClip class, which means we can, amongst other things, listen for clicks on the MovieClip. Hence the its really quite easy to use a movie clip as a button. And thats basically what we did with the pause/stop movie clip. But this is one of the aspects of whats called object oriented programming (OOP), and is kinda like the gateway into the more advanced actionscript. After you got some more practise on basic things like, if, variables and loops, you should read up on this, cus it really gives you a much petter view on how things works.

Choosing button when creating a symbol gives you a fast way to define how the it should look when the mouse isn't over it, when it is over, and when it's pressed. Choosing movieClip can also do these things, but with some simple actionscript instead of the predefined frames. On the other hand, a movie clip gives more freedom. You could for instance have a looping animation in you button.

[Mark Han]

Hi all, and Eralmidia,

I was forced to take a break from this! But now I've come back to it and am setting up a new movie, better organised with symbols (movieclips and buttons) so I'm hoping the advice already given will work now!

I will get back to you!

One question, though...can I have a Button (with its Normal and Over states) and then put that into a Movie Clip...from what I am learning I would think this is possible, but just wanted to check.

Thanks,
Mark. :)

[Mark Han]

I am almost there!

Now, I've got the PausePlay working.
BUT! I've put the separate parts of the movie into individual MovieClips. So, when I pause with this.stop(); the loop goes on to the MC that is current.

e.g. If I pause whlst the movie is playing mcFreeSpeech, the movie loops mcFreeSpeech without going on to the next one. But I want a total pause.

Would I deal with this by creating some IF statements?

e.g.
if (this.currentFrame==1);
{mcFreeSpeech.stop();}

I want the currentFrame to be between a range of frames. Do I use <= and >= ?

[Eralmidia]

Hi again :)

Would you mind uploading the current file again. I think that is more efficient, instead of posting comments and suggestions back and forth.

By now I'm guessing you already answered your own question, but: Yes, it's no problem to have a button inside a movieClip. You can nest an unlimited numbers of symbols inside each other, where unlimited actually means the theoretical number of 16 000 which is the maximum amount of movie clips.

[Mark Han]

Hi Eralmidia,

Here's the file (CS4). It is somewhat different to the previous one.

I am thinking that I could add IF statements to stop the separate movie clips when the main timeline is between specific frames. (As you have previously said, if I just STOP them without parameters then it throws up an error because the MC isn't present at that point.)

Thanks,
Mark.

[Mark Han]

Brilliant!

I've managed to get it working after some research. I would, however, like your feedback on how messy this coding and method is!

Yet I have got it working!

Now, a further question is whether I can use something like an "and" statement with the "if"?

Thanks,
Mark.

[Eralmidia]

It's always best when you solve the problem yourself ;)

Yes, you can use an And in an If to evaluate two or more conditions. The and keyword itself is deprecated, and its recommended to use the operator && like in:

if(myVar1==10&&myVar2==5)

I would, however, advice you to use it with care. Evaluating a lot of vars in one if could quickly become a source of bugs in your program if the if structure is too complex. Generally, if you see a need for like 3 or 4 && operators in a single if, you are probably better off restructuring your code in some other way.

As for your code, it seems fine. I wouldn't call it messy, but it all comes down to what you mean by messy of course :) There are ways to get this code even neater. For instance its possible to have the different movie clips dispatch events (much like you listen for events when you click a button, you can dispatch your own events from many classes). So each movieclip played its part of the whole movie, and when it reaches the end, it dispatches and event which tells the main timeline that its done playing. The main timeline would keep track on which movie clips is currently playing and which is next, kinda like a playlist. In that case, we wouldn't need the if statements at all, cus main timeline would always know which clip to stop (the one currently playing).

But it's really just another way to do the same thing, and while some may argue one way to do it over another, when it come to such a small project as this, its not really that big a deal.

There are a couple of cosmetics in your file I could comment on:
1 Most developers, when using the timeline for code, creates a spearate layer which only contains code, usually called actionscript og simply as. It builds on a principle to keep the logic separate from the visual elements. When working with the timeline this really doesnt have anything to do with the performance of the file, but if you start reading up on object oriented programming in flash, which kinda is like the portal into becoming an expert i flash, you'll start to see the real value of organizing your code.

2. The else if and else statements are usually on the same level of indent as the if statement. Try pressing the Auto format button above the area where you write your code and you'll see what I mean.

3. If you like, you could read up on the switch statement. It basically performs the same task as the if, but it may produce a bit more easy to read code when you perform several else if/else statements below the if. Simply write switch in your code window, highlight the word, and press F1.

[Mark Han]

Thank you Eralmidia. You have been such a beneficial help in this!

Now....I may have to get back to you on the FF Rewind..we'll see how I get on!

[Eralmidia]

Anytime :)

[Mark Han]

Okay Eral...here's my first problem:

In the attached file, I've tried to set up a rewind button. You will note that the rewind works when the movie is playing, but I wanted it to perform differently if Paused.

I want it to go to the end of the previous movieclip. But I think, the way I'm doing it, is that it's not detecting the relevant mc at that point in the main timeline.

Any solution you can think of?

Thanks,
Mark.

[Mark Han]

It suddenly occured to me that as I have the MCs in the main timeline at specific points, that an adjustment to the gotoAndStop may be the answer!

It is. I now go to the very point where the mc is set to play, then stop the mc, and then gotoAndStop to the end of that section so that when Play is clicked the main timeline is in the right place!

Now for FF!!!

Mark.

[Eralmidia]

Hehe, am I correct to assume that that lecture to yourself meant that you solved the next challenge without any help needed? :p

[Mark Han]

Hehe, am I correct to assume that that lecture to yourself meant that you solved the next challenge without any help needed? :p

Yup, got the Fast Forward working! Your help has been invaluable but I'm just beginning to get the hang of it! :)

I do have another issue, but think that best for a new thread.

Thanks,
Mark.