So far in this series we have looked at setting up flashdevelop, starting a project, adding some text with an embedded font, and changing the way the text looks.
In this final section we will be looking at buttons and event handling.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | package { import flash.display.Sprite; /** * ... * @author Rageace */ public class Main extends Sprite { public function Main():void { //Create a new instance of a Sprite to act as the button graphic. var button0:Sprite; button0 = new Sprite(); //Set the color of the button graphic button0.graphics.beginFill(0x0066CC); //Set the X,Y, Width, and Height of the button graphic button0.graphics.drawRect(50, 0, 20, 20); //Apply the fill button0.graphics.endFill(); //Add useHandCursor, buttonMode, and mouseChildren if required button0.useHandCursor = true; button0.buttonMode = true; //Add Button Sprite to stage addChild(button0); } } } |
The following code builds on the examples we have covered previously.
It adds a blue button to the stage.
You should go through the code and check you understand it. It is all commented and should be easy to understand.
Using your new found knowledge I give you following task – create 3 buttons – button0, button1 and button2, of 3 different colours and put them on the stage.
Once you’ve given it a go have a look at my solution.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | package { import flash.display.Sprite; /** * ... * @author Rageace */ public class Main extends Sprite { public function Main():void { //Create a new instance of a Sprite to act as the button graphic. var button0:Sprite; var button1:Sprite; var button2:Sprite; button0 = new Sprite(); button1 = new Sprite(); button2 = new Sprite(); //Set the color of the button graphic button0.graphics.beginFill(0x0066CC); button1.graphics.beginFill(0xFF0000); button2.graphics.beginFill(0x009900); //Set the X,Y, Width, and Height of the button graphic button0.graphics.drawRect(50, 0, 20, 20); button1.graphics.drawRect(70, 0, 20, 20); button2.graphics.drawRect(90, 0, 20, 20); //Apply the fill button0.graphics.endFill(); button1.graphics.endFill(); button2.graphics.endFill(); //Add useHandCursor, buttonMode, and mouseChildren if required button0.useHandCursor = true; button0.buttonMode = true; button1.buttonMode = true; button2.useHandCursor = true; button2.buttonMode = true; //Add Button Sprite to stage addChild(button0); addChild(button1); addChild(button2); } } } |
Event Handling
Now we want our buttons to actually do something, so we need to think about event handling.
When our buttons are pressed, or rolled over, or whatever, an event is triggered. We need to respond to this event.
Now if we have 3 buttons (as we do), a red, a green and a blue, we could create 3 different functions.
redButtonPressed, blueButtonPressed, greenButtonPressed, and when the relevant button is pressed this function is called.
//Add event listeners
button0.addEventListener(MouseEvent.MOUSE_DOWN, blueButtonPressed);
button1.addEventListener(MouseEvent.MOUSE_DOWN, redButtonPressed);
button2.addEventListener(MouseEvent.MOUSE_DOWN, greenButtonPressed);
We also need to make sure we import the mouse events, so add this to the top.
Now we create separate functions with these names which are called when the Mouse Down event occurs on the button.
{
trace("blue");
}
private function redButtonPressed(event:MouseEvent):void
{
trace("red");
}
private function greenButtonPressed(event:MouseEvent):void
{
trace("green");
}
So now lets save it and run it.
It works 
If it doesn’t work then here is my code, try and see where the code differs to spot your mistakes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | package { import flash.display.Sprite; import flash.events.MouseEvent; /** * ... * @author Rageace */ public class Main extends Sprite { public function Main():void { //Create a new instance of a Sprite to act as the button graphic. var button0:Sprite; var button1:Sprite; var button2:Sprite; button0 = new Sprite(); button1 = new Sprite(); button2 = new Sprite(); //Set the color of the button graphic button0.graphics.beginFill(0x0066CC); button1.graphics.beginFill(0xFF0000); button2.graphics.beginFill(0x009900); //Set the X,Y, Width, and Height of the button graphic button0.graphics.drawRect(50, 0, 20, 20); button1.graphics.drawRect(70, 0, 20, 20); button2.graphics.drawRect(90, 0, 20, 20); //Apply the fill button0.graphics.endFill(); button1.graphics.endFill(); button2.graphics.endFill(); //Add useHandCursor, buttonMode, and mouseChildren if required button0.useHandCursor = true; button0.buttonMode = true; button1.buttonMode = true; button2.useHandCursor = true; button2.buttonMode = true; //Add event listeners button0.addEventListener(MouseEvent.MOUSE_DOWN, blueButtonPressed); button1.addEventListener(MouseEvent.MOUSE_DOWN, redButtonPressed); button2.addEventListener(MouseEvent.MOUSE_DOWN, greenButtonPressed); //Add Button Sprite to stage addChild(button0); addChild(button1); addChild(button2); }//end main method private function blueButtonPressed(event:MouseEvent):void { trace("blue"); } private function redButtonPressed(event:MouseEvent):void { trace("red"); } private function greenButtonPressed(event:MouseEvent):void { trace("green"); } } } |
Now there is another to handle events. At the minute for each button we have a separate function dealing with the event. Notice that each of these functions receive the MouseEvent object as an argument.
This MouseEvent object holds some useful information, so we can use this to see where it came from, basically to see which button created the event.
In this final example I use a switch statement, to compare where the object came from, to the different button objects.
When we have a match, we know that must be the object that created the event.
Another thing to bear in mind here is the scope of functions and variables.
In this next example I have declared the buttons at the top, so their scope is over the whole class (scope is beyond the ‘scope’ of this tutorial, but think of it as the braces it is defined in).
Have a look at the final example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | package { import flash.display.Sprite; import flash.events.Event; import flash.text.TextFormat; import flash.text.TextField; import flash.events.MouseEvent; import flash.text.TextFieldAutoSize; /** * ... * @author James W */ public class Main extends Sprite { //Allocate 3 sprite objects private var button0:Sprite; private var button1:Sprite; private var button2:Sprite; //Allocate textformat object private var myTextFormatter:TextFormat; //allocate text field private var myTextField:TextField; public function Main():void { //Now we create a TextFormat object. //This basically represents character formatting information - it lets us make the text look pretty :) //var myTextFormatter:TextFormat = new TextFormat();//Give it an imaginative name myTextFormatter = new TextFormat(); myTextFormatter.color = 0x0066CC;//Setting the colour, myTextFormatter.size = 32;//Setting the size //Now we will create the text field myTextField = new TextField();//Imaginatively named myTextField //Remember now we are dealing with the text field, not the TextFormat object myTextField.wordWrap = true; //We want word wrap - this means that if we have too much text for the line //we will start a new line myTextField.defaultTextFormat = myTextFormatter;//Remember the text format object we made earlier? //Well now we are saying that we want this object to be used to format this text field. myTextField.autoSize = TextFieldAutoSize.LEFT;//how we want the box to autosize myTextField.text = "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.";//The text in our text field myTextField.width = 500;//The width of the text field myTextField.x = 50;//The x position of the text field myTextField.y = 50;//The y position of the text field myTextField.selectable = true;//Can we select thet text addChild(myTextField);//Add the text field /** * The following code is not part of the tutorial, but for demonstration */ //Create a new instance of a Sprite to act as the button graphic. button0 = new Sprite(); button1 = new Sprite(); button2 = new Sprite(); //Set the color of the button graphic button0.graphics.beginFill(0x0066CC); button1.graphics.beginFill(0xFF0000); button2.graphics.beginFill(0x009900); //Set the X,Y, Width, and Height of the button graphic button0.graphics.drawRect(50, 0, 20, 20); button1.graphics.drawRect(70, 0, 20, 20); button2.graphics.drawRect(90, 0, 20, 20); //Apply the fill button0.graphics.endFill(); button1.graphics.endFill(); button2.graphics.endFill(); //Add useHandCursor, buttonMode, and mouseChildren if required button0.useHandCursor = true; button0.buttonMode = true; button1.useHandCursor = true; button1.buttonMode = true; button2.useHandCursor = true; button2.buttonMode = true; //Add event listeners button0.addEventListener(MouseEvent.ROLL_OVER, buttonHandler); button1.addEventListener(MouseEvent.ROLL_OVER, buttonHandler); button2.addEventListener(MouseEvent.ROLL_OVER, buttonHandler); //Add Button Sprite to stage addChild(button0); addChild(button1); addChild(button2); }//End Main method //Define button handler private function buttonHandler(event:MouseEvent):void { ///We will use a switch block switch (event.target) { case button0 : myTextFormatter.color = 0x0066CC;//Setting the colour of the textformater object, myTextField.setTextFormat(myTextFormatter); break; case button1 : trace(1); myTextFormatter.color = 0xFF0000;//Setting the colour of the textformater object, myTextField.setTextFormat(myTextFormatter); break; case button2 : myTextFormatter.color = 0x009900;//Setting the colour of the textformater object, myTextField.setTextFormat(myTextFormatter); break; }//End switch }//endclickhandler }//End main class }//End package |
Extension
As an extension for you try and use 3 different embedded fonts, and make the buttons change the font of the text.
This concludes the series.
