Home Tutorial Flex Flex4 Components Image Control in Flex4

 
 

Share on Google+Share on Google+
Image Control in Flex4
Posted on: May 24, 2010 at 12:00 AM
Advertisement
The Image Control is a MX component. It has no Spark component. Flex Supports different types of file format like JPEG, GIF, SVG, PNG and SWF file. You can import these files in your application using Image control.

Image control in Flex4:

The Image Control is a MX component. It has no Spark component. Flex Supports different types of file format like JPEG, GIF, SVG, PNG and SWF file. You can import these files in your application using Image control. Flex importing GIF, JPEG, PNG, and SWF files at run time, and embedding GIF, JPEG, PNG, SVG, and SWF at compile time.
There are two forms of source property.
1.source="@Embed(source='relativeOrAbsolutePath')": Flex loads the image at compile time.
2.source="relativeOrAbsolutePathOrURL": Flex loads the image at run time.
You can set the size of Image using height, width property.
The tag of Image control is <mx:Image>.

Example:

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Declarations>

<mx:Resize id="bigImage"

widthFrom="50" widthTo="100"

heightFrom="50" heightTo="100"/>

<mx:Resize id="normalImage"

widthFrom="100" widthTo="50"

heightFrom="100" heightTo="50"/>

</fx:Declarations>

<s:Panel title="Image Control Example" width="373">

<s:HGroup width="375" height="196">

<s:VGroup>

<mx:Form>

<mx:FormItem id="img1" label="Nature Image" height="76" fontWeight="bold">

<mx:Image source="@Embed(source='file:/C:/work/bikrant/flex4component/image/nature.jpg')" height="76"

 width="100"/>

</mx:FormItem>

<mx:FormItem id="img2" label="Mountain Image" height="76" fontWeight="bold">

<mx:Image source="@Embed(source='file:/C:/work/bikrant/flex4component/image/mountain.jpg')" height="75"

 width="100"/>

</mx:FormItem>

</mx:Form>

</s:VGroup>

<s:VGroup width="114" height="189">

<s:CheckBox id="chk" label="Select"/>

<mx:Image source="@Embed(source='file:/C:/work/bikrant/flex4component/image/building1.jpg')"

height="50" width="50"

visible="{chk.selected}"/>

<mx:Image source="@Embed(source='file:/C:/work/bikrant/flex4component/image/globe.png')"

height="50" width="50"

rollOverEffect="{bigImage}"

rollOutEffect="{normalImage}"/>

</s:VGroup>

</s:HGroup>

</s:Panel>

</s:Application>

In this example you can see how we can use a Image control in Flex4.

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisement

Related Tags for Image Control in Flex4:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: May 24, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com