//get date info from system
mydate_ist = new Date();
hrs_ist = mydate_ist.getHours();
mins_ist = mydate_ist.getMinutes();
//put zeros where needed
if (hrs_ist<10) {
hrs_ist = "0" add hrs_ist;
} else {
hrs_ist = hrs_ist;
}
if (mins_ist<10) {
mins_ist = "0" add mins_ist;
} else {
mins_ist = mins_ist;
}
if (mydate_ist.getsec_istonds()<10) {
sec_ist = "0" add mydate_ist.getsec_istonds();
} else {
sec_ist = mydate_ist.getsec_istonds();
}
//send to text field
digitalClock.text = "IST "+hrs_ist+":"+mins_ist+":"+sec_ist;
Monday, April 26, 2010
Playing with Text in AS3
Playing with Text in AS3
By Blue_Chi | Flash CS3 | ActionScript 3.0 | Beginner
This tutorial will teach you the basics for dealing with text and text formatting in ActionScript 3.0. You should be able to create a text field, change its color and attributes, position it, and use a specific font for your text field by the end of this tutorial. We will use the TextField Class and the TextFormat Class to carry out these taks. This is a very basic tutorial that will only require you to know the fundamentals of AS3 Variables and the Display List.
This tutorial is divided into the following sections:
1.Basic Usage of the TextField Class.
2.Using TextField Properties.
3.Using TextFormat Class.
4.Using Embedded Fonts.
Basic Usage of the TextField ClassStart off by creating a new Flash file, right-click the only frame you have on the timeline and select Actions to open up the Actions Panel.
Creating a text field is similar to the creation of an instance of any other class in AS3. You simply create a variable to hold that instance and then use the keyword new to generate the text field:
var myText:TextField = new TextField();You can learn more about AS3 Variables by reviewing our tutorial on this topic.Once our text field is created we can set the text to be displayed in it by configuring the .text property of that instance. We are going to set it to "Republic of Code":
var myText:TextField = new TextField();
myText.text = "Republic of Code";Our text field instance is now created and has the text in it, but it won't actually be visible until we add it to the Display List. To do that we can simply use the .addChild() method this way:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);You can learn more about AS3 Display List by reviewing our tutorial on this topic.You can now test your movie by going through Window>Test Movie (Ctrl+Enter) to see your text field visible on the Flash movie!
It is possible to update the content of your text field at any time now by changing the value of the .text property at anytime even after you have added it to the display list:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.text = "This is my new text...";TextField PropertiesThat should've taught you how to create a very simple text field. Depending on the needs of your project, you might want to alter the look of this text field. I am going to explain some of the most commonly used properties. All these properties are directly accessed through the text field instance. There are many which I will not talk about and which you will have to consult the built-in ActionScript Reference to learn more about. You should note that some formatting properties such as size, alignment, and font are configured through the TextFormat Class and not through the TextField Class.
•Changing the text color:
You can change the text color by simply setting the .textColor property to any color hex decimal value:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.textColor = 0xFF0000;
The code above should change the color of our text to red.
•Creating a border around the text field:
You can create a border around your text field by setting the .border property to true:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.border = true;
The code above should create a border around the text field:
You might not be happy about the shape of the border, it appears this way because these are the default dimensions of the text field, we will deal with this in a bit.
•Changing the color of the border:
If you have a border around your text field you can change its color by configuring the .borderColor property this way:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.border = true;
myText.borderColor = 0xFF0000;
This should generate a red border around your text field.
•Setting the dimensions of the text field and accommodating larger texts:
If you attempt to add a big amount of text in your text field you will notice that the text will only be visible within the default size area of the text field which was visible through the border. For example, try to update your text field with this content:
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
If you test this movie you will see that your text gets cutout:
There are several solutions to this problem, the most simple one is to enabled word wrap to stop the text from running through the boundries of the text field. Simply set the .wordWrap property to true to activate this:
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
If you test your movie now you text field should wrap the text inside it.
You can also modify the width and height dimensions of your text field by setting the .width and .height properties of the text field instance:
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
Test your movie now to see your text field in a different rectangular shape.
We did not mention this one earlier, but it is kind of obvious, you can change the position of your text field by setting the x and y properties:
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
Test your movie now to see your text positioned in accordance with the values you set for the x and y properties.
Those are some of the basic properties of text fields, you should be aware of the other ones available as well such as .selectable, .thickness, .type and others which you can easily learn about by checking the ActionScript reference.
Using the TextFormat ClassThe TextField Class has a number of helpful properties, but it does not control formatting aspects of the text, such as the text size, the text alignment, and the font. Such properties are configured by using the TextFormat Class.
Using the TextFormat Class requires creating an instance of this class, setting its properties, and then assigning it as the default text format for a text field. We will do this step by step. Start off by creating a new instance of the TextFormat Class, we need to set the instance of the TextFormat to the text field before we set its text content, so I suggest that you create it at the beginning of your code:
var myFormat:TextFormat = new TextFormat();
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
We now can set the size directly on this instance:
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
Now the important part, you need to set your TextFormat instance as the default format for your text field. This must be done before you add any text to your text field. The property to use is called .defaultTextFormat and it should be used this way:
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
You can test your movie now to see your text in a larger text size.
We can also configure the alignment of the text by using the .align property of the TextFormat Class. This property only accepts specific values passed as properties of the TextFormatAlign Class. This basically means that you have to set the value of .align as one of the following:
•TextFormatAlign.CENTER
•TextFormatAlign.JUSTIFY
•TextFormatAlign.LEFT
•TextFormatAlign.RIGHT
I think that all of these are self-explanatory. The trick is that you CANNOT simply set the value as a string such as "center" or "left". You can use the properties mentioned above this way:
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
There are other properties for the TextFormat Class which you can configure such as .bold, letterSpacing, .blockIndent and others which are pretty easy to use if you check the ActionScript Reference.
Using Embedded FontsChanging the font of your text field is a much more complicated process than the stuff we previous did. Using a special font will require you to embed that font so that the Flash movie can display the font regardless of whether or not that font is available on the machine displaying the file. In order to use an embedded font you must do the following:
1.Export the font in the library and make it available for use for ActionScript.
2.Create an instance of the font in ActionScript.
3.Set that instance font name as the value for the .font property in your TextFormat Instance.
4.Set your TextFormat as the default text format for your text field and configure the appropriate text field properties.
We are going to do this step by step. You need to start off by opening up your library (Window>Library). You will then need to click on the small menu button on the top right corner for the panel and select New Font....
The Font Symbol Properties should pop-up. Simply select the font you want to use from the drop down menu, you should not be bothered by the other attributes as they do not really matter. I am choosing the Windows Vista font Calibri, you can pick whatever font you want to use.
Once you click OK your font should appear in the library as Font 1, right-click it and select Linkage, that should open the Linkage Properties window, check Export for ActionScript, this should create a class for your font which you can use in ActionScript. The default class name is Font1, we can use that as our class name. Click on OK to finish.
That should do it, back to ActionScript now. The first step in ActionScript would be to create an instance of our font. You can do that using the new keyword the same way you do with all classes:
var myFont = new Font1();
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
The next step is to use the .font property of our TextFormat instance and set it to the .fontName property of the font. You have to make sure to use the fontName property of the font and not set the fond directly.
var myFont = new Font1();
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
myFormat.font = myFont.fontName;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
We have already set the default text format of our text field as the instance we created, however, to make the text field actually display the custom font, we need to manually activate the option to use embedded fonts and then set the .antiAlias to use the advanced settings:
var myFont = new Font1();
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
myFormat.font = myFont.fontName;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
These two last requires are almost arbitrary, but Flash requires them.You can test your movie now to see your text displayed in this new font. However, the text might not be fully displayed because we are using a very small text field:
You can fix this yourself by updating the .width and .height of the text field or by using the .autoSize property. We did not discuss this property, but you can easily learn how to use it by referring to the ActionScript reference.
This concludes our tutorial, I hope you've learnt something new from it. If you have any comments or questions feel free to post them at the Republic of Code Forum.
- End of Tutorial
By Blue_Chi | Flash CS3 | ActionScript 3.0 | Beginner
This tutorial will teach you the basics for dealing with text and text formatting in ActionScript 3.0. You should be able to create a text field, change its color and attributes, position it, and use a specific font for your text field by the end of this tutorial. We will use the TextField Class and the TextFormat Class to carry out these taks. This is a very basic tutorial that will only require you to know the fundamentals of AS3 Variables and the Display List.
This tutorial is divided into the following sections:
1.Basic Usage of the TextField Class.
2.Using TextField Properties.
3.Using TextFormat Class.
4.Using Embedded Fonts.
Basic Usage of the TextField ClassStart off by creating a new Flash file, right-click the only frame you have on the timeline and select Actions to open up the Actions Panel.
Creating a text field is similar to the creation of an instance of any other class in AS3. You simply create a variable to hold that instance and then use the keyword new to generate the text field:
var myText:TextField = new TextField();You can learn more about AS3 Variables by reviewing our tutorial on this topic.Once our text field is created we can set the text to be displayed in it by configuring the .text property of that instance. We are going to set it to "Republic of Code":
var myText:TextField = new TextField();
myText.text = "Republic of Code";Our text field instance is now created and has the text in it, but it won't actually be visible until we add it to the Display List. To do that we can simply use the .addChild() method this way:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);You can learn more about AS3 Display List by reviewing our tutorial on this topic.You can now test your movie by going through Window>Test Movie (Ctrl+Enter) to see your text field visible on the Flash movie!
It is possible to update the content of your text field at any time now by changing the value of the .text property at anytime even after you have added it to the display list:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.text = "This is my new text...";TextField PropertiesThat should've taught you how to create a very simple text field. Depending on the needs of your project, you might want to alter the look of this text field. I am going to explain some of the most commonly used properties. All these properties are directly accessed through the text field instance. There are many which I will not talk about and which you will have to consult the built-in ActionScript Reference to learn more about. You should note that some formatting properties such as size, alignment, and font are configured through the TextFormat Class and not through the TextField Class.
•Changing the text color:
You can change the text color by simply setting the .textColor property to any color hex decimal value:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.textColor = 0xFF0000;
The code above should change the color of our text to red.
•Creating a border around the text field:
You can create a border around your text field by setting the .border property to true:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.border = true;
The code above should create a border around the text field:
You might not be happy about the shape of the border, it appears this way because these are the default dimensions of the text field, we will deal with this in a bit.
•Changing the color of the border:
If you have a border around your text field you can change its color by configuring the .borderColor property this way:
var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.border = true;
myText.borderColor = 0xFF0000;
This should generate a red border around your text field.
•Setting the dimensions of the text field and accommodating larger texts:
If you attempt to add a big amount of text in your text field you will notice that the text will only be visible within the default size area of the text field which was visible through the border. For example, try to update your text field with this content:
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
If you test this movie you will see that your text gets cutout:
There are several solutions to this problem, the most simple one is to enabled word wrap to stop the text from running through the boundries of the text field. Simply set the .wordWrap property to true to activate this:
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
If you test your movie now you text field should wrap the text inside it.
You can also modify the width and height dimensions of your text field by setting the .width and .height properties of the text field instance:
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
Test your movie now to see your text field in a different rectangular shape.
We did not mention this one earlier, but it is kind of obvious, you can change the position of your text field by setting the x and y properties:
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
Test your movie now to see your text positioned in accordance with the values you set for the x and y properties.
Those are some of the basic properties of text fields, you should be aware of the other ones available as well such as .selectable, .thickness, .type and others which you can easily learn about by checking the ActionScript reference.
Using the TextFormat ClassThe TextField Class has a number of helpful properties, but it does not control formatting aspects of the text, such as the text size, the text alignment, and the font. Such properties are configured by using the TextFormat Class.
Using the TextFormat Class requires creating an instance of this class, setting its properties, and then assigning it as the default text format for a text field. We will do this step by step. Start off by creating a new instance of the TextFormat Class, we need to set the instance of the TextFormat to the text field before we set its text content, so I suggest that you create it at the beginning of your code:
var myFormat:TextFormat = new TextFormat();
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
We now can set the size directly on this instance:
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
Now the important part, you need to set your TextFormat instance as the default format for your text field. This must be done before you add any text to your text field. The property to use is called .defaultTextFormat and it should be used this way:
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
You can test your movie now to see your text in a larger text size.
We can also configure the alignment of the text by using the .align property of the TextFormat Class. This property only accepts specific values passed as properties of the TextFormatAlign Class. This basically means that you have to set the value of .align as one of the following:
•TextFormatAlign.CENTER
•TextFormatAlign.JUSTIFY
•TextFormatAlign.LEFT
•TextFormatAlign.RIGHT
I think that all of these are self-explanatory. The trick is that you CANNOT simply set the value as a string such as "center" or "left". You can use the properties mentioned above this way:
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
There are other properties for the TextFormat Class which you can configure such as .bold, letterSpacing, .blockIndent and others which are pretty easy to use if you check the ActionScript Reference.
Using Embedded FontsChanging the font of your text field is a much more complicated process than the stuff we previous did. Using a special font will require you to embed that font so that the Flash movie can display the font regardless of whether or not that font is available on the machine displaying the file. In order to use an embedded font you must do the following:
1.Export the font in the library and make it available for use for ActionScript.
2.Create an instance of the font in ActionScript.
3.Set that instance font name as the value for the .font property in your TextFormat Instance.
4.Set your TextFormat as the default text format for your text field and configure the appropriate text field properties.
We are going to do this step by step. You need to start off by opening up your library (Window>Library). You will then need to click on the small menu button on the top right corner for the panel and select New Font....
The Font Symbol Properties should pop-up. Simply select the font you want to use from the drop down menu, you should not be bothered by the other attributes as they do not really matter. I am choosing the Windows Vista font Calibri, you can pick whatever font you want to use.
Once you click OK your font should appear in the library as Font 1, right-click it and select Linkage, that should open the Linkage Properties window, check Export for ActionScript, this should create a class for your font which you can use in ActionScript. The default class name is Font1, we can use that as our class name. Click on OK to finish.
That should do it, back to ActionScript now. The first step in ActionScript would be to create an instance of our font. You can do that using the new keyword the same way you do with all classes:
var myFont = new Font1();
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
The next step is to use the .font property of our TextFormat instance and set it to the .fontName property of the font. You have to make sure to use the fontName property of the font and not set the fond directly.
var myFont = new Font1();
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
myFormat.font = myFont.fontName;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
We have already set the default text format of our text field as the instance we created, however, to make the text field actually display the custom font, we need to manually activate the option to use embedded fonts and then set the .antiAlias to use the advanced settings:
var myFont = new Font1();
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
myFormat.font = myFont.fontName;
var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);
myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
These two last requires are almost arbitrary, but Flash requires them.You can test your movie now to see your text displayed in this new font. However, the text might not be fully displayed because we are using a very small text field:
You can fix this yourself by updating the .width and .height of the text field or by using the .autoSize property. We did not discuss this property, but you can easily learn how to use it by referring to the ActionScript reference.
This concludes our tutorial, I hope you've learnt something new from it. If you have any comments or questions feel free to post them at the Republic of Code Forum.
- End of Tutorial
Thursday, April 22, 2010
Create a Random Animated Color Text Effect
Create a Random Animated Color Text Effect
October 3rd, 2009 in Flash
This actionscript 3 tutorial shows you how to create a Random Animated Color Text Effect. Over time each letter changes its color one after the other.
View DemoDownload Source
1. Create a new flash file (Actionscript 3.0) and save it as randomColorText.fla.
2. Rename “layer 1″ to “letters”. Select the Text tool and type your static text on the stage. Set the text properties as you like.
With the text still selected, select in the top menu Modify>Break apart to break your text into separate letters.
Convert each letter to a movie clip. No need to give them instance names.
3. Create a new “actions” layer and open the actions panel.
First declare a Timer variable and set its delay property as you like. Here we choose 100 ms. Next add a TIMER event listener that will be handled by the changeColor function.
view source
print?
1.var timer:Timer = new Timer(100,0);
2.
3.timer.addEventListener(TimerEvent.TIMER, changeColor)
4. In the changeColor function, we need to retrieve the current letter which we want to change its color.
To do so, first declare just after the Timer, a current variable as an int and initialize it to 0.
In the function we can now get the current letter.
Next create a ColorTransform object. Then set its color to a random one and apply it to the current movie clip letter.
Finally, we increment the current variable unless we get the last letter and this case, reset to 0.
view source
print?
01.var current:int = 0;
02.
03.function changeColor(e:Event):void{
04. var mc:MovieClip = getChildAt(current) as MovieClip;
05. var myColorTransform : ColorTransform = mc.transform.colorTransform;
06. myColorTransform.color= Math.random() * 0xffffff;
07. mc.transform.colorTransform = myColorTransform;
08. if(current == numChildren -1)
09. current = 0;
10. else
11. current ++;
12.}
5. Finally, don’t forget to start the timer by calling the start() method.
Here’s the final code, test your movie to see it in action.
view source
print?
01.var timer:Timer = new Timer(100, 0);
02.var current:int = 0;
03.
04.timer.addEventListener(TimerEvent.TIMER, changeColor);
05.timer.start();
06.
07.function changeColor(e:Event):void{
08. var mc:MovieClip = getChildAt(current) as MovieClip;
09. var myColorTransform : ColorTransform = mc.transform.colorTransform;
10. myColorTransform.color= Math.random() * 0xffffff;
11. mc.transform.colorTransform = myColorTransform;
12. if(current == numChildren -1)
13. current = 0;
14. else
15. current ++;
16.}
October 3rd, 2009 in Flash
This actionscript 3 tutorial shows you how to create a Random Animated Color Text Effect. Over time each letter changes its color one after the other.
View DemoDownload Source
1. Create a new flash file (Actionscript 3.0) and save it as randomColorText.fla.
2. Rename “layer 1″ to “letters”. Select the Text tool and type your static text on the stage. Set the text properties as you like.
With the text still selected, select in the top menu Modify>Break apart to break your text into separate letters.
Convert each letter to a movie clip. No need to give them instance names.
3. Create a new “actions” layer and open the actions panel.
First declare a Timer variable and set its delay property as you like. Here we choose 100 ms. Next add a TIMER event listener that will be handled by the changeColor function.
view source
print?
1.var timer:Timer = new Timer(100,0);
2.
3.timer.addEventListener(TimerEvent.TIMER, changeColor)
4. In the changeColor function, we need to retrieve the current letter which we want to change its color.
To do so, first declare just after the Timer, a current variable as an int and initialize it to 0.
In the function we can now get the current letter.
Next create a ColorTransform object. Then set its color to a random one and apply it to the current movie clip letter.
Finally, we increment the current variable unless we get the last letter and this case, reset to 0.
view source
print?
01.var current:int = 0;
02.
03.function changeColor(e:Event):void{
04. var mc:MovieClip = getChildAt(current) as MovieClip;
05. var myColorTransform : ColorTransform = mc.transform.colorTransform;
06. myColorTransform.color= Math.random() * 0xffffff;
07. mc.transform.colorTransform = myColorTransform;
08. if(current == numChildren -1)
09. current = 0;
10. else
11. current ++;
12.}
5. Finally, don’t forget to start the timer by calling the start() method.
Here’s the final code, test your movie to see it in action.
view source
print?
01.var timer:Timer = new Timer(100, 0);
02.var current:int = 0;
03.
04.timer.addEventListener(TimerEvent.TIMER, changeColor);
05.timer.start();
06.
07.function changeColor(e:Event):void{
08. var mc:MovieClip = getChildAt(current) as MovieClip;
09. var myColorTransform : ColorTransform = mc.transform.colorTransform;
10. myColorTransform.color= Math.random() * 0xffffff;
11. mc.transform.colorTransform = myColorTransform;
12. if(current == numChildren -1)
13. current = 0;
14. else
15. current ++;
16.}
how you can add tick marks to a Flash/ActionScript 3.0 Slider control
The following example shows how you can add tick marks to a Flash/ActionScript 3.0 Slider control by setting the tickInterval property.
Full code after the jump.
// ActionScript 3.0
/**
* Requires:
* - Slider control in the Flash library.
*/
import fl.controls.Slider;
var slider:Slider = new Slider();
slider.tickInterval = 1;
slider.move(20, 20);
addChild(slider);
Full code after the jump.
// ActionScript 3.0
/**
* Requires:
* - Slider control in the Flash library.
*/
import fl.controls.Slider;
var slider:Slider = new Slider();
slider.tickInterval = 1;
slider.move(20, 20);
addChild(slider);
control which characters a user can type into a Flash ActionScript 3.0 TextInput
The following example shows how you can control which characters a user can type into a Flash ActionScript 3.0 TextInput control by setting the restrict property.
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - TextInput component in Flash library
*/
import fl.controls.TextInput;
var textInput:TextInput = new TextInput();
textInput.restrict = "0-9.";
textInput.move(10, 10);
addChild(textInput);
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - TextInput component in Flash library
*/
import fl.controls.TextInput;
var textInput:TextInput = new TextInput();
textInput.restrict = "0-9.";
textInput.move(10, 10);
addChild(textInput);
control the number of characters a user can type into a Flash ActionScript 3.0 TextInput control
The following example shows how you can control the number of characters a user can type into a Flash ActionScript 3.0 TextInput control by setting the maxChars property.
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - TextInput component in Flash library
*/
import fl.controls.TextInput;
var textInput:TextInput = new TextInput();
textInput.maxChars = 5;
textInput.move(10, 10);
addChild(textInput);
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - TextInput component in Flash library
*/
import fl.controls.TextInput;
var textInput:TextInput = new TextInput();
textInput.maxChars = 5;
textInput.move(10, 10);
addChild(textInput);
create a password Flash ActionScript 3.0 TextInput
The following example shows ho wyou can create a password Flash ActionScript 3.0 TextInput component by setting the displayAsPassword property.
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - CheckBox component in Flash library
* - TextInput component in Flash library
*/
import fl.controls.CheckBox;
import fl.controls.TextInput;
var checkBox:CheckBox = new CheckBox();
checkBox.label = "displayAsPassword";
checkBox.addEventListener(Event.CHANGE, checkBox_change);
checkBox.width = 200;
checkBox.move(10, 10);
addChild(checkBox);
var textInput:TextInput = new TextInput();
textInput.text = new Date().toString();
textInput.displayAsPassword = checkBox.selected;
textInput.width = 200;
textInput.move(10, 40);
addChild(textInput);
function checkBox_change(evt:Event):void {
textInput.displayAsPassword = checkBox.selected;
}
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - CheckBox component in Flash library
* - TextInput component in Flash library
*/
import fl.controls.CheckBox;
import fl.controls.TextInput;
var checkBox:CheckBox = new CheckBox();
checkBox.label = "displayAsPassword";
checkBox.addEventListener(Event.CHANGE, checkBox_change);
checkBox.width = 200;
checkBox.move(10, 10);
addChild(checkBox);
var textInput:TextInput = new TextInput();
textInput.text = new Date().toString();
textInput.displayAsPassword = checkBox.selected;
textInput.width = 200;
textInput.move(10, 40);
addChild(textInput);
function checkBox_change(evt:Event):void {
textInput.displayAsPassword = checkBox.selected;
}
set a custom text format on a Flash ActionScript 3.0 TextInput
The following example shows how you can set a custom text format on a Flash ActionScript 3.0 TextInput component by setting the textFormat style to a TextFormat object.
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - TextInput component in Flash library
*/
import fl.controls.TextInput;
var textFmt:TextFormat = new TextFormat();
textFmt.color = 0xFF0000;
textFmt.font = "Courier New"
textFmt.size = 18;
var textInput:TextInput = new TextInput();
textInput.text = new Date().toString();
textInput.setStyle("textFormat", textFmt);
textInput.width = 300;
textInput.move(10, 10);
addChild(textInput);
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - TextInput component in Flash library
*/
import fl.controls.TextInput;
var textFmt:TextFormat = new TextFormat();
textFmt.color = 0xFF0000;
textFmt.font = "Courier New"
textFmt.size = 18;
var textInput:TextInput = new TextInput();
textInput.text = new Date().toString();
textInput.setStyle("textFormat", textFmt);
textInput.width = 300;
textInput.move(10, 10);
addChild(textInput);
use an embedded font
The following example shows how you can use an embedded font with the Flash ActionScript 3.0 TextInput control by setting the embedFonts and textFormat styles.
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - TextInput component in Flash library
* - Embedded font with class name "MyEmbeddedFont" in Flash library
*/
import fl.controls.TextInput;
var embeddedFont:Font = new MyEmbeddedFont();
var textFmt:TextFormat = new TextFormat();
textFmt.color = 0xFF0000;
textFmt.font = embeddedFont.fontName;
textFmt.size = 18;
var textInput:TextInput = new TextInput();
textInput.text = new Date().toString();
textInput.setStyle("embedFonts", true);
textInput.setStyle("textFormat", textFmt);
textInput.width = 300;
textInput.move(10, 10);
addChild(textInput);
Figure 1. Font Symbol Properties dialog box.
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - TextInput component in Flash library
* - Embedded font with class name "MyEmbeddedFont" in Flash library
*/
import fl.controls.TextInput;
var embeddedFont:Font = new MyEmbeddedFont();
var textFmt:TextFormat = new TextFormat();
textFmt.color = 0xFF0000;
textFmt.font = embeddedFont.fontName;
textFmt.size = 18;
var textInput:TextInput = new TextInput();
textInput.text = new Date().toString();
textInput.setStyle("embedFonts", true);
textInput.setStyle("textFormat", textFmt);
textInput.width = 300;
textInput.move(10, 10);
addChild(textInput);
Figure 1. Font Symbol Properties dialog box.
create an uneditable Flash ActionScript 3.0 TextInput control
The following example shows how you can create an uneditable Flash ActionScript 3.0 TextInput control by setting the Boolean editable property.
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - CheckBox component in Flash library
* - TextInput component in Flash library
*/
import fl.controls.CheckBox;
import fl.controls.TextInput;
var checkBox:CheckBox = new CheckBox();
checkBox.label = "editable";
checkBox.selected = true;
checkBox.addEventListener(Event.CHANGE, checkBox_change);
checkBox.move(10, 10);
addChild(checkBox);
var textInput:TextInput = new TextInput();
textInput.editable = checkBox.selected;
textInput.width = 300;
textInput.move(10, 40);
addChild(textInput);
function checkBox_change(evt:Event):void {
textInput.editable = checkBox.selected;
}
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - CheckBox component in Flash library
* - TextInput component in Flash library
*/
import fl.controls.CheckBox;
import fl.controls.TextInput;
var checkBox:CheckBox = new CheckBox();
checkBox.label = "editable";
checkBox.selected = true;
checkBox.addEventListener(Event.CHANGE, checkBox_change);
checkBox.move(10, 10);
addChild(checkBox);
var textInput:TextInput = new TextInput();
textInput.editable = checkBox.selected;
textInput.width = 300;
textInput.move(10, 40);
addChild(textInput);
function checkBox_change(evt:Event):void {
textInput.editable = checkBox.selected;
}
enable or disable a Flash ActionScript 3.0 TextInput control by setting the Boolean enabled property
The following example shows how you can enable or disable a Flash ActionScript 3.0 TextInput control by setting the Boolean enabled property.
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - CheckBox component in Flash library
* - TextInput component in Flash library
*/
import fl.controls.CheckBox;
import fl.controls.TextInput;
var checkBox:CheckBox = new CheckBox();
checkBox.label = "enabled";
checkBox.selected = true;
checkBox.addEventListener(Event.CHANGE, checkBox_change);
checkBox.move(10, 10);
addChild(checkBox);
var textInput:TextInput = new TextInput();
textInput.text = new Date().toString();
textInput.enabled = checkBox.selected;
textInput.width = 300;
textInput.move(10, 40);
addChild(textInput);
function checkBox_change(evt:Event):void {
textInput.enabled = checkBox.selected;
}
Full code after the jump.
// ActionScript 3.0
/* Requires:
* - CheckBox component in Flash library
* - TextInput component in Flash library
*/
import fl.controls.CheckBox;
import fl.controls.TextInput;
var checkBox:CheckBox = new CheckBox();
checkBox.label = "enabled";
checkBox.selected = true;
checkBox.addEventListener(Event.CHANGE, checkBox_change);
checkBox.move(10, 10);
addChild(checkBox);
var textInput:TextInput = new TextInput();
textInput.text = new Date().toString();
textInput.enabled = checkBox.selected;
textInput.width = 300;
textInput.move(10, 40);
addChild(textInput);
function checkBox_change(evt:Event):void {
textInput.enabled = checkBox.selected;
}
How to Rotate a Display Object About an Arbitrary Point in AS3 Flash
he 'rotation' property of a DisplayObject rotates the object about its registration point. Very often you would rather rotate an object about a point inside the object different than the registration point or about an external point. The simplest way to accomplish that task is by using the MatrixTransformer class in the fl.motion package. In this How-To we show how to do it. Click on the image below to open an example in a new window.
Download
Download the well-commented source file corresponding to the example above, rotation.fla.
* rotation.fla
Comments and Code
The class MatrixTransformer does make rotating about an arbitrary point very easy provided you use the static methods MatrixTransformer.rotateAroundInternalPoint and MatrixTransformer.rotateAroundExternalPoint in the way demonstrated below or in any other way that avoids using the current yourObject.transform.matrix at each rotation. The latter will cause an error to accumulate and eventually your object will shift significantly. The accumulating error is especially pronounced with MatrixTransformer.rotateAroundInternalPoint. The solution: Keep track of the current angle of rotation at each iteration rather than of the current yourObject.transform.matrix. Below is the code behind our example.
We begin by importing the MatrixTransformer class.
import fl.motion.MatrixTransformer;
We create two Shapes corresponding to the blue and the purple square. We add them as children of the MainTimeline and position them on the Stage.
var blue:Shape=new Shape();
this.addChild(blue);
blue.x=140;
blue.y=200;
var purple:Shape=new Shape();
this.addChild(purple);
purple.x=500;
purple.y=190;
The variables curPurpleAng and curBlueAng will store the current value of the rotation angle for each square.
var curPurpleAng:Number=0;
var curBlueAng:Number=0;
We set centers of rotation for each square. You can experiment by changing the points' coordinates. With our choice the center for the blue square falls within the square, the center for the purple square outside the purple square.
var blueRotCenter:Point=new Point(30,30);
var purpleRotCenter:Point=new Point(450,220);
We are calling the function that draws both squares as well as the dots representing the centers of rotation, and crosses representing the registration points.
drawShapes();
The next two lines are very important. We store the initial transform.matrix for each square in two variables purpleMat and blueMat. These two matrices will remain the same throughout the script and the animation. Every time we rotate the squares, we will use blueMat and purpleMat and the current values of the angles of rotation for each square to calculate the current transform.matrix objects for each square.
var purpleMat:Matrix=purple.transform.matrix.clone();
var blueMat:Matrix=blue.transform.matrix.clone();
The function rotateBlue rotates the blue square by the angle 'deg' (in degrees) from the INITIAL position of the blue square, similarly for rotatePurple. This is important to avoid errors. See comments below and at the end of the script.
function rotateBlue(deg:Number):void {
var mat:Matrix= blueMat.clone();
MatrixTransformer.rotateAroundInternalPoint(mat,blueRotCenter.x,
blueRotCenter.y,deg);
blue.transform.matrix=mat;
}
function rotatePurple(deg:Number):void {
var mat:Matrix= purpleMat.clone();
MatrixTransformer.rotateAroundExternalPoint(mat,purpleRotCenter.x,
purpleRotCenter.y,deg);
purple.transform.matrix=mat;
}
The function rotateBlue uses the static method of the MatrixTransformer class
MatrixTransformer.rotateAroundInternalPoint
that adds rotation to the matrix passed as the first parameter.
The function rotatePurple uses the static method of the MatrixTransformer class
MatrixTransformer.rotateAroundExternalPoint
that adds rotation to the matrix passed as the first parameter.
The difference between the two methods lies in the interpretation of the coordinates x and y passed to the methods as the second and the third parameter. For rotateAroundInternalPoint, the coordinates are interpreted as relative to the registration point of the object. For rotateAroundExternalPoint, the coordinates are interpreted as relative to the Stage. The last parameter in both methods is the angle of rotation, in degrees.
On ENTER_FRAME, the current rotation angle for each squre is increased (or decreased) by 2 degrees and the functions that rotate squares are applied. Note we are keeping track of the current angles and not of the current transfrom matrices.
this.addEventListener(Event.ENTER_FRAME,onEnter);
function onEnter(e:Event):void {
curPurpleAng=(curPurpleAng+2)%360;
rotatePurple(curPurpleAng);
curBlueAng=(curBlueAng-2)%360;
rotateBlue(curBlueAng);
}
Finally, the function that draws all shapes. We skip below this easy part of the code. Please see the fla file.
function drawShapes():void {
..........
..........
}
Important comment:
Should 'deg' in rotatePurple and rotateBlue, say rotateBlue, represent the INCREMENT of the angle of rotation at each step, we would have to use the current value of blue.transform.matrix and the code would look as follows:
var mat:Matrix = blue.transform.matrix.clone();
MatrixTransformer.rotateAroundInternalPoint(mat,blueRotCenter.x,
blueRotCenter.y,deg);
blue.transform.matrix = mat;
This would lead to a building up error that would gradually move the rotating object from its proper position. This error is more pronounced in rotateAroundInternalPoint method than in rotateAroundExternalPoint method. So if you have to dynamically retrieve the value of transform.matrix of your object, use rotateAroundExternalPoint. In that case, you have to translate the coordinates of the center of rotation to their equivalents with respect to the Stage.
/////////////////////////////
import fl.motion.MatrixTransformer;
/*
We create two Shapes corresponding to the blue and the purple square.
We add them as children of the MainTimeline and position them on the Stage.
*/
var blue:Shape=new Shape();
this.addChild(blue);
blue.x=140;
blue.y=200;
var purple:Shape=new Shape();
this.addChild(purple);
purple.x=500;
purple.y=190;
/*
The variables curPurpleAng and curBlueAng will store the current value of
the rotation angle for each square.
*/
var curPurpleAng:Number=0;
var curBlueAng:Number=0;
/*
We set centers of rotation for each square. You can experiment by changing
the points' coordinates. With our choice the center for the blue square falls within the square,
the center for the purple square outside the purple square.
*/
var blueRotCenter:Point=new Point(30,30);
var purpleRotCenter:Point=new Point(450,220);
/*
We are calling the function that draws both squares as well as the dots representing
the centers of rotation, and crosses representing the registration points.
*/
drawShapes();
/*
The next two lines are very important. We store the initial transform.matrix for
each square in two variables purpleMat and blueMat. These two matrices will remain
the same throughout the script and the animation. Every time we rotate the squares,
we will use blueMat and purpleMat and the current values of the angles of rotation
for each square to calculate the current transform.matrix objects for each square.
*/
var purpleMat:Matrix=purple.transform.matrix.clone();
var blueMat:Matrix=blue.transform.matrix.clone();
/*
The function rotateBlue rotates the blue square by the angle 'deg' (in degrees)
from the INITIAL position of the blue square, similarly for rotatePurple.
This is important to avoid errors. See comment at the end of the script.
The function rotateBlue uses the static method of the MatrixTransformer class
MatrixTransformer.rotateAroundInternalPoint
that adds rotation to the matrix passed as the first parameter.
The function rotatePurple uses the static method of the MatrixTransformer class
MatrixTransformer.rotateAroundExternalPoint
that adds rotation to the matrix passed as the first parameter.
The difference between the two methods lies in the interpretation of the
coordinates x and y passed to the methods as the second and the third parameter.
For rotateAroundInternalPoint, the coordinates are interpreted as relative to the
registration point of the object. For rotateAroundExternalPoint, the coordinates are
interpreted as relative to the Stage.
*/
function rotateBlue(deg:Number):void {
var mat:Matrix= blueMat.clone();
MatrixTransformer.rotateAroundInternalPoint(mat,blueRotCenter.x,blueRotCenter.y,deg);
blue.transform.matrix=mat;
}
function rotatePurple(deg:Number):void {
var mat:Matrix= purpleMat.clone();
MatrixTransformer.rotateAroundExternalPoint(mat,purpleRotCenter.x,purpleRotCenter.y,deg);
purple.transform.matrix=mat;
}
/*
On ENTER_FRAME, the current rotation angle for each squre is increased (or decreased) by
2 degrees and the functions that rotate squares are applied. Note we are keeping track of
the current angles and not of the current transfrom matrices.
*/
this.addEventListener(Event.ENTER_FRAME,onEnter);
function onEnter(e:Event):void {
curPurpleAng=(curPurpleAng+2)%360;
rotatePurple(curPurpleAng);
curBlueAng=(curBlueAng-2)%360;
rotateBlue(curBlueAng);
}
//The function that draws all shapes.
function drawShapes():void {
blue.graphics.lineStyle();
blue.graphics.beginFill(0x000066);
blue.graphics.drawRect(-60,-60,120,120);
blue.graphics.endFill();
//------------------
blue.graphics.beginFill(0xCC0000);
blue.graphics.drawCircle(blueRotCenter.x,blueRotCenter.y,3);
blue.graphics.endFill();
//--------------
blue.graphics.lineStyle(2,0xFFFF00);
blue.graphics.moveTo(-5,0);
blue.graphics.lineTo(5,0);
blue.graphics.moveTo(0,-5);
blue.graphics.lineTo(0,5);
//--------
purple.graphics.lineStyle();
purple.graphics.beginFill(0x660066);
purple.graphics.drawRect(0,0,60,60);
purple.graphics.endFill();
//-----------
purple.graphics.lineStyle(2,0xFFFF00);
purple.graphics.moveTo(-5,0);
purple.graphics.lineTo(5,0);
purple.graphics.moveTo(0,-5);
purple.graphics.lineTo(0,5);
//----------
this.graphics.lineStyle();
this.graphics.beginFill(0xCC0000);
this.graphics.drawCircle(purpleRotCenter.x,purpleRotCenter.y,3);
this.graphics.endFill();
}
/*
Comment:
Should 'deg' in rotatePurple and rotateBlue, say rotateBlue, represent the INCREMENT
of the angle of rotation at each step, we would have to use the current value
of blue.transform.matrix and the code would look as follows:
var mat:Matrix= blue.transform.matrix.clone();
MatrixTransformer.rotateAroundInternalPoint(mat,blueRotCenter.x,blueRotCenter.y,deg);
blue.transform.matrix=mat;
This would lead to a building up error that would gradually move the rotating object
from its proper position. This error is more pronounced in rotateAroundInternal
method than in rotateAroundExternal method. So if you have to dynamically
retrieve the value of transform.matrix of your object, use rotateAroundExternal.
In that case, you have to translate the coordinates of the center of rotation to their
equivalents with respect to the Stage.
*/
Download
Download the well-commented source file corresponding to the example above, rotation.fla.
* rotation.fla
Comments and Code
The class MatrixTransformer does make rotating about an arbitrary point very easy provided you use the static methods MatrixTransformer.rotateAroundInternalPoint and MatrixTransformer.rotateAroundExternalPoint in the way demonstrated below or in any other way that avoids using the current yourObject.transform.matrix at each rotation. The latter will cause an error to accumulate and eventually your object will shift significantly. The accumulating error is especially pronounced with MatrixTransformer.rotateAroundInternalPoint. The solution: Keep track of the current angle of rotation at each iteration rather than of the current yourObject.transform.matrix. Below is the code behind our example.
We begin by importing the MatrixTransformer class.
import fl.motion.MatrixTransformer;
We create two Shapes corresponding to the blue and the purple square. We add them as children of the MainTimeline and position them on the Stage.
var blue:Shape=new Shape();
this.addChild(blue);
blue.x=140;
blue.y=200;
var purple:Shape=new Shape();
this.addChild(purple);
purple.x=500;
purple.y=190;
The variables curPurpleAng and curBlueAng will store the current value of the rotation angle for each square.
var curPurpleAng:Number=0;
var curBlueAng:Number=0;
We set centers of rotation for each square. You can experiment by changing the points' coordinates. With our choice the center for the blue square falls within the square, the center for the purple square outside the purple square.
var blueRotCenter:Point=new Point(30,30);
var purpleRotCenter:Point=new Point(450,220);
We are calling the function that draws both squares as well as the dots representing the centers of rotation, and crosses representing the registration points.
drawShapes();
The next two lines are very important. We store the initial transform.matrix for each square in two variables purpleMat and blueMat. These two matrices will remain the same throughout the script and the animation. Every time we rotate the squares, we will use blueMat and purpleMat and the current values of the angles of rotation for each square to calculate the current transform.matrix objects for each square.
var purpleMat:Matrix=purple.transform.matrix.clone();
var blueMat:Matrix=blue.transform.matrix.clone();
The function rotateBlue rotates the blue square by the angle 'deg' (in degrees) from the INITIAL position of the blue square, similarly for rotatePurple. This is important to avoid errors. See comments below and at the end of the script.
function rotateBlue(deg:Number):void {
var mat:Matrix= blueMat.clone();
MatrixTransformer.rotateAroundInternalPoint(mat,blueRotCenter.x,
blueRotCenter.y,deg);
blue.transform.matrix=mat;
}
function rotatePurple(deg:Number):void {
var mat:Matrix= purpleMat.clone();
MatrixTransformer.rotateAroundExternalPoint(mat,purpleRotCenter.x,
purpleRotCenter.y,deg);
purple.transform.matrix=mat;
}
The function rotateBlue uses the static method of the MatrixTransformer class
MatrixTransformer.rotateAroundInternalPoint
that adds rotation to the matrix passed as the first parameter.
The function rotatePurple uses the static method of the MatrixTransformer class
MatrixTransformer.rotateAroundExternalPoint
that adds rotation to the matrix passed as the first parameter.
The difference between the two methods lies in the interpretation of the coordinates x and y passed to the methods as the second and the third parameter. For rotateAroundInternalPoint, the coordinates are interpreted as relative to the registration point of the object. For rotateAroundExternalPoint, the coordinates are interpreted as relative to the Stage. The last parameter in both methods is the angle of rotation, in degrees.
On ENTER_FRAME, the current rotation angle for each squre is increased (or decreased) by 2 degrees and the functions that rotate squares are applied. Note we are keeping track of the current angles and not of the current transfrom matrices.
this.addEventListener(Event.ENTER_FRAME,onEnter);
function onEnter(e:Event):void {
curPurpleAng=(curPurpleAng+2)%360;
rotatePurple(curPurpleAng);
curBlueAng=(curBlueAng-2)%360;
rotateBlue(curBlueAng);
}
Finally, the function that draws all shapes. We skip below this easy part of the code. Please see the fla file.
function drawShapes():void {
..........
..........
}
Important comment:
Should 'deg' in rotatePurple and rotateBlue, say rotateBlue, represent the INCREMENT of the angle of rotation at each step, we would have to use the current value of blue.transform.matrix and the code would look as follows:
var mat:Matrix = blue.transform.matrix.clone();
MatrixTransformer.rotateAroundInternalPoint(mat,blueRotCenter.x,
blueRotCenter.y,deg);
blue.transform.matrix = mat;
This would lead to a building up error that would gradually move the rotating object from its proper position. This error is more pronounced in rotateAroundInternalPoint method than in rotateAroundExternalPoint method. So if you have to dynamically retrieve the value of transform.matrix of your object, use rotateAroundExternalPoint. In that case, you have to translate the coordinates of the center of rotation to their equivalents with respect to the Stage.
/////////////////////////////
import fl.motion.MatrixTransformer;
/*
We create two Shapes corresponding to the blue and the purple square.
We add them as children of the MainTimeline and position them on the Stage.
*/
var blue:Shape=new Shape();
this.addChild(blue);
blue.x=140;
blue.y=200;
var purple:Shape=new Shape();
this.addChild(purple);
purple.x=500;
purple.y=190;
/*
The variables curPurpleAng and curBlueAng will store the current value of
the rotation angle for each square.
*/
var curPurpleAng:Number=0;
var curBlueAng:Number=0;
/*
We set centers of rotation for each square. You can experiment by changing
the points' coordinates. With our choice the center for the blue square falls within the square,
the center for the purple square outside the purple square.
*/
var blueRotCenter:Point=new Point(30,30);
var purpleRotCenter:Point=new Point(450,220);
/*
We are calling the function that draws both squares as well as the dots representing
the centers of rotation, and crosses representing the registration points.
*/
drawShapes();
/*
The next two lines are very important. We store the initial transform.matrix for
each square in two variables purpleMat and blueMat. These two matrices will remain
the same throughout the script and the animation. Every time we rotate the squares,
we will use blueMat and purpleMat and the current values of the angles of rotation
for each square to calculate the current transform.matrix objects for each square.
*/
var purpleMat:Matrix=purple.transform.matrix.clone();
var blueMat:Matrix=blue.transform.matrix.clone();
/*
The function rotateBlue rotates the blue square by the angle 'deg' (in degrees)
from the INITIAL position of the blue square, similarly for rotatePurple.
This is important to avoid errors. See comment at the end of the script.
The function rotateBlue uses the static method of the MatrixTransformer class
MatrixTransformer.rotateAroundInternalPoint
that adds rotation to the matrix passed as the first parameter.
The function rotatePurple uses the static method of the MatrixTransformer class
MatrixTransformer.rotateAroundExternalPoint
that adds rotation to the matrix passed as the first parameter.
The difference between the two methods lies in the interpretation of the
coordinates x and y passed to the methods as the second and the third parameter.
For rotateAroundInternalPoint, the coordinates are interpreted as relative to the
registration point of the object. For rotateAroundExternalPoint, the coordinates are
interpreted as relative to the Stage.
*/
function rotateBlue(deg:Number):void {
var mat:Matrix= blueMat.clone();
MatrixTransformer.rotateAroundInternalPoint(mat,blueRotCenter.x,blueRotCenter.y,deg);
blue.transform.matrix=mat;
}
function rotatePurple(deg:Number):void {
var mat:Matrix= purpleMat.clone();
MatrixTransformer.rotateAroundExternalPoint(mat,purpleRotCenter.x,purpleRotCenter.y,deg);
purple.transform.matrix=mat;
}
/*
On ENTER_FRAME, the current rotation angle for each squre is increased (or decreased) by
2 degrees and the functions that rotate squares are applied. Note we are keeping track of
the current angles and not of the current transfrom matrices.
*/
this.addEventListener(Event.ENTER_FRAME,onEnter);
function onEnter(e:Event):void {
curPurpleAng=(curPurpleAng+2)%360;
rotatePurple(curPurpleAng);
curBlueAng=(curBlueAng-2)%360;
rotateBlue(curBlueAng);
}
//The function that draws all shapes.
function drawShapes():void {
blue.graphics.lineStyle();
blue.graphics.beginFill(0x000066);
blue.graphics.drawRect(-60,-60,120,120);
blue.graphics.endFill();
//------------------
blue.graphics.beginFill(0xCC0000);
blue.graphics.drawCircle(blueRotCenter.x,blueRotCenter.y,3);
blue.graphics.endFill();
//--------------
blue.graphics.lineStyle(2,0xFFFF00);
blue.graphics.moveTo(-5,0);
blue.graphics.lineTo(5,0);
blue.graphics.moveTo(0,-5);
blue.graphics.lineTo(0,5);
//--------
purple.graphics.lineStyle();
purple.graphics.beginFill(0x660066);
purple.graphics.drawRect(0,0,60,60);
purple.graphics.endFill();
//-----------
purple.graphics.lineStyle(2,0xFFFF00);
purple.graphics.moveTo(-5,0);
purple.graphics.lineTo(5,0);
purple.graphics.moveTo(0,-5);
purple.graphics.lineTo(0,5);
//----------
this.graphics.lineStyle();
this.graphics.beginFill(0xCC0000);
this.graphics.drawCircle(purpleRotCenter.x,purpleRotCenter.y,3);
this.graphics.endFill();
}
/*
Comment:
Should 'deg' in rotatePurple and rotateBlue, say rotateBlue, represent the INCREMENT
of the angle of rotation at each step, we would have to use the current value
of blue.transform.matrix and the code would look as follows:
var mat:Matrix= blue.transform.matrix.clone();
MatrixTransformer.rotateAroundInternalPoint(mat,blueRotCenter.x,blueRotCenter.y,deg);
blue.transform.matrix=mat;
This would lead to a building up error that would gradually move the rotating object
from its proper position. This error is more pronounced in rotateAroundInternal
method than in rotateAroundExternal method. So if you have to dynamically
retrieve the value of transform.matrix of your object, use rotateAroundExternal.
In that case, you have to translate the coordinates of the center of rotation to their
equivalents with respect to the Stage.
*/
TextFormat
TextFormat Properties | Methods | Events | Styles | Effects | Constants | Examples
Package flash.text
Class public class TextFormat
Inheritance TextFormat Inheritance Object
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9
The TextFormat class represents character formatting information. Use the TextFormat class to create specific text formatting for text fields. You can apply text formatting to both static and dynamic text fields. The properties of the TextFormat class apply to device and embedded fonts. However, for embedded fonts, bold and italic text actually require specific fonts. If you want to display bold or italic text with an embedded font, you need to embed the bold and italic variations of that font.
You must use the constructor new TextFormat() to create a TextFormat object before setting its properties. The TextFormat properties are null by default because if you don't provide values for the properties, Flash Player uses its own default formatting. The default formatting that Flash Player uses for each property (if property's value is null) is as follows:
align = "left"
blockIndent = 0
bold = false
bullet = false
color = 0x000000
font = "Times New Roman" (default font is Times on Mac OS X)
indent = 0
italic = false
kerning = false
leading = 0
leftMargin = 0
letterSpacing = 0
rightMargin = 0
size = 12
tabStops = [] (empty array)
target = "" (empty string)
underline = false
url = "" (empty string)
The default formatting for each property is also described in each property description.
View the examples
See also
flash.text.TextField.setTextFormat()
flash.text.TextField.getTextFormat()
Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties
Property Defined By
align : String
Indicates the alignment of the paragraph.
TextFormat
blockIndent : Object
Indicates the block indentation in pixels.
TextFormat
bold : Object
Specifies whether the text is boldface.
TextFormat
bullet : Object
Indicates that the text is part of a bulleted list.
TextFormat
color : Object
Indicates the color of the text.
TextFormat
Inherited constructor : Object
A reference to the class object or constructor function for a given object instance.
Object
font : String
The name of the font for text in this text format, as a string.
TextFormat
indent : Object
Indicates the indentation from the left margin to the first character in the paragraph.
TextFormat
italic : Object
Indicates whether text in this text format is italicized.
TextFormat
kerning : Object
A Boolean value that indicates whether kerning is enabled (true) or disabled (false).
TextFormat
leading : Object
An integer representing the amount of vertical space (called leading) between lines.
TextFormat
leftMargin : Object
The left margin of the paragraph, in pixels.
TextFormat
letterSpacing : Object
A number representing the amount of space that is uniformly distributed between all characters.
TextFormat
Inherited prototype : Object
[static] A reference to the prototype object of a class or function object.
Object
rightMargin : Object
The right margin of the paragraph, in pixels.
TextFormat
size : Object
The point size of text in this text format.
TextFormat
tabStops : Array
Specifies custom tab stops as an array of non-negative integers.
TextFormat
target : String
Indicates the target window where the hyperlink is displayed.
TextFormat
underline : Object
Indicates whether the text that uses this text format is underlined (true) or not (false).
TextFormat
url : String
Indicates the target URL for the text in this text format.
TextFormat
Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods
Method Defined By
TextFormat(font:String = null, size:Object = null, color:Object = null, bold:Object = null, italic:Object = null, underline:Object = null, url:String = null, target:String = null, align:String = null, leftMargin:Object = null, rightMargin:Object = null, indent:Object = null, leading:Object = null)
Creates a TextFormat object with the specified properties.
TextFormat
Inherited
hasOwnProperty(name:String):Boolean
Indicates whether an object has a specified property defined.
Object
Inherited
isPrototypeOf(theClass:Object):Boolean
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
Inherited
propertyIsEnumerable(name:String):Boolean
Indicates whether the specified property exists and is enumerable.
Object
Inherited
setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void
Sets the availability of a dynamic property for loop operations.
Object
Inherited
toString():String
Returns the string representation of the specified object.
Object
Inherited
valueOf():Object
Returns the primitive value of the specified object.
Object
Property Detail
align property
align:String [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the alignment of the paragraph. Valid values are TextFormatAlign constants.
The default value is TextFormatAlign.LEFT.
Implementation
public function get align():String
public function set align(value:String):void
Throws
ArgumentError — The align specified is not a member of flash.text.TextFormatAlign.
See also
flash.text.TextFormatAlign
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
blockIndent property
blockIndent:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the block indentation in pixels. Block indentation is applied to an entire block of text; that is, to all lines of the text. In contrast, normal indentation (TextFormat.indent) affects only the first line of each paragraph. If this property is null, the TextFormat object does not specify block indentation (block indentation is 0).
Implementation
public function get blockIndent():Object
public function set blockIndent(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
bold property
bold:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Specifies whether the text is boldface. The default value is null, which means no boldface is used. If the value is true, then the text is boldface.
Implementation
public function get bold():Object
public function set bold(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
bullet property
bullet:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates that the text is part of a bulleted list. In a bulleted list, each paragraph of text is indented. To the left of the first line of each paragraph, a bullet symbol is displayed. The default value is null, which means no bulleted list is used.
Implementation
public function get bullet():Object
public function set bullet(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
color property
color:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the color of the text. A number containing three 8-bit RGB components; for example, 0xFF0000 is red, and 0x00FF00 is green. The default value is null, which means that Flash Player uses the color black (0x000000).
Implementation
public function get color():Object
public function set color(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
font property
font:String [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
The name of the font for text in this text format, as a string. The default value is null, which means that Flash Player uses Times New Roman font for the text.
Implementation
public function get font():String
public function set font(value:String):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
indent property
indent:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the indentation from the left margin to the first character in the paragraph. The default value is null, which indicates that no indentation is used.
Implementation
public function get indent():Object
public function set indent(value:Object):void
See also
flash.text.TextFormat.blockIndent
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
italic property
italic:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates whether text in this text format is italicized. The default value is null, which means no italics are used.
Implementation
public function get italic():Object
public function set italic(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
kerning property
kerning:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
A Boolean value that indicates whether kerning is enabled (true) or disabled (false). Kerning adjusts the pixels between certain character pairs to improve readability, and should be used only when necessary, such as with headings in large fonts. Kerning is supported for embedded fonts only.
Certain fonts such as Verdana and monospaced fonts, such as Courier New, do not support kerning.
The default value is null, which means that kerning is not enabled.
Implementation
public function get kerning():Object
public function set kerning(value:Object):void
leading property
leading:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
An integer representing the amount of vertical space (called leading) between lines. The default value is null, which indicates that the amount of leading used is 0.
Implementation
public function get leading():Object
public function set leading(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
leftMargin property
leftMargin:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
The left margin of the paragraph, in pixels. The default value is null, which indicates that the left margin is 0 pixels.
Implementation
public function get leftMargin():Object
public function set leftMargin(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
letterSpacing property
letterSpacing:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
A number representing the amount of space that is uniformly distributed between all characters. The value specifies the number of pixels that are added to the advance after each character. The default value is null, which means that 0 pixels of letter spacing is used. You can use decimal values such as 1.75.
Implementation
public function get letterSpacing():Object
public function set letterSpacing(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
rightMargin property
rightMargin:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
The right margin of the paragraph, in pixels. The default value is null, which indicates that the right margin is 0 pixels.
Implementation
public function get rightMargin():Object
public function set rightMargin(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
size property
size:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
The point size of text in this text format. The default value is null, which means that a point size of 12 is used.
Implementation
public function get size():Object
public function set size(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
tabStops property
tabStops:Array [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Specifies custom tab stops as an array of non-negative integers. Each tab stop is specified in pixels. If custom tab stops are not specified (null), the default tab stop is 4 (average character width).
Implementation
public function get tabStops():Array
public function set tabStops(value:Array):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
target property
target:String [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the target window where the hyperlink is displayed. If the target window is an empty string, the text is displayed in the default target window _self. You can choose a custom name or one of the following four names: _self specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window. If the TextFormat.url property is an empty string or null, you can get or set this property, but the property will have no effect.
Implementation
public function get target():String
public function set target(value:String):void
See also
flash.text.TextFormat.url
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
underline property
underline:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates whether the text that uses this text format is underlined (true) or not (false). This underlining is similar to that produced by the tag, but the latter is not true underlining, because it does not skip descenders correctly. The default value is null, which indicates that underlining is not used.
Implementation
public function get underline():Object
public function set underline(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
url property
url:String [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the target URL for the text in this text format. If the url property is an empty string, the text does not have a hyperlink. The default value is null, which indicates that the text does not have a hyperlink.
Note: The text with the assigned text format must be set with the htmlText property for the hyperlink to work.
Implementation
public function get url():String
public function set url(value:String):void
See also
flash.text.TextField.htmlText
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
Constructor Detail
TextFormat () Constructor
public function TextFormat(font:String = null, size:Object = null, color:Object = null, bold:Object = null, italic:Object = null, underline:Object = null, url:String = null, target:String = null, align:String = null, leftMargin:Object = null, rightMargin:Object = null, indent:Object = null, leading:Object = null)
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Creates a TextFormat object with the specified properties. You can then change the properties of the TextFormat object to change the formatting of text fields.
Any parameter may be set to null to indicate that it is not defined. All of the parameters are optional; any omitted parameters are treated as null.
Parameters
font:String (default = null) — The name of a font for text as a string.
size:Object (default = null) — An integer that indicates the point size.
color:Object (default = null) — The color of text using this text format. A number containing three 8-bit RGB components; for example, 0xFF0000 is red, and 0x00FF00 is green.
bold:Object (default = null) — A Boolean value that indicates whether the text is boldface.
italic:Object (default = null) — A Boolean value that indicates whether the text is italicized.
underline:Object (default = null) — A Boolean value that indicates whether the text is underlined.
url:String (default = null) — The URL to which the text in this text format hyperlinks. If url is an empty string, the text does not have a hyperlink.
target:String (default = null) — The target window where the hyperlink is displayed. If the target window is an empty string, the text is displayed in the default target window _self. If the url parameter is set to an empty string or to the value null, you can get or set this property, but the property will have no effect.
align:String (default = null) — The alignment of the paragraph, as a TextFormatAlign value.
leftMargin:Object (default = null) — Indicates the left margin of the paragraph, in pixels.
rightMargin:Object (default = null) — Indicates the right margin of the paragraph, in pixels.
indent:Object (default = null) — An integer that indicates the indentation from the left margin to the first character in the paragraph.
leading:Object (default = null) — A number that indicates the amount of leading vertical space between lines.
Example
In the following example, a user can select different text formatting options from a list that is applied to the content of another text field. If the user clicks on the text field's content, the formatting reverts to the default (original) format.
The formatTextField text field lists all the TextField class property options (with the exception of kerning) in a separate line. When a user clicks a line in the formatTextField text field, the formatTextFieldClickHandler() method is triggered.
The formatTextFieldClickHandler() method calls the TextField.getLineIndexAtPoint() method to get the index of the line that was clicked, and then calls the TextField.getLineText() method to get the content of the line. The switch statement checks the content of the line and sets a property of the newformat TextFormat object accordingly. The setTextFormat() method then sets the text format of the contentTextField text field to the new format. By clicking different formatTextField lines, a user can apply a different formatting to the contentTextField text field. (The tab setting is an array that defines a separate tab stop for each tab in the line.) If the url or target line is selected, the user must click the contentTextField text field to activate the link and display the content of the target URL (Flex home page). The default value of the target property is "_self", which means that the content is displayed in the current window if the user selects the url line. For the target property to work, a URL must be set already in the url property.
If a user clicks the contentTextField text field, the contentTextFieldClickHandler() method is triggered, which sets the field's format and the newFormat TextFormat object to the default (original) format of the text field. This clears all the formatting changes that the user made.
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.events.MouseEvent;
import flash.text.TextFormatAlign;
public class TextFormat_constructorExample extends Sprite {
private var contentTextField:TextField = new TextField();
private var formatTextField:TextField = new TextField();
private var newFormat:TextFormat = new TextFormat();
public function TextFormat_constructorExample() {
contentTextField.x = 10;
contentTextField.y = 10;
contentTextField.background = true;
contentTextField.border = true;
contentTextField.multiline = true;
contentTextField.wordWrap = true;
contentTextField.selectable = false;
contentTextField.width = 250;
contentTextField.height = 120;
contentTextField.htmlText = "
" + "\tTab One" + "\tTab Two
";
formatTextField.x = 10;
formatTextField.y = 140;
formatTextField.background = true;
formatTextField.border = true;
formatTextField.autoSize = TextFieldAutoSize.LEFT;
formatTextField.text = "align: right\n" + "blockIndent: 10 pixels\n" + "bold:\n" + "bullet:\n" + "color: red\n"
+ "font: Arial\n" + "indent: 20 pixels\n" + "italic:\n" + "leading: 5 spaces\n"
+ "leftMargin: 20 pixels\n" + "letterSpacing: 4 pixels\n" + "rightMargin: 20 pixels\n"
+ "size: 16 point\n" + "target: new window\n" + "tabStops: 50 and 150 pixel\n"
+ "underline:\n" + "url: Adobe Flex page\n";
formatTextField.addEventListener(MouseEvent.CLICK, formatTextFieldClickHandler);
contentTextField.addEventListener(MouseEvent.CLICK, contentTextFieldClickHandler);
this.addChild(contentTextField);
this.addChild(formatTextField);
}
private function formatTextFieldClickHandler(e:MouseEvent):void {
var value:String= "";
var i:uint = 0;
var index:int = formatTextField.getLineIndexAtPoint(e.localX, e.localY);
var line:String = formatTextField.getLineText(index);;
line = line.substr(0, (line.indexOf(":")));
switch(line) {
case "align":
newFormat.align = TextFormatAlign.RIGHT;
break;
case "blockIndent":
newFormat.blockIndent = 10;
break;
case "bold":
newFormat.bold = true;
break;
case "bullet":
newFormat.bullet = true;
break;
case "color":
newFormat.color = 0xFF0000;
break;
case "font":
newFormat.font = "Arial";
break;
case "indent":
newFormat.indent = 20;
break;
case "italic":
newFormat.italic = true;
break;
case "leading":
newFormat.leading = 5;
break;
case "leftMargin":
newFormat.leftMargin = 20;
break;
case "letterSpacing":
newFormat.letterSpacing = 4;
break;
case "rightMargin":
newFormat.rightMargin = 20;
break;
case "size":
newFormat.size = 16;
break;
case "tabStops":
newFormat.tabStops = [50, 150];
break;
case "target":
newFormat.url = "http://www.adobe.com/products/flex/";
newFormat.target = "_blank";
break;
case "underline":
newFormat.underline = true;
break;
case "url":
newFormat.url = "http://www.adobe.com/products/flex/";
break;
}
contentTextField.setTextFormat(newFormat);
}
private function contentTextFieldClickHandler(e:MouseEvent):void {
contentTextField.setTextFormat(contentTextField.defaultTextFormat);
newFormat = contentTextField.defaultTextFormat;
}
}
}
Examples How to use examples
TextFormatExample.as
The following example creates the TextFieldExample class to display a text message with the default location (x = 0, y = 0). This is accomplished using the following steps:
1. A property label of type TextField is created.
2. The class constructor calls the function configureLabel()
3. The configureLabel() function first creates a new TextField object and assigns it to label then sets its parameters to
* Left-justify the text field
* Enable the background fill
* Enable the border.
4. Next, configureLable() creates the local variable, format, and assigns it to a new TextFormat instance with its parameters set to
* Font type = Verdana
* Font Color = solid red
* Font size = 10
* Font underline = true.
5. The label's defaultTextFormat property is set to format, and the label instance is added to the display list, which initially displays a text field with no text (as tiny box with a white background) on the stage.
6. Finally (back in the constructor), the label's text is then set to display "Hello World and welcome to the show", at coordinates x = 0, y = 0 by calling setLabel().
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class TextFormatExample extends Sprite {
private var label:TextField;
public function TextFormatExample() {
configureLabel();
setLabel("Hello World and welcome to the show");
}
public function setLabel(str:String):void {
label.text = str;
}
private function configureLabel():void {
label = new TextField();
label.autoSize = TextFieldAutoSize.LEFT;
label.background = true;
label.border = true;
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0xFF0000;
format.size = 10;
format.underline = true;
label.defaultTextFormat = format;
addChild(label);
}
}
}
Package flash.text
Class public class TextFormat
Inheritance TextFormat Inheritance Object
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9
The TextFormat class represents character formatting information. Use the TextFormat class to create specific text formatting for text fields. You can apply text formatting to both static and dynamic text fields. The properties of the TextFormat class apply to device and embedded fonts. However, for embedded fonts, bold and italic text actually require specific fonts. If you want to display bold or italic text with an embedded font, you need to embed the bold and italic variations of that font.
You must use the constructor new TextFormat() to create a TextFormat object before setting its properties. The TextFormat properties are null by default because if you don't provide values for the properties, Flash Player uses its own default formatting. The default formatting that Flash Player uses for each property (if property's value is null) is as follows:
align = "left"
blockIndent = 0
bold = false
bullet = false
color = 0x000000
font = "Times New Roman" (default font is Times on Mac OS X)
indent = 0
italic = false
kerning = false
leading = 0
leftMargin = 0
letterSpacing = 0
rightMargin = 0
size = 12
tabStops = [] (empty array)
target = "" (empty string)
underline = false
url = "" (empty string)
The default formatting for each property is also described in each property description.
View the examples
See also
flash.text.TextField.setTextFormat()
flash.text.TextField.getTextFormat()
Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties
Property Defined By
align : String
Indicates the alignment of the paragraph.
TextFormat
blockIndent : Object
Indicates the block indentation in pixels.
TextFormat
bold : Object
Specifies whether the text is boldface.
TextFormat
bullet : Object
Indicates that the text is part of a bulleted list.
TextFormat
color : Object
Indicates the color of the text.
TextFormat
Inherited constructor : Object
A reference to the class object or constructor function for a given object instance.
Object
font : String
The name of the font for text in this text format, as a string.
TextFormat
indent : Object
Indicates the indentation from the left margin to the first character in the paragraph.
TextFormat
italic : Object
Indicates whether text in this text format is italicized.
TextFormat
kerning : Object
A Boolean value that indicates whether kerning is enabled (true) or disabled (false).
TextFormat
leading : Object
An integer representing the amount of vertical space (called leading) between lines.
TextFormat
leftMargin : Object
The left margin of the paragraph, in pixels.
TextFormat
letterSpacing : Object
A number representing the amount of space that is uniformly distributed between all characters.
TextFormat
Inherited prototype : Object
[static] A reference to the prototype object of a class or function object.
Object
rightMargin : Object
The right margin of the paragraph, in pixels.
TextFormat
size : Object
The point size of text in this text format.
TextFormat
tabStops : Array
Specifies custom tab stops as an array of non-negative integers.
TextFormat
target : String
Indicates the target window where the hyperlink is displayed.
TextFormat
underline : Object
Indicates whether the text that uses this text format is underlined (true) or not (false).
TextFormat
url : String
Indicates the target URL for the text in this text format.
TextFormat
Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods
Method Defined By
TextFormat(font:String = null, size:Object = null, color:Object = null, bold:Object = null, italic:Object = null, underline:Object = null, url:String = null, target:String = null, align:String = null, leftMargin:Object = null, rightMargin:Object = null, indent:Object = null, leading:Object = null)
Creates a TextFormat object with the specified properties.
TextFormat
Inherited
hasOwnProperty(name:String):Boolean
Indicates whether an object has a specified property defined.
Object
Inherited
isPrototypeOf(theClass:Object):Boolean
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
Inherited
propertyIsEnumerable(name:String):Boolean
Indicates whether the specified property exists and is enumerable.
Object
Inherited
setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void
Sets the availability of a dynamic property for loop operations.
Object
Inherited
toString():String
Returns the string representation of the specified object.
Object
Inherited
valueOf():Object
Returns the primitive value of the specified object.
Object
Property Detail
align property
align:String [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the alignment of the paragraph. Valid values are TextFormatAlign constants.
The default value is TextFormatAlign.LEFT.
Implementation
public function get align():String
public function set align(value:String):void
Throws
ArgumentError — The align specified is not a member of flash.text.TextFormatAlign.
See also
flash.text.TextFormatAlign
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
blockIndent property
blockIndent:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the block indentation in pixels. Block indentation is applied to an entire block of text; that is, to all lines of the text. In contrast, normal indentation (TextFormat.indent) affects only the first line of each paragraph. If this property is null, the TextFormat object does not specify block indentation (block indentation is 0).
Implementation
public function get blockIndent():Object
public function set blockIndent(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
bold property
bold:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Specifies whether the text is boldface. The default value is null, which means no boldface is used. If the value is true, then the text is boldface.
Implementation
public function get bold():Object
public function set bold(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
bullet property
bullet:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates that the text is part of a bulleted list. In a bulleted list, each paragraph of text is indented. To the left of the first line of each paragraph, a bullet symbol is displayed. The default value is null, which means no bulleted list is used.
Implementation
public function get bullet():Object
public function set bullet(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
color property
color:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the color of the text. A number containing three 8-bit RGB components; for example, 0xFF0000 is red, and 0x00FF00 is green. The default value is null, which means that Flash Player uses the color black (0x000000).
Implementation
public function get color():Object
public function set color(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
font property
font:String [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
The name of the font for text in this text format, as a string. The default value is null, which means that Flash Player uses Times New Roman font for the text.
Implementation
public function get font():String
public function set font(value:String):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
indent property
indent:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the indentation from the left margin to the first character in the paragraph. The default value is null, which indicates that no indentation is used.
Implementation
public function get indent():Object
public function set indent(value:Object):void
See also
flash.text.TextFormat.blockIndent
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
italic property
italic:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates whether text in this text format is italicized. The default value is null, which means no italics are used.
Implementation
public function get italic():Object
public function set italic(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
kerning property
kerning:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
A Boolean value that indicates whether kerning is enabled (true) or disabled (false). Kerning adjusts the pixels between certain character pairs to improve readability, and should be used only when necessary, such as with headings in large fonts. Kerning is supported for embedded fonts only.
Certain fonts such as Verdana and monospaced fonts, such as Courier New, do not support kerning.
The default value is null, which means that kerning is not enabled.
Implementation
public function get kerning():Object
public function set kerning(value:Object):void
leading property
leading:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
An integer representing the amount of vertical space (called leading) between lines. The default value is null, which indicates that the amount of leading used is 0.
Implementation
public function get leading():Object
public function set leading(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
leftMargin property
leftMargin:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
The left margin of the paragraph, in pixels. The default value is null, which indicates that the left margin is 0 pixels.
Implementation
public function get leftMargin():Object
public function set leftMargin(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
letterSpacing property
letterSpacing:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
A number representing the amount of space that is uniformly distributed between all characters. The value specifies the number of pixels that are added to the advance after each character. The default value is null, which means that 0 pixels of letter spacing is used. You can use decimal values such as 1.75.
Implementation
public function get letterSpacing():Object
public function set letterSpacing(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
rightMargin property
rightMargin:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
The right margin of the paragraph, in pixels. The default value is null, which indicates that the right margin is 0 pixels.
Implementation
public function get rightMargin():Object
public function set rightMargin(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
size property
size:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
The point size of text in this text format. The default value is null, which means that a point size of 12 is used.
Implementation
public function get size():Object
public function set size(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
tabStops property
tabStops:Array [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Specifies custom tab stops as an array of non-negative integers. Each tab stop is specified in pixels. If custom tab stops are not specified (null), the default tab stop is 4 (average character width).
Implementation
public function get tabStops():Array
public function set tabStops(value:Array):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
target property
target:String [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the target window where the hyperlink is displayed. If the target window is an empty string, the text is displayed in the default target window _self. You can choose a custom name or one of the following four names: _self specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window. If the TextFormat.url property is an empty string or null, you can get or set this property, but the property will have no effect.
Implementation
public function get target():String
public function set target(value:String):void
See also
flash.text.TextFormat.url
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
underline property
underline:Object [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates whether the text that uses this text format is underlined (true) or not (false). This underlining is similar to that produced by the tag, but the latter is not true underlining, because it does not skip descenders correctly. The default value is null, which indicates that underlining is not used.
Implementation
public function get underline():Object
public function set underline(value:Object):void
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
url property
url:String [read-write]
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Indicates the target URL for the text in this text format. If the url property is an empty string, the text does not have a hyperlink. The default value is null, which indicates that the text does not have a hyperlink.
Note: The text with the assigned text format must be set with the htmlText property for the hyperlink to work.
Implementation
public function get url():String
public function set url(value:String):void
See also
flash.text.TextField.htmlText
Example
How to use examples
Please see the TextFormat() constructor example for an illustration of how to use this property.
Constructor Detail
TextFormat () Constructor
public function TextFormat(font:String = null, size:Object = null, color:Object = null, bold:Object = null, italic:Object = null, underline:Object = null, url:String = null, target:String = null, align:String = null, leftMargin:Object = null, rightMargin:Object = null, indent:Object = null, leading:Object = null)
Language Version : ActionScript 3.0
Runtime Versions : AIR 1.0, Flash Player 9.
Creates a TextFormat object with the specified properties. You can then change the properties of the TextFormat object to change the formatting of text fields.
Any parameter may be set to null to indicate that it is not defined. All of the parameters are optional; any omitted parameters are treated as null.
Parameters
font:String (default = null) — The name of a font for text as a string.
size:Object (default = null) — An integer that indicates the point size.
color:Object (default = null) — The color of text using this text format. A number containing three 8-bit RGB components; for example, 0xFF0000 is red, and 0x00FF00 is green.
bold:Object (default = null) — A Boolean value that indicates whether the text is boldface.
italic:Object (default = null) — A Boolean value that indicates whether the text is italicized.
underline:Object (default = null) — A Boolean value that indicates whether the text is underlined.
url:String (default = null) — The URL to which the text in this text format hyperlinks. If url is an empty string, the text does not have a hyperlink.
target:String (default = null) — The target window where the hyperlink is displayed. If the target window is an empty string, the text is displayed in the default target window _self. If the url parameter is set to an empty string or to the value null, you can get or set this property, but the property will have no effect.
align:String (default = null) — The alignment of the paragraph, as a TextFormatAlign value.
leftMargin:Object (default = null) — Indicates the left margin of the paragraph, in pixels.
rightMargin:Object (default = null) — Indicates the right margin of the paragraph, in pixels.
indent:Object (default = null) — An integer that indicates the indentation from the left margin to the first character in the paragraph.
leading:Object (default = null) — A number that indicates the amount of leading vertical space between lines.
Example
In the following example, a user can select different text formatting options from a list that is applied to the content of another text field. If the user clicks on the text field's content, the formatting reverts to the default (original) format.
The formatTextField text field lists all the TextField class property options (with the exception of kerning) in a separate line. When a user clicks a line in the formatTextField text field, the formatTextFieldClickHandler() method is triggered.
The formatTextFieldClickHandler() method calls the TextField.getLineIndexAtPoint() method to get the index of the line that was clicked, and then calls the TextField.getLineText() method to get the content of the line. The switch statement checks the content of the line and sets a property of the newformat TextFormat object accordingly. The setTextFormat() method then sets the text format of the contentTextField text field to the new format. By clicking different formatTextField lines, a user can apply a different formatting to the contentTextField text field. (The tab setting is an array that defines a separate tab stop for each tab in the line.) If the url or target line is selected, the user must click the contentTextField text field to activate the link and display the content of the target URL (Flex home page). The default value of the target property is "_self", which means that the content is displayed in the current window if the user selects the url line. For the target property to work, a URL must be set already in the url property.
If a user clicks the contentTextField text field, the contentTextFieldClickHandler() method is triggered, which sets the field's format and the newFormat TextFormat object to the default (original) format of the text field. This clears all the formatting changes that the user made.
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.events.MouseEvent;
import flash.text.TextFormatAlign;
public class TextFormat_constructorExample extends Sprite {
private var contentTextField:TextField = new TextField();
private var formatTextField:TextField = new TextField();
private var newFormat:TextFormat = new TextFormat();
public function TextFormat_constructorExample() {
contentTextField.x = 10;
contentTextField.y = 10;
contentTextField.background = true;
contentTextField.border = true;
contentTextField.multiline = true;
contentTextField.wordWrap = true;
contentTextField.selectable = false;
contentTextField.width = 250;
contentTextField.height = 120;
contentTextField.htmlText = "
The TextFormat class represents character formatting "
+ "information. Use the TextFormat class to create specific text formatting "
+ "for text fields." +
"
" + "\tTab One" + "\tTab Two
";
formatTextField.x = 10;
formatTextField.y = 140;
formatTextField.background = true;
formatTextField.border = true;
formatTextField.autoSize = TextFieldAutoSize.LEFT;
formatTextField.text = "align: right\n" + "blockIndent: 10 pixels\n" + "bold:\n" + "bullet:\n" + "color: red\n"
+ "font: Arial\n" + "indent: 20 pixels\n" + "italic:\n" + "leading: 5 spaces\n"
+ "leftMargin: 20 pixels\n" + "letterSpacing: 4 pixels\n" + "rightMargin: 20 pixels\n"
+ "size: 16 point\n" + "target: new window\n" + "tabStops: 50 and 150 pixel\n"
+ "underline:\n" + "url: Adobe Flex page\n";
formatTextField.addEventListener(MouseEvent.CLICK, formatTextFieldClickHandler);
contentTextField.addEventListener(MouseEvent.CLICK, contentTextFieldClickHandler);
this.addChild(contentTextField);
this.addChild(formatTextField);
}
private function formatTextFieldClickHandler(e:MouseEvent):void {
var value:String= "";
var i:uint = 0;
var index:int = formatTextField.getLineIndexAtPoint(e.localX, e.localY);
var line:String = formatTextField.getLineText(index);;
line = line.substr(0, (line.indexOf(":")));
switch(line) {
case "align":
newFormat.align = TextFormatAlign.RIGHT;
break;
case "blockIndent":
newFormat.blockIndent = 10;
break;
case "bold":
newFormat.bold = true;
break;
case "bullet":
newFormat.bullet = true;
break;
case "color":
newFormat.color = 0xFF0000;
break;
case "font":
newFormat.font = "Arial";
break;
case "indent":
newFormat.indent = 20;
break;
case "italic":
newFormat.italic = true;
break;
case "leading":
newFormat.leading = 5;
break;
case "leftMargin":
newFormat.leftMargin = 20;
break;
case "letterSpacing":
newFormat.letterSpacing = 4;
break;
case "rightMargin":
newFormat.rightMargin = 20;
break;
case "size":
newFormat.size = 16;
break;
case "tabStops":
newFormat.tabStops = [50, 150];
break;
case "target":
newFormat.url = "http://www.adobe.com/products/flex/";
newFormat.target = "_blank";
break;
case "underline":
newFormat.underline = true;
break;
case "url":
newFormat.url = "http://www.adobe.com/products/flex/";
break;
}
contentTextField.setTextFormat(newFormat);
}
private function contentTextFieldClickHandler(e:MouseEvent):void {
contentTextField.setTextFormat(contentTextField.defaultTextFormat);
newFormat = contentTextField.defaultTextFormat;
}
}
}
Examples How to use examples
TextFormatExample.as
The following example creates the TextFieldExample class to display a text message with the default location (x = 0, y = 0). This is accomplished using the following steps:
1. A property label of type TextField is created.
2. The class constructor calls the function configureLabel()
3. The configureLabel() function first creates a new TextField object and assigns it to label then sets its parameters to
* Left-justify the text field
* Enable the background fill
* Enable the border.
4. Next, configureLable() creates the local variable, format, and assigns it to a new TextFormat instance with its parameters set to
* Font type = Verdana
* Font Color = solid red
* Font size = 10
* Font underline = true.
5. The label's defaultTextFormat property is set to format, and the label instance is added to the display list, which initially displays a text field with no text (as tiny box with a white background) on the stage.
6. Finally (back in the constructor), the label's text is then set to display "Hello World and welcome to the show", at coordinates x = 0, y = 0 by calling setLabel().
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class TextFormatExample extends Sprite {
private var label:TextField;
public function TextFormatExample() {
configureLabel();
setLabel("Hello World and welcome to the show");
}
public function setLabel(str:String):void {
label.text = str;
}
private function configureLabel():void {
label = new TextField();
label.autoSize = TextFieldAutoSize.LEFT;
label.background = true;
label.border = true;
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0xFF0000;
format.size = 10;
format.underline = true;
label.defaultTextFormat = format;
addChild(label);
}
}
}
Wednesday, April 21, 2010
Attaching a Bitmap – AS3
In ActionScript 3.0 movieclips and bitmaps are not attached or created like this – everything is created with the new keyword. Also, a BitmapData object should be dropped into a new Bitmap, which can be added to the stage with the all-important addChild() method.
Since a library bitmap inherits from BitmapData, you now set the class of the bitmap its Linkage Properties in Flash CS3, instantiate it and wrap it in a Bitmap object that you add to the stage:
Attaching a bitmap in AS3
Where ‘Butterfly’ refers to the bitmap library item you’ve given the class definition ‘Butterfly’. The Base class is generated automatically. These five lines of code can be shortened to one, but is less readable:
var img = addChild(new Bitmap(new Butterfly(0,0)));
Note that in Flex Builder, unlike Flash CS3, you would embed an image using the embed meta tag, associating it with a variable, instead of its Linkage Properties dialog:
[Embed(source='image.jpg')] public var Butterfly:Class;
Building SWFs in Flex Builder is a whole different topic – so stay tuned!
Since a library bitmap inherits from BitmapData, you now set the class of the bitmap its Linkage Properties in Flash CS3, instantiate it and wrap it in a Bitmap object that you add to the stage:
Attaching a bitmap in AS3
Where ‘Butterfly’ refers to the bitmap library item you’ve given the class definition ‘Butterfly’. The Base class is generated automatically. These five lines of code can be shortened to one, but is less readable:
var img = addChild(new Bitmap(new Butterfly(0,0)));
Note that in Flex Builder, unlike Flash CS3, you would embed an image using the embed meta tag, associating it with a variable, instead of its Linkage Properties dialog:
[Embed(source='image.jpg')] public var Butterfly:Class;
Building SWFs in Flex Builder is a whole different topic – so stay tuned!
Capturing text input
Capturing text input
By default, a text field's type property is set to dynamic. If you set the type property to input using the TextFieldType class, you can collect user input and save the value for use in other parts of your application. Input text fields are useful for forms and any application that wants the user to define a text value for use elsewhere in the program.
For example, the following code creates an input text field called myTextBox. As the user enters text in the field, the textInput event is triggered. An event handler called textInputCapture captures the string of text entered and assigns it a variable. Flash Player displays the new text in another text field, called myOutputBox.
package
{
import flash.display.Sprite;
import flash.display.Stage;
import flash.text.*;
import flash.events.*;
public class CaptureUserInput extends Sprite
{
private var myTextBox:TextField = new TextField();
private var myOutputBox:TextField = new TextField();
private var myText:String = "Type your text here.";
public function CaptureUserInput()
{
captureText();
}
public function captureText():void
{
myTextBox.type = TextFieldType.INPUT;
myTextBox.background = true;
addChild(myTextBox);
myTextBox.text = myText;
myTextBox.addEventListener(TextEvent.TEXT_INPUT, textInputCapture);
}
public function textInputCapture(event:TextEvent):void
{
var str:String = myTextBox.text;
createOutputBox(str);
}
public function createOutputBox(str:String):void
{
myOutputBox.background = true;
myOutputBox.x = 200;
addChild(myOutputBox);
myOutputBox.text = str;
}
}
}
By default, a text field's type property is set to dynamic. If you set the type property to input using the TextFieldType class, you can collect user input and save the value for use in other parts of your application. Input text fields are useful for forms and any application that wants the user to define a text value for use elsewhere in the program.
For example, the following code creates an input text field called myTextBox. As the user enters text in the field, the textInput event is triggered. An event handler called textInputCapture captures the string of text entered and assigns it a variable. Flash Player displays the new text in another text field, called myOutputBox.
package
{
import flash.display.Sprite;
import flash.display.Stage;
import flash.text.*;
import flash.events.*;
public class CaptureUserInput extends Sprite
{
private var myTextBox:TextField = new TextField();
private var myOutputBox:TextField = new TextField();
private var myText:String = "Type your text here.";
public function CaptureUserInput()
{
captureText();
}
public function captureText():void
{
myTextBox.type = TextFieldType.INPUT;
myTextBox.background = true;
addChild(myTextBox);
myTextBox.text = myText;
myTextBox.addEventListener(TextEvent.TEXT_INPUT, textInputCapture);
}
public function textInputCapture(event:TextEvent):void
{
var str:String = myTextBox.text;
createOutputBox(str);
}
public function createOutputBox(str:String):void
{
myOutputBox.background = true;
myOutputBox.x = 200;
addChild(myOutputBox);
myOutputBox.text = str;
}
}
}
Subscribe to:
Posts (Atom)