Create Custom Media Player Controls in Flash Catalyst CS5

David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, demonstrates an easy way to create video player controls, without the need for Flash or scripting of any kind. You can adapt the simple shapes available in Flash Catalyst, providing them with the power of interaction to make them serve as play, pause, and stop player buttons.

From the author of

Catalyst and Interactivity

Adobe has promoted Flash Catalyst mainly as a tool in sophisticated workflows used to create very expensive projects. In those scenarios, artwork created in Illustrator is passed through Catalyst, where it takes on interactive properties such as serving as a custom scrollbar or a custom video player (as in the example we'll explore in this article). That interactive object is then passed along to coders, who use Adobe's Flex 4 application to integrate the object into complex programs.

That's a useful scenario, but it's not what we're going to do in this article. Instead, we'll hijack the Flash Catalyst application and use it to generate a completely standalone web page with an embedded, customized Flash Video player.

Preparing Flash Video (FLV/FV4)

Catalyst works with only one video format, Flash Video, in either the FLV or FV4 versions. My book Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques walks through the entire process of converting video from formats such as QuickTime (MOV), Windows Media (WMV), and so on to Flash Video. Even without the book, if you have access to Adobe Media Encoder, you'll be able to generate a basic Flash Video file that's good enough to use for the recipe in this article.

In either case, to create a working embedded video player with custom video controls in Flash Catalyst CS5, you'll need an FLV or FV4 file. Here's an easy solution if that's beyond your reach at the moment: Use an MP3 audio file. The steps in the following tutorial are easy to transpose to MP3, and you probably have an MP3 audio file somewhere on your computer that you can use to follow along with this example.

Limits of Catalyst-Generated Custom Media Player Controls

Flash Catalyst CS5 has a limited set of available controls: play, pause, and stop buttons. Missing are volume controls, as well as a scrubber bar to allow viewers (or listeners) to fast-forward or scrub backward. If you've read my reviews and articles on Catalyst, you know that I'm campaigning for a more full-featured set of player controls in the next version of Catalyst.

In the meantime, those play, pause, and stop buttons provide enough control to implement a customized video-viewing experience. And given that you can use any artwork you have as buttons, placing them wherever you want onscreen, even the limited set of Catalyst-generated player controls can be used to create a very unique media player experience.

With these warnings, provisos, and prerequisites, let's create a custom video player!