4 Replies Latest reply on Oct 26, 2009 10:52 AM by mewk

    Rotation transforms for Spark/MXML graphics elements


      I've been experimenting extensively with trying to get rotation transforms working with MXML graphics elements, with little luck.  The older Halo-style rotation transform included the ability to specify the centerpoint for rotation (originX and originY).  I can't figure out how to duplicate this with MXML graphics and the spark.effects.Rotate class (no obvious way to determine the center point).  I know/think I need to nest transforms somehow, but am at a loss as to how to do so.  What I'm trying to achieve is fairly simple, rotating a needle indicator around the center of a gauge.  I'm guessing it involves a location transform, rotate, then another location transform, but would welcome guidance/example.  It would be nice to be able to encapsulate this behavior in the Rotate effect (if not, I'll just create a class to do so once I figure out the secret nesting of transforms needed).

        • 1. Re: Rotation transforms for Spark/MXML graphics elements

          Hi Rick,


          Try this



          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
                protected function clickHandler(event:MouseEvent):void {
              <s:Rotate id="rotateForward" angleBy="180" duration="1000" applyChangesPostLayout="true"
                        autoCenterTransform="true" suspendBackgroundProcessing="true"/>
            <s:SkinnableContainer id="wheel" width="200" height="200"
                                  verticalCenter="0" horizontalCenter="0"


          skin class:


          <?xml version="1.0" encoding="utf-8"?>
          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">
              <s:State name="normal" />
              <s:State name="disabled" />
            <!-- layer 1: -->
            <s:Ellipse left="0" right="0" top="0" bottom="0">
                  <s:GradientEntry color="blue" />
                  <s:GradientEntry color="red" />
            <!-- layer 2: Needle -->
            <s:Rect left="{hostComponent.width / 2}" right="0" top="{hostComponent.height / 2 - 2}" height="4">
                <s:SolidColor color="black" alpha=".7" />
            <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">


          - e


          also please note that the rotate object contains properties transformX, transformY, transformZ so that you can specify your own center of rotation.


          Message was edited by: mewk

          • 2. Re: Rotation transforms for Spark/MXML graphics elements
            Ely Greenfield Level 1

            try transformX, transformY, transformZ .







            • 3. Re: Rotation transforms for Spark/MXML graphics elements
              RickBullotta Level 1

              Thanks all - wasn't obvious if transformX and transformY on the spark Line object itself were applied before or after rotation, but seems to be just what I needed.  I can databind the rotation angle and it works perfectly (similar to the way it can be bound using Degrafa).

              • 4. Re: Rotation transforms for Spark/MXML graphics elements
                mewk Level 3

                LOL, you're welcome -- anytime we can help.

                1 person found this helpful