您的位置: 首页  >  IT文章  >  Flex4之Filters的用法【模糊不清，炽热，阴影、齿条】

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

分类: IT文章 • 2024-10-01 21:22:42
Flex4之Filters的用法【模糊，炽热，阴影、齿条】

先上效果图


Flex4之Filters的用法【模糊不清，炽热，阴影、齿条】
具体代码

Xml代码 Flex4之Filters的用法【模糊不清，炽热，阴影、齿条】Flex4之Filters的用法【模糊不清，炽热，阴影、齿条】
  1. <span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3. xmlns:s="library://ns.adobe.com/flex/spark"
  4. xmlns:mx="library://ns.adobe.com/flex/mx"
  5. skinClass="TDFPanelSkin"
  6. viewSourceURL="srcview/index.html"
  7. creationComplete="init()">
  9. <fx:Script>
  10. <![CDATA[
  12. private var time:Timer;
  13. private var count:int = 0;
  15. private function init():void{
  16. time = new Timer(1000,0);
  17. time.addEventListener(TimerEvent.TIMER,timeHandler);
  18. time.start();
  20. }
  22. private function timeHandler(ev:TimerEvent):void{
  23. count ++;
  24. dynamicText.text = String(count);
  25. }
  27. private function filterHandler(ev:MouseEvent):void{
  28. var filterArr:Array = [];
  30. blurBox.selected ? filterArr.push(blur): null;
  31. glowBox.selected ? filterArr.push(glow): null;
  32. shadowBox.selected? filterArr.push(dropShadow): null;
  33. bevelBox.selected ? filterArr.push(bevel): null;
  35. textSample.filters = filterArr;
  36. dynamicText.filters = filterArr;
  37. }
  38. ]]>
  39. </fx:Script>
  41. <s:layout>
  42. <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
  43. </s:layout>
  45. <fx:Declarations>
  46. <!--filters-->
  47. <s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
  48. <s:BlurFilter id="blur" blurX="4" blurY="4" quality="2" />
  49. <s:DropShadowFilter id="dropShadow" alpha="0.35" blurX="6" blurY="6" distance="6" color="#000000" angle="90" />
  50. <s:BevelFilter id="bevel" angle="45" blurX="0.5" blurY="0.5" distance="4" strength="0.7" highlightAlpha="0.7" shadowAlpha="0.7" />
  51. </fx:Declarations>
  53. <s:Panel title="Filters Samples"
  54. width="600" height="100%"
  55. color="0x000000"
  56. borderAlpha="0.15">
  58. <s:layout>
  59. <s:VerticalLayout horizontalAlign="center"
  60. paddingLeft="10" paddingRight="10"
  61. paddingTop="10" paddingBottom="10"/>
  62. </s:layout>
  64. <s:Label id="textSample" text="SAMPLE TEXT" color="0x000000"
  65. fontWeight="bold" fontSize="40" filters="{[bevel]}" />
  67. <s:HGroup width="100%" color="#323232" horizontalAlign="center">
  68. <s:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" />
  69. <s:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" />
  70. <s:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" />
  71. <s:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" />
  72. </s:HGroup>
  74. <s:Label id="dynamicText" text="0" color="#323232" fontSize="18" filters="{[bevel]}" />
  76. </s:Panel>
  78. </s:Application></span>

相关推荐