解析Flex行为的使用

开发 后端
本文向大家简单介绍一下Flex行为的使用,主要包括Flex行为的创建,在不同的组件间调用效果等内容,希望本文介绍对你有所帮助。

在学习Flex的过程中,你可能会遇到Flex行为问题,这里向大家介绍一下Flex行为的使用,相信本文介绍一定会让你有所收获。

Flex教程-Flex行为的使用

一、使用MXML去创建Flex行为

下面我们将制作一个当用户点击按钮时按钮会发光的效果。

1.在Source模式下,在后输入下面的代码,定义一个发光效果。

2.在Design模式下,从Componsents面板中拖一个按钮到应用程序中,并设置按钮的属性如下:

ID:myButton
Label:View
X:40
Y:60

3.在属性面板中,点击ViewbyCategory视图按钮。并找出Effects类型的属性。

4.将mouseUpEffect赋值为发光效果。
mouseUpEffect:{buttonGlow}
在Source模式下,标签代码如下:

5.保存文件。

6.点击工具栏上的Run按钮编译应用程序。

浏览器会运行你的Flex应用程序。点击View按钮。View按钮就会执行标签的发光效果。

二、Flex行为之在不同的组件间调用效果

下面我们将制作一个当用户点击按钮时Label组件将出现一组从模糊到清晰的数字。

1.在Design模式中,从Components面板中拖一个Label组件到应用程序中,并设置Label属性如下:

ID:myLabel
Text:4815162342
X:40
Y:100

2.转换到Source模式中,定义模糊效果,在标签下输入如下代码:

3.在标签中指定Label组件为模糊效果的目标组件:

4.在标签中指定click事件为模糊效果:

5.在标签中,设置visible属性为false来隐藏Label组件:

6.当用户在点击View按钮时,设置Label组件的visible属性为true来显示Label组件:

7.保存文件。

8.点击工具栏上的Run按钮编译应用程序。

浏览器会运行你的Flex应用程序。点击View按钮后就会有一组数字从模糊变为清晰。

三、Flex行为之创建合成效果

下面我们将制作一个当用户点击按钮时Label组件将出现一组从模糊到清晰的数字并且Label组件从上向下移动20px的位置。

1.在Source模式下,在标签前输入代码。

2.将全句标签剪切到前。将成为的子标签。

3.标签中,选择target=”{myLabel}”,并剪切到中。

4.定义移动效果。在标签后输入代码,Label组件将在2秒中下移20px的位置。

5.在标签中,改变click事件的效果设定为BlurMoveShow。

6.保存文件。

7.点击工具栏上的Run按钮编译应用程序。

浏览器会运行你的Flex应用程序。点击View按钮后就会有一组数字从模糊变为清晰并且这组数字向下移动。

【编辑推荐】

  1. 学习笔记 如何创建一个Flex行为
  2. 常用FlexBuilder快捷键用法指导
  3. Flex框架Riawave的定制应用
  4. 技术前沿 Flex2.0 从零开始实现文件上传
  5. FlexBuilder开发方法及特点解析 

 

责任编辑:佚名 来源: chinaitlab.com
相关推荐

2010-08-09 15:52:28

2010-08-05 13:14:16

Flex布局

2010-08-13 11:02:27

Flex渲染器

2010-08-12 16:10:44

Flex应用程序

2010-08-10 11:08:32

Flex外部样式表

2010-08-06 14:13:31

FlexDataGrid分页控

2010-08-03 10:46:41

Flex代码格式化

2010-08-11 09:21:37

2010-07-30 16:17:18

Flex开发

2010-08-02 09:43:00

Flex应用

2010-08-05 15:46:13

Flex行为Flex效果

2010-07-28 11:12:19

Flex正则表达式

2010-07-30 09:16:24

Flex数据绑定

2010-08-13 14:19:44

Flex绑定机制

2010-08-04 14:34:35

Flex编程模型

2010-08-04 13:23:29

Flex事件

2010-08-12 09:11:09

Flex弹出窗口

2010-08-09 11:14:36

Flex事件处理

2010-08-06 10:03:42

Flex事件

2010-07-28 09:35:23

Flex加载图片
点赞
收藏

51CTO技术栈公众号