`
JavaCrazyer
  • 浏览: 3008789 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

Flex4之Filters的用法【模糊,炽热,阴影、齿条】

阅读更多

先上效果图



 具体代码

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   skinClass="TDFPanelSkin" 
			   viewSourceURL="srcview/index.html"
			   creationComplete="init()">
	
	<fx:Script>
		<![CDATA[
			
			private var time:Timer;
			private var count:int = 0;
			
			private function init():void{
				time = new Timer(1000,0);
				time.addEventListener(TimerEvent.TIMER,timeHandler);
				time.start();
				
			}
			
			private function timeHandler(ev:TimerEvent):void{
				count ++;
				dynamicText.text = String(count);
			}
			
			private function filterHandler(ev:MouseEvent):void{
				var filterArr:Array = [];
				
				blurBox.selected ? filterArr.push(blur): null;
				glowBox.selected ? filterArr.push(glow): null;
				shadowBox.selected? filterArr.push(dropShadow): null;
				bevelBox.selected ? filterArr.push(bevel): null;
				
				textSample.filters = filterArr;
				dynamicText.filters = filterArr;
			}
		]]>
	</fx:Script>
	
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
	</s:layout>
	
	<fx:Declarations>
		<!--filters-->
		<s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
		<s:BlurFilter id="blur" blurX="4" blurY="4" quality="2" />
		<s:DropShadowFilter id="dropShadow" alpha="0.35" blurX="6" blurY="6" distance="6" color="#000000" angle="90" />
		<s:BevelFilter id="bevel" angle="45" blurX="0.5" blurY="0.5" distance="4" strength="0.7" highlightAlpha="0.7" shadowAlpha="0.7"  />
	</fx:Declarations>
	
	<s:Panel title="Filters Samples"
			 width="600" height="100%"
			 color="0x000000" 
			 borderAlpha="0.15">
		
		<s:layout>
			<s:VerticalLayout horizontalAlign="center" 
							  paddingLeft="10" paddingRight="10" 
							  paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<s:Label id="textSample" text="SAMPLE TEXT" color="0x000000" 
				 fontWeight="bold" fontSize="40" filters="{[bevel]}" />
		
		<s:HGroup width="100%" color="#323232" horizontalAlign="center">
			<s:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" />
			<s:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" />
			<s:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" />
			<s:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" />
		</s:HGroup>
		
		<s:Label id="dynamicText" text="0" color="#323232" fontSize="18" filters="{[bevel]}" />
		
	</s:Panel>
	
</s:Application>

 

  • 大小: 17.4 KB
分享到:
评论

相关推荐

    flex实现阴影效果

    在本文中,我们将深入探讨如何使用Flex技术来实现阴影效果。Flex是一种强大的开发框架,主要用于构建富互联网应用程序(RIA),特别是在Adobe AIR和Flash Player环境中。它提供了丰富的组件库、强大的数据绑定机制...

    flex4自定义事件用法

    下面将详细介绍Flex4自定义事件的用法,以及如何在一个完整的项目中导入和运行。 1. **创建自定义事件类** - 首先,我们需要创建一个继承自`Event`类的新类。通常,我们会选择`flash.events.Event`或`mx.events....

    Flex 特效2-缩放模糊效果

    ### Flex 特效2-缩放模糊效果 #### 概述 在Flex中,我们可以创建各种视觉效果,其中“缩放模糊效果”是一种常见的特效,它可以在元素放大或缩小的过程中添加模糊效果,使得动画更加流畅自然。本篇文档将详细介绍...

    flex4 中文 教程 详细介绍flex4 的用法

    Flex 4 中文教程主要面向没有基础的开发人员,通过深入浅出的方式介绍如何使用 Flex 4 构建动态、互动的 Web 应用。教程将详细介绍四种不同的架构方法,这些方法都是基于 Flex 与 BlazeDS 之间的数据通信,结合 ...

    flex4 实战 flex4 in action

    《Flex 4 实战:Flex 4 in Action》是一本深度探讨Adobe Flex 4开发的实战书籍,由T. Ahmed, D. Orlando, J. C. Bland 和 J. Hooks合著。这本书不仅提供了理论知识,还包含了丰富的实战案例,旨在帮助读者熟练掌握...

    FLEX4_Flex4教程 - FLEX4从入门到精通,挺不错的值得一看

    Flex4,全称为Adobe Flex 4,是Adobe公司推出的一款用于构建富互联网应用程序(Rich Internet Applications,RIAs)的框架。这个框架基于ActionScript 3.0编程语言和Flash Player或Adobe AIR运行时环境,为开发者...

    Flex4 一学就会 (Hello Flex4)

    Flex4,全称为Adobe Flex 4,是一款由Adobe公司开发的开源框架,主要用于构建富互联网应用程序(Rich Internet Applications,简称RIA)。Flex4以其强大的组件库、灵活的样式系统和优化的图形渲染引擎,极大地提升了...

    flex4 学习全部资料

    通过API文档,你可以了解每个类的功能、属性、方法和事件,这对于深入理解和使用Flex4至关重要。 三、Flex学习文档 学习文档通常包含了Flex4的基础知识,如MXML和ActionScript3语法、组件使用、数据绑定、事件处理...

    Flex 4 高级编程 Flex 4 高级编程

    Flex 4,全称为Adobe Flex 4,是Adobe公司推出的一种用于构建富互联网应用程序(RIA)的开源框架,主要基于ActionScript和MXML语言。它提供了丰富的用户界面组件和强大的数据处理能力,使得开发者能够创建出具有高度...

    flex4 学习资料

    12. **国际化和本地化**:掌握Flex4中实现多语言支持的方法,包括资源bundle的使用和配置。 13. **移动设备开发**:Flex4支持移动平台开发,学习如何创建针对手机和平板的应用,利用StageWebView和StageVideo等特性...

    Flex3与flex4的区别

    下面将详细探讨Flex4与Flex3在组件架构、布局管理、状态使用、效果实现以及迁移过程中的关键差异。 ### 组件和外观架构 Flex4最显著的变化之一是引入了全新的组件和外观架构,称为Spark。这一架构不仅提高了性能,...

    Flex4中文快速入门

    Flex4,全称为Adobe Flex 4,是Adobe公司推出的一款用于构建富互联网应用程序(Rich Internet Applications,RIAs)的框架,主要基于ActionScript和MXML。这个框架在2010年发布,提供了更为强大的图形渲染能力,以及...

    Flex4_Menu和List的使用源码

    在Flex4中,`Menu`和`List`是两种重要的组件,它们被广泛用于构建用户界面,提供下拉菜单和列表展示数据的功能。本实例深入探讨了如何在Flex4环境中有效地利用这两个组件。 首先,`Menu`组件在Flex中常用于创建下拉...

    Flex4开发实践PPT

    通过这份Flex4开发实践PPT,开发者可以系统地学习Flex4的各个方面,从基础组件使用到高级特性的探索,逐步成为一名熟练的Flex4开发者。无论你是初学者还是有一定基础的开发者,都能从中受益匪浅,加深对Flex4技术的...

    Flex4实战代码

    Flex4,全称为Adobe Flex 4,是Adobe公司推出的一款用于构建富互联网应用程序(RIA)的框架,基于ActionScript 3.0编程语言和Flash Player或Adobe AIR运行时环境。这个压缩包文件包含了多个章节的实战代码,涵盖了...

    Flex3与Flex4对比

    本文旨在详细介绍Flex3与Flex4之间的主要区别,特别是Flex4相较于Flex3的新功能与改进之处。通过对比分析,帮助开发者更好地理解两者之间的差异,从而根据项目需求选择最适合的技术栈。 #### 二、功能区别 ##### 1...

    flex 4 学习资料

    Flex 4 ColumnChart 图表使用实例ColumnChart_RIA前线-Flex富应用、Flex中文教程、Flex实例源码 Flex实现ColumnChart柱图为圆角矩形的itemRenderer - 代码分享 - 开源中国社区 flex 动态生成柱状图,折线图_IT空间_...

    flex 缩放模糊 代码

    4. **模糊效果**:在Flex中,可以使用BitmapData类的`blur`方法实现模糊效果。首先,你需要获取需要模糊的对象的BitmapData实例,然后对这个实例调用`blur`方法。模糊度可以通过参数设置,更大的数值意味着更明显的...

    flex4组建以及DEMO实例.安装序列号

    Flex是Adobe公司开发的...通过实践Flex4的DEMO实例,开发者可以快速掌握Flex4的基本用法,进一步提高开发效率。同时,理解并应用Flex4的组件、样式、布局、报表和认证机制,能够帮助开发者构建出美观、高效的RIA应用。

    Effortless Flex 4 Development

    《Effortless Flex 4 Development》是一本由Larry Ullman撰写的专注于Flex 4开发技术的书籍。这本书旨在帮助读者轻松地掌握Flex 4的开发技能,为那些希望深入理解并应用Flex 4进行应用程序设计与开发的读者提供了一...

Global site tag (gtag.js) - Google Analytics