Skip to main content

Media

Attributes​

Before using pictures and other elements, you will need to tell Calaméo where to find them. Skin elements can be loaded from media like PNG, JPEG and GIF files.

AttributeTypeDefaultDescription
nameA string which will be used to reference the media
sourceThe absolute URL of the graphic resource to load
Example
<media name="lib" source="https://www.example.com/canvas.png" />

Using a media canvas​

When using a media canvas, you are not accessing referenced assets like in Flash-based libraries. A media asset is extracted from a defined region of the canvas.

The format is lib#x,y,w,h with:

  • x = distance between the left side of the canvas and your button
  • y = distance between the top side of the canvas and your button
  • w = width of the button
  • h = height of the button
For instance:
<media name="lib" source="https://www.example.com/canvas.png" />
<button action="..." upState="lib#0,0,35,35" />

Let's have a look at:
upState="lib#30,30,60,50"

lib refers to our media file previously loaded by means of a media element.

  • x = 30
  • y = 30
  • w = 60
  • h = 50