User Tools

Site Tools

Table of Contents

Reel

Reel is an established jQuery plugin by Petr Vostřel which takes an ordinary image tag and transforms it into a gorgeous interactive 360° object movie, panorama or stop-motion animation. It is the premier alternative to Flash, Java or Quicktime and is trusted by government agencies and big brands like BMW, Nikon, O2, Blackberry or The New York Times.

With Lightroom and TTG CE3 Stage, you can now add Reel presentations to your website using Lightroom's Web module or – with the aid of TTG CE3 Publisher – Publish Services.

CE3 Stage supports two separate implementations of Reel, Frames and Stitched Panoramas, modified to behave well in the responsive context so that presentations will adapt and resize to fit into desktop, tablet and mobile displays.

Reel: Frames

The “Frames” implementation animates frames in sequence, as they appear in the filmstrip. This is suitable for product rotation, stop animation, or a series of panoramic frames which have not been merged.

To use, in the Color Palette control pane set Page Type as “CE3 Standard”:

In the Appearance control pane, in the Page: Staging control group set Gallery/Embed Style as “Reel: Frames”:

The most important step during setup is that you specify the correct number of frames in the animation sequence. For example, if your sequence is 36 images in length, then the “Frames” slider should be 36.

The options are as follows:

Frames
The number of frames in the animation sequence.

Direction & Speed
Will autoplay the animation; positive values will spin in one direction, and negative values in the other. The greater the number, the faster the animation. A value of zero (0) will disable autoplay.

Delay
After loading, how long the sequence should remain still before the autoplay begins.

Animate Opening
A value of 1 or -1 will cause the animation to cycle once after loading, in one direction or the other. Set zero (0) to disable.

Indicator Size
The height value in pixels of the block which indicates the current position in the sequence.

Loop
Continually repeat the animation when finished.

Dragable
Allows the animate to be advanced forward and backward by click-and-dragging the mouse.

Throwable
Allows the animation to be “flung” with inertia.

Clockwise
Reverses direction of the animation.

Caption
Place some instructional or informative text directly beneath the presentation. May be left empty.

Reel: Stitched Panorama

The “Stitched Panorama” implementation allows you to present a “stitched” (photo-merged) panorama on the page. Panorama images larger than the image viewport may be panned or scrolled. Works with partial or full 360-degree panoramic images.

To use, in the Color Palette control pane set Page Type as “CE3 Standard”:

In the Appearance control pane, in the Page: Staging control group set Gallery/Embed Style as “Reel: Stitched Panorama”:

Setup requires two images of equal height:

A cropped, partial view image used as placeholder. Should be the size at which you would like the panorama “window” to be viewed.

The full panorama image.

These files must be named in a specific way. Any file name will do, but the images need to be named as:

image.jpg

image-reel.jpg

… where “image” is the placeholder image, and “image-reel” is the full panorama. The “image” portion may be any file name you like. The panorama image must have the same name, and end with ”-reel”.

The placeholder image should occupy the first slot in your filmstrip; the panoramic ”-reel” image should be in the second slot.

Because Lightroom's Web preview offers only partial support for the CSS3 “background-size” property, the preview may look … odd … in Lightroom. Sorry, but we cannot help this.

In general, it's good to operate with image output settings at a very large width, and then use the Height slider to control the size of resultant images:

Be sure to verify published pages immediately upon upload to make sure your settings all work out happily for the desired presentation. You should always do this anyway, but because Lightroom's preview can sometimes be wonky with this, here it is doubly important.