tags:

views:

14

answers:

0

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>