flex 4 Filters
<s:RectangularDropShadow id="dropShadow" blurX="10" blurY="10" alpha="0.5"
distance="4" angle="90" color="0x000000"
left="1" top="1" right="1" bottom="1"> </s:RectangularDropShadow>
angle的角度,当它为0时,是水平向右的,当它为90度时,是竖直向下的。
下面是四种filter的例子,
<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" />
<?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="TDFGradientBackgroundSkin"
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>
flex 4 Filters的更多相关文章
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十)态势标绘模块
config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(四)地图导航控件模块
config.xml文件的配置如下: <widget left="10" top="50" config="widgets/Navigation ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(三)显示地图坐标系模块
config.xml文件的配置如下: <widget left="3" bottom="3" config="widgets/Coordinat ...
- DarkStone - 跨平台移动应用开发之 Flex 的崛起
我的好友Ds 发布一个flex的消息.我帮忙转发 DarkStone - 跨平台移动应用开发之 Flex 的崛起 (2013-08-20 22:28:32) 此文章由 周戈 (DarkSton ...
- flex+java+blazeds 多通道好文
http://www.cnblogs.com/noam/archive/2010/08/05/1793504.html blazeds, spring3整合实现RPC服务和消息服务 环境: MyEcl ...
- flex 4 transition
<s:transitions> <s:Transition fromState="default"> <s:Parallel> <mx:R ...
- Flex的基础用法【转】
//获得屏幕的分辨率 var x:Number=Capabilities.screenResolutionX; var y:Number=Capabilities.screenResolutionY; ...
- Flex中如何通过horizontalTickAligned和verticalTickAligned样式指定线图LineChart横竖方向轴心标记的例子
原文http://blog.minidx.com/2008/12/03/1669.html 接下来的例子演示了Flex中如何通过horizontalTickAligned和verticalTickAl ...
- Flex里的特效
Flex中提供了丰富的效果组件.因为效果是一种依据时间渐变的过程,因此全部效果都具有duration属性,用来设置播放时间(以毫秒为单位).也能够通过设置repeatCount属性和repeatD ...
随机推荐
- 代码复用 -- 深入了解javascript
/* 代码复用 */ /* 一.避免 */ /* 模式1:默认模式 */ function Parent() { this.name = "123"; } Parent.proto ...
- [转载]char * 和char []的区别---之第二篇
原文地址:http://blog.sina.com.cn/s/blog_74a4593801019keb.html main() { char *p="abc123ABC";//c ...
- Using sql azure for Elmah
The MSDN docs contain the list of T-SQL that is either partially supported or not supported. For ex ...
- idea maven添加jar包
在“项目结构“里设置 选择libaray,添加jar包
- fiddler 新发现
就一句话,记录一下 urlreplace baidu.com taobao.com //Fiddler2\Scripts\SampleRules.js 这里发现的 case "urlrepl ...
- Sqli-labs less 31
Less-31 Less-31与上述两个例子的方式是一样的,我们直接看到less-31的sql语句: 所以payload为: http://127.0.0.1:8080/sqli-labs/Less- ...
- javascript中的JSON序列化与反序列化
简单粗暴上代码: function create() { this.name = "jack"; this.sex = "man"; } create.prot ...
- iOS警告-Warning: Error creating LLDB target at path(模拟器警告)
Warning: Error creating LLDB target at path '/Users/apple/Library/Developer/Xcode/DerivedData/Observ ...
- Windows Server2008+IIS7部署网站的日期格式问题
最近部署一个ASP网站,发现网站的某个功能上的日历在原来的服务器上访问时是会根据特定日期来对该日进行加粗加红显示的,但部署到我公司机房的win2008服务器上访问时却没有这效果了. 于是通过本地部署, ...
- Chrome 开发工具指南
Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...