Implementing SlideDown effect – iteration 1

This tutorial describes how to create reusable effect which can be applied both by calling play() function and by binding it to showEffect/hideEffect MXML attribute.

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.