mixing ActionScript animation/graphics with Flex controls

Question

My goal is to write educational software to run in Flash or AIR. (Probably mostly AIR on mobile devices.) I'm envisioning that the stage will have an area with controls like Flex provides, but another area with animations and graphics that would be done in pure ActionScript. I have been told that if I use Flex I will need to inherit UIComponent in any new components that I create, but I was also told alternatively I could put a big UIComponent on the screen and add Sprite-based objects to it. So I am trying to code the latter, and I'm stuck. I created an MXML file with a button and a UIComponent. Then I would like to write a class in a seperate .AS file that takes the UIComponent in its constructor and handles adding objects. I don't know how to reference the UIComponent in the script code in the MXML file. Here's what I have:

<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">
  <fx:Script>
    <![CDATA[
      import exper AddSprites;
      private var e:AddSprites;  
      public function addStuff():void {
        ???? next line is question ???
        e = new AddSprites(..UIComponent?..);
      }
    ]]>

  </fx:Script>

  <s:layout>
    <s:VerticalLayout/>
  </s:layout>

  <s:Button click="addStuff()" />

  <mx:UIComponent id="uic"/>
</s:Application>

You mean I wouldn't necessarily need to use Flex in order to have basic controls like radio buttons, lists, check boxes, etc.? Are the controls in fl.controls just as easy to use as Flex stuff? — composerMike
So I'm using mxmlc, the compiler provided with Flex. Using import fl.controls.*, I get the error that fl.controls can't be found. Is there something else I need to install? — composerMike
@composerMike you would at least need to include the appropriate swc files that contain the definitions for the fl.controls.* classes, though I'm not sure where you could pull this from (probably somewhere in Flash IDE installation folder). The problem is going to be that the controls in that swc aren't designed to work with the Flex component life cycle. Instead you should take your original approach here of just creating a new UIComponent, I'll dig up some articles in a minute here. — shaunhusain
Okay so two things to check out, go to my site shaunhusain.com and click on code, each of the things in the list can be clicked and will open a window with an example you can then right click that to view source. Most of what I did was Flex 3 for information about 4 here help.adobe.com/en_US/flex/using/… but since all the Spark components are sub-classes of UIComponent (from Flex 3) it's still mostly the same. You can draw to the graphics in updateDisplayList using AS3 and use timers to invalidate the display list for updates. — shaunhusain

Yann Yann · Accepted Answer · 2013-07-19T14:26:29

You can reference your UIComponent with its id, uic inside your script block. You can then pass it to your addStuff function. Since UIComponent inherits from Sprite, you can perfectly have a addSprite function that takes a Sprite as a parameter and doesn't know anything about Flex classes and be pure AS3 code.

So basically:

e = new AddSprites(uic);

With: function AddSprites(holder:Sprite)for your constructor.

mixing ActionScript animation/graphics with Flex controls

1 Answers