6 Replies Latest reply on Nov 30, 2015 7:07 AM by resdesign

    Change Shape to Image?

    Ezekiel King

      Hey everyone,

       

      Is there a way to replace a shape with an image (svg)?

      I had been using a rectangle as a placeholder, and now want to replace it with a vector I drew of a fish. However, I can't find a way to convert the shape into an image nor can I think of a work around. If anyone has any suggestions or knows a solution, that would be stellar. If not, I am glad I didn't get too far into this project yet but that kind of sucks.

       

      Thanks!

      Zeke

        • 1. Re: Change Shape to Image?
          resdesign Adobe Community Professional & MVP

          Let me see if I understand properly.

          You have a rectangle on the stage.

          You want to replace it with an image.

          Use css or attr.

          Example:

          sym.$("Rectangle").attr('src',"images/fish.svg");

          or

          sym.$("Rectangle").css({'background-image":"url('images/fish.svg')","background-repeat":"n o-repeat"});

          • 2. Re: Change Shape to Image?
            Ezekiel King Level 1

            Where would I enter in either of these things? I get the gist, but I am just new to Edge animate and so I am trying to figure out where everything is in this interface.

            Optimally, I would just convert the rectangle into an image so I could then replace the image (since I know that is a possibility due to another answer on the forums) so I could just avoid having to code this part.

            • 3. Re: Change Shape to Image?
              resdesign Adobe Community Professional & MVP

              This is very easy to do.

              Place your code in stage/compositionReady.

               

              You could make an array of the images's names. Then you can iterate through the name on your click event.

              Example:

              var images = ['cat','dog','bird','mouse']

              var i=0;

              sym.$("button").bind('click',function(){

                i++;

                sym.$("images").attr('src',"images/"+images[i]+".svg");

              });

              • 4. Re: Change Shape to Image?
                Ezekiel King Level 1

                Looking back on this, I wonder if I explained it clearly enough because I think my question was misunderstood to be how to apply a trigger to cause a change rather than what I was getting at which was how to convert a shape itself into an image.

                My professor told me there was no way to do what I ultimately meant, which was to change the shape type into an image type, since I wanted an easy way to apply the animation triggers I had made to my placeholder shape to an image (since what I drew was not a shape but a vector).

                I was still able to make use of the suggestion in another way though, so thank you regardless.

                • 5. Re: Change Shape to Image?
                  resdesign Adobe Community Professional & MVP

                  If you have a native shape in Animate, then you can apply css background-image to load an image into the shape.

                  However a rectangle or ellipse in Animate is a "shape" and cannot be changed to an image (type) per se. For example you could change a image from div to img but you could not change a rectangle from div to img.

                  1 person found this helpful
                  • 6. Re: Change Shape to Image?
                    resdesign Adobe Community Professional & MVP

                    and of course the code for css is

                     

                    sym.$("rectangle").css({'background-mage": "url('images/newImage.png')", "background-repeat": "no-repreat"});