From Flash CS to Flex Builder

Question

I am trying to port my pure-Actionscript Flash project to Flex Builder.

I have created a new project and it opens with an mxml file like this :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
        ]]>
    </fx:Script>
</s:Application>

Now, I am trying to copy over my Flash's document class inside this mxml file but to no avail.

If I add inside fx:Script the following code:

        addChild(new TradeShow());

I get this:

1180: Call to a possibly undefined method addChild.

OK, so there is no implicit DisplayObjectContainer for mxml. Let's try to define one (always inside fx:Script):

        public class TradeShow extends Sprite {}

Here is another contradicting error :

1131: Classes must not be nested.

I have already lost several hours and ashamed myself several times. Can someone please shade some light here?

Answer 1

You can even create a Flash Professional Project inside Flash Builder and use the Flash Builder interface to build the code and you can compile the swf through Flash Builder and Flash Professional.

It's a nice way to develop your projects that have a FLA file with assets and all that.

Answer 2

I have created a new project and it opens with an mxml file like this

It sounds like you've created a Flex Project in Flash Builder. Unless you want to port your Flash Pro ActionScript project to make use of the Flex Framework, I Strongly recommend you create an ActionScript project in flash Builder.

I suspect that will solve most of your problems.

---

I'm editing to add some more information about Flex and how it works.

If I add inside fx:Script the following code:

    addChild(new TradeShow());

I get this:

1180: Call to a possibly undefined method addChild.

I'm not quite sure why you're getting that error; but code inside of a fx:Script block must be inside a method, or an import statement, or a variable definition. This is not all that different from a 'normal' class that you would write. Think of an MXML File as a class; just defined differently. The MXML is generated into ActionScript under the hood by the Flex compiler. MXML should be viewed as an ActionScript code generation language.

OK, so there is no implicit DisplayObjectContainer for mxml.

That is not true. The Application class extends UIComponent--as do all Flex visual classes--which in term extends DisplayObjectContainer. So, the Application class is a DisplayObjectContainer. I suspect the reason for your above error was the location of the code.

Let's try to define one (always inside fx:Script):

        public class TradeShow extends Sprite {}

Here is another contradicting error :

    1131: Classes must not be nested.

In my mind this is not contradicting. The Application is a class. And you're trying to define a new one inside it. That won't work in an ActionScript only class, and it won't work inside of an MXML Class.

If you truly want to use Flex, then you should read up on the Flex Component LifeCycle. Here is the MX Component LifeCycle and here is info on the Spark Component Lifecycle.

Answer 3

Yeah... Flex is a bit different. I dont mess with class files (even thought I should) so I cant comment on that, but to get the addChild to work, just do:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
    <![CDATA[

    private function init():void
    {
        this.addChild(new TradeShow());
    }

    ]]>
</fx:Script>
</s:Application>

Added "creationComple" handler in main application tags and also the "init()" function.

Answer 4

A pure actionscript project shouldn't be recreated as a flex project. You should use the AS3 project option unless for some reason you need flex components. What is your intention behind porting to flashbuilder?

Answer 5

Here is how I solved it :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1300" minHeight="700" applicationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            private function init():void
            {   
                var show:TradeShowOrig = new TradeShowOrig();
                this.stage.addChild(show);
                show.init();
            }
        ]]>
    </fx:Script>

</s:Application>

Note that the Flex's "document" class mxml was called TradeShow.mxml. My main class was similarly called TradeShow.as. This resulted in insurmountable problems as things got mixed up really badly with no apparent compiler errors. I had to rename my document class to TradeShowOrig.as and all problems suddenly went away.