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


Sep 12 2009

Family font embed in AS3 in the right way

Category: ClassesHadi Tavakoli @ 10:44 pm

Well, if you're reading this post, you've probably have already searched a dozen web pages to find one final good solution for embeding fonts in flash in the most appropriate way.

be happy, you have just found it finally :) here I try to talk about what I have understood from fonts and how to embed them into your flash. (Personally, I don't code in flex but this method will also work in flex of course)

what you gotta know, well of course you know, is that every font usually has four faces, regular, bold, italic and bold italic. some fonts don't but let's talk about Verdana which has all the faces.

I'm not a fan of importing anything into my FLA libraries and I try to code as abstract and dynamic as possible so I'm going to embed fonts with the flex approach of:

[Embed(source="verdana.ttf", fontFamily...

ok, what I'm doing is that I will be using a lot of fonts in an application that I'm building and I don't want to load up all the fonts into the main file and instead I want to load fonts only when they are needed or asked for.

so, I open a new FLA file and on the first frame, type the below code:


		  
		  
		  
		  
		  
		  
		

Now, let's see what is happening exactly.  Firstly we have source="verdana.ttf" .This is the path to your font file and in this case, I have put the font file where I have my FLA. note that only .ttf files can be used (or you tell me if I'm wrong?!).

then we have fontFamily="Verdana" and this will be the font name you'll be using in your project to call the font.

if you're embeding a regular font, that's all and you're done but if you're embeding another fon't file like verdanab.ttf which includes bold verdana, you have to use the folwloing fontWeight="bold" also when embeding italic version, you should use the follwoing fontStyle="italic" and even use both of them if you're embeding bold and italic version together :) anyway, the above code will work fine.

that's it,  just save the file and test your movie... if you're doing that in a flash IDE, most probably you will see an error plus a warning page saying something about some flex library path lab, lab, lab... just feel relax and hit the button "update library" and hit "Ctrl+Enter" again and this time you won't see any error message... that's it you're done.

now you can simply load your swf file into your project and use the "fontFamily" attribute to show the font :)

Enjoy,

Hadi

Tags: , , , , , , , , ,


May 17 2009

Extracting image binary info without loading the entire file

Category: ClassesHadi Tavakoli @ 10:37 pm

Well, today I surely teared myself apart! I spent about 10 hours to get myself femiliar with how the three most popular image formats, jpg, png and gif work and how we can use the flash AS3 ByteArray class to extract this information!

I must confess that I still am very unclear about a lot of different things in byteArray class but the least I managed was to find and combine some classes and finally managed to output the kind of information I needed.

Before anything I must thank to Antti, who wrote the beautiful class of how we can read and use binary data of jpg file. you may read his artical here.

The problem with Antti class was that his class supported jpeg format only and didn't extract all the other information I needed and actually was too bugy for my needs!

So, I had to do some more searches here and there and I found this other artical here which did made me happy by how it extracted image info and it supported all the three formats. but the problem with this latter class was that it actually extracted all the data just after it loaded the whole file entirely! which in practice makes it useless, at least for my purpose.

So, I have the two classes, one tells me how to search for the information I need the other one tells me how to kill the loading process as soon as I found out the information I was looking for!

ok, good, finally what I did was to combine the two classes together and build a new class which you can download here:
http://emstris.com/sample/AS3/byteArray/ImageInfoExtractor.as
(simply put it in your class files in this location: com\myflashlab\classes\tools\imageEncoders)

and using this new class I put together, you can find out a lot of information about images before they are downloaded entirely :) actually this information gets extracted in just a second! maybe less than a second.

you will be able to use the above class like this:


		  
		  
		  
		  
		  
		  
		

looks nice and clean, right? yeah, this will be absolutly useful in big and complex projects.
I have also a sample online, check below and see how the class has extracted the information out of the big image, about 800 kb, in just a second! and kills the connection right after that.

 

I hope you enjoy the class. just one thing, I would really love to be able to find out the header binary information of a swf file also. if anyone managed to update this class so that it also supports .swf input, I'd be more than happy to have it also :)

Thanks,
Hadi

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) You are most probably aware that if you are using a high speed internet connection such as broadband you are able to load whole clips in one go. This is really useful when you want to watch a movieclip.

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


Feb 15 2009

AS3 resizable curved box with gradients Final

Category: ClassesHadi Tavakoli @ 7:13 pm

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?

Regards,
Hadi

Tags: , , , , , , , ,


Next Page »