From Forum Nokia Wiki

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

Contents 1 Introduction to the Slider Component 2 Requirements 3 Download 4 Installation 5 Preparations 6 Structure 6.1 Skins 6.2 Inspectable Parameters 7 SliderComponent ActionScript API 7.1 Setting the skin path 7.2 Activating the component 7.3 Disabling the component 7.4 onChange event 7.5 onStartDrag event 7.6 onStopDrag event

Introduction to the Slider Component

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

Figure 1. Slider Component

Requirements

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

Download

Slider component can be downloaded here.

Installation

Installation of the Slider 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 Slider component onto the stage. Assign a unique instance name for the object using the properties panel (Ctrl/Apple key + F3).

Figure 2. Nokia Components Tree

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 slider events, you need to add a listener to the slider’s onChange event:

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

Structure

Skins

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

Figure 3. Skin Levels

Skins have separate MovieClips for Up and Down states of the slider. The structure of these parts is defined below:

_skins

Default

Up

Slider_up

Fill_up

Fill_down

Fill_body

Bar_up

Bar_down

Bar_body

Down

Slider_up

Fill_up

Fill_down

Fill_body

Bar_up

Bar_down

Bar_body

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

Inspectable Parameters

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

Figure 4. Component Inspector

Parameter	Description	Value
Skin	Defines the slider skin linkage identifier path. For instance, for the mySkin value, the slider would search for the skin components under the Slider.mySkin.* linkage path.	Skin identifier string
Fill Enabled	Enable or Disable the Fill over the background bar	Boolean
Maximum	Maximum value of Slider.	Number
Minimum	Minimum value of Slider.	Number
Snap Interval	Increment by which the value is increased or decreased as the user moves the slider thumb.	Number
Value	Start value.	Number

SliderComponent ActionScript API

Setting the skin path

public function setSkin( path:String ): Void;

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

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.

onChange event

public function onChangeEvent():String;

Calls the slider component’s change event.

onStartDrag event

public function onStartDragEvent():String;

Calls the slider component’s startDrag event.

onStopDrag event

public function onStopDragEvent():String;

Calls the slider component’s stopDrag event.