title: Adding mouseOver/mouseDown/mouseUp/etc. to custom MXML component
body: <p>I'm new to Flex and am porting a pure Flash/AS3 app to Flex 4.5</p>
  
  <p>I've created a custom MXML component based on <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/BorderContainer.html" rel="nofollow">BorderContainer</a> </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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" &gt;
  
      &lt;s:Image id="_avatar" enableLoadingState="true" 
          x="0" y="0" width="160" height="120" /&gt;
  
      &lt;s:Label id="_username" x="0" y="125" 
          fontSize="12" fontWeight="bold" /&gt; 
  
  &lt;/s:BorderContainer&gt;
  </code></pre>
  
  <p>I'm trying to add highlighting/growing effect on mouseOver</p>
  
  <p>and "pressed down" effect on mouseDown to that component:</p>
  
  <pre><code>&lt;fx:Script&gt;
      &lt;![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;
          }
  </code></pre>
  
  <p>Unfortunately those methods aren't called at all.</p>
  
  <p>In pure Flash/AS3 app I'd call</p>
  
  <pre><code>        addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
          addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
          addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
          addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
          addEventListener(MouseEvent.CLICK, handleMouseClick);
  </code></pre>
  
  <p>and it would work well, but here in Flex 4.5 I don't know how to do this.</p>
  
  <p>Also I've noticed that there is a <strong>dropShadowVisible="true"</strong> attribute, but not sure if/how it can be used for my purposes.</p>
  
  <p>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 <strong>disableLayout="true"</strong>?</p>