19 Replies Latest reply on Jul 29, 2010 1:25 PM by kglad

    Animating a "Fill" graphic

    xcmuddman Level 1

      Hi All,

       

      I am making a flash movie and trying to simulate a water tank being filled. The user inputs a value to a dynamic text field using a positive incrementing button or a negative incrementing button. The value represents a percentage of the tank to be filled. Depending on the value in the text box when the "start fill" button is pressed i want to simulate the tank being filled . I have most of the movie set up and ready, but i am sort of stuck now relating the fill value to the animation that needs to take place.

       

      I was thinking of using a mask that will be at y=0 position on start up and have it tween upwards over the maskee (fill graphic) a certain y value depending on the fill value when the "start fill" button is pressed.

       

      I would also need the animation to stop when the button is pressed again... mostlikely with a another button that gets called using swapDepth... but this is later on... i would really be psyched just to get the mask animation to move right now..

       

      Could anyone help me out?

       

       

      thanks.

       

      - Pat

        • 1. Re: Animating a "Fill" graphic
          kglad Adobe Community Professional & MVP

          convert your mask to a movieclip and use actionscript to tween its _y property.  you can use the flash tween class or one of the third party tween classes.

          1 person found this helpful
          • 2. Re: Animating a "Fill" graphic
            xcmuddman Level 1

            Thank you for the suggestion KGLAD.

             

            so far i have:

             

            Maskee.cacheAsBitmap = true;

            Mask.cacheAsBitmap = true;

            Maskee.setMask(Mask);

             

            Mask.Tween.start;

             

             

             

            I am a long ways away still... Do i have to grapically create the tween on the timeline and then control it through actionscript, or is the tween fully controlled by actionscript?

             

            - Pat

            • 3. Re: Animating a "Fill" graphic
              kglad Adobe Community Professional & MVP

              try:

               

              import mx.transitions.Tween;


              Maskee.cacheAsBitmap = true;

              Mask.cacheAsBitmap = true;

              Maskee.setMask(Mask);


              var tween:Tween = new Tween(Mask, "_y", mx.transitions.easing.None.easeNone,0, -Number(yourTF.text), 2, true);

               



              • 4. Re: Animating a "Fill" graphic
                xcmuddman Level 1

                Cool. i have the Mask now automatically moving on load/ play...

                how would you suggest i make it activate only onPress?

                • 5. Re: Animating a "Fill" graphic
                  xcmuddman Level 1

                  KGLAD,

                   

                  I notice that it takes the same time to animate whether the mask moves 10 pixels or 100 pixels. Can you tell me how i can get around this?

                   

                  - Pat

                  • 6. Re: Animating a "Fill" graphic
                    kglad Adobe Community Professional & MVP

                    :

                     


                    import mx.transitions.Tween;


                    Maskee.cacheAsBitmap = true;

                    Mask.cacheAsBitmap = true;

                    Maskee.setMask(Mask);

                     

                     

                    yourbutton.onRelease = function(){

                    var tween:Tween = new Tween(Mask, "_y", mx.transitions.easing.None.easeNone,0, -Number(yourTF.text), Number(yourTF.text)/10, true);

                     

                    }


                    1 person found this helpful
                    • 7. Re: Animating a "Fill" graphic
                      xcmuddman Level 1

                      Thanks KGLAD! That code works nicely! I am sooo close!!!

                       

                      I have my animation so that the user has to input a value to make it start and thanks to your help the value governs the fill animation now.

                       

                      I was hoping to do just a few more features.

                       

                      I wanted to have a Counter.text box show the numerical percentage filled based on the "_y" position tween of the Mask...

                      And also wanted to have the button "mc_Fill" which swaps depths with "mc_StartFill" on execution switch back to "mc_StartFill" when the fill percentage is reached.

                      Also wondered how to have "mc_Fill" stop the Mask from tweening and Counter.text from counting if pressed during fill animation...

                      I know this is a lot.

                       

                      My code is as follows:

                       

                      import mx.transitions.Tween;

                       

                      mc_StartFill.onRelease=function(){

                           if (FillMid.text >=1){

                           this.swapDepths(mc_Fill);

                           var tween:Tween = new Tween(Ballast.Mask,"_y",mx.transitions.easing.None.easeNone,0,-(FillMid.text),(FillMid.te xt)/10,true);

                       

                      //Code that I am trying for swapping depths -- (NOT WORKING)

                           Ballast.Mask._y.position = function(){

                                if Ballast.Mask._y.position == FillMid.text){

                                this.swapDepths(mc_StartFill);

                                }

                           }

                      }

                      }

                       

                      //Code that i am trying for stopping Ballast.Mask -- (NOT WORKING)

                           mc_Fill.onRelease = function(){

                           this.swapDepths(mc_StartFill)

                           Ballast.Mask.tween.stop;

                      }

                       

                       

                      I have no idea even how to attemp to associate the y position of Ballast.Mask to the numerical value of a Counter.text box....

                       

                       

                      Any suggestions, KGLAD?

                       

                      thank you so much for all your help so far!

                       

                      - Pat

                      • 8. Re: Animating a "Fill" graphic
                        kglad Adobe Community Professional & MVP

                        you can use the onMotionChanged method of the tween class to update your textfield but i don't understand the rest of your questions.

                         

                        :

                         


                         

                        import mx.transitions.Tween;

                         

                        mc_StartFill.onRelease=function(){

                             if (FillMid.text >=1){

                             this.swapDepths(mc_Fill);

                             var tween:Tween = new Tween(Ballast.Mask,"_y",mx.transitions.easing.None.easeNone,0,-(FillM id.text),(FillMid.text)/10,true);

                        tween.onMotionChanged=function(){

                        yourtextfield.text = 100*Ballast.Mask._y/heightofyourmaskedobject+"% Filled";

                        }

                         

                        //Code that I am trying for swapping depths -- (NOT WORKING)

                             Ballast.Mask._y.position = function(){

                                  if Ballast.Mask._y.position == FillMid.text){

                                  this.swapDepths(mc_StartFill);

                                  }

                             }

                        }

                        }

                         

                        //Code that i am trying for stopping Ballast.Mask -- (NOT WORKING)

                             mc_Fill.onRelease = function(){

                             this.swapDepths(mc_StartFill)

                             Ballast.Mask.tween.stop;

                        }

                         


                        • 9. Re: Animating a "Fill" graphic
                          xcmuddman Level 1

                          Hi KGLAD! Thank you for the help!!!

                           

                          I never knew about the onMotionChange function... that basically keeps track of x or y pixel change of a tweened object? Very cool.

                          I used the math.Round command to get a whole number working too.

                           

                          Got the "FillButton" to swap back to (Off position) when the tween stops using onMotionFinished.

                           

                           

                          Now for my next obstacle - i am trying to get the the fill tween to pick up where it stopped at (if input value was less than 100%) and continue on to a new fill position if the user increments/decrements the FillMid.text field again and presses the StartFill button again.

                           

                          Currently it resets from zero on the next sequential button press...

                           

                          do i have to use another instance name of the StartFill button in this case?

                           

                          i tried :

                           

                          mc_StartFill.onRelease=function(){

                                      if (FillMid.text >= 1){

                                      this.swapDepths(mc_Fill);

                                      var FillPort:Tween = new Tween(Ballast.Mask,"_y",mx.transitions.easing.None.easeNone,0,-(FillMid.text),(FillMid.te xt)/10,true);

                                                  FillPort.onMotionChanged=function(){

                                                              Counter.text=Math.round(Ballast.Mask._y/-1)+"%";

                                                  FillPort.onMotionFinished=function(){

                                                              mc_Fill.swapDepths(mc_StartFill);

                                                  if(Ballast.Mask._y <100){

                                                              (Ballast.Mask,"_y",mx.transitions.easing.None.easeNone,0,-(FillMid.text),(FillMid.text)/10 ,true);

                                                             }

                                                  }

                                         }    

                                    }

                          }

                           

                          Thanks!

                           

                          - PAt

                          • 10. Re: Animating a "Fill" graphic
                            kglad Adobe Community Professional & MVP

                            create a new variable to indicate the amount of fill.  update that variable using the textfield input.

                            • 11. Re: Animating a "Fill" graphic
                              xcmuddman Level 1

                              thanks KGLAD... i tried this and i think that the code is working and maybe even the tween is working too, but i just cannot see the fill adjusting.

                               

                              I can tell that the code is working because the time interval at which the "ON" (filling) and the "OFF" (start fill) buttons swap with each other correlates to the new amount of fill added by the user...

                              These buttons are driven to swap with each other by the onMotionFinished function so somewhere something is moving... i just dont see it.

                               

                              any suggestions?

                               

                              CODE:::

                               

                              stop();

                               

                              import mx.transitions.Tween;

                               

                              var FillAmount:Number;

                              FillAmount=0;

                               

                               

                               

                              btnStartFillMid.onRelease=function(){

                                          if (FillMid.text >=1){

                                          this.swapDepths(btnFillMid);

                                                      var tweenFillMid:Tween = new Tween(Ballast.Mask,"_y",mx.transitions.easing.None.easeNone,-(FillAmount),-(FillMid.text) ,(FillMid.text)/10,true);

                                          if (FillAmount >=1){

                                                      var tweenFillMid:Tween = new Tween(Ballast.Mask,"_y",mx.transitions.easing.None.easeNone,-(FillAmount),-(FillMid.text- FillAmount),(FillMid.text)/10,true);

                                          }

                                          }

                                          tweenFillMid.onMotionChanged=function(){

                                                      FillCounter.text=Math.round(Ballast.Mask._y/-1)+"%";

                                                      FillAmount = FillCounter.text;

                                                      }

                                                     

                                          tweenFillMid.onMotionFinished=function(){

                                                      btnFillMid.swapDepths(btnStartFillMid);

                                          }

                              }

                               

                              • 12. Re: Animating a "Fill" graphic
                                kglad Adobe Community Professional & MVP

                                if tf is the textfield where users can enter the amount of fill and where they enter subsequent amounts of fill, use:

                                 


                                 

                                stop();

                                 

                                import mx.transitions.Tween;

                                 

                                var FillAmount:Number=0;


                                 

                                 

                                 

                                btnStartFillMid.onRelease=function(){

                                  FillAmount += tf.text;
                                FillAmount = Math.min(FillAmount,1);  // not sure if this suits your setup, but there should be some max for FillAmount

                                 

                                            this.swapDepths(btnFillMid);

                                                        var tweenFillMid:Tween = new Tween(Ballast.Mask,"_y",mx.transitions.easing.None.easeNone,-(FillAmo unt),Ballast.Mask._y,(Ballast.mask._y-FillAmount)/10,true);

                                          

                                   

                                            tweenFillMid.onMotionChanged=function(){

                                                        FillCounter.text=Math.round(Ballast.Mask._y/-1)+"%";


                                                        }

                                                       

                                            tweenFillMid.onMotionFinished=function(){

                                                        btnFillMid.swapDepths(btnStartFillMid);

                                            }

                                }

                                 

                                • 13. Re: Animating a "Fill" graphic
                                  xcmuddman Level 1

                                  hmm... I still cant get it to work. Now the animation jumps to the first input value and stops. its acting funky.

                                  Is there any way i can send you my file so that you can check it out and see what i have going on? I wish we could still upload files onto here.

                                   

                                  - Pat

                                  • 14. Re: Animating a "Fill" graphic
                                    kglad Adobe Community Professional & MVP

                                    i don't usually download and correct files unless i'm hired.

                                     


                                    you should be pretty close to having this solved.  i just don't understand how users indicate the amount the want filled and then subsequent amounts and i don't understand what _y value of Ballast.Mask reveals 100% fill.

                                    • 15. Re: Animating a "Fill" graphic
                                      xcmuddman Level 1

                                      rightfully so, my friend. Do you accept donations? You have helped me out a LOT.

                                      • 16. Re: Animating a "Fill" graphic
                                        xcmuddman Level 1

                                        FillMid.text is the textfield where users input the amount that they want filled... i used a

                                        counter with + and - buttons to do this.

                                        This value can freely be incremented/decremented at any time.

                                         

                                        The value input here drives the Ballast.Mask tween.

                                        The Ballast.Mask tween with onMotionChanged drives the other text field "FillCounter.text which displays the percentage filled.

                                        • 17. Re: Animating a "Fill" graphic
                                          kglad Adobe Community Professional & MVP

                                          what sort of numbers are in FillMid?   decimals like  0.1?

                                           

                                          and what value of _y corresponds to 100% filled.

                                           

                                          (and you can hire me by sending an email via my website:  www.kglad.com - but this issue is close to resolved so i don't think there's a need to hire me for this problem.)

                                          • 18. Re: Animating a "Fill" graphic
                                            xcmuddman Level 1

                                            FillMid.text increments / decrements by only whole numbers up to 100 and not less and 0.

                                             

                                            the Mask movie clip in Ballast (Ballast.Mask) is exactly 100 pixels tall. This is how the _y value correlates to full at 100%.

                                             

                                            - Pat

                                            • 19. Re: Animating a "Fill" graphic
                                              kglad Adobe Community Professional & MVP

                                              use:

                                               

                                              stop();

                                               

                                              import mx.transitions.Tween;

                                               

                                              var FillAmount:Number=0;


                                               

                                               

                                               

                                              btnStartFillMid.onRelease=function(){

                                                FillAmount += Number(FillMid.text);
                                              FillAmount = Math.min(FillAmount,100); 

                                               

                                                          this.swapDepths(btnFillMid);

                                                                      var  tweenFillMid:Tween = new  Tween(Ballast.Mask,"_y",mx.transitions.easing.None.easeNone,-(FillAmount),Ballast.Mask._y ,(FillAmount+Ballast.mask._y)/10,true);

                                                        

                                                 

                                                          tweenFillMid.onMotionChanged=function(){

                                                                      FillCounter.text = -Math.round(Ballast.Mask._y)+"%";


                                                                      }

                                                                     

                                                          tweenFillMid.onMotionFinished=function(){

                                                                      btnFillMid.swapDepths(btnStartFillMid);

                                                          }

                                              }