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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/22/loading-and-modifying-remote-images/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:String id="src">http://www.helpexamples.com/flash/images/image1.jpg</mx:String>

    <mx:WipeLeft id="wipeLeft" target="{img}"  />
    <mx:WipeRight id="wipeRight" target="{img}" />
    <mx:WipeUp id="wipeUp" target="{img}" />
    <mx:WipeDown id="wipeDown" target="{img}" />

    <mx:Parallel id="parallel" target="{img}">
        <mx:WipeDown />
        <mx:Fade />
    </mx:Parallel>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="wipe left" click="wipeLeft.play();" />
        <mx:Button label="wipe right" click="wipeRight.play();" />
        <mx:Button label="wipe up" click="wipeUp.play();" />
        <mx:Button label="wipe down" click="wipeDown.play();" />
        <mx:Button label="wipe and fade" click="parallel.play();" />
    </mx:ApplicationControlBar>

    <mx:Image id="img" source="{src}" trustContent="true" />

</mx:Application>

View source is enabled in the following example.

Tagged as: trustContent