Search Flex Samples

Using the Image control as a pop up

The following example shows how you can use the PopUpManager class to launch an modal Image control.





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

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

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Style>

global {

modalTransparencyBlur: 0;

modalTransparency: 0.9;

modalTransparencyColor: black;

modalTransparencyDuration: 500;

}

</mx:Style>



<mx:Script>

<![CDATA[

import mx.controls.Image;

import mx.managers.PopUpManager;



private const IMG_PREFIX:String = "http://www.helpexamples.com/flash/images/";



private function popIt(src:String):void {

var img:Image = new Image();

img.addEventListener(MouseEvent.CLICK, img_click);

img.addEventListener(Event.COMPLETE, img_complete);

img.load(IMG_PREFIX + src);

img.toolTip = img.source.toString();

PopUpManager.addPopUp(img, this, true);

}



private function img_complete(evt:Event):void {

var img:Image = evt.currentTarget as Image;

img.width = img.contentWidth;

img.height = img.contentHeight;

PopUpManager.centerPopUp(img);

}



private function img_click(evt:MouseEvent):void {

var img:Image = evt.currentTarget as Image;

PopUpManager.removePopUp(img);

}

]]>

</mx:Script>

<mx:ApplicationControlBar dock="true">

<mx:Button label="image 1" click="popIt('image1.jpg');" />

<mx:Button label="image 2" click="popIt('image2.jpg');" />

<mx:Button label="image 3" click="popIt('image3.jpg');" />

</mx:ApplicationControlBar>

</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples