i have customized Horizontal List (items are image and some text) of a reel with some no of clips . i have customized highlight , un highlight and select style , which will be implemented dynamically and mouse over and out. now pproblem is to make un highlight previously playing clip.
<mx:HorizontalList id="clipsRepeater" dataProvider="{clipsInfo}" columnCount="5" width="725" height="178" horizontalScrollPolicy="off"
mouseOver="tableMouseUp();" useRollOver='false' selectionColor="#ffffff" color="0x323232" itemClick="clickClip(event.currentTarget.selectedIndex)" paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5" >
<mx:itemRenderer>
<mx:Component>
<mx:HBox buttonMode="true" width="140" height="155"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
styleName="unhighlightedClip" updateComplete="currentlyPlaying();" rollOver="highlighted();" rollOut="unhighlighted();">
<mx:Style>
.currentlyPlayingClip{
borderColor: #95123E;
borderStyle: solid;
borderThickness: 2;
}
.unhighlightedClip{
borderStyle: none;
}
.highlightedClip{
borderColor: #70BAE7;
borderStyle: solid;
borderThickness: 2;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.HorizontalList;
private var prevIndex:int = -1;
protected function unhighlighted():void{
var selected:Boolean = HorizontalList(this.owner).isItemSelected(this.data);
clipDesription.useHandCursor = false;
clipStartTime.useHandCursor = false;
this.useHandCursor = false;
if(!selected)
this.setStyle('styleName', 'unhighlightedClip');
}
protected function highlighted():void{
clipDesription.useHandCursor = true;
clipStartTime.useHandCursor = true;
this.useHandCursor = true;
var selected:Boolean = HorizontalList(this.owner).isItemSelected(this.data);
if(!selected)
this.setStyle('styleName', 'highlightedClip');
}
protected function currentlyPlaying():void{
var selected:Boolean = HorizontalList(this.owner).isItemSelected(this.data);
var currentIndex:int = HorizontalList(this.owner).selectedIndex;
if(selected)
this.setStyle('styleName', 'currentlyPlayingClip');
// else if(prevIndex != currentIndex )
// this.setStyle('styleName', 'unhighlightedClip');
//
// prevIndex = currentIndex;
}
]]>
</mx:Script>
<mx:Spacer width="2" buttonMode="true"/>
<mx:VBox height="100%">
<mx:Image id="tnumbNailImage" source="{data.thumbNailPath}" width="120" height="80" horizontalAlign="center" top="5"/>
<mx:Text id="clipDesription" htmlText="{data.description}" width="120" height="45" />
<mx:Text id="clipStartTime" htmlText="{data.formatedTime}"/>
</mx:VBox>
<mx:Spacer width="2" buttonMode="true"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>