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
While walking through AS3 you have certainly faced the problem that you want to use a movieclip from the library in your movie and you do not have any attachMovieClip as you had in AS2!
ok, the problem will be solved when you look at everything including every movieclip as a class. Considering that, let's do a small test and see if we can set a simple movieclip in the library and bring in some other movieclips into the stage and play around with its playhead...
I'm writting this post right at the middle of creating a resizable horizental menu, so I just stopped at the beggining to write this little article and then go ahead with my menu... which I hope I can finish it by tonight
anyway, let's start by creating a new AS3 Flash File from File > New and at the first frame put the follwoing on the action panel:
(Maybe we can sometimes use the document class for our flash creations, but I don't know why I don't like that document class! maybe it's because I still have not found any good reason for using that. it makes me feel a bit limited. so I'm not using it untill I find a good reason for that!)
The first line here actually imports another class into our FLA which will be used as the base for our menu and we will import the library items in that HMenu class and the last line above, simply puts the new class we just called into the stage.
Well, I'm sure you know this, but don't test the movie right now as you still have not created any HMenu class yet, right?!
now save your FLA somewhere and name it anything you want, it doesn't matter but just remember to correct the import path for your own use.
Now open a new .as file from File > New and save it with the name "HMenu.as" in the exact path you entered above and put this code in it:
What you get from this code is that HMenu is actually a MovieClip and it's constructor function will create new instances of another class called Box and adds it into itself, the HMenu class.
maybe you are saying that in this point, we will create another class in a .as file... to some extends, yes, but before doing that, let's get back to our FLA and create our Box class in there by just creating a movieclip in the library!
So, in your FLA, hit Insert > New Symbol and call your new symbol "Box" and select the MovieClip option and at the bottom of that window click the "advanced" button to see the other options.
Check the "Export for ActionScript". in the class field type the path to the same path you used as above when importing the HMenu class. in my case, I typed "com.myflashlab.classes.tools.hMenu.Box".
And leave the Base Class field as it is which should be "flash.display.MovieClip" if you are interested to know what it exactly means by Base Class, you should know that it will actually say that this class you are creating will extend the MovieClip class.
now you're done, hit the OK button and the movieclip will appear in your library. (Maybe it will give you a gentel notice saying that the class file is not avaiable in the path you entered and flash will generate it automatically... or smething like that, well, no problem, let flash do what it needs to do! you go ahead!)
in the Movieclip you just created, create two key frames and in each one draw some shapes or write something, whatever, the intension is to have two frames or more in the movieclip so later we can see how you should control the playhead indicator from the Box class file we will later create.
For right now, test the movie! and you will see that the movieclip you created will be shown on the stage! and of course it loops through the keyframes you created!
If you still have any doubt on why it's showing on the stage, let's have a quick review on what we did so far... First on the FLA we created a class called HMenu and added it to the stage. then in HMenu class we called in a class called Box like this
var myBox:MovieClip = new Box();
** notice the name of the class "Box".
And finally we created a movieclip symbol in the FLA and named it "Box". So flash understand what to do and creates the .as file in runtime (We don't see it but it is there actually!) and that's it, the library movieclip will be used.
ok, nice and easy till here, and now we want to create a Box.as class file that we will actually be able to see so we can control our library symbol! This will be so easy, just open a new .as file and save it with the name of Box.as in the exact same place you used when creating the Symbol in the library... and insert the fowwloing code into the Box.as file.
Test your movie and the playhead indicator will stop at the first frame simply because you had told the movieClip class to stop();
That's all. I'm sure you will find this articla very helpful when you will be dealing with some situations when you want to create some instances of a same movieclip in a for loop...
I will write more about this on my next post when I actually finish creating my HMenu class.
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:
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:
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?
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.
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?!
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
I was in the process of completing my DropDownMenu class and I needed a way to save the information of the selected item in the list and the best thing would be to use the getter functions. In my later posts you'll see the dropDownMenu but for right now to give you an idea, we would need the following details to be accessible when an item is selected:
lable, detail, thumb, data and index.
So, if we used the getter functions normally, I had to create something like below 5 times!
public function get index():int { return _index; }
It may work, but we can do something better, to save the data all in an object and use only one getter function and extract the kind of details we'd like to see.
In order to do so, you should do the following in your Class file. First introduce your object with all of the information you want to save in it, easily like this:
private var _selectedItem:Object = {lable:"EMPTY", detail:"EMPTY", thumb:"EMPTY", data:"EMPTY", index:0};
it will be very easy to overwrite the values of an object, as an example, you are able to set values to such an object like this:
_selectedItem.data = "some data here!";
ok, and after you have the object ready you should write your getter function like this:
public function get selectedItem():Object { return _selectedItem; }
easy right? you don't have to write several getters now and you will call the getter function from outside of the class like this:
My Flash Lab