So You clicked mouse outside your target .. How to detect it - Flex

by Deepak Dhakal 11. June 2009 09:31


In ActionScript3 event driven programming plays a major part with mouse or key pressed and even a text field having events associated with them. Events indicate action e.g. mouse press corresponds to “mouse down” event and vice versa is “mouse up” event.

To check if mouse release (mouseUp -Event.MOUSE_UP)) has happened on the target object on which mouse down - Event.MOUSE_DOWN took place or a “mouse up outside “event when mouse up has not happened on the target object; there is no predefined event with AS3 unlike its earlier versions that had “onReleaseOutside event”.

To resolve this, we need to add stage event handler for mouse up in mouse down event handler. By adding stage event handler for mouse up will detect any global mouse up event. Hence it will check if the event associates the target object that has mouse down event earlier or it was a mouse up outside event not related with the target object.

Package {
Import flash.display.DisplayObject;
import flash.events.*;

public var child: DisplayObject = new DisplayObject ();
public function childdown(event:MouseEvent):void
{
// mouse up event happens only when there is mouse down
trace("child mouse down");
stage.addEventListener(MouseEvent.MOUSE_UP,childUpOutside);
}

Public function childUpOutside (event:MouseEvent):void
{
if (event.target != child)
{
trace("child mouse up outside");
}
stage.removeEventListener(MouseEvent.MOUSE_UP, childUpOutside);
}
}

Tags:

Flex

Flex: Mouse Move Event and Slow Rendering

by Deepak Dhakal 4. June 2009 11:12

In flex, if you using Mouse move event to redraw anything .. You might have experienced very slow rendering .

eg:

this.addEventListener(MouseEvent.MOUSE_MOVE, redraw);

and

    public function redraw(anything:Object=null):void{
            //draw something here
                this.graphics.clear();
                this.graphics.lineStyle(3, 0x000000);
                this.graphics.moveTo(startPoint.x, startPoint.y);
                this.graphics.lineTo(endPoint.x, endPoint.y);
                this.scaleTextInput.x = centerPoint.x;
                this.scaleTextInput.y = centerPoint.y;
           
        }

The Above code results very slow rendering ...

Solution:

Use Event.ENTER_FRAME event instead? Although more resource intensive than the mouse move event, you should receive considerably more updates per second, allowing the mouse to appear more responsive to the user:

Eg:

this.addEventListener(Event.ENTER_FRAME, redraw);   instead of 

this.addEventListener(MouseEvent.MOUSE_MOVE, redraw);

and You are good to go ..Happy Flexing

Tags:

Flex

Flex Tooltip Animation

by Deepak Dhakal 3. June 2009 06:56

So you want to show some animation to show tooltip when U hover over something ? Here is an example that shows a rotating tooltip

Change as you want ..

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/04/adding-animations-and-effects-to-flex-tool-tips/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;

private function init():void {
ToolTipManager.hideDelay = 2000;
ToolTipManager.showEffect = rotate;
ToolTipManager.hideEffect = zoom;
}
]]>
</mx:Script>

<mx:Style>
@font-face {
src: url("./fonts/arial.ttf");
fontFamily: "ArialEmbedded";
}

ToolTip {
fontFamily: ArialEmbedded;
}
</mx:Style>

<mx:Rotate id="rotate" />
<mx:Zoom id="zoom" />

<mx:Button label="Roll over me to see magic"
toolTip="Sorry No Magic..." />

</mx:Application>



Tags:

Flex

Powered by BlogEngine.NET 1.5.0.7 - Old School Theme by n3o Web Designers