From Forum Nokia Wiki

This article explains the use of the Flash Lite Button component and API.

(Note, this document has also been published in pdf format inside the Forum Nokia Flash Lite Components package)

Contents 1 Introduction to the Button component 2 Requirements 3 Download 4 Installation 5 Preparations 6 Structure 6.1 Assets 6.2 Skins 6.3 Inspectable parameters 7 ButtonComponent ActionScript API 7.1 Setting the skin path 7.2 Setting the asset path 7.3 Defining a placeholder 7.4 Setting the buttons label text 7.5 Setting the asset scaling method 7.6 Setting icon aligment 7.7 Setting label alignment 7.8 Activating the component 7.9 Disabling the component 7.10 Adding an event listener 7.11 Removing an event listener 7.12 onRelease event

Introduction to the Button component

The Flash Lite Button component is a flexible and scalable user interface component that allows Flash Lite developers to create mobile user interfaces easily, using Flash Lite.

The button component uses placeholder MovieClips, similar to many other Forum Nokia UI components, in order to ease scaling, orientation, and positioning issues.

Figures 1, 2 and 3 give example visual illustrations of the Button component. The exact appearance of the component in your application depends on the parameters and exact style you choose to use.

	Figure 2. Unpressed button. Figure 3. Pressed button.
Figure 1. Button components in use in a pop-up component together with a list component.

Requirements

• Adobe Flash Professional CS3 or CS4
• Flash Lite 2.0 Player and above

Download

Button component is included in the Forum Nokia Flash Lite Components package.

Installation

Installation of the Button component is easy. Execute the components MXP file and follow the simple instructions in Adobe Extension Manager to complete the installation process. Restart Adobe Flash CS4 after installation.

Note: Component FLA and AS files should appear in the directories [INSTALL PATH]\Flash CS4\en\Configuration\Components\Forum Nokia and [INSTALL PATH]\Flash CS4\en\Configuration\Classes\com\forumnokia. In some setup environments, the files may appear under the wrong language directories (for example, fi instead of en). In such cases, the files should be manually moved to the correct directories as specified above.

Preparations

1. Create a Flash Lite Project. Open the Component panel (Ctrl/Apple key + F7) and drag the Button component onto the stage. Assign a unique instance name for the object using the properties panel (Ctrl/Apple key + F3).

2. Forum Nokia Flash Lite UI components require the Flash Lite movie to be set to align to the top left corner of the device screen and not to scale. Some ActionScript code is needed to achieve this. The following code must be added to the first frame of the project:

fscommand2("DisableKeypadCompatibilityMode");
fscommand2("FullScreen", true);
fscommand2("SetQuality", "high");
Stage.scaleMode = "noScale";
Stage.align = "TL";
_focusrect = false;

3. In order to catch the button events, you need to add a listener to the button’s onRelease event:

var myEvent = myButton.onReleaseEvent();
myButton.addEventListener(myEvent, myListener);
function myListener(eventObject:Object):Void {
   if (eventObject.type == myEvent) {
      switch (eventObject.target) {
         case _level0.myButton :
            // My Button action here
            break;
         default :
            break;
      }
   }
}

Structure

Assets

Button assets consist of an icon (50x50 pixels) and a label (50x100 pixels). Each asset has separate MovieClips for Up, Down, and Over states of the button, which are organised in the following structure:

_assets

Default

Up

Icon

Label

Down

Icon

Label

Over

Icon

Label

NOTE: Custom assets must follow the same folder structure, and linkage identifiers must be named accordingly.

Skins

The skin of a button component is composed of nine different parts, as can be seen below. This structure enables the button interface to be scalable and easily skinnable.

As with assets, skins also have separate MovieClips for Up, Down, and Over states of the button. The structure and default size of these parts is defined below:

_skins

Default

Up

top_left (10x10)

top (155x10)

top_right (10x10)

left (10x40)

body (155x40)

right (10x40)

bottom_left (10x10)

bottom (155x10)

bottom_right (10x10)

Down

top_left

top

top_right

left

body

right

bottom_left

bottom

bottom_right

Over

top_left

top

top_right

left

body

right

bottom_left

bottom

bottom_right

Note: Each new custom skin must follow the same folder structure, with linkage identifiers named accordingly.

Inspectable parameters

Inspectable parameters help customise the Button component from the Component Inspector panel (Shift + F7). All inspectable parameters can also be controlled via ActionScript with the component APIs.

Parameter	Description	Value
Skin	Defines the button skin linkage identifier path. For instance, for the mySkin value, the button would search for the skin components under the Button.mySkin.* linkage path.	Skin identifier string
Assets	Defines the button asset linkage identifier path. For instance, for the myAssets value, the component would search for the assets under the Button.myAssets.* linkage path.	Asset identifier string
Placeholder	If specified, the button component will locate and scale itself according to this parameter. If not specified, the button locates itself manually and is drawn based on its default dimensions.	Instance of a placeholder MovieClip
Assets scaling	Defines the scaling method for the component assets. If specified, component assets are scaled according to the given width or height of the button.	None/width/height
Icon alignment	Defines the location of the icon asset on the button, if an icon is defined.	None/left/center/right
Label alignment	Defines the text alignment of the label asset.	Left/center/right

ButtonComponent ActionScript API

Setting the skin path

public function setSkin( path:String ): Void;

Sets a new path for the skin. Reconstructs the component.

Setting the asset path

public function setAssets( path:String ): Void;

Sets a new path for the assets. Reconstructs the component.

Defining a placeholder

public function setPlaceholder( nameStr:String ): Void;

Sets a placeholder object used to relocate, scale, and reconstruct the component.

Setting the buttons label text

public function setLabel( newLabel:String ): Void;

Sets the label text value of the component.

Setting the asset scaling method

public function assetScaling( newProperty:String ): Void;

Defines the asset scaling method. The parameter value can be either “none”, “width”, or “height”.

Setting icon aligment

public function setIconAlignment( newPosition:String ): Void;

Defines the location of the icon asset according to the parameter, when an icon is defined. The parameter value can be “none”, “left”, “center”, or “right”. Label location changes according to icon alignment.

Setting label alignment

public function setLabelAlignment( newPosition:String ): Void;

Sets the label text alignment. The parameter value can be “left”, “center”, or “right”.

Activating the component

public function enableComponent() :Void;

Makes the component react to user input.

Disabling the component

public function disableComponent() :Void;

Makes the component stop reacting to user input.

Adding an event listener

public function addEventListener(event:String, listenerFunction:Object): Void;

Specifies a listening function that receives the specified event.

Removing an event listener

public function removeEventListener(event:String, listenerFunction:Object): Void;

Tells the component to stop dispatching events to the listener function.

onRelease event

public function onReleaseEvent():String;

Calls the button component’s release event.