Alain Hufkens
I am doing some research for a large AIR application that has to dynamically load swf files (these can be Flex modules, but also regular Flash movies). This is apparently not that easy to accomplish, because it doesn’t work the same as in a normal Flex web application. You quickly run in to security issues because your AIR application runs in a different security sandbox then the remote files you are trying to execute.
You might want to read the following posts before using the code:
- Remote Plugins and Modules in AIR: Excellent article by Ethan Malasky that explains the implications of loading external swf files into your AIR application.
- Loading Modules in AIR application: This solution worked for me and with some minor adjustments, I was also able to load a regular swf file (see code snippet).
Finding a proper solution is not easy. While the second post has a solution that is usable in some situations, it should be implemented with caution. A better solution that uses signing your Flex modules is described in the first post, but it is definitely harder to implement. For now I would go for the second approach.
The following code snippet loads a local swf file into your AIR application. The swf file has to be in the user’s local app-storage folder. The original code can be found in this post.
private function loadLocalSwf(fileName:String):void
{
// File reference
var file:File;
file = File.applicationStorageDirectory.resolvePath(fileName);
// Open the SWF file
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.READ);
// Read SWF bytes into byte array and close file
var bytes: ByteArray = new ByteArray();
fileStream.readBytes(bytes);
fileStream.close();
// Prepare the loader context to avoid security error
var loaderContext:LoaderContext = new LoaderContext();
loaderContext.allowLoadBytesCodeExecution = true;
// Load the SWF file
var swfLoader: SWFLoader = new SWFLoader();
swfLoader.loaderContext = loaderContext;
swfLoader.source = bytes;
// Add to you stage
swfContainer.addChild(swfLoader);
}
{
// File reference
var file:File;
file = File.applicationStorageDirectory.resolvePath(fileName);
// Open the SWF file
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.READ);
// Read SWF bytes into byte array and close file
var bytes: ByteArray = new ByteArray();
fileStream.readBytes(bytes);
fileStream.close();
// Prepare the loader context to avoid security error
var loaderContext:LoaderContext = new LoaderContext();
loaderContext.allowLoadBytesCodeExecution = true;
// Load the SWF file
var swfLoader: SWFLoader = new SWFLoader();
swfLoader.loaderContext = loaderContext;
swfLoader.source = bytes;
// Add to you stage
swfContainer.addChild(swfLoader);
}
Hopefully Adobe will add more support and techniques to achieve this in future versions of AIR. This would off course be very useful when you want to create large enterprise applications.
UPDATE (07/2009): The code above is not working anymore in the latest Adobe AIR 1.5 runtime. So please use the following code to load a local swf file into your AIR application. This code has been tested on a local swf file and not on a remotely downloaded file, which can cause security sandbox issues (see above).
private function loadLocalSwf(fileName:String):void
{
var file:File = File.desktopDirectory.resolvePath(fileName);
var loader:Loader = new Loader();
loader.load(new URLRequest(file.url));
swfContainer.addChild(loader);
}
{
var file:File = File.desktopDirectory.resolvePath(fileName);
var loader:Loader = new Loader();
loader.load(new URLRequest(file.url));
swfContainer.addChild(loader);
}
If you enjoyed this article, please consider sharing it!
I realize that because this is an old post you may never see this, but the feeling I got after speaking to someone from the AIR dev team was that they are intentionally trying to forbid developers from loading remote swfs just because there are too many potential security problems. I’m curious if you, or anybody out there, might know if this work-around (using your own SWFLoader w/ the correct LoaderContext + any random swf) could be closed off in future flash player versions.
Hopefully Adobe will support a better way of dynamically loading swf files in the future.
While the above solution works, you should use it with care. I haven’t used it in any real world projects, but if you are in a controlled environment, then this could be solution.
I would sure like to know who Jeremy spoke to. I cannot get a simple ‘statement of direction’ from anyone on any forum at Adobe concerning the ‘best practice’ approach to modularization of an AIR application with specific regards to the use of the Flash Player’s ability to cache all the Flex framework infrastructure.
What has worked for the last four months breaks with SDK 3.2 and AIR 1.5. Now the attempt to locate the .swz files raises a 2032 error which shows a URL that has inserted in it a hokey [[DYNAMIC]] token which renders the actual URL invalid.
If anyone knows how to bridge the horrible gap between the folks on the AIR and the Flex sides of the SDK team, please, please get them to understand that ‘desktop applications’ — that are provisioned via the web, not by shipping CDs — are every bit as sensitive to the needless downloading of a quarter of a megabyte here and another quarter of a megabyte there, as any plain old webserver/Flex application.
Hi Terry,
Thanx for sharing this. In the end the project was cancelled and I did not have to implement this. But it is good to know that this doesn’t work anymore with the new AIR 1.5.
I will investigate this further, and hopefully we will find a better solution in the future.
Do you know of any workaround for AIR 1.5?
Hi Alain, I’ve been loading in .swf files into my air app using the air.Loader class, storing in objects and then injecting into the DOM of my Html/Ajax air app. All well & good – however I’m wanting a button inside the embedded .swf to fire an onClick Action Script event which in turn calls a javascript method inside the containing air app. Is that even possible? If it can call the onClick of the javascript direct would be even better tho I think I’m going to have the whole sandbox security thing. Any ideas on best steps forward here – or even an example? Thanks
Kyle
Hi Kyle,
Can’t you use the ExternalInterface class? This class handles the communication between ActionScript and the container application. I have done this in a browser, and I suppose it also works when the container is Adobe AIR.
Alain
Alain – Can’t you use the ExternalInterface class?
Afraid Not(!)
This is explicitly blocked via Air 1.5 referring to Adobe docs
http://livedocs.adobe.com/labs/air/1/aslr/flash/external/ExternalInterface.html
Look in the notes – not supported via Air =/
This is what got me trawling the web looking for a solution as I had tried this first. I think it’s to do with setting my security sandboxes at this point but am just going to work around by injecting a absolute positioned div with a onClick event overtop of my .swf file – not elegant & I know there “should” be a way – but if it works…
Thanks
K
Alain,
Like u, I have run into the same problem, the only diff being that I am really new to AIR & Flex. So bear with me if what I am going to ask below is a trivial matter:
Questions:
1. Suppose my AIR app is in C:\Desktop directory.
Based on your explanation, I must have my .swf in C:\Desktop. Correct?
2. When I call loadLocalSwf(), what would be the correct path name for the .swf to pass to loadLocalSwf() file, i.e
loadLocalSwf(‘foo.swf’), or
loadLocalSwf(‘Desktop/foo.swf’), or
loadLocalSwf(‘C:/Desktop/foo.swf’), or
loadLocalSwf(‘app-storage://Desktop/foo.swf’), or,
????
3. Finally, let’s say what i want to do is to have a Link or a Button, whereby when a user clicks on the Link/Button, foo.swf gets executed (within the AIR framework). Would the following construct work:
Thanks in advance for your help.
DT
Hi,
My blog post was more about loading remote files. What you want to do is load a local swf file and that is perfectly possible. Let’s say you create an AIR application and you also add a swf file in the AIR package. The application is installed in your program files folder (in case of windows). You can now load the file like this:
loader.load(new URLRequest("yourswf.swf"));
swfContainer.addChild(loader);
In this case the swf is in the same folder as the application. If you want t load files from somewhere else you might get restrictions. Als please keep in mind that if you use paths like “C:\…” your application will not be platform independent and it will not work on Mac or Linux.
Hope this helps you out,
Alain
Hi all! I got stucked in a big problem. What I want to do is when i click on a button to reload the whole air application in its initial state. I used the code from above and it seemed to work. In the application, i used some popus which call some webservices which have as parameters variables which are in the main application. When i load application from flex builder the first time is working, but after loading again the swf with the swfLoader in popups the data is from the main application, not from the subApplication(for the rest of the component the parent is the sub-application). To get access to the variables stored in the main xml, i used parentApplication.nameOfVariable. If i trace this value from popup after reloading instead of having a parentApplication like FlexLoader, it has the main application as parent. So it seems in the popup the parentApplication is never calling the subApplication. How can I have access of the parentApplication of subApplication from the popup? Or if there is another way when i click the button to refresh the swf without reloading the swf in itslef every time?(I only use a swf which is the applicaiton, no modules). I hope smb will help me. Thanks.
Hi,
I have got a problem with loading the SWF file. This is an external file. When adding the full path the file won’t load. but if its only the filename inside the urlrequest it will work. All I want to load is the external swf file. Any tips on this one.
Thanks in advance.
@Renjih,
The code in my previous post was working fine if you put the local swf file in the application folder. But if you want lo load the file from the desktop for example you can do this:
var file:File = File.desktopDirectory.resolvePath("LocalSwfFile.swf");
var loader:Loader = new Loader();
loader.load(new URLRequest(file.url));
swfContainer.addChild(loader);
}
This peace of code uses the AIR File API to load the external swf (in this case from the user’s desktop). You can then use the “url” property of the file class to specify to the loader. This works for me.
You can also do something like this:
var file:File = new File("/Users/alain/Desktop/LocalSwfFile.swf");
// Windows XP
var file:File = new File("C:\Documents and Settings\alain\Desktop\LocalSwfFile.swf");
// Windows Vista
var file:File = new File("C:\Users\alain\Desktop\LocalSwfFile.swf");
But this code is (as you can see) not gonna work when run your app on a different OS. Keep that in mind.
Hope this helps
Thanks Alain, But this is not my scenario.
I have a desktop application. let it be myApp.air, this will access a swf from another domain (www.apps.com/myfile.swf) There is a music on/off functionality in that swf file. I need to work this from my (myyApp.air) application. When this app loads the swf from local machine it works fine, But when it loads from external source (www.apps.com/myfile.swf), it won’t work. Any tips on this one. I need to access the sound properties of that external file. A small wish
)
Loading an external swf (or the HTML file that embed the swf) can easily be accomplished by using the HTML component in Flex or the HTMLLoader in pure AS.
Communicating with the swf to turn the sound on or off is something else. In one of the comments above Kyle already pointed out that the Externalinterface is not supported in Adobe AIR although if I call the ExternalInterface.available then it also returns true when I host my swf in Adobe AIR. I will keep you posted if I find a solution.
Thanks a ton Alain
It worked Alain… Really…
Some more help dear friend, I have run the swf file from the mx:HTML UI. But the alerts and popups are displaying over the playing swf file. Could you have any solution to make this available infront.
Thanks in advance for you help,
Hi Renjith,
I am not sure that I really understand what your problem is. What alerts and popups do you mean? If you mean a Flex Alert (mx.controls.Alert), then I suppose it’s normal that it is displaying above the swf, because it displays on top of you application.
Hi,
I have added like
I need to display a popup when clicking on another link. But it is showing under the loading SWF. If it is a html file it does show above the html. Any clues..
I have created an small AIR demo that loads a remote swf using the HTML view in Flex. Below are 3 buttons that show an alert and a two types of popup screens. It all seems to work as it should.
Check it out here (install and run the AIR application, right click for view source):
http://www.hufkens.net/flex/LocalSwf.air
hi!!!
I have made a video player in flex builder 3 for desktop application.I am using apache server(included in XAMPP package) where all my videos files(.swf and .flv format) are stored.There are around 100 video files on server in mysql database.I want that the names of the video files should display on left side and files should play in video palyer on rightside in the window.
Can anyone tell me how can I do this?
Hi avi,
I think this question is going off topic and I would suggest that you make a PHP api call to get the Video meta data.
Checkout AMFPHP for the communication http://www.amfphp.org
Greetz,
Alain
Thanks for ur reply….
What can I do if I want to make only offline application like the one I mentioned above . I want to play video files in offline mode not in online mode….I dont want to access from server.How can I embedd 100 videos in my application itself in SQLite database and play them from there itself .Also the videos should be stored in such a way that nobody could copy that data into other system….
kindly provide me the steps for doing this.
hiii sir…….
i m making my application in adobe AIR and i want to make a completly offline application with the help of this..
but i have some query related to this, plz help me to resolve my queries.
how can i make a subscription proccess in my application, so that after a number of period that application will automatically stop. As usually happen in adobe’s application.
kindly provide me the steps n code related to my problems, if possible?
@ Anurag, @avi
Both of your questions are feasible, but I can’t solve these for you in this thread. That would take some analysis and research, which normally you have a developers for.
I can help you building AIR applications, but that would mean some consultancy. So if you need help building AIR applications you can contact me at my company (http://www.nascom.be)
Greetz,
Alain
I think AOL application is also AIR application.In that, if we are not connected to internet we can play videos.
Can u tell me how that AIR application was made.
No, I can’t really help you with that, because I didn’t make it. BBC iPlayer also does that and also the Adobe Media Player. You will need to create a synchronize functionality that downloads videos so that you can play them offline.
It shouldn’t be that hard
can u plz provide us a link of any page or any forums related to our problems, if possible….!
hiiiiiii
i m making my project in adobe AIR
can u tell me that,
1) Is it possible to make whole AIR application (only offline funtionalitiy) with the help of HTML only?
2) For this i have to use dream viewer or aptana studio?
Hi Alain, thanks for this. I came across it while researching methods for building a modular AIR application.
I’ve now built a frame work for loading signed and unsigned modules into different sandboxes at runtime – all the code and documentation is available here:
http://flair-flash-flex-air.blogspot.com/2009/09/framework-for-modular-air-applications.html
Thanks for assisting me along my way!
Hi Stray,
That was exactly what I was trying to achieve at the time. But the project never happened and I let it go. Thanks for sharing the article and I will check it out. Looks very interesting.
Alain
Hi Alain,
Iam trying to load swf file(LocalTrusted sandbox)in to Flex3 AIR1.5(application sandbox) application.Its giving Security sandbox error#2070 stage owned by.
Any help would be thankful.
vamshi.
hello everyone…
i would really appreciate if anyone of u could help me out with the problem i have right now…
i want to create a desktop application in AIR in which i want that users should be able to play the flash games i have made…
i use CS4 and flash as my technology
i have AIR 1.5
could anybody PLZ PLZ PLZ help me in any way possible !!
Hi abhishekssj,
You could create an AIR app and use the HTMLLoader class to load your remote swf files. Everything you need, can be found here in the comments.
If you want to know how to create an AIR application using Flash Pro CS4 check out the Adobe AIR Developer Center for Flash: http://www.adobe.com/devnet/air/flash/quickstart/
Greetz,
Alain
Hi Alain
Maybe you can know this problem, I have looked awerywere, but no luck.
1. The start window opens up a transperant window in an iframe.
2. Then the transperant window loads an external .asp file from my server (content.asp) in an iframe.
3. In the content.asp file i try to load an swf file, but nothing is visible?
I use the following code in content.asp to show the swf file:
I have uploaded a testpage with this code to the server and it works fine, but not in the air application!?
What Im I doing wrong? Why isnt the swf file working, im going nuts.
Hello Clacke,
If I understand correctly, you want to load an HTML page that contains a SWF file in your AIR application. And the Window or Application is transparent.
Can you turn off the transparancy? There is a known issue with transparent windows and the HTMLLoader, see “Flash objects do not render in HTML component with systemChrome none and transparent true: http://bugs.adobe.com/jira/browse/SDK-15033”
Cheers,
Alain
I’m developing a AIR Application Online game where i have 1 Game Lobby AIR App (Flex-Based AIR) and games AIR App (Flash CS4 Built Swf, Create AIR file using Flex to load the Swf file).
The game have only 1 Lobby(air file) and Numbers of games (air files).
Purpose to having multiple AIR file to make use of AIR auto updates features for the lobby and all games.
I want to remove/unchecked “Add shortcut icon to my desktop” from the Installation Preferences of AIR Application Install dialogue.
May i know how to do remove/unchecked “Add shortcut icon to my desktop” feature?
Hi, I have searched for this problem in the net but no luck. regarding caching in AIR when an external swf file is loaded.
I’ve my AIR application running and i’m dragging and dropping swf files from external (flex builder) onto AIR application. The swf files are loading. But if i recompile the swf files with some changes and drop the swf file onto already running AIR app, the changes are not reflected instead if i restart the application, the changes are reflected.
In case of flex applications that run on browser we have option for cache, for setting true or false. But I could,t find anything on net about swf caching in AIR.
unloadAndStop(); for air applciations , this has no effect
Any suggestion on this is highly appreciated
I wanted to say that I searched a lot of places, and this hint really hit the spot. Thanks, and also thanks for updating the information for AIR 1.5
The link to the first article is broken. Here is an updated one. Thanks for the help! http://blogs.adobe.com/emalasky/2008/04/remote_plugins.html
Thanks for the info.
I updated the link in the article.
Alain