Image embed and resizing

The follwing example shows you how you can import an image (gif, jpeg, png ...) on a canvas


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Canvas width="100%" height="100%">

<mx:Image
id="imageLoader"
source="@Embed('assets/myImage.jpg')"
width="200"
height="250"
x="10"
y="10"
scaleContent="true">
</mx:Image>

</mx:Canvas>

</mx:Application>




By adding the @Embed directive onto the image control, causes the complier to include the image file (in this case a JPG file) with the SWF file. You could also provide an absolute URL path:



<mx:Image id="imageLoader" source="http://[YOUR HOSTNAME]/myImage.jpg')" />





Scaling an image

You can scale an image size using the 'scaleX' or 'scaleY' properties. The default value is set at '1' and its relative size can be adjusted to a fraction (decimal) value that represent percentage. For example setting the scaleX='2.0' would essentially resize the width of the image by 200%.



<mx:Image
id="imageLoader"
source="@Embed('assets/myImage.jpg')"
scaleX="2.0">
</mx:Image>



 

Reader Comments



Labels