Tutorials

Cascading Stylesheets – 2

Tutorial Series: Layout and Style Display Objects, with CSS

Tutorial 1: Style Text with an External Stylesheet

Introduction

Open Exhibits 2 allows us to set the style properties of CML (our 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 Open Exhibits 2 (download the sdk).

Getting Started

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 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:

1
2
3
4
5
6
7
8
9
<?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:

1
2
3
4
5
6
7
8
9
10
11
12
#caption {

    x:30;

    y:33;

    textSize:17;

    textColor:0xFFFFFF;

    multiline: true;

    wordWrap: true;

    width:760;

    height:500;

    leading:5;

    letterSpacing:1.3;

}}