What this means is that you can't open two html files at the same time in Animate (the tool), since we work natively in HTML. The hand-authored solution is further detailed below that statement, which shows you how to reference two separate edgePreload.js files and how to place the files in divs.
Hope that helps,
I'm looking at the same Edge 1.5 API docs page, and there is something that makes it more confusing. First in the Advanced Topics section it says :
"Edge Animate supports multiple compositions in a single HTML page."
Which implies the software application itself supports the use of using more than one Edge composition on a single page -- when the page is opened.
Then it immediately states "As of Edge Animate 1.5, opening a page with more than one composition in it is not supported, but pages can be hand-authored to use multiple compositions."
To me, the first part of the 2nd quoted sentence up to the second comma is in complete condtradiction to the 1st quoted sentence.
Perhaps the 1st sentence is meant to mean "Prior to 1.5, Edge Animate supports multiple compositions in a single HTML page." But that sounds strange that you would remove this essential capability.
Is this the best place for a user such as myself to pass on feedback relating to the documentation?
Sorry to be so nit picky, its just confusing.
My technical question has to do with using mulitple Edge compositions on a Dreamweaver page, using the new Insert > Media > Edge Animate Compostion functionality, and then getting the compositions to interact with each other.
I have created 2 Edge compositions, updated their Compostion Class names to 'Comp1' and 'Comp2', and published them individually as Animate Deployment Packages, so they now have .oam file extensions. Then I take my Muse html file and open it in Dreamweaver in order to use the new Insert > Media > Edge Animate Compostion functionality. This works great! It adds the <object> tag and copies all the necessary files from the package into the site directory structure. And the compostions show up when viewing the page from a browser.
Here is my question:
Can I get the 2 compositions to interact with each other using the API's Edge.getComposition("Comp2"); commands within say the click event handler for Comp1?
Perhaps the Edge Animate runtime is only inside the Edge application, and does not run within the Dreamweaver html file -- in the way the Flash runtime did. If so, there must be away for Comp1 to communicate with Comp2 and vice versa.
Please let me know your thoughts regarding the question in bold text above at your earliest convenience.
Thanks very much for your time and consideration!!
The quick answer is "yes, you can." Instead of using Edge.*, use AdobeEdge.*.
Thanks for the response Elaine!
I tried using AdobeEdge.* in the past few days, just tried it again, but (for me) it also doesn't seem to obtain an initial reference to the 2nd composition. Here is my code from the click event when I open the Actions/code panel for the Stage of Comp1:
var comp2 = AdobeEdge.getComposition("Comp2");
The alert popup displays 'undefined'.
This is what I see when I place this code in the same Actions panel of Comp1, doing a reflexive reference to itself:
var comp1 = Edge.getComposition("Comp1");
The alert popup displays '[object Object]'.
Perhaps I have a related setting incorrect. Surely user error. . Any other advice ?
You might be hitting a race condition, depending on how you're loading your files. Have you checked out the Bootstrapping article in our blog?
While this was geared for a preview version of Animate (back when it was called Adobe Edge), it's still applicable.
I was interested in the same, running one composition after the other, which is what the Bootstrapping article demonstrates. However, after trying this myself, then downloading the example files .. just opening and editing a single edge composition, stops it from working. Difference between the Preview version and the working ( 126.96.36.199.23270 version )...
I cannot tell if it is indeed a race condition. Can only report back my results of different methods I attempted in order to achieve communication between 2 or more compositions on a single html page:
- Adding the .oam packages via Dreamweaver Media > Insert > Edge Compositions, then using either Edge.getComposition("Comp2"); or Edge.getComposition("Comp2"); (in Actions panel of Comp1)... Fails to locate other composition.
- Adding the .oam packages via Dreamweaver Media > Insert > Edge Compositions, then using jQuery/DOM to get to Comp2 elements using var comp2= $("#Comp2", window.parent.document); comp2.contents().find("blahblah"); (in Actions panel of Comp1)... Fails to locate the html document that is inside the Object element created by Dreamweaver. The only child contents() element of the Object is [object Text].
- Publishing compositions as Web (not .oam packages), adding the compositions using iFrames, then using jQuery/DOM to get to Comp2 elements using var comp2= $("#Comp2", window.parent.document); comp2.contents().find("blahblah"); (in Actions panel of Comp1)... Then you have to play with HTML5 iframe sandbox settings. Works but is not so elegant.
- Publishing compositions as Web (not .oam packages), adding the compositions using the methodology explained in documentation section Advanced Topics > Multiple Compositions In A Page, which entails opening each composition's html file and adding specific code by hand to the Dreamweaver html file to the <head> and then adding each composition's <div>, being sure to change the div's id (stage id). Then using jQuery/DOM to get to Comp2 elements (I have a text element called 'comp2DynText') using $("#stageTwo_comp2DynText").html( "some text" ); or whatever it is you want to do. This works however obviously requires manual changes and not using the easy to use package methodology.
- Bootstrapping. Did not try this, i think it more for people wanting to switch out (show/hide) one compostion with another.
Hope that is helpful.
Oops! I'll see what I can do about getting updated files on the blog. Look at the bootstrap section in the API document for any updates, and I'd suggest using AdobeEdge.* as a global in your parent HTML page.
Actually, the process of bootstrapping is put there to prevent race conditions. Even if you're showing two pages at the same time that might have some interaction between the two, the best practice is to bootstrap.
Hope that helps clarify things,
Is there a way to get this to work in AE2015? I'm trying but I'm extremely stuck. There's no reference material on latest versions. Should I just try and fallback to a previous EA version?