How to embed Edge Animate compositions into existing pages?

[dariaskempka]

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

[PBodytko]

I am wondering about the same thing...

[AllDayDev2]

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

[PBodytko]

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...

[PBodytko]

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.

[Nancy OShea]

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.

[rcraighead]

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

[Nancy OShea]

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.

[rcraighead]

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.

[Nancy OShea]

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.

[rcraighead]

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.

[rizkysyazuli]

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

[Ggash]

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?

[pantomas]

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?

[Manigandan]

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

[Agapyla]

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

[alandr]

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.

[makasiku]

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

[Nancy OShea]

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.

[makasiku]

!

[makasiku]

i have error in console

Uncaught TypeError: Cannot read property 'id' of null

[Nancy OShea]

Which software?

Have you posted your questions to the Edge Animate forum?

Nancy O.

[makasiku]

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

[makasiku]

Dropbox - test_edge.html

here's simple example what i mean

Thank you so much for helping

[Nancy OShea]

Publish Edge Animate project to HTML, CSS and JavaScript.

Edge Animate Help | Publish your content

Edge Animate CC Forum

Nancy O.