by Chris Converse

Created

January 13, 2015

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.

chrisconverse_post_1174_figure_01

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.

chrisconverse_post_1174_figure_02

Locating the necessary code

Among these files is an HTML file, which contains the necessary HTML, CSS and JavaScript required to initialize your composition. While this may seem complex, the HTML file is commented with HTML comments that make selecting the necessary code a snap.

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.

chrisconverse_post_1174_figure_03

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!

chrisconverse_post_1174_figure_04

Learn more

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.

 


Chris Converse is a partner at Codify Design Studio, which has a unique focus on both design and development. Chris develops across such languages as PHP, ActionScript, HTML, CSS, and JavaScript, making his design execution optimal across various media. Chris is a featured speaker at various industry conferences, including the How Design and Interactive Conferences, AIGA, Adobe MAX, and EMERGE. Chris has also written, designed, and hosted video training titles on lynda.comUdemy.comAmazon.comHOW Design University, and Adobe KnowHow. Chris graduated from Rochester Institute of Technology with a BFA in graphic design.