Feb 12 2009

AS3 itemList Class V 1.0

Category: itemList — Hadi Tavakoli @ 1:27 am

in my other post we created a Box class http://www.emstris.com/category/classes/box/ where we managed to set a box of information with actually three elements, a thumbnail, a title and some space for the details.

In that Box class you where able to create any size boxes and put anything in them but using that class alone will not be very helpful if you are trying to build a playlist or something! right?

So I thought of creating an itemList which can easilly add these boxes in a class which will extend MovieClip so it will be a lot easy to pile up the boxes and insert data into them.

let's take a look at our itemList now:

And with the help of below code we will create new instances of our item list:

This ItemList class is actually a MovieClip as we are extending MovieClip and it can be placed anywhere. As you see above we have first initialised the class and then have set diffrent properties to be used later in every instance of the Box class which we will later import through the ItemList class.

Take a look at the ItemClass itself and you will find a couple of interesting things around... hehehe, maybe you won't call creating of custom listener an interesting thing! but as this is actually the first time I am creating them, I am very excited that I am planing to post a complete new topic about them! Anyway, here is the item list class:

If you ask me to summarize the whole thing, I can say that all this item list class does, is to create new instances of the Box class and insert the data into them! But I also added a couple of useful features into it like how you click on an item and it gets highlighted, and how you can set one of the items as the default selected item, and also the most beautiful part from my eyes which is the "dispatchEvent(new Event("itemChanged"));" :) As promised, I will talk about how custom event listeners work later in my next post.

ok, You may download the complete item list class from here. (Saved in CS4)

After you play a bit with this item list I am sure you will quickly say that this item list will look better if we can put it under a scrollbar... yeah, of course you're right, and why don't you do that yourself?! :D

in my scrollbar class here I have made it in a way that enables you to drop any movieclip under the scrollbar so why don't you try and drop the item list under it? well, later when I post my dropdown menu class, you will see how we are managing to combine all of our different classes and put them all work together in a dropdown menu! keep checking back and you will see some more useful stuff around here... I guess we are really making a progress in AS3 ;)

Regards,
Hadi

Tags: , , , , , , , ,

Jan 15 2009

Scrollbar class V 1.1

Category: Scrollbar,Scrollbar Class — Hadi Tavakoli @ 2:38 pm

In this article we are trying to make our scrollbar to work horizontally also. Download the files from here and then read below. (FLA is saved with CS4)

I haven't yet added any more functionalety to it and we have just made it to work horizontal also, here is how it looks now:

The changes in the FLA are not very complicated and if you have read my last posts you will find your way fast in the new FLA.

but as far as the .as files, I have now devided the classes into 3 and each one now actually does a seperated work.

ScrollbarBase.as   >  This class will introduce all the variables and sets the positions of all diffrent elelemts by initializing the class "ScrollbarSetter"

If you have noticed I have changed "private" to "protected" for all of the variables in "ScrollbarBase.as" I did this so that I can have access to them easilly from "Scrollbar.as" later which will extends the base class.

I still don't feel comfortable on when to use private and when protected and which methods will make the codes more capsulated, but I think doing some more work will help me understand which one is a better solution. But for now, protected looks just fine as it gives access to the base variables in the subclass file.

anyway, as you can see I have moved the whole responsibility of organizing of the scrollbar according to it Vertical or Horizontal status to a new class called "ScrollbarSetter.as" and in the constructor function of the base class we will call the new class like this:

setpositions = new ScrollbarSetter(pos, w, h, _controlers, _up, _do, _slider, _sliderBg);

well, I tried to use the "internal" accessory for those variables that "ScrollbarSetter" wanted to use but I just couldn't figure out how to make that work! or anyway, would it be a good idea to use the "internal" at all? anyhow, I just passed the parameters and below is the code for how we have set the position of scrollbar according to the H or V status.

and here is the base class.

The important point is that when you want to put a content under the scrollbar you will actually call the Scrollbar class (This is NOT the same file as my last post, don't mix things up! I'm learning things just like you right now, so although it's said that when a class is written, you don't have to modify it anymore, but that can only happen when you have enough experience on how you should organize the base classes, so I hope soon we will reach that level of professionalism! :) but for now, please bear with me.)

as I was saying, you'll call the Scrollbar class from the FLA like this:

var scroll1:Scrollbar = new Scrollbar(myScroll_mc, //instance of the scrollbar on stage
 myScroll_mc.bg.width,
 myScroll_mc.bg.height,
 sampleContentV_mc, //content to be scrolled
 "V"); 

And this is the Scrollbar class which extends the base class. here is the Scrollbar class now:

OK, this should do it for now and the scrollbar now works horizontally also but we need to get our data a bit more organized I think as there are still a lot of dark points in the basic facts of AS3 in my mind.

Maybe it would be worthy if I talk a bit about how super(); works as I had some problem with it when working with it for the first time.

when you are extending another class, you cannot have a complete new constructor function for your subclass and it's a must to use the super() which actually means you are importing the base class constructor function and as you see you need to send the parameters through it like below in our sample:

super(scroller, w, h, theContent, pos);

and after that you can add your other lines of codes... But still knowing this after receiving lots of error messages, I don't know how it worked in the tutorials when I extended a Movieclip and I wrote the constoctur function without using the super(); ! I will try to find an answer for that soon though!

in the next version of the class, I try to get the _up and _do buttons to work also.

Regards,
Hadi

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