×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Slider Component for Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search
kamalakshan (Talk | contribs)
(Reviewer Approved)
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text)
(7 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ReviewerApproved}}
+
[[Category:Flash Lite]][[Category:UI]][[Category:Flash Lite Components]][[Category:Mobile Design]][[Category:Code Examples]]
[[Category:Flash Lite]] [[Category:Flash Lite Components]] [[Category:UI]] [[Category:Mobile Design]]
+
{{Abstract|This article explains the use of the Flash Lite Slider component and API. }}
 
+
 
+
This article explains the use of the Flash Lite Slider component and API.  
+
  
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= [[Media:SliderComponent.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090613
 +
|author= [[User:MarioBajr]]
 +
}}
 
==Introduction to the Slider Component==
 
==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.
 
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.
  
[[Image:SliderSamples.png]]<br>
+
[[File:SliderSamples.png|none|frame|Figure 1. Slider Component]]
:'''Figure 1. Slider Component'''<br><br>
+
 
+
  
 
==Requirements==
 
==Requirements==
  
:* Adobe Flash Professional CS3 or CS4
+
* Adobe Flash Professional CS3 or CS4
:* Flash Lite 2.0 Player and above
+
* Flash Lite 2.0 Player and above
:* Touch Screen Device
+
* Touch Screen Device
 
+
  
 
==Download==
 
==Download==
  
Slider component can be downloaded [http://www.forum.nokia.com/piazza/wiki/images/8/85/SliderComponent.zip here].
+
Slider component can be downloaded here: [[Media:SliderComponent.zip]].
  
 
==Installation==
 
==Installation==
Line 28: Line 44:
 
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.
 
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.  
+
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==
 
==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).
+
# 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).
 
+
#: [[File:SliderComponent.png|none|frame|Figure 2. Nokia Components Tree]]
 
+
# 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:  
[[Image:SliderComponent.png]]<br>
+
#: <code actionscript>
:'''Figure 2. Nokia Components Tree'''<br><br>
+
 
+
 
+
: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:  
+
 
+
<code language=actionscript>
+
 
fscommand2("DisableKeypadCompatibilityMode");
 
fscommand2("DisableKeypadCompatibilityMode");
 
fscommand2("FullScreen", true);
 
fscommand2("FullScreen", true);
Line 49: Line 59:
 
_focusrect = false;
 
_focusrect = false;
 
</code>
 
</code>
 
+
# In order to catch the slider events, you need to add a listener to the slider’s onChange event:
:3. In order to catch the slider events, you need to add a listener to the slider’s onChange event:
+
#: <code actionscript>
 
+
<code language=actionscript>
+
 
var myEvent:String = mySlider.onChangeEvent();
 
var myEvent:String = mySlider.onChangeEvent();
 
mySlider.addEventListener(myEvent, myListener);
 
mySlider.addEventListener(myEvent, myListener);
Line 73: Line 81:
 
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.
 
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.
  
 
+
[[File:SliderSkinLevel.png|none|frame|Figure 3. Skin Levels]]
:[[Image:SliderSkinLevel.png]]<br>
+
:'''Figure 3. Skin Levels'''<br><br>
+
  
 
Skins have separate MovieClips for Up and Down states of the slider. The structure of these parts is defined below:
 
Skins have separate MovieClips for Up and Down states of the slider. The structure of these parts is defined below:
Line 105: Line 111:
 
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.
 
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.
  
 +
[[File:SliderComponentInspector2.png|none|frame|Figure 4. Component Inspector]]
  
:[[Image:SliderComponentInspector2.png]] <br>
+
{| class="wikitable"
:'''Figure 4. Component Inspector'''<br><br>
+
 
+
 
+
{| style="align:left;" border="1" cellspacing="5" cellpadding="5"
+
 
|-
 
|-
 
! Parameter''' !! Description !! Value
 
! Parameter''' !! Description !! Value
Line 130: Line 133:
 
===Setting the skin path===
 
===Setting the skin path===
  
''public function setSkin( path:String ): Void;''
+
<code actionscript>public function setSkin( path:String ): Void;</code>
  
 
Sets a new path for the skin. Reconstructs the component.
 
Sets a new path for the skin. Reconstructs the component.
Line 136: Line 139:
 
===Activating the component===
 
===Activating the component===
  
public function enableComponent() :Void;
+
<code actionscript>public function enableComponent() :Void;</code>
  
 
Makes the component react to user input.  
 
Makes the component react to user input.  
Line 142: Line 145:
 
===Disabling the component ===
 
===Disabling the component ===
  
public function disableComponent() :Void;
+
<code actionscript>public function disableComponent() :Void;</code>
  
 
Makes the component stop reacting to user input.
 
Makes the component stop reacting to user input.
Line 148: Line 151:
 
=== onChange event ===
 
=== onChange event ===
  
''public function onChangeEvent():String;''
+
<code actionscript>public function onChangeEvent():String;</code>
  
 
Calls the slider component’s change event.
 
Calls the slider component’s change event.
Line 154: Line 157:
 
=== onStartDrag event ===
 
=== onStartDrag event ===
  
''public function onStartDragEvent():String;''
+
<code actionscript>public function onStartDragEvent():String;</code>
  
 
Calls the slider component’s startDrag event.
 
Calls the slider component’s startDrag event.
Line 160: Line 163:
 
=== onStopDrag event ===
 
=== onStopDrag event ===
  
''public function onStopDragEvent():String;''
+
<code actionscript>public function onStopDragEvent():String;</code>
  
 
Calls the slider component’s stopDrag event.
 
Calls the slider component’s stopDrag event.

Revision as of 10:02, 7 May 2012

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.

153 page views in the last 30 days.
×