5 Replies Latest reply on Apr 28, 2008 11:55 AM by clbeech

    Animated Donut Chart

      My boss wants to have a donut chart with six wedges. When one of the wedges is clicked it will rotate the whole donut, with the clicked wedge to rest at a 3 o'clock stop position. The wedge will then pull out rotate 180 degrees and a legend of boxes associated with that particular wedge will show in some as yet undetermined transition and stop. Then when another wedge is clicked the out wedge will go back to position and the donut will rotate again until the selected wedge is at the 3 o'clock stop position, pull out and... At completion of the flash it will be integrated into a power point presentation.

      I was just starting to get used to multiple layers and actions when I used flash about 8 years ago, but I haven't touched it since. I am a basic user in flash animation at best and currently I am using Flash MX in conjunction with the whole MX suite. I spent hours just trying to rotate the donut and pull the wedge out and rotate that without success. One question I have at this point is why when I right click on the timeline and choose Create Motion Tween, sometimes I get a dashed line instead of the Arrow and the objects do not animate correctly? Secondly how is the best way to tie in the actions to clicking the wedges (action script)? I am hoping I don't need to create library images of every position of the donut (i.e. one whole, one with the blue wedge out, one with the purple wedge out).

      Any help to get this project going would be of great help and if this goes well I will have many more projects to do
        • 1. Re: Animated Donut Chart
          Emma87 Level 1
          first question
          i had this problem not long a go
          hopefully this will help

          make sure each different element is on a different layer
          if you have two different things it wont work
          also the elements sometimes have to be broken apart and don't include the last keyFrame in the selection to be given the tween or it won't work either
          i find selecting the frames and then applying the tween by going to the properties panel and changing the Tween to motion easier

          it takes a while to get used to it and it can be frustrating if it doesn't work

          second question
          you can use both but actionScript is probably easier
          either leave them as moveClips and add and onPress event in the actionscipt of the frame(important!)
          or make them buttons and put the animation on the down part

          hopefully this will help you

          • 2. Re: Animated Donut Chart
            evil8 Level 1
            Thanks alot. I'm still working on the first part here and your advice really did the trick for my tween problem. Also I found I needed to add Guide Layers for each wedge in the donut as well or the animation goes all wonky on me.
            • 3. Re: Animated Donut Chart
              clbeech Level 3
              hi there - it's far easier to achieve what you're trying to do here with a little code than by using the timeline. I've construct a basic example for you to demonstrate how this can be achieved without a single item on the Stage. You will find the fla and swf HERE
              • 4. Re: Animated Donut Chart
                evil8 Level 1
                clbeech - I am reviewing your code right now. Thank you very much. This looks great.
                • 5. Re: Animated Donut Chart
                  clbeech Level 3
                  you're welcome - drop by the Flashgods chat if you have question or want to learn more about what i did there.