触发器名称 对应事件名称 事件描述
addedEffect added 当组件被添加到容器时触发
createCompleteEffect createComplete 当组件完成绘制时触发
focusInEffect focusIn 当组件获得光标焦点时触发
focusOutEffect focusOut 当组件失去光标焦点时触发
hideEffect hide 当组件变成不可见时触发
showEffect show 当组件变成可见时触发
mouseDownEffect mouseDown 当鼠标在组件上按下时触发
mouseUpEffect mouseUp 当鼠标在组件上松开时触发
rollOverEffect rollOver 当鼠标移动到组件上时触发
moveEffect move 当组件被移动时触发
resizeEffect resize 当组件改变大小时触发
Effect中
引用
<mx:AnimateProperty>可实现拉伸效果
<mx:Blur>模糊效果
<mx:Dissolve>实现淡出淡入效果,与<mx:Fade>相似
<mx:Glow>外发光效果
<mx:Iris>以矩形方式出现或消失
<mx:Move>移动效果
<mx:Parallel>多种效果叠加
<mx:Pause>停止 mx.effects.easing.Bounce.easeOut可产生弹动效果
<mx:Resize>改变大小
<mx:Rotate>旋转角度
<mx:SoundEffect>声音效果
<mx:WipeDown>从上往下消失或出现
<mx:WipeLeft>从右往左消失或出现
<mx:WipeRight>从左往右消失或出现
<mx:WipeUp>从下往上消失或出现
<mx:Zoom>放大或缩小
</mx:Transition>不同state切换时的过渡效果
Charts(统计)
<mx:AreaChart>是一种以面积作为表示方式
<mx:AxisRenderer>是一种轴图,股票交易常以这种方式表示
<mx:BarChart>是柱状图
<mx:BubbleChart>气泡图
<mx:CandlestickChart>一种比较有趣的图,”涨”跟”跌”的颜色会不一样
<mx:CategoryAxis>跟AxisRenderer很像
<mx:ColumnChart>跟<mx:BarChart>很像
<mx:DateTimeAxis>以日期为轴的折线图
<mx:GridLines>多条线图
<mx:HLOCChart>跟AxisRenderer很像
<mx:Legend>图例,离散的点
<mx:LinearAxis>Axis系列
<mx:LineChart>折线图
<mx:LogAxis>Axis系列
<mx:PieChart>饼图
<mx:PlotChart>跟Legend很像
1.Resize
尺寸调整效果,改变组件的长和宽。当改变组件的长和宽时,处于同一个容器的其他组件的大小也可能会相应改变,如果该容器使用了绝对定位则不会发生这种情况。
Java代码
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Effect class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// Event handler for the effectEnd event.
private function endEffectHandler():void {
Alert.show("Effect Ended!");
}
// Event handler for the reset button.
private function resetHandler():void {
expand.end();
img.width=30;
img.height=60;
button1.enabled=true;
}
]]>
</mx:Script>
<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"
duration="10000" effectEnd="endEffectHandler();"/>
<mx:Panel title="Resize Effect Example" width="100%" height="100%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Use the Button controls to control the Resize effect."/>
<mx:Image id="img" width="30" height="60"
source="@Embed(source='1.jpg')"/>
<mx:ControlBar>
<mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
<mx:Button label="Pause" click="expand.pause();"/>
<mx:Button label="Resume" click="expand.resume();"/>
<mx:Button label="Reverse" click="expand.reverse();"/>
<mx:Button label="End" click="expand.end();"/>
<mx:Button label="Reset" click="resetHandler();"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Effect class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// Event handler for the effectEnd event.
private function endEffectHandler():void {
Alert.show("Effect Ended!");
}
// Event handler for the reset button.
private function resetHandler():void {
expand.end();
img.width=30;
img.height=60;
button1.enabled=true;
}
]]>
</mx:Script>
<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"
duration="10000" effectEnd="endEffectHandler();"/>
<mx:Panel title="Resize Effect Example" width="100%" height="100%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Use the Button controls to control the Resize effect."/>
<mx:Image id="img" width="30" height="60"
source="@Embed(source='1.jpg')"/>
<mx:ControlBar>
<mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
<mx:Button label="Pause" click="expand.pause();"/>
<mx:Button label="Resume" click="expand.resume();"/>
<mx:Button label="Reverse" click="expand.reverse();"/>
<mx:Button label="End" click="expand.end();"/>
<mx:Button label="Reset" click="resetHandler();"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
2.Glow
发光效果,使用了GlowFilter 滤镜。当对组件使用了该效果,不可再使用GlowFilter 滤镜和其他发光效果。
Java代码
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Glow effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Glow id="glowImage" duration="1000"
alphaFrom="1.0" alphaTo="0.3"
blurXFrom="0.0" blurXTo="50.0"
blurYFrom="0.0" blurYTo="50.0"
color="0x00FF00"/>
<mx:Glow id="unglowImage" duration="1000"
alphaFrom="0.3" alphaTo="1.0"
blurXFrom="50.0" blurXTo="0.0"
blurYFrom="50.0" blurYTo="0.0"
color="0x0000FF"/>
<mx:Panel title="Glow Effect Example" width="75%" height="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/>
<mx:Image source="@Embed(source='1.jpg')"
mouseDownEffect="{glowImage}"
mouseUpEffect="{unglowImage}"/>
</mx:Panel>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Glow effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Glow id="glowImage" duration="1000"
alphaFrom="1.0" alphaTo="0.3"
blurXFrom="0.0" blurXTo="50.0"
blurYFrom="0.0" blurYTo="50.0"
color="0x00FF00"/>
<mx:Glow id="unglowImage" duration="1000"
alphaFrom="0.3" alphaTo="1.0"
blurXFrom="50.0" blurXTo="0.0"
blurYFrom="50.0" blurYTo="0.0"
color="0x0000FF"/>
<mx:Panel title="Glow Effect Example" width="75%" height="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/>
<mx:Image source="@Embed(source='1.jpg')"
mouseDownEffect="{glowImage}"
mouseUpEffect="{unglowImage}"/>
</mx:Panel>
</mx:Application>
3.Iris
彩虹效果,组件以矩形方式,从中心放大或缩小到中心。属于遮罩效果。
Java代码
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Iris effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Iris id="irisOut" duration="1000" showTarget="true"/>
<mx:Iris id="irisIn" duration="1000" showTarget="false"/>
<mx:Panel title="Iris Effect Example" width="75%" height="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Use the Iris effect to show or hide the phone image."/>
<mx:Image id="flex" source="@Embed(source='1.jpg')"
visible="{cb1.selected}"
showEffect="{irisIn}" hideEffect="{irisOut}"/>
<mx:CheckBox id="cb1" label="visible" selected="true"/>
</mx:Panel>
</mx:Application>
addedEffect added 当组件被添加到容器时触发
createCompleteEffect createComplete 当组件完成绘制时触发
focusInEffect focusIn 当组件获得光标焦点时触发
focusOutEffect focusOut 当组件失去光标焦点时触发
hideEffect hide 当组件变成不可见时触发
showEffect show 当组件变成可见时触发
mouseDownEffect mouseDown 当鼠标在组件上按下时触发
mouseUpEffect mouseUp 当鼠标在组件上松开时触发
rollOverEffect rollOver 当鼠标移动到组件上时触发
moveEffect move 当组件被移动时触发
resizeEffect resize 当组件改变大小时触发
Effect中
引用
<mx:AnimateProperty>可实现拉伸效果
<mx:Blur>模糊效果
<mx:Dissolve>实现淡出淡入效果,与<mx:Fade>相似
<mx:Glow>外发光效果
<mx:Iris>以矩形方式出现或消失
<mx:Move>移动效果
<mx:Parallel>多种效果叠加
<mx:Pause>停止 mx.effects.easing.Bounce.easeOut可产生弹动效果
<mx:Resize>改变大小
<mx:Rotate>旋转角度
<mx:SoundEffect>声音效果
<mx:WipeDown>从上往下消失或出现
<mx:WipeLeft>从右往左消失或出现
<mx:WipeRight>从左往右消失或出现
<mx:WipeUp>从下往上消失或出现
<mx:Zoom>放大或缩小
</mx:Transition>不同state切换时的过渡效果
Charts(统计)
<mx:AreaChart>是一种以面积作为表示方式
<mx:AxisRenderer>是一种轴图,股票交易常以这种方式表示
<mx:BarChart>是柱状图
<mx:BubbleChart>气泡图
<mx:CandlestickChart>一种比较有趣的图,”涨”跟”跌”的颜色会不一样
<mx:CategoryAxis>跟AxisRenderer很像
<mx:ColumnChart>跟<mx:BarChart>很像
<mx:DateTimeAxis>以日期为轴的折线图
<mx:GridLines>多条线图
<mx:HLOCChart>跟AxisRenderer很像
<mx:Legend>图例,离散的点
<mx:LinearAxis>Axis系列
<mx:LineChart>折线图
<mx:LogAxis>Axis系列
<mx:PieChart>饼图
<mx:PlotChart>跟Legend很像
1.Resize
尺寸调整效果,改变组件的长和宽。当改变组件的长和宽时,处于同一个容器的其他组件的大小也可能会相应改变,如果该容器使用了绝对定位则不会发生这种情况。
Java代码
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Effect class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// Event handler for the effectEnd event.
private function endEffectHandler():void {
Alert.show("Effect Ended!");
}
// Event handler for the reset button.
private function resetHandler():void {
expand.end();
img.width=30;
img.height=60;
button1.enabled=true;
}
]]>
</mx:Script>
<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"
duration="10000" effectEnd="endEffectHandler();"/>
<mx:Panel title="Resize Effect Example" width="100%" height="100%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Use the Button controls to control the Resize effect."/>
<mx:Image id="img" width="30" height="60"
source="@Embed(source='1.jpg')"/>
<mx:ControlBar>
<mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
<mx:Button label="Pause" click="expand.pause();"/>
<mx:Button label="Resume" click="expand.resume();"/>
<mx:Button label="Reverse" click="expand.reverse();"/>
<mx:Button label="End" click="expand.end();"/>
<mx:Button label="Reset" click="resetHandler();"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Effect class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// Event handler for the effectEnd event.
private function endEffectHandler():void {
Alert.show("Effect Ended!");
}
// Event handler for the reset button.
private function resetHandler():void {
expand.end();
img.width=30;
img.height=60;
button1.enabled=true;
}
]]>
</mx:Script>
<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"
duration="10000" effectEnd="endEffectHandler();"/>
<mx:Panel title="Resize Effect Example" width="100%" height="100%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Use the Button controls to control the Resize effect."/>
<mx:Image id="img" width="30" height="60"
source="@Embed(source='1.jpg')"/>
<mx:ControlBar>
<mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
<mx:Button label="Pause" click="expand.pause();"/>
<mx:Button label="Resume" click="expand.resume();"/>
<mx:Button label="Reverse" click="expand.reverse();"/>
<mx:Button label="End" click="expand.end();"/>
<mx:Button label="Reset" click="resetHandler();"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
2.Glow
发光效果,使用了GlowFilter 滤镜。当对组件使用了该效果,不可再使用GlowFilter 滤镜和其他发光效果。
Java代码
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Glow effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Glow id="glowImage" duration="1000"
alphaFrom="1.0" alphaTo="0.3"
blurXFrom="0.0" blurXTo="50.0"
blurYFrom="0.0" blurYTo="50.0"
color="0x00FF00"/>
<mx:Glow id="unglowImage" duration="1000"
alphaFrom="0.3" alphaTo="1.0"
blurXFrom="50.0" blurXTo="0.0"
blurYFrom="50.0" blurYTo="0.0"
color="0x0000FF"/>
<mx:Panel title="Glow Effect Example" width="75%" height="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/>
<mx:Image source="@Embed(source='1.jpg')"
mouseDownEffect="{glowImage}"
mouseUpEffect="{unglowImage}"/>
</mx:Panel>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Glow effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Glow id="glowImage" duration="1000"
alphaFrom="1.0" alphaTo="0.3"
blurXFrom="0.0" blurXTo="50.0"
blurYFrom="0.0" blurYTo="50.0"
color="0x00FF00"/>
<mx:Glow id="unglowImage" duration="1000"
alphaFrom="0.3" alphaTo="1.0"
blurXFrom="50.0" blurXTo="0.0"
blurYFrom="50.0" blurYTo="0.0"
color="0x0000FF"/>
<mx:Panel title="Glow Effect Example" width="75%" height="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/>
<mx:Image source="@Embed(source='1.jpg')"
mouseDownEffect="{glowImage}"
mouseUpEffect="{unglowImage}"/>
</mx:Panel>
</mx:Application>
3.Iris
彩虹效果,组件以矩形方式,从中心放大或缩小到中心。属于遮罩效果。
Java代码
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Iris effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Iris id="irisOut" duration="1000" showTarget="true"/>
<mx:Iris id="irisIn" duration="1000" showTarget="false"/>
<mx:Panel title="Iris Effect Example" width="75%" height="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Use the Iris effect to show or hide the phone image."/>
<mx:Image id="flex" source="@Embed(source='1.jpg')"
visible="{cb1.selected}"
showEffect="{irisIn}" hideEffect="{irisOut}"/>
<mx:CheckBox id="cb1" label="visible" selected="true"/>
</mx:Panel>
</mx:Application>