Results 1 to 1 of 1

Thread: Packages

  1. #1
    Join Date
    Sep 2011
    Location
    Australia
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Packages

    Drawing by Mouse in AS3
    Hello and welcome. I'm not sure if you remember, but a while back we did a tutorial on drawing by mouse in AS2, which we will be redoing in AS3 today. This is what we will be remaking, you just draw with the mouse as you would in Paint or whatever:


    Well, first things first. The standard stuff, which should be second nature to you by now. Our class will be called Artist, so save the .as as Artist.as, set the document class of the .fla to Artist and save it in the same folder.

    To the code! First comes the libraries of information we want to include:

    Code:
    package{
    	import flash.display.Sprite;
    	import flash.events.MouseEvent;
    That is quite simple - a sprite is a Movie Clip without a timeline if you can remember - and the MouseEvent library, which, believe it or not, deals with mouse events. The next lines give us our class.They also give us our constructor function:

    Code:
    public class Artist extends Sprite{
    	//Are we drawing or not?
    	private var drawing:Boolean;
     
    	public function Artist(){
    Now come the stuff we define at the beginning - the linestyle (thin and black) and the event listeners that will tell us what the mouse is doing:

    Code:
    graphics.lineStyle(1,0x000000);
    		drawing = false;//to start with
    		stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
    		stage.addEventListener(MouseEvent.MOUSE_MOVE, draw);
    		stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
    	}
    You will notice there that we are adding the listeners to the main stage, not to anything in particular so that they are universal on the stage. The three functions - startDrawing, draw and stopDrawing - now must be defined. We start with the startDrawing function:

    Code:
    	public function startDrawing(event:MouseEvent):void{
    		//move to the correct starting position for drawing
    		graphics.moveTo( mouseX, mouseY);
    		drawing = true;
    	}
    So that tells us "when we click the mouse button, move the graphic to the mouse position and start us drawing". In case you were interested, "event:MouseEvent" is a standard for mouse events - you have to have it, but also can use it sometimes for various things. The moveTo function moves the starting point for any future lines to the point where, in this case, the mouse is. Next is what we do when we draw:

    Code:
    	public function draw(event:MouseEvent){
    		if(drawing){
    			graphics.lineTo(mouseX,mouseY);
    		}
    	}
    That is a pretty simple function - as this is called every time the mouse is moved, the if statement asks whether we are drawing or not.The third line is the point of this function. The lineTo function is very similar to the moveTo function, except that it draws a lines when it moves. Last but not least comes the stop drawing function - the most simple of all of them (plus a few } at the end):

    Code:
    	public function stopDrawing(event:MouseEvent){
    		drawing = false;
    	}
    }
    }
    and this is my action script that says its package cannot be nested and nothing is coming up on the screen.

    Code:
    package {
        import flash.display.Sprite;
        import flash.events.MouseEvent;
        
        
        class Cityscape extends Sprite{
             var drawing:Boolean;
            
            function Cityscape() {
                
                graphics.lineStyle(1,0x000000);
                stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
                stage.addEventListener(MouseEvent.MOUSE_MOVE, draw);
                stage.addEventListener(MouseEvent.MOUSE_uo, stopDrawing);
                
                function startDrawing(event:MouseEvent):void{
                    graphics.moveTo(mouseX, mouseY);
                    drawing = true;
                    }
                }
        }
                
                        function stopDrawing(event:MouseEvent) 
                        {
                            drawing = false;
                        }
    }
    Last edited by jscheuer1; 09-08-2011 at 02:05 PM. Reason: formatting

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •