4 Replies Latest reply on Mar 16, 2012 7:42 PM by Mister MUX

    Help with a simple animation

    ZombieWrestler

      Hello everybody!

      I need a little help about an animation using Lingo!

      I need to make 8 sprites and make them look as a volume controler and then make two bottons ( " - " and " + ") and make it looks like that those two bottons controle the volume by pressing " + " , sprite(1) should appear and then when I press it again sprite(2) should appear and so on till sprite(8); and the same thing for the " - " botton, when pressed, sprite(8) should disappear and when pressed again sprite(7) should disappear and so on...

      Any help will be appreciated!

      Thank you in advance!

        • 1. Re: Help with a simple animation
          pallottadesign Level 1

          I'd probably do it using 3 sprites--one for the negative sign, one for the positive sign, and one for the volume indicator, then change the locH property of the volume indicator for each mouseUp on either the negative sign or positive sign.

           

          This behavior uses 3 sprites, named "volumeDOWN", "volumeUP", and "volumeBar". The behavior is applied to the "volumeDOWN" and "volumeUP" sprites. The IF statements constrain the movement of the bar between 300 and 600--otherwise it would move beyond the locH of the other two sprites. Note that you'll have to name the sprites rather than refer to them by sprite numbers.

           

          property mySprite

           

          on beginSprite me
            mySprite = sprite(me.spriteNum)
          end beginSprite

           

          on mouseUp me
            case mySprite.name of
              "volumeUP":
                if sprite("volumeBar").locH < 600 then
                  sprite("volumeBar").locH = sprite("volumeBar").locH + 60
                end if
              "volumeDOWN":
                if sprite("volumeBar").locH > 300 then
                  sprite("volumeBar").locH = sprite("volumeBar").locH - 60
                end if
            end case
          end mouseUp

           

          To get 8 different positions, you'd have to set the range to multiple of 8 and set the increment to the range divided by 8. For example, 200-680 for a range of 480, increment 60...if I have the math correct...

          • 2. Re: Help with a simple animation
            Mister MUX Level 2

            There is certainly nothing at all wrong with the suggestion supplied by pallottadesign, but I thought I might provide an alternative solution. I think I understand how you want this volume control to look, but I may be wrong. One of my favorite techniques is to use imaging lingo to create a "one-sprite widget".

             

            With this behavior you need only one bitmap member as a sprite on the stage. However you do need an additional 3 bitmap cast members in the cast (but not on the score). You need an + button, - button and a "volume indicator" (like a rectangle) that will be repeated depending on the current volume. These 3 cast members should all be the same height.

             

            Attach this behavior to a bitmap sprite. It doesnt matter what the bitmap looks like because the script alters the image. There are parameters that will need to be modified, so open the behaviors parameter dialog to do that. I have a simple demo movie I can send you, so send me a private message with your email address if you want it.

             

             

            -- VOLUME CONTROL ONE SPRITE WIDGET --

            property spriteNum, pMe, pNumLevels, pDownButton, pUpButton, pVolumeIndicator, pSpacing, pBitDepth, pCurrentVolume, pStartingVolume

             

            on beginSprite me

              pMe = sprite(spriteNum)

              pCurrentVolume = pStartingVolume

              updateImage(me)

            end

             

            on mouseUp me

              if the clickLoc[1] - pMe.loc[1] < pDownButton.width then

                if pCurrentVolume > 0 then

                  pCurrentVolume = pCurrentVolume - 1

                  -- Your code here

                  updateImage(me)

                end if

              else if the clickLoc[1] - pMe.loc[1] > pMe.width - pUpButton.width then

                if pCurrentVolume < pNumLevels then

                  pCurrentVolume = pCurrentVolume + 1

                  -- Your code here

                  updateImage(me)

                end if

              end if

            end

             

            on getPropertyDescriptionList

              description = [:]

              addProp description,#pNumLevels, [#default:1, #format:#integer, #comment:"Number of volume levels"]

              addProp description,#pDownButton, [#default:member(0), #format:#member, #comment:"Volume down button cast member"]

              addProp description,#pUpButton, [#default:member(0), #format:#member, #comment:"Volume up button cast member"]

              addProp description,#pVolumeIndicator, [#default:member(0), #format:#member, #comment:"Volume indicator cast member"]

              addProp description,#pBitDepth, [#default:24, #format:#integer, #comment:"Bit Depth"]

              addProp description,#pSpacing, [#default:1, #format:#integer, #comment:"Spacing"]

              addProp description,#pStartingVolume, [#default:0, #format:#integer, #comment:"Starting volume"]

              return description

            end

             

            on updateImage me

              imageWidth = pDownButton.width + pUpButton.width + (pNumLevels * pVolumeIndicator.width) + ((pNumLevels + 1) * pSpacing)

              imageHeight = pVolumeIndicator.height

              newImage = image(imageWidth, imageHeight, pBitDepth)

              newImage.copyPixels(pDownButton.member.image, pDownButton.rect, pDownButton.rect)

              repeat with counter = 1 to pNumLevels

                if counter <= pCurrentVolume then

                  x1 = pDownButton.width + (counter * pSpacing) + ((counter - 1) * pVolumeIndicator.width)

                  y1 = 0

                  x2 = x1 + pVolumeIndicator.width

                  y2 = pVolumeIndicator.height

                  newImage.copyPixels(pVolumeIndicator.member.image, rect(x1,y1,x2,y2) , pVolumeIndicator.rect)

                end if

              end repeat

              newImage.copyPixels(pUpButton.member.image, rect(newImage.width - pUpButton.width, 0, newImage.width, newImage.height), pUpButton.rect)

              pMe.member.image = newImage

              pMe.width = pMe.member.width

              pMe.height = pMe.member.height

              pMe.member.regPoint = point(0,0)

            end

            • 3. Re: Help with a simple animation
              ZombieWrestler Level 1

              hi there!

              Thank you guys for your answers but what I realli need is just creating 8 sprites in shape of rectangles , the first one is smaller than the one besides it, so the 8th would be the taller one! When I start the animation, all rectangles will be hidden, when I press " + " , the first one will appear and when I press plus again the next rectangle should appear and so on, the same thing for the " - " botton, it should hide the 8th rectangle when pressed , and when pressed again should hide the 7th one!

              I used this script in the " + " botton but it kinda worked reversed, when I press " + " the 8th rectangle appear and when I press it again the 7th one appear and that's like the opposite of what I want!

              "

              on mouseup

                   repeat with i=1 to 8

                        sprite(i).visible=true=sprite(i+1).visible=true

                   end repeat

              End

               

              thank you again!

               

              p.s: I don't really want to controle any volume by this, I just want it like an "illusion"!

              • 4. Re: Help with a simple animation
                Mister MUX Level 2

                OK, here is a couple of behaviors that will do that for you. The first behavior is for the rectangle volume indicators. Drop the behavior on the sprites one at a time and fill out the parameters dialog box as appropritate. Drop the second behavior on the volume buttons one at a time and fill out the paramters (1 for plus button and -1 for minus button). It doesn't matter what sprite channels you put anything in, the code does not rely on hard coded sprite channel numbers. Be warned however, that when you change the visibility of a sprite, that can affect other frames in your movie as the visibility property persists from frame to frame.

                 

                ---------------------------------- Volume Indicator Behavior ---------------------------------------------------

                 

                property spriteNum, pMyVolume, pCurrentVolume, pMaxVolume

                 

                on beginSprite me

                  sprite(spriteNum).visible = false

                  pCurrentVolume = 0

                end

                 

                on endSprite me

                   sprite(spriteNum).visible = true    

                end

                 

                on getPropertyDescriptionList

                  description = [:]

                  addProp description,#pMyVolume, [#default:1, #format:#integer, #comment:"Volume at which sprite becomes visible"]

                  addProp description,#pMaxVolume, [#default:8, #format:#integer, #comment:"Maximum Volume"]

                  return description

                end

                 

                on changeVolume me, volumeChangeAmount

                  pCurrentVolume = pCurrentVolume + volumeChangeAmount

                  if pCurrentVolume < 0 then pCurrentVolume = 0

                  if pCurrentVolume > pMaxVolume then pCurrentVolume = pMaxVolume

                  sprite(spriteNum).visible = (pCurrentVolume >= pMyVolume)

                end

                 

                ----------------------------------- Change volume button behavior --------------------------------------------------

                 

                property spriteNum, pVolumeChangeAmount

                 

                on getPropertyDescriptionList

                  description = [:]

                  addProp description,#pVolumeChangeAmount, [#default:1, #format:#integer, #comment:"Change volume by this amount"]

                  return description

                end

                 

                on mouseUp me

                  sendAllSprites(#changeVolume, pVolumeChangeAmount)

                end