Posted by: Dennis | August 3, 2007

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!

Advertisements

Responses

  1. […] August 3rd, 2007 · No Comments Is it too difficult (or even impossible, or we are just too lazy) to draw smth programmatically, using ActionScript in Flex? Use Flash and insert the content in Flex. See how!!! […]

  2. ‘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/’

    … nice tut but I got one problem … if I try to put my baseclass into a package, e.g. components.Scrollbar I get an exception “Cannot access a property or method of a null object reference.” for the Scrollbar class.
    Do you have any clue why this could happen?

  3. Did you change ‘com.yourcomany.flash.as3.myproject.Scrollbar’ to ‘components.Scrollbar’ and it didn’t work??

  4. yes. i’ve created a package named components and set the Class field correctly but I get the null object refernece. Any ideas why this happens?

  5. where does the exception come from?
    I cannot give you a precise answer because it might be wrong and it will meslead you.
    Give me a link to your code and I’ll have a look.

    Cheers

  6. Sorry to let you wait. I finally found some time to prepare a simple Flexbuilder AS test project. You can download it here: http://files.hexagonstar.com/test/swctest.zip

    If you unpack it you see there’s a lib folder with subfolders fla and swc. If you open the fla file there’s one component defined ‘TestComponent’ and if you check it’s linkage you see that it is linked to components.TestComponent (the base class is in folder src/components). The src folder has also ben set up correctly in the fla so publishing the SWC with the components works without any problem.
    In TestComponent is a TextField put on the stage named ‘tf’. The base class TestComponent tries to write text into this textfield.
    However when compiling and running the Main.as you get the null reference for that the TextField is null.

    I hope this is easy to understand. If you would put the TestComponent.as just into the src folder (and change the linkage in the fla to it) it would work without errors but as soon as TestComponent.as is in a sub package (components folder) the exception occurs.

  7. sascha, as far as I know you need to embed a swf in order to be able to access its content.

    Regards


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: