Loading assets from a SWC

[gobbles]

Hi

Wherever I look it says that loading external assets(.png, .jpg, gif) from a SWC is supported.
However, I can't find a single example of doing this with anything else than Classes and Components.

I have 7 swf's that are loaded and unloaded by a main swf, a sort of menu system. These swf's all rely on loading in some .png's at runtime.

I made a new "Library Project" in Flex, filled the scr folder with my .png's, set the loading type to "external". Because I don't want the .png's compiled into my application .swf.

But how do I get a hold of my raw .png's from within my classes?

I can do:
var obj:AComponentFromSWC = new AComponentFromSWC() no problem.

But I want to do:
var pic:Bitmap = BitmapFromSWC();

Is this possible or did I completely misunderstand the use of SWC's?

This way I could let all the apps use the same SWC and it is easy to distribute all the graphics as one package and the loaded swf could share common graphics.

Thanks for any help given

[Gohloum]

Hey Gobbles,

There are several ways to approach this, so I am not sure what best suits your situation.

(This post may get a little lenghty, so I will start with the quick solution.)

First off, if file size is an issue, why are you wanting to put your images in an .swc? If you do this, then you are actually increasing file size because you have some standard code that is part of an swc. I've not personally used the 'external' setting, but if it does what I think it does, then the solution below would give you similar results.

My initial thought is to rethink your solution. If you are just needing images, then I would suggest using the mx:Image tag or SWFLoader class if you want more functionality like tying it to a progress bar. On Image components, you can set the source dynamically at runtime, bind in the xml, etc...

This solution would allow you the most amount of flexibility. You could update the images at a later date, etc...

Generally when you use a swc and a library project, you are planning to share common assets across multiple projects. However, unless you are planning to use RSL's (runtime shared libraries), then the only benefit you will receive is on the development end where you won't have redundant code, but a centralized code repository. However, when you compile in the default 'Merge into code' mode, both projects will have all the code from the library swc compiled into them.

Example: I am currently working on a web site where every page is a unique .aspx page with a .swf embedded and each page is it's own unique project. However, alot of the buttons, panels, and other UI / art elements are common across various pages which are originally created in Flash or photoshop. I use a library project for all these UI elements and misc assets which is about 120K. Because it is an RSL, the browser loads and caches it when the user visits any of the pages of the site. When the user navigates to another page, flashplayer only loads the master .swf and it's specific modules for that page. The common assets from the RSL are pulled from cache and thus saves the user download/wait time.

Unfortunately, there's not alot of information out there on creating your own custom RSLs, but once I am past my deadline and release to beta, I plan to put my findings together as a tutorial that will help explain how to leverage RSLs, dynamically loaded assets, and reduce / streamline loadtimes. There are a bunch poorly documented tools you need to understand like the Digest and Optimizer command line tools, and mastering them to understand how they work takes a little time.

If you still want to go the .swc route, just leave a followup post and when I am in the office tomorrow, I will dig up some example code and post it for you along with the links to the resources that I found on using swc and RSL's.

[gobbles]

Hi Gohloum

Thank you for the input

I should explain my setup a bit more as it is kind of special:

We have a building with 30 52" touch screens, these touch screen all run 7 different apps(modules) from a main swf displaying them as icons. A lot like a standard website with your menus and pages. These 7 swf's make use of heavy content, several 200 MB flv's, huge data sets and the like.

The screen do not all show the same menus, some has only app1 and 3, some 2,3,4,7 and so forth. To make this simple to control we put out all the apps to all the screens (by screen I mean a pc connected to each screen) but the main swf does not know it has all the apps, it gets its instructions from a database telling it, you may load app1, 2, 3. The main swf now looks in its application directory and there it finds these apps. This also gives us the ability to change which apps are in the menu on the fly.

Ok..so I don't have users visiting a server like a normal setup

All new content: flv's .png's etc. gets moved by a C sharp script from a server to the clients. So a scripts tests the timestamps on the clients assets and the servers assets and copies new content directly to the clients app directory.

So my problem is actually in development mode, I have a project for each app and these get compiled into swf's and moved to the main app that can load them in. But for me to test them I must have at least one of the 200 MB flv lying in my assets folder and this makes AIR cringe and eclipse cry when I do something like "build project" it also screws with my versioning control

The solution so far has been to separate graphics in categories. Graphics that an app depends on and graphics an app loads in during runtime...content. The app graphics are small .png's so they get embedded in the components, since we don't have to move anything over the wire to a user.

The .png's used by the different apps are pretty redundant so I would like to put them in a SWC, and then compile them into the apps, but if I link the SWC in all the apps I will get all the png for all the apps merged into all the apps (crazy sentence).. also I can't find a way to reference assets from a SWC, only components.

Well the restructuring of the code turned out to be a mix of writing all the images of buttons etc. into components and using a SWC to share these between projects and then moving all the content/flv assets out of the projects and into a generic project folder and writing all services as stubs/mocks so that when developing we could asses the flv's in the generic project and when deploying it would reference the files that the C sharp script had moved to the clients.

Yeah there is a lot of resources out there, but very little "best practice" advise

Thanks again

[Gohloum]

OK. I now have a much clearer understanding of what it is you are trying to do.

There are still a couple of ways to go about doing this, but now that I understand what you want to accomplish, I think I can help better assist with your problem.

Do you have either Flash CS3 or greater? if so then what you need to do is download the Flex Component Kit for Flash export tool. This is an extension that you install for flash through the adobe extension manager. You can get it here: http://www.adobe.com/products/flex/flexdownloads/#skins

You will need an adobe account to login and download. It is free.

What you are actually going to do is create your swcs from flash via the component tool.

The overall steps are:
1 - import your pngs into a flash .fla.
2 - create a single frame movieclip containing 1 png for each image
3 - setup the conversion through the command menu for each movieclip
4 - export a unique .swc for each movieclip

After you complete these steps, you will end up with a folder containing a separate swc for each ping. Then you will just add that folder to the build path for each of your projects. Once this is done, you will see your pngs show up in your autocomplete as the names you used for the movieclip class field in the properties panel in flash (The properties panel when you right click on a clip in the library and select properties).

So say you created a swc from a movieclip with the class name 'MyImage'. In your application, just declare a local namespace:

xmlns:local="*'

so now in your xml if you start a tag with 'local' you will find the MyImage in the autocomplete.

If you want to create them via ActionScript, then you would do the same as you would in flash, except if you are going to place a reference in a variable, the variable type will be UIMovieClip instead of the flash MovieClip class

var myInstance:UIMovieClip = new MyImage(); 

or if you want to be more strict instead of using the super class, you can do this:

var myInstance:MyImage = new MyImage(); 

However, since you are just dealing with pngs and not functionality, I would go with the first example in the event you want to substitute 1 png for another.

I can give you more details on how to go about the swc setup and all, but when you download the component kit, there is a good tutorial there that explains how to do this, so try that first and then hit me back with any questions you have.

From what I gather in your description of the application, RSLs could certainly be used, but since you are on a private network, they may not be necessary. However if you want to go that route, let me know and I will post further on the topic.

Regardless, let me know how it turns out.

TJ

[jadd]

hi Gohloum,
I would be interested in your use of flash swc + flex library + flex project. Any example? I'm in trouble with swc assets and reausability code. Thanks.

[Gohloum]

Hey Jadd,

Can you give a little more info on what your problem is? Generally a swc is reusable by any projects, you would simply add a library path for the swc or simply drop the thing into the libs folder.

I usually to the first so that several projects point the the same swc file on disc. This way if I update the art in the swc for any reason, all I have to do is recompile each project referencing it.

Not sure if this helps, but if you can ask a more detailed question, I'll do my best to respond with a detailed answer.