6 Replies Latest reply on Oct 5, 2010 9:09 PM by vineet osho

    Customize Hslider just like Tape

    vineet osho Level 1

      Hi Guys

                     I am working in a project in which i need to customize my Hslider skin analogous to Tape.Can You Please Guide me how to Implement That Skin.I am Also Attaching the image of that slider.plz check it out and guide me how to implement that feature.Hslider.JPG

       

       

      Thanks and Regards

           Vineet Osho

        • 1. Re: Customize Hslider just like Tape
          dtx_flex4 Level 2

          It's look not soo hard to implement.

           

          1) Put two small holes on stage where white tape start and end.

          2) Prepare full size white tape with numbers (you can also generate this dynamically) and use Mask Function for that tape to get small piece like in your example image.

          3) Put on that tape with mask two transparent .png with shadow on left and right.

          4) Next you need only observe mouse move of user(MouseEvents) and change correctly "x" property of the full size white tape.

           

          Cheers

          1 person found this helpful
          • 2. Re: Customize Hslider just like Tape
            vineet osho Level 1

            Hi

             

                    Thanks for your quick reply.but it seems that i have to make the skin in Flash As you directed me.And One thing more we need not to use mouse effect because the tape moves according to the value you enter on textField adjacent to tape.

            Is it possible to make the whole component in flex(Through Customizing  Hslider).

            For more reference i am posting the link.Please Check it out.Just enter height and weight fiels and check the tape demo.

             

                              http://www.indochino.com/measurements


            Thanks in Advance

                Vineet osho

            • 3. Re: Customize Hslider just like Tape
              dtx_flex4 Level 2

              Yes - You can do all this in Flex! Just read some tutorials about component skinning and adding own functions.

               

              The steps for this without MouseEvents is pretty this same. You must only watch onFocusOut Event in textfield and then use tween effect(for smooth move) to white long tape(let's say 1cm on white tape it's equal to 50px). That's all. This is not hard task, you must only check few tutorials/documentation : )

              1 person found this helpful
              • 4. Re: Customize Hslider just like Tape
                vineet osho Level 1

                Hi dear thanks again for your valuable suggestion.please let me know if i am making some mistake.

                 

                As directed

                1)i prepared a complete white tape image  having value 0-60.put that image on a container(canvas)

                2) mask that canvas with a box having size 0-5(part of tape).

                3) now apply move effect on on focusout event of text in which i manipulate the x and y position of that box according to requirement.

                  it all works but its not giving the actual effect (3D Roatation of circular tape)as i want similar to this url:-http://www.indochino.com/measurements.

                4)The last thing how to manage tip(Thumb) on that tape should i make a seprate image for that tip?which also move according to the value enter on text   field.

                 

                One thing more can we make any trick to make tape little bit smaller putting the complete tape  (0-60 cm) image on container  is not a good solution.

                Please let me know if i am wrong anywhere.Thanks for you help.

                 

                Regards

                Vineet osho

                • 5. Re: Customize Hslider just like Tape
                  dtx_flex4 Level 2

                  There are no 3D rotation via code. Only shadows makes this effect. Look on image below and use imagination : )

                   

                  form_tape.jpg

                   

                  Put these shadows on new layers on top of the white tape and u will have 3d effect : )

                   

                  "putting the complete tape  (0-60 cm) image on container  is not a good solution" - You can always generate stripes and numbers dynamically. It's little bit harder but if You really want write nice components just lern and think yourselft. No one here give you complete code.

                   

                  The small tip always stay in this same place. Only white tape moving.

                  • 6. Re: Customize Hslider just like Tape
                    vineet osho Level 1

                    Thanks a lot for your valuable reply.it really helped me.