Shout-out: say hi at FITC! I look like this.
Hand Me That Cursor, Would You?
By Roger Braunstein | on April 13, 2007
In AS3, Flash, Programming | 8 Comments
Today I’d like to talk about a basic technique that’s a little deceptive when migrating from AS2 to AS3: creating a clickable button from a Sprite or MovieClip.
So you create a new Sprite or custom view class that subclasses Sprite. For purposes of argument, here’s a simple button class:
package
{
import flash.display.Sprite;
import flash.filters.BevelFilter;
public class CustomButton extends Sprite
{
public function CustomButton(width:Number = 100, height:Number = 20)
{
super();
graphics.beginFill(0xaaaaaa);
graphics.drawRoundRect(0, 0, width, height, 6, 6);
graphics.endFill();
filters = [new BevelFilter(2)];
}
}
}
Then you do two things new to AS3. You add it to your display list, and you attach an event listener:
var button:CustomButton = new CustomButton(); addChild(button); button.addEventListener(MouseEvent.CLICK, onButtonClick);
You’ll notice that (if you do something in onButtonClick) the button is functional. But the problem is: no hand cursor! What the devil?
For a second let’s recall AS2. To get our little pointy finger cursor, all we had to do was add an onRelease callback to the MovieClip or MovieClip subclass. The code above proves the analog of this in AS3 does not apply. We didn’t automatically get a hand cursor by virtue of adding a CLICK listener.
Remember, though, in AS2, there was a property on MovieClips called useHandCursor? Setting this to false could disable the hand cursor on that object. Well, Sprites and MovieClips still have this property in AS3. You might think: why not set this to true? Unfortunately, that’s not it either.
The proper way to make a Sprite/MovieClip show the system hand cursor when the mouse is over it is to use the new buttonMode property. See it in LiveDocs here.
buttonMode tells a Sprite if it should behave like a button or not. It defaults to false: even if you have event listeners set on the Sprite, it will not behave like a button. You need to manually set buttonMode to true.
“Behaving like a button” means three things.
- The system hand cursor is used.
- The item appears in the tab order.
- When the item has tab focus and you press space, it broadcasts the CLICK event.
- (Minor) if you have _over, _up, and _down frame labels they will be used as button states.
As far as hand cursors go, useHandCursor can control whether the hand cursor is used with the object or not, but it means nothing if buttonMode is not set.
tabEnabled can set whether the item appears in the tab order. This property doesn’t require buttonMode to be true to take effect. In other words, you can have something in the tab ordering without it needing to be a button. But remember, without buttonMode, when you tab to the item and press space, it won’t trigger a CLICK event.
Some problems we run into: If your clickable object contains anything else clickable, the target of those events will be the inner object. Furthermore, if you have a TextField inside of a button mode Sprite, the mouse cursor won’t appear as a hand cursor above that TextField, even if you have no event listeners on it and it’s not selectable. You can see this in the demonstration below. Try clicking inside the flash movie and tabbing around as well. The button mode button inside button 1 (on the left) is getting in the tab order, and the text field inside button 2 (on the right) is stealing the cursor type.
In order to fix these issues, if they are indeed problematic, you can use these additional properties of InteractiveObject and DisplayObjectContainer.
tabEnabled- Whether this item can be tabbed to.
tabChildren- Whether the children of this item can be tabbed to.
mouseEnabled- Whether this item accepts mouse events.
mouseChildren- Whether the children of this item accept mouse events.
By setting mouseChildren to false, you can treat any complex compositions of objects as one mouse target, even if the inner items would otherwise be clickable.
Play around with the example to see how these properties can affect the mouse cursor, ability to be tabbed to, and the target of events.
In short: buttonMode makes a Sprite a button. useHandCursor is only meant to override behavior set by buttonMode. You can also make buttons by extending the SimpleButton class.
Logging to a File in Apollo
By Roger Braunstein | on April 10, 2007
In AIR, Flex, Programming | 1 Comment
Since Apollo apps will be run as standalone desktop applications, logging to trace output or a LocalConnection won’t really be useful once the app is installed on the end-user’s machine. It would be great to log (a responsible amount) (if you want) to the resource directory of that application itself. And it would be nice to be able to use built in logging to do so.
Well, I don’t know why this wasn’t included with Apollo, but it was certainly easy enough to add in. :) I created com.partlyhuman.apollo.logging.FileTarget so you can use the Flex logging framework while logging to a file. It supports all the options of TraceTarget (livedocs), and you can also (optionally) specify a custom filename to log to, or force it to append log output across sesssions.
Here’s how you might put in a file logging target in MXML:
<logging:FileTarget
filename="error.log"
append="false"
level="{LogEventLevel.ERROR}"
includeDate="true"
includeTime="true"
includeCategory="true"
includeLevel="true"/>
That’s showing off a lot of the options. You could just do <logging:FileTarget/> and all would be fine. And if you haven’t checked out logging in Flex, it’s pretty nice (livedocs). All logging events have a category, so you get a logger for that category then call the appropriate level on it, or call log with the level as an argument. For example:
Log.getLogger("com.partlyhuman.demoapp.MainController").error("initialization failed!");
Log.getLogger("com.partlyhuman.demoapp.Bubble").info("bubble popped!");
You don’t have to be so verbose in your categories, but that’s one way to use it.
This is gonna totally become like, a thing, but… happy logging!
com.partlyhuman.apollo.FileTarget View Source | Download (.as, 3k)