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 with:
 
About The Author

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.

32 Responses to Loading and modifying remote images

  1. dormouse says:

    Can not see the exmaple: the problem is:

    SecurityError: Error #2147: URL
    http://www.helpexamples.com/flash/images/image1.jpg
    中有被禁止的协议。(has prohibited agreement)
    at flash.display::Loader/_load()
    at flash.display::Loader/load()
    at mx.controls::SWFLoader/loadContent()
    at mx.controls::SWFLoader/load()
    at mx.controls::SWFLoader/commitProperties()
    at mx.core::UIComponent/validateProperties()
    at mx.managers::LayoutManager/validateProperties()
    at mx.managers::LayoutManager/doPhasedInstantiation()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()
    at mx.core::UIComponent/callLaterDispatcher()

    And, as you say, can you give an example about the differences between securityDomain and applicationDomain, Thanks.

    dormouse

  2. Chris says:

    Hey hows it going….

    ya i have the same error… i think its actualy the error that the article tries to solve.

  3. peterd says:

    Odd, it works for me on 3 different computers on different networks.

    Are you guys using the exact code as above, or trying to load images from different domains? Also, are you testing locally or posting your SWFs on a web server?

    Peter

  4. julio carneiro says:

    actually I get the error when opening this page…
    and I do not see your example… I get a ‘forbidden protocol’ error.
    julio

  5. flex says:

    this is what I got herer..

    SecurityError: Error #2147: Forbidden protocol in URL
    http://www.helpexamples.com/flash/images/image1.jpg
    .
    at flash.display::Loader/flash.display:Loader::_load()
    at flash.display::Loader/load()
    at mx.controls::SWFLoader/::loadContent()
    at mx.controls::SWFLoader/load()
    at mx.controls::SWFLoader/mx.controls:SWFLoader::commitProperties()
    at mx.core::UIComponent/validateProperties()
    at mx.managers::LayoutManager/::validateProperties()
    at mx.managers::LayoutManager/::doPhasedInstantiation()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/::callLaterDispatcher2()
    at mx.core::UIComponent/::callLaterDispatcher()

  6. Pritam says:

    Hi i want to create Video Gallery in Flex using SWFLoader in which i am playing Youtube video on button clicks. i have two button , After clickin any of the button it plays video but if i click on other button then the video on shows loading icon instead of playing the video. my MXML coode is -

  7. andrei says:

    Hi peter,
    Same here. I receive this: “SecurityError: Error #2147: Forbidden protocol… bla bla bla” when trying to open this page.
    Cheers,
    Andrei

  8. peterd says:

    Bizarre. Clearly I have something wrong with this example where only I can see the content. What version of Flash Player is everybody using?

    I seem to have “WIN 9,0,60,235 (debug)” (to find out your Flash Player version you can check out my “About You” page).

    Sorry about that everybody,

    Peter

  9. Nils says:

    Yeah, I’m also getting the protocol error when viewing this example. I also am getting the “local SWF files cannot use the LoaderContext.securityDomain” error. I’d love to know if you can find a solution, as testing it online is a pain.

  10. user says:

    It’s 2008 – still not resolved? When trying to view the example above I get the following error:

    SecurityError: Error #2147: Forbidden protocol in URL
    http://www.helpexamples.com/flash/images/image1.jpg
    .
    at flash.display::Loader/_load()
    at flash.display::Loader/load()
    at mx.controls::SWFLoader/loadContent()
    at mx.controls::SWFLoader/load()
    at mx.controls::SWFLoader/commitProperties()
    at mx.core::UIComponent/validateProperties()
    at mx.managers::LayoutManager/validateProperties()
    at mx.managers::LayoutManager/doPhasedInstantiation()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()
    at mx.core::UIComponent/callLaterDispatcher()

  11. peterd says:

    I’m still not able to reproduce the issue.
    I’m using Windows XP, with Flash Player 9,0,115,0 (Debug).

  12. Tom says:

    Apparently, it depends of your Flex compiler, I use Flex 3 beta 3 and trustcontent works when I put my apply online. It ‘s very strange that Adobe doesn’t make this easier because crossdomain.xml are not very very usefull !!!

  13. Nicole Rutter says:

    Would it be possible to do this with a tree item? I have a tree that contains images and when you click on the image name in the tree it displays the picture. How would I do this?

  14. NB says:

    It fails for me too in FF 2.0x and works in IE 7.x.

  15. BW says:

    Works for me using Win XP Flash Player 9,0,124,0 (Debug player).

  16. kanu kukreja says:

    http://www.helpexamples.com/flash/images/image1.jpg

    i’m doing only this much, and getting:

    SecurityError: Error #2142: Security sandbox violation: local SWF files cannot use the LoaderContext.securityDomain property. file://C:\Documents and Settings\kukrejakanu\My Documents\Flex Builder 3\My Aol\bin-debug\main.swf was attempting to load http://www.helpexamples.com/flash/images/image1.jpg.
    at flash.display::Loader/_load()
    at flash.display::Loader/load()
    at mx.controls::SWFLoader/loadContent()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1362]
    at mx.controls::SWFLoader/load()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1211]
    at mx.controls::SWFLoader/commitProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1015]
    at mx.core::UIComponent/validateProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5670]
    at mx.managers::LayoutManager/validateProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:519]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:639]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8460]
    at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8403]

  17. kanu kukreja says:

    I’m using IE 6.0
    Flex 3.0
    Windows XP
    Flash 9.0.115

  18. peterd says:

    kanu kukreja,

    Do you see the error if you view the SWF from an HTTP URL also?

    Peter

  19. lucas Matos says:

    I found a solution
    you need to use a proxy
    well I use the Proxy.php
    http://board.flashkit.com/board/showthread.php?t=705122

  20. Yon says:

    I can see the example and i think its a problem with browsers configuration.

    In the advanced configuration options of your browsers you can find an option “Don’t save encrypted pages to disk” check it, save and reopen your browser.

  21. Tom says:

    SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: file:///C|/Documents%20and%20Settings/temp/Desktop/main.swf cannot access http://www.helpexamples.com/flash/video/water.flv. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
    at flash.display::BitmapData/draw()
    …………………………………

    hi peter,
    i could hardly solve tis problem. i jus started flex a month ago. im using flex 3.
    can help me please ?

  22. peterd says:

    Tom,

    I haven’t looked at this example in a long time, but you may want to try uploading your SWF files to an HTTP server and try running it over the web instead of locally.

    Peter

  23. Romain says:

    It’s working fine.
    But the reason why it’s working is because of that : http://www.helpexamples.com/crossdomain.xml

    If you don’t have a cross domain on the external URL it will not work to due to Flash Player sandbox restrictions.

  24. Helliax says:

    I still get the following error (when loading this page in Firefox 3.0.5):

    SecurityError: Error #2147: Forbidden protocol in URL
    http://www.helpexamples.com/flash/images/image1.jpg
    .
    at flash.display::Loader/_load()
    at flash.display::Loader/load()
    at mx.controls::SWFLoader/loadContent()
    at mx.controls::SWFLoader/load()
    at mx.controls::SWFLoader/commitProperties()
    at mx.core::UIComponent/validateProperties()
    at mx.managers::LayoutManager/validateProperties()
    at mx.managers::LayoutManager/doPhasedInstantiation()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()
    at mx.core::UIComponent/callLaterDispatcher()

    And I found out it’s because the URL of the image has a large blank space before it. After editing that part of the code into one line, it worked fine for me. Your example works in Internet Explorer just fine though, perhaps because IE ignores the leading blank space(s) when retrieving the image.

  25. Steve says:

    Any resolution on this? Because I get the same security error reported above. This is on Mac Safari, Flash player 10 debug.

  26. i think problem in this too, because image taken from out side

  27. mausam says:

    Hi peter,
    thanks you so much for this solution…Its works really to me.I was facing it from the code of http://www.quietlyscheming.com/blog/components/flexbook/
    Now it works with remote server by setting trustContent to true with Image and SWF Loader…Really appreciate it..

  28. Any resolution on this? Because I get the same security error reported above. This is on Mac Safari, Flash player 10 debug.
    yes

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree