22
Oct
07

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.


23 Responses to “Loading and modifying remote images ”


  1. 1 dormouse Oct 23rd, 2007 at 2:18 am

    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. 2 Chris Oct 23rd, 2007 at 1:28 pm

    Hey hows it going….

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

  3. 3 peterd Oct 23rd, 2007 at 3:23 pm

    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. 4 julio carneiro Oct 24th, 2007 at 9:03 am

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

  5. 5 flex Oct 24th, 2007 at 1:37 pm

    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. 6 Pritam Oct 26th, 2007 at 7:32 am

    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. 7 andrei Oct 28th, 2007 at 6:13 am

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

  8. 8 peterd Oct 28th, 2007 at 8:08 am

    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. 9 Nils Nov 5th, 2007 at 10:23 am

    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. 10 Eric Nov 16th, 2007 at 9:01 pm
  11. 11 user Feb 26th, 2008 at 7:13 pm

    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()

  12. 12 peterd Feb 26th, 2008 at 11:01 pm

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

  13. 13 Tom Mar 7th, 2008 at 9:20 am

    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 !!!

  14. 14 Nicole Rutter Mar 27th, 2008 at 12:31 pm

    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?

  15. 15 NB Apr 14th, 2008 at 1:02 pm

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

  16. 16 BW May 16th, 2008 at 11:17 am

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

  17. 17 kanu kukreja Jun 1st, 2008 at 3:07 am

    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]

  18. 18 kanu kukreja Jun 1st, 2008 at 3:39 am

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

  19. 19 peterd Jun 1st, 2008 at 12:55 pm

    kanu kukreja,

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

    Peter

  20. 20 lucas Matos Aug 26th, 2008 at 9:05 am

    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

  21. 21 Yon Oct 13th, 2008 at 5:47 pm

    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.

  22. 22 Tom Oct 13th, 2008 at 7:57 pm

    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 ?

  23. 23 peterd Oct 13th, 2008 at 8:04 pm

    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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".