Graphics Reference
In-Depth Information
In addition to this code variation, Edge Animate offers you yet another way to
assign a CSS class to an element. Sticking with the above example, a CSS file could
define the following CSS class:
.repeatedBackground {
background-image: url(images/background.png);
}
If this CSS file is loaded into the HTML file of an Edge Animate composition, you
can assign one or more CSS classes with the small “c” button in the Property panel.
Keep in mind that all elements are represented by a DIV container in the DOM,
unless you explicitly change them. The CSS properties that you assign in this way
will be applied to this DIV container.
Figure 5.19
Add CSS classes to any element
5.5.7 Dynamically Creating and Deleting Symbols
Edge Animate is not just able to create static compositions. You also have the
ability to create other dynamic symbol instances at runtime. This can be triggered
by user actions or from external data sources. For example, interfaces from serv-
er-side applications can be tapped, or data from third parties can be loaded into
your composition and then visualized through symbols. Let's have a look at the
relevant API.
With the
createChildsymbol()
function, you can create an instance of a
previously created symbol that was stored in the Library, and place it on the Stage
or inside another existing symbol. Since this function is available for each symbol,
we can apply them directly to the
sym
variable. The symbol name is expected as
the argument within the Library, followed by the element name of the container
where the new symbol instance is to be added.
// Instance element of a symbol as child
// Element of the specified parent element
// Create
var mySym = sym.createChildSymbol("Name", "ParentEl");
