A tale of AS2 AS3 Integration: Go CSS !

I have seen a couple of posts recently from people looking for some information on integrating AS2 and AS3 code. I recently worked on a project that I ended up spending quite a few hours trying to get some things to work right so I figured I should post about it. Hopefully someone will find it useful.
So I wrote a Flex application that I was able to knock out fairly quickly. The core framework really made a lot of the grunt work disappear and I was pretty pleased with what I had. It was only when I was done with the application itself was I informed that the application was supposed to be loaded in an AS2 swf. Ah well, I could always loadmovie it.
Wrong.
AS2 swfs cannot loadmovie AS3 swfs. I guess the swf headers dont get recognized by the Flash Player and the AVM2 doesnt startup. So we had to find a workaround to that. I was hoping Javascript popups would work but that was unacceptable user experience. So we went back to the drawing board. The other option seemed loading the existing AS2 base swf using an AS3 basic loader as the root. It worked well for a few initial scenarios but soon hit a wall since there were _root references all over some of the AS2 code and the root loader killed all that functionality (For those who still do so, please STOP using _root in your code !!!).
Just when I was ready to quit and about to just port the whole app to AS2, I tried going completely out of the flash player to get my application to show up on top of the base swf. Go html positioning. I ended up writing both the swfs into 2 separate divs using swfobject and then absolutely positioning the base swf and relatively positioning the container with the Flex application on top of it.

The css styles looked like this:
[css]
#div1{
position: absolute;
margin:0px;

width:100%;
height:100%;
}

#div2{
width:500px;
height:360px;
position: relative;
margin-left: auto;
margin-right:auto;

}
[/css]

Works pretty well :).

A tale of AS2 AS3 Integration: Go CSS !

One thought on “A tale of AS2 AS3 Integration: Go CSS !

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