Monthly Archives: October 2007

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.

Continue reading

Publishing a project’s source code in Flex Builder 3 beta 2

I briefly touched on this in my previous post, “Publishing a release version of a Flex project”, but I thought it was important enough to dedicate a new entry to.

If you are just getting started with Flex Builder 3 (or Flex in general), or are migrating from Flex Builder 2 or Flex Builder 3 beta 1, the steps to enable the “view source” context menu in your Flex applications has changed somewhat.

Currently (as of Flex Builder 3 beta 2), if you want to enable view source, you can do so in the “Export Release Version” dialog box (found by selecting Project > Export Release Version from the main menu), and clicking the “Enable view source” check box in the View source section. If you want to specify which files are included/excluded, simply click on the Choose Source Files button and check or uncheck files at your leisure. For example, in some of my examples, I may not include fonts which I downloaded elsewhere from the Internet. So I would go into the Export Release Version dialog box, click on Choose Source Files and deselect the fonts and then publish my Flex application. Of course, I always include a note explaining where you can obtain the specific fonts I used, but it makes it so developers visit the site, check out the copyright information, and sends a bit of traffic to the font makers site. But I digress… Back in the Publish Application Source dialog box (which can be found by clicking the Choose Source Files buton in the Export Release Version dialog box, whew!), you can also specify where the generated source files will be copied to. By default the files will be placed in a folder named /srcview/ within your /bin-release/ folder of the published project files.

There you have it. Publishing your application source files with Flex Builder 3 (beta 2). Most, if not all, of the SWFs on this site should have view source enabled. Simply right-click on a SWF file and select View Source from the context menu. This allows you to view a nicely formatted/colored version of the source code, as well as download the source files as a handy ZIP file, or click on a link to download the Flex 2/3 SDK.

And remember, “sharing is caring”(tm).

Publishing a release version of a Flex project

In Flex 3 Beta 2, the default application publishing behavior changed slightly. Now, by default a debug version of your Flex application will be generated when you select Run or Debug. Due to the file size differences between a debug and release version of a SWF file, you’d never want to deploy a debug version of a SWF into a production environment.

For example, consider the following simple, yet rediculous example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute">

    <mx:String id="str" />

    <mx:DataGrid />
    <mx:List />
    <mx:Button />
    <mx:Accordion />
    <mx:TileList />
    <mx:Panel />
    <mx:HSlider />
    <mx:TextArea />
    <mx:TabBar />
    <mx:Label text="{str}" />

</mx:Application>

If you select Run > Run from the main menu, the file size of the generated SWF file is roughly 490 KB. By exporting a release version of the same project, the SWF size drops conderably down to roughly 300 KB (saving you about 190 KB, or 39% file size).

This is all good in theory, but how do you export a release version of a SWF, you may be asking yourself. Why, simply select Project > Export Release Version from the main menu. Flex Builder brings up the Export Release Version dialog box which lets you specify a path where the optimized release version SWF/HTML/JavaScript files are located (you may or may not see all these files depending on what settings you specified in the project properties Flex Compiler settings). By default the release version of the files will be located in a /bin-release/ folder. If you want to enable the right-click view source option for your Flex application, select the Enable view source check box and optionally select which source files will be included. When you are finished with the Export Release Version dialog box, simply click Finish and Flex Builder will generate/copy all the files based on your project settings. Simply navigate to the project folder on your hard drive and copy/upload the desired files to the server.

Congratulations, you just deployed a release version of a Flex app!

Creating a credit card validator in ActionScript

A loyal reader asked in a comment how one could go about creating a credit card validator using ActionScript instead of MXML. Peter loves his readers, so behold, my solution…

The following example shows how you can create a credit card validator using the CreditCardValidator and CreditCardValidatorCardType classes.

Full code after the jump.

Continue reading