Building applications in Adobe Flash that can also be used as Adobe Flex components can be a challenge, as I learned with a project involving an embeddable video player. Learn from this example how to create a project enabling you to share code across three versions of this player published as a stand-alone Flash application, a Flash-generated Flex component, and an editable Flash CS3 Professional component.

This all started a few months ago. At Almer/Blank we do a lot of work with Flash video. I soon got tired of building new Flash video players for our clients that included more or less the same functionality as all the others—albeit perhaps in a somewhat different design. So I decided to build a lightweight, easily skinnable Flash video player that we would utilize for a wide variety of projects. We chose Flash primarily because of the size of the Flex framework. Many of our video players are utilized as embeddable players—the same type of YouTube-style player that you see embedded everywhere around the web (see Figure 1).

Figure 1. Flash video player for this project

The primary virtue of these embeddable video players is file size: they must load quickly and not weigh down the pages in which they exist. We had built a video player similar to this one in Flex and it weighed 300K—even without any custom fonts. The video player I built in Flash ended up only around 40K.

However, the first site into which this player was to be implemented was—like most of the work we at Almer/Blank produce—built in Flex. So, right off the bat, unless I wanted to build two video players, I needed to export this Flash video player as a Flex component.

Finally, another client wanted a shared video player for their video site that they could customize. Although I wanted to let them have it, I didn't want to release any source code. That's when I learned how to author FLA-editable components for Flash CS3.

In short, I had to build one single application that I could publish three different ways:

• As a Flash application
• As a Flash-generated Flex component
• As an editable Flash CS3 component

Either I was going to figure out a new workflow or I was going to be duplicating a lot of work! I decided to bite the bullet and figure out the workflow.

Planning your Flash application for any of these three items isn't that much of a challenge; but building an architecture and workflow that enabled me to export all three from the same project brought some nasty little quirks and surprises. This article is about these lessons. Before I get into this workflow, however it's worth taking a few moments to review just what these components are.

Requirements

In order to make the most of this article, you need the following software and files:

Flash CS3 Professional

• Try
• Buy

Flex Builder 2.01 (includes free Flex 2.01 SDK)

• Try
• Buy

Note: To test the Flex component, you must download the Flex 3 beta from Adobe Labs.

Flex Component Kit for Flash CS3 Professional

• Download

Prerequisite knowledge

You should have a good understanding of developing Flash applications and components, as well as Flash video.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 7

Next Page

About the author