Use the SWFLoader for loading Flash swf into Flex

It was a welcome change to do a little bit of Flash/Flex programming after a heavy dose of WPF ;-) .

The AIR app

In a recent internal project I had to build a simple movie player for a bunch of SWFs created in Flash. The player itself was more like a showcase tool that would loop through these movies and do some transitions as it changed movies. The player was supposed to run fullscreen on a really LARGE display. When the player starts out, you will be presented with a screen where you pick the directory that contains the SWF files. After you pick the directory, the app identifies all valid movie files and loads thumnails of the SWF movies. Clicking the top-right play button would hide this screen and then start playing the movies fullscreen.

image

 

The application was built using Adobe AIR as it seemed like an obvious choice.

The SWFLoader

My initial choice of loading the SWF files was by using the standard flash.display.Loader. However I quickly ran into resizing issues with this. The loaded movies were not able to resize themselves to the size of the screen and were also off-center. It was a hard requirement for the player to stretch the movies to the size of the display and clearly the Loader option was not working even after tweaking a ton of width/height related properties. A quick chat with Doug McCune helped in picking the SWFLoader class instead of the Loader. Unlike the Loader, the SWFLoader is actually a Flex control which means you don’t have to wrap your SWF with a UIComponent (the way you have to do if you use a Loader). You can just dump the SWFLoader directly into your Flex UI container and be done.

The SWFLoader has more intimate knowledge of your SWF, unlike the generic Loader and also resizes the SWF to size of the control. It has additional capabilities like auto-loading of files, maintaining aspect ratio, showing the busy cursor during long loads, etc. It was almost a perfect fit for my needs. I say “almost” because I still had to add some code to resize the SWFLoader. This could probably be because of the way I was using the Canvas container.

var loader:SWFLoader = new SWFLoader();
loader.percentWidth = 100;
loader.percentHeight = 100;

loader.maintainAspectRatio = false;
loader.addEventListener(Event.COMPLETE, onSwfLoaded);
loader.load(filePath);

 

Lesson

If you plan to use your Flash SWFs in Flex it is highly recommended that you use SWFLoader instead of the Loader. You will save a day of your life !

Similar Posts:

14 responses to “Use the SWFLoader for loading Flash swf into Flex”

  1. Stephen

    thanks for this tip, finally got my Flex 3 app to be able to load a SWF movie. My problem now is how do you start/stop the movie from a control in Flex? I cannot seem to do anything with the movie as it just starts playing! I am not the original author of the movie so I cannot build controls into it, ideally i can just pause/play via flex?

  2. Chris

    Hi;
    I have an existing SWF, flash app, that id like to load and run within a flex app im building.
    The SWF i wish to load requires FlashVar’s to setup its envionment. In looking at the SWFLoader class descriptions i dont see how to pass parameters as Flash Var’s to the SWF im loading. Any hints?? or suggestions? Thanks in advance.

  3. Gill

    I also want to use an existing Flash SWF with. Mine was previously loaded in by another Flash SWF which feed it multiple variables. I’ve been able to pass some variables in the load path (as querystrings) but others (more complex ones) I can’t do this for. Has anyone else come up with a solution for this?

  4. gino80

    is possible to load a swf warpper with for example NEXTFRAME PREVFRAME controls with nested another swf?

    i want to create a sort of swf browser, in wichi you select the swf (crated on multiple frames with stops) and then navigate it using command like prevFrame() and nextFrame()

    any ideas?

    thank you

  5. EMpiRE

    How to reload then a new SWF Files? By setting the source properties, the SWFLoader will not displaying the content until/if the content is fully loaded and the main properties are changed… Somebody got a solution for that? Thanks

  6. Nils

    I was trying to embed a SWF in my Flash-App, but loader.percentWidth = 100; loader.percentHeight = 100; didn’t work.
    I have a resizable Panel and inside this Panel should be a SWF that rezises too. Any ideas?
    Thanx

  7. Sundra prakash

    i have a problem, when i am loading SWFs dynamically the content size enlarged than the container size. what can i do,.

  8. Roee

    @Pavan Podila – Hey,
    i’m very new to all this Flex/flash world…so i might be asking pure nonsense? However, first, the content property is a DisplayObject. How can i use it as a MovieClip (simple casting won’t do…). second, if the content is an AVM1 (and i use Flex/actionscript 3) do i care?

    thanks,
    Roee.

  9. Gladvus

    @ Roee – Hey,

    MovieClip extends DisplayObject:

    http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/MovieClip.html

    I met the problem when casting this DisplayObject to MovieClip, IF, the child SWF is older AS versions, i.e. AS1 or 2.

    Reference:
    http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000216.html

  10. saran

    hi 2 all,

    i want to reload the swfloader in flex 3 could someone guide me how to do it?

    thanks in advance

  11. dieta kopenhadzka

    Just want to tell you that your blog content is interesting, but you must improve site graphics

  12. dl

    SWFLoader do not have the properties:

    percentWidth
    percentHeight

    Cheers

    P.S: spam -> dieta kopenhadzka

Leave a Reply