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

    Rotation transforms for Spark/MXML graphics elements

    RickBullotta Level 1

      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
          mewk Level 3

          Hi Rick,

           

          Try 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/halo" minWidth="1024" minHeight="768">
          
            <fx:Script>
              <![CDATA[
          
                protected function clickHandler(event:MouseEvent):void {
                 rotateForward.play([wheel]);
                }
              ]]>
            </fx:Script>
          
          
            <fx:Declarations>
              <s:Rotate id="rotateForward" angleBy="180" duration="1000" applyChangesPostLayout="true"
                        autoCenterTransform="true" suspendBackgroundProcessing="true"/>
            </fx:Declarations>
          
            <s:SkinnableContainer id="wheel" width="200" height="200"
                                  verticalCenter="0" horizontalCenter="0"
                                  skinClass="SkinnableContainerSkin1"
                                  click="clickHandler(event)"/>
          </s:Application>
          

           

          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">
          
            <fx:Metadata>
              <![CDATA[ 
                [HostComponent("spark.components.SkinnableContainer")]
              ]]>
            </fx:Metadata> 
              
            <s:states>
              <s:State name="normal" />
              <s:State name="disabled" />
            </s:states>
              
            <!-- layer 1: -->
            <s:Ellipse left="0" right="0" top="0" bottom="0">
              <s:fill>
                <s:RadialGradient>
                  <s:GradientEntry color="blue" />
                  <s:GradientEntry color="red" />
                </s:RadialGradient>
              </s:fill>
            </s:Ellipse>
               
            <!-- layer 2: Needle -->
            <s:Rect left="{hostComponent.width / 2}" right="0" top="{hostComponent.height / 2 - 2}" height="4">
              <s:fill>
                <s:SolidColor color="black" alpha=".7" />
              </s:fill>
            </s:Rect>
            <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
              <s:layout>
                <s:BasicLayout/>
              </s:layout>
            </s:Group>
               
          </s:Skin>
          

           

          - 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 .

             

            Ely.

             

             

             

            Ely.

            • 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