Quick Overview of Your Adobe Edge Animate CC Project Online - dummies

Quick Overview of Your Adobe Edge Animate CC Project Online

By Michael Rohde

After pouring your blood, sweat, and tears going through the process of creating your animation, you most likely want to put it online so that the world can enjoy your magnificent creation. There are many ways you can put your Edge Animate composition online or embed it in another tool for presentation, such as an iBook.

Your animation can be a standalone web page, occupy part of a website as its own page, or be embedded in an existing page. You can add Edge Animate projects to content management systems (CMS) such as WordPress, Joomla!, or Blogger.

When you save your Edge Animate project, the software creates many different files for you. One of those files is written in HTML5. You can upload this HTML file, along with the other files that Edge Animate creates, to the web via FTP to your site or your client’s site. Doing it that way allows you to create a single web page for your animation or make it part of a larger site.

It is also possible to embed your animation into an existing web page. If you want to do that, then you must still upload the files that Edge Animate creates for you to the folder structure of the site where the page lives.

Then, you grab a snippet of code from the HTML file that Edge Animate created for you and place that snippet of code into the HTML file of the page where you want the animation to appear.

The snippet of code that you want to copy and paste from the Edge Animate HTML file to the HTML file of the page you want to embed your animation looks like this:

<!--Adobe Edge Runtime→
    <script type="text/javascript" charset="utf-8" src="Untitled-1_edgePreload.js"></script>
        .edgeLoad-EDGE-15449885 { visibility:hidden; }
<!--Adobe Edge Runtime End→

You also have to place a line of code such as this into the body tag of the page:

<div id="Stage" class="EDGE-13887483">

The preceding code may look a little intimidating for those who don’t know code, but there’s really nothing to fret over. Basically, this code snippet is what calls your animation into action. The HTML file acts as a shell that triggers the JavaScript. Make sure that you upload all the files that Edge Animate creates for you, so that your composition doesn’t appear broken.

The .edgeLoad line of code in this code snippet contains a unique number, in this case, 15449885. This number was created by Edge Animate to connect the HTML file to the JavaScript files. If you alter this number, you will break the connection between the files and your animation will not play correctly.