Let’s make a button :). Up to his point all our animations just started all by themselves and had no option to replay if we scripted them to stop. So let’s make a something that will tell Flash when to start the animation and when to stop with ActionScript.
You can download the example file bellow.
Making the button
Create a new symbol and make it a button. Name it “start_button”. You’ll notice that this symbol has the first 4 key frames labelled.
Up – the default position of the symbol.
Over – the position of the symbol when a cursor is hovering over it.
Down – the position of the symbol when it’s clicked.
Hit – the hit box of the symbol. This is basically to define the clickable surface of the symbol.
Let’s design a simple round button. No fancy frills just a flat button. Go to the “Up” frame and draw a circle with a stroke. Let’s make it green. Now select the type tool and write “start” inside the button.
Now create a new key frame under “Over”. Change the fill color of the button to red.
Create another key frame under “Down”. Select the transform tool and select everything on the stage with it. Press shift and resize the button to a smaller size. Holding shift makes it constrain it’s proportions.
On the “Up” frame copy the circle and stroke. Go to the “hit” frame and paste the circle in to place (edit/paste in place).
Go back to the main timeline and drag the button from the library to the stage. You can adjust the size if needed. If you publish your flash now all you will have is a button that animates but doesn’t do anything.
To make it useful create a new key frame. Draw a shape in that key frame and convert it in to a graphic symbol. Go to position 25 and create a new key frame. Move the symbol to a different spot.
Now create a classic tween.
ActionScript
If you publish your project now, the shape will animate but the button will only appear for a brief moment. We need to make the animation stop at the frame where the button is.
Go to your first key frame (the one with the button) and open the Action window. Type in “stop();” without “”. Now go to the last key frame and do the same.
Now the animation will stop at the button but won’t play if we press it. Next up is how we make the button play the animation.
In action script 2
Select the button (not the frame but the button itself) and open the Actions window. Type in “on(release){ gotoAndPlay(2); }” without “”.
To break down what we just did.
On(release) – means the action (what written in the curved brackets) will take place when you release the click on the button.
{ – starts the command block.
} – ends the command block.
gotoAndPlay(2); – is the command that makes the animation go to the second frame and start the animation. You could also leave the brackets empty. That makes tells flash to go to the next frame and play the animation from there. But for the sake of also creating replay buttons this is a batter option.
Now publish your animation. The button makes the animation start and it stops when the animations reaches the last frame.
[iframe width=”70%” height=”350″ src=”https://viki.si/wp-content/uploads/blog/Flash/buttons/3.button.swf”]
You could also add a repeat button in to the last frame with the same script. That makes the animation go back to the second frame and repeat the whole thing.
In action script 3:
In action script 3 the process is different. Actions can’t be assigned directly to symbols anymore so we have to put the buttons action in to the frame and that’s a bit harder.
First you need to give your button an instance name. Click on it in your timeline and insert the name in the properties window (window/properties). An instance name is not the same as the object name. Keep that in mind when programming AS.
Go to the first frame and add this in to the Actions window:
import flash.events.MouseEvent;
stop();
start_btn.addEventListener (MouseEvent.CLICK, onClick);
function onClick(event:MouseEvent):void
{
play();
}
Let’s break it down:
import flash.events.MouseEvent; – imports the MouseEvents class before you can use it.
Stop(); – makes the animation stop on this specific frame.
start_btn.addEventListener – adds an event to the button.
(MouseEvenet.CLICK, onClick); – makes the function onClick when the button is pressed.
Function onClick(event:MouseEvent):void – executes the function
{ – starts the command block.
} – ends the command block.
Play(); – plays the next frame. If you enter a number it will play that specific frame.
The result of this should be the same as in AS2.
You can make all sorts of things with buttons. You can link them to an external url, use them to navigate a GUI, or type in actual symbols and words. You can find most commands in the GUI of the Actions window or online.
If you like what I do and appreciate my posts and freebies, please consider supporting my work.