6 Replies Latest reply on Nov 9, 2009 3:49 PM by Chet Haase

    Transitioning a corner radius?

    Handycam Level 1

      In the component I mentioned earlier, I was going to have a Rect the size of the component as the background.  When in the Normal state, I want almost no corner rounding, but in the over state I do.  This code works fine, but the radius "jumps", and the drop shadow is of the non-rounded Rect...

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark" 
                            xmlns:mx="library://ns.adobe.com/flex/halo" rollOver="currentState='over'" rollOut="currentState='normal'" 
                            width.normal="40" height.normal="40" width.over="200" height.over="200">
      
           <s:states>
                <s:State name="normal"/>
                <s:State name="over" />
           </s:states>
           <s:transitions>
                <s:Transition fromState="normal" toState="over" autoReverse="true">
                  <s:Sequence>
                    <s:Resize duration="500" target="{this}"/>
                    <s:Fade duration="100" target="{mainContents}" alphaFrom="0" alphaTo="1"/>
                  </s:Sequence>
                </s:Transition>
                <s:Transition fromState="over" toState="normal" autoReverse="true">
                   <s:Sequence>
                      <s:Fade duration="100" target="{mainContents}" alphaFrom="1" alphaTo="0"/>
                         <s:Resize duration="500" target="{this}"/>
                   </s:Sequence>
                </s:Transition>
           </s:transitions>
           
           <!-- main background -->
           <s:Rect id="bg" top="0" left="0" bottom="0" right="0" radiusX.normal="1" radiusX.over="12">
                <s:filters>
                   <s:DropShadowFilter angle="45" distance="5" blurX="10" blurY="10" alpha=".3"/>
                </s:filters>
                <s:fill>
                   <s:SolidColor color="#ccff00"/>
                </s:fill>
           </s:Rect>
           
           <s:Group id="mainContents" top="10" left="10" bottom="10" right="10" includeIn="over">
                <s:Label text="FOO"/>
           </s:Group>
           
      </s:SkinnableContainer>
      
        • 1. Re: Transitioning a corner radius?
          Handycam Level 1

          Similarly, how do you transition a filter property:

          <s:DropShadowFilter angle="45" distance.normal="2" alpha.normal=".3" distance.over="4" alpha.over=".5" blurX="10" blurY="10"/>
          
          • 2. Re: Transitioning a corner radius?
            Shongrunden Adobe Employee

            You could use an Animate effect with a couple SimpleMotionPaths:

             

            <s:transitions>
                        <s:Transition fromState="normal" toState="over" autoReverse="true">
                            <s:Sequence>
                                <s:Animate duration="500" target="{bg}">
                                    <s:SimpleMotionPath property="radiusX" />
                                    <s:SimpleMotionPath property="radiusY" />
                                </s:Animate>
                                <s:Resize duration="500" target="{this}"/>
                                <s:Fade duration="100" target="{mainContents}" alphaFrom="0" alphaTo="1"/>
                            </s:Sequence>
                        </s:Transition>
                        <s:Transition fromState="over" toState="normal" autoReverse="true">
                            <s:Sequence>
                                <s:Fade duration="100" target="{mainContents}" alphaFrom="1" alphaTo="0"/>
                                <s:Resize duration="500" target="{this}" />
                                <s:Animate duration="500" target="{bg}">
                                    <s:SimpleMotionPath property="radiusX" />
                                    <s:SimpleMotionPath property="radiusY" />
                                </s:Animate>
                            </s:Sequence>
                        </s:Transition>
            </s:transitions>
            • 3. Re: Transitioning a corner radius?
              Shongrunden Adobe Employee

              You can use a SimpleMotionPath to animate the properties on the the filter too.  Put an id on your filter then use an Animate like this:

               

              <s:Animate target="{myDropShadowFilter}">
                  <s:SimpleMotionPath property="distance" />
                  <s:SimpleMotionPath property="alpha" />
              </s:Animate>

              • 4. Re: Transitioning a corner radius?
                Handycam Level 1

                That is truly outstanding!  Many thanks!!

                 

                How do you transition a color?

                 

                When I try what I expected:

                <s:Animate duration="300" target="{bgFill}">
                  <s:SimpleMotionPath property="color" />
                </s:Animate>
                

                It animates, but through the hues.  In other words, a red Rect goes through pink and other colors before reaching pale yellow...

                 

                <s:SolidColor id="bgFill" color.normal="#FF0000" color.over="#F7F9DF"/>

                • 6. Re: Transitioning a corner radius?
                  Chet Haase Level 3

                  Use AnimateColor. Here's a quick tutorial:

                  http://graphics-geek.blogspot.com/2009/08/video-animatecolor-in-flex-4.html

                   

                  There's a bunch of other videos/tutorials on Flex 4 effect usage on that blog; you might want to check them out if you're starting to play with them or looking for the Big Picture on how things work.

                   

                  Chet.