Make GUI with Flash and code by Flex!

Flex and Flash CS3: How they works together

Introduction

In some previous article, I'd searched for a java ee to flash communications framework.

Webservice as3 library disappears in the third version of action script after as2.

Xml parsing and unmarshalling is too coding expensive.

AMF works but by java side I can only with OpenAMF that supports the old AMF0 version.

When I'm search for this solution I'm reading about different technologies and library and It seems that adobe flex is more powerful when you must code more by client side.

As a matter of fact Flex supports Webservice, BlazeDS tutorials talks about Flex, and many forums post talks about the flexibilty of flex.

So I think that Adobe wants to move the coding capabilities of SWF from Flash CS Actionscript to other frameworks that works too with ActionScripts but is equipped with a powerful compiler tool and library. So the developers team and Webdesigner team can works respectively with differents development software.

I'm starting to study how the web designer can go on in working with his flexible tool: flash cs3 and the developers team can integrate the graphic designer's project in flex in order to control it in a more flexible way.

Starting Point

The main step are:

1. Make a simple flash project (FLA) with some movieclip
2. Export it as flex component (SWC)
3. Import it into flex builder and manage the imported movieclip.

The Flash Side:

Create a new "Flash File (ActionScript 3.0)"

Draw a rectangle and convert it into MovieClip, call it MainMovieClip.

Draw a rectangle inside MainMovieClip

Press F8, convert it into MovieClip, rename it MyMovieClip

Call the MyMovieClip instance into MainMovieClip into "myMovieClip_1"

Save All.

Export it as flex component(SWC)

In order to export the MainMovieClip you have to download the Adobe Flex Component Kit

Inside the downloaded zip you can find a simple mxp, a flash cs3 extension installable by a simple double-click.

Install it and restart Flash CS3.

Reopen the Flash File created in the first step.

Select MainMovieClip

Commands Menu-> Make Flex Component -> confirm the 24fps conversion.

Well, in the output windows you can read, if all is right, Component "MainMovieClip" is ready to be used in Flex.

And a UIMovieClip appears in library window.

note:

In this way the MainMovieClip is converted erediting the mx.flash.UIMovieClip instead of flash.display.MovieClip

Just to make a clear package definition, go to MainMovieClip properities, and change the Class from MainMovieClip in my.test.MainMovieClip

Now by right click again in MainMovieClip export it as swc.

Import the SWC inside Flex and use it

first of all make a new flex project

Add a simple button

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Button x="10" y="10" label="Button"/>

</mx:Application>

Go in the project properities ->  Flex Build Path -> Library Path -> Add SWC ... 

and add the swc exported before.

Now add a as3 script code inside mxml file:

<mx:Script>

<![CDATA[

    import my.test.MainMovieClip;

    

    var mmc:MainMovieClip

    

    function MainMovieClipShow():void

    {    

      this.addChild(mmc);  

    }

]]>

</mx:Script>

and add a click event to button:

<mx:Button x="10" y="10" label="Button" click="MainMovieClipShow()"/>

If all is right you see a web page, where by clicking in the button the MainMovieClip appear in the screen.

Conclusion

This simple example show how you can split a project between gui and model.