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.

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.