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.

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

This implementation has one shortcoming, components are cropped to its width/height so if they have drop shadow or other filters enabled it may not be visible during animation. I will create Slide effect supporting filters in iteration 3.

If you simply want to use slide effect in your application you don’t have to read whole this tutorial. Simply download sources, open included examples and you will surely understand how to use it.

I have divided this tutorial into three parts (posts):

• iteration 1 – Simple SlideDown effect (this article)
• iteration 2 – Extracting Slide base class and implementing slide effect in 4 directions
• iteration 3 – Adding filter support e.g. DropShadowFilter

Background

Recently I needed to create a custom dropdown component, something like ComboBox but containing form instead of list inside dropdown. My first idea was to extend ComboBase, unfortunately it is more about handling list than about displaying dropdown so it was of no use in my case. Finally I decided to create my component from scratch. After some playing with PopUpManager I have my component almost ready, the only thing I needed was cool slide effect to animate showing and hiding of the dropdown.

I was pretty sure that there is such effect in Flex 3 framework since ComboBox and ColorPicker is using it. Disappointment again, both ComboBox and ColorPicker have their own implementations embedded into their code (personally I think that such code duplication is a reason of numerous bugs in Flex 3). So again I decided to create my own component from scratch – Slide effect this time.

I have divided this task into 3 iterations each covered by separate post.

Iteration 1 – Simple SlideDown effect

My first thought was to create SlideDown by combining Move effect(downward) with WipeUp but then I realized that WipeUp is not working as expected together with DropShadowFilter which I was using so I have to think about something else.

After some digging in reference documentation I have found DisplayObject.scrollRect property which does exactly what I needed. Although it is intended to support scrolling it is perfect for Slide effect implementation: scrollRect x and y properties can be used to animate the move while width/height can be used to crop component.

Implementation of new effect using TweenEffect as a base class was really straightforward. I will not describe it here in more details since there is nice doc about tween effect at http://livedocs.adobe.com/flex/3/html/help.html?content=createeffects_3.html

There are two flaws in this document, both refers to effect instance class play() function:

• Tween object created in this function should be assigned to TweenEffectInstance.tween public property not to local variable.
• To avoid flickering at the beginning of effect call to mx_internal::applyTweenStartValues() is needed (I know that using mx_internal functions is not recommended but this function is not harmful at all and probably was marked mx_internal by accident).

You can see complete code of my play() function below:

override public function play():void {
    super.play();

    // backup scrollRect value
    scrollRect = target.scrollRect;

    width = target.width;
    height = target.height;

    // We are tweenning two values: one from 0 to width, the other from 0 to height
    tween = createTween(this, [0, 0], [width, height], duration);

    // Call to this function is needed to prevent filckering at effect start
    // I have no idea why this function is mx_internal
    mx_internal::applyTweenStartValues();
}

I have also implemented additional initEffect() function to enable my effect to automatically detect correct showTarget value when used as “showEffect” “hideEffect”etc. You can find code of this function below.

override public function initEffect(event:Event):void
{
	super.initEffect(event);

	// if showTarget is not explicitly set assign default value dependent on event type
	if (!_showExplicitlySet)
	{
		switch (event.type)
		{
			case FlexEvent.CREATION_COMPLETE:
			case FlexEvent.SHOW:
			case Event.ADDED:
			{
				showTarget = true;
				break;
			}

			case FlexEvent.HIDE:
			case Event.REMOVED:
			{
				showTarget = false;
				break;
			}
		}
	}
}

This example demonstrates SlideDown effect compared to WipeDown.
View source is enabled, you can download zipped sources from here.