×
Namespaces

Variants
Actions
Revision as of 10:02, 7 May 2012 by hamishwillee (Talk | contribs)

Archived:Slider Component for Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search

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

Article Metadata
Code ExampleArticle
Created: User:MarioBajr (13 Jun 2009)
Last edited: hamishwillee (07 May 2012)

Contents

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: Media:SliderComponent.zip.

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\Nokia Developer 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. Nokia Developer 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.

201 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×