Transitions

If you use PowerPoint, you have probably incorporated transitions between slides. RealPix transitions serve the same purposes: they add visual interest to your presentation and give it a smoother flow.

Keep in mind that simpler is better when using transitions: it is possible to distract your viewers from your content if you incorporate transitions that are too numerous or too dramatic.

Fills

A fill adds color to a rectangle in the display window. This is useful at the beginning of a presentation or anytime you want to paint over all or part of the display window. You can fade-in an image, for instance, then fill the display window with black to paint over the image. A fill tag looks like this:

<fill start="0" color="blue"/>

The start attribute is required. It specifies the time from the beginning of the RealPix timeline that the fill occurs. The color attribute sets the fill color. You can use a predefined color name or a hexadecimal value.

Fade-ins and Fade-outs

Fade-in and fade-out tags create a gradual transition from the currently displayed color or image to another image. Here are examples of these tags:

<fadein start="4" duration="3" target="2"/>

<fadeout start="10" duration="3" color="yellow"/>

The start attribute is required. It specifies the time from the beginning of the RealPix timeline that the fade-in or fade-out (in this case, 4 seconds and 10 seconds, respectively) occurs. The duration attribute specifies the total time for the effect to complete. The higher the value, the slower the transition.

Note that the target attribute is required for fade-ins (but not fadeouts). It specifies the <image/> tag handle of the image to fade in. In the example above, the image referenced by handle 2 will start to fade in at 4 seconds, and the fade-in will take place over 3 seconds.

Cross-fades

The crossfade tag creates a transition from one image to another. Here's an example:

<crossfade start="12" duration="3" target="2" srcx="64" srcy="92" srcw="128" srch="256" dstx="0" dsty="0" dstw="449" dsth="385" url="http://www.bu.edu/" />

The start, duration, and target attributes are required and function exactly the same as they do for fade-ins and fade-outs.

This particular example includes some optional parameters as well. The srcx, srcy, srcw, and srch attributes define what portion of the source image fades into the destination rectangle. In the example above, a rectangle within the source image whose top left corner is at (64, 92) pixels, and whose width is 128 pixels and height is 256 pixels will be faded into the display region. Leaving the attributes out fades the entire source image into the destination region.

The dstx, dsty, dstw, and dsth attributes are also optional and define the size and placement (within the destination region) of the image that fades in. Leave them out to fade the image into the entire display window.

This url attribute is also optional. It sets a hyperlink URL for the effect. When the user clicks the image, the user's default Web browser opens the URL. This URL value overrides the presentation default set in the <head/> tag for the remainder of the presentation, or until another url attribute sets a different url. Use a fully qualified URL.

Animations

The animate tag starts an animated GIF cycling through its frames, specifying how long it animates. An example of animate tag:

<animate start="10" duration="30" target="2"/>

As with other transition effects, the start, duration, and target attributes are required.

If you introduce an animated GIF into the presentation with <animate/>, the GIF appears instantly at its start time with no transition effect. However, you can also introduce the GIF with another tag, such as <fadein/>, then use <animate/> to start the animation. Here's an example:

<fadein start="5" duration="1" target="2"/><animate start="10" duration="30" target="2"/>

In this example, the animated GIF fades in at five seconds into the timeline. Its first frame remains stationary until 10 seconds into the timeline. The GIF then cycles through its preprogrammed animation sequence for 30 seconds.

Wipes

A wipe is a transition from one image to another, either by covering the displayed image or by pushing it out of the way with a sliding effect. A typical wipe tag looks like this:

<wipe type="push" direction="left" start="10" duration="3" target="2"/>

Again, start, duration, and target are required. In addition, the type attribute is also required and defines one of two possible variations on the wipe:

normal: a new image moves over current image, which remains stationary.
push: a new image pushes current image out (both images move).

The direction attribute is also required. It sets the direction in which the new image moves:

left: a new image starts at right edge, moves toward left edge.
right: a new image starts at left edge, moves toward right edge.
up: new image starts at bottom edge, moves toward top edge.
down: a new image starts at top edge, moves toward bottom edge.

Pans and Zooms

Pans give the viewer the impression of moving across an image. Zooms appear to move in closer or move out farther from the image.

Pans and zooms are defined with the <viewchange/> tag. A typical <viewchange/> tag looks like this:

<viewchange start="24" duration="3" srcx="80" srcy="80" srcw="48" srch="48"/>

Note that <viewchange/> does not specify a target image. This is because only one image (the one currently in the display region) is involved in the effect.

Zooming in on an Image

To zoom in on an image, display the image and then use <viewchange/> to define the area to zoom in on. In the following example the image fades in and then zooms in, taking three seconds to complete the zoom:

<fadein start="1" duration="2" target="1"/>
<viewchange start="4" duration="3" srcx="64" srcy="64" srcw="128" srch="128"/>

The zoom selects an area 128 by 128 pixels square whose left corner is at (64,64) pixels of the source image. This square displays in the full display region.

Because the zoom effect above does not specify a destination rectangle, the zoom image fills the entire display window. But you can also use the destination coordinates (dstx, dsty, dstw, dsth) to specify a portion of the display window.

Panning across an Image

To pan across an image, you display a portion of the source image, then use <viewchange/> to move to a different part of the source image. In the following example, the image fades in, zooms in on the upper-left-hand quadrant, then pans to the upper-right-hand quadrant. Each effect takes three seconds to complete.

<fadein start="1" duration="3" target="2"/>
<viewchange start="4" duration="3" srcx="0" srcy="0" srcw="128" srch="128"/>
<viewchange start="7" duration="3" srcx="128" srcy="0" srcw="128" srch="128"/>