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!
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:
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:
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:
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:
Here is sample code, our target:
This class carries the value inside of it. Here is the source code:
Nothing complicated there.
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:
Then, when the function setSize() is called:
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.
Basically it has some functionality like:
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.
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…
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