Last modified: August 16, 2011 15:30:18.

Custom CU3ER Preloader

NOTE: Custom CU3ER Preloader is available only to PRO account holders

Overview

This indicator allows you to track the CU3ER loading progress visually by setting your own preloading image for loading 'reveal' effect. In order to use this feature make sure you have enabled 'Remove CU3ER logo loader' in Branding section.

NOTE: CU3ER Preloader can be used for CU3ER.swf preloading only. Classic preloader indicator still will be used for slide preloading.

Custom CU3ER Preloader

Video tutorial: 3min 25sec
What you will learn:
  • DeployingActions required for Custom CU3ER Preloader enabling.
  • Customization walk-throughCustom CU3ER Preloader personalization.

Here is quick overview of image preloader main features:

  • Front and Back adjustments- your image will be served as one front 'loader' image and one background image. Loader will reveal over background indicating loading progress.
  • Four directions for revealing loading effect can be set - up, down, left and right
  • Tint & Alpha enables you to easily tint and alpha front ('loader') and/or back ('background') part of your image loader.

If you will applying tint to image make sure to use Transparent PNG image format in order to retain transparent areas.

Available panels and corresponding settings:

CU3ER Preloader properties bar:

  1. Preloader image - set what image you would like to serve as custom preloader
  2. Align & Offset - relative alignment and offset from current relative position.
  3. Transform - scale X and scale Y
  4. Direction - defining on of four direction for revealing effect: up, down, left or right
  5. Tint & Alpha - changing color and alpha values for loader and background. Enable 'Use tint' in order to apply (tint) image with selected color.

NOTE: Tweening through tween views is not available for CU3ER preloader. Simple default 'fade in' will be present for tweenShow and 'fade out' for tweenHide.

NOTE: By default CU3ER Preloader in cManager shows 50% loading progress. This way you can easily style your 'loader' and 'background' images. When you hit preview actual reveal animation will take the place.

Example:

Making custom preloader is very easy - you can use your company logo, graphic, slogan or whatever you find convenient.