Flex Examples

The following example shows how you can round the corners on a Flex Image control by creating a rounded Sprite control using the drawRoundRect() method and setting the mask property.

Full code after the jump.

Continue reading ‘Rounding the corners of an Image control in Flex using a mask’

The following example shows how you can maintain a loaded image’s original aspect ratio on a Flex Image control by setting the maintainAspectRatio property.

Full code after the jump.

Continue reading ‘Maintaining an image’s aspect ratio on 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’

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′

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’

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’