RadioButton component of Flash CS3

[Flep]

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:

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!

[janicehyy]

Hi Flep,

This script if i want to declare the question title and the radio button choices in XML file, what should i do?