Animating the DataGrid component

Flash also lets you 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 you want to control small details or increase the speed of the animation.

Select File > New and choose Flash File (ActionScript 2.0).
Save the file as datagrid.fla.
Drag an instance of the DataGrid component onto the Stage, and give it the name my_dg.
Insert a new layer and rename it actions.
Make sure you place the actions layer above Layer 1.
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, which makes the easing animations 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).
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

You can also use the same properties (selectionEasing and selectionDuration) with the ComboBox, List, and Tree components.

Animating the DataGrid component

To add easing to the DataGrid component: