Edge Commons - Interactive Svg Map

Hi folks!
I've watched the extraordinary video tutorial of the very talented guys from EdgeDocks (http://edgedocks.com) about how to build an Interactive Svg Graphic with Adobe Illustrator and Adobe Edge Animate: http://www.youtube.com/watch?v=4UEB6gaLKuw.
I've followed the example explained in the video tutorial using a Svg Map file and making selectable one region (the lower right, in light brown color) to try:
http://www.terredainventare.it/svg/MappaSvgInteractive.html
(project files: http://www.terredainventare.it/svg/SvgMap.zip)
So when I select this regione, Edge Animate replaces the placeholder text with the name of the path ("Isontino"), but when I click the red Ellipse, the color of the region remains in light brown. Why?
Many thanks in advance for your help!
Davide

Hi!
Following a precious hint of Simon Widjaja, the author of EdgeCommons libraries,
I've replaced
$(selectedPart).css("fill", $(e.currentTarget).css("background-color"));
with
$(selectedPart).each(function (index) {
$( this ).css("fill", $(e.currentTarget).css("background-color"));
beacuse my "SelectedPart" was a group in Adobe Illustrator and I need to select each element to fill it with color: but it doesn't work.
Where I am get wrong?
Here the update project files: http://www.terredainventare.it/svg/SvgMapEach.zip
Many thanks in advanced!
Davide

Similar Messages

Advice on using Edge Animate & Interactive SVG to create an interactive map

Hello folks, I'm hoping for some guidance on a complicated graphic. My org. has an existing interactive map which was created by a freelancer for us using Ruby and js. It's very nice but I wanted to see if it's possible to recreate using Edge Animate (both as a challenge to myself and as a way of being able to move ownership of it in-house). Here's the map:
http://csai-online.org/sos
I have done a fair amount of work in Edge Animate but have mostly stuck with simple interactivity (play, repeat, navigation links, etc.) so this would be a stretch. But I'm thinking that the map itself (with various shadings) could be recreated using Edge Commons' Interactive SVG function. I would create the map in Illustrator as an svg with different layers for each group of states, which would then be activated by the buttons in Edge Animate. (The floating box could be done entirely in Animate.)
So my questions are,
- Does this seem doable, and has anyone done something similar?
- How do I trigger the layer visibility toggle from Edge? There's a tutorial from Edge Commons which changes the color of an object by CSS, but it seems like it would be simpler to use layer visibility.
- Some of the combinations of checkboxes result in States that are in multiple groups (resulting in a striped fill). I'm guessing I'd need to add some code to indicate that if buttons X and Y were both checked, a third combined layer would be shown. (A further complication is that each of the groups of buttons shuts off the other groups.)
Alternately, it seems like I could also create each state as a series of differently-colored graphics which are then shown or hidden based on which buttons are checked (using arrays, maybe?), but that seems a messier due to the million separate images.
Anyway, how would you approach this problem, I guess is my main question.
Thanks very much.

This looks pretty simple to me and I don't see why you wouldn't be able to do it in edge animate.
Create each state as a button and animate the hover effects inside a symbol and then on the main timeline animate the content boxes opacity to on and off and set labels for each "on" state and then in your button link to that label in the mouse over actions preset.u
As far as calling the bottom content into the div i would just do that by hand by grabbing a simple script off the internet. *theres loads*

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

Yepnope still works, Interactive SVG does not without it | EA 2014.1.1

Hi all,
I'm trying to create an interactive map of the US using Edge Commons interactive SVG. I've been reading that yepnope is deprecated and doesn't work in the new version of EA 2014.1.1 but it seems to still work for me and appears to be the only way I can interact with an SVG. I have added both jquery-1.11.2.min.js and EdgeCommons.SVG.js in the scripts panel but can't seem to get it to work without using the yepnope function. Can anyone help me with this? I'm running a Mac OSX 10.10.2.
Here's a link to the EA file.
Dropbox - default.zip
Thanks in advance for all your help!
Kenny

Hi all,
I'm trying to create an interactive map of the US using Edge Commons interactive SVG. I've been reading that yepnope is deprecated and doesn't work in the new version of EA 2014.1.1 but it seems to still work for me and appears to be the only way I can interact with an SVG. I have added both jquery-1.11.2.min.js and EdgeCommons.SVG.js in the scripts panel but can't seem to get it to work without using the yepnope function. Can anyone help me with this? I'm running a Mac OSX 10.10.2.
Here's a link to the EA file.
Dropbox - default.zip
Thanks in advance for all your help!
Kenny

MapViewer 10.1.2: Interactive SVG in a JSP page

Hello everyone,
I'd like to be able to embed an interactive SVG map in my JSP page (similar to the mapinit/svgmap demo).
What is the simplest way to do it? Is there a JSP tag that would render a map with all javascript?
I'd like to avoid having lots of Java and Javascript code in my JSP definition.
Thanks,
Max

There is no such JSP up to this point. Currently, you have to have some java and Javascript code to implement the control flow. If you want your JSP code to look cleaner, you can move the Javascript code into a seperate JS file and use <SCRIPT TYPE="text/javascript" SRC="myscript.js"></SCRIPT> in your JSP code.

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

What am I doing wrong on this interactive SVG? Please help.

I watched the tutorial on youtube on creating the svg and making an interactive color changing character. I have tried to implement it but I’m not doing something right and am a little lost on the code. I was wondering if anyone could tell me what I am doing wrong.
The SVG File
Has 18 groups that can color change each in a different layer but not grouped within the layers
The layer names are as follows
Owl_Wing_Spots
Owl_Wings
Owl_Belly
Owl_Body
Trunk
Leaf_Outline
Leaf_1
Leaf_2
Leaf_3
E2_Ear_Spots
E2_Ear_Tail
E2_Body
E1_Ear_Spots
E1_Ear_Tail
         15. E1_Body
     16. Wall_Color
     17. Bird_Body
     18.   Bird_Butterfly_Wing
I put the notify(this, "select"); on each layer
I referenced http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js for the javascript file in AI and I also created a js file that is the same as the one in the video named svg.js (but neither made a difference)
The Edge Animate File
I added the SVG file named “elephant_tree2” and then added the following code to the CompositionReady Area
// Load Edge Commons
yepnope({
load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",
complete: function() {
                        // Enable SVG access
                        EC.accessSVG(sym.$("elephant_tree2")).done(
                                        function(svgDocument){
                                                        // add event listener
                                                        svgDocument.addEventListener("select", function(event) {
                                                                        // Remember selected part
                                                                        sym.setVariable("selectedPart", event.target);
                                                                        // show the id of the selected part in the textfield
                                                                        sym.$("selectedPartTxt").html( event.target.id );
// insert code to be run when the composition is fully loaded here
I added a selectedPartTxt text box and named it that too.
None of the groups on the SVG are recognized and the selectedPartTxt does not change. I suspect it may have something to do with the fact there are groups instead of one part but I don’t know how to fix it.
I was also wondering if someone could tell me how to use an SVG for the color chart too instead of recreating it in Edge Animate. I haven't tried to to the color part of the SVG because I still can't get the mouse click to work when on a group that changes.
Any help would be appreciated.
Thanks!
Cherie

Hi, I had a similar problem and this fixed it.
You know how in the illustrator file, you need to reference a file called svg.js from the edge commons library? Download that file, or write the code in a text editor and save it in a .js file and then make sure that the file is in the same folder as your images called by the adobe edge file.
I hope this works!
Liz

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 interactive SVG's be called from within a symbol in the yepnope function?

I'm hoping someone may have run across this before, I'm trying to access an interactive svg (called "map") from inside a symbol (called "world") in the compositionReady event from the stage. The image loads just fine as long as I have it directly on the stage, but for the project I'm working on it would be way more convenient to have the svg inside of a symbol since it's supposed to scale in sync with a bunch of other elements. I have tried everything I can think of to reference the svg inside the symbol, but nothing works.
My code from the compositionReady event looks like this:
yepnope({
          load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",
          complete: function() {
                    // enable svg access
                    EC.SVG.accessSVG( sym.$("map") ).done(              // this is the line where I'd like to reference the svg "map" inside of the symbol "world"
                              function(svgDocument){
                                        // event listener
                                        svgDocument.addEventListener("select", function(event){
                                                  // remember selecte part
                                                  sym.setVariable("selectedPart", event.target);
                                                  // show id
                                                  sym.$("selectedPartTxt").html(event.target.id);
It's the EC.SVG.accessSVG( sym.$("map") ).done part that I can't wrap my head around. I've tried to reference the "world" symbol with things like:
EC.SVG.accessSVG(
var mySymbolObject = sym.getSymbol("world");
mySymbolObject.$("map") ).done
or
EC.SVG.accessSVG( sym.$("world").$("map") ).done
but nothing is working!!! Does anyone know where I've gone wrong? Or perhaps it isn't possible to call an svg from a symbol?
Thanks for any advice you have!

Here is my code in a file I used as a sample. I put the bee in a symbol named world and it works correctly:
EC.SVG.accessSVG(sym.getSymbol('world').$('bees')).done(
          function(svgDocument){
                    // add event listener
                    svgDocument.addEventListener("select", function(event) {
                    // Remember selected part
                    sym.setVariable("selectedPart", event.target);
                    // show the id of the selected part in the textfield
                    sym.$("selectedPartTxt").html( event.target.id );
Let me know if this helps. I can post the sample if you want.
here is the sample: https://app.box.com/s/xb20izcmbmd0lgqfnbgu

Interactive SVG : Can't change the mouse cursor to pointer

Hello I am having issue with the interactive SVG file I have followed the example from adobe tv and edgedocks and created my own project and everything is working just fine, now my question is how to change the cursor that hovers over the svg into pointer, I tried the box inside adobe edge animate and everything but not working even jquery or javascript nothing is really working and I can't get the id from the svg itself so I can target it with jquery so could somebody help me with that, Thanks

you can use css to change the cursor in the init function with
sym.$("selectedPartTxt").css({'cursor':'cursormode'});
change cursormode to one of these:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=all-scroll
add this to the element that needs the cursor asshown above (element chosen from edgecommmons example).

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

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

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

Interactive Street Map in Flash

Hi all,
I'm trying to design an interactive street map for my website
and I would like to do it in Flash. Ideally I would love to have it
looking something like this;
http://www.skiptonweb.co.uk/flashmap/flashmap.htm
Can anyone point me in the right direction for tutorials on
how to do this ?
Cheers

That's easy just go here.
http://code.google.com/apis/maps/documentation/flash/

Edge Commons - Interactive Svg Map

Similar Messages

Maybe you are looking for