Flash AS3 with CSS

You can find simple Flash AS3 Class connected with CSS. You can create Flash User Registration form like below Screen shot show you using only AS3 and CSS.  You can find the AS3 Main.as class and simple CSS style sheet on this post.

Flash AS3 with CSS

Flash AS3 with CSS

 

Flash AS3 Main.as Class

package {

import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.net.*;
import fl.controls.ComboBox;
import fl.controls.RadioButton;
import fl.controls.RadioButtonGroup;

public class RegistrationForm extends Sprite {
private var loader:URLLoader;
private var padding:uint=265;
private var currHeight:uint = 0;
private var horizenSpacing:uint = 60;
private var rbg:RadioButtonGroup;
private var gender:Array=[“Male”,”Female”];

public function RegistrationForm() {
var req:URLRequest=new URLRequest(“styles.css”);
loader=new URLLoader();
loader.addEventListener(Event.COMPLETE,BuildGui);
loader.load(req);

}
public function BuildGui(event:Event):void {
var sheet:StyleSheet = new StyleSheet();
sheet.parseCSS(loader.data);

var tf1:TextField = createTextField(100, 90, 400, 22);
tf1.styleSheet = sheet;
//text also can set like this but there the style is not applying//
//tf1.text=”First Name”;
//to apply the style text is set using htmlText//
tf1.htmlText = “<span class=’formTag’>First Name</span>”;
var tfinput1:TextField = createInputTextField(250, 85, 175, 20);

var tf2:TextField = createTextField(100, 120, 400, 22);
tf2.styleSheet = sheet;
tf2.htmlText = “<span class=’formTag’>Last Name</span>”;
var tfinput2:TextField = createInputTextField(250, 115, 175, 20);

var tf3:TextField = createTextField(100, 150, 400, 22);
tf3.styleSheet = sheet;
tf3.htmlText = “<span class=’formTag’>Date of Birth</span>”;
var tfinput3_1:TextField = createInputTextField(355, 146, 65, 20);
var tfinput3_2:TextField = createInputTextField(425, 146, 65, 20);
setupComboBox();

var tf4:TextField = createTextField(100, 180, 400, 22);
tf4.styleSheet = sheet;
tf4.htmlText = “<span class=’formTag’>Email</span>”;
var tfinput4:TextField = createInputTextField(250, 175, 225, 20);

var tf5:TextField = createTextField(100, 210, 400, 22);
tf5.styleSheet = sheet;
tf5.htmlText = “<span class=’formTag’>Telephone No</span>”;
var tfinput5:TextField = createInputTextField(250, 205, 175, 20);

var tf6:TextField = createTextField(100, 240, 400, 22);
tf6.styleSheet = sheet;
tf6.htmlText = “<span class=’formTag’>Mobile No</span>”;
var tfinput6:TextField = createInputTextField(250, 235, 175, 20);

var tf7:TextField = createTextField(100, 270, 400, 22);
tf7.styleSheet = sheet;
tf7.htmlText = “<span class=’formTag’>Gender</span>”;
setupRadioButtons();

var tf8:TextField = createTextField(100, 300, 400, 22);
tf8.styleSheet = sheet;
tf8.htmlText = “<span class=’formTag’>Home Town</span>”;
var tfinput8:TextField = createInputTextField(250, 295, 175, 20);

}
private function createTextField(x:Number, y:Number, width:Number, height:Number):TextField {
var result:TextField = new TextField();
result.x = x;
result.y = y;
result.selectable = false;
result.width = width;
result.height = height;
addChild(result);
return result;
}
private function createInputTextField(x:Number, y:Number, width:Number, height:Number):TextField {
var result:TextField = new TextField();
result.x = x;
result.y = y;
result.selectable = true;
result.type = TextFieldType.INPUT;
result.border = true;
result.borderColor = 0xCDCDCD;
result.opaqueBackground = 0x7C7C7C;
result.background = true;
result.backgroundColor = 0xF8F8F8;
result.width = width;
result.height = height;
addChild(result);
return result;
}
private function setupComboBox():void {
var mm:ComboBox=new ComboBox();
mm.x = 250;
mm.y = 145;
mm.setSize(100, 22);
mm.prompt = “Select Month”;
mm.addItem( { label: “January”, data:1 } );
mm.addItem( { label: “February”, data:2 } );
mm.addItem( { label: “March”, data:3 } );
mm.addItem( { label: “April”, data:4 } );
mm.addItem( { label: “May”, data:5 } );
mm.addItem( { label: “June”, data:6 } );
mm.addItem( { label: “July”, data:7 } );
mm.addItem( { label: “August”, data:8 } );
mm.addItem( { label: “September”, data:9 } );
mm.addItem( { label: “October”, data:10 } );
mm.addItem( { label: “November”, data:11 } );
mm.addItem( { label: “December”, data:12 } );
addChild(mm);

}
private function setupRadioButtons():void {
rbg = new RadioButtonGroup(“Gender”);
createRadioButton(gender[0], rbg);
createRadioButton(gender[1], rbg);
}
private function createRadioButton(rbLabel:String, rbg:RadioButtonGroup):void {
var rb:RadioButton = new RadioButton();
rb.group = rbg;
rb.label = rbLabel;
rb.move(250 + currHeight, padding);
addChild(rb);
currHeight += horizenSpacing;
}
}
}

CSS Styles – styles.css

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.formTag {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
}

.inputTag {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
background:#CCCCCC;
border:#FF0000;
border:1px;
}

Advertisements

I'm a highly experienced and mature creative professional from Colombo, Sri Lanka. My passion for strong, unique design and creative expression drive me to do what I do. I strive to push the boundaries of design across all mediums to create new and immersive users experiences. My creative inspiration comes from the worlds of design, film, photography and the time spent with colleagues, friends and family. My flexible and dynamic approach allows me to provide my professional service, responsive and effective solutions to their business needs.

Posted in ActionScript 3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

More Info

Enter your email address to subscribe to my blog and receive notifications of new posts by email.

Join 1 other follower

  • An error has occurred; the feed is probably down. Try again later.
%d bloggers like this: