Edge Animate 1.5 multiple compositions

I read the following in the edge 1.5 api docs:
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.
What exactly does it mean, that I can put only a single composition in a HTML page?
If so, what is the "Hand-authord" solution that you offer? can you please elaborate a little bit in this issue?
Thanks for the help,
Yotam.

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.

Similar Messages

Edge Animate, Working with multiple audio tracks

I'm having trouble with one of my animations.
I have set up 8 animated symbols that will play when the user hovers over the symbol.
When the user clicks on a symbol it will play an audio mp3 files.
// insert code for mouse click here
// Sets a toggle to play or pause the audio track
var audio = sym.$("_1")[0]; "_1" is the name of the audio file that is placed on the timeline. The original MP3 file is named 1 but when it was dragged to the canvas it created a layer called "_1".
if (audio.paused) {
audio.play();
} else {
audio.pause();
But there are two problems, one more concerning than the other.
The problems are below:
I can not figure out the code to stop the audio when the symbol is clicked again instead of it being paused. I tried to change audio.pause to audio.stop. That did not help. I would like the audio to stop if clicked again and then play from the beginning if clicked one more time.
This is the one that I am most concerned about. If the user clicks on one symbol, the audio for that symbol will start to play as intended. But if the user clicks on a second symbol, the audio for that symbol will start to play in conjunction with the audio already playing from the previous symbol. It would be nice if a user could click on one symbol it will start to play its audio but if they change their mind and click on another symbol, the playing audio will stop and the new clicked symbol will start to play its audio.
Anyone have any suggestions? Or help to provide. Thanks in advance.

Hi there,
One quick answer to your question, and another that I will follow up on when I get a few minutes.
Animate uses the HTML5 audio API to control audio elements, so you can only use methods and properties that are specified for audio elements in HTML5 browsers.
To "stop" audio, you need to pause it and then set its currentTime property to 0, like so:
sym.$("your_audio_element")[0].pause();
sym.$("your_audio_element")[0].currentTime = 0;
The next time you play this audio element, it will play back from the beginning.
The other part of your question (stopping other playing audio when another symbol audio starts playing) can be done by getting all instances of the audio tag in jQuery and then pausing all audio. I don't have the exact syntax for that at hand as I reply, but I'll respond back with it soon.
hth,
Joe

How do I use edge commons composition loader to load multiple compositions with a next and back button?

I am working on an interactive book and have set up each page as a separate composition in edge.
I am using the edge commons JS library to load multiple compositions into a main composition.
You can see how this works here: Edge Commons - Extension Library for Edge Animate and Edge Reflow | EdgeDocks.com
The way the edge commons tutorial is set up requires a button for each composition i want to load. I am interested in loading multiple compositions with a "next" and "back" button, and a "swipe left, "swipe right" gesture on the content symbol that each composition is loaded into. I also need the swipe features on the content symbol not to interfere with the interactive elements on the loaded composition.
Please suggest a solution that will work without adding additional scripts beyond edge commons and jquery.

Sort of. I'm using this code inside an action for a button symbol. But it doesn't work perfectly. Trying to debug it.
Let me know if you have any luck.
//Check to see if pageCounter already exists
if (typeof EC.pageCounter === 'undefined') {
// it doesn't exist so initialize it to first page
EC.pageCounter = 2;
//check if the page is only 1 digit -- patch for single digit
if (EC.pageCounter < 9) {
// it is, so we need to pad a 0 on the front.
EC.pageCounterString = "0" + EC.pageCounter;
//e.g. 01 ...09,11,12,13....115,222352,,....
else {
EC.pageCounterString = EC.pageCounter;
EC.loadComposition(EC.pageCounterString + "/publish/web/" + EC.pageCounterString + ".html", sym.$("container"));
EC.pageCounter = EC.pageCounter + 1;
//TODO for back -1

Can you create a multiple page website in Edge Animate?

Would like to have a home and just one other page for my website. Is this possible in EA? I assumed it would be easy but cant figure how to do it. Thanks

Please check Re: 2014.1 issue with multiple compositions on page . It also has a sample attached. The reference can also be found @ Adobe Edge Animate CC JavaScript API

How do I know if my Edge Animate compositions will scale up or down to fit each mobile phone platform's resolution? iPhone 3s, 4, 4s, 5, and 5s all have different resolutions. Do I use .png or svg?

I want to use Edge Animate to create native app in PhoneGap Build. How do I know if my Edge Animate compositions will scale up or down to fit each mobile phone platform's resolution? iPhone 3s, 4, 4s, 5, and 5s all have different resolutions. And do I use .png or svg?

If you use responsive scaling it will definitely scale .
For best practises regarding graphics refer
Edge Animate Help | Best practices for graphics in Adobe Edge Animate

How to replay entire composition including video and other animation in edge animate cc 2014.1

I am working on a project but i am stuck now. The basic flow of my project is: intro slides then a video plays then next and back buttons fade in that will control the next set of slides. Another button to replay the whole thing from start. My problem is i am able to replay the slides but not the video. My slides consists of text animations. I am using the new edge animate cc 2014.1 All the slides play from the beginning but the video does not follow that lead. I also managed to replay the video but thats not the desired thing i want. I want the whole composition to play again when i click a button. Can anyone help ?

The problem is with the playReverse call for time duration in which video is there.
playReverse actually plays in timeline in revere order 5sec->4sec->...->0sec, but this won't work for video as it doesn't play the video in reverse.
what you can do is that, in the "previous" button click handler, add
     if(sym.getPosition() > 7750) {
       sym.playReverse();
     else {
       sym.$("trance6")[0].pause();
       sym.$("trance6")[0].currentTime = 0;
       sym.play(0);
Also in "start" button click handler there needs a correction as below:
     Use this sym.$("trance6")[0].play();
     instead of sym.$("trance6")[0].play("1");
hth,
Vivekuma

Responsive scaling of Edge Animate composition in Dreamweaver Fluid Grid Layout

I have created an animation in Edge Animate and have placed it in the header of a Dreamweaver Fluid Grid Layout. I have put it in a div by itself so it can be turned off in the mobile layout. When I test the layout in a browser, the Edge Animate composition scales responsively to the window size, but the height of the div it is in does not. The width of the div changes with the width of the window, but the height of the div remains the same. Because the height of the div doesn't change, as the animation responds and resizes it leaves a large empty space between the bottom of the animation and the content that follows it on the page.
The div itself does not have a rule for it's height associated with it. It seems to me that the div is getting its height from the original size of the html object which is the animation. I tried removing the height rule for the object, but then the div clips the bottom of the animation, and again, it doesn't resize with the window.
Is there a way I can get the div's height to resize with the size of the animation as it changes?

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

Import Edge Animate compositions into In Design

Hi, how do I import Edge Animate compositions into In Design..? Cheers
p.s. perhaps i should have added: my main interest is to have the animate project imported to have it load in the adobe viewer for digital publishing. up until now I'd linked the html overlay from the standard Edge app. One of the things that caught my eye under the features for Edge animate was:
Digital Publishing support
Import Edge Animate compositions into the Adobe Digital Publishing Suite with Adobe InDesign CS6, or into Apple iBooks Author.
How I proceed: as per the help/resources:
Publish as Animate Deployment Package (.oam)
Select this export option to create a package file of your project for use in other Adobe tools. The following tools support Animate Deployment Packages: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver CS6, and Muse.
Select File > Publish Settings.
In the Publish Settings dialog box, make sure Animate Deployment Package is selected as the publish target.
Note or change the target directory.
(Optional) Specify a poster image.
Click Save to save the publish settings, or click Publish.
but all i get is
Content generation error.
[Error: Invalid URL for Web Content Overlay]

Here is a walkthrough on Adobe Dev Connectings - http://www.adobemarketing.com/devnet/digitalpublishingsuite/articles/enhancing-your-dps-fo lios-with-edge-animations.html
The only difference in that walthrough is the reference to in the Publish Settings: in Adobe Edge Animate v1, its now called 'Animate Deployment Package' instead of 'Indesign/DPS'.
Darrell

Edge animate composition is not an option on insert media menu, and I subscribe to the cloud

edge animate composition is not an option on insert>media menu, and I subscribe to the cloud

If your product was installed via the Creative Cloud, you should be able to update it using the Creative Cloud. If your product was installed via other media (like from the DVD), you will not be able to update it using the Creative Cloud. Now that CC has launched, you might want to look at upgrading now and try it out now.
Thanks,
-Elaine

Select Insert Media Edge Animate Composition ????

no me sale la opcion "
Select Insert > Media > Edge Animate Composition"
no aparece en el menu de dreamweaver, no puedo importar edge desde dreamweaver
alguna solucion gracias

Insert > Media > Edge Animate Composition is in Creative Cloud versions of CS6.
Nancy O.

Insert Edge Animate Compositions Unavailable

I don't have an option to import Edge Animate Compostitions in Dreamweaver's 'Insert' menu.
Was this an update to CS6 only available in the cloud and not to boxed versions?
I have CS6 master collection. DW 12.0 Build 5861 for Windows.

This feature of inserting Edge compositions directly into DW is available only to Creative Cloud subscribers (at the moment, since Creative Cloud brings in all the new features as soon as they're released). See here: http://helpx.adobe.com/dreamweaver/using/import-edge-files.html
However, you can manually insert your Edge compositions into your code with a div tag and a unique Identifier to the div, also adding a few supporting Edge files. You should publish your Edge composition for 'Web'. You can possibly decode the published index.html file source code after that. If you need more help doing this, do post back!
-ST

Edge animate composition not working properly on bc

Hi,
I have placed an adge animate composition into the home page of a bc template site (www.w-o-o.me). When i view the home page in safari, the animation can take up to ten seconds before it loads. The business owner says they cannot see it at all. The same with a site i built in muse, (www.thisiscrap.co.uk) the home page marquee is an edge composition, this does not show at all sometimes and is just a blank space at the top of the screen.
Has anyone had a similar problem and if so how did you fix it?
Thank you.

Hi Liam,
Thank you very much yes that what i thought too, sorry i can't leave a link out in the forum coz the client wants to keep the project confidential at this stage, but i can PM you a link...
So you mean i have to edit the links in edge animate too? at first i couldn't get the shop template's css to load in subcategories, so i changed the links like that (/filename.css) and it worked but the edge animation wouldn't load when changing the paths for the files referred in the edge code that you put inside the head tag. So i'm guessing there must be some other paths that can't find its way around... and i found the below link last night, maybe this will work but I'm not sure how to put the javascripts and how to add the variable declaration to the root of my website like how they have mention in the below article, I'm more of a designer then a programer, but I'm learning on it, it would be great if you could tell me exactly whats that code and how to do it properly.
Adobe Edge: Embedding Animations in a Page | Daniel Hanly

Adobe Edge Animate 2014 Can't Start! -- "d3dx9_43.dll" missing. Multiple re-installs same problem. Help?? :(

This is the Dialogue I am presented after every attempt to launch Adobe Edge Animate CC 2014.
"EdgeAnimate.exe - System Error"
"The program can't start because C:\Program Files (x86)\Adobe\Adobe Edge Animate CC 2014\cef\d3dx9_43.dll is missing from your computer. Try reinstalling the program to fix this problem."
I've re-installed Edge Animate several times now, even restarting computer between installs. For whatever reason, whenever Edge Animate is installed, this particular "d3dx9_43.dll" file will not install along with. What can I do? I use Animate frequently enough that this will become an issue if it cannot resolve soon. Please help.

Hi,
It looks like this problem is related to the OS. Found this through Google
http://answers.microsoft.com/en-us/windows/forum/windows_7-gaming/system-error-the-program -cant-start-because/261e2bb5-2e75-e011-8dfc-68b599b31bf5
http://pcsupport.about.com/od/findbyerrormessage/a/d3dx9_43-dll-not-found-missing-error.ht m
Thanks,
Preran

Edge multiple composition animations won't work in Chrome

I am having problems when rendering a multiple composition in Google Chrome.
What's happening eventually is that when I resize the browse window up above the 698px in height, the backgrounds on the website start to disappear, and they keeps disappearing one by one as long you keep resizing the browser.
Here's the link to the website.: http://www.mvcreatives.com/fellini
Any advice will be very much appreciated!

Link provided by you is not working for me.
Anyhow i guess you are facing this problem in a composition with responsive scaling.
Can you try out the workout suggested by Sarah here Responsive Scaling Makes Texts on The Buttons Disappear

Edge animate composition not loading on Business Catalyst catalogue's sub-catalogues...

Hi,
I need urgent help on this one... I have this edge animation slider on the all the pages of the website and its loading perfectly on all the other pages accept the sub-catalouges of our online shop, i believe this issue is caused because if the relative URL thing, but I'm not sure how to correct this, which code should i add and to which files, please help, i have an urgent deadline to meet and i couldn't fix it, i hope you guys here would help as we paying every month for your services.
Thank you very much..
Cheers,
Sam

Hi Liam,
Thank you very much yes that what i thought too, sorry i can't leave a link out in the forum coz the client wants to keep the project confidential at this stage, but i can PM you a link...
So you mean i have to edit the links in edge animate too? at first i couldn't get the shop template's css to load in subcategories, so i changed the links like that (/filename.css) and it worked but the edge animation wouldn't load when changing the paths for the files referred in the edge code that you put inside the head tag. So i'm guessing there must be some other paths that can't find its way around... and i found the below link last night, maybe this will work but I'm not sure how to put the javascripts and how to add the variable declaration to the root of my website like how they have mention in the below article, I'm more of a designer then a programer, but I'm learning on it, it would be great if you could tell me exactly whats that code and how to do it properly.
Adobe Edge: Embedding Animations in a Page | Daniel Hanly

Edge Animate 1.5 multiple compositions

Similar Messages

Maybe you are looking for