Jan 17 2009

Final Scrollbar class V 2.0

Category: Scrollbar, Scrollbar Class — Hadi Tavakoli @ 8:23 pm

this post is out of date! check the new scrollbar here: http://www.emstris.com/2009/10/my-super-as3-scrollbar/

Ok, that was a great weekend, I found some time to get back to some old books and once more read about extensions of classes and I founded out that if there's no reason to extend something, why you should force yourself to extend it?! In our last version of scrollbar we extended the ScrollbarBase class with no actuall reason! maybe it was just an excitement to extend something! HeHeHe

But in this new version which I can call it the final version of a scrollbar, I didn't extend it BUT I did the class in a way that it can be easilly extended later. I thought of some future functionaleties that we may need in our software and it will be nicely possible to extend this current scrollbar and add or modify functionaleties to it, so this version can really be called the final version, I'm quite sure that I would  never again go to the trouble of creating a new Scrollbar class :)

I have also learned a couple of new things which I'm going to share with you.

The first thing that I really liked is the getter and setter functions, so with the help of them, I don't have to pass parameters within the class instance anymore and instead, I set them using the setter function. And another advantage of the setter function is that you are actually using them as private and the setter function will actually write them.

This way will also enable you not to start any action in the constructor function (unless you really need to) with which I mean, you will start the class by calling the "new ..." and set the variables, etc, etc and then after you are ready to use the class, you can manually call a function from outside and it will run the script.

Below you can see how the new class will except the variables. This way it looks much better, don't you think so?

Now let's have a look at how you use the getter and setter functions:
Ok, the first step is to know that you are using the getter and setter functions for a better encapsulation which enables you to set the variables in your class in private. It's better to set these variables in private because you surely do NOT want other extended classes to modify them, right? you only want them to be modified with the setter function. So, in our example we have the three variables set in the class like this.

 private var _width:Number = 0;
private var _height:Number = 0;
private var _position:String = "V";

and then you set the functions, in public. take below as an example of a setter function

public function set width(newWidth:Number):void
{
_width = newWidth;
}

take note of the public access method and the keyword "set". that's it! So, as the setter function is public you can easilly access it from outside as in our example like this.

myScroll.width = myScroll_mc.bg.width;

The getter function is also very similar to the setter and it will be used from the outside to read the current value of that property.

public function get width():Number
{
return _width;
}

Take note that getter functions must always have a return value and you will simply call them from the outside like this:

trace(myScroll.width);

And that's all there is to it about the setter and getter :)

 

Here you may download the final class for our scrollbar. (Saved in CS4)

And here is how it works. As you see, it works just like the last version, but this one is really orgenized! At least I think so right now!!! :) if you are coming up with a better version, please feel free to let me know.

And here is the whole code class for your reference.

Oh, and I almost forgot, I also found something very interesting on how you can handle something like onDragOver, onDragOut, and onReleaseOutside in ActionScript 3.0 (AS3)! As you know already, these events are no more explicitly available in AS3 but it surely does not mean that you can't use them!

I found an interesting article here which really helped me get my code a lot cleaner by using these nice mouse event properties like buttonDown, target and currentTarget!

Now, I'm going to create a drop down menu which is going to be used in our applet later. remember that it must be open for later extensions as we are going to use them in several diffrent ways... let's see what we can come up with in our drop down menu, keep reading my posts.

Regards,
Hadi

Tags: , , , , , , , , ,

Jan 15 2009

Scrollbar class V 1.2

Category: Scrollbar, Scrollbar Class — Hadi Tavakoli @ 7:23 pm

We are almost done with our Scrollbar class. slider and up and down buttons and mouse wheel all working fine now. check below. (Note that you must first click on the flash object to get the focus to the flash object.)

And you can download the files from here.

Although we are having all we need with this scrollbar now but it still needs to be tuned a bit more. I don't like how the codes are orgenized. in the next version I try to use some more rules from AS3 to make a clean and better code.

For now, let's see how we have managed the action on the up and down buttons. It's clear that we would need a MOUSE_DOWN listener to find out when the button is pressed so we use the follwoing on the cunstrctor function

_up.addEventListener(MouseEvent.MOUSE_DOWN, down);

this event will call a function called "down" and in that function we have:

There are some helpful notes to know about the Mouse events and that's the point that when a function is called via any mouse events, a parameter is also passed to the function automatically which holds a couple of values and one of these values is the target which is actually the movieclip which the event listener has been registered to.

If you are wondering what other MOUSE events are available in AS3, Here is a list of all the mouse events in AS3:

CLICK : String = “click” MouseEvent
Used to detect mouse clicks.

DOUBLE_CLICK : String = “doubleClick” MouseEvent
Used to detect double clicks.

MOUSE_DOWN : String = “mouseDown” MouseEvent
Checks when mouse is pressed down.

MOUSE_LEAVE : String = “mouseLeave” Event
Monitors when the mouse leaves the stage.

MOUSE_MOVE : String = “mouseMove”
Monitors when the mouse moves.

MOUSE_OUT : String = “mouseOut”
Monitors when the mouse moves out of the object that the event has been attached to.

MOUSE_OVER : String = “mouseOver”
Monitors when the mouse moves over the object that the event has been attached to.

MOUSE_UP : String = “mouseUp”
Monitors when the mouse moves up the attached to object of the event from a click.

MOUSE_WHEEL : String = “mouseWheel”
Monitors when the mouse wheel moves, detect the positive or negative delta property for distance and direction moved.

There's nothing you can't do with your mouse the help of these mouse events. I like this much more than how they where in AS2!

ok, back to our script, when the mouse is down and the event.target detects that the object is the up button, it will start the timer class and  the timer class will call "timerHandlerUp" every 10 milliseconds. the same thing happens if the _do buttons is clicked but this time the "timerHandlerDo" function will be called. It's clear that we must remove the timer listener as soon as the mouse is up.

You know what, there are a lot of parts in AS3 that surely makes our job easier but still there are some of them who are hard to be understood and one of them is the Timer class! Although I have been able to use it successfully, but I'm not clear about some of its features. in some other topics I will try to get very detailed on this Timer class and see how it works exactly.

Anyway, below is the modified file for the Scrollbar class.

It really needs to get clean! I'll take acre of that in my next post.

Regards,
Hadi

Tags: , , , , , , , , , , , , , , ,