ActionScript编程 综合实例：制作会员注册页界面

ActionScript编程综合实例：制作会员注册页界面在很多会员制的网站中，会员注册页面是必不可少的，用户通过该页面可以将自己的相关信息（如用户名、密码、联系方式等）提交给网站数据库中，以实现相应的操作。在Flash网站中，同样可以实现该功能，而且通过组件制作的界面也更加美观。会员注册页界面如图20-1所示。FTHIO会员注册O2员洼删电•干串田口屁刚出蚌月.匹討Tp||i一~自FTHIO会员注册O2员洼删电•干串田口屁刚出蚌月.匹討Tp||i一~自出生年比电冠!《=呻5財单耐料.丽音理号托戶.何可血4. FlaAit希晟+■角框邁r皤抵力ftr曹于站盘»tr刚乜雹好审4■島选悟注RL.■RU>■JfftVT^a^rMlnn 凹昱樂JTFkdri七JSU±'._„Hi图20-1会员注册页界面制作过程：（1）新建500X480像素的填充颜色】为“浅黄色”空白文档，设置【背景颜色】为“浅黄色”（#FCF6E8）。然后，在舞台的顶部绘制一个深黄色的圆角矩形，如图20-2所示。（#F6F3DF）,如图20-4所示。甘创】 6,41.O吉员注冊■I0夕1匸 -1图20-2绘制圆角矩形（2）在该圆角矩形的左侧绘图20-4绘制圆角矩形面板中，以便通过ActionScript代码调用，如图20-5所示。LabelBiAten图20-3制作标题栏面板中，以便通过ActionScript代码调用，如图20-5所示。LabelBiAten图20-3制作标题栏（3）在标题栏的下面绘制一个较大的圆角矩形，该矩形的【笔触颜色】为“深黄色”（#E5DDBF）；Ctvctfln-Ccrbfo 專出：R.yJiEi.tMiuBcK汐I'L.abJ S：岀iUfflrm址皿时S3List SXiH.ioormo^LlftXMHifrtiFz3wff<i1n.urii^bUKiiAe|£j[.比心*l~^TIT■址迎IMlil口UBuriPT财m事岀》出:A.co^idi.THXlIrfnA>^:H.KrJidi.n<jil■出；HKrti*-LCcidMaiH.Donlidc.Tiicl^-a*制图标及输入标题文字，然后在其右侧输入英文字母，如图20-3所示。4）打开【组件】面板，将Button、CheckBox、ComboBox、Label和TileList等组件拖入到【库】

图20-5拖入相应组件(5)在相同文件夹中新建名称为form的ActionScript文件，并在该文件中使用import语句导入所需的类，以及创建包、form类和form()主函数，如下所示。package{importflash.display.Sprite;importfl.controls.Label;importflash.text.TextFormat;importflash.text.TextFieldAutoSize;importfl.controls.TextInput;importfl.controls.TileList;importfl.controls.ScrollBarDirection;importfl.controls.RadioButton;importfl.controls.NumericStepper;importfl.controls.ComboBox;importfl.controls.CheckBox;importfl.controls.TextArea;importfl.controls.Button;importfl.controls.List;publicclassformextendsSprite{publicfunctionform(){〃主函数体}}}(6)在form类中创建名称为createLabel的函数，该函数创建一个Label组件实例，并可根据传递的参数定义其显示的文本内容、位置及文本大小，如下所/示Oprivate functioncreateLabel(str:String,x:int,y:int,size:int):Label{varlabel:Label=newLabel();〃创建Label组件实例label.text=str;〃定义Label组件显示的内容label.move(x,y);〃定义Label组件的位置label.autoSize =TextFieldAutoSize.LEFT;〃定义Label组件自适应大小addChild(label);vartxtFormat:TextFormat=newTextFormat();txtFormat.size=size;label.setStyle("textFormat",txtFormat);//应用样式以改变文本大小returnlabel;〃返回Label组件实例}(7)创建名称为createTextInput的函数，该函数用于创建Textinput组件实例，并可根据传递的参数定义该组件的位置和大小，如下所示。private function3",source:"face/003.png"});createTextInput(x,y,w,h):TextInput{tileList.addItem({label:"头像vartxtInput:TextInput=new4",source:"face/004.png"});Textlnput();tileList.addItem({label:"头像〃创建TextInput组件实例5",source:"face/005.png"});txtlnput.move(x,y);//定义TileList组件中的项目〃定义TextInput组件的位置tileList.direction=txtInput.width=w;ScrollBarDirection.HORIZONTAL;txtInput.height=h;//定义TileList组件可水平滚动〃定义TextInput组件的大小tileList.move(x,y);addChild(txtlnput);tileList.columnWidth=128;setFormat(txtInput);//定义列的宽度〃调用setFormat()函数应用样tileList.rowHeight=128;式//定义行的高度returntxtInput;tileList.columnCount=1;〃返回TextInput组件实例//定义可见列的列数}tileList.rowCount=1;(8)创建名称为//定义可见行的行数createTileList的函数，该函数创建addChild(tileList);一个TileList组件实例，用于显示returntileList;外部指定的图像，并可根据传递}的参数定义其位置，如下所示。(9)创建名称为private functioncreateRadioButton的函数，该函createTileList(x:int,y:int):TileList{数通过for循环创建三个vartileList:TileList=newRadioButton组件实例，并显示为TileList();不冋的标签文本，如下所示。〃创建TileList组件实例private functiontileList.addItem({label:"头像createRadioButton():void{l",source:"face/001.png"});for(vari:int=0;i<3;i++){tileList.addItem({label:"头像varradioButton:RadioButton2",source:"face/002.png"});=newRadioButton();tileList.addItem({label:"头像〃创建RadioButton组件实例if(i==0){radioButton.label="男"；radioButton.selected=true;〃定义该RadioButton组件实例为选择状态}elseif(i==1){radioButton.label="女"；}else{radioButton.label="保密";}radioButton.x=40*i+100;radioButton.y=125;〃定义RadioButton组件实例的位置addChild(radioButton);setFormat(radioButton);〃应用样式}}(10)创建名称为createNumericStepper的函数，该函数创建一个NumericStepper组件实例，并可根据传递的参数定义的组件可显示的最大值和最小值，如下所示。private functioncreateNumericStepper(min:int,max:int,x:int,y:int):NumericStepper{varnumericStepper:NumericStepper=newNumericStepper();〃创建NumericStepper组件实例numericStepper.maximum=max;〃定义NumericStepper组件实例可显示的最大值numericStepper.minimum=min;〃定义NumericStepper组件实例可显示的最小值numericStepper.width=50;numericStepper.x=x;numericStepper.y=y;addChild(numericStepper);returnnumericStepper;}(11)创建名称为createComboBox的函数，该函数创建一个ComboBox组件实例，并定义其可显示的项目，如下所/示oprivate functioncreateComboBox(x:int,y:int):ComboBox{varcomboBox:ComboBox=newComboBox();〃创建ComboBox组件实例comboBox.addItem({label:"白羊座”,value:"白羊座"});comboBox.addItem({label:"金牛座”,value:"金牛座"});comboBox.addItem({label:"双定义其标签内容。该实例可根据子座”,value:"双子座"});传递的参数定义其位置，如下所comboBox.addItem({label:"巨/示0蟹座",value:"巨蟹座"});private functioncomboBox.addItem({label:"狮createCheckBox(x:int,y:int):CheckBox{子座”,value:"狮子座"});varcheckBox:CheckBox=newcomboBox.addItem({label:"处CheckBox();女座”,value:"处女座"});〃创建CheckBox组件实例comboBox.addItem({label:"天checkBox.label="是否公开"；秤座”,value:"天秤座"});//定义CheckBox组件实例显示comboBox.addItem({label:"天的标签内容蝎座"value:"天蝎座"});checkBox.move(x,y);comboBox.addItem({label:"射addChild(checkBox);手座"value:"射手座"});setFormat(checkBox);comboBox.addItem({label:"摩returncheckBox;羯座"value:"摩羯座"});}comboBox.addItem({label:"水(13)创建名称为瓶座"value:"水瓶座"});createTextArea的函数，该函数创comboBox.addItem({label:"双建一个TextArea组件实例，并可鱼座"value:"双鱼座"});根据传递的参数定义其位置，如〃定义ComboBox组件实例中下所示。的项目private functioncomboBox.move(x,y);createTextArea(x:int,y:int):TextArea{addChild(comboBox);vartxtArea:TextArea=newTextArea();setFormat(comboBox.textField);〃创建TextArea组件实例〃应用样式txtArea.width=400;returncomboBox;txtArea.height=150;}txtArea.move(x,y);(12)创建名称为txtArea.wordWrap=true;createCheckBox的函数，该函数〃定义TextArea组件实例可自创建一个CheckBox组件实例，并动换行addChild(txtArea);setFormat(txtArea);returntxtArea;}(14)创建名称为createButton的函数，该函数创建一个Button组件实例，并可根据传递的参数定义其位置，如下所/示oprivate functioncreateButton(str:String,x:int,y:int):Button{varbutton:Button=newButton();〃创建Button组件实例button.label=str;〃定义Button组件实例的标签内容button.move(x,y)addChild(button);setFormat(button);returnbutton;}(15)创建名称为setFormat的函数，该数用于创建文本样式，为将该样式应用于传递的参数，如下所示。private functionsetFormat(txt:Object):void{vartxtFormat:TextFormat=newTextFormat();〃创建文本样式对象txtFormat.size="12";〃定义文本的大小txt.setStyle("textFormat",txtFormat)〃为指定的对象应用样式}(16)在form()主函数体中,调用以上创建的函数并传递相应的参数值,以创建各个组件,如下所示。publicfunctionform(){TOC\o"1-5"\h\zvarnameTxt:Label =createLabel("用户昵称：",25,90,14);var nameInput:TextInput =createTextInput(100,90,150,20);var face:TileList =createTileList(350,90);var sexTxt:Label =createLabel("选择性别：",25,125,14);createRadioButton();varbirthdayTxt:Label =createLabel("出生年月：",25,160,14);var year:Num