Archived:Pop-up Component for Flash Lite
We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.
This article explains the use of the Flash Lite Pop-up component and API.
Article Metadata
(Note, this document has also been published in pdf format inside the Nokia Developer Flash Lite Components package)
Introduction to the Pop-up component
The Flash Lite Pop-up component is a flexible and scalable user interface component that allows Flash Lite developers to create mobile user interfaces easily, using Flash Lite.
The Pop-up component uses placeholder MovieClips, similar to many other Nokia Developer UI components, in order to ease scaling, orientation, and positioning issues.
Figures 1 and 2 give example visual illustrations of the Pop-up component. The exact appearance of the component in your application depends on the parameters and exact style you choose to use.
Figure 1. Pop-up component with buttons together with a list component.
Figure 2. Pop-up component containing Button components.
Requirements
- Adobe Flash Professional CS3 or CS4
- Flash Lite 2.0 Player and above
Download
Pop-up component is included in the Nokia Developer 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\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 Button component onto the stage. Assign a unique instance name for the object using the properties panel (Ctrl/Apple key + F3).
- 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. The component can be placed anywhere on the stage, but for dynamic scaling and positioning you should also bind it to a placeholder object (see Placeholder under Inspectable parameters). Enter the full path of the placeholder object (for example, _root.list_placeholder_mc) in the Component Inspector panel (Shift + F7).
- Stage can also be used as a placeholder if the component is positioned relative to the stage. If you do not wish to use a placeholder object, leave the value empty.
Simple use case:
Add this actionscript:
myPopup.setLabel("Hello world!");
myPopup.openPopup();
This will show the pop-up for n milliseconds as defined in the Auto hide parameter.
Advanced use case:
Create a listener for the Pop-up component’s events. The pop-up sends three types of events: When it is opening, when it is closing, and when a button is pressed inside the Pop-up component.
var closingEventName = myPopup.onClosingEvent();
var openingEventName = myPopup.onOpeningEvent();
var button1EventName = myPopup.onReleaseBtn1Event();
var button2EventName = myPopup.onReleaseBtn2Event();
myPopup.addEventListener(openingEventName, listenerFunction);
myPopup.addEventListener(closingEventName, listenerFunction);
myPopup.addEventListener(button1EventName, listenerFunction);
myPopup.addEventListener(button2EventName, listenerFunction);
function listenerFunction(eventObject:Object):Void {
if (eventObject.type == openingEventName) {
//Your Pop-up action here
myPopup.setLabel("Hello world!");
}
else if (eventObject.type == closingEventName) {
//Your pop-up action here
}
else if(eventObject.type == button1EventName){
//Your pop-up action here
}
else if(eventObject.type == button2EventName){
//Your pop-up action here
}
}
The Pop-up component is set to invisible by default. The visibility of the Pop-up component is controlled with two functions.
- myPopup.openPopup();
- myPopup.closePopup();
Structure
Assets
Pop-up assets are composed of a dimmed background; a label (235x160 pixels); and Down, Over, and Up states for the button. The button assets also contain text fields. The structure of the assets is as follows:
_assets
- Default
- Dim
- Label
- Button-down
- Button-over
- Button-up
- Default
Skins
The skin of a Pop-up component is composed of nine different parts, as indicated below. This structure enables the pop-up interface to be scalable and easily skinnable.
The structure and default size of the skin parts are defined below:
_skins
- Default
- Up
- top_left (20x20)
- top (235x20)
- top_right (20x20)
- left (20x160)
- body (235x160)
- right (20x160)
- bottom_left (20x20)
- bottom (235x20)
- bottom_right (20x20)
- Up
- Default
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:
Inspectable parameters
These component parameters can be changed via the Component Inspector panel (Shift + F7). The same parameters can also be accessed with ActionScript.
| Parameter | Description | Value |
|---|---|---|
| Skin | Defines the skin linkage identifier path. For instance, for the mySkin value, the component would search for the skin components under the Popup.mySkin.* linkage path. | Skin identifier string |
| Assets | Defines the asset linkage identifier path. For instance, for the myAssets value, the component would search for the assets under the Popup.myAssets.* linkage path. | Asset identifier string |
| 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 pop-up window. | None/width/height |
| Placeholder | If specified, the Pop-up component will locate and scale itself according to this parameter. If not specified, the Pop-up locates itself manually and is drawn based on its default dimensions. | Instance of a placeholder MovieClip |
| Auto hide | If not 0, the pop-up window will hide according to this value. | Hiding time in milliseconds |
| Background DIM | If specified, the Pop-up component background will scale itself to the same size as the placeholder and align to the same position. If a placeholder is not specified, the background is not used. | Instance of a background container MovieClip |
| Buttons | Determines how many buttons are shown. | None/single/double |
PopupComponent 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 pop-up text
public function setLabel( newLabel:String ): Void;
Sets the text of the pop-up.
Setting autohide timeout
public function autoHide( closeTimer:Number ): Void;
Sets the timer value. If 0, the timer is not used to close the pop-up window. Note that the autoHide function needs to be called before the pop-up window is opened so that the new value can be used.
Showing the pop-up
public function openPopup(): Void;
Opens the pop-up window.
Hiding the pop-up
public function closePopup(): Void;
Closes the pop-up window.
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.
Pop-up component’s events
public function onClosingEvent():String;
Returns the opening event.
public function onOpeningEvent(): String;
Returns the closing event.
public function onReleaseBtn1Event(): String;
Returns the button1 release event. If there are two buttons, the one on the right is button1.
public function onReleaseBtn2Event(): String;
Returns the button2 release event
Setting buttons
public function setButtons(newAmount:String): Void;
Sets the amount of buttons to be shown.
public function setButtonLabel(labelStr1:String, labelStr2:String): Void;
Sets the button label(s). If only Button1 is defined, the second parameter can be left empty
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”.
public function setBackgroundDIM(newPath:String): String;""
Sets the background container.
28 Sep
2009
24 Sep
2009