Image Control in Flex4


 

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.

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')"

0

height="50" width="50"

visible="{chk.selected}"/>

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

1

height="50" width="50"

rollOverEffect="{bigImage}"

rollOutEffect="{normalImage}"/>

2

</s:VGroup>

</s:HGroup>

</s:Panel>

3

</s:Application>

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

Output:

4

Running Application:

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

Download this code

5

Ads