Join Todd Perkins for an in-depth discussion in this video Working with video cue points and Live Preview , part of Flash Professional CS5 New Features.
- View Offline
Some of the most exciting features of Flash CS5 have been added to the video capabilities. On the stage here, I have an instance of the FLVPlayback component that has a loaded video, and I have some buttons on this side. In Flash CS5, you can actually use the SeekBar in the FLVPlayback component to preview your video directly in Flash. That means you don't have to test it in the Flash player to see the video. While this is an excellent and an exciting feature, it's even more exciting when you add the other new feature of video, which is ActionScript cue points that you can add directly in Flash.
Previously, you needed to write these using ActionScript code. And now we can just use the Properties panel and type them in. It's very easy and very effective. Before we do that, I want to point out the difference between ActionScript cue points and embedded cue points. Remember that embedded cue points are actually put inside the metadata of your video files. That means that information can be read by any other application that can understand it. So the metadata and the cue points stay with the video file.
ActionScript cue points only work in the Flash player, so that's the only disadvantage. The advantage to ActionScript cue points is that you can add them and remove them at any time without affecting the original video. Since they're not controlled by the metadata, you can always change them whenever you want. So let's look at ActionScript cue points with this new Live Preview video feature. So let's say I scrub to the very beginning of this video, and then I want to add a cue point there.
I can just go in the Properties panel, with the FLVPlayback component selected, and then I can click the Plus button to add an ActionScript cue point. If I click on the Cue Point's name, I can change it. So I'll call this one 'start.' I'll leave the time code at 0, and that's all there is to it. So if I want to create another one, I can actually click and drag the SeekBar to that point. Let's say I'll just drag when skier is show up on the screen. It's about 3 or 4 seconds in, and then I'll click to add another cue point, and notice that the timecode matches what I have set in the FLVPlayback component.
So I can really quickly and easily add cue points in this way. So, I'll call this one 'ski,' and we'll add one more cue point, and to get that one, I'm going to scrub forward until the snowboarders show up, and there they are. So I'll click to add a new cue point. I'll call this one 'snowboard,' and leave it at that. Another thing that you can add, through the Properties panel, are parameters. Parameters are data that you can associate with a cue point. This data can be basically anything that you can think off.
You just need to name the parameter something without any spaces or special characters, and then you can put the value as just about anything you want. So this can be a number, or text, or whatever you can think up. So let's say I wanted to associate a description with the cue point. I can select the snowboard cue point, click the Plus button to add a Cue Point parameter, change the parameter's name to description, and then change the Value to something meaningful, like 'Snowboarders going down a hill.' So if you wanted to have a more accurate description and say have this value come up in a text field, you can easily do that here, and I can add multiple parameters to each cue point, and I can add any parameters I want to any cue points.
Now, let's take a look at accessing cue points using ActionScript 3.0. I've actually already written some code for the Start and the Ski buttons. These will navigate to the start and the ski cue points, but we'll add the functionality to navigate to the snowboard cue point right here. I am going to do that using another new feature in Flash CS5, which is the Code Snippets panel. This panel has a bunch of pre-written code that you can easily apply to your applications. It is actually perfect for this situation.
So I have my button selected on the stage. Note that the instance name is vid. So with my button selected, I'll open the Code Snippets panel, and then in there, I'll expand the Audio and Video options, and then I'm going to double-click Click to Seek to Cue Point. The Actions panel opens, and there is some code that's highlighted. This is what Flash wrote for me. Notice there is a comment explaining the code and explaining what you should change to customize your code.
Then if you scroll down, you'll see the code itself. In the code, we need to change a few things. First, you'll see video_instance_name. That needs to be changed to the actual instance name of your FLVPlayback component, which in this case, is just vid. So I'll change that in both instances, and then see that green text there that says Cue Point 1? You need to change that text to be the name of your cue point. When you're doing this, just make sure not to remove the quotes. So I'll change this to snowboard, and that's it.
So I'll test the movie. I can click the snowboard cue point, and I'll go to the point where the snowboarders are coming down the hill. Notice the other cue points work as well. So using the new features with the FLVPlayback component in Flash CS5, you can quickly and easily seek to different parts of the video, and add cue points directly in Flash. If you want to create a way to seek to those cue points, you can use the Code Snippets panel to do so.
- Comparing Flash CS4 and Flash CS5
- Inserting modifiable cue points for video in Flash
- Editing text in the Text Layout Framework
- Embedding fonts
- Creating and editing ActionScript code snippets
- Performing roundtrip editing between Photoshop and Flash
- Exporting FXG files for use in Flash Catalyst
- Integrating with Flash Builder