Graphics Reference
In-Depth Information
6.3.2 Embedding Compositions in an HTML Website
It rarely happens that an Edge Animate composition is published as a stand-
alone. Animations are usually integrated into online websites. This can be done
in several ways. You can use the
object
or
iframe
tag to place the entire Edge
Animate-generated HTML page into an existing HTML document. This option
is advantageous because the existing document only needs extensions in one
place, and the document's DOM does not have to be directly appended with the
many DOM elements of your composition. This produces a clean encapsulation
of the animation. A program such as Dreamweaver can be used when using this
option to place an Edge Animate composition. The following example assumes
that the Edge Animate composition called “Simple Animation” is published from
the “edge” subfolder of the existing website.
4
Project
The files for this example can be
downloaded from http://edgebuch.
simonwidjaja.com
Project Name:
Publishing_Embed
<!doctype html>
<html>
<head><!-- ... --></head>
<body>
<div id="page">
<h1>Edge Animate Composition</h1>
<!--Composition-->
<object id="EdgeID" name="EdgeID"
type="text/html"
width="1000" height="320"
data="edge/SimpleAnimation.html">
</object>
</div>
</body>
</html>
If you do not want this type of encapsulation, such as when you need com-
munication between individual elements or across the entire composition, you
can directly integrate the composition in the DOM of the current HTML docu-
ment. To do this, look at the
HTML
file generated by Edge Animate to see how
to insert the created composition in HTML. Basically, two elements are required
to play a composition: a DIV container must be placed in the document's body
section as the Stage (1). Moreover,
XXX_edgePreload.js
must be loaded
into the document's head section (2) so that all dependent files are loaded when
the website is called. This then writes the DOM elements of the composition in
the DIV container that was created earlier.
<!doctype html>
<html>
<head>
<!-- ... -->
