How to embed Edge Animate compositions into existing pages?

New Here ,
Dec 21, 2012 Dec 21, 2012

Copy link to clipboard

Copied

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

Views

37.4K

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 24, 2012 Dec 24, 2012

Copy link to clipboard

Copied

I am wondering about the same thing...

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 26, 2012 Dec 26, 2012

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 26, 2012 Dec 26, 2012

Copy link to clipboard

Copied

Thanks Carey. This is very helpful. I will test this approach for creating an animated website navigation menu -- I am especially worried about z-values...

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 27, 2012 Dec 27, 2012

Copy link to clipboard

Copied

This method works well, except I can't move the animation to anywhere within the html page. I tried placing it in other divs but it seems to be glued in its position in relation to top left as was set in the Edge document.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 27, 2012 Dec 27, 2012

Copy link to clipboard

Copied

Try wrapping your animation inside a parent division that has a CSS property of position:relative.

#DivName {

position:relative; /**to hold absolute positioned elements**/

width: 1000px; /**adjust width to suit**/

margin:0 auto /**with width, this is centered on screen**/

}

HTML:

<div id="DivName">

Animation stuff goes here.....

</div>

Nancy O.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2013 Sep 05, 2013

Copy link to clipboard

Copied

Are all these steps still required for the current version of Edge Animate files? Sounds pretty complicated to me.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2013 Sep 05, 2013

Copy link to clipboard

Copied

Which version of Dreamweaver do you have?  If you're using Cloud based CS6 or CC, adding Edge Animate projects to your pages is a snap.  If you don't have either of those DW versions, you must do it manually.

Nancy O.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2013 Sep 05, 2013

Copy link to clipboard

Copied

I'm on CC but I'm not actually using DW. I use a drag-n-drop builder called Weebly and I'm trying to simplify the import of Edge HTML5 files onto that platform. Weebly will custom HTML code, if I knew what to add.

My current thought is to build a .folio using INDD and place a simple PDF into Weebly. All theory because I'm new to this.

I like the idea of using the .oam file, but Weebly does not support it directly.

I know, I just need to learn DW. So much to learn, so little time.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2013 Sep 05, 2013

Copy link to clipboard

Copied

Weebly?   I'm not even sure Weebly uses HTML5 doc type which is necessary for Edge Animate projects to work. 

An Edge Animate Project is a collection of JavaScript, HTML5, CSS3 and images.  You'll get better results  if you use Dreamweaver or Muse to build your page.

Nancy O.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2013 Sep 05, 2013

Copy link to clipboard

Copied

I realize Weebly is not a professional tool, but it was the answer I needed when I could not afford a custom-built website and could not do it myself. I see other Weebly pages with HTML5, so it's doable. I'll just keep looking for the answers.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 03, 2014 Aug 03, 2014

Copy link to clipboard

Copied

what about multiple animations? multiple DIVs with the same ID breaks the script. the scripts inside "edge_includes" should also loaded only once.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 30, 2014 Aug 30, 2014

Copy link to clipboard

Copied

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?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 17, 2014 Oct 17, 2014

Copy link to clipboard

Copied

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?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Nov 05, 2014 Nov 05, 2014

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 24, 2015 Mar 24, 2015

Copy link to clipboard

Copied

the starttopic wrote back in 2012. which actions are not relevant for web integration now, in current EAnimate?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 14, 2015 Jul 14, 2015

Copy link to clipboard

Copied

Can you explain how to generate the edgePreload.js file. I suspect that I'm using the wrong settings or this is an outdated approach with Edge Animate CC 2015.

My goal is to do a test that can show our client that an Edge Animate creation can be delivered through an ad network AND easily embedded on their website.

Any advice you can offer would be greatly appreciated.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2015 Feb 21, 2015

Copy link to clipboard

Copied

but how i could import couple sequence into one html file without dreamweaver?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 21, 2015 Feb 21, 2015

Copy link to clipboard

Copied

makasiku wrote:

but how i could import couple sequence into one html file without dreamweaver?

By manually inserting relevant code into your HTML file with a code editor like Notepad Plus or Note Tab or Sublime Text, etc...

Nancy O.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2015 Feb 21, 2015

Copy link to clipboard

Copied

!

     

  

      

  

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2015 Feb 21, 2015

Copy link to clipboard

Copied

i have error in console

Uncaught TypeError: Cannot read property 'id' of null

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 21, 2015 Feb 21, 2015

Copy link to clipboard

Copied

Which software?

Have you posted your questions to the Edge Animate forum?

Nancy O.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2015 Feb 21, 2015

Copy link to clipboard

Copied

Nancy O. написал(а):

Which software?

Have you posted your questions to the Edge Animate forum?

Nancy O.

- Brackets code editor

- Nope, where i need do it

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2015 Feb 21, 2015

Copy link to clipboard

Copied

Dropbox - test_edge.html

here's simple example what i mean

Thank you so much for helping

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 21, 2015 Feb 21, 2015

Copy link to clipboard

Copied

Publish Edge Animate project to HTML, CSS and JavaScript.

Edge Animate Help | Publish your content

Edge Animate CC Forum

Nancy O.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines