Flex第一课教程文启领航教育

北京文启领航教育科技有限公司培训第一课1．了解RIA领域2．了解FlexSDK框架3．了解FlashBuilder开发工具4．了解Flash体系结构5．采用FlashBuilder创建工程a)Flex工程b)AIR工程c)AS3.0工程d)Flex类库工程e)手机开发工程6．了解行业flex应用7．了解flex资源a)flex.orgb)flex4.0APIc)精彩网站8．创建工程步骤a)src目录表示源码存放的位置；今后.mxml文件,.as文件，图片资源等等都放在该位置。b)Flex4.5.1表示框架的SDK包。c)bin-debug表示存放工程编译之后的.swf文件。d)html-template是生成网页模板，今后就可以用网页方式打开swf文件e)libs表示添加第三方类库或框架等9．课堂案例a)登陆按钮界面制作北京文启领航教育科技有限公司（正常）（鼠标在上）b)代码s:ButtonbuttonMode=truemouseOut=MyBtn_mouseOutHandler(event)mouseOver=MyBtn_mouseOverHandler(event)x=20y=93label=登录id=MyBtnenabled=trueclick=MyBtn_clickHandler(event)fontFamily=细明体fontSize=36color=#F90DEBfontWeight=boldtextDecoration=nonelineThrough=falsechromeColor=#000108cornerRadius=10width=100height=100fontStyle=italic/属性：buttonMode表示鼠标放到按钮上之后，鼠标变成手状x=20y=93表示x,y在容器中的坐标位置label=登录id=MyBtnwidthheight样式：textDecoration表示是否有下划线chromeColor表示背景颜色lineThroughcornerRadius表示边框弧度fontStyle表示样式fontSize表示子大小事件：mouseOut表示鼠标离开调用事件mouseOver表示鼠标在上调用事件click鼠标单击调用事件mouseOut=MyBtn_mouseOutHandler(event)事件方法protectedfunctionMyBtn_mouseOutHandler(event:MouseEvent):void{event.target.setStyle(chromeColor,#000108);event.target.setStyle(color,#F90DEB);event.target.scaleX=event.target.scaleY=1;event.target.alpha=1;Button(event.target).filters=[];}北京文启领航教育科技有限公司=MyBtn_mouseOverHandler(event)表示鼠标在上面时protectedfunctionMyBtn_mouseOverHandler(event:MouseEvent):void{event.target.setStyle(chromeColor,#ff0000);event.target.setStyle(color,#ffffff);event.target.scaleX=event.target.scaleY=1.1;event.target.alpha=0.5;Button(event.target).filters=[newspark.filters.DropShadowFilter()];}10．登陆界面制作界面a)采用TitleWindow组件：b)该组件是带关闭按钮的panel组件的子组件，具有关闭功能。c)在该组件中添加form容器；起到布局作用；d)样式见代码部分e)关闭按钮:在该组件中有个close事件，我们为他添加一个方法。来关闭TitleWindow。f)登陆按钮实现，我们为输入框起个实例名id。下次根据实例名可以使用改组件。g)重置按钮实现：重置组件，其实就是为每个组件重新赋值为“”的过程。11．代码如下北京文启领航教育科技有限公司=1.0encoding=utf-8?s:TitleWindowxmlns:fx=:s=library://ns.adobe.com/flex/sparkxmlns:mx=library://ns.adobe.com/flex/mxwidth=400height=300title=用户登录color=#FAF5F5fontSize=22textAlign=centerfontWeight=normaltextDecoration=nonelineThrough=falsefontStyle=normalbackgroundColor=#EB2121backgroundAlpha=0.6contentBackgroundColor=#F1DF19chromeColor=#F80707borderVisible=truedropShadowVisible=trueborderColor=#F9F5F5borderAlpha=0.99cornerRadius=10close=titlewindow1_closeHandler(event)s:layouts:BasicLayout//s:layoutfx:Script![CDATA[importmx.controls.Alert;importmx.events.CloseEvent;importmx.events.EffectEvent;importmx.managers.PopUpManager;protectedfunctiontitlewindow1_closeHandler(event:CloseEvent):void{fadeID.play();}//登录protectedfunctionbutton1_clickHandler(event:MouseEvent):void{varu:String=userID.text;varp:String=passwordID.text;if(u==flexedu&&p==123){Alert.show(登录成功);}else{Alert.show(登录失败);}}protectedfunctionbutton2_clickHandler(event:MouseEvent):void北京文启领航教育科技有限公司{userID.text=;passwordID.text=;}protectedfunctionfadeID_effectEndHandler(event:EffectEvent):void{PopUpManager.removePopUp(this);}]]/fx:Scriptfx:Declarations!--将非可视元素（例如服务、值对象）放在此处--s:Fadeid=fadeIDalphaTo=0alphaFrom=1effectEnd=fadeID_effectEndHandler(event)duration=500target={this}//fx:Declarationsmx:Formx=0y=0width=100%height=100%mx:FormItemlabel=用户名s:TextInputid=userID//mx:FormItemmx:FormItemlabel=密码s:TextInputdisplayAsPassword=trueid=passwordID//mx:FormItemmx:FormItempaddingTop=20direction=horizontalheight=73width=283horizontalAlign=centers:Buttonlabel=登录click=button1_clickHandler(event)/s:Buttonlabel=重置click=button2_clickHandler(event)//mx:FormItem/mx:Form/s:TitleWindow12．弹出窗口的实现a)PopUpManager表示弹出窗口管理器，启动弹出窗口、关闭窗口等作用。i.addPopUp添加组件到管理中ii.centerPopUp把组件在父容器居中对齐iii.removePopUp把组件从容器中移除。13．效果和滤镜a)淡入淡出效果Fade类b)代码北京文启领航教育科技有限公司参数解释alphaTo=0表示透明度初始值为：0alphaFrom=1表示透明度终止值为：1意味着：对象从不透明到透明的过程effectEnd=fadeID_effectEndHandler(event)效果终止时调用该事件，改例子是移除组件。duration=500进过的时间，1000表示1秒钟；500表示半秒target={this}target表示作用的对象是哪个组件，改例子表示自己组件。作业部分：制作注册界面作业说明：安装页面制作flex界面；点击《选择修改》按钮弹出一个窗口。fx:Declarations!--将非可视元素（例如服务、值对象）放在此处--s:Fadeid=fadeIDalphaTo=0alphaFrom=1effectEnd=fadeID_effectEndHandler(event)duration=500target={this}//fx:Declarations北京文启领航教育科技有限公司附件：导出：.fxp工程导出：源码工程课件浏览地址：演示地址：下载地址：基础.pdf源码下载地址：