4 Replies Latest reply on May 12, 2015 7:12 AM by alejdiaz

    Is it possible to not include clipped area in a mouseover trigger?

    alejdiaz

      Having a bit of difficulty getting this to work. I have an animation that is essentially a donut chart, and want to have a rollover information box that comes up when I roll over each particular wedge. The issue I am having is that each wedge is created by clipping (and rotating) circle and a container div. No matter what I do, the 'active' area of a wedge is simply going to overlap that of another without some sort of control of that hot area outside of exclusing the clipped area.

      I thought perhaps of drawing shapes for each hot area separate from the actual wedge symbols, etc  but without the ability to modify the vertices of a rectangle, there simply is no way to modify the rectangle shape into something workable.

       

      What are my options, or is this simply impossible in Edge Animate?

      Is there a way to have something other than a rectangle and circle? or a way to only take into account visible (non-clipped) area as the trigger for the event?

        • 1. Re: Is it possible to not include clipped area in a mouseover trigger?
          resdesign Adobe Community Professional & MVP

          When you have shapes that are not rectangles or square you need to use either the html map tag with polygones for areas. you will have to do this manually for find the coordinates

          or

          use edgeCommons SVG plugin.

           

          Either one works fine.

          • 2. Re: Is it possible to not include clipped area in a mouseover trigger?
            alejdiaz Level 1

            Had never heard of the edgeCommons plugin, thanks for that! Sadly was hoping for some other tools but this will have to do, even if I have to essentially rethink the animation and setup I already have in there. Thanks though!

            • 3. Re: Is it possible to not include clipped area in a mouseover trigger?
              abnesher Level 1

              I know this is the ugliest solution possible, but even those solutions might solve a problem now and then:

               

              I havent seen your graphics, but you can draw several smaller rectangles and circles and try to cover as much of the area as you want with these. Each rectangle/circle is converted to a symbol and used as buttons. Then you add the same click-code to every single button in that area. You can make them all invisible and have them all manipulate the same area for added mouseover/mouseout effects.

               

              Yes, it's ugly as hell, but it can sometimes solve the problem.

               

              example.jpg

               

              EDIT: I realize my example here isnt doable if you convert each shape to a symbol. In this case I would keep them as shapes and would still be able to l add click-functionality to them.

              • 4. Re: Is it possible to not include clipped area in a mouseover trigger?
                alejdiaz Level 1

                Ugly, inefficient....but it might just do the job for this while I learn the svg stuff, so thank you .

                The graphics is just a donut chart, so I could make edge wedge shape hotarea out of just two rectangles with a skew deform, and just squeeze / stretch as needed to fit each, so I might be able to do a rough mapping of the entire thing with instances of a single symbol! (No idea if that gives the same benefits that it did in Flash, I'm extremely rusty in code after spending all my time in Photoshop and After Effects these days.