The HTML5 runtime allows you to insert a preloader in your application.

Preloaders are displayed when the images and sounds are loaded from the Internet. If you check the “Include preloader” checkbox, a default preloader is created.

(Developer version only) You can choose the kind of preloader you want to use in your application with the next property :

• Type
  Indicates whether to use a simple customizable image preloader (Image), or a fully customizable preloader consisting of a frame of your application.

The Type property is defined as an Image

A default but customizable preloader is created, displaying a growing circle above an image. As a default, a logo of Clickteam Fusion 2.5 is used. This preloader is conceived to work for different sizes of the application’s window. The following properties are available to customize this preloader:

• Image file.
  This property contains the path to an image (“PNG”, “GIF” or “JPG”). This image is displayed in the preloader. It is automatically centered in the window, so if the image has the same size as the window, it will lay on the entire surface of the window. You can of course use the alpha channel in your image, this will reveal the background of the window.
• Color of progress circle.
  This property contains the color of the progress circle. The preloader indicates the percentage of downloaded data by displaying a growing arc of circle, starting in the bottom and growing anti-clockwise.
• X coordinate of progress circle.
  This property contains the X coordinate of the center of the growing circle.
• Y coordinate of progress circle.
  This property contains the Y coordinate of the center of the growing circle.
• Radius of progress circle.
  This property contains the radius of the growing circle.
• Thickness of progress circle.
  This property contains the width of the progress circle.

(Developer version only) The Type property is defined as a frame from the application

In this case Clickteam Fusion 2.5 will automatically include another frame of the application as a preloader.

• Frame from this application
  This property contains the number of the frame to use as a preloader.

How to create a preloader frame?

• Create a new frame
• Drop any object you want in this frame
• Drop the HTML5 object in the frame. Under the event editor, this object contains two expressions that you can use in your preloader: Get total length, which returns the total length of the data to be loaded, and Get loaded length which returns the current loaded size. You should use these two values to display the progress indicator in your preloader page. The HTML5 object also contains a condition to detect if the frame runs as a preloader (“Is preloader“).

A few things about preloader frames:

• The preloader does not take any input events into account, keys or mouse clicks will have no effect in a preloader.
• You should not detect the end of the download in your code. Just display the amount loaded. Do not end the application.
• Certain browsers load all the data at once : this means that the preloader will go from low (little amount of data loaded) to full (everything loaded) very quickly after a certain wait.