3 Replies Latest reply on Mar 16, 2013 10:53 AM by argoNY

    Not sure how best to make a complex graphic


      I'm creating a world map consisting of a dot grid. I'd like to have the colors of the dots change (sparkle) then I will animate some of the dots to pulse and enlarge.


      This is my first Edge project. I started with an svg graphic and began adding colored elipses in Edge, using the base graphic as a guide. I haven't even begun to animate anything or change dot colors and it's already quite tedious.  I don't mind doing it, but I'd like to know if there's an easier way for me to go about this. I am uploading a screenshot of the stage area in progress.


      I appreciate any advice or help you can give me. This is (of course) a tight deadline and I'm learning to build a plane while I'm flying it.  Thanks in advancedottedMapEdgeProject.jpg

        • 1. Re: Not sure how best to make a complex graphic
          TimJaramillo Level 4

          Hi there, you may be able to save some time by dynamically adding the dot symbols to the Stage. See this thread for more info:



          This example shows a particle system, so you may be able to reuse some stuff as well. In order to position your dots, you could create an object array to store all teh point locations, then run a for loop to iterate through that array, and create a dynamic symbol, and position according to each element in the array.



          Here's some psuedo code to put on Stage.compositionReady:


          var array_positions = [{x:50, y:40}, {x:53, y:56}, {x:90, y:81}, etc];


          for (var i=-0; i<array_positions.length; i++)


              var dot = sym.createChildSymbol("myDot", "Stage");

               var dotElement = dot.getSymbolElement();

              dotElement.css({left:array_positions[i].x, top:array_positions[i].y});



          And here is an example of how to change the color of a shape inside a symbol, so you can reuse 1 symbol for the different colored dots:



          • 2. Re: Not sure how best to make a complex graphic
            argoNY Level 1

            wow! thank you for all that. I'm not a programmer, I'm a designer, so I'll need to spend some time with your answer. But I appreciate it. A lot.

            • 3. Re: Not sure how best to make a complex graphic
              argoNY Level 1

              I wonder if I can trouble you again. If it's improper to branch off into another subject, I'll post separately too. But I've skipped the creation and color change of the circles for now and tried making some symbols that will pulse and zoom.


              Here's what happened and I don't know how to fix it. Looks fine in Firefox, and awful in Chrome. I used the elipse tool to make the shapes. Should I be using something else? Since there are so many on the map they need to start small and animate up 1000% or more. Is this not possible?


              Once again, I appreciate your help. I'm in some trouble here. I shouldn't have promised this project before learning EDGE. Duh.


              Here's a link if you can try it yourself, or two graphics capturing FF and Chrome --- http://nicebelt.com/argoEDGE/gciAnim.html





              Edit: I just imported the circles at the large size as red.svg and it's working now. Have I fixed it, or caused other problems (like file size)


              Message was edited by: argoNY