AS3 example Message Box
<pageby nominor="false" comments="false"/>
Working Example
package {
import flash.display.Sprite;
import flash.text.TextField;
public class MessageBox extends Sprite {
function MessageBox():void {
var msgbox:Sprite = new Sprite();
// drawing a white rectangle
msgbox.graphics.beginFill(0xFFFFFF); // white
msgbox.graphics.drawRect(0,0,300,20);
msgbox.graphics.endFill();
// drawing a black border
msgbox.graphics.lineStyle(2, 0x000000, 100); // line thickness, line color, line alpha or transparency
msgbox.graphics.drawRect(0,0,300,20);
var textfield:TextField = new TextField()
textfield.text = "Hi there!"
addChild(msgbox)
addChild(textfield)
}
}
}
Walkthrough
package {
Mandatory package declaration
import flash.display.Sprite;
import flash.text.TextField;
Import statements. For reasons of speed, it is not very efficient to provide any program with any possible functionality. The import construct is used to import all functionalities required for the program to run... and no more than what is required for the program to run.
We are already familiar with the Sprite object. A TextField object is very similar. It is specialized in the drawing of string type of data. Any TextField objects has a property called "text". Whenever a new value is given to the object's text variable, the content of the text field gets updated.
public class MessageBox extends Sprite {
We need at least one class definition in our file. The class definition and the filename must be identical in every way (character case must match). We need to add extends Sprite to have the ability to add Sprite onto the screen. If you were to erase extends Sprite and try and compile your program, you would get an error message "Call to a possibly undefined method addChild."
function MessageBox():void {
This is the class constructor. This bits gets executed whenever the class is being instantiated. When we run the file "MessageBox.swf", we ask to instantiate the class.
var msgbox:Sprite = new Sprite();
We create a sprite object to hold the message box content, graphics and text.
// drawing a white rectangle
msgbox.graphics.beginFill(0xFFFFFF); // white
msgbox.graphics.drawRect(0,0,300,20);
msgbox.graphics.endFill();
// drawing a black border
msgbox.graphics.lineStyle(2, 0x000000, 100); // line thickness, line color, line alpha or transparency
msgbox.graphics.drawRect(0,0,300,20);
Draws a pretty box, with a white rectangle and a black border
var textfield:TextField = new TextField()
textfield.text = "Hi there!"
We need to add a textfield object for text to appear on the screen.
As we need access to the properties of TextField objects, make sure that the appropriate import statement has been added at the top of the file.
addChild(msgbox)
addChild(textfield)
For the textfield and sprite content to appear on the screen, we need to explicitly add them to the display.
}
}
}
Every parenthesis or bracket that has been opened needs to be closed
Variants
color change
Change the color of the rectangle. Color code information can be found on the page about Color Schemes and Color Codes
More text
Change the text value. Try typing a very very long paragraph. What are the problems you notice? How to fix them. Go to Google, run a search on "actionscript 3" text. Do you find any link that seems to offer the information you need? Go to Adobe livedoc, type "text" in the search box on the topright of the page. Any link that seems to offer the information you need?
Different box size
Change the size of the rectangle. What is the problem that you encounter? How easy is it to keep the white background and black border in matching positions?
Different drawing orders
Rather than this:
addChild(msgbox)
addChild(textfield)
Type:
addChild(textfield)
addChild(msgbox)
What has become of the textfield? Where did it disappear?
Moving the box and text together
Replace these lines:
addChild(msgbox)
addChild(textfield)
With these:
msgbox.x = 50;
msgbox.y = 50;
addChild(msgbox)
addChild(textfield)
x and y are properties of the sprite object that store the current x and y position of the object on the screen. When a new value is assigned to the object's x or y, the position is being updated.
The text is completely out of the box. Why?
Try this:
msgbox.addChild(textfield)
msgbox.x = 50;
msgbox.y = 50;
addChild(msgbox)
The text is now inside the message box. It will remain inside whatever value we give to x and y. Why?
Challenges
A function to create the message box graphics
When experimenting with variants, we noticed that it was a bit tedious to have to modify the size values for both the background rectangle and the border rectangle. There is always the risk of updating one while forgetting to update the other. Of course, this is rapidly noticed. Still, you need to change the code, compile, check out the resulting .swf anytime you make an error. This causes some delays. Imagine if you had a screen full of such messagebox, all of different dimensions!
How could you make it easier to update the size of the rectangle box (background and border)?
Read the page on AS3 Instances Functions. In view of the information presented there, how could you reorganize your code so that you the message box can be resized with a single command?
Box background drawn using the TexField properties and methods
Have a look at the TextField class documentation at adobe livedocs, You will notice that listed there are "public properties" and "public functions".
We used a sprite object to draw a border around the text. A problem though is that this rectangle won't change of size is the text is to occupy a space larger than the width of the box.
How would you achieve the same effect using TextField objects built-in properties and functions? Hint, run a search on the page (ctl-F) and look for the words "border", then the word "background", and perhaps the word "wordwrap".