9 Replies Latest reply on Jun 19, 2015 6:44 AM by foj

    creating rollover buttons out of slices for a circle

    matthewdee Level 1

      I have an Edge document which has imported sliced photoshop .pngs in a circle diagram. I need to make each slice a rollover button. How can I do if using an image as a button will ONLY have the button in a rectangle position, I know I can play with the skew but the buttons need to have curved lines as you can see from the image. This seems unlikely it can be done correctly. please see the screenshot of the diagram.

      Anyone with any ideas here?

       

      EdgeCirclewbuttondiagram.png

        • 1. Re: creating rollover buttons out of slices for a circle
          foj Level 1

          Why are you using an image as the hit-area?

           

          I am sure there is a more elegant solution, but you can transform zero alpha shapes to cover each section, even use a few doing the same thing if needed, use these to detect the rollover-event and display the rollover element/s.

           

          (I think) you can bring Illustrator work straight into EA, not sure if this will result in shapes or svgs, svgs behave as images unfortunately (ie use the bounding box).

           

          Hope this helps, be interesting to hear your final solution.

          • 2. Re: creating rollover buttons out of slices for a circle
            matthewdee Level 1

            The zero alpha shapes was a thought as I tried to create shapes which I would simply add on top of each slice but the curves in the slice are what I could not figure out as I cannot have the button hit state hang over each slice. If this is possible and someone can give me a tip on how to do this as I know of no benzier tool like in Flash but is their a way to create a shape in Edge and be able to cut away by using a circle, then taking the shape and converting to a symbol and use that as an invisible button?

             

            This is extremely complex and the only alternative outside of NOT using Edge would be to do the entire project in Flash CC and export it to canvas, I really hope I do not have to do that.

             

            Any help here??

            • 3. Re: creating rollover buttons out of slices for a circle
              resdesign Adobe Community Professional & MVP

              Hi there,

              I would use svg and edge commons for odd shapes since png bounding boxes are alway quadrilaterals.

              Or you could use the area html tag with poly and corrdinated. You will have to find the coordinates by moving a rectange at each point to record it.

              • 4. Re: creating rollover buttons out of slices for a circle
                foj Level 1

                Probably listen to resdesign - but like a dog with a bone I have made shape buttons - buttons 1 to 7 are simple, and you can just pull subsequent buttons in if the rings are buttons too, button 8, the bright red one, is 2 buttons doing the same job and will be more complex if each ring of your image is also a rollover as well as the slices (with a bit of effort button 8 can be much nicer and fit your graphic better).

                 

                Note - I have used overlapping buttons but I have not had any issues with this... with a little work you could circumvent this, remember people just need the rough hot-spot, not precise ( imo =] ).

                 

                Still do not understand why you are using images rather than shapes to activate the rollover?

                 

                shape_btns.PNG

                 

                (redesign, if you're monitoring this thread - you know your edge-commons and html-tags, can you look over my "inline iphone video" question a few rows down (as I write) and provide the correct answer /think you comment on a thread I reference, any input will be much appreciated (hope it's OK to hijack threads like this - only answers are thin on the ground Thanks all.))

                • 5. Re: creating rollover buttons out of slices for a circle
                  foj Level 1

                  Hi Matthew, are the shapes I've created in the image correct enough?

                   

                  I used clipping to make a quarter circle. Rotating 45-degrees gives you buttons 1 - 7, each overlapping the last but this should only register the upper most.
                  Bright-red button 8, I chaved together with clipping and an ellipse (two triggers, but both activate the same thing) - and shapes in a symbol should only make where the shapes are active, so the code can go at symbol level... I better check this and with zero-alpha.
                  You can then block-in dead zones, like the centre with shapes on top.

                   

                  A little ugly, and more of an artists fix. I like the sound of resdesign's edge-commons solution, the more I've got into this the better I realize code can be - EA doesn't always give you what you see

                  • 6. Re: creating rollover buttons out of slices for a circle
                    matthewdee Level 1

                    They are pretty close, I will need a lesson on how to use the clipping function as this seems the easiest method of all. The shapes can actually be invisible as I can place then directly on the top of each slice section.

                     

                    It looks like these are already rollovers?

                     

                    please advize

                     

                    thx so very very much

                     

                    MD

                    • 7. Re: creating rollover buttons out of slices for a circle
                      foj Level 1

                      Think what I said about symbols is wrong, and they will bock each other.

                      • 8. Re: creating rollover buttons out of slices for a circle
                        foj Level 1

                        Hi, yes make the shapes invisible (in the colour alpha value).

                         

                         

                        Then use mouse-over and mouse-out events in the actions for these shapes, or whatever is most appropriate for you, to target the items you want to activate/deactivate on the roll-over. (Do you know how to do this, there are lots of tutorials around if not / if you've used Flash you're half way there.)

                         

                         

                        Below are the clipping details, I just made a circle, best if you know the dimensions (400x400 in this case, then clip in 200 from one side and 200 from another to leave a quarter circle), rotate this 45 degrees 7-times for you first seven buttons - button 8 has to be more ad-hoc. I used another circle to create a central dead-zone, you can use rectangle-spokes to separate the hot-spot slices if you want.

                         

                        clipping.PNG

                         

                        Also some bad lag on our replies I think. Hope this helps, it is a bit of a learning curve for EA but it is the best thing since Flash imo =]

                         

                        ... Also keep redesign's svg/edge commons solution in mind, it may be a lot more robust at the end of the day.

                        • 9. Re: creating rollover buttons out of slices for a circle
                          matthewdee Level 1

                          Ah the clipping tool!

                          I'll brush up on that and thanks again as for us who come from the Flash world doing this is a snap, oh well a little more work won't hurt.

                           

                          thx

                          MDR

                          • 10. Re: creating rollover buttons out of slices for a circle
                            foj Level 1

                            Good luck, it's a real fudge, just works well fairly well with your shape, I thought it would require lots of shapes/buttons to cover each slice  - don't know why there's nothing more complex with shapes in Edge Animate, even a triangle would help!

                             

                            From what I can see as long as you keep the shapes as shapes (eg don't put them in a symbol - as I incorrectly suggested) they will behave like you expect only the stuff inside the shapes boundary counts. You'd think this is the kind of stuff that would be improved in 2015, I'm still using 2014 but guess the shape-range remains the same (which are you using?).

                             

                            While you can do a lot visually, I think the real power of EA is probably when you use the code - so when you get chance check out that edge-commons business that makes svgs behave like shapes that resdesign mentioned.


                            & also realized that my bad ellipse on button 8 could be replaced by taking the clipped circle in again to 25% of the starting size (to 300px in my example) - I think - this will  give you the perfect arc, you then just need to fudge in the rest of the shapes/buttons to fill that slice.