Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll add some buttons to our application to be able to pause and resume the slideshow. So on the Stage I have a movie clip that is an instance of a symbol called buttons. Notice its instance name is buttons_mc. Inside of buttons_mc there are two layers. The background layer is a transparent rectangle. This enables me to increase the hit state when I add interactivity to this movie clip. The way it's going to work is that when the person rolls over anything in this area, the buttons will show, and when they roll out, the buttons will hide.
On Layer 1, I have the two buttons, so there is play_btn and pause_btn. So play_btn and pause_btn are inside of buttons_mc. So we will start with showing and hiding buttons_mc based on the mouse position. So select buttons_mc on the Stage, open the Code Snippets panel, and inside of the Actions area double- click Click to Hide an Object. In your code, scroll down and change visible to alpha.
That should all be lowercase and it should turn blue after you are done typing it. Change false to 0. Now the reason I am changing visible to alpha is because visible disables any kind of mouse interactivity. So once the buttons were hidden they could never come back with a mouse. So let's set it to alpha and we could retain the mouse interactivity. Next I am going to change Line 9 where it says MouseEvent.CLICK to MouseEvent.ROLL_OUT. That way the buttons will hide when the mouse rolls out from that movie clip.
So I'll change CLICK to ROLL_OUT all caps. It should be blue after you type it. So let's do this one more time to show the buttons. Select the buttons on the Stage again. You should see buttons_mc in the Properties panel, open the Code Snippets panel, double-click Click to Hide an Object. At the bottom of your code, change visible to alpha. It should be blue after you're done typing it and change false to 1. What this is the only that's setting the alpha to 100% in the code.
Finally we'll change MouseEvent .CLICK all caps on line 23 to Mouse.Event.ROLL_OVER. It should be blue after you type it. Make sure that it's all caps as well. So when you roll out the buttons will hide, and when you roll over the buttons will show. So let's test this out in the Flash Player. (Music playing) Looks like its working great.
So now we will add the functionality to play and stop the Timeline with the Play and Pause buttons. Remember, play_btn and pause_btn are inside of buttons_mc, so we'll need access them through buttons_mc. Let's open up the Code Snippets panel with buttons_mc selected. You will notice in the Timeline navigation there is nothing that says Click to Stop at this Frame or Click to Play at this Frame. So we are going to need to write our own code.
Don't worry though. You are only going to have to type a couple of characters on your own. So double-click Mouse Click Event in the Event Handler section. Flash then writes the code to detect a mouse-click. If you scroll down you can add your own functionality by replacing the line of code that starts with trace. So I will select that line of code and I will type play. That's all lowercase. Then type open and close parenthesis, open first then closed, and a semicolon. So play().
That wasn't too bad, was it? So now we need to communicate with the Play button, because right now the Timeline will play when you click on buttons_mc. Remember play_btn is inside of buttons_mc so we need to access it through buttons_mc. So the code looks like this, buttons_mc.play_btn. It's all lowercase. I want to point out here that any mistakes in the casing or the spelling of your instance names will cause this not to work.
So make sure buttons_mc has the same spelling and casing as it does on the Timeline. Same with play_btn. You can always confirm your instance names by clicking the Insert Target Path button and expanding buttons_mc. I could then see the casing and spelling for my movie clips and buttons. I will click Cancel now. So the last step is to add the functionality for the Pause button. So we'll close the Actions panel, select buttons_mc, open the Code Snippets panel and then double-click Mouse Click Event.
In here, I am going to scroll all the way to the bottom of my code and replace the trace statement with a stop action. This will stop the Timeline. Again, this is only a few characters. Just type stop, all lowercase, open and closed parentheses, and a semicolon. Finally we will have to communicate to the Pause button through buttons_mc. So on line 56 in my code, it may be different on yours, but it's line 56 in mine, I am going to change buttons_ mc to buttons_mc.pause_btn.
So it should say buttons_mc. pause_btn.addEventListener. Again, the casing and spelling is exactly the same in my code as it is on the Timeline. So let's test this in the Flash Player and see the slideshow work. (Music playing) Notice the audio automatically stops and resumes with the Play and Pause button. That's because we use a streaming sound and that Timeline is directly connected to the sound.
So that sound only plays as the Timeline plays, and there is the interactivity for our slideshow. So to set it up, you can use the Code Snippets panel after you select the buttons on the Stage and just remember that when an object is inside of another object you can use the dot syntax like we did in this movie to access them.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.