Flash content in Flex

Ok, this is not an innovation, I’m pretty sure there are a lot of tutorials out there, and ofcourse mine is not the best, if you find a better one, let me know, I just found that it is suitable for most situations. Flex Builder 3 Beta and Flash CS3 where used in this example.

Now, when do we need Flash content in Flex? – when it is too difficult (or even impossible, or we are just too lazy) to draw smth programmatically, using ActionScript.

The project and all its files can be found here: http://www.box.net/shared/xg4ce2p1z3 , I’ll just walk you through it and give you a description.

There are two main options when we are talking about using Flash content in Flex (and by Flash content I mean a swf)
1. embed it into the pubilshed (by FLex) SWF
2. load the Flash content dynamically, which is not quite appropriate for most cases, but really necessary in other ones. It means that before you can use that content you must load it first (pause the application, add event listeners, load, un-pause), and it’s not a pleasant situation if you were looking for something extremely simple.
So I’ll just stick to the first case. In the application directory you will see an FLA file named library.fla, this will be our so-called library for the application. Just like the library in the Flash IDE, any symbol can be added to the display list at any time (as long as it is exported in the first frame). Now check out the library panel in Flash (by the way Flash 8 won’t work). We’ll be using these two symbols: buttonsSymbol and scrollbarSymbol. These two cover the situations I have dealt with so far – one is using a symbol as an asset for a single class, and the other one is using a symbol as assets for multiple classes. More about this later.

Right now it’s not important what is on the stage. I’ve just put the symbols there so that they are visible the minute you open the FLA file. The most important thing is two export the symbols in the first frame. Let’s take scrollbarSymbol as example. In the linkage properties window it sais that it’s class is Scrollbar (which can be found in the same directory – Scrollbar.as) and base class is flash.display.Sprite. Now, if your class resides in a directory within a direcotry .. within a directory you have to give the full path to it in the “Class” field (in linkage properties), smth like “com.yourcomany.flash.as3.myproject.Scrollbar” if the directory structure is “com/yourcomany/flash/as3/yourproject/”.

If you look inside scrollbarSymbol, you will notice that it has only one object – a dimond-like shape, which I found difficult to draw only by using actionscript when developing a scrollbar once. It has an instance name of “arrows”, and it is also important, since we will be accessing it from flex using this name. Now switch to Flex builder, and open Scrollbar.as file. The functionality of the scrollbar isn’t implemented here, one of my favourite lines: “it’s outside of the scope of the project”. What you have to look at is the Embed meta-tag. It specifies a source (library.swf) and a symbol (Scrollbar) for the class. We know that Scrollbar symbol in flash had a movieclip inside, instance-named “arrows”, so now we can access it by this name, store it in a local variable, rotate, scale, or whatever. Initially it will appear at 0,0 cooridnates.
So what do you have by now – a scrollbar class (with all the functionality , in case you decided to implement it) with a symbol inside, drawn in Flash which can be easily used here, in Flex. Hooray!!!

Second example is about using a symbol to add assets to multiple classes. Here is the scenario: you have to develop a navigation bar, with buttons like next, previous, first, last and so on. If you were to use the first example, you would need a class for each button, which is already bad OOP, since you could have a single class but multiple instaces of it with different assets, instead. So what do you do? You export all these buttons as a single symbol and use them separately when instanciating you gereric button class (mine is called NavigationButton). So, check out the buttonsSymbol in library.fla, it has some buttons, each with unique name. The class Buttons.as is the one in which you embed that symbol, and then in flash_content_in_flex.as you instanciate both Buttons.as and NavigationButton.as. The latter gets an extra parameter which actually links to an object from within the buttonsSymbol symbol. In NavigationButton.as you can see that this symbol is added immediately to the display list and becomes visible right away.

Good luck coding!