Ok, the rubber is nothing special. For simplicity, I'm just going to make it a white, thick line (my background is white, so it'll give the effect of it being a rubber). I'll also provide code for a complete eraser!
First off, I'm going to paste last tutorial's code in, so you know where we're starting from!
var startDraw:Boolean = false;
var drawWidth:Number = 20;
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
stage.addEventListener(Event.ENTER_FRAME, checkDraw);
function startDrawing(e:MouseEvent):void{
graphics.moveTo(mouseX, mouseY);
startDraw = true;
}
function stopDrawing(e:MouseEvent):void{
startDraw = false;
}
function checkDraw(e:Event):void{
if(startDraw == true){
graphics.lineStyle(drawWidth, 0x000000);
graphics.lineTo(mouseX, mouseY);
}
}
Yum. Now, we need to add a new variable to check whether the rubber is active... OR NOT?! Simply add this to the code, ideally where your variables are defined:
var rubber:Boolean = false;
Yay. Anyway, we now have to decide how you want to access this sexy rubber of yours. Just to add a little spice to this, we're going to use the keyboard to access the rubber. So, let's add two new event listeners!
stage.addEventListener(KeyboardEvent.KEY_DOWN, startRubber);
stage.addEventListener(KeyboardEvent.KEY_UP, stopRubber);
Oh baby. I defined two event listeners (and attached them to the stage), one for when a key on the keyboard is pressed down, and the other for when it is released. In other words, you have to hold down a keyboard key to access the rubber! Now we need to get the functions for these two rolling. For this example, I'm going to be using the space bar to access the rubber, which is keycode 32!
function startRubber(Event:KeyboardEvent):void{
if(Event.keyCode == 32){
rubber = true;
}
}
function stopRubber(Event:KeyboardEvent):void{
if(Event.keyCode == 32){
rubber = false;
}
}
Just like with the mouse functions, we have one for true, and one for false! Now, instead of creating a new event listener to check the rubber, we can just use the same one we used for the mouse. Simply edit the checkDraw function as follows:
function checkDraw(e:Event):void{
if(startDraw == true){
if(rubber == false){
graphics.lineStyle(drawWidth, 0x000000);
graphics.lineTo(mouseX, mouseY);
}else if(rubber == true){
graphics.lineStyle(drawWidth, 0xFFFFFF);
graphics.lineTo(mouseX, mouseY);
}
}
}
As you can see, the app now checks whether the rubber is true or false once the user starts to draw! If it's false, you draw as normal, else if it's true, the colour of the line changes to white (0xFFFFFF) and draws the new line. That's everything for the simple rubber!
Now, as I said before, I'd also give you a choice of removing everything. For this, you can change the checkDraw function back to what it was, remove the stopRubber function and event listener and take away the rubber variable. Instead, we only need to have one simple line of code in the startRubber function:
graphics.clear();
Here's the code with everything else with it:
var startDraw:Boolean = false;
var drawWidth:Number = 20;
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
stage.addEventListener(KeyboardEvent.KEY_DOWN, startRubber);
stage.addEventListener(Event.ENTER_FRAME, checkDraw);
function startDrawing(e:MouseEvent):void{
graphics.moveTo(mouseX, mouseY);
startDraw = true;
}
function stopDrawing(e:MouseEvent):void{
startDraw = false;
}
function startRubber(Event:KeyboardEvent):void{
if(Event.keyCode == 32){
graphics.clear();
}
}
function checkDraw(e:Event):void{
if(startDraw == true){
graphics.lineStyle(drawWidth, 0x000000);
graphics.lineTo(mouseX, mouseY);
}
}
And here's the code for the white line rubber:
var startDraw:Boolean = false;
var rubber:Boolean = false;
var drawWidth:Number = 20;
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
stage.addEventListener(KeyboardEvent.KEY_DOWN, startRubber);
stage.addEventListener(KeyboardEvent.KEY_UP, stopRubber);
stage.addEventListener(Event.ENTER_FRAME, checkDraw);
function startDrawing(e:MouseEvent):void{
graphics.moveTo(mouseX, mouseY);
startDraw = true;
}
function stopDrawing(e:MouseEvent):void{
startDraw = false;
}
function startRubber(Event:KeyboardEvent):void{
if(Event.keyCode == 32){
rubber = true;
}
}
function stopRubber(Event:KeyboardEvent):void{
if(Event.keyCode == 32){
rubber = false;
}
}
function checkDraw(e:Event):void{
if(startDraw == true){
if(rubber == false){
graphics.lineStyle(drawWidth, 0x000000);
graphics.lineTo(mouseX, mouseY);
}else if(rubber == true){
graphics.lineStyle(drawWidth, 0xFFFFFF);
graphics.lineTo(mouseX, mouseY);
}
}
}
Well, thanks for reading! Just like last time, if you have any questions, ask it in the comments section. Next time... we'll add colour! Bye!
No comments:
Post a Comment