My Flash Lab!

If you have read the previous posts, you know that we are trying to build a drop down menu and till here we have the scrollbar ready. and as you know we need a container for our items which are going to be placed under the drop down menu. so we here we create a Box class which enables us input three different parameters in it. Of course we are going to make the box in a way which the parameter are optional so in result we can have different kinds of Box instances which all may look different when we change the input.

we need a class which itself can be used as a MovieClip so we will make sure to extend the MovieClip class. I thought that it's not always a good idea to create dynamic classes through library and reference them via new class()  as little by little they can make our code dirty, so wherever we can create classes which they can act as a movieclip or something, it would be better to just extend it.

Alright, for our box to appear on the stage, we will use the follwoing.

myBox.floorWidth > will be used to set our box's width
myBox.floorHeight > will be used to set our box's height
myBox.font > will be used as our font but remember to create an empty dynamic text object and place it somewhere off the stage and embed the characters you would need in it. You need to do this because in the class later you will see that we will embed the fonts. (Some where I read that it is possible to embed fonts dynamically into classes which was not possible in SA2. I will look into that later as it will be another nice improvements in AS3)
myBox.fontSize > This will be the size of our fonts in the Box
myBox.fontColor > This will be the color of our fonts
myBox.addInfo({}); > I like this part a lot! as we can call the addInfo method within the Box class and add our information to it easily as you can see the sample above. Note that we want our Box class to accept optional features so if we insert "--" for the object values, it will simply ignore it which in result you can have a Box with thumbnails and label and details all available or just a label you can find the final look of our box below.

Notice that we have added no mouse events because OOP is telling us not to make the classes very complicated. so we will just have a box which shows the input. later if we needed a Box which should do something on a click or something, then we can nicely extend our current Box and add listeners to the new sub class.

And here is the Box class below.

As you see, in this class I have learned how to deal with a couple of important functionalities like TextField and Loader which I try to give some brief explanation on them.

 

How to use the text class

first you need to import the necessary classes.

import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.AntiAliasType;

then, introduce your variable in the class block  which will later hold your string.

protected var myLable:TextField;
protected var myFormat:TextFormat = new TextFormat();

Note that in this example, "myLable" will hold our text string later and myFormat will hold all the necessary properties for the style of our text.

After that you should start the text field class by calling new TextField(); and set any different settings you want for the text field (This is NOT the style of your text but the properties of the text field itself)

myLable = new TextField();
myLable.antiAliasType = AntiAliasType.ADVANCED;
myLable.autoSize = TextFieldAutoSize.LEFT;
myLable.embedFonts = true;
myLable.mouseEnabled = false;

There are a lot more properties for text fields that I'm sure you can easily find the list in flash's help documents, but here I have mentioned just the properties that I needed to set in my Box class. so feel free to play around with different properties, I assure you that it's will be fun

OK, after you have your text field set, you need to set the format (or the styling of your text) ready.

myFormat.font = _font; // "Tahoma"
myFormat.size = _fontSize; // 11
myFormat.color = _fontColor; // 0x000000

After you set the text field and the format ready, it will be the time to link these two objects together like this.

myLable.defaultTextFormat = myFormat;

You're almost done, now insert your string in plain string or html like this.

myLable.text = "my first text!";
myLable.htmlText = "my <b>first</b> text";

 

That's it, I remember a couple of years ago when I was learning AS2 and found about how text fields are organized, I used to say why we should do a lot of work to display a simple text?! well, these things are necessary, every piece of them are necessary. Computers are dumb, we need to tell them every details

And by the way, please note how differently AS3 treats the auto size thing... I'm not going to talk about the details here, I'm sure you will find a lot of detailed articles talking about other small things here and there, here you just understood how to make a text field appear on your flash movie. If you found something nice with it, make sure to let me know though!

Anyway, there will be a lot of talks about text fields later as in our application we are going to do a lot of crazy things with the text fields.

Regards,
Hadi

Tags: AntiAliasType, AntiAliasType.ADVANCED, AS3, embedFonts, Loader, mouseEnabled, text, TextField, TextFieldAutoSize, TextFormat, URLRequest