Edge Commons to trigger CSS animation in SVG?

Hi there,
I have an SVG file that has a sequence of 2 CSS animations within it:
<defs>
<style type="text/css">
.t1a {
stroke-dasharray:537;
stroke-dashoffset:537;
-webkit-animation: t1a 2s linear forwards;

@-webkit-keyframes t1a {
from {
stroke-dashoffset: -537;
to {
stroke-dashoffset: 0;
.t2a {
stroke-dasharray:544;
stroke-dashoffset:544;
-webkit-animation: t2a 2s linear forwards;
-webkit-animation-delay: 2s;

@-webkit-keyframes t2a {
from {
stroke-dashoffset: -544;
to {
stroke-dashoffset: 0;
</style>
</defs>
The items touched by these CSS are 2 lines:
<line id="t1a" fill="none" stroke="#000000" stroke-width="0.391" stroke-miterlimit="3.864" x1="282.5" y1="999" x2="423.2" y2="480.3"/>
<line id="t2a" fill="none" stroke="#000000" stroke-width="0.391" stroke-miterlimit="3.864" x1="949.1" y1="622.2" x2="423.2" y2="480.3"/>
I'd like to have 2 buttons on Animate to start the 2 animations. I mean that I was thinking to apply and remove the classes to the ids in some way. I think that maybe with Edge Commons this is possible. So, summarizing, I need to manipulate some ids in the SVG and apply those classes to them. Is it possible?

Have you tried the Adobe forums also? E.g. I saw
http://forums.adobe.com/message/4718924

Similar Messages

How to add a link to an interactive svg using edge commons library

Hi,
I've been playing around with this wonderful Edge Commons interactive SVG tutorial
My question is : How to add an external link "url" to an interactive svg using edge commons library ?
Edge commons example file :
http://edgedocks.com/market/interactive-svg-example-project-edge-commons
Edge commons video tutorial :
http://www.youtube.com/watch?v=4UEB6gaLKuw
I have adapted this tutorial to an interactive map, http://madudesign.com/works/france/ every thing is going fine until I couldn't figure out to link a particular url on each part of the region of the map.
I managed to figure out how to change colors on the different parts of the map on mouse over and mouse out but I'm not quite comfortable with JavaScript since I don't use it every day...
I have tryed to link to an url by passing it on the illustrator layer and via the onclick event (event.target.id) to a simple url
http://redpen.io/6svh5u
then working in Edge and publishing on the browser the link returns me a weird url line by replacing the original url slashes "//" by "_x2F_" and I must have misunderstood the proper JavaScript line to open that link from there...
for example on my actual exemple "http://madudesign.com/works/france/"
the first top region of France is normally a link to "http://www.google.com" and it returns "http:_x2F__x2F_www.google.com" plus the complete path to the file too...
I don't know how to get around this trick and have back for each region a particular clean link from the event target id of the svg...
thank-you for any help
matt
link to my edge animate file if needed :
http://madudesign.com/works/france/carte_de_france.zip

I got an answer from the Edge Commons dream team and I am very grateful to them :
"The problem that you bumped into was that you hadn't included a valid URL so far. We weren't sure if you wanted to include them within the SVG file or if you wanted to implement the functionality within Edge Animate. We came up with a solution for the latter one, with a simple switch in the js code:
You have to type in the appropriate URL of course for all the cases."
I have to share the final result:
http://www.madudesign.com/works/france/france_map/
And the zipped project file:
http://www.madudesign.com/works/france/france_map.zip
Thanks to Daniel & Simon
Matt

Synchronise symbol animation using Edge Commons

Hi All,
I've been trying to animate a PNG sequence that I created with After Effects and Fireworks using the Edge Commons parallax snippet. I'm also trying to make this responsive. I have a vague understanding of the code used so I put together a few other bits and pieces of code I found on these forums.
The effect I'd like to obtain is to scroll down and synch the animation of the symbols with the scrollbar. Ideally I'd also like to reverse the animation when scrolling down and pull in other symbols but I'm not even sure that this can be done using inline code or actually creating the reversed animation within the symbol.
I've been trying hard in the past few days but this is where I got so far ;(
https://www.dropbox.com/s/fr6ygqs16jq11fu/wedding_invite.zip
Sorry the file is pretty heavy but the png sequences aren't optimised yet.
Thanks

Hi Eric ,
There might be many ways to do the play and play reverse using click operation as described by you but this is what I think could be done .
We can set a variable in our compositionReady function   sym.setVariable("count", 0);
Then in the click handler of the symbol we can write the following code
var x = sym.getVariable("count");
var mySymbolObject = sym.getSymbol("Symbol_1");
//Now check if you have clicked once then play otherwise play reverse .
if(x%2 == 0)
          mySymbolObject.play();
else
          mySymbolObject.playReverse();
x++;
// Set the value of a Symbol variable
sym.setVariable("count",x);
Please refer the attached composition . Hope it helps
Thanks
Saurav

Using CSS animations in Edge Animate without .js

Is it possible to use edge animate with only css transitions and effects. I do not want to have these .js files for animation and only want to draw and animate in css. Is this possible?

Ask in the Edge forum, but I would simply assume no. CSS3 animation support is different and inconsistent across browsers, so the only way to get predictable results is actually jQuery animation.
Mylenium

Is There A Way To Loop Audio Using Edge Commons?

Hi,
I've been getting on really well using Edge Commons to add audio to my animations (fantastic bit of kit, by the way - thank you simonwidjaja !).
However, while playing a sound via the trigger EC.Sound.play("mySound"); works brilliantly for individual instances of sound I've wholly failed to find a way to get sound files to loop.
I've been struggling with this for an age, now, and really haven't got anywhere at all. I know that Edge Commons integrates SoundJS and I know that SoundJS provides a facility to loop audio but I can't see a way to make it happen via the Edge Commons script.
SoundJS' method seems to be couched as:
static SoundInstance play ( value , interrupt , delay , offset , loop , volume , pan )
And in Edge Commons I can find:
var instance = SoundJS.play(soundId, SoundJS.INTERRUPT_NONE, 0, 0, false, 1);
which I assume (perhaps incorrectly?) relates to the aforementioned SoundJS.
I'm guessing (as has been mooted by resdesign in another post) that I need to edit the following, which appears in creation complete, in order to make looping happen but I just can't seem to get anything I try to work.
{src: assetsPath + "mySound.mp3|" + assetsPath + "mySound.ogg", id: 'mySound'},
Of course, I may simply be on the wrong track altogether; so as ever, any thoughts and ideas will be very gratefully received x

Hi Emmy,
1. can I use buzz to create sound in edge compositions destined for the ipad?
Yep. Although there still exists the MASSIVELY annoying issue whereby iOS insists on a user-push to activate the play of any audio. Apple's assertion is that users shouldn't have to worry about being forced to download unsolicited audio which may end up costing them dear if they are on a chargeable 3G connection; so they've effectively disabled anything that is, or could be described as, an autoplay function. This means that instead of being able to include autoplay of audio - to, say, have a sound track automatically start playing when an animation begins - the playback of said track needs to be initiated by the user.
For example, the code: sym.getComposition().getStage().YourSoundName.play(); would need to be placed on a clickable button as opposed to a trigger on the main timeline or the timeline of any of your symbols.
In essence you have to provide the user with an opportunity to confirm that 'yes I want to hear this'.
While the sentiment behind not wishing users to incur unwarranted expense is understandable (and laudable) the whole concept is a huge pain for animators and a total joke-killer and best. Think of it in terms of Man Slips On Bananaskin... instead of users automatically/seamlessly being able to hear a comedic associated 'whoooooop' sound they have to click a button in order to do so. 'Do you want to hear an amusing noise associated with this bit of stage action? Click for yes'. Obviously one doesn't actually have to couch such a question in actuality, but you get the drift (The Death Of Fun!). As a 'semi' workaround you may want to try experimenting with mouseOver triggers on invisible buttons.
2. will users need internet access to hear the sounds each time? In other words do the sounds have to be called from an exteral source each time they are played, or are they part of the exported file and therefore only downloaded once. (I understand that Ihave to manually include the audio file in the exported Edge file).
Not quite sure about this one as I ended up working on some entirely different stuff; so didn't persue the Apple annoyances long enough to find out more.
3. can I use my own mp3 sounds, and if so, how?
If you mean, can you use mp3s that are not originated by you (i.e. iTunes tracks etc.) then essentially no. Not unless they're copyright/royalty free or you've obtained a license to use them.
If by your own mp3 sounds you mean audio that you've originated yourself, then yes, of course
It makes sense to produce both an mp3 and an ogg version of each sound, to ensure maximum compatibility with regard to user playback. Other than that, simply name your files, place them in a folder called 'audio' (for example) and then, in Edge's 'compositionReady', include the following code for each sound (changing the names accordingly):
sym.YourSoundName = new buzz.sound("audio/YourSoundName", {formats: [ "ogg", "mp3" ]});
sym.YourSoundName.bind('loadeddata', function(e){
var stage = Edge.getComposition(compId).getStage();
Then whenever you want to play a certain sound just use: sym.getComposition().getStage().YourSoundName.play(); on a trigger.
Hope this helps

Can I use this animation of svg??

Can I use this animation of svg??
Elastic SVG Elements | Codrops

I don't know enough about manually writing code to create those SVG effects. I just know Muse will allow placement of such code once it is created.
Adobe Edge Animate has a lot of creative capabilities. A lot of things can be done with SVG elements within that program. Edge Animate can output .OAM files of finished animations to place within Muse. Certain things in Muse, like Slideshow widgets, can be used to trigger and control playback of those .OAM files.

How can I get a sound to play more than once using edge commons?

Hi, I'm very new to all this; so apols if asking dumb stuff...
I've successfully used Edge Commons to get an audio effect to play in a timeline but it will only play once. Does anyone know how I can get it to play again at various trigger points?
The code I'm using in creationComplete is:
yepnope({
          load: "http://simonwidjaja.github.com/EdgeCommons/live/EdgeCommons-0.7.1.js",
          callback: function() {
                    // Load sound manifest (e.g. in creationComplete)
                    var assetsPath = "media/";
                    EC.Sound.setup(
                              {src: assetsPath + "bubbles.mp3|" + assetsPath + "bubbles.ogg", id: "bubbles"},
                        function(){ EC.info("Sound setup finished", "DEMO"); }
Then in a trigger on the timeline I have:
EC.Sound.play("bubbles");
As said, the above plays fine, one time... but if I place another, 'EC.Sound.play("bubbles");' trigger further along on the timeline nothing happens. Similarly, if the audio has played already and the timeline loops, the audio won't play a second time. I'm thinking I need to write in some sort of 'unload' type of thing so it knows to play again when it hits the new trigger? Or I might just be talking cobblers? Who knows? I certainly don't which is why I so desperately need help... please x

That's brilliant, Resdesign, and works perfectly in endlessly adapatable ways! Huge thanks! Great demo/sample file, by the way!
Also I 'accidentally' discovered (which may be of some help to anyone else who's new to all this) that the code which I'd used (see first post, above) ony runs the audio once when in preview mode. However, when the Edge Animate file is published the code works pefectly and when the second trigger is reached the audio plays a second time.
I'm guessing that when the 'publish' facility is utilsed the code is properly compiled (or something like that???) which is why it runs okay.
Anyway, whatever... the problem's solved! Hurrah! (Thanks Resdesign!) x x

Edge Commons Spotlight not working any more on the new version of Edge Animate CC 2014.1

Hi, i am trying to use the Edge Commons Spotlight but with the new version of Edge Animate cc 2014.1 is not working right. The result is a black transparent background with a little white spot on the center. Please help!!!
CompositionReady:
yepnope({
    load: [
             "js/style.css"
Click:
var config = {
    width: 800,
    height: 508,
    type: "image",
    source: "spot/_01.png"
EC.Spotlight.open( config );
I also add js/EdgeCommons.js
and js/jquery-2.1.1.min.js from the disk.
This is the link to the proyect:
https://www.dropbox.com/sh/5w1qspe4vfw0wza/AACEk6ieJiaGGMe_IFpWlssba?dl=0
Thanks a lot!!
more

We will update you on the fix. Right now, if you add jquery ui as a dependency after jQuery, that will solve your problem. I am sharing a sample here - Dropbox - EC.zip. I am loading jQuery UI from the CDN, you can copy is locally also and load it from there.
-Dharmendra

HTML/CSS animation clipped on iPad

Hi list...
When inserting html into an inDesign document intended to be published as an iPad app, I'm running into issues with seeing the entire html. The bounding box that holds the html collapses down to the size of the "This is arbitrary html" message that's displayed in inDesign at design time. Second, when viewing on the iPad, this collapsed box is fully black at first, and you have to touch it in order to see the now clipped html.
Am I missing a setting in inDesign somewhere? In the html, I attached styles to force the <body> and a <div> wrapper to be 500px by 500px. That doesn't seem to help.
Any ideas are appreciated.
- Michael M.

Thanks again Bob for following up. I appreciate your diligence.
I'm trying to insert an svg graphic, with some css animation. That renders fine, but the svg gets shrunk down to fit the bounding box, and the bounding box is clipped. Also, it's filled with black first until you tap it (only then does it display the svg). Below is the html I'm inserting.
Hopefully this is helpful?
- Mike
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#gear{
          -webkit-animation-duration:20s;
          -webkit-animation-iteration-count:infinite;
          -webkit-animation-name:gearSpin;
          -webkit-animation-timing-function:linear;
          animation-duration:20s;
          animation-iteration-count:infinite;
          animation-name:gearSpin;
          animation-timing-function:linear;
          position:relative;
          display:block;
          border:none;
          width:auto;
          height:auto;
@-webkit-keyframes gearSpin {
          from { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
          to { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
</style>
</head>
<body style="width:500px;height:500px;">
<svg id="gear">...</svg>
</body>
</html>

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

Give swipeleft/right gestures to multiple external compositions that are loaded with composition loader by Edge Commons

Hello,
I have multiple external compositions that I load in my Edge project, with the composition loader by Edge Commons.
I would like to connect these external compositions with swipeleft / right gestures.
When I give the containers (where the external compositions are loaded in) the swipe gestures, it
works perfectly. But when the external compositions are loaded, the swipe gestures on the containers doesn't work anymore.
So is it possible to give the external compositions the swipe gestures. And that when they are loaded in my Edge project, the external compositions can communicate with each other.
For Example:
External composition one is loaded and when I swipe to the left, external composition 2 will slide in from right to left.
I think it must be that the external compositions have a function to control the timeline in the Edge Project.
I hope that this is possible and can help me with the code. Or have another solution.
Thanks!

I think I have the same or a similar issue.
I am using a modified version of Edge Commons - Extension Library for Edge Animate and Edge Reflow | EdgeDocks.com
to listen to touch swipe events in an external compositions.
var promise = EC.loadComposition("publish/comp_01.html", sym.getSymbol("content"));
     promise.done(function(comp) {
           var stage = comp.getStage();
       // Listen for events dispatched by the external composition
                stage.$("bg").swipeleft(function() {
                      EC.loadComposition("publish/comp_02.html", sym.getSymbol("content"));
                stage.$("bg").swiperight(function() {
                      EC.loadComposition("publish/test1.html", sym.getSymbol("content"));
This works great for the composition loaded by this script, but the comp.getStage function does not pick up on swipe events on anything other than the .$("bg") in this composition.
For example I have 30 compositions each with a .$("bg") but only the one loaded by this script works with this script. I am looking for a way to universalize the event listener to work with every .$("bg") loaded into my main stage symbol.
Do you or does anyone else have a solution?

Edge Commons and adding external data?

I'm trying to add information from a script. Specifically, this script simply checks the ip address of the user to display the closest city to them and the weather.
The docs on Edge Commons are still sparce, so I don't really have an idea of how to use variables passed to edge.
The script creats four variables:
edge_city
edge_state
edge_temp
edge_weather (cloudy, sunny, etc...)
I want to display these on the stage I have already created.
Any suggestions?
Thanks!

anyone have any information on how to pass page variables in edge?

Edge commons parallax not working...

Hello I am a new user I need help with edge commons the parallax feature is not working so anyone can send me a demo or somethings
thanks

We will update you on the fix. Right now, if you add jquery ui as a dependency after jQuery, that will solve your problem. I am sharing a sample here - Dropbox - EC.zip. I am loading jQuery UI from the CDN, you can copy is locally also and load it from there.
-Dharmendra

Edge Commons...Help

I have been working very hard over the last few months to build in interactive book app with Edge Animate. I have all the pages done and all the interactivity and sound work...in a browser.
However, when I package the mobile app (using PhoneGap Build), I get no sound (using Animate's native audio control) unless the app is running on Android 4.2 or higher.
So I tried a different method I found here: Edge Animate & PhoneGap Build | Prototype A
This did get sound working on older Android devices, but only on the first page (once I moved to page 2, using straightforward html page linking, no more sound), and still no sound on iOS.
I then tried the bootstrapping method from the API. But I couldn't get control of my pages, it just ran instantly to the end of the last page. However, the sound on that last page was working (in Android only).
At a loss I tried using Edge Commons Composition Loader and Sound. I can get the first page to load in the container, but I cannot get the navigation buttons (held within the loaded comp) to load the next page. I can get the sound to work in a browser, but not on a device. And, on Android my loaded composition seems to be cropped, only showing the top left quarter, and runs extremely slowly.
Here is the code I have in the main wrapper page (the one which has the container for loading the external comps into.
//In creationComplete:
EC.loadComposition.setup(sym);
EC.Sound.setup(sym);
EC.centerStage(sym);
//In compositionReady:
EC.loadComposition("Pages/RUP_Cover.html", sym.getSymbol("content"))
.done(function(comp) {
i=0;
var stage = comp.getStage();
stage.$("FWD").click(function() {
i++;
stage.$("PREV").click(function() {
i--;
if(i<1){
i=1;
if (i==1){EC.loadComposition("Pages/RUP_Pg01.html", sym.getSymbol("content"))}
if (i==2){EC.loadComposition("Pages/RUP_Pg02.html", sym.getSymbol("content"))}
I am slowly going insane with this project so any help would be enormously appreciated.
I think the iOS audio issue may be to do with the config.xml I am using for PhoneGap Build, but if anyone has any ideas...
Thanks
Justin

I know this a really late response but this may help someone later...I think you're looking for:
EC.debug( "layout: "+layout, "ADAPTIVE" );
The output of layout will be: 300. So:
if(layout == "300"){
do someting
brian

Problems with Edge Commons in ie9?

Hey everyone!
I recently came across a video (http://tv.adobe.com/watch/create-like-crazy-with-adobe-edge/flexible-layouts-using-adobe-e dge-animate-and-the-edge-commons-library/) from Simon Widjaja. I really like the edge commons library he has, and I also really like the adaptive layout feature the library offers. However I downloaded the source files (from the link above) and I noticed that this does not work in ie9. Does anyone know why this is or is there a possible solution to this?
Thank you sooo much for your help!

Ok I figured it out. All you need to do is update the yepnope function to call
   yepnope({
    load: "http://simonwidjaja.github.com/EdgeCommons/live/EdgeCommons-0.7.1.js",
instead of
   yepnope({
    load: "http://simonwidjaja.github.com/EdgeCommons/live/EdgeCommons-0.4.0.js",

Edge Commons to trigger CSS animation in SVG?

Similar Messages

Maybe you are looking for