Here I am with another article of the series about the build-in components of Flash CS3.
After seeing the ComboBox and the DataGrid , this time we will look at the RadioButton.
In the following example, we will see how to develop a simple application, which do request to the users.
It could a good starting point to create a market research or statistics or simply as part of mail form.
Let us look at the example" I create a FLA and save it as "main.fla".
Into which, I drag a RadioButton component from the Components Panels to the library.
I create a Document Class, an AS file saved as "Main.as", implemented the following way:
Code:
package
{
import flash.display.MovieClip;
import flash.text.TextField;
import fl.controls.RadioButton;
import fl.controls.RadioButtonGroup;
import flash.events.MouseEvent;
public class Main extends MovieClip
{
var job:RadioButtonGroup=new RadioButtonGroup('My job');
var age:RadioButtonGroup=new RadioButtonGroup('My age');
var sex:RadioButtonGroup=new RadioButtonGroup('My sex');
private var result_txt:TextField;
private var first_step:int=3;
private var second_step:int=6;
private var third_step:int=4;
private var job_result:String;
private var age_result:String;
private var sex_result:String;
public function Main()
{
firstStep();
secondStep();
thirdStep();
createTextResult();
initResult();
}
private function firstStep():void
{
var field:TextField=new TextField();
field.text=job.name;
field.x=30;
field.y=30;
addChild(field);
for(var i:int=0;i < first_step;i++)
{
var rb:RadioButton=new RadioButton();
rb.move(field.x,field.y*2+30*i);
addChild(rb);
rb.group=job;
if(!i)
rb.label='Developer';
if(i==1)
{
rb.label='Designer';
rb.selected=true;
}
if(i==2)
rb.label='SEO';
rb.addEventListener(MouseEvent.CLICK,reportResult);
}
}
private function secondStep():void
{
var field:TextField=new TextField();
field.text=age.name;
field.x=150;
field.y=30;
addChild(field);
for(var i:int=0;i < second_step;i++)
{
var rb:RadioButton=new RadioButton();
rb.move(field.x,field.y*2+30*i);
addChild(rb);
rb.group=age;
if(!i)
rb.label='18-30';
if(i==1)
rb.label='30-40';
if(i==2)
rb.label='40-50';
if(i==3)
rb.label='50-60';
if(i==4)
rb.label='60-70';
if(i==5)
{
rb.label='Foot in coffin';
rb.selected=true;
}
rb.addEventListener(MouseEvent.CLICK,reportResult);
}
}
private function thirdStep():void
{
var field:TextField=new TextField();
field.text=sex.name;
field.x=270;
field.y=30;
addChild(field);
for(var i:int=0;i < third_step;i++)
{
var rb:RadioButton=new RadioButton();
rb.move(field.x,field.y*2+30*i);
addChild(rb);
rb.group=sex;
if(!i)
rb.label='male';
if(i==1)
rb.label='female';
if(i==2)
rb.label='shemale';
if(i==3)
{
rb.label='bOh';
rb.selected=true;
}
rb.addEventListener(MouseEvent.CLICK,reportResult);
}
}
private function createTextResult():void
{
result_txt=new TextField();
result_txt.width=200;
result_txt.x=stage.stageWidth-result_txt.width;
result_txt.y=30;
result_txt.textColor=0x0066FF;
addChild(result_txt);
}
private function reportResult(evt:MouseEvent):void
{
switch(evt.target.group)
{
case job:
job_result=evt.target.label;
break;
case age:
age_result=evt.target.label;
break;
case sex:
sex_result=evt.target.label;
break;
}
fixTextResult();
}
private function initResult():void
{
job_result='Designer';
age_result='Foot in coffin';
sex_result='bOh';
fixTextResult();
}
private function fixTextResult():void
{
result_txt.text='My chosen:'+'\n'+'\n'+job_result+'\n'+age_result+'\n'+sex_result;
}
}
}
The result:
Let us analyse the code
Properties
Three RadioButtonGroup to assign to each group a RadioButton that I will create
var job:RadioButtonGroup=new RadioButtonGroup('My job');
var age:RadioButtonGroup=new RadioButtonGroup('My age');
var sex:RadioButtonGroup=new RadioButtonGroup('My sex');
A text field to display the choices done
private var result_txt:TextField;
three numerical variables that each contain the number of RadioButton present for each section
private var first_step:int=3;
private var second_step:int=6;
private var third_step:int=4;
three String variable that each contain the value of the choice made for each section
private var job_result:String;
private var age_result:String;
private var sex_result:String;
Constructor function
I call 5 methods successively
firstStep();
secondStep();
thirdStep();
createTextResult();
initResult();
Methods
firstStep();
I create a text field, that will display the title of the first section
var field:TextField=new TextField();
I assign to it, the text property "name" of "job" (first instance of radioButtonGroup)
field.text=job.name;
I position the text field
field.x=30;
field.y=30;
I add the text field to the stage (otherwise it would not be visible)
addChild(field);
I create a cycle with a maximum iteration equal to the value of the variable "first_step"
for(var i:int=0;i < first_step;i++)
{
I instantiate a RadioButton (as many as the value of "first_step")
var rb:RadioButton=new RadioButton();
I position it
rb.move(field.x,field.y*2+30*i);
I add it to the stage
addChild(rb);
I assign to a group the property "group" of RadioButton using the instance RadioButtonGroup "job"
rb.group=job;
based on the value of "i", I assign a label name to RadioButton
if(!i)
rb.label='Developer';
if(i==1)
{
rb.label='Designer';
rb.selected=true;
}
if(i==2)
rb.label='SEO';
I add a listener to the event CLICK of the mouseEvent class. When the RadioButton is selected, it will call the method "reportResult"
rb.addEventListener(MouseEvent.CLICK,reportResult) ;
}
secondStep();
same thing as for "firstStep"
thirdStep();
same thing as for "firstStep"
createTextResult();
I create a general text field
result_txt=new TextField();
I assign to it a width and I position it
result_txt.width=200;
result_txt.x=stage.stageWidth-result_txt.width;
result_txt.y=30;
I assign a text color
result_txt.textColor=0x0066FF;
I add it to the stage
addChild(result_txt);
reportResult();
this method will be called each time that a RadioButton is selected and the text field "result_txt" is then updated.
I check to which group the selected RadioButton has been assigned and based on its value I assign to it one of the three String variable "job_result", "age_result" or "sex_result"
switch(evt.target.group)
{
case job:
job_result=evt.target.label;
break;
case age:
age_result=evt.target.label;
break;
case sex:
sex_result=evt.target.label;
break;
}
I call the method "fixTextResult"
fixTextResult();
fixTextResult();
This method assign the text to "result_txt" each time that a RadioButton is selected. Once again, it is based on the value of the three String properties (variables) "job_result", "age_result" and "sex_result".
result_txt.text='My chosen:'+'\n'+'\n'+job_result+'\n'+age_result+'\n' +sex_result;
See you next!
Bookmarks