Implementing Slide effects – iteration 3

This post is a continuation of iteration 2. From the end user point of view Slide effects presented here are almost identical to these from previous post. The only difference is that target components shadow or other filter drawn beside components bounds (0,0 to width, height rectangle) are not cropped during slide animation.

A number of changes was required to implement this functionality:

Determining components visible bounds

First of all actual components visible bounds have to be determined. I have found code to do that in private function of MaskEffectInstance class from Flex 3 framework. As I believe that such code shouldn’t be rewritten every time someone need it I have created utility class named ComponentUtils and copied code from MaskEffectInstance to a public static function.

Knowing what are the visible bounds of the component I have discovered that x and y coordinate of visible rectangle are often negative (when filter is drawn at the left or above component). According to DisplayObjec documentation when scrollRect property is set the visible area upper-left corner is defined by components (0,0) point. So to enable displaying of filtered component (e.g. shadow) at the left or above component I had to move component there and back as described in next two paragraphs.

Moving component (up/left) so that its origin (0,0 point) equals to visible rectangle upper-left corner

To move component origin to visible rectangle origin I have adjusted its x and y coordinates in effect instance play() function:

target.x += visibleRect.x;
target.y += visibleRect.y

I have also remembered to restore component to its original position at effect end (onTweenEnd() function):

target.x -= visibleRect.x;
target.y -= visibleRect.y

Moving component content back (down/right) so that it is displayed at the original location

To balance component movement I have adjusted scrollRect x and y coordinates in concrete effect instance onTweenUpdate functions. If these values are set to negative values (visible rectangle x,y) component is moved right-down. After applying this changes effect seems to work as before but shadows are visible.

The following example demonstrates all SlideRight, SlideLeft, SlideDown and SlideUp effects.
View source is enabled, you can download zipped sources from here.

The following example demonstrates SlideDown and SlideUp effects applied to a VBox with DropShadowFilter enabled.
View source is enabled, you can download zipped sources from here.

Share on Google+Share on FacebookShare on LinkedInPin on PinterestTweet about this on Twitter

8 thoughts on “Implementing Slide effects – iteration 3”

  1. Hey,

    I really like the look of this effect but unfortunately I’m having some difficulties using it. As per your examples, I create the slide left/right effects, then bind them to the showeffect and hideeffect properties of a regular panel. I then bind the ‘visible’ property to a toggle button, just like your examples. When I click the button though, after a second or two, then panel just appears — without animation. I’m sure it’s something stupid but for the life of me I can’t figure it out!

    Any ideas where to start looking?


  2. Hi Justin,

    Unfortunately I can’t give you solution to your problem since I can’t reproduce it.

    You can try using standard Flex WipeLeft/WipeRight effects and see if it is a general problem with effects or problem with my Slide effect. Your problem may have something to do with sizing and layout, try setting explicit (not percent) size of your panel.

    If you think that you have found a bug in my Slide effect create an issue at attaching the source code needed to reproduce the bug.

    Also make sure that you are using the latest version of Slide effect from


  3. The effect doesn’t work if you slide the component from left to right initially and then do a right to left.

    Image source=”@Embed(source=’assets/Nokia_6630.png’)”
    hideEffect=”{slideRight}” showEffect=”{slideLeft}”

    The above code doesn’t work

  4. Thanks, it worked for me but it allocates the space to the VBox even when it is hidden. Is there a way to do that since I wanted to use the sliding panel to get more real estate.

  5. You can do what I did: Since you aree setting visible, also set includeInLayout at the same time (false to redeem unused space, true to take the space.)

Leave a Reply

Your email address will not be published. Required fields are marked *