by vmenon

Created

October 16, 2014

In previous versions of Dreamweaver, if you embedded your Animate compositions using the Responsive Scaling feature, you may have run into some issues with your project not rendering correctly with the rest of your responsive page. The latest versions of Animate and Dreamweaver contain a fix for this issue so you can now safely embed your responsive Animate projects.

responsiveOn the left shows how responsive Animate compositions would cause a white space in the rest of your website when embedded in Dreamweaver. On the right is the fix!

Known issues when working with multiple Animate projects

There is one known issue with this fix; when you insert multiple responsive Animate compositions on a single HTML page, Dreamweaver does not render the animations. To workaround this issue, you need to tweak the code a little.

This blog post will walk you through the changes that you need to do in the code in Dreamweaver to get all the responsive compositions rendered on the page.

  1. Download and install the latest version of Adobe Edge Animate (CC 2014.1) and Adobe Dreamweaver (CC 2014.1) using the Creative Cloud application.
  2. Create two or more responsive Animate compositions, and publish them to get the .oam files.
  3. Create an HTML page in Dreamweaver, and select Insert > Media > Edge Animate Composition, and then select a .oam file. Save and preview in browser to see the Edge composition playing.
  4. Insert your second .oam file. If you preview in browser now, you will find none of the Edge compositions rendered on the HTML page.
  5. Merge the code generated for each .oam file in the <head> section of the Dreamweaver HTML page, such that the code looks like this:

Using responsive Edge Animate compositions in Dreamweaver

<!–Adobe Edge Runtime–>

<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>

<script>

var custHtmlRoot=”EdgeComp1/Assets/”;

var script = document.createElement(‘script’);

script.type= “text/javascript”;

script.src = custHtmlRoot+”edge_includes/edge.5.0.1.min.js”;

var head = document.getElementsByTagName(‘head’)[0], done=false;

// Create these variables

var compArray = [],

compIndex = 0;

 

// Push the 1st composition

compArray.push(

function() {

var custHtmlRoot=”EdgeComp1/Assets/”;

var opts ={

scaleToFit: “both”,

centerStage: “none”,

minW: “0”,

maxW: “undefined”,

width: “550px”,

height: “400px”

};

opts.htmlRoot =custHtmlRoot;

AdobeEdge.loadComposition(‘EdgeComp1’, ‘EDGE-2308149’, opts, {“style”:{“${symbolSelector}”:{“isStage”:”true”,”rect”:[“undefined”,”undefined”,”550px”,”400px”],”fill”:[“rgba(255,255,255,1)”]}},”dom”:[{“rect”:[“231″,”156″,”auto”,”auto”,”auto”,”auto”],”id”:”preloader5″,”fill”:[“rgba(0,0,0,0)”,”images/preloader5.gif?reloadQuery=1417451054″,”0px”,”0px”],”type”:”image”,”tag”:”img”}]}, {“dom”:{}});

}

);

// Push the 2nd composition

compArray.push(

function() {

var custHtmlRoot=”EdgeComp2/Assets/”;

var opts ={

scaleToFit: “both”,

centerStage: “none”,

minW: “0”,

maxW: “undefined”,

width: “550px”,

height: “400px”

};

opts.htmlRoot =custHtmlRoot;

AdobeEdge.loadComposition(‘EdgeComp2’, ‘EDGE-2639752’, opts, {“style”:{“${symbolSelector}”:{“isStage”:”true”,”rect”:[“undefined”,”undefined”,”550px”,”400px”],”fill”:[“rgba(255,255,255,1)”]}},”dom”:[{“rect”:[“215″,”140″,”120px”,”120px”,”auto”,”auto”],”id”:”preloader4″,”fill”:[“rgba(0,0,0,0)”,”images/preloader4.gif”,”0px”,”0px”],”type”:”image”,”tag”:”img”}]}, {“dom”:{}});

}

);

// Create this function

function LoadNext() {

if (compIndex < compArray.length)

compArray[compIndex]();

++compIndex;

}

script.onload = script.onreadystatechange = function(){

if (!done && (!this.readyState || this.readyState == ‘loaded’ || this.readyState == ‘complete’)) {

done=true;

 

// Call the above created function and pass it to the AdobeEdge.bootstrapCallback

// For more information on bootstrapCallback, see http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/

LoadNext();

AdobeEdge.bootstrapCallback(function() {

LoadNext();

});

script.onload = script.onreadystatechange = null;

head.removeChild(script);

}

};

head.appendChild(script);

</script>

<style>

.edgeLoad-EDGE-2639752 { visibility:hidden; }

.edgeLoad-EDGE-2308149 { visibility:hidden; }

</style>

<!–Adobe Edge Runtime End–>

This workaround is just for the case where you want to embed multiple responsive Animate compositions inside of Dreamweaver; no need to worry if you just have a single composition. This workaround is a temporary way for you to get started, in the future we’ll be improving this workflow to make it easier for you to embed multiple Animate projects.

You can download the samples zip file from link given below, which has the following files for reference:

  • Dreamweaver HTML file after inserting the first OAM file.
  • Dreamweaver HTML file after inserting the second OAM file
  • Dreamweaver HTML file after the code is merged into the <head> section.
  • Whole Dreamweaver project with Edge OAM files.

Download sample files

Happy animating!!!

Vivek Kumar

Edge Animate Team