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

    SLIDER-FADER HELP!!!

    Aledragon

      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!!!

      Alessandroslider_fader.jpg

        • 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)

            me.setImgsRect(sliderLocH) 

          end

           

          on mouseDown me 

            repeat while _mouse.stillDown

              _player.cursor(290)

           

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

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

           

              _movie.updateStage()

            end repeat 

          end

           

          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

          end

           

          on exitFrame me

            _movie.go(_movie.frame)

          end

           

          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

          end 

          --------------------------------------------------------------------------

           

          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!

          Jürgen