实现组件的凹凸效果

来源：互联网发布：掰手腕知乎编辑：程序博客网时间：2024/05/04 00:05

组件的阴影效果，我想实现的效果是这样的，鼠标放上去，组件显示阴影，鼠标离开，阴影消失！

这里涉及到了rollOver和rollOut两个触发器，和背景颜色，边框的样式设置，阴影效果的应用。

背景颜色设置为白色，与组件例如Canvas的背景颜色一致，将borderStyle设置成solid，这是第一步；

第二步编写两个函数rollOverHandler(event:MouseEvent)和rollOutHandler(event:MouseEvent)，以便触发的时候调用，第三步编写具体的函数实现效果。

private function rollOverHandler(event:MouseEvent):void
{
setStyle("borderColor", "#CCCCCC");

setStyle("dropShadowEnabled", true);
buttons.visible = true;
}

        private function rollOutHandler(event:MouseEvent):void
        {
            setStyle("borderColor", "#FFFFFF");
            setStyle("dropShadowEnabled", false);
            buttons.visible = false;
        }

这是canvas应用效果的代码
<mx:Canvas
borderColor="#ffffff" borderStyle="solid"
xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100"
rollOver="rollOverHandler(event)"
rollOut="rollOutHandler(event)">