Jop Wielens

Using Flex with Flash

Here at Digital Outlook we have a very integrated approach to building games and sites. Designers should be able to find things easily and be able to do the things they do best like design, layout and animation. But on the other hand developers should be able to build great code on top of these games and sites. One thing we always tend to use is the timeline. It’s very difficult for a designer to go into a Flash file and change a little thing if everything is put on the stage by code.

But being a developer I want to use good tools to write my code. I’ve coded using Flash for a long time. Although it works fine to write classes in Flash, it’s not the most helpful tool. So I tried using Flex for a while and I have to say I love it. I had to iron out a couple issues to make Flex work with our integrated workflow as I’m still using Flash a lot and so are the designers. All projects should be compiled from Flash.

In case you’re struggling with the same issue, here is how I’ve set it up.

Folder setup:

I’ve got the flash source folder and the html publish folder setup like this:
01_development\02_flash
01_development\03_html

Create a folder for the classes in ‘02_flash’ and name it ‘classes’. We’ll get to this later.

Flash setup:

Create a new Flash file and save it in ‘02_flash’.

Go into your publish settings and select the Flash tab. Hit the ‘Settings’ button next to ActionScript version.

• Make sure ‘Automatically declare stage instances’ is not ticked.
• Add a class path like this: ‘../02_flash/classes’. (for some reason ‘classes’ on its own doesn’t work)

Also make sure you export to the ‘03_html’ folder but that’s the usual stuff.

Flex setup:

To create a new project do this:

• File > new > ActionScript project.
• Give it a name: ‘WallEGame’ for example.
• Click on the Browse button and browse to the ‘01_development’ folder of your project.
• Click ‘Next >’
• At the bottom set your main source folder to ‘02_flashclasses’
• Leave the Main application as it is (this should be WallEGame.as).
• Set the output folder to ‘03_html’.
• Click ‘Finish’.

Flex now creates a couple folders and your document class that it opens immediately. One last thing you need to do is go back to the Flash file you created and set the document class to ‘WallEGame’. This should sit in the classes folder but you won’t need to do ‘classes/WallEGame’ because we added that class path.

The reason we created the classes folder is because Flex otherwise copies everything from the ‘02_flash’ folder to ‘03_html’ for some reason. If it only finds scripts like in the ‘classes’ folder it’ll be fine.

Working with it:

Ok now everything is setup, let’s enjoy the powers of both worlds.

Flex creates the folder structure for you.

Create a new ‘ActionScript Class’. File > new (or right click in the source tree). Put the package in the top line: ‘com.digitaloutlook.walle.game’ for example.
Give your class a name. ‘GameManager’ for example.
If your class extends a class (MovieClip for example), hit the ‘browse’ next to the Superclass field and select MovieClip.

Click ‘finish’.

As you can see in the classes folder, Flex just created this folder structure for you. How handy is that! It also created the class file for you and created the constructor function. Cool.

Declare stage instances

Since you unticked the box in Flash to autodeclare stage instances you now have to do this in each of your classes if you have named a movieclip in Flash. The variable needs to be a public one. So if you have a MovieClip named ‘start_mc’ on the timeline you need to declare it ‘public var start_mc:MovieClip;’ in the class that goes with it. If that start_mc also has a class linked to it you should typecast it to that class but more on that later.

Autocomplete & autoimport

Flex auto completes things for you if you want. So when you start typing a variable you declared in this class just hit ctrl+space and Flex auto completes it for you.

Flex also automatically imports the classes it needs. But you have to use auto complete before it does that. So if you start typing ‘MouseEvent.MO’ let Flex auto complete it and it imports ‘flash.events.MouseEvent’ for you.

How to work with linked Bitmaps and Sounds

Normally in Flash you just set your linkage class on a sound or bitmap and you use it like ‘new backgroundimage()’. The class doesn’t exist but Flash creates it at runtime.

But Flex then gives you an error since it can’t see the class. So what I did is create that class in either a ‘bitmapassets’ folder or a ‘soundassets’ folder. So it sits in this package: ‘com.digitaloutlook.walle.game.bitmapassets’ for example.

Create a class in Flex and name it ‘BackgroundImage’ and set it’s superclass to ‘BitmapData’.

In Flash set the linkage class to ‘com.digitaloutlook.walle.game.bitmapassets.BackgroundImage’. Now in Flex you can get to this image by using ‘new BackgroundImage()’. The same goes for sounds, but they need to subclass ‘Sound’.

Make sure you type cast everything

When you create your own classes with its public functions Flex can actually recognise this and show them as you have it auto complete the things you type. But you must type cast your variables. So when you declare your variables in the top and one of them is linked to the ‘GameIntro’ class for example, you should do it like this:

Private var gameIntro:GameIntro;

This way it shows all the public functions when you type ‘gameIntro.’.

Publish your project using Flash.

Tags: Flash, flex