show border on rollover and select the thumb on click and unselect pre selected thumb

Question

I have some small canvas, and i have to show border around them, i did that using rollover and rollout evenets, (these canvas hold product images), here rollover and rollout are working perfectly fine, but when a user clicks on some canvas, it has to be selected, means it has show the border around it, and rest canvas should work as normal. but when i select another canvas the previously selected canvas should get unselected and new clicked canvas gets the selection,

but the problem which is coming the rollOut event which is applied on canvas, on a click the canvas get selected, but when rollOut takes place it unselect the canvas, i even removed the rollOut listner on the click of a canvas, but in that case, the clicked canvas will not get unselected , when other canvas will be clicked

can.addEventListener(MouseEvent.ROLL_OVER,onRollOverThumb);
can.addEventListener(MouseEvent.ROLL_OUT,onRollOutThumb);
//can.addEventListener(MouseEvent.CLICK,onRollOverThumb);


private function onRollOverThumb(event:MouseEvent):void
{
 event.target.setStyle('borderColor','0x000000');
    event.target.setStyle('borderThickness','3');
    event.target.setStyle('borderStyle','solid');
}


private function onRollOutThumb(event:MouseEvent):void
{
  event.target.setStyle('borderColor','0xCCCCCC');
  event.target.setStyle('borderThickness','1');
  event.target.setStyle('borderStyle','solid');
}

i hope some thing are clear in this, does n e one has worked on this, please reply

Thanks in advance

Ankur sharma

Answer 1

What about implementing a "flag" variable that is set to true when the click occurs. Then, when the ROLL_OUT occurs, check if the flag is true or false. If true, don't do anything, if false, remove/change the border.

Answer 2

private function onRollOverThumb(event:MouseEvent):void
            {
                if(event.type=='click')
                {
                    for(var j:int=0;j<viewparent.numChildren;j++)
                    {
                        viewparent.getChildAt(j).name="false";
                    }
                    event.currentTarget.name="true";
                    for(var i:int=0;i<viewparent.numChildren;i++)
                    {
                        if(viewparent.getChildAt(i).name=="true")
                        {
                            Canvas(viewparent.getChildAt(i)).setStyle('borderColor','0x000000');
                            Canvas(viewparent.getChildAt(i)).setStyle('borderThickness','3');
                            Canvas(viewparent.getChildAt(i)).setStyle('borderStyle','solid');
                        }
                        else
                        {
                            Canvas(viewparent.getChildAt(i)).setStyle('borderColor','0xCCCCCC');
                            Canvas(viewparent.getChildAt(i)).setStyle('borderThickness','1');
                            Canvas(viewparent.getChildAt(i)).setStyle('borderStyle','solid');
                        }
                    }       
                }
                else
                {
                    event.currentTarget.setStyle('borderColor','0x000000');
                    event.currentTarget.setStyle('borderThickness','3');
                    event.currentTarget.setStyle('borderStyle','solid');
                }
            }
            private function onRollOutThumb(event:MouseEvent):void
            {
                if(event.currentTarget.name=="false")
                {
                    event.currentTarget.setStyle('borderColor','0xCCCCCC');
                    event.currentTarget.setStyle('borderThickness','1');
                    event.currentTarget.setStyle('borderStyle','solid');
                }
            }

i modified my own code, added one name property to the canvases

can.name="false"

and it's now working,

can n e one tell me, how to put some select and unselect(kind of fade effect) on the border, when the black selection get removed, it shld be removed in some fade manner, can we apply fade effect on border?