User Tools

Site Tools




Welcome to the CreativeML Wiki. This wiki contains knowledge base of articles designed for users and developers of the Creative Markup Language.

Creative Markup Language (CML) is an XML-based open standard for defining object creation, management, and interaction within a multiuser, mulititouch environment. It is the official markup language for authoring Gestureworks Flash and Open Exhibits applications. The goals of CML are to create reusable and sharable ux models that are programming language-agnostic and to accelerate the development of multiuser, multimodal applications.


CML provides an infrastructure for rapidly developing and sharing ux models.

  • Feature List
  • 100+ ux tags
  • Built-in layout system
  • Web safe infrastructure
  • Database driven content
  • Custom CML objects
  • Run-time CML parsing
  • Template rendering system
  • CML file nesting
  • GML support
  • HTML / JS support
  • CSS support
  • Away3D support
  • LEAP Motion support
  • TUIO support (UDP, TCP, FLOSC)
  • ActionScript 3 API


CML can be used to create complete, human readable descriptions of multiuser, multitouch applications. It describes the content, style, and behavior of the objects within the application. It can be conceptualized as an alternative to HTML. However, CML has a centrally different design structure, one that focuses on multiuser, multitouch experiences and allows developers to create interactive experiences without an additional scripting language such as JavaScript.

Central to the design of CML is the conceptual framework of Objects Containers Gestures and Manipulators (OCGM). CML addresses Objects and Containers and Gesture Markup Language (GML) addresses Gestures and Manipulators. CML can link GML defined gestures to media objects or object states. The OCGM approach creates media objects that can be independent of each other; this allows multiple people to work independently (or in coordination) within the same computing environment. The degree of multiuser independence versus cooperation is a fascinating new facet of application design and development.

CML has been developed as an open standard that can be used to rapidly create applications for a wide variety of platforms including desktop, web, and mobile. It is designed to be completely extensible, and therefore makes little mandate on the infrastructure of the CML tag and its corresponding library or class file.

The first CML parser was written by Matthew Valverde at Ideum in the ActionScript programming language in early 2012. From the beginning it was designed to be an extremely configurable system that allows developers to customize the CML specification and parsing functionality to their own needs. Developers can create custom CML tags and if needed rewrite the rules in which the parser operates on their code by overriding methods at various steps in the process.

The CML code base is currently maintained by Ideum as part of the Gestureworks and Open Exhibits software initiatives. The CML libraries have been open sourced by the Open Exhibits project.


The 2D and 3D specifications provides the following organizational structure:

Groups buttons and other elements into a stand-alone unit.
(e.g., ImageViewer, VideoViewer)

Displays media and/or acts as a display container.
(e.g., Text, Image, Video, Graphic, TouchContainer)

Creates display object special effect filters.
(e.g., DropShadow, Glow)

Creates stored geometry procedures that can be applied to a 3D mesh.
(e.g., Cube, Sphere, Plane)

Creates display object layout algorithms.
(e.g., Random, Grid, Pile)

Creates lights that can be applied to a 3D scene.
(e.g., Directional, Point)

Creates materials that can be applied to a 3D mesh.
(e.g., Color, Texture)

Creates textures that can be applied to a 3D material.
(e.g., Bitmap, Video, Render2D)

2D Example

<cml css="styles.css" tuio="false" simulator="false">
<Stage color="0x000000">
    <Graphic class="header-graphic" />
    <Text class="title">ImageViewer</Text>
    <Text class="desc">
        <p>This example demonstrates a simple collection viewer.</p>
        <p>See also:<br />Component<br />ImageViewer<br />VideoViewer<br />MP3Player</p>         
    <CollectionViewer id="collection" autoShuffle="true" amountToShow="2" animateIn="true">
        <Include src="ImageViewer.cml" />
        <Include src="MP3Player.cml" />
        <Include src="VideoViewer.cml" />

3D Example

<?xml version="1.0" encoding="UTF-8"?>
<Material id="mat-1" ref="Texture" texture="#tex-1" />
<Texture id="tex-1" ref="Bitmap" src="assets/stripeTexture.jpg" />
<Geometry id="geom-1" ref="Cube" width="500" height="500" depth="500" />
    <Camera pos="0,0,-1000" lookat="0,0,0" />
    <Mesh geometry="#geom-1" material="#mat-1" touchEnabled="true" x="100">
        <Gesture ref="n-drag-3d" />
        <Gesture ref="n-rotate-3d" />
        <Gesture ref="n-scale-3d" />

HTML Example

<?xml version="1.0" encoding="UTF-8"?><cml>
<HTML x="600" y="100" width="600" height="500">
        function myFunction() {
        <button onclick="myFunction()">Say Hello with JavaScript</button>

Additional Pages

Document Definition - Article related to the creation of CML documents and the CML tag

creativeml.txt · Last modified: 2015/12/21 16:07 by glass