Oct 31 2009

my super as3 scrollbar

Category: ScrollbarHadi Tavakoli @ 6:58 pm

Here is a scrollbar you would ever need in your projects, absolutly abstract and all dynamic with a lot of nice feature that you can play with it. if you're interested to buy it for a VERY low price, find it here: http://www.myflashlab.com/2010/01/22/scrollbar-class/ 

If you're using this scrollbar in your projects, I'd be happy to see your works... feel free to link back here. Thanks.

The above flash is scaled down to fit the screen... visit here for the actual size: http://myflashlab.com/showcase/com/doitflash/utils/scroll/

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


Feb 15 2009

AS3 creating movieclips dynamically

Category: ClassesHadi Tavakoli @ 11:43 pm

Today I almost teared myself apart untill I finally found a good solution for creating diffrent instances of a movieclip from the library! or at least I think this is a good method! The best solution I could come up with anyway and I thought to share it with you as I'm sure a lot of people are looking for a good way to dynamically create different instances of a movieclip being exported for ActionScript in the library.

Here is how the FLA is set up. we have a movieclip in the library, and it's checked for export to ActionScript. (Export in Frame 1 is also checked so the movieclip will be initialized automatically at startup)

I presume that you already know the fact that if a movieclip has been checked for export to AS from the library, Flash will create a class for it blindly, OR you can setup a class for it manually and just locate the path... if not, maybe you would need to read my other post here, read that first and then get back to here. 

Alright, imagine that we have set up our movieclip in the library and the path to its class is something like:

com.myFlashlab.classes.tools.hMenu.BoxStyle1

ok, now whenever you want to create multipie copies from that movieclip (Or any other class, you just need to have the full path to the class and it will work) you need to use the "getDefinitionByName" method like this:

var _myStyleClassName:String = com.myFlashlab.classes.tools.hMenu.BoxStyle1; var theClassName:Class = getDefinitionByName(_myStyleClassName) as Class; var theClass:MovieClip = new theClassName(); theClass.name = "box" + i; // i is maybe a variable being used in a loop. theClass.x = i*50; addChild(theClass)

I hope this little post will save you a lot of time and you don't have to look for duplicateMovieClip and attachMovieClip equivelents any more :)

Regards,
Hadi

Tags: , , , , , ,


Jan 20 2009

Encapsulation

Category: ClassesHadi Tavakoli @ 2:46 pm

The real fun is just getting started, building classes needs more concentration before you start. As I had mentioned in my last post, we were trying to build a special DropDownMenu for our needs in the application, and what I thought initially was that I will be able to use the Scrollbar we had built into the drop down menu and that's all.

But when I was building the drop down menu, I suddenly understood another class to be used inside our menu, though I named the new class ItemList Class! So, now we should first build an ItemList class which its job would be to create the necessary boxes for our items which later will be placed under the Scrollbar and the Scrollbar will the go under the menu.

But again, I thought again and found out that we again need another class named Box so it will first create us the boxes with information in it and then we can insert the boxes to the ItemList and then put the ItemList under the Scrollbar and finally the Scrollbar under the drop down menu!!!

I was building the Box class that I suddenly understood that again we need another class inside of it!!! OOHHHH :) HaHaHa

Don't get crazy, that how it is, it's inevitable, that's just how it is, we needed a ExternalLoader class which could load any given external file in it.

Let me tell you something, we may had created your drop down menu without breaking it into smaller classes, but that's totally a wrong idea because you will in any case have to write some algorithms so why you shouldn't do them all in separated classes which each one will do only its work independently?

How we have divided our menu class into a lot of smaller classes is a very good idea because you may somewhere else need to use that ItemList to list some objects without using it under a menu and now that it's built in a class you will be able to do that.

So it's always a good idea to create as many classes as you can, do the classes and break them down to create new classes, do it until you really come to a point that there's no more need to cut a class to any smaller pieces. That's when you are really writing classes with respect to OOP :)

OK, today I will post two new classes, the ExternalLoader and the Box class... Keep checking back...

Regards,
Hadi

Tags: , ,


Jan 18 2009

AS3 Drop Down Menu Class

Category: DropDownMenu, DropDownMenu ClassHadi Tavakoli @ 3:28 pm

Some call it, combo box but I like to call it a drop down menu! Well, it's my creation and I can name it whatever I like, right?! HaHaHa :) No matter its name, this is going to be a very interesting class and a lot more complicate than the scrollbar we finished yesterday.

I'm not going to build some silly drop down menu which you just can insert some text in it and do some actions when an item is selected! We are going to build a very nice drop list menu which can have different items shown in it! it can load images, text descriptions, etc, etc, because we are going to need these things later in our application.

So, before we get our hands dirty in writting any code, let's spend a couple of minutes and think about the input parameters that we may need for our drop down menu. Here is what I came up with. (Maybe I add some more items, but right now, I can think of these options right now)

var myCombo:DropDownMenu = new DropDownMenu(myCombo_mc);
myCombo.width = 100;
myCombo.floors = 5;
myCombo.floorHeight = 50;
trace(myCombo.position);
myCombo.buttonMode = false;
myCombo.font = "Arial";
myCombo.fontSize = 12;
myCombo.fontColor = "#000000";
myCombo.align = "center";
myCombo.defaultItem.index = 0;
trace(myCombo.selectedItem.data);
trace(myCombo.selectedItem.index);
myCombo.add({lable:"", detail:"", data:"", thumb:""});
 

I think this is good enough to get started with. Maybe you have just guessed rgar the very nice thing we are going to do is to import our Scrollbar class into this drop down menu class! The Scrollbar class took a lot of time to be completed, but I think I am much more comfortable with this, so let's get down to work and see how far we can get with this drop down menu class today.

Regards,
Hadi

Tags: , , , , , , ,


Jan 17 2009

Final Scrollbar class V 2.0

Category: Scrollbar, Scrollbar ClassHadi 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: , , , , , , , , ,


Next Page »