×
Namespaces

Variants
Actions

Archived:Pop-up Component for Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

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
Article
Created: jaaura (19 May 2009)
Last edited: hamishwillee (14 May 2013)

(Note, this document has also been published in pdf format inside the Nokia Developer Flash Lite Components package)

Contents

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.

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

Components.png

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


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.

ButtonSkin.png

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.


ComponentInspectorPopUp.png


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.

This page was last modified on 14 May 2013, at 02:43.
67 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.

×