Disabling Buttons After Press, SwishMax - Intermediate Options

[RedDragon]

When you want to use buttons on your website that point to an animation, you dont want that the viewer can click the button again once the content is loaded so that the animation starts all over again. The button has to be disabled in some way. In the following tutorial I will show you how to disable a button after it has been clicked, and how to restore it again after the viewer clicked a different button!

Is what we are going to accomplish! I made the example using squares, ofcourse you can fill in the timeline with everything you want, including images, text, other sprites etc. It's the coding that makes it work, not the squares

1. Open swishmax and draw one square in the timeline. We will first do button1, later we can copy it and slightly modify the code so it works for all buttons.

2. Right click on it and select Copy Object

3. Right click again and Paste in Place. This way we dont have to move the object, its already in the exact same position as the first square. Do this 3 times so you have four squares in total. Give the squares a different colour so you can tell the difference in the final result.

4. Name the top square 'hotspot', the 2nd one 'clicked', the 3rd one 'rollover' and the 4th one 'normal'. You can do this in the Properties section for the Shape.

5. Group the shapes as a sprite. Name the sprite '1'.

6. Add the following code on your Sprite's timeline:

onFrame (2) {
stop();
}
onFrame (3) {
setLabel("rollover");
}
onFrame (13) {
stop();
}
onFrame (14) {
setLabel("rollout");
}
onFrame (24) {
stop();
}
onFrame (25) {
setLabel("clicked");
}
onFrame (35) {
stop();
}

7. As you can see we split the sprite in different sections, we will now point each square to one section.

- For 'normal', we will simply add a 'place-effect' on frame 1
- For 'rollover', we will add a FadeIn effect on frame 3 (under label "rollover"), and a FadeOut effect on frame 14 (under "rollout")
- For 'clicked', we will add a FadeIn on frame 25 (under label "clicked")
- For 'hotspot', we will add a 'place-effect' on frame 1, and a remove effect on frame 25 (under label "clicked")

8. Now we have to make the button work so that on rollover it goes to label 'rollover', on rollout it goes to label 'rollout' and on click it send the button to an inactive state.

9. Copy the following code for the 'hotspot'-square:

on (rollOver) {
gotoAndPlay("rollover");
}
on (rollOut) {
gotoAndPlay("rollout");
}
on (release) {
gotoAndPlay("clicked");
_parent._2.gotoAndPlay(1);
_parent._3.gotoAndPlay(1);
_parent._4.gotoAndPlay(1);
_parent._5.gotoAndPlay(1);
}


The last four lines (_parent._2 .....) are for the 4 extra buttons, we will make now. As you can see that as soon as we send button1 to its inactive state, we make sure that the other 4 become active again, by sending them to frame 1, where the hotspot becomes active again!

10. Copy the sprite and paste it four times. Make sure you rename the sprites to 2, 3, 4 and 5! If you don't the tell-target function above points to non-existing sprites.

11. Open Sprite 2 and change the last four lines to


_parent._1.gotoAndPlay(1);
 _parent._3.gotoAndPlay(1);
 _parent._4.gotoAndPlay(1);
 _parent._5.gotoAndPlay(1);


You see we replaced the 2 by a 1. Do this also for the other sprites, where you always replace the number of the sprite you're in by the one left out as in the above example.



The finished result should look like this: Mouse Over & Click

The file is also available in the downloads section (here) so feel free to check if you did everything right by downloading it

[nitasa]

cool tut
nitasa

[Eddie_K]

Nice one I have used something similar in my last site... still working on that one.

Thanks for putting this up Red for everyone

EddiE

[josephine]

coool tut Rick!!!

thanks for adding this!

[*D*]

Thanks red

[cmonney]

coool tut Rick!!!

thanks for adding this! 

ditto

[joep]

Thanx, this is cool

[Celeryhart]

Thanks.....I just did your tut and hummm.....I"m not sure what I just did...LOL...or when I'll use it...duh...!! Guess my mind is not engaged at the moment...I'm just a monkey following directions...
Going to have to go back and re-read it after my TV program...!!
Thanks a lot....these things are sure appreciated ..even if they aren't always understood...!!

Celeryhart

[RedDragon]

Thx all for the nice comments, appreciated!

Celeryhart, if you dont understand how it works or when to us something like this just shoot! You can also dload the sample to see how I put it together

[cena69]

this will help me a lot thanks