Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Using code snippets, you can control video with the FLVPlayback component. So on the Stage here, I have an instance of the FLVPlayback component that has a video and using the buttons that I have created, I am going to control the video, and with the thumbnails, I will click on them and make different videos play. I have actually added part of the interactivity for this already. Let's take a look at what I have in the Flash Player. So I can pause and rewind the video and then click the top two videos to navigate to them.
So in this movie, we will add the rest of the functionality for this application. We will make the buttons hide when you roll your mouse out, we will make the movie play when you click the button, and we will make the third thumbnail play the third movie. So let's get started. Let's go to the Actions panel and see what code is there already. So you can scroll through here and see that I have already applied several bits of code. So let's start with the thumbnail. I am going to unlock the previews layer and select the last thumbnail.
Notice it's an instance of PreviewButton2 and I actually gave it an instance name. I called it preview3_btn. There is actually a rule for instance names. You can't have any spaces or special characters and they cannot begin with a number. And just as a personal preference, I like to end button instance names with underscore BTN and movie clip instance names with underscore MC. So I have my button selected and I will open the Code Snippets panel and expand the Audio and Video section. So here you can see the rest of the controls that I added.
So I added Click to Pause Video and Click to Rewind Video, etcetera. So I am going to select Click to Set Video Source for this example. So I double-click that and the code gets added to the Timeline. I will scroll to the very bottom and for this I just have to set the green part of the code to be my video file name. You can see that's what you need to do by looking at the instructions. So step one, I will select that code and change it to my video file name, which is Clip13-tahoe.f4v.
So I have typed that in, and then I need to change video_instance_name to the actual instance name of my FLVPlayback component. To find the instance name, I can click the Insert target path button in the Actions panel. So I can see that I called it vid. I can tell that that's my video playback component because it has the little blocks that indicate a component. So its name is vid. So I will change video_instance_name to simply vid and then we will test the movie. And now you can click that bottom icon and the third video will load.
Next, we look at hiding the control's movie clip, which contains all the buttons. Notice when I select the movie clip, you will see that there's a big rectangle around it. That's because I created my own hit area that's a transparent rectangle. So the interactivity for the mouse for this movie clip is controlled when you roll over or roll out of this rectangle. So let's go back to Scene 1 and then I am going to apply a code snippet to hide this object when I roll my mouse out. To do that, I will select it on the Stage, open the Code Snippets panel, and then I will expand the Actions section.
I am going to double-click Click to Hide an Object. So the code is then added. And then you will see the instructions. Use this code for objects that are currently visible. I am going to modify this code just a little bit, so bear with me here. This visible code right here changes the interactivity for an object, so it will no longer detect mouse rollovers. So we don't want that to happen, so I am going to change the word visible to the word alpha, all lowercase.
And then I am going to change false to 0. So I want the alpha to be 0, not visible to be false. So I have changed that. And then where it says MouseEvent.CLICK, I am going to change CLICK to all caps ROLL_OUT. So let's test the movie and preview the application at this state. So now when I roll out, the movie clip hides. Finally, we need to add the interactivity for the Play button. Now, this actually going to be a little bit different because the Play button is hidden within buttons_mc.
So inside of buttons_mc, there's a button symbol called play_btn and this is the button that we want to target. So let's take a look at how to do that. I am going to select buttons_mc and open the Code Snippets panel. In the Code Snippets panel, I will expand the Audio and Video section. In there, I will double-click Click to Play Video. It's easy enough. And Flash needs me to adjust a few things. First I need to change that video instance name. So I will change video_instance_ name to the actual instance name of the video, which is just vid.
Next, I will need to change where it says buttons_mc.addEventListener as it stands when I click on buttons_mc, but I want to make it so that when I click on the Play button, which is inside of buttons_mc, the video will play. To do that, after buttons_mc, I am going to type a dot or a period and then type the instance name of the button, which is play_btn. So that's how you make a path to an object that's within another object. So play_btn is inside of buttons_mc.
So to make the path to it, we type buttons_mc.play_btn. So once you have done that, test the movie the final time and then click the Play button to play the movie. You can see how the Play button works after you have paused the movie. So go to the second movie, click the play button, and it will play. So using the Code Snippets panel, we have added all this interactivity to this application and we barely had to write any code.
We just had to make small adjustments and we can control playing an external video file, showing and hiding an object, and playing a video file as well.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66398 Viewers
61 Video lessons · 96852 Viewers
56 Video lessons · 110545 Viewers
82 Video lessons · 105175 Viewers
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.