Pop-up Component for Flash Lite

From Forum Nokia Wiki

Reviewer Approved

This article explains the use of the Flash Lite Pop-up component and API.

(Note, this document has also been published in pdf format inside the Forum Nokia 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 Forum Nokia 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 2. Pop-up component containing Button components.
Figure 1. Pop-up component with buttons together with a list component.

Requirements

Adobe Flash Professional CS3 or CS4
Flash Lite 2.0 Player and above

Download

Pop-up component is included in the Forum Nokia 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\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 Button component onto the stage. Assign a unique instance name for the object using the properties panel (Ctrl/Apple key + F3).

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. 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

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)

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.

Community: Wiki