Changing Selection Indicator in Datagrid
add Tween, alpha, shape, etc.
So I was recently working on a project, and the client wanted to have a different effect on the DataGrid's selection indicator. He said that he wanted the indicator to fade rather than the default "hard" appear. After doing some digging, I found a post about changing the List Selection indicator which was pretty close to what I needed, but this was for a TileList. The good news is that DataGrid inherits from the List base class, and the List Selection indicator methods are in there as well. Sound easy!
The two methods in question are the drawSelectionIndicator() and drawHighlightIndicator() in the ListBase.as class. If you override these two methods, you can create some pretty cool effects. Here is an example of implementing a Tweener fade, and setting the final alpha to 50%:
override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color,.25);
g.drawRect(0,0,width,height);
g.endFill();
indicator.x = x;
indicator.y = y;
}
override protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color,.5);
g.drawRect(0,0,width,height);
g.endFill();
indicator.x = x;
indicator.y = y;
indicator.alpha = 0;
Tweener.addTween(indicator,({alpha:.5, time:1, transition:"easeOutCubic"})); }
package com.swfflex
{
import caurina.transitions.*;
import flash.display.Graphics;
import flash.display.Sprite;
import mx.controls.DataGrid;
import mx.controls.listClasses.IListItemRenderer; public class DataGridEx extends DataGrid
{ override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color,.25);
g.drawRect(0,0,width,height);
g.endFill();
indicator.x = x;
indicator.y = y;
}
override protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color,.5);
g.drawRect(0,0,width,height);
g.endFill();
indicator.x = x;
indicator.y = y;
indicator.alpha = 0;
Tweener.addTween(indicator,({alpha:.5, time:1, transition:"easeOutCubic"})); }
override protected function clearHighlightIndicator(indicator:Sprite, itemRenderer:IListItemRenderer):void{
if(highlightIndicator)
Tweener.addTween(indicator,({alpha:0, time:1, transition:"easeOutCubic", onComplete:function():void{Sprite(highlightIndicator).graphics.clear()}}));
} }
}
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
No comments found.