Page 1 of 1

Introduction to Flash’s Drawing API, Part - 1 Basic Introduction to flash's drawing capabilities. Rate Topic: ***** 1 Votes

#1 red01  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 12
  • View blog
  • Posts: 204
  • Joined: 08-May 06

Posted 30 January 2007 - 02:56 PM

Basic Introduction to flash's drawing capabilities.

Using Actionscript you are able to draw lines in a movie. This is achieved by a bunch of drawing methods attached to the Movie Clip Class.

What we are going to do today:
This is the first installment of a series of flash drawing tutorials. Today we are just going to have a brief introduction and overview to the drawing methods in the Movie Clip Class. We will create a basic drawing app that will let you draw on the stage at run time.


In future tutorials we will explore into colors, gradients, and much more


Introduction to the methods that we will use today:

lineStyle()
Before drawing any lines in a movieclip you must set a linestyle for that movieclip

Sintax
my_mc.lineStyle(thickness, color, alpha)



moveTo()
All movieclips hold a drawing position/coordinate where the line will start. When a movieclip is instance is created on stage the drawing position is set to 0,0 but moveTo() can change the drawing position.

Syntax
my_mc.moveTo(100,100)


lineTo()
This is the one that will do most of the work for us today. This class draws a line from the moviesclips drawing position, in the lineStyle to the position in the method

Syntax
my_mc.lineTo(200,200)



Lets Create the App.


In this app when you click and drag on the stage a line will be drawn, just line in Photoshop or any drawing application. In future tuts we will add color, brushes, and fill shapes, clear stages and event attempt to save our image to a jpg. But today we will just get the basics sorted.

Step 1
First thing first we need to detect when the mouse is down/pressed. So open a new flash doc and add the following code to the first frame of the main timeline

stop();
var isDown:Boolean = false;

onmousedown = function(){
isDown = true
}

onmouseup = function(){
isDown = false
}

This code will allow us to tell is the mouse is down or up. As if it is down we will be drawing on the stage

Step 2
We will create a canvas for us to draw on which is just a movieclip. You also draw straight onto the root of the stage but I prefer the movieclip way.

Add the code in bold

stop();

var isDown:Boolean = false;
var mcCanvas:MovieClip = this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth())

onmousedown = function(){
isDown = true
}

onmouseup = function(){
isDown = false
}

Now we have a moveclip called canvas_mc that we can draw on.

Step 3
Now that we have the canvas to draw on we need to adjusts its drawing cords to the mouse position every time the mouse is pressed


Add the code in bold

stop();

var isDown:Boolean = false;
var mcCanvas:MovieClip = this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth())

onmousedown = function(){
isDown = true
mcCanvas.moveTo(_xmouse,_ymouse)
}

onmouseup = function(){
isDown = false
}


Step 4
Now to the part that will actually make this app draw. We are going to use onmousemove to draw on the canvas, you could also use onEnterFrame.

Add the code in bold
stop();

var isDown:Boolean = false;
var mcCanvas:MovieClip = this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth())

onmousedown = function(){
isDown = true
mcCanvas.moveTo(_xmouse,_ymouse)
}

onmouseup = function(){
isDown = false
}

onmousemove = function(){
if(isDown){
mcCanvas.lineStyle(2,0x000000,100)
mcCanvas.lineTo(_xmouse,_ymouse)
}
}


When the mouse moves we test to see if the mouse is down and if it is we when set the line style and draw the line.


Test the move and have a play

That’s it… simple

Have a play with colors and brush sizes. Also see if you can create a button that will clear all the lines drawn…
Tip you don’t need to remove or remake the canvas. Have a look in the help

Is This A Good Question/Topic? 0
  • +

Replies To: Introduction to Flash’s Drawing API, Part - 1

#2 pioSko  Icon User is offline

  • still.dreaming
  • member icon

Reputation: 23
  • View blog
  • Posts: 1,888
  • Joined: 06-June 03

Posted 07 February 2007 - 06:00 AM

Excellent example, red01! Works great.

I had a look at your code and added a nice little effect to it. Hope you like it ;)

stop();

var isDown:Boolean = false;
var mcCanvas:MovieClip = this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth());

onmousedown = function () {
	isDown = true;
	mcCanvas.moveTo(_xmouse, _ymouse);
};

onmouseup = function () {
	isDown = false;
};

onmousemove = function () {
	if (isDown) {
		mcCanvas.lineStyle(random(8), random(0xffffff), 100);
		mcCanvas.lineTo(_xmouse, _ymouse);
	}
};


Was This Post Helpful? 0
  • +
  • -

#3 red01  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 12
  • View blog
  • Posts: 204
  • Joined: 08-May 06

Posted 12 February 2007 - 09:29 PM

Glad you think its good

I dont mind at all....... :)
Was This Post Helpful? 0
  • +
  • -

#4 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 204
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Posted 14 February 2007 - 03:09 PM

I am not flash literate at all, but this seems to be a very thorough and clear explanation. I just may take a stab at starting, good work :)
Was This Post Helpful? 0
  • +
  • -

#5 red01  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 12
  • View blog
  • Posts: 204
  • Joined: 08-May 06

Posted 01 March 2007 - 01:43 PM

why thank you.. and welcome to the dark side...
Was This Post Helpful? 0
  • +
  • -

#6 GreenSpiral  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 64
  • Joined: 30-December 08

Posted 30 December 2008 - 07:44 AM

Thanks i needed that moveTo so now instead of having 8 frames on a sprite i can just move the sprite just straight to it, its just that from what point does it move it? the center point i'll assume for now (and i'm right aren't I? :D ) now wait it doesn't work like that does it? or does it? i need a script to move a sprite from point a to b to c to d...

This post has been edited by GreenSpiral: 30 December 2008 - 07:46 AM

Was This Post Helpful? 0
  • +
  • -

#7 Renkai  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 31-January 09

Posted 31 January 2009 - 11:19 AM

This tutorial was my first introduction to actionscript and I must say it was very easy to understand and thorough. Thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1