Flex培训 第一课
演示地址： 演示
PPT下载地址： ppt
源码下载地址：下 载
1． 了解RIA领域
2． 了解Flex SDK框架
3． 了解FlashBuilder开发工具
4． 了解Flash体系结构
5． 采用Flash Builder创建工程
a) Flex工程
b) AIR工程
c) AS3.0工程
d) Flex 类库工程
e) 手机开发工程
6． 了解行业flex应用
7． 了解flex资源
a) flex.org
b) flex 4.0 API
c) 精彩网站
8． 创建工程步骤
a) src目录表示源码存放的位置；今后.mxml文件,.as文件，图片资源等等都放在该位置。
b) Flex4.5.1表示框架的SDK包。
c) bin-debug表示存放工程编译之后的.swf文件。
d) html-template是生成网页模板，今后就可以用网页方式打开swf文件
e) libs表示添加第三方类库或框架等
9． 课堂案例
a) 登陆按钮界面制作
（正常）（鼠标在上）
b) 代码
<s:Button
buttonMode="true"
mouseOut="MyBtn_mouseOutHandler(event)"
mouseOver="MyBtn_mouseOverHandler(event)"
x="20" y="93" label="登录" id="MyBtn"
enabled="true" click="MyBtn_clickHandler(event)"
fontFamily="细明体" fontSize="36"
color="#F90DEB" fontWeight="bold"
textDecoration="none" lineThrough="false"
chromeColor="#000108" cornerRadius="10"
width="100" height="100" fontStyle="italic"/>
属性：
buttonMode 表示 鼠标放到按钮上之后，鼠标变成手状
x="20" y="93" 表示x,y在容器中的坐标位置
label="登录"
id="MyBtn"
width
height
样式：
textDecoration 表示是否有下划线
chromeColor 表示背景颜色
lineThrough
cornerRadius 表示边框弧度
fontStyle 表示样式
fontSize 表示子大小
事件：
mouseOut 表示鼠标离开调用事件
mouseOver 表示鼠标在上调用事件
click 鼠标单击调用事件
mouseOut="MyBtn_mouseOutHandler(event)"
事件方法
protected function MyBtn_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=[];
}
mouseOver="MyBtn_mouseOverHandler(event)"
表示鼠标在上面时
protected function MyBtn_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=[new spark.filters.DropShadowFilter()];
}
10． 登陆界面制作
界面
a) 采用TitleWindow组件：
b) 该组件是带关闭按钮的panel组件的子组件，具有关闭功能。
c) 在该组件中添加form容器；起到布局作用；
d) 样式见代码部分
e) 关闭按钮:在该组件中有个 close事件，我们为他添加一个方法。来关闭TitleWindow。
f) 登陆按钮实现，我们为输入框起个实例名 id。下次根据实例名可以使用改组件。
g) 重置按钮实现：重置组件，其实就是为每个组件重新赋值为“”的过程。
11． 代码如下
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400"
height="300" title="用户登录"
color="#FAF5F5" fontSize="22" textAlign="center"
fontWeight="normal" textDecoration="none"
lineThrough="false" fontStyle="normal"
backgroundColor="#EB2121" backgroundAlpha="0.6"
contentBackgroundColor="#F1DF19" chromeColor="#F80707"
borderVisible="true" dropShadowVisible="true"
borderColor="#F9F5F5" borderAlpha="0.99"
cornerRadius="10"
close="titlewindow1_closeHandler(event)"
>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.EffectEvent;
import mx.managers.PopUpManager;
protected function titlewindow1_closeHandler(event:CloseEvent):void
{
fadeID.play();
}
//登录
protected function button1_clickHandler(event:MouseEvent):void
{
var u:String = userID.text;
var p:String =passwordID.text;
if(u=="flexedu" && p=="123"){
Alert.show("登录成功");
}else{
Alert.show("登录失败 ");
}
}
protected function button2_clickHandler(event:MouseEvent):void
{
userID.text="";
passwordID.text="";
}
protected function fadeID_effectEndHandler(event:EffectEvent):void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<s:Fade id="fadeID" alphaTo="0" alphaFrom="1" effectEnd="fadeID_effectEndHandler(event)" duration="500" target="{this}" />
</fx:Declarations>
<mx:Form x="0" y="0" width="100%" height="100%">
<mx:FormItem label="用户名">
<s:TextInput id="userID"/>
</mx:FormItem>
<mx:FormItem label="密码">
<s:TextInput displayAsPassword="true" id="passwordID"/>
</mx:FormItem>
<mx:FormItem paddingTop="20" direction="horizontal" height="73" width="283" horizontalAlign="center">
<s:Button label="登录" click="button1_clickHandler(event)"/>
<s:Button label="重置" click="button2_clickHandler(event)"/>
</mx:FormItem>
</mx:Form>
</s:TitleWindow>
12． 弹出窗口的实现
a) PopUpManager 表示弹出窗口管理器，启动弹出窗口、关闭窗口等作用。
i. addPopUp 添加组件到管理中
ii. centerPopUp 把组件在父容器居中对齐
iii. removePopUp 把组件从容器中移除。
13． 效果和滤镜
a) 淡入淡出效果Fade类
b) 代码
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<s:Fade id="fadeID" alphaTo="0" alphaFrom="1" effectEnd="fadeID_effectEndHandler(event)" duration="500" target="{this}" />
</fx:Declarations>
参数解释
alphaTo="0" 表示透明度初始值为：0
alphaFrom="1" 表示透明度终止值为：1
意味着：对象从不透明到透明的过程
effectEnd="fadeID_effectEndHandler(event)"
效果终止时调用该事件，改例子是移除组件。
duration="500"
进过的时间，1000表示1秒钟；500表示半秒
target="{this}"
target表示作用的对象是哪个组件，改例子表示自己组件。
作业部分：
制作注册界面
作业说明： 安装页面制作flex界面；点击《选择修改》按钮弹出一个窗口。
附件：
导出：.fxp工程
导出：源码工程
