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

Jan 12 2009

Create animated gif files in flash AS3

Category: Slushh — Hadi Tavakoli @ 12:21 am

OK, we are trying to create a flash tool which users can play with to publish their own designed animated gif files and save them locally on their computer or publish it on the web.

Let's call this software "Slushh"! and we will let users choose different graphic designs in their canvas, let them draw things around, let them upload their images or animated gif files, let them type notes and choose their favorite font, size, etc, etc

As it all appears, this gonna be a very huge piece of software, but it will be a great fun I'm sure and I hope I can finish it before March. it maybe a bit challenging though as I'll be working on it alone as the rest of the team is still on AS2! So if I'm going wrong anywhere or you might have any better idea on how things are getting done, please do advice me.

Alright, before anything, we need to have a complete list of all is going to happen in the software. no matter how complicated the work is, we can create an outline from what will be the output and what are the inputs. and narrow down the requirements little by little until we really feel that a task cannot be no more divided into any smaller sections.

OK, here is the outline of all is going to happen in the software in general. We need to make sure that it's covering all the main functions. Here I have divided the whole thing into three steps, first input will gather all of the information the software may need to server the user start working on his graphics. Second, user will play around with the different tools available in the software to actually create his frames of animations and third, user will be able to preview and save what he has created. Although the classification below is not in great details but it does help us find our way around. I don't know about you but to me, starting a project is always the biggest step to take and after you have the details listed and find the starting point, then everything else will be easy to achieve.

  • Inputs
    • flashVars //different settings to be inserted. We need a class to grab all the flashVars and save them for later uses in the software.
    • Template //A graphic chosen by user to act like a frame for the final output, it can be gif or png, animated or static, let's call it the template. We need a class to test the imported template (it will be loaded via flashVars) and decide on its type and introduce it to the software.
    • Stamps //These will be some animated or static graphics which user can add to their stage at run time. We need a class to load the stamps which are categorised in XML.
    • Effects //We will have some Photoshop like effects which can be applied to any selected inanimate graphics. We need a class for the reading effects' names, thumbnail and function from XML. Effects will be actually produced with ImageMagick on the server.
    • Fonts // I'm not sure if we can produce and embed fonts at run time, but if we can, we need a class to grab the fonts from XML and embed them for later use in the software.
  • Processes
    • Timeline //Frames for the animation can be added, removed or duplicated
    • Text Tool //User can select his favorite text style and write anywhere on the stage
    • Doodle Tool //Doodle can draw with different brushes and styles in the stage
    • Effects Tool //in-animated graphics will be due to effects, multi-effects available and they can be removed from a graphic
    • Upload Tool //User can upload his own graphics or animated gif files
    • Image Insertion Tool //the software will provide a basket full of different graphics that user may insert
    • Stamp Insertion Tool //effects can be applied on in-animated stamps only
    • run time PNG conversion //Every frame of the movie will be converted to PNG in run time. (While ago I read an article that was talking about a class that can do such on the fly conversion in flash player 10 so if we do this without the need of sending pixel information to server and having PHP to generate the file then it directly means that we are saving a lot of time and bandwidth) I feel like we need flash CS4 for this... hmm, not sure yet, but we'll find a solution for that when the right time comes though.
  • Outputs
    • gif file //Would it be possible to create animated gif files in run time also?!! I guess I'm expecting too much from flash! Am I getting too greedy on this? HeHeHeHe! we'll come to this later anyway, but if it's not possible which I think it won't be, then we need to put all the frame information in an XML object and send it to PHP and PHP will be able to put the frames together using the ming library and get us the final gif file to perform in the preview window and even give users to save the file on their local computer if they are logged in!

 

Alright, let's get to work now. But before we start, keep in mind that the main intention of creating classes is to for you to save time in future. it's a kinda time investment! as it will require you to think more and devote more time for creating classes that later you will reuse them over and over again so easily. So it will defenetily worth it.

I remember someone told me that if you are not going to use classes with AS3, then even don't bother buying the expensive CS4 (or CS3) ! because the whole idea behind AS3 is to code in OOP.

OK, now I'm going to create some classes which are going to be used in our project :-SS Let's start with a scroller, then a preloader... make sure to read my next posts...

Jan 11 2009

Welcome to My Flash Lab Weblog

Category: Projects — Hadi Tavakoli @ 11:07 am

Maybe I should have started this blog a couple of months ago when I really started to read my first book about AS3 but, it’s still not too late. The purpose of having this blog up is mainly to help those coders who are actually trying to get started with class based programming or better to say OOP. Maybe it will help others if they really hear where to start and how to start their move from AS2 to AS3 but I think this will also help those who are starting from AS3 directly.

Basically, I’m not going to teach you any AS3! But what you will find here is the whole way through troubles that I, personally, am going into while getting myself boosted with OOP with AS3.

Right now that I’m writing this, I have not yet written even one class by myself but I have read a lot about it in different books, my favorite is ActionScript 3.0 Bible, and at the same time I have worked on a lot of tutorials you may find around on the net specially actionscript.org. So overall, I think I have a good understanding of what is a class and how you can use and organize it for your projects.

You know what I love about OOP, the very sweet fact that it will enable you to create one time class and use it in a project and in future use it in another project very easily without touching any algorithm in inside of it. Of course you may extend it, or create different interfaces of it for different uses, but you don’t have to modify the written class anymore. This surely saves time when you are doing some very big projects and especially when you are working on a team.

Our little company consist of just 5 programmers right now and we are just working on AS2 projects and I’m telling you, it’s really a pain for me to get everything organized and it has happened a lot that one of the coders overwrites another coders file by mistake and makes the work complicated... but now that I’m teaching myself ActionScript 3.0 it gives me the feeling that soon, very soon, we will be able to control projects much easier.

Oh, and one thing, maybe in this blog you see a lot of silly notes by me about how I’m developing something, so please feel free to correct me and I would appreciate your guidelines :)

I am about to start my first project in AS3, very excited about this!

« Previous Page