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

使用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.

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


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部