I'm new to Flex and am porting a pure Flash/AS3 app to Flex 4.5
I've created a custom MXML component based on BorderContainer
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="160" height="140" >
<s:Image id="_avatar" enableLoadingState="true"
x="0" y="0" width="160" height="120" />
<s:Label id="_username" x="0" y="125"
fontSize="12" fontWeight="bold" />
</s:BorderContainer>
I'm trying to add highlighting/growing effect on mouseOver
and "pressed down" effect on mouseDown to that component:
<fx:Script>
<![CDATA[
import flash.filters.*;
public static const SHADOW:Array = [ new DropShadowFilter(8,
80, 0x000000, 0.2, 32, 32, 1, 1, false, false, false) ];
public static const GLOW:Array = [ new GlowFilter(0xFFFF00,
0.5, 36, 36, 1, 1, false, false) ];
private var _oldScale:Number;
private function mouseOver(event:MouseEvent):void {
_oldScale = scaleX;
filters = GLOW;
}
private function mouseDown(event:MouseEvent):void {
_oldScale = scaleX;
scaleX *= 0.95;
scaleY *= 0.95;
filters = null;
}
private function mouseUp(event:MouseEvent):void {
scaleX = scaleY = _oldScale;
filters = GLOW;
}
private function mouseOut(event:MouseEvent):void {
scaleX = scaleY = _oldScale;
filters = SHADOW;
}
Unfortunately those methods aren't called at all.
In pure Flash/AS3 app I'd call
addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
addEventListener(MouseEvent.CLICK, handleMouseClick);
and it would work well, but here in Flex 4.5 I don't know how to do this.
Also I've noticed that there is a dropShadowVisible="true" attribute, but not sure if/how it can be used for my purposes.
And I'm not sure if scaling up/down a custom component is allowed in flex or I probably should use "Flex Effects" (but how?) and also set disableLayout="true"?