MX Glow Effect in Flex4


 

MX Glow Effect in Flex4

The Glow effect applies a visual glow effect to a component. The tag of Glow effect is .

The Glow effect applies a visual glow effect to a component. The tag of Glow effect is .

MX Glow Effect in Flex4:

The Glow effect applies a visual glow effect to a component. The tag of Glow effect is <mx:Glow>. The Glow effect uses the following attribute:

<mx:Glow
id="ID"
alphaFrom="val"
alphaTo="val"
blurXFrom="val"
blurXTo="val"
blurYFrom="val"
blurYTo="val"
color="themeColor of the application"
inner="false|true"
knockout="false|true"
strength="2"
/>

In this example you can see how we can use a Glow effect With components.

Example:

<?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"

minWidth="955" minHeight="600">

<fx:Declarations>

<mx:Glow id="glowOn"

alphaFrom="1.0"

alphaTo="0.4"

blurXFrom="0.0"

blurXTo="70.0"

blurYFrom="0.0"

blurYTo="70.0"

color="#13B3AA"

duration="1000"/>

<mx:Glow id="glowOff"

alphaFrom="0.4"

alphaTo="1.0"

blurXFrom="70.0"

blurXTo="0.0"

blurYFrom="70.0"

blurYTo="0.0"

color="#13B3AA"

duration="1000"/>

</fx:Declarations>

<s:Panel title="MX Glow Effect Example"

width="487" height="275"

chromeColor="#000000" color="#CCCCCC">

<mx:ApplicationControlBar width="485" horizontalAlign="center">

0

<s:Label text="Take a cursor on image and show the effect."

fontFamily="verdana" color="#000000"/>

</mx:ApplicationControlBar>

1

<mx:Image id="roseindia"

source="@Embed(source='file:/C:/work/bikrant/image/Ball.png')"

x="181" y="63"

2

rollOverEffect="{glowOn}" rollOutEffect="{glowOff}"/>

</s:Panel>

</s:Application>

3

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Get Adobe Flash player

Download this code

Ads