1 Reply Latest reply on Jan 27, 2012 4:47 AM by vav_djjd



      Can anyone help me?

      I need to create a multimedia app that allow user to see different tipe of illumination on an artwork.

      I mean: I don't know how to create slider/fader that allow user to reveal one image with wipe or from 0 to 100% opacity control.

      See the example down here.


      Thanks a lot if someone can help me!!!


        • 1. Re: SLIDER-FADER HELP!!!
          vav_djjd Level 1

          Hi Alessandro,


          hope, this is what you're looking for:



          property pNum -- sprite number of slider

          property pSliderBase -- the number of sprite on which the slider is moved

          property pLocA, pLocB -- left corner and right corner of sprite on which the slider is moved

          property pImgMem_1, pImgMem_2 -- the two images, which should be shown on the canvas; they have to be of the same dimensions!

          property pStartAt -- where the slider should be placed on start (in %)

          property pCanvasSprt  -- the canvas sprite on which the two images are shown

          property pX, pY  -- the left & upper corner in the canvas image, on which the two images are aligned (to be centered on the canvas)


          on beginSprite me

            pNum = me.spritenum 


            pLocA = sprite(pSliderBase).rect[1] + sprite(pNum).member.rect[3]/2.0

            pLocB = sprite(pSliderBase).rect[3] - sprite(pNum).member.rect[3]/2.0


            pX = integer(sprite(pCanvasSprt).member.rect[3]/2.0 - member(pImgMem_1).rect[3]/2.0)

            pY = integer(sprite(pCanvasSprt).member.rect[4]/2.0 - member(pImgMem_1).rect[4]/2.0)


            sliderLocH = pLocA + ((pLocB-pLocA)/100.0)* pStartAt

            sprite(pNum).loc = point(sliderLocH, sprite(pSliderBase).locV)




          on mouseDown me 

            repeat while _mouse.stillDown



              sliderLocH = max(pLocA, min(pLocB, _mouse.mouseH))

              sprite(pNum).locH = me.setImgsRect(sliderLocH)



            end repeat 



          on setImgsRect me, currentLoc

            visible_1 = integer( (currentLoc-pLocA) * (member(pImgMem_1).rect[3]/(pLocB-pLocA)) )

            visible_2 = member(pImgMem_1).rect[3] - visible_1


            sprite(pCanvasSprt).member.image.copypixels(member(pImgMem_1).image, rect(pX, pY, pX+visible_1, pY+member(pImgMem_1).rect[3]), rect(0, 0, visible_1, member(pImgMem_1).rect[4]))

            sprite(pCanvasSprt).member.image.copypixels(member(pImgMem_2).image, rect(pX+visible_1, pY, pX+member(pImgMem_2).rect[3], pY+member(pImgMem_2).rect[3]), rect(visible_1, 0, member(pImgMem_2).rect[3], member(pImgMem_2).rect[4]))


            return currentLoc



          on exitFrame me




          on getPropertyDescriptionList me

            description = [:]


          description.addProp(#pSliderBase, \

              [#format: #integer, \

               #default: 0, \

               #comment: "1. SpriteNum of slider base:  "])


          description.addProp(#pCanvasSprt, \

              [#format: #integer, \

               #default: 0, \

               #comment: "2. canvas: spriteNum of canvas:  "])


            description.addProp(#pImgMem_1, \

              [#format: #string, \

               #default: "", \

               #comment: "3. image: member name:  "])


              description.addProp(#pStartAt, \

              [#format: #integer, \

               #default: 50, \

               #range: [#min: 0, #max: 100], \

            #comment: "3b. image: visible area on start (%):  "])


             description.addProp(#pImgMem_2, \

              [#format: #string, \

               #default: "", \

               #comment: "4. image: member name:  "])


            return description




          make new behavior out of this and put it on your slider sprite. Be aware that image_1 and image_2 must have same dimensions. The canvas can be any kind of #bitmap but must be of greater size than image_1. Hope, this will help!