13 Replies Latest reply on Aug 31, 2013 4:01 PM by Joe K Walls

    Interaction between Edge Animate and RaphaelJS (or any svg library)

    Franck Payen MVP & Adobe Community Professional

      Hello.

       

      Edge Animate's possibilities are really nice as long as i'm working with anything rectangular. The overall UI is very practical and so, but when you want to work with more complex shapes overlapping it gets very limitated.

       

      I've looked around with no success, so may be someone here as a clue for me.

       

      How would you integrate something from this kind of page (interactive map of australia) and make the map and an Edge environment work together.

       

      Here i'm thinking :

      - Edge buttons that would highlight some parts of the map (or reveal some divs from the original html)

      - RaphaelJS code at building of the map that would interact with edge symbols.

       

      So far, my knowledge of code/js/css seems too limited to get things done as i wish, any ideas/insight welcome.

        • 1. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
          simonwidjaja

          Hi Franck!

          You don't have to work with primitive rectangles only. I would recommend SVG graphics to achieve something like the map. SVG graphics can have any shape. You can export them from Illustrator easily. The only limitation right now in Edge Animate is that you cannot access the graphics layer separately (at least not without any hand coding ). But I bet that this feature will be added in a future version as well...

           

          Happy Animating!

          Simon

          • 2. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
            Franck Payen MVP & Adobe Community Professional

            Hi simon, don't worry, i use a lot of svg for many purposes, but, unless i completly overlooked, they are kept inside a rectangular frame, and the click does'nt go through.

             

            If it can, don't hesitate to show me what i missed.

            • 3. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
              joel_pau Level 5

              Bonsoir,

               

              I tested Raphaël versus D3. I prefer D3 because: better to understand and implement.

              Voici mon expérience : j'ai testé "Raphael" et "D3". Et je préfère D3 car j'ai avancé plus vite pour mettre en oeuvre le code et je trouve qu'il marche mieux avec Edge.

              A mon goût, la gallerie d'exemple est beaucoup plus impressionante : les photos et le niveau mathématique.

              • 4. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                simonwidjaja Level 1

                Hi Franck!

                You are right. The default implementation uses the SVG as a background image applied to a div container. That's the reason why you loose all the interactivity within the SVG itself. I love Raphael, but I think it would be an overhead for your map example.

                 

                Here is a light weight solution with (jQuery SVG) that works like a charme with non-rectangle click areas.

                Assuming you have a rectangle placed on the stage (named "playground") you can load the SVG into that container within the "compositionReady" handler of your composition like this:

                 

                yepnope({      load: "libs/jquery.svg.package-1.4.5/jquery.svg.min.js",      complete: function() {           // Load Handler for SVG Graphics           function onSvgLoad(svg, error) {             $('path#Cyan').click( function(){                  alert('hello Cyan');                  // Your code here             });           }           // Select Edge Animate Element for SVG display           var playground = sym.$("playground");           // Load SVG Graphics           playground.svg({});           var svg = playground.svg('get');           svg.load('images/pie.svg', {                addTo: false,                changeSize: false,                onLoad: onSvgLoad           });      } });

                 

                 

                I put together a small demo project with an example svg and all dependencies:

                http://public.simonwidjaja.com/temp/AnSVG.zip

                 

                Hope that helps!

                Cheers,

                Simon

                • 5. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                  Franck Payen MVP & Adobe Community Professional

                  Excellent introduction Simon. I went in that direction and it seems to be working ! And i love it

                  • 6. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                    Martin Hedström

                    Hi Franck,

                    I've been trying to change colors of my svg files using Edge animate, pretty much what you've done - but less complex.

                    Would you mind sharing the project file? I would be forever thankful.

                    Martin

                    • 7. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                      simonwidjaja Level 1

                      Hi Martin, hi Franck,

                       

                      as the initiator of the Edge Commons library for Edge Animate I've developed an extension to fully support interactive SVG assets (e.g. change the DOM of the SVG within Animate or dispatch events from the inner SVG to the outer Animate composition easily). It's still beta and not officially published (will be in a couple of weeks ). As a sneak peek I've attached a simple demo containing the library and the working Animate project.

                       

                      DOWNLOAD PROJECT

                       

                      Is this what you are looking for? Feedback, Ideas etc. appreciated!!!!

                       

                      Happy Animating,

                      Simon Widjaja

                      edgedocks.com

                      edgecommons.org

                      • 8. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                        Martin Hedström Level 1

                        Hi Simon, fantastic work! I'm really exited about this. Finally a working way to use SVG within Edge Animate.

                        What features are you planning for the final release?

                        Thanks

                        Martin

                         

                         

                        Edit: I think this is really cool, but I don't understand enough of it

                        Say that I want to trigger a change of colors to several separate svg images on the timeline, would that be possible?

                        Can I hardcode what svgpath and color to use?

                        • 9. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                          Franck Payen MVP & Adobe Community Professional

                          Simon, how did i miss the sample project last time i went on the labs ? it's exactly what i'm looking for right now, maybe plus a bunch of dynamics. I'll plan on giving you feedback as soon as i find the time (hum)

                          • 10. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                            Jerry Witt Level 2

                            Hi Simon,

                             

                            I'm with Martin. This looks amazing, but I'm not clear how exactly how it works and where it can go. I see the SVG artwork has three named layers that you can swap the color out using $(selectedPart).css("fill", $(e.currentTarget).css("background-color"));

                             

                            Could you also address these SVG layers and tween their rotation? scale?

                             

                            Is there any documentation on using the new, super-commons?

                             

                            Great work!

                            • 11. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                              simonwidjaja Level 1

                              Hi Jerry,

                              we are working on the documentation and several demo project for each feature. We will launch the new features with documentation and new website in a couple of weeks. So now it's just sneak peek

                               

                              The provided example demonstrates two things:

                              1) SVG dispatches an event (using the SVG Interactivity feature of Adobe Illustrator)

                              2) Listen to the event and change the path within the SVG after clicking the color

                               

                              So you can communicate and interact in both directions.

                              If you take a look at the demo project you can find a reference to the svgDocument. With this reference you have full access to the SVG graphics. The following example shows how to hide or transform the clicked element:

                               

                              // add event listener

                              svgDocument.addEventListener("select", function(event) {

                                 

                                  // Use jQuery to hide SVG path

                                  $( event.target ).hide();

                                  // Transform SVG path

                                  $( event.target ).attr( 'transform', 'scale(2,2)' );

                                 

                              });

                               

                              Hope that helps.

                              Cheers,

                              Simon

                              • 12. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                                resdesign Adobe Community Professional & MVP

                                Hey Simon,

                                 

                                Great addition to Edge capabilities. Thanks.

                                 

                                In your sample, there is an issue while collecting the names of the layers. If the names are more than one like North America it becomes North_America and if the name is used twice (I have a map with tectonic plates where the Australian Plate appears on the left and right sides of the map) then it becomes Australian and Australian_1.

                                 

                                If someone is interested here is how I solve the issue:

                                 

                                                var newText = (event.target.id).split("_").join(" ");

                                               var newText2 = newText.split("1").joint("");

                                               sym.$("selectedPartTxt").html( newText + ' Plate' );


                                I suppose there must be a way to combine all this instead, but it is working.

                                • 13. Re: Interaction between Edge Animate and RaphaelJS (or any svg library)
                                  Joe K Walls

                                  Hey Simon,

                                   

                                  Sorry not to sure why I seem to be so lost on this. I can understand howeverything is set up in the diffrent examples you have given where you select a piece, then select a coulour, but I am having problems figuring out how to make this work for a mouse roll over. Like FrankCK did in the example.   For example I'm trying to do something like this this.  I have some odd shapped SVG's that I made in illistrator that I want to be able to rollover in edge animate and have them change colour so you can they are selected.

                                   

                                  Thanks for your help!