Use bitmap canvas to create skin graphics - Calaméo Knowledge Base
Not a Calaméo member yet?
Sign up now! It's FREE!
Get the latest news on Calaméo
Follow us on Facebook
Get Calaméo updates in real-time
Follow us on Twitter

Use bitmap canvas to create skin graphics

From Calaméo Knowledge Base

This page will tell you how to create Calaméo skins using a image file, using any image editing software (e.g. Adobe Photoshop, the Gimp...).

Accepted formats are: PNG (recommended), JPG and GIF.

A bitmap canvas is one image file on which are all of the desired button states or other graphical elements. Knowing their position in the bitmap, you will be able to select it with the Calaméo Skins syntax. Here is a simple canvas example:

Canvas1.png

How to use it

The CSML code to extract an image is real simple:

<button action="zoom"
    upState="mycanvas#0,0,35,35"
    overState="mycanvas#0,35,35,35"
    disabledState="mycanvas#0,70,35,35">
</button>

Let's have a look at overState="mycanvas#0,0,35,35": mycanvas refers to our bitmap file previously loaded by means of a media tag

The four coordinates are:

  • abscissa (x-coordinate): distance between the left side of the canvas and your button
  • ordinate (y-coordinate): distance between the top side of the canvas and your button
  • width of the button
  • height of the button

Canvas2.png