Feb 12 2009

AS3 custom event litener final

Category: Classes — Hadi Tavakoli @ 2:12 am

This post is too old, read http://www.myflashlab.com/2010/02/21/custom-event-listener/ instead.

in my other post on http://www.emstris.com/2009/01/custom-event-listeners/ I talked about how you can create a custom event listener and I did mention how easy it was... but now that I have managed to learn a lot more about them, I can tell that creating these custom events are not only easy but also VERY easy and straight :)

This is what I was trying to do (I did this in my DropDownMenu class which will write about it in my next post).

I wanted my item list class to have some listeners so when ever a user selects an item from the drop down menu, it would understand that event and sets the data and closes the menu...

Thanks to ultrashock.com I found a very straight answer for this and here I try to briefly sumersize everything quickly.

Before anything, you must know that you can dispatch events using the dispatchEvent() method only if you are extending from EventDispatcher class. Don't be scared! if you're class is already extending Sprite or MovieClip then you are also good to go with the rest because Sprite and MovieClip also extend from EventDispatcher class and considering that, you will be able to use the dispatchEvent() method with no problem.

alright, now that you you know this, take a look at the below sample code and have a few seconds thinking about it:

and below will be how you may use it:

Note that you don't have to necessarily use the dispatchEvent() method in a setter function! common, be a little creative. in the above code, the main consentration is on changing the variable "name" so as soon as you change it, the listener will be notified... you can add the line

dispatchEvent( new Event( "nameChanged" ) );

to anywhere in your code that your target change is happening and that's it.

I think it would be worthy to have a look at how I have used the above code in my itemList class:

_selectedItem = {lable:e.currentTarget.lable, detail:e.currentTarget.detail, thumb:e.currentTarget.thumb, data:e.currentTarget.data, index:e.currentTarget.index};
dispatchEvent(new Event("itemChanged"));

You see, whenever a new box is selected in the item list, the object which holds the data will be called and the new data will be inserted into it and exactly the same place we have placed our dispatchEvent() method.

Now we can listen to this change! That easy. let me give you a sample... simply like this:

myList.addEventListener("itemChanged", onItemChanged);

and "onItemChanged" will be function which can do whatever you wish that event handler to do :)

Yeah, me too, me too. I couldn't beleive how easy it was to create my own listener!

The examples above will surely clear you about how you can create your own listeners but in my dropdown menu class you will see it more and we will actually do something useful with it.

It's really a shame that I spend a couple of good days searching for this! but that what makes coding beautiful, don't you think so?

Regards,
Hadi

Tags: , , ,

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 14 2009

Scrollbar class V 1.0

Category: Scrollbar,Scrollbar Class — Hadi Tavakoli @ 5:06 pm

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

Here we are trying to build our first class which is a Scrollbar, a scrollbar which can smoothly move the content up and down when you drag the slider.

Before anything, you must think about how you want to call your scrollbar in your project. in my case, I'd like to be able to call it like this:

 

So we first create a new movieclip and orgenize all the graphics in it. Download the files from here and open the FLA for better understanding. 

We will have a transparent "bg" movieclip. the reason that it's transparent is that we don't want anybody to actually see it but we will be able to modify its width and height and everything else will set itself according to the size of this movieclip. This will enable us to have diffrent width and height for our scrollbar on different ocasions.

We will also have another movieclip "theContent" which is empty and as its name shows, our content movieclip will be added into this one by calling addChild. will get to that later.

We also need a mask to hide the unwanted parts of our content! For those who are comming from AS2 maybe it's a pain to find the right syntax for masking! well, at least it took me half an hour to find out! :)

content.mask = mask_mc; // put "content" under the mask graphic

And finally we need a movieclip to put all our scrollbar control buttons inside it.

 

This is all easy, as it's just a matter of creating some movieclips and putting them inside the library. Now before we get to the .as file, let's see final results.

 

ok, as far as the class file, we first write the skeleton of our class

If  you can test your movie and see the output "Working fine till here!" then it means that we are on the correct track and the connection between the class file and fla is successful.

The next thing we would do is to import all the classes that we are going to use in our file so we will import them into the package block

And in the class block we introduce all of the private variables that we are going to use later.

 

Beleive me, things are very easier than what you could imagine! after we have the variables all ready all we have to do is to use the constructor function to set the positions of all elements. All positions will be set according to the width and height that we sent from our FLA using the bg... remember?

Here is the constructor function. as you see we just set the position of all elements, then we add the content movieclip into the holder movieclip and then we set the mask and finally we add the mouse events to do some actions when the user drags the _slider.

in the next version we will add some more functionaleties to the _up and _do buttons also and maybe we also add some mouse wheel functionaleties also! I hope working with the mouse wheel and setting the foucuses are easy to do in SA3!!!
 
below is the full completed class for your reference:

The little trick we've done about the ENTER_FRAME listener is that we are not just initializing it once and leave it because it will eat a lot of CPU so we must make sure to run the listener only when we need it and stop it when we don't.

Considering this, we add the listener as soon as MOUSE_DOWN and remove the listener only when: (Math.ceil(newY) == Math.ceil(-_theContentHolder_mc.y) && dragStatus == false)

OK, that's it, we now have a good scrollbar that can be in different sizes and designs and can scroll any movie clip that you put into it. But still there are a lot of enhancements to be made like disabling the scrollbar if the content movieclip is smaller than the mask, or the buttons up and down to function and if the scrollbar is to be used vertically or horizontally... and lots of other enhancements...

Remember that OOP is telling us not to include everything in one class! so we'll lesson to this important note and try to clean our class a bit more. I'm now going to do some "extend" work and see how we can do those things. as this is the first package we are creating, let's make sure it's working perfect in any possible way, so let's put every possible functionality that a scroller should have and also make sure to divide the details into different classes...

Keep checking for my next post, I'm right now trying to enhance the current class and divide it into more specific classification of functionalities.

Regards,
Hadi

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