Tutorial – Creating a reusable Slider Control / Component

1 actionscript,as3,as3 tutorials,flash,work  |   December 14, 2009  |     1929

Hi Everyone,

Today I will cover the subject of creating a reusable slider control which takes two bitmaps as resources. The thumb bitmap will slide on the rail bitmap. It is a very simple concept!

We will basically take this image:
and this one:
and make this (try it, move that knob):


In fact, the code you are about to write will take ANY two images and create a slider with them. Just like magic, as long as your images make some sense ( a track and a button ), it should be golden!

Starting Point
When I started writing this tutorial, I was still using the Flash IDE; but since then I am free!! I now use exclusively FlashDevelop. With that in mind, the package to start the coding, if you want to follow along is here. You will need FlashDevelop & the Flex SDK 3.4 or newer.

In the assets directory, I put the two bitmaps:

  • bar.png — which contains the background
  • button.png — which contains the foreground

Then I create a small class, which I called GraphicAssets like so:

Notice the function getBitmap() which returns a bitmap, it is simply because I don’t like overhead, and if you instantiate either GraphicAssets.BAR or GraphicAssets.BUTTON directly you end up with a BitmapAsset, and well, we don’t need that.

To use it we’d simply do something like this:

Startup Properties
I sometimes create a class which contains the modifiable properties of a Component. In this case, I called it SpriteSliderProperties and here is the code:

As described in the code, we have one DisplayObject which will act as the background of the component, and another that will act as the foreground (movable) object in the component. There is also:

  • A minimum value, defaulted at 0
  • A maximum value, defaulted at 100 — basically this means the slider will have values ranging from 0 to 100
  • The step size, when clicking besides the button itself. This is not going to be implemented, let’s call it your homework!
  • The amount of numbers after the decimal that we want
  • The default value, or starting value; value demonstrated before the user interacts with it

Our usage scenario.. the target!
What we want is to create this slider but passing a SpriteSliderProperties object to the constructor; then add it to the stage. Then position it if we’d like and finally listen to events thrown by the Slider instance. The idea is to have two types of events:

  • ValueEvent.PREVIEW — called while the user is moving the slider button
  • ValueEvent.CHANGE — called once the user is done moving the button

Here is sample code, our target:

ValueEvent class
This class carries the value inside of it. Here is the source code:

Nothing complicated there.

The meat
Now that the context is well established, lets get down to business. I will follow the methodology I started describing in this post (I promise to finish it sometime in the future). Just to recap.. At creation time the following functions are called:

  • init() — initialization of member variables like arrays, dictionaries, timers …
  • createChilds() — the creation of displayObject used inside of the component
  • initEvents() — adding event listeners
  • arrange() — positioning the childs
  • redraw() — drawing of the interface, if needed

Then, when the function setSize() is called:

  • arrange()
  • redraw()

In the component model of Flex there is the concept of invalidation; where you invalidate certain properties of the components and the code that will react to this invalidation is executed using callLater (on the next Frame). This way if you modify the size, then maybe data, arrange() (for example) will only be executed once, not twice. I showed how to implement your own callLater function in this post. For this example, I won’t go there. There is no need…

In this example, I use newcommerce.controls.BaseControl as the parent class to SpriteSlider. This class contains the following code (you don’t need to read it all if you don’t want to). This class is contained in the starter packaged you might have downloaded at the beginning of this tutorial.

BaseControl

Basically it has some functionality like:

  • making sure the control is on a whole pixel (not x:4.51 and y:9.56 for example)
  • takes care of covering the components space with a transparent layer to make sure we capture mouse event properly
  • ensures the component is never scaled directly
  • takes over the reporting of .width and .height
  • and has a few helper functions

Most of the functions below override the functions coded in BaseControl, and it is important to call the original in most cases by using super.init(); for example.

Initialization Code
The method I use for drag & drop uses a Timer object. Since this object is not part of the display list, I initialize it in the init() function; then set the slider’s value to the defaultValue.

Creating Children Objects
Because we will listen to mouse events on the button & track, they both need to be Sprite objects. Hence we need to make sure the DisplayObjects passed in the Properties class ARE sprites, or if not, put them inside of sprites and use those as BG & FG. Hence this function which does exactly that.

Now, we will spritify both _props.bg & _props.fg, name them, add as childs of SpriteSlider and finally make sure we display the correct cursor when the mouse is over them. Like so:

You see at the end I take the width of the _bg and make it the width if the Component, and take the biggest of heights (from _fg and _bg) as the component’s height.

Here is the full code, I will continue later…

Comments
  • March 9, 2010 at 1:35 pm

    chuchu

    Hi Martin,

    I like your application Fxtube want to implemented in my application but i try everything dont work still get this security error and i allready upload the proxy file please hellllllllllllllllllllllllllllllppppppppppp 🙂

    Thanx in advanced
    chuchu

Leave a Reply