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.