MXML

Flex 4 Spark & Rollover Group Containing Rect

Was working on my top-secret Flex-based project over the weekend when I discovered something I hadn’t come across before.

The issue is that when you have a Spark Rect GraphicsElement within a Spark Group it seems that the rollover event of the group is triggered even though the mouse doesn’t roll over the Rect.

Here is a video I made to explain my issue on Twitter:

The code in the video is as follows:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"> 
 
	<s:Group rollOver="trace('ya')">
		<s:Rect x="100" y="100" width="20" height="20">
			<s:fill>
				<s:SolidColor color="0x00ff00" />
			</s:fill>
		</s:Rect>
	</s:Group> 
 
</s:WindowedApplication>

It turns out (after posting the issue on the Adobe Forums) that I was simply missing the “mouseEnabledWhereTransparent” property on the Group. Setting it to false causes the mouse to perform a hit-test rather than a simple bounds check. Thank you Mr Shongrunden for pointing this out to me :)

So this now works:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"> 
 
	<s:Group rollOver="trace('ya')" mouseEnabledWhereTransparent="false">
		<s:Rect x="100" y="100" width="20" height="20">
			<s:fill>
				<s:SolidColor color="0x00ff00" />
			</s:fill>
		</s:Rect>
	</s:Group> 
 
</s:WindowedApplication>

I hope this helps someone else out!

Trance Around The World, Show Downloader

Had this little idea a while back, thought I would spend an hour tonight and bash it out.

I love the Trance Around The World radio show by Above and Beyond, downloading  it for listening later is very annoying however and involves some fiddling with browser source and other things, so to make life easier I built this little tool. What it does is grab the HTML from the above and beyond page then parse it for the MP3 file, then it uses the FileReference class in flash to download it to your HD.

Anyways, enough jibber jabber. Source is enabled:

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

Hope you enjoy!

Resizeable Chromeless Window AIR

Thought I would share this little ditty. Been working in AIR recently and decided to make the window “chromeless” which means there are no controls so no resizing.

Thankfully however adobe provide the tools to allow for resizing the native window. So I produced this little mxml component to let you resize the window:

The coloured edges indicate where the application is draggable, including the white corner areas.

The component that lets you do this is pretty simple:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
 
<fx:Script>
<![CDATA[
import flash.display.NativeWindowResize;
import flash.events.MouseEvent;
 
import mx.managers.CursorManager;
public static const RESIZE_AREA : int = 10;
 
protected function onRollOver(event:MouseEvent):void
{
}
 
protected function onRollOut(event:MouseEvent):void
{
}
 
protected function onMouseDown(event:MouseEvent):void
{
var grp : Group = event.target as Group;
var resizeFrom:String = "";
 
if (grp==topSide){ resizeFrom=NativeWindowResize.TOP;	}
else if (grp==rightSide) { resizeFrom=NativeWindowResize.RIGHT; }
else if (grp==bottomSide) { resizeFrom=NativeWindowResize.BOTTOM; }
else if (grp==leftSide) { resizeFrom=NativeWindowResize.LEFT;	}
else if (grp==topLeft) { resizeFrom=NativeWindowResize.TOP_LEFT;	}
else if (grp==topRight) { resizeFrom=NativeWindowResize.TOP_RIGHT;	}
else if (grp==bottomRight) { resizeFrom=NativeWindowResize.BOTTOM_RIGHT;	}
else if (grp==bottomLeft) { resizeFrom=NativeWindowResize.BOTTOM_LEFT;	}
else { return; }
 
stage.nativeWindow.startResize(resizeFrom);
}
 
]]>
</fx:Script>
 
<s:Group id="topSide" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="0" width="{width}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xFF0000" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="rightSide" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="{width-RESIZE_AREA}" y="0" width="{RESIZE_AREA}" height="{height}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x00FF00" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="bottomSide" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="{height-RESIZE_AREA}" width="{width}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x0000FF" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="leftSide" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="0" width="{RESIZE_AREA}" height="{height}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="topLeft" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="0" width="{RESIZE_AREA}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="topRight" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="{width-RESIZE_AREA}" y="0" width="{RESIZE_AREA}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="bottomRight" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="{width-RESIZE_AREA}" y="{height-RESIZE_AREA}" width="{RESIZE_AREA}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="bottomLeft" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="{height-RESIZE_AREA}" width="{RESIZE_AREA}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
</s:Rect>
</s:Group>
 
</s:Group>

To use it in your app just add the component into your existing view somewhere:

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">
 
<components:WindowResizer width="{width}" height="{height}" alpha="0" buttonMode="true" />
 
</s:SkinnableContainer>

Setting the alpha to zero will obviously hide the coloured areas at the side of the window.

Grab the mxml here: WindowResizer.mxml

1 2 Scroll to top