About Applying Easing Methods to Version 2 Components

Another use for the various easing methods is to apply them on version 2 components. Note that you can apply the easing methods only to the following components: Accordion, ComboBox, DataGrid, List, Menu and Tree. Each of the components allows different customizations using the easing methods. For example, the Accordion, ComboBox and Tree components enable you select an easing class to use for their respective open and close animations. By contrast, the Menu component only enables you to define the number of milliseconds that the animation takes.

Applying Easing Methods to an Accordion Component

This example shows you how to add an Accordion component to a Flash document, add a few children screens and change the default easing method and duration. If you decide to use this code in an actual project, you will probably want to reduce the value of the openDuration property, because really slow animations tend to annoy users when they open and close the accordion.

Follow these steps to apply a different easing method to the Accordion component:

1. Create a new Flash document and save it as accordion.fla.
2. Drag a copy of the Accordion component onto the Stage and give it the instance name my_acc in the Property inspector.
3. Insert a new layer above Layer 1 and rename it actions.

4. Add the following ActionScript to frame 1 of the actions layer:

   import mx.transitions.easing.*;
    my_acc.createChild(mx.core.View, 
     "studio_view", {label:"Studio"});
    my_acc.createChild(mx.core.View, 
     "dreamweaver_view", {label:"Dreamweaver"});
    my_acc.createChild(mx.core.View, 
     "flash_view", {label:"Flash"}); 
   my_acc.createChild(mx.core.View, 
     "coldfusion_view", {label:"ColdFusion"});
    my_acc.createChild(mx.core.View, 
     "contribute_view", {label:"Contribute"}); 
   my_acc.setStyle("openEasing", Bounce.easeOut);
    my_acc.setStyle("openDuration", 3500);
    

   This code imports the easing classes, so you can type Bounce.easeOut instead of referring to each of the classes with fully-qualified names like mx.transitions.easing.Bounce.easeOut. Next, you add five new child panes to the Accordion component (Studio, Dreamweaver, Flash, ColdFusion, and Contribute). The final two lines of code set the easing style from the default easing method to Bounce.easeOut, and set the length of the animation to 3500 milliseconds (3.5 seconds).

5. Save the document, and then select Control > Test Movie to preview the file in the test environment.
6. Click each of the different header (title) bars to view the modified animations, and switch between each pane. If you want the animation to increase its speed, decrease openDuration from 3.5 seconds to a smaller number. The default duration for the animation is 250 milliseconds, or a quarter of a second.

Applying Easing Methods to the ComboBox

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

1. Create a new Flash document and save it as combobox.fla.

2. Drag a copy of the ComboBox component from the Components panel onto the Stage. Select the component, and then press the Backspace or Delete key to delete it from the Stage.

   Note: Although you remove the component from the Stage, the component still remains in the current document’s library.

3. Insert a new layer and rename it actions. Make sure the actions layer is above Layer 1.

4. Add the following ActionScript to frame 1 of the actions layer:

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

   The this keyword in the second line of code refers to the main Timeline of the SWF file. 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. 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 Macromedia 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: Like earlier examples, you import the easing classes, which enable you to use the shortened version of the class name instead of using the fully qualified class name of mx.transitions.easing.Elastic.easeOut.

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

6. Click the ComboBox component on the Stage to animate your dropdown list of product names using the specified easing class.

   Note: Just because you can use an easing method such as Elastic or Bounce for your ComboBox or Accordion components doesn’t mean you should. 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 project.

Animating the DataGrid

Flash MX Professional also enables you to tweak the animations you use when you select items in a component (such as the DataGrid, Tree, ComboBox or List components). Although the animations are subtle, in some cases it is nice to be able to control small details or just speed up the animation. For an example, follow these steps:

1. Create a new Flash document and save it as datagrid.fla.
2. Drag an instance of the DataGrid component onto the Stage and give it the instance name my_dg.
3. Insert a new layer and rename it actions. Make sure you place the actions layer above Layer 1.

4. Add the following ActionScript to the actions layer:

   import mx.transitions.easing.*;
    my_dg.setSize(320, 240);
    my_dg.addColumn("product");
    my_dg.getColumnAt(0).width = 304;
    my_dg.rowHeight = 60;
    my_dg.addItem({product:'Studio'});
    my_dg.addItem({product:'Dreamweaver'}); 
   my_dg.addItem({product:'Flash'});
    my_dg.setStyle("selectionEasing", Elastic.easeInOut);
    my_dg.setStyle("selectionDuration", 1000);  

   This ActionScript imports the easing classes, and resizes the component instance on the Stage to 320 pixels (width) by 240 pixels (height). Next, you create a new column named product, and resize the column to 304 pixels (width). The data grid itself is 320 pixels wide, although the scroll bar is 16 pixels wide, which leaves a difference of 304 pixels. Then you set the row height to 60 pixels high, so the easing animations are easier to see.

   The next three lines of ActionScript add items to the data grid instance so you can click and see the animations. Finally the selectionEasing and selectionDuration properties are set using the setStyle() method. The easing method is set to Elastic.easeInOut and the duration is set to 1000 milliseconds (one second, which is five times longer than the default value of 200 milliseconds).

5. Save the document and select Control > Test Movie to view the result in the test environment. When you click an item in the DataGrid instance, you see the selection ease in and out using the elastic effect. The animation should be easy to see because the duration is significantly increased.

   Note: The same properties (selectionEasing and selectionDuration) can also be used with the ComboBox, List, and Tree components.