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.
<?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.
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.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
32 Responses to Loading and modifying remote images
Leave a Reply Cancel reply
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


Can not see the exmaple: the problem is:
And, as you say, can you give an example about the differences between securityDomain and applicationDomain, Thanks.
dormouse
just set trustContent to false
Hey hows it going….
ya i have the same error… i think its actualy the error that the article tries to solve.
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
actually I get the error when opening this page…
and I do not see your example… I get a ‘forbidden protocol’ error.
julio
this is what I got herer..
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 -
Hi peter,
Same here. I receive this: “SecurityError: Error #2147: Forbidden protocol… bla bla bla” when trying to open this page.
Cheers,
Andrei
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
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.
Sounds like you need to add a cross-domain policy file vis-a-vis
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=security2_117_15.html
Cheers.
It’s 2008 – still not resolved? When trying to view the example above I get the following error:
I’m still not able to reproduce the issue.
I’m using Windows XP, with Flash Player 9,0,115,0 (Debug).
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 !!!
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?
It fails for me too in FF 2.0x and works in IE 7.x.
Works for me using Win XP Flash Player 9,0,124,0 (Debug player).
http://www.helpexamples.com/flash/images/image1.jpg
i’m doing only this much, and getting:
I’m using IE 6.0
Flex 3.0
Windows XP
Flash 9.0.115
kanu kukreja,
Do you see the error if you view the SWF from an HTTP URL also?
Peter
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
I got the same problem,when i load a swf file (same folder),the file was loaded successfully,but did’t work.
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.
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 ?
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
unfortunately that no doesn’t work either.
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.
I still get the following error (when loading this page in Firefox 3.0.5):
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.
Any resolution on this? Because I get the same security error reported above. This is on Mac Safari, Flash player 10 debug.
i think problem in this too, because image taken from out side
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..
Any resolution on this? Because I get the same security error reported above. This is on Mac Safari, Flash player 10 debug.
yes