Feb 14 2009

AS3 how to control a movieclip from a class

Category: Classes — Hadi Tavakoli @ 4:42 pm

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.

Thanks,
Hadi

Tags: , , ,

Jan 15 2009

Scrollbar class V 1.2

Category: Scrollbar,Scrollbar Class — Hadi Tavakoli @ 7:23 pm

We are almost done with our Scrollbar class. slider and up and down buttons and mouse wheel all working fine now. check below. (Note that you must first click on the flash object to get the focus to the flash object.)

And you can download the files from here.

Although we are having all we need with this scrollbar now but it still needs to be tuned a bit more. I don't like how the codes are orgenized. in the next version I try to use some more rules from AS3 to make a clean and better code.

For now, let's see how we have managed the action on the up and down buttons. It's clear that we would need a MOUSE_DOWN listener to find out when the button is pressed so we use the follwoing on the cunstrctor function

_up.addEventListener(MouseEvent.MOUSE_DOWN, down);

this event will call a function called "down" and in that function we have:

There are some helpful notes to know about the Mouse events and that's the point that when a function is called via any mouse events, a parameter is also passed to the function automatically which holds a couple of values and one of these values is the target which is actually the movieclip which the event listener has been registered to.

If you are wondering what other MOUSE events are available in AS3, Here is a list of all the mouse events in AS3:

CLICK : String = “click” MouseEvent
Used to detect mouse clicks.

DOUBLE_CLICK : String = “doubleClick” MouseEvent
Used to detect double clicks.

MOUSE_DOWN : String = “mouseDown” MouseEvent
Checks when mouse is pressed down.

MOUSE_LEAVE : String = “mouseLeave” Event
Monitors when the mouse leaves the stage.

MOUSE_MOVE : String = “mouseMove”
Monitors when the mouse moves.

MOUSE_OUT : String = “mouseOut”
Monitors when the mouse moves out of the object that the event has been attached to.

MOUSE_OVER : String = “mouseOver”
Monitors when the mouse moves over the object that the event has been attached to.

MOUSE_UP : String = “mouseUp”
Monitors when the mouse moves up the attached to object of the event from a click.

MOUSE_WHEEL : String = “mouseWheel”
Monitors when the mouse wheel moves, detect the positive or negative delta property for distance and direction moved.

There's nothing you can't do with your mouse the help of these mouse events. I like this much more than how they where in AS2!

ok, back to our script, when the mouse is down and the event.target detects that the object is the up button, it will start the timer class and  the timer class will call "timerHandlerUp" every 10 milliseconds. the same thing happens if the _do buttons is clicked but this time the "timerHandlerDo" function will be called. It's clear that we must remove the timer listener as soon as the mouse is up.

You know what, there are a lot of parts in AS3 that surely makes our job easier but still there are some of them who are hard to be understood and one of them is the Timer class! Although I have been able to use it successfully, but I'm not clear about some of its features. in some other topics I will try to get very detailed on this Timer class and see how it works exactly.

Anyway, below is the modified file for the Scrollbar class.

It really needs to get clean! I'll take acre of that in my next post.

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: , , , , , , , , , ,

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: , , , , , , , , , , , ,