| 网站首页 | 免费课件 | 课件源码 | 课件制作 | 课件购买 | 课件教程 | 课堂内外 | 教案 | 试卷 | 论文 | 电脑 | 教案下载 | 
 | 试卷下载 | 论文下载 | 计划总结 | 新闻资讯 | 行业范文 | 图片 | 留言 | 术语大全 | 搞笑 | 字体 | 短信 | Flash视频教程 | 
 | 办公软件视频 | 编程设计视频 | 热门视频 | 课件论坛 | 作文写作 | 
您现在的位置: 教育资源网 >> 课件教程 >> Flash教程 >> Flash辅助软件 >> 正文 用户登录 新用户注册
免费精品 课件源程序下载 课件点播 课件定做 课件复原 课件制作指导 毕业设计 更多服务
Google




Flash辅助软件——Flex教程-使用行为
作者:佚名    教程来源:本站原创    点击数:    更新时间:2006-9-1         ★★★ 【字体:
本教程将学习
一、使用MXML去创建行为。
二、在不同的组件间调用效果。
三、创建合成效果。

一、使用MXML去创建行为
    下面我们将制作一个当用户点击按钮时按钮会发光的效果。
    1.在Source模式下,在<mx: Application>后输入下面的代码,定义一个发光效果。 
<mx:Glow id="buttonGlow" color="0x99ff66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/> 
    2.在Design模式下,从Componsents面板中拖一个按钮到应用程序中,并设置按钮的属性如下:
ID:myButton
Label:View
X:40
Y:60
    3.在属性面板中,点击View by Category视图按钮。并找出Effects类型的属性。

    4.将mouseUpEffect赋值为发光效果。如下: 
mouseUpEffect:{buttonGlow} 
在Source模式下,<mx:Button>标签代码如下: 
<mx:Button x="40" y="60" label=”View” id=”myButton”  mouseUpEffect="{buttonGlow}"/> 
    5.保存文件。
    6.点击工具栏上的Run按钮编译应用程序。
浏览器会运行你的Flex应用程序。点击View按钮。View按钮就会执行<mx:Glow>标签的发光效果。

    二、在不同的组件间调用效果
    下面我们将制作一个当用户点击按钮时Label组件将出现一组从模糊到清晰的数字。
    1.在Design模式中,从Components面板中拖一个Label组件到应用程序中,并设置Label属性如下:
ID:myLabel
Text:4 8 15 16 23 42
X:40
Y:100
    2.转换到Source模式中,定义模糊效果,在<mx:Glow>标签下输入如下代码: 
<mx:Blur id="numberBlur" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" duration="2000"/> 
    3.在<mx:Blur>标签中指定Label组件为模糊效果的目标组件: 
<mx:Blur id="numberBlur" target="{myLabel}" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" duration="2000"/> 
    4.在<mx:Button>标签中指定click事件为模糊效果: 
<mx:Button id="myButton" label="View" x="40" y="60" click="numberBlur.play();" mouseUpEffect="{buttonGlow}"/> 
    5.在<mx:label>标签中,设置visible属性为false来隐藏Label组件: 
<mx:Label id="myLabel" text="4 8 15 16 23 42" x="40" y="100" visible="false"/> 
    6.当用户在点击View按钮时,设置Label组件的visible属性为true来显示Label组件: 
<mx:Button id="myButton" label="View" x="40" y="60" click="numberBlur.play();myLabel.visible=true" mouseUpEffect="{buttonGlow}"/> 
    完整的代码如下: 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="absolute" click="numberBlur.play()">
 <mx:Glow id="buttonGlow" color="0x99ff66" alphaFrom="1.0"  alphaTo="1.3" duration="1500"/>
 <mx:Blur id="numberBlur" target="{myLabel}" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" duration="2000"/>
 <mx:Button id="myButton" label="View" x="40" y="60" click="numberBlur.play();myLabel.visible=true" mouseUpEffect="{buttonGlow}"/>
 <mx:Label id="myLabel" text="4 8 15 16 23 42" x="40" y="100" visible="false"/>
</mx:Application> 
    7.保存文件。
    8.点击工具栏上的Run按钮编译应用程序。
    浏览器会运行你的Flex应用程序。点击View按钮后就会有一组数字从模糊变为清晰。

    三、创建合成效果
    下面我们将制作一个当用户点击按钮时Label组件将出现一组从模糊到清晰的数字并且Label组件从上向下移动20px的位置。
    1.在Source模式下,在<mx:Blur>标签前输入如下代码: 
<mx:Parallel id="BlurMoveShow">
</mx:Parallel> 
    2.将全句<mx:Blur>标签剪切到</mx:Parallel>前。将<mx:Blur>成为<mx:Parallel>的子标签。
    3.<mx:Blur>标签中,选择target=”{myLabel}”,并剪切到<mx:Parallel>中,如下: 
<mx:Parallel id="BlurMoveShow" target="{myLabel}"> 
    4.定义移动效果。在<mx:Blur>标签后输入如下代码: 
<mx:Move id="numberMove" yBy="20" duration="2000"/> 
Label组件将在2秒中下移20px的位置。
完整的<mx:Parallel>标签如下: 
<mx:Parallel id="BlurMoveShow" target="{myLabel}">
<mx:Blur id="numberBlur"  blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" duration="2000"/>
<mx:Move id="numberMove" yBy="20" duration="2000"/>
</mx:Parallel> 
    5.在<mx:Button>标签中,改变click事件的效果设定为BlurMoveShow,代码如下: 
<mx:Button id="myButton" label="View" x="40" y="60" click="BlurMoveShow.play();myLabel.visible=true" mouseUpEffect="{buttonGlow}"/> 
    6.保存文件。
    7.点击工具栏上的Run按钮编译应用程序。
    浏览器会运行你的Flex应用程序。点击View按钮后就会有一组数字从模糊变为清晰并且这组数字向下移动。
  .
 
 
Google
我们的服务免费课件 课件定做 毕业课件设计 免费课件(QQ:375824467/电话:13996037041)  教程录入:admin    责任编辑:admin 
------------

发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口

  • 上一篇教程:
  • 下一篇教程:
  •    最新热点    最新推荐    相关教程
    基于SWFObject的Flash发布模…
    有用的Flex Builder快捷键…
    偷窥你的源代码:把swf还原成…
    认识flex文本控件
    FLASH的骨骼动画工具
    EditPlus编译你的flex
    把视频文件自动的在服务器端…
    FMS多人连机教程:[一] 初步认…
    关于Flex的几个瓶颈
    cfmx7参考资料(编译)
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)