Transition Effects

Published 2014-10-28 | (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

There are 10 transition effects available for images. The description of the transition effects from page 1 to page 2 for each of the available modes are given below. The special effects are applied on the whole screen, not just to the image area.

Effect | Description
NONE Transition without effects.
FADE1 Page 1 is faded out and page 2 is faded in.
FADE2 Page 1 is white faded out and page 2 is faded in.
BLIND Page 2 appears with blind effect.
SPIRAL Page 2 appears spinning clockwise from the center.
CHECKER Page 2 appears gradually in a grid pattern.
LINEAR Each line of Page 1 is replaced with the lines of page 2 from left to right.
STAIRS Page 1 is transformed to page 2 gradually in the shape of steps from upper left to lower right.
WIPE Page transition happen when the central is spread up and down, or upper and down sides are reached to the center.
RANDOM Effects other than NONE are operated randomly.

Reference to variables of Effect members is available in an instance of CImageViewer or CImageViewer class.

var ImageViewer = new CImageViewer('Common ImageViewer');

    /* OR */


Operating Principles of Slideshow

Slideshow operates as stated below.

Display the first image → Prepare the second image → Display the second image → Prepare the third image → …

Play the first image through .play(). After a while, the Buffering complete event occurs. Later, the Rendering complete event informs that the image is thoroughly scattered on the screen. Then, call prepareNext() to prepare next image. The screen is not changed because the preparation takes place in the background. The Buffering complete event informs that the image is ready to be displayed. Once this is informed, the transition effect can be displayed by calling .showNow(). After transition effect is completed, the Rendering complete event occurs again to proceed to the next image.

Figure: Slideshow operation

Realizing a Transition Effect

After an image display is terminated, the next image is loaded. When loading is completed, transition effect starts to play. After the transition effect, the next image is loaded. The points when image display is ended and loading is completed are acknowledged by the Event loaded from ImageViewer.

To realize a transition effect, follow these steps:

  1. Set up ImageViewer Full screen is designated as usage area for ImageViewer. Register a function to find out the points at which an image is started to load and finished playing.

    ImageViewer = new CImageViewer('Common ImageViewer');
    ImageViewer.setFrameArea(0, 0, 960, 540);
    ImageViewer.setOnBufferingComplete(function() {
        alert('Image ready!');
    ImageViewer.setOnRenderingComplete(function() {
        alert('You can prepare next image!');
  2. Set up slideshow mode There are many differences in internal process sequences between general image display and image display by transition effect. Set a method notifying slideshow mode to enable ImageViewer to execute transition effect.

  3. Play the first image The first image is played with play() method. You need to provide only the URL to designate the location of images in slideshow mode. Factors such as width and height are not required.'$WIDGET/picture_1.jpg', 640, 480);
  4. Prepare to load the next image The next image is loaded after the first image is displayed. The moment when the first playing is ended is equal to the point when the registered function via setOnRenderingComplete() begins to execute. Then, the location of the image and the effects you intend to apply are settled by prepareNext(). After a while, Buffering Completed, which means that the next image is ready for display, occurs.

    ImageViewer.prepareNext('$WIDGET/picture_2.jpg', ImageViewer.Effect.FADE2);
  5. Starting the effect Transition effect starts to play once showNow() is called. When Effect animation is completed, Rendering Complete event, which indicates the completion of image display, takes place. Successive transition effect can be realized by reiterating process 4. showNow() should be called only after Buffering Complete event.

  6. Ending slideshow mode Call endSlideshow() to sneak out of slideshow mode. This method enables next images to display normally.


Slideshow Mode and Restrictions

There are several restrictions in using transition effects:

Scaling is not available

A transition effect applies to the whole screen. Scaling is not available with slideshow mode. Images are played in full screen (960x540 pixels). Set as shown below:

setFrameArea(0, 0, 960, 540);

Images are displayed at the center of the screen in original size. If the size of original image is larger than the width of 1920 pixels and height of 1080 pixels, the image will be downscaled maintaining the aspect ratio, and displayed in the center of the screen.

Other methods cannot be executed while operating transition effects
If other methods are operated while proceeding a transition effect, several problems such as troubles on image transition occur. It is recommended to do other operations only after Rendering complete event indicating that the effect is over.
Hardware restrictions exist
Samsung DTV has several models, but some of them do not support transition effect due to hardware restrictions. CImageViewer provides isEffectAvailable() method to check the availability.