Once you have completed your Edge Animate project, the next question is,
“Now what do I do with it?”
With a variety of publishing options available to us in the latest release of Adobe Edge Animate CC, it can be intimidating to take the next step of implementing your composition into your project. This blog post will focus on implementing your responsive Edge Animate composition into an existing web page.
Adding the project files to your web directory
When you publish from Edge Animate for use on the web, the publish > web folder is created and populated with a set of optimized files that is necessary to play your composition in a web browser.
First, copy the files from the published web folder to the same folder where your HTML file exists.
Locating the necessary code
Next we’ll need to add the head code to our web page. This code sets up the runtime, locates and hides the main stage while preloading, and sets the parameters for the composition playback.
Adding the code to your web page
Open the HTML generated from Edge Animate, and locate the HTML comments signifying the Edge Runtime (<!–Adobe Edge Runtime—>, and<! –Adobe Edge Runtime End—>). Select all of the code from the first HTML comment through the second HTML comment, copy these lines of code to your clipboard, and paste them into the heading area of your existing web page. Typically, you’d paste this code before the ending head tag <(/head>).
Next, we’ll need to add the div element that serves as the stage for edge animate. While you can place this code anywhere within your web page, be sure your web page has enough “room” for an element the size of your Edge Animate composition.
Select the div element <(div id=”Stage” class=”EDGE-15840723″></div>), copy it to your clipboard, and paste the div element into the body area of your HTML element. Note the value of “class” in the div element will match the code in the heading area, as well as the Composition Class setting in Edge Animate’s stage properties.
Now, simply reload your web page in a browser. That’s it!
Download Edge Animate, and follow the step-by-step video demonstration of this process on lynda.com. If you do not have a membership, get a Free 7-day Trial by visiting http://lynda.com/trial/chrisconverse.