ximpel_website_top home features showcase downloads documents faq contact
Overlays in XIMPEL
Description: In this tutorial XIMPEL overlays will be discussed, with examples.
Overview

Within XIMPEL, overlays are used to link to a subject. For each overlay you can define the location, size, appearance, text and hover effects.

To create an overlay, you first define a canvas tag. Within the canvas tag, you specify one or more overlay tags:

...
<video file="clip01.flv">
  <canvas>
    <overlay x="500" y="100" width="200" height="200" leadsto="RunAway"/>
    <overlay x="490" y="390" width="210" height="100" leadsto="Confront"/>
  </canvas>
</video>
...

Furthermore, within each overlay you must define at least the position coordinates x and y, the width and height sizes and the leadsto attribute that contains the id of the subject you want to link to.

To adjust when an overlay is shown, the overlay tag needs to contain a starttime attribute, which specifies the relative time in seconds from when the current media type is shown. To control the duration for which an overlay is shown a duration attribute is needed, which specifies how many seconds the overlay should be shown. Note that the aforementioned two attributes can be used independently from each other. Example:

...
<video file="clip01.flv">
  <canvas>
    <overlay x="500" y="100" width="200" height="200" leadsto="RunAway" starttime="4" duration="7"/>
  </canvas>
</video>
...

It is possible to change the text that is displayed when you hover over an overlay. Normally, the description of the subject that is linked to is shown. By defining the description attribute, you can customize the text that is shown:

...
<video file="clip01.flv">
  <canvas>
    <overlay x="0" y="0" width="200" height="200" leadsto="RunAway" 
     description="I'm getting out of here!"/>
  </canvas>
</video>
...

Color and alpha can be added to an overlay by specifying the corresponding attributes with values. The color attribute requires a rgb value (format: 0xrrggbb). The default color value is 0xffc0c0. The alpha attribute requires a numerical value ranging from 0 (fully transparent) to 1 (fully opaque). The default alpha value is 0.3.

...
<video file="clip01.flv">
  <canvas>
    <overlay x="500" y="100" width="200" height="200" leadsto="RunAway"
     color="0x00ff00" alpha="0.2" hover_color="0x00ff00" hover_alpha="0.8"/>
  </canvas>
</video>
...

To create a mouse-over effect, you can additionally specify the hover_color and hover_alpha attributes. The hover_color attribute is similar to the color attribute and has a default value of 0xffc0c0. The hover_alpha attribute is similar to the alpha attribute and has a default value of 0.6.

An image can be added to an overlay by specifying the corresponding attribute with value. The image attribute requires a file name string as value, which should point to the location of the image file. Supported image types are JPEG, PNG, and GIF. The default value is an empty string, meaning no image will be shown.

...
<video file="clip01.flv">
  <canvas>
    <overlay x="500" y="100" width="200" height="200" leadsto="RunAway"
     color="0x00ff00" alpha="0.2" hover_color="0x00ff00" hover_alpha="0.8"
     image="fast.png" hover_image="reallyfast.png"/>
  </canvas>
</video>
...

You can create an image mouse-over effect by specifying the hover_image attribute. The hover_image attribute is similar to the image attribute and has an empty string as default value, unless you have set the image attribute. In that case the default value is the same as the value of the image attribute.

Also note that it is possible to only specify a hover_image attribute and no image attribute. This creates an effect that only shows an image when a mouse-over occurs.

Text can be added to an overlay by specifying the corresponding attribute with value. The text attribute requires a string as value. The default value is an empty string, meaning no text will be shown.

The text can also be styled by using the textsize, textfont and textcolor attributes. The textsize attribute requires a numerical value with a minimum of 1 and corresponds to the size of the string in pixels. The default value is 10. The textfont attribute requires a string as value, containing the name of a font that is available on the used operating system. The default value is the default font used within Flex. The textcolor attribute requires a rgb value (format: 0xrrggbb). The default color value is 0x000000 (black).

...
<video file="clip01.flv">
  <canvas>
    <overlay x="500" y="100" width="200" height="200" leadsto="RunAway"
     text="I have to get out of here!" textsize="20" textfont="Arial" textcolor="0xff00cc"
     hover_text="Run!" hover_textsize="28" hover_textfont="Arial" hover_textcolor="0xff0000"/>
  </canvas>
</video>
...

You can create a text mouse-over effect by specifying the appropriate hover_text attributes: hover_text, hover_textsize, hover_textfont and hover_textcolor. The attributes and values are similar to the non-hover versions.

Scores can be added to an overlay by specifying the corresponding attributes with value. The scorename attribute requires a string as value. The default value is an empty string, meaning the default score will be used. If you will only use the default score, you can also omit this attribute. The scorevalue attribute requires a a numerical value, with a default value of 0.

...
<video file="clip01.flv">
  <canvas>
    <overlay x="500" y="100" width="200" height="200" leadsto="RunAway"
     scorename="people" scorevalue="3"/>
  </canvas>
</video>
...

Note that the scores defined in the overlays are only added when you click on such an overlay.

By default, when you click on an overlay you immediately jump to the next subject. You can delay the jump until the current media item has completed by specifying the waitforvideocomplete attribute with a Boolean value of true.

...
<video file="clip01.flv">
  <canvas>
    <overlay x="500" y="100" width="200" height="200" leadsto="RunAway"
     waitforvideocomplete="true"/>
  </canvas>
</video>
...