Duplicate Flex Object in HTML without Re-Initializing

Question

I am creating a flash object that does some heavy image lifting. What I am looking to do is load many flash objects onto the same page to take an image, modify it, and display it within the flash object.

The problem I am running into is that when I try to add 100 flex objects to the page, the browser freezes as it tries to re-load/initialize each instance. Once they are all loaded, the processing of the images goes by quick.

Does anyone know how to duplicate the flash piece without having to reload everything?

Another thought of mine would be to load the image into one flex object, and have that one modify the image tags using MHTML/data URI. Any thoughts?

Answer 1

You can't, Flex has to initialize, and that's a horrible horrible idea.

Flash is extremely CPU intensive, Flex doubly so since the interface itself uses a lot of power from the CPU to draw its interface effects.

Do whatever you need to, but don't initialize 100 Flex SWF's unless you want angry users.

Answer 2

The answer I came up with is using the data URI scheme. I send the image to a single flash object, have it run the pixel bender scripts and then output a Base64 image string to the data URI on the image tags.

For IE, which does not support the scheme, I will output the string to a php script that will return the decoded image. The reason I am doing so much work for this is because Pixel Bender is powerful and allows me to pass a lot of the processing to the client side. Also, in testing, applying all image manipulations using pixel bender is exponentially faster than doing it in PHP/GraphicsMagick.