【复用】自定义控件之-高级图像控件

使用FLEX的时候总是希望能够有足够多的控件来用，实际上自FLEX流行以来网络上也已经出现了各种各样的FLEX的插件，控件，所以下次你要编写一个什么控件的时候，先停下来GOOGLE一下说不定人家已经写好了呢，（最近看见的一个奇特的东西就是MAC地址的输入控件了,这样的东西都存在了，还有什么不可能呢），再比如下面介绍的这款图像显示控件，如果你需要一个很酷的图像显示控件，那么别犹豫就是它了，可以定制圆角，交叉效果，溶解效果....不说了直接献上

My new AdvancedImage component takes a few seperate and common needs for an image and rolls it into one nice package. AdvancedImage will allow you to easily define rounded corners (seperatly), pass in a rollover DisplayObject and will even handle cross-dissolves. I needed to provide this component to someone newer to Flex so I tried to makes it's use as simple as possible.

<graphics:AdvancedImage
id="myExample"
width="150"
height="170"
topRightCornerRadius="8"
bottomRightCornerRadius="8"
source="assets/waterfall.jpg"
crossOverEffect="{createCOE()}"
mouseOverObject="{getMouseOverMask()}"
/>

• crossOverEffect is the effect you wish to use when changing images. when you update myExample.source, if an effect has been defined it will use that method to display the new image on top of the old one. Otherwise myExample.source = "newImage.jpg" will work just like a regular Image component.
• mouseOverObject is just that. If you pass in a displayObject, on mouse over, that object will be enlarges to the same size as the image and displayed. In my code example I'm just using a simple white canvas with alpha set to 0.46. This is a simpler than expected example of a mouseOverObject.
• The corner radiuses are applied via a top level Canvas, AdvancedImage actualy extends Canvas, not Image. So any images or mouse overs you pass in will be masked.

Download the latest version of AdvancedImage