SWFObject 2.x and Zoomify
Tuesday, May 4. 2010
Zoomify is a software company/product that allows for continuous zooming on extremely large image data (JPEG2000) by first separating the original image in to many parts, and then using Flash (and XML) to dynamically piece them together again within a viewer. It works quite well (you can see an example from their website). They have a free "express" version; a version that comes bundled as part of Adobe Photoshop (CS3 or above - File -> Export -> Zoomify); a version that allows you to modify the look and feel of the view with XML (retail product), a version that contains the FLA source code (retail), and their flagship product, the Enterprise version which allows you to house everything necessary for simplistic creation all on the server...including everything all of the other versions offer, as well as more features and the ability to simply upload images directly to the server for parsing.
SWFObject is a JavaScript utility used for dynamically (or statically assisted) inserting of Flash media to a web page. If a user does not have Flash (or the correct version), it will automatically prompt them to download and install it. If they do not have JavaScript enabled, whatever content you were originally going to replace with the JavaScript will simply show instead. It also is unobtrusive, is Adobe's recommended way of embedding Flash to a web page, and has been time-tested to cover many edge-cases of its use.
Zoomify is a great tool to use in places where fine detail is needed to be viewed, but either a slow connection or speedy access is required to the content (plus, who wants to wait over 30 seconds for an image to load?). With working in a library, I've found it's an excellent tool for displaying historic images - such as digital archives. These high resolution images are not really useful in a regular web-centric view, but once you add the ability to zoom in to see detail, such as a person's face from something which was originally a 1.5"x3" panoramic scene - well, even I was in awe. ...and it's quick!
The problem with Zoomify is that by default, the free tools (for download from their website, or the one included in Photoshop) export an HTML page with EMBED and OBJECT tags directly in the HTML. If you work for a local/federal government or state owned library in the US, you are legally obliged to follow standards, and the EMBED tag is not an HTML standard and therefore breaks standards compatibility. What to do? Use SWFObject - it dynamically inserts the necessary code to get your browser to render the Flash movie on the page. Unfortunately, there's little information (if any?) on getting Zoomify to work with SWFObject out there on the web. Before I discovered I had a typo in my code, I emailed Zoomify support to ask about it and they emailed me back with Adobe's own version of AC_RunActiveContent.js - however Adobe recommends the use of SWFObject over their own JS implementation. I intend to thank Zoomify for trying, and giving them a link to this article entry. After all, they're more specialized as Flash developers so I can't fault them and their product really does seem to be the best (perhaps they accidentally attached the wrong project archive, who knows). Microsoft's Seadragon claimed to be revolutionary, and I had already been using Zoomify for about a year, and Zoomify felt more responsive and more people use Flash. Oh well, Microsoft. It's still cool.
Sorry for my rambling, on to some substance.
Zoomify provides the following HTML code by default in the HTML template that it creates for you:
So ignoring all of the classid, codebase, and other junk we don't completely care about, let's look at the actual values being passed to the browser through the PARAM tags within the OBJECT tag. These are the values we'll need to pass to SWFObject.
SWFObject separates its value passing to two variables, flashvars and params. FlashVars, found above, is its own PARAM variable, containing multiple values URL encoded. In this example, we have the variable zoomifyImagePath with a value of "example_img", and zoomifyNavigator set to false. The navigator is a small box that hovers over your image (full opacity) showing where you're viewing within the overall aspect of the original image. That takes care of the flashvars values, not to the params which is everything else. bgcolor is, of course, the background color for the flash stage, which will be covered up by your image data, so you can optionally ignore it if you'd like. menu...to be honest I don't know what this does, I changed the values and saw no difference and even removed it. src is the source, or location of the Zoomify viewing flash application that is used to actually view your data. This is a relative path to your viewer file. If you will be using this script in more than a single place on your website, I strongly recommend you only use one viewer and point all of them to that single viewer. Also notice the HEIGHT and WIDTH attributes to both the EMBED and OBJECT tags here. You can change them if you don't care about standards support and SWFObject, but they must match.
So how do we set up SWFObject with the knowledge now in our hands? Well, let's take a look at a standard (dynamic) SWFObject call.
So going from the example there, and the data we've collected, it seems pretty simple! But wait, what exactly is the zoomifyImagePath? Should that have some sort of file extension? Well, no, and that's what threw me, honestly (quite silly, really). The Flash file knows to look for the XML file in the folder that you're telling it to look in, so all you need to do is send the location of the folder (relative URL) and it'll do the rest. So let's see what that would look like:
The flashvars and params variables expected by swfobject.embedSWF are JavaScript objects, not simple variables (or rather, variables with object notation) as the variables themselves hold variables.
That's it. Keep in mind that the example above didn't use the bgcolor, or menu values. I also didn't use the "attributes" variable that can be passed to SWFObject where you can define the id, name, class, and align values. It's unnecessary for this example so I skipped it, as is showing a callback method (unnecessary that is).
Mix that together with a little modal magic and you have something a little bit nicer, such as what I did in the following page:
Honoring Saratoga County Veterans
Enjoy!
SWFObject is a JavaScript utility used for dynamically (or statically assisted) inserting of Flash media to a web page. If a user does not have Flash (or the correct version), it will automatically prompt them to download and install it. If they do not have JavaScript enabled, whatever content you were originally going to replace with the JavaScript will simply show instead. It also is unobtrusive, is Adobe's recommended way of embedding Flash to a web page, and has been time-tested to cover many edge-cases of its use.
Zoomify is a great tool to use in places where fine detail is needed to be viewed, but either a slow connection or speedy access is required to the content (plus, who wants to wait over 30 seconds for an image to load?). With working in a library, I've found it's an excellent tool for displaying historic images - such as digital archives. These high resolution images are not really useful in a regular web-centric view, but once you add the ability to zoom in to see detail, such as a person's face from something which was originally a 1.5"x3" panoramic scene - well, even I was in awe. ...and it's quick!
The problem with Zoomify is that by default, the free tools (for download from their website, or the one included in Photoshop) export an HTML page with EMBED and OBJECT tags directly in the HTML. If you work for a local/federal government or state owned library in the US, you are legally obliged to follow standards, and the EMBED tag is not an HTML standard and therefore breaks standards compatibility. What to do? Use SWFObject - it dynamically inserts the necessary code to get your browser to render the Flash movie on the page. Unfortunately, there's little information (if any?) on getting Zoomify to work with SWFObject out there on the web. Before I discovered I had a typo in my code, I emailed Zoomify support to ask about it and they emailed me back with Adobe's own version of AC_RunActiveContent.js - however Adobe recommends the use of SWFObject over their own JS implementation. I intend to thank Zoomify for trying, and giving them a link to this article entry. After all, they're more specialized as Flash developers so I can't fault them and their product really does seem to be the best (perhaps they accidentally attached the wrong project archive, who knows). Microsoft's Seadragon claimed to be revolutionary, and I had already been using Zoomify for about a year, and Zoomify felt more responsive and more people use Flash. Oh well, Microsoft. It's still cool.
Sorry for my rambling, on to some substance.
Zoomify provides the following HTML code by default in the HTML template that it creates for you:
So ignoring all of the classid, codebase, and other junk we don't completely care about, let's look at the actual values being passed to the browser through the PARAM tags within the OBJECT tag. These are the values we'll need to pass to SWFObject.
SWFObject separates its value passing to two variables, flashvars and params. FlashVars, found above, is its own PARAM variable, containing multiple values URL encoded. In this example, we have the variable zoomifyImagePath with a value of "example_img", and zoomifyNavigator set to false. The navigator is a small box that hovers over your image (full opacity) showing where you're viewing within the overall aspect of the original image. That takes care of the flashvars values, not to the params which is everything else. bgcolor is, of course, the background color for the flash stage, which will be covered up by your image data, so you can optionally ignore it if you'd like. menu...to be honest I don't know what this does, I changed the values and saw no difference and even removed it. src is the source, or location of the Zoomify viewing flash application that is used to actually view your data. This is a relative path to your viewer file. If you will be using this script in more than a single place on your website, I strongly recommend you only use one viewer and point all of them to that single viewer. Also notice the HEIGHT and WIDTH attributes to both the EMBED and OBJECT tags here. You can change them if you don't care about standards support and SWFObject, but they must match.
So how do we set up SWFObject with the knowledge now in our hands? Well, let's take a look at a standard (dynamic) SWFObject call.
So going from the example there, and the data we've collected, it seems pretty simple! But wait, what exactly is the zoomifyImagePath? Should that have some sort of file extension? Well, no, and that's what threw me, honestly (quite silly, really). The Flash file knows to look for the XML file in the folder that you're telling it to look in, so all you need to do is send the location of the folder (relative URL) and it'll do the rest. So let's see what that would look like:
The flashvars and params variables expected by swfobject.embedSWF are JavaScript objects, not simple variables (or rather, variables with object notation) as the variables themselves hold variables.
That's it. Keep in mind that the example above didn't use the bgcolor, or menu values. I also didn't use the "attributes" variable that can be passed to SWFObject where you can define the id, name, class, and align values. It's unnecessary for this example so I skipped it, as is showing a callback method (unnecessary that is).
Mix that together with a little modal magic and you have something a little bit nicer, such as what I did in the following page:
Honoring Saratoga County Veterans
Enjoy!
Trackbacks
Trackback specific URI for this entry
No Trackbacks
Comments
Either way, hopefully someone else will stumble across this and find it useful. I'll be adding some slide-up effects on hover for the images to indicate what they're for either later today or tomorrow (without any interruptions).
I stumbled upon this - an elegant solution to exactly the same issue I had working on a government site and it saved me a bunch of time so thanks for that.
Given this is quite an old post it's surprising that Zoomify are still publishing the same code in their express version - which still uses tables for layout - time they updated methinks ;)
IIRC I did email their support team with a link to this article in order to update their code. I could be mistaken... Oh well. :) Glad it helped you out!