SEARCH
  Tutorials HTML and CSS Tutorials Style Text with an External Stylesheet

Style Text with an External Stylesheet

Introduction

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 GestureWorks 3

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="">

<CanvasKit>
<ComponentKit>
<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.' />
</ComponentKit>
</CanvasKit>

</GestureWorksApplication>

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:

#caption {
x:30;
y:33;
textSize:17;
textColor:0xFFFFFF;
multiline: true;
wordWrap: true;
width:760;
height:500;
leading:5;
letterSpacing:1.3;
}

subscribe to newsletter