Property Class

This example demonstrates how to define and use a property class. A class is used to create a named set of property values and then use those values in multiple places, avoiding duplication.

To create a class, add a classes entry in the root of the story. Within the classes object, add a named child object with whatever property values you want.

This first example creates a class named emboss with properties that provide a sunken look. The three text items use the class pseudo-property in the init entry.

story = {
  classes: {
    emboss: {
      color:"#FFF",
      font:80,
      opacity:0,
      textShadow:[-0.2,-0.2,0.7]
    }
  },
  frame: {
    aspectRatio:4
  },
  items: [
    {
      text: "1..",
      init: {class:"emboss", pos:-30},
      action: {delay:1, opacity:100}
    },
    {
      text:"2..",
      init: {class:"emboss"},
      action: {delay:2, opacity:100}
    },
    {
      text: "3..",
      init: {class:"emboss", pos:30},
      actions: [{delay:3, opacity:100}, {delay:1}]
    }
  ]
};
story = {
  classes: {
    label: { 
      border: "blue",
      corners:10,
      font:25,
      color:"blue",
      padding: 3
    }
  },
  items: [
    {
      text:"One",
      init: { class:"label", pos:-20 }
    },
    {
      text:"Two",
      init: { class:"label", pos:20 }
    }
  ]
};