Archived:ScrollPane component in FlashLite
Introduction to the ScrollPane Component
The Flash Lite ScrollPane component is a flexible and scalable user interface component that allows Flash Lite developers to create mobile user interfaces easily, using Flash Lite. The ScrollPane component uses placeholder MovieClips similar to Nokia Developer UI components in order to ease scaling, orientation, and positioning issues.
The same component can be used with equal ease for both, touch based and non-touche based mobile devices and offers all the features of desktop version of Flash CS 3 ScrollPane component. In addition, this ScrollPane component can accommodate for dynamic change in the source content and adjust the scrolls accordingly.
This ScrollPane component can be used for applications developed using FlashLite 2.x and FlashLite 3.x. This ScrollPane component is tested with FlashLite 2.x and FlashLite 3.x content for following
- Non touch based Nokia E-63.
- Touch based Nokia 5800 XpressMusic.
- Touch based Nokia 5530 XpressMusic.
- Adobe Flash Professional CS3 or CS4.
- Flash Lite 2.0 Player and above.
ScrollPane component can be downloaded here: Media:ScrollPaneComponent.zip.
Installation of the ScrollPane 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 CS3 after installation.
1. Create a Flash Lite Project. Open the Component panel (Ctrl/Apple key + F7) and drag the ScrollPane component onto the stage. Assign a unique instance name for the object using the properties panel (Ctrl/Apple key + F3).
2. It is recommended to add the following lines of ActionScript code to the first frame of the project so that it can be used with some other Nokia Developer components.
Stage.scaleMode = "noScale";
Stage.align = "TL";
_focusrect = false;
3. In order for ScrollPane component to work properly, the Registration point of source movieclip must be top-left. Also X and Y coordinates of the ScrollPane component should be same as that of source movieclip.
4. The ScrollPane component dispatches an event when the slider is moved to make the source content scroll. This is done by calling addEventListener.
var myListener:Object = new Object ();
myListener.scroll = function (oEvent:Object):Void
//You can get the Vertical Scroll Position by oEvent.target.vPosition;
trace ("vPosition::" + oEvent.target.vPosition);
//You can get the Horizontal Scroll Position by oEvent.target.hPosition;
trace ("hPosition::" + oEvent.target.hPosition);
5. The same component works for both the touch and non-touch based devices and if you want to make the ScrollPane react to device keyboard and scroll content accordingly, you need to add the keyboard listener by simply calling the following function. There are three combinations you can use the component with:
- Devices with only keyboard support(Non-touch based)(Eg. Nokia E52 Nokia 3230)
- Devices with only Touch interaction. (Eg. XpressMusic 5800)
- Devices supporting both Touch and Keyboard interaction. (Eg. N97)
The boolean parameter will tell if the touch-based interaction is supported in addition to the keyboard support.
//For Nokia E-63, E-52 alike
//For Nokia E-97
The component offers the flexibility of scrolling the content using any key you may find suitable for your application. Also the keycode for keys is different in case of different devices. So you should specify the Keycodes of keys(which should be mapped for Scroll up,down,left,right)for this particular device using the Component Inspector/calling setKeyCodes API.
6. The ScrollPane component can accommodate the dynamic change in the source content and adjust the Scrollbars accordingly. If you have changed the source content and want to reflect that in the ScrollPane, you need to call the following function.
The skin has separate Movieclips for Up, Over and Down states of the ScrollPane. The skin consists of Active and Inactive states of the Arrow buttons and background, top, body, and bottom part of the sliders. This structure enables the slider interface to be completely scalable and easily skinnable.
Skins have separate MovieClips for Up and Down states of the slider. The structure of these parts is defined below:
Inspectable parameters help customise the ScrollPane component from the Component Inspector panel (Shift + F7). All inspectable parameters can also be controlled via ActionScript with the component APIs.
|AssetsSkins||Defines the component’s skin linkage identifier path. For instance, for the 'mySkin' value, it would search for the skin components under the ScrollPane.mySkin.* linkage path.||Skin identifier string|
|Height||Height of the ScrollPane||Number (Default is 100)|
|hLineScrollSize||The number of pixels to move the content when an arrow in the horizontal scroll bar is clicked.||Number (Default is 10)|
|Target||A string that indicates the Source content movieclip to which the ScrollPane will be added.||Instance of Source MovieClip|
|vLineScrollSize||The number of pixels to move the content when an arrow in the vertical scroll bar is clicked.||Number (Default is 10)|
|Width||Width of the ScrollPane||Number (Default is 160)|
|KeyCodes||The array with Keycode of keys in the sequence:Scroll Up, Scroll Left, Scroll Right, Scroll Down||Array (Default is [50,52,54,56])|
ScrollPane Component ActionScript API
Setting the skin path
public function setAssetsSkin (path:String):Void
Sets a new path for the skin. Reconstructs the component
Enable/Disable the component
public function enableDisableComponent (bState:Boolean):Void
Enable and disable the component based upon the Boolean flag parameter. Setting the flag to false makes the component disable and stop reacting to user input. Setting the flag to true makes the component enable and react to user input.
Changing ScrollPane Dimension
public function changeScrollPaneDimensions (nWidth:Number, nHeight:Number, bMaintainXY:Boolean):Void
Sets the new height and width for the ScrollPane component.
If you are using the component with devices supporting change in orientation, you can add an orientation listener and change the dimension of ScrollPane to suit to the current orientation. The last parameter (bMaintainXY) will be useful in case you want to maintain the same state of the source content area (or the visible area at the top) within the ScrollPane even after the change in dimension. Setting the parameter to true will change the dimension of the ScrollPane and also restore the source content at the same state. That is, if before changing the dimension the ScrollPane showed a input text-field at the top, then even after changing the dimension, the same text-field will be visible at the same offset within the ScrollPane.
Setting ScrollPane Location
public function setScrollPaneXY (nX:Number, nY:Number):Void
Sets the X and Y co-ordinates of the ScrollPane.
Setting the ScrollPane Visibility
public function setVisibility (bVisibility:Boolean):Void
Sets the ScrollPane visibility according to the Boolean flag. If set to false makes the ScrollPane component invisible and setting to true makes it visible.
Setting Vertical Position of ScrollPane content
public function setVPosition (nY:Number):Void
Orients the scroll pane's contents in pixels, and adjusts the vertical scroll box (thumb) proportionally. The 0 position is at the top end of the scroll track, which causes the top edge of the scroll pane content to be visible in the scroll pane.
Setting Horizontal Position of ScrollPane content
public function setHPosition (nX:Number):Void
Orients the scroll pane's contents in pixels, and adjusts the horizontal scroll box (thumb) proportionally. The 0 position is at the left end of the scroll track, which causes the left edge of the scroll pane content to be visible in the scroll pane.
Setting Vertical Line Scroll Size
public function setVLineScrollSize (nPixels:Number):Void
Sets the number of pixels to move the content in the display area when the user clicks a scroll arrow in a vertical scroll bar. The default value is 10.
Setting Horizontal Line Scroll Size
public function setHLineScrollSize (nPixels:Number):Void
Sets the number of pixels to move the content when an arrow in the horizontal scroll bar is clicked. The default value is 10.
Refresh ScrollPane for the changed Source content
public function refreshPane ():Void
If the source content is changed in the dimension you can call the refresh API. This will make sure that the ScrollPane will work with the modified source content by resetting the scroll bar. There is no need to refresh the ScrollPane in case the source content is same in dimension and merely changes some input property (for example, a text field).
Add Keyboard Scrolling Support
public function setScrollUsingKey (bFlag:Boolean):Void
Sets the Keyboard input support for the ScrollPane component.
As mentioned earlier, this ScrollPane component works with Touch based and non touch based devices. The component works by default for only Touch based devices. But if you want to add the Keyboard interaction, you should call this API. If the target device supports only Keyboard interaction, you should call the API with Boolean flag as 'false' and if the target device supports both touch based and keyboard interaction(and you wish to add both support for your application), you should call the API with Boolean flag as 'true'.
Setting Keycode of ScrollKeys
public function setKeyCodes (aKeyCodes:Array):Void
Sets the Keycode of the keys mapped for Scroll Up, Left, Right, Down functionality.
The attached Examples will show how to use the ScrollPane component in FlashLite Applications.
- One is for touch based Nokia 5800 XpressMusic Device.
- Other is for non-touch based and keyboard supported Nokia E-63. Can scroll using 2,4,6,8 numbered keys in addition to ScrollPane Left/Right/Top/Bottom buttons.