×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:RadioButton Component for Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
Line 1: Line 1:
 
[[Category:Flash Lite]][[Category:UI]][[Category:Flash Lite Components]][[Category:Mobile Design]][[Category:Code Examples]]
 
[[Category:Flash Lite]][[Category:UI]][[Category:Flash Lite Components]][[Category:Mobile Design]][[Category:Code Examples]]
{{ArticleMetaData <!-- v1.1 -->
+
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= [[Media:RadioButtonSource.zip]] [[Media:RadioButtonFlashLite.zip]] [[Media:RadioButtonComponentExample.zip]]  
+
|sourcecode= [[Media:RadioButtonSource.zip]] [[Media:RadioButtonFlashLite.zip]] [[Media:RadioButtonComponentExample.zip]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|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'') -->
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
Line 11: Line 11:
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
 
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
Line 42: Line 41:
 
After the installation, the component appears in the Component panel (Window -> Components -> Signove -> RadioButton) like shown in the below figure. Now, it's just drag and drop the component to the Stage and configure the properties.
 
After the installation, the component appears in the Component panel (Window -> Components -> Signove -> RadioButton) like shown in the below figure. Now, it's just drag and drop the component to the Stage and configure the properties.
  
[[Image:Radio-button-screen-1.PNG]]
+
[[File:Radio-button-screen-1.PNG]]
  
 
===Properties===
 
===Properties===
Line 48: Line 47:
 
To view the properties of the component go to (Window -> Component Inspector) and select the component in the Stage. There are just five properties in the component, as shown in the below figure.
 
To view the properties of the component go to (Window -> Component Inspector) and select the component in the Stage. There are just five properties in the component, as shown in the below figure.
  
[[Image:Radio-button-screen-2.PNG]]
+
[[File:Radio-button-screen-2.PNG]]
  
 
*buttonMovieClip : This movie clip is the button of the radio button. We'll see more details about it in "Creating and setting up a button" section.
 
*buttonMovieClip : This movie clip is the button of the radio button. We'll see more details about it in "Creating and setting up a button" section.
Line 82: Line 81:
 
The component comes with a default button, but the developer can create your own button. The button is just a MovieClip with few restrictions. It has to have two frames named 'ON' and 'OFF', one to start the animation when the user check a radio button and another to start the animation when a radio button become unchecked. An example is shown in the figure below.
 
The component comes with a default button, but the developer can create your own button. The button is just a MovieClip with few restrictions. It has to have two frames named 'ON' and 'OFF', one to start the animation when the user check a radio button and another to start the animation when a radio button become unchecked. An example is shown in the figure below.
  
[[Image:Radio-button-screen-3.PNG]]
+
[[File:Radio-button-screen-3.PNG]]
  
 
After the creation of the MovieClip (don't forget the 'ON' and 'OFF' frames) you has to set a 'Identifier' to the MovieClip. This identifier is used in buttonMovieClip property of the radio button.
 
After the creation of the MovieClip (don't forget the 'ON' and 'OFF' frames) you has to set a 'Identifier' to the MovieClip. This identifier is used in buttonMovieClip property of the radio button.
Line 88: Line 87:
 
To create an identifier to the MovieClip, go to (Window -> Library), select your new MovieClip, right-click on it and select 'Properties...' option. You will see a screen like the shown below. Check both option 'Export for ActionScript' and 'Export in frame 1' and type an 'Identifier'
 
To create an identifier to the MovieClip, go to (Window -> Library), select your new MovieClip, right-click on it and select 'Properties...' option. You will see a screen like the shown below. Check both option 'Export for ActionScript' and 'Export in frame 1' and type an 'Identifier'
  
[[Image:Radio-button-screen-4.PNG]]
+
[[File:Radio-button-screen-4.PNG]]
  
 
===Formatting the label of the RadioButton===
 
===Formatting the label of the RadioButton===

Revision as of 08:45, 7 May 2012

Article Metadata
Code ExampleArticle
Created: mfabiop (20 Jun 2009)
Last edited: hamishwillee (07 May 2012)

Contents

Introduction

The default radio button component of the Flash CS3/CS4 is very useful to web pages and desktop applications, but it's not true to mobile applications because of the small screen and big resolution, mainly in newer devices (5800, N97). The component shown here is a custom radio button, where the user can provide your own MovieClip as the button.

The radio buttons are combined in groups, the user can only select one radio button in a group at one time. Clicking on another causes the existing one to become unchecked.

Prerequisites

This component was developed in Flash Player 8 and ActionScript 2.0. It was tested on Nokia Xpress Music 5800.

Installing

It's very simple to install the component, just download the MXP file and open it in the Adobe Extension Manager.

How to use

After the installation, the component appears in the Component panel (Window -> Components -> Signove -> RadioButton) like shown in the below figure. Now, it's just drag and drop the component to the Stage and configure the properties.

Radio-button-screen-1.PNG

Properties

To view the properties of the component go to (Window -> Component Inspector) and select the component in the Stage. There are just five properties in the component, as shown in the below figure.

Radio-button-screen-2.PNG

  • buttonMovieClip : This movie clip is the button of the radio button. We'll see more details about it in "Creating and setting up a button" section.
  • data : The value of the radio button. Must be unique in a group.
  • groupName : The name of the group. Radio buttons in the same group must have the same groupName property.
  • label : The text shown in the radio button.
  • selected : If the radio button must appears selected or not when the application starts.

Events on radio buttons

onChange

There is just one piece of ActionScript code needed in this event. It's shown below.

//Import the RadioButtonGroup class.
import com.signove.RadioButton.RadioButtonGroupClass
 
//Set a listener to the onChange event. When the user click on a radio button, the onChange method is invoked.
var onChangeListener:Object = new Object();
onChangeListener.onChange = function(evt):Void{
option_value.text = evt.target.selectedData;
}
//Retrieve the group and set the listener.
var group = RadioButtonGroupClass.getGroup('writers');
group.addEventListener('onChange',onChangeListener);

The code shown above is about events on radio buttons. In the first version of the component, there is just one event to be caught (onChange).

Creating and setting up a button

The component comes with a default button, but the developer can create your own button. The button is just a MovieClip with few restrictions. It has to have two frames named 'ON' and 'OFF', one to start the animation when the user check a radio button and another to start the animation when a radio button become unchecked. An example is shown in the figure below.

Radio-button-screen-3.PNG

After the creation of the MovieClip (don't forget the 'ON' and 'OFF' frames) you has to set a 'Identifier' to the MovieClip. This identifier is used in buttonMovieClip property of the radio button.

To create an identifier to the MovieClip, go to (Window -> Library), select your new MovieClip, right-click on it and select 'Properties...' option. You will see a screen like the shown below. Check both option 'Export for ActionScript' and 'Export in frame 1' and type an 'Identifier'

Radio-button-screen-4.PNG

Formatting the label of the RadioButton

The developer can format the label of the radio button with an instance of the TextFormat class. The code below shows how to do that.

var my_fmt:TextFormat = new TextFormat();
my_fmt.bold = true;
my_fmt.size = 24;
my_fmt.color = 0xFF0000;
 
//The instance name of the RadioButton component
radio_1.setTextFormat(my_fmt);

Downloads

Conclusion

It's really very simple to create a component. I've just started to learn two days ago and i have the first version of my first component now. I didn't use Assets in this version because i don't guess it's an easy work and it's not necessary at the moment.

109 page views in the last 30 days.
×