Applying easing methods to the ComboBox component

The process to change the default easing method on a ComboBox component is similar to the example in Applying easing methods to an Accordion component where you modify the Accordion component's animation. In the following example, you use ActionScript to dynamically add the component to the Stage at runtime.

Select File > New and choose Flash File (ActionScript 2.0).
Save the file as combobox.fla.
Drag a copy of the ComboBox component from the Components panel to the current document's library.

NOTE

The component appears in the library (not on the Stage) and is available to the SWF file at runtime.
Insert a new layer and rename it actions.
Make sure the actions layer is above Layer 1.

Add the following ActionScript to Frame 1 of the actions layer:

import mx.transitions.easing.*;
this.createClassObject(mx.controls.ComboBox, "my_cb", 20);
var product_array:Array = new Array("Studio", "Dreamweaver", "Flash", "ColdFusion", "Contribute", "Breeze", "Director", "Flex");
my_cb.dataProvider = product_array;
my_cb.move(10, 10);
my_cb.setSize(140, 22);
my_cb.setStyle("openDuration", 2000);
my_cb.setStyle("openEasing", Elastic.easeOut);

After you import each of the easing methods, which occurs in the first line of code, the createClassObject() method creates an instance of the ComboBox component. The keyword this in the second line of code refers to the main of the SWF file. This line of code puts the component on the Stage at runtime and gives it the instance name my_cb.

Next, you create an array named product_array that contains a list of Adobe software. You use this array in the following line of code to set the dataProvider property to the array of product names. Then you use the setSize() method to resize the component instance, set openDuration to 2000 milliseconds (2 seconds), and change the easing method to Elastic.easeOut.

NOTE

As with earlier examples, you import the easing classes, which let you use the shortened version of the class name instead of using the fully qualified class name of mx.transitions.easing.Elastic.easeOut.

Save the current document, and select Control > Test Movie to view the document in the test environment.

Click the ComboBox component on the Stage to use the specified easing class to animate your drop-down list of product names.

NOTE

Use an easing method such as Elastic or Bounce for your ComboBox or Accordion components with care. Some users might find it distracting if your options take a long time to stop moving before they can read and select from the menu. Test your individual applications and settings, and decide whether the easing methods enhance or detract from your Flash document.

Applying easing methods to the ComboBox component

To apply easing methods to a ComboBox component: