The Element class is the foundation of LG. Almost all the classes and components are built on top of the Element class. It inherits all the properties of the Sprite class then adds commonly used features that have been left out, using the HTML DOM and jQuery as a blueprint. Since the MovieClip only extends the Sprite to add timeline support, MovieClips are not needed. There are six Elements used within LiquidGear: Flash, Image, Shape, Sound, Text, and Video.

Elements

The Element class contains all the basic event listeners and properties for an object. It can be extended to be used with any element that does not need to be visible on the stage. A good example is the Sound class.

  • Sound – Load external sound effects or music into your site.

VisualElement

Now if you are creating a custom component that is visible on the stage, the VisualElement is what you are looking for. The VisualElement has everything the Element has plus more visual features. Objects that extend the VisualElement include Flash, Image, Shape, Text, and Video. It contains shortcuts to animate as well as special effects such as glow and shadow.

  • Flash – Import external SWFs or load existing DisplayObjects to be used as an Element.
  • Image – The Image class condenses all the functions that load an external image into one line of code.
  • Shape – Quickly create shapes to use as masks, backgrounds, and gradients.
  • Text – Creates text field boxes. You can customize the text to include external fonts and even create input fields.
  • Video – Stream in external videos. Play, pause, and stop videos. Buffer them before they are loaded. And kill them cleanly.

Advantages

Some advantages of using Elements over Sprites and MovieClips are the data property, shortcuts to event listening/calling, debugger, and being able to cleanly remove an element.

Storing Data

Each element contains an object called, data. Anything can be stored in this object, making event calling much smoother. There are two ways to store data,

  • When an element is created, all attributes are stored in the data object. If an attribute matches an actual property of your element such as width, or a property in a custom class extending Element, those properties are also set. 
    var myShape = new Shape({id:'myShape', someData:'Example'});
  • Data can be set after it has already been initialized. 
    myShape.data.someData = 'Example';

Events

To make life just that much easier, there are a few shortcuts to event calling. The main idea of the transition from AS2 to AS3 is the use of Object-Oriented methodology. The biggest part of of OO are the events. Currently, with the Sprite, we can only shoot out an event and just assume where it came from. If any variables need to be set we either have to save it in a global variable or create a custom event.

These disadvantages with the Sprite class that are resolved in the Element class, creating shortcuts and sending data along with events. The event bubbling has also been modified. Take a look at the ElementEvent for more details.