in my last post I tried to create curved boxes with a VERY bad practice! and although after I lernt about "DrawRoundRect" I wanted to continue with my other class but now I decided to use the new method because this one is cleaner and more understanable and as we are going ahead, our application will get very heavy so we must save as much CPU as we can. So now I created the very same curved box with gradient colors but this time we will do it all in codes and we won't create any premade movieclips in the library like what we did in the last post here.
This is the class saved with the name of "CurvedRectacgle.as".
and whenever you want to draw your curved box with the gradient color in it, you may use it like this:
Using this method will save us a lot of CPU and also KB as we are not using all those movieclips in the library and besides that, this class all uses the Sprite and no movieclips involved here I'm sure this version is a lot better, don't you?
Have you ever wished you could have a resizable curved cornered box which you could easily change its gradient colors?! Find the new Class for this here.
well, if so, I'm sure you have tested it and have found out that creating a well shaped curved cornered box in a movieclip will not look good when you try to resize the movieclip! the corners get disordered...
When I give it a second thought, maybe we can add even more features to this simple class... but that's ok for my current use. I hope someone can find this helpful as it gives a good sample on drawing gradients and also about the logic behind how we have saved the curved corners of a box!
Here is the class for a quick review:
If you ever came up with a better version, I'd be glad to have a look also
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:
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.
I'm sure this version is a lot better, don't you?
My Flash Lab