Resizing an image on mouseover with Flex 2

I was updating my personal site created from Flex 2 MXML and ActionScript and needed to create hyperlinks from thumbnail images. The html markup for the image is created from content from an XML file. In the past, one had to escape html markup contained in XML elements and create a link to a larger size of the same image. In short, I was hoping to avoid that unpleasantness.

Enter the mx.effects.Resize class. Using this object you can control the resizing of an image when the user passes their mouse over the image. For example, you have a thumbnail image that you are displaying that is 150 by 150 pixels in your MXML file:

<mx:Image source="yourImgPath/imgName.jpg"
height="150"
width="150"
/>

You want to enlarge the image to a size of 450 by 450 pixels based on the action of a user. Instead of a link to a larger image, we will enlarge the image when the user passes their mouse over the image. To do this you can utilize the mx.effects.Resize class. Enter the following into your MXML file:

<mx:Resize id="resizeBig"
widthFrom="150" widthTo="450"
heightFrom="150" heightTo="450"
/>
<mx:Resize id="resizeSmall"
widthFrom="450" widthTo="150"
heightFrom="450" heightTo="150"
/>

Then, within the Image instance, modify it with the following:

<mx:Image source="yourImgPath/imgName.jpg"
height="150"
width="150"
rollOverEffect="{resizeBig}"
rollOutEffect="{resizeSmall}"
/>

Finally, recompile and you will see that when the user passes their mouse over the image it enlarges without the use of links to the larger image.