GestureWorks 3 allows us to set the style properties of CML
(GestureWorks' own Creative Markup Language) component kit objects
through the use of external Cascading Style Sheets (CSS). CSS has become
the standard way to define the look and formatting of documents written
in markup languages such as HTML, SVG, and XML. CSS is useful for
separating the scripting of CML objects and the application's
presentation style. This tutorial requires Adobe Flash CS5+ and
In part 2 of this tutorial, we'll add text to our page layout and style it using CSS.
CSS Tutorial 2: Style Text with an External Stylesheet
In this tutorial we'll use CML to create a text element and style it using an external stylesheet.
If you've already closed the project from part one of this tutorial
then re-open it. We'll use the the same project for the remaining
sections of this tutorial.
Open the file "my_styles.css found in the "library/cml/styles/"
application sub-directory. We'll use this file to style the text field.
First, let's add a text object using CML. Open up the CML file:
<?xml version="1.0" encoding="UTF-8"?>
<GestureWorksApplication version="1.0.0" gml="library/gml/my_gestures.gml" css="library/cml/styles/my_styles.css" xmlns:cml="http://gestureworks.com/cml/version/1.0" key="">
<GraphicElement id="background" />
<TextElement id="caption" text='"I have tried to express the idea that the cafe is a place where one can ruin oneself, go mad, or commit a crime."...Van Gogh writing on The Night Cafe.' />
Now we'll add some style to our newly created text element. Once
again we'll target the "id" of the element using the "#" symbol prefix.
Below is the new style definition: