Flex Examples
The following example shows how you can use the PopUpManager class to launch an modal Image control.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/18/using-the-image-control-as-a-pop-up/ --> <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>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
That is some really nice effect you have there! I can already think of all the stuff i can do with this.
is it possible to use this as a splash screen and have realtime creation progess as the alert text?
Hi,
Really nice website with some nice begginer examples, good for the mass…
I have a question for you. Let say you have a really big image. You want to load a resized version of that image, to speed up the loading process. You use GD library to resize the image, but you don’t want to save the result on the server, instead you want to load it directly in flex. How you do that?
rgs, tiberiu
how bout adding the image on a canvas with buttons like back,save,cancel??
I wanna do such kinda thing, how to go about??
Plz help, needed help urgently
I am looking for a way to have a mouse over effect ignore transparency in an image. I am working with a map that has odd shapes, and would like an effect to occur on mouse over, but only when within the boundary of the map, not when the mouse is over the transparent background.
I see that the glow effect only occurs on the boundary, so I think what I need is possible with some actionscript?
I thought for sure I would find an example here, but so far no luck in my searches. Any advise??
Thank you so much for this example! It was exactly the kind of setup I was looking for, and likely saved me a few hours of work.
Thanks!
Hi,I have an image and i want to remove white color from image.That removing color is same like its background color.If anybody have any idea of this problem please reply me on mitesh@clientdriveninnovation.com .And my application in Flex 3 so please send me action script code of this problem.Thank you
Many thanks for this snippet
Q 1)PopUp list having Checkbox and fields ( Check boxes for multiple selections ) and its also have Apply and Cancell buttons
1. apply button will take selected checkbox items as a input
ii. cancel button choose cancell
Q 2) Advanced datagrid grouping collection ( folder options) when i click on that folder To Display popup datagrid