5 Replies Latest reply on May 20, 2013 11:52 AM by bebebottle2013

    Adding a ColorPicker ComboBox to Edge Animate?

    bebebottle2013

      I watched a tutorial on Youtube about using Edge Animate to allow interactive color changes on an SVG image.  In the youtube video he had 3 or 4 color swatches that he would select from to change the colors to.  However I have a much bigger color chart I would like to offer and about 18 different groups on the SVG that can change in color.  I am hoping to be able to offer a drop-down box of color swatches with a combo box that says the name of the color swatch so that when they have the design the way they want they can copy the color swatch/SVG group name and include in their order. 

       

      I have found some different code on the Internet but I don't know how to implement it in Edge Animate.  Can you show me an example of how to add a ColorPicker ComboBox where I can add my own color swatches to it?  I want the ColorPicker to be something that I can use again and again for every design.

       

      I am really good at AI but not very skilled in website code so any help would be appreciated but I need some step by step instruction. 

       

       

      Thanks!

       

      Cherie

        • 1. Re: Adding a ColorPicker ComboBox to Edge Animate?
          Ken G. Rice Adobe Employee

          Moved from the Creative Cloud to the Edge Animate forum. They will be able to help you here.

          1 person found this helpful
          • 2. Re: Adding a ColorPicker ComboBox to Edge Animate?
            elainecc Adobe Employee

            Hi, Cherie-

             

            I'd suggest that you create a symbol (which you can export and import into a different composition).  Within your symbol, you can lay out your swatches and then set a click handler on the element in the elements panel.  Within the click handler, you can set a common variable like "selected" so that you know what the user has selected.

             

            sym.setVariable("selected", "#ffffff");

             

            OR

             

            sym.setVariable("selected", "pure white");

             

            Then, you can return that variable when your user has finished his workflow.

             

            Hopefully this points you in the right direction.

             

            -Elaine

            • 3. Re: Adding a ColorPicker ComboBox to Edge Animate?
              bebebottle2013 Level 1

              I've never used symbols in AI.  Would you have to create a symbol for each color?  And it would be a hidden swatch chart until clicked?

               

              Is there any way possible to actually use a swatch file from AI?  It stores the color and the name already.  I just don't know how to make the Edge Animate use the AI swatch file.  Just wondering if it is possible.

               

              Thanks!

               

              Cherie

              • 4. Re: Adding a ColorPicker ComboBox to Edge Animate?
                elainecc Adobe Employee

                Hi, Cherie-

                 

                Symbols in Animate are pretty simple - you can go through the Lesson from the Welcome Screen on "Reuse" to get a feel for how to create a symbol.  It can be whatever you want - it's basically a reusable UI element at that point.

                 

                Right now, we don't have close integration with Illustrator, though you can export as SVG or PNG (or JPG) for web.

                 

                Cheers,

                 

                -Elaine

                • 5. Re: Adding a ColorPicker ComboBox to Edge Animate?
                  bebebottle2013 Level 1

                  While it seems easy to create a symbol I don't see how to turn one small swatch into a set of color swatches to choose from when clicked on.  I've watched a tutorial on making a car with tires spin and the spinning balls ... but I'm not making the leap into how to apply like a ColorPicker.  I would need something more to follow. 

                   

                  Have you got a color example you could point me to?  Or is there a means of doing this through jquery coding?