Skip to main content
Participant
December 21, 2012
Question

How to embed Edge Animate compositions into existing pages?

  • December 21, 2012
  • 4 replies
  • 40512 views

How do non-cloud DW CS6 users embed edge animations into existing pages?

    This topic has been closed for replies.

    4 replies

    Participant
    February 2, 2015

    Hi,

    I've managed to embed the adobe edge animation into my page, and when run locally it works perfectly, but when trying to run it on my server (Linux with CentOS 5 32bit using HTML5) it doesn't work. Why?

    (The loading symbol part of the animation works, but then after it vanishes I see nothing.)

    Does my server's OS not support it?

    Thanks for any help!

    Nancy OShea
    Community Expert
    Community Expert
    February 2, 2015
    • Did you upload all the supporting scripts and CSS files to the correct folder on your remote server?
    • Are you working with valid HTML code? 
      http://validator.w3.org/
    • Can you post the URL for us to see?

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    Participant
    February 2, 2015

    There should be a just a globe animation on this page. It works perfectly when run locally. 01.white-blue / globe 30fps

    All the scripts, etc. that were published by Adobe Edge were uploaded to the server with the same relative directories.

    Thanks.

    Participant
    August 30, 2014

    I'm having this same issue. I generated an animated button that I want to display 4-5 times on the same page (exact same animation) but when I paste it the second + time(s), it renders off. I know it has something to do with the composition class/id number. How can you duplicate the same animation on one page?

    AllDayDev2
    Community Manager
    Community Manager
    December 26, 2012

    There are four basic steps needed to embed an Edge Animate composition into an existing page:

    1. Publish from Edge Animate. (This creates the necessary files to run the animation. Also, the code referenced in Step 2 and 3 below will be included in the .html file that Animate creates inside the publish/web folder, which you can just copy/paste.)

    2. Add a <div> to the page that has the ID of Stage and the correct class name for your stage (i.e. the "Composition ID" for your project in Animate).
      For example: 
      <div id="Stage" class="EDGE-1655086"></div>

    3. Include the Preload .js file and the default style in your page's header, within Edge Runtime HTML comments.
      For example: 
      <!--Adobe Edge Runtime-->
      <script type="text/javascript" charset="utf-8" src="test-1655086_edgePreload.js"></script>
      <style>
      .edgeLoad-EDGE-1655086 { display:none; }
      </style>
      <!--Adobe Edge Runtime End-->

    4. Make sure to upload all of the include files to your server in the appropriate relative locations. This includes the _edge.js files, _edgeActions.js file, _edgePreload.js file, the edge_includes folder and its contents, any other files/folders created inside the "publish/web" folder when you publish from Edge Animate (e.g. "images" folder, etc.).

    Here is a very simple example that will hopefully help to clarify:

    http://thetraininggrounds.com/An-test/Insert-An-into-existing-page.html

    As a reference, these are all of the files involved in my example:

    • An-test/Insert-An-into-existing-page.html (my existing HTML page)
    • An-test/ball-bouncing-banner_edge.js
    • An-test/ball-bouncing-banner_edgeActions.js
    • An-test/ball-bouncing-banner_edgePreload.js
    • An-test/edge_includes/edge.1.0.0.min.js
    • An-test/edge_includes/jquery.easing.1.3.js
    • An-test/edge_includes/jquery-1.7.1.min.js
    • An-test/edge_includes/json2_min.js
    Participant
    October 17, 2014

    In 2014.1 there is no *_preload.js file in "Publish" folder... There is no jquery files either in edge_include folder. What's going on?

    Adobe Employee
    November 5, 2014

    Hi pantomas

    jQuery dependency is removed in the 2014.1. However, If you need, you can add jQuery to your project by 'Scripts' option in library panel. Also, You always have the option to generate seperate preloader.js file by changing your publish settings. It's just that you are no more constrained to these things in Animate 2014.1.

    Thanks

    Manigandan

    Participant
    December 24, 2012

    I am wondering about the same thing...