Tag Archive for 'image'

03
May

Displaying an error tool tip for an Image control in Flex

The following example shows how you can display an error string on the Flex Image control when an image is unable to be loaded.

Full code after the jump.

Continue reading ‘Displaying an error tool tip for an Image control in Flex’

17
Mar

Displaying an image saved as a Base64 encoded string in Flex 3

In a previous example, “Using the ImageSnapshot class to capture images as JPEGs or PNGs in Flex 3″, we saw how you could convert an item on the display list into a base64 encoded string.

The following example shows how you can take a base64 encoded string and load it into a Flex Image control using the decode() and toByteArray() methods in the mx.utils.Base64Decoder class, and the load() method in the mx.controls.Image class.

Full code after the jump.

Continue reading ‘Displaying an image saved as a Base64 encoded string in Flex 3′

08
Mar

Creating a simple image gallery with the Flex TileList control

Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.

Full code after the jump.

Continue reading ‘Creating a simple image gallery with the Flex TileList control’

02
Mar

Setting a custom broken image skin for the Image control in Flex

The following example shows how you can set a custom broken image skin for the Flex Image control by setting the brokenImageSkin style.

Full code after the jump.

Continue reading ‘Setting a custom broken image skin for the Image control in Flex’

18
Nov

Displaying a hand cursor when mousing over a Flex control

I’ve seen this request come up a few times before in various mailing lists, forums and bug reports, so thought I’d do a brief post on it.

The following example shows how you can display a hand cursor when the user moves their mouse over an Image control in Flex by setting the useHandCursor property and buttonMode property to true, as seen in the following snippet:

<mx:Image source="image1.jpg" useHandCursor="true" buttonMode="true" />

Full code after the jump.

Continue reading ‘Displaying a hand cursor when mousing over a Flex control’

04
Nov

Detecting whether an image loaded successfully in Flex

The following example shows how you can listen for the httpStatus event on a Flex Image control to see if an image loaded successfully or not.

Full code after the jump.

Continue reading ‘Detecting whether an image loaded successfully in Flex’

22
Oct

Loading and modifying remote images

The following example shows how you can use the trustContent property of the <mx:Image /> tag to allow you to apply certain effects to images loaded from a remote web site.

I was building a sample the other week and while it worked fine while testing it in Flex Builder, it had some issues when I deployed the SWF to the web. What was the problem? Well, my Flex SWF was trying to load an image from a remote website (www.helpexamples.com) and apply a Wipe effect (or something like that). The error I was getting was:

SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: <local SWF> cannot access <remote image>. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
at flash.display::BitmapData/draw()
at mx.effects.effectClasses::MaskEffectInstance/getVisibleBounds()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\effects\effectClasses\MaskEffectInstance.as:769]
at mx.effects.effectClasses::MaskEffectInstance/initMask()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\effects\effectClasses\MaskEffectInstance.as:648]
at mx.effects.effectClasses::MaskEffectInstance/startEffect()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\effects\effectClasses\MaskEffectInstance.as:461]
at mx.effects::Effect/play()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\effects\Effect.as:970]
at CrossDomain_test/___CrossDomain_test_Button2_click()[C:\Documents and Settings\peter\My Documents\Flex Builder 3\CrossDomain_test\src\CrossDomain_test.mxml:24]

So, after a bit of playing, I discovered that the solution was to specify the trustContent property for the Image control and set the value to true. Of course, after setting that, I got the following error when trying to test my Flex SWF locally, but it worked flawlessly when posted the SWF online:

SecurityError: Error #2142: Security sandbox violation: local SWF files cannot use the LoaderContext.securityDomain property. <local SWF> was attempting to load <remote image>.
at flash.display::Loader/_load()
at flash.display::Loader/load()
at mx.controls::SWFLoader/loadContent()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1305]
at mx.controls::SWFLoader/load()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1177]
at mx.controls::SWFLoader/commitProperties()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1005]
at mx.core::UIComponent/validateProperties()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:5580]
at mx.managers::LayoutManager/validateProperties()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\managers\LayoutManager.as:517]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\managers\LayoutManager.as:637]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:8368]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:8311]

Full code after the jump.

Continue reading ‘Loading and modifying remote images’

18
Oct

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.

Full code after the jump.

Continue reading ‘Using the Image control as a pop up’

26
Sep

Positioning items in Flex using a constraint based layout

The following examples show how you can position items in an absolute-based layout using the top, bottom, left, right, horizontalCenter, and verticalCenter styles.

Full code after the jump.

Continue reading ‘Positioning items in Flex using a constraint based layout’

27
Jul

Converting an image to black and white using the ColorMatrixFilter

A quick example of converting an image to black and white using the ColorMatrixFilter class. This was originally written for the Flash documentation’s “Learning ActionScript 2.0″ book (click here), but I ported our sample to Flex below.

For more information on the ColorMatrixFilter in ActionScript 3.0, check out the Flex 3 Beta documentation on LiveDocs at: ColorMatrixFilter - Flex 3 Language Reference.

Continue reading ‘Converting an image to black and white using the ColorMatrixFilter’