Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we've successfully added video to our project here inside of Flash Catalyst. On the Picking page, I have a video that appears right here, and the video is set to Auto Play. However, we really want the viewer, the one who is using the interactive tour to control when the video stops and when it plays. So the first thing I am going to do here is I am going to go to the Properties panel. I am going to turn off the Auto Play option. Now when I first designed this project inside of Illustrator, I designed two buttons that go right over here. We'll use these buttons to control the video playback.
So the first thing we'll need to do is actually turn these into buttons. In the Layers panel, I am going to click on the triangle here where it says Video Controls, to reveal the two buttons. I'll start by selecting the Video Controls group and I'll click on just the Pause button. Using the HUD, I am going to convert this to a Button component. And just to make it easier to understand that these are buttons, I am going to modify the Over state. So in the HUD, I am going to click on the Over button. When I designed this inside of Illustrator, I gave it an Opacity value of 50%.
Well, when I mouse-over it, I want that button to be full strength. So I am going to change the value here from 50 back to a 100 and press Enter. Now in the Up state, the button will be semi-transparent, so I can see the video through it, but when I run my mouse over it, it will appear to light up. Great! Now, I'll double-click on the artboard here to exit the isolation mode and I'll do the same thing now for the Play button. I'll highlight my Video Controls here, reveal the contents in the layer, click on the Play button here, convert it to a component, and then once again I'll modify the Over state, so that when you mouse -over it, the Opacity value is back to 100%.
I can also hit the Esc key on my keyboard to exit the isolation mode as well. Great! So at this point now, I've created two buttons, but I haven't told the Flash Catalyst what to do when someone clicks on those buttons. To do that, I need to create an interaction. So right now the Play button is still selected. I am going to go to my Interactions panel, and where it says Add Interaction, I'm going to click, and I'll choose On Click, don't play a transition to a state rather play the video.
Now it's entirely possible that I can have an application inside of Flash Catalyst with multiple videos inside of it. So I need to let Flash Catalyst know which video I want to start playing, when someone clicks on that button. So where it says Choose Video, I am going to choose the picking.f4v file, which I just placed into our project. Now, I'll click OK. Through the Layers panel here, inside of the Picking folder, I am also going to click on the other button, that's the Pause button, and I'll add an interaction for that as well.
On Click, I'll choose to Pause the Video, and again, I'll chose the picking.f4v file. Now, I'll OK, and I have now successfully hooked up buttons that will control the playback of my video. Let's see how that works inside of the web browser. I'll go to the File menu and I'll choose Run Project. Now, when this project loads in my browser, I can navigate directly to that Picking page right here, but the video file won't play. Only now as a user if I decide, I can click on these buttons, notice how they light up when I mouse-over them, and if I click the Play button, I can see that these buttons now control the playback of that movie.
When it comes to defining user experience, Flash Catalyst really lets you do almost anything you want. With the ability to control video playback with interactions, you can use almost any artwork and any component to define how you use video in your projects.
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.