Tuesday
20Jan2009

Air TilieList drag bug workaround

DateTuesday, January 20, 2009 at 4:45PM

This fix (more of a workaround really) is regarding a bug raised here

http://bugs.adobe.com/jira/browse/SDK-14156

In Air (even v1.5), when an item is dragged from a TileList, the image data is not visible in the drag icon.

To circumvent the issue I created a ListItemDragProxyPro class which allows us to create a custom drag icon for use with the TileList.

Since the drag proxy is completely custom I added a selection counter in the corner (the CircleIndicator component).

Here is an image of what it looks like.

 

To test this for yourself please feel free to view source and use it for your own projects.

View Source (a .air package is also included with the source)

If you have any questions about the code let me know and I'll go into it in more detail.

AuthorAlex Peretti | Comment1 Comment |
in ,
Tuesday
20Jan2009

Mouse events outside the browser window

DateTuesday, January 20, 2009 at 2:58PM

The mouseX and mouseY values are not accurate outside of the web browser window (in Flex or Flash applications), the values stop at the boundaries of the stage.

However, the values do get updated if the mouse button is down. Which is an important thing to notice when creating scrollbars for a Flash application or any draggable UI element.

The other thing to notice is that MOUSE_UP events do not fire outside of the browser window, and the buttonDown property of MouseEvents stay set to buttonDown == true, even though the button was depressed outside the window.

To solve this issue, we can track the MOUSE_LEAVE event, this event usually gets fired when the cursor leaves the stage. But if the mouse button is down, the event gets fired on MOUSE_UP.

No it doesn't make a huge amount of sense but it does work in Flash and Flex, flash player v9 and v10 (probably in previous versions too).

This means that when MOUSE_LEAVE is fired, we can compare the mouse position with the stage size to determine whether the mouse button was depressed outside the browser window.

Play with the example and view the source to see how this works in more detail.

View Source
AuthorAlex Peretti | Comment2 Comments |
in ,
Tuesday
20Jan2009

Flex component clipContent problems and mask gotchas

DateTuesday, January 20, 2009 at 10:22AM

The clipContent property of Flex component doesn't always work as it should, especially when the content which needs clipping is in the negative x and y range.

Drag and move the black box outside of the blue square, and you will see that the clipping doesn't come into play until you release the mouse. 

View Source

This was a big problem for my application UI so I figured I would use the mask property of the component. Well it works.... kinda. There are a couple of gotchas I would like to highlight here.

1) Make sure the DisplayObject which will act as a mask is a child, of the DisplayObject being masked

2) If you are using Flex component such as Canvas to do the masking, make sure it has a backgroundColor set otherwise the mask will not be applied properly.

Furthermore, if you simply want to emulate what clipContent does, it's best to use scrollRect. scrollRect will perform much quicker than setting a mask.

Click the "enable scrollRect" button in the example above and move the black box again to see the difference.

AuthorAlex Peretti | Comment2 Comments |
in
Wednesday
07Jan2009

Welcome

DateWednesday, January 7, 2009 at 2:24PM

This is a blog about technology, the web and the Flash platform.

AuthorAlex Peretti | CommentPost a Comment |