Screen capture an image in a scrolling flash window (Example website included)

Question

I would like to capture the full size zoomed image that appears in the pop-up boxs when you click on the zoom button on this website:

http://www.restorationhardware.com/catalog/product/product.jsp?productId=prod1618051&navCount=0

I have tried various screen capture software that have a feature to screen grab a scrowling window but without any success.

Thanks.

Answer 1

Some technical insight (but not an easy solution):

When one has Flash disabled:

• Open the page in Firefox with Firebug installed, or in a WebKit based browser such as Safari or Chrome, or in IE8.
• Right-click somewhere in the page and choose something like "Inspect element".
• Enable the "Resources" or "Net" tab.
• Click the zoom icon.

In the updated Resources tab, you will now see that your browser actually requests files like media.restorationhardware.com/is/image/rhis/prod1618051?$ev$

However, these are still not the full-size images as used in the Flash component. Using Wireshark, one can see that tiles are requested while scrolling or zooming.

Like for http://media.restorationhardware.com/is/image/rhis/prod1618051 you will see tiles such as http://media.restorationhardware.com/is/image/rhis/prod1618051?req=tile&id=3UP-z-23gMQL0_Rw7yMXDF&scl=1&rect=256,512,256,256&fmt=swf being requested, and also meta data such as http://media.restorationhardware.com/is/image/rhis/prod1618051?req=ctx

You can also use fmt=png, and change the values for scl and rect. The latter is two values for the top-left coordinate, and another two for the width and height (maximum sizes are returned when using ?req=ctx). Like rect=0,0,1024,1024 gets you a tile for the upper-left corner. For scl the smaller the value, the higher the resolution. It seems that id is not required. Still then, this is a lot of trial and error:

• Details at http://media.restorationhardware.com/is/image/rhis/prod1618051?req=ctx
• The whole image at http://media.restorationhardware.com/is/image/rhis/prod1618051?req=tile&scl=1&rect=0,0,2000,1949&fmt=png
• A partial tile in a higher resolution at http://media.restorationhardware.com/is/image/rhis/prod1618051?req=tile&scl=0.5&rect=0,0,2000,1949&fmt=png

(Hence, for your example: right-click a low resolution image, choose Open in new window, and replace the ?$av_sm$ suffix with ?$ev$, or for larger tiles, with the whole ?req=tile... suffix instead.)

Answer 2

This is really easy if you are running OS X.

• Press ⌘+shift+4
• Crosshairs will appear
• Select the desired capture region:
  • Move the crosshairs to one corner of the region
  • Hold down the left mouse button and drag to the other corner of the region
  • Release the button
• The capture will appear on the desktop as a PNG image

Answer 3

It would be difficult to do so without the .fla file to capture the image. Flash files are difficult to handle in situations like these. You can try to retrieve the .swf file and decompile it if you can't get your hands on the .fla file. That is, if you can't get your hands on the actual original file itself.