Getting rid of component its focus rectangle with global styles

[Ruben]

Good day to all,

I'm kinda stuck on this one; I need to hide the green focus rectangle that's drawn around my scrollpane component when it receives focus. I know I could do this this way:

myScrollpane.drawFocus = false;

But the thing is there are a real bunch of scrollpanes in different swf's that shouldn't display the rectangle thing and I don't really want to place this line of script for each and every scrollpane-component, so I was thinking about doing it using _global.styles, however I wasn't able to find any property for the styles-thing that could get rid of the focusrectangle...

I'd be really really thankfull if anybody could help me out with this...

- Ruben

[Xeef]

Creating a custom RectBorder implementation
The RectBorder class is used as a border skin in most ActionScript 2.0 components. The default implementations in both the Halo and Sample themes use ActionScript to draw the border. A custom implementation must use ActionScript to register itself as the RectBorder implementation and provide sizing functionality, but can use either ActionScript or graphic elements to represent the visuals.

Each RectBorder implementation must comply with the following requirements:

It must extend mx.skins.RectBorder or one of its subclasses.
It must provide an offset property value or implement the getBorderMetrics method to return sizing information.
It must implement the drawBorder() method to draw or size the border.
It must support all four standard styles, as well as the four special styles.
The implementation can reuse standard borders for special borders, as the Sample theme does.

It must register itself as the RectBorder implementation.
RectBorder global registration
All components look to a central location for a reference to the RectBorder class in use for the document, _global.styles.rectBorderClass. You cannot specify that an individual component should use a different RectBorder implementation. To customize RectBorder for a component, you must rely on the borderStyle style property.

Custom RectBorder example
The RectBorder implementations provided by the Halo theme and the Sample theme use the ActionScript drawing API to draw the borders for different styles. The following example demonstrates how to create a custom RectBorder implementation that uses graphic symbols for its display.

To create a custom RectBorder implementation:
Create a new folder in the Classes/mx/skins folder corresponding to the custom package name that you will use for the custom border.
For this example, use myTheme.

Create a new AS file in the new folder and save it as RectBorder.as.
Copy the following ActionScript code to the new AS file: import mx.core.ext.UIObjectExtensions;

class mx.skins.myTheme.RectBorder extends mx.skins.RectBorder
{
static var symbolName:String = "RectBorder";
static var symbolOwner:Object = RectBorder;
var className:String = "RectBorder";

#include "../../core/ComponentVersion.as"

// All of these borders have the same size edges, 1 pixel.
var offset:Number = 4;

function init(Void):Void
{
super.init();
}

function drawBorder(Void):Void
{
// The graphics are on the symbol's timeline,
// so all you need to do here is size the border.
_width = __width;
_height = __height;
}

// Register the class as the RectBorder for all components to use.
static function classConstruct():Boolean
{
UIObjectExtensions.Extensions();
_global.styles.rectBorderClass = RectBorder;
_global.skinRegistry["RectBorder"] = true;
return true;
}
static var classConstructed:Boolean = classConstruct();
static var UIObjectExtensionsDependency = UIObjectExtensions;
}


If you're not using the myTheme package, change the class declaration as needed.

Save the AS file.
Create a new FLA file.
Use Insert > New Symbol to create a new movie clip symbol.
Set the name to RectBorder.
If the advanced fields are not displayed, click Advanced.
Select Export for ActionScript
The identifier is automatically filled in as RectBorder.

Set the AS 2.0 class to the full class name of the custom border implementation.
This example uses mx.skins.myTheme.RectBorder.

Make sure that Export in First Frame is selected and then click OK.
Open the RectBorder symbol for editing.
Draw the graphics for the symbol.
For example, draw a hairline square with no fill. To make the custom border easy to see, set the line color to bright red.

Make sure that the graphics are flush against the upper-left corner with the x and y coordinates set to (0,0).
Your custom drawBorder implementation sets the width and height according to the component requirements.

Click Back to return to the main timeline.
Drag several components that use RectBorder to the Stage.
For example, drag a List, TextArea, and TextInput component to the Stage.

Select Control > Test Movie.
This example creates a very simple border implementation with static color and graphics. It doesn't respond to different borderStyle settings; it always uses the same graphics regardless of borderStyle. For examples of more complete border implementations, review the examples provided for the Halo and Sample themes.

1
2
3
4
5
6
7
8
9
0

[Xeef]

_focusrect property
_focusrect = Boolean;

Specifies whether a yellow rectangle appears around the button or movie clip that has keyboard focus. If _focusrect is set to its default value of true, then a yellow rectangle appears around the currently focused button or movie clip as the user presses the Tab key to navigate through objects in a SWF file. Specify false if you do not want to show the yellow rectangle. This is a global property that can be overridden for specific instances.

If the global _focusrect property is set to false, then the default behavior for all buttons and movieclips is that keyboard navigation is limited to the Tab key. All other keys, including the Enter and arrow keys, are ignored. To restore full keyboard navigation, you must set _focusrect to true. To restore full keyboard functionality for a specific button or movieclip, you can override this global property using either Button._focusrect or MovieClip._focusrect.

Note: If you use a component, then FocusManager overrides Flash Player's focus handling, including use of this global property.

Availability: ActionScript 1.0; Flash Player 4

Example
The following example demonstrates how to hide the yellow rectangle around any instances in a SWF file when they have focus in a browser window. Create some buttons or movie clips and add the following ActionScript in frame 1 of the Timeline:

_focusrect = false;


Change the publish settings to Flash Player 6, and test the SWF file in a browser window by selecting File > Publish Preview > HTML. Give the SWF focus by clicking it in the browser window, and use the Tab key to focus each instance. Pressing Enter or the Space key when _focusrect is disabled does not invoke the onRelease event handler as it does when _focusrectis enabled or true.

See also
_focusrect (Button._focusrect property), _focusrect (MovieClip._focusrect property)

this blady 10 char limit is stressy !

[Ruben]

Xeef! You're my hero!

For the people who wonder where this came from:
http://livedocs.macromedia.com/flash.../00002742.html

Thanks shiploads man!

- Ruben