2 Replies Latest reply on Jan 24, 2011 8:25 PM by phaseblue

    How to Add a Sprite to a Container and Animate it with AS3?

    phaseblue Level 1

      I am a pretty experienced Actionscript 3 programmer (I work mainly in the Flash IDE), but am coming back to Flex after a 2-year hiatus.  I know this may sound ridiculously simple, but how can I add a container (i.e. a Sprite object) to the stage in flex and animate a Sprite object inside of it?  I want to make a VU meter for the audio output of an application which is simply two rectangles that will resize vertically depending on the volume level of the master channel.


      In Flash/pure AS, I would just create 2 Sprite objects, add them to the Stage or some other Sprite container, and then proceed to modify their Y scales at regular time intervals with the following code:


      protected function enterFrameHandler(event:Event):void


           if( isPlaying )


                // Update level display...

                var lftAmp:Number = 0;

                var rtAmp:Number = 0;


                lftAmp = Math.max(outputChannel.leftPeak);

                rtAmp = Math.max(outputChannel.rightPeak);


                leftPeak.scaleY = ((Math.round(lftAmp*40))/20);

                rightPeak.scaleY = ((Math.round(rtAmp*40))/20);




                leftPeak.scaleY = 0;

                rightPeak.scaleY = 0;




      With MXML I am at a complete loss! 

      Where should I put the Sprites (what container in Flex should I add them too)?

      How do I add them to a container?

      What should I use to keep regular timing (EnterFrame or a Timer object)?


      I have bought 2 books on Flex and neither really seems to address the fact that I want to animate in Actionscript 3, NOT FLEX!!!  They suggest using the Animate class and AnimateInstance class, etc...  This seems way more complex and adds layers of abstraction that are really unnecessary!  One of the reasons I stopped using Flex 2 years ago was because of the same type of problem I am facing here!  MXML is great when it comes to components and simplifying layout, however, when one wants to do something outside the norm with pure ActionScript, MXML adds a convoluted layer of complexity that isn`t always as intuitive as one would expect!  Maybe I`m going about this the wrong way, but I`m just used to doing things with ActionScript only!


      Thanks in advance for any help/advice anyone can give!



        • 1. Re: How to Add a Sprite to a Container and Animate it with AS3?
          Flex harUI Adobe Employee

          MXML is a markup language and allows folks to easily put together apps using

          a framework that componentizes common patterns and functionality.  It is not

          a full programming language like AS.  You can almost think of MXML as a

          macro language.


          If you look at the framework itself, it is almost entirely written in

          actionscript (except for Spark Skins), because we are trying to encapsulate

          low-level things.


          So write your component in AS and add it to your app via MXML.  Follow the

          recipes for custom components in the doc.  It is more work than just writing

          a simple flash app, but the standard advantages of encapsulation and re-use



          And you can always stick a UIComponent in your MXML, give it a fixed

          width/height and use it just like a sprite.

          • 2. Re: How to Add a Sprite to a Container and Animate it with AS3?
            phaseblue Level 1

            Thanks a lot Flex harUI!  That seems to clear things up for me!


            It was funny because I just found an example of a VU meter built in Flex that was actually made by extending a UIComponent!

            Looks like this is the way to go!