RSS twitter

Posts tagged ‘drawing api’

How to make flash rotating spiral

February 18, 2010, 10:53 am

Step by step tutorial shows you how to make flash rotating spiral using actionscript 3.0  with few  simple steps.

ActionScript 3.0 Code

The comments should be informative enough to let you know what we’re doing in each step.

var speed:Number = 0.3;
var radius:Number = 0;
var angle:Number = 0;
var xpos:Number;
var ypos:Number;

var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;

//We are going to add all our graphics onto a container
var container:Sprite = new Sprite();

//Add the container to the center of the stage
container.x = centerX;
container.y = centerY;
addChild (container);

//Set the container's graphics line style to be 4 pixels and white
container.graphics.lineStyle (4, 0xffffff);

//Starting point will be in the center of the stage (the container's top left corner)
container.graphics.moveTo (0, 0);

addEventListener (Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame (event:Event):void {

	/* We'll stop the drawing after the radius is over 100 pixels.
	We still continue to rotate the container.
	*/
	if (radius > 100) {
		speed = 0;
		container.rotation += 10;
	}
	else {
		//Increase the radius in each frame
		radius += 0.5;

		//New x and y coordinates
		xpos = Math.cos(angle) * radius;
		ypos = Math.sin(angle) * radius;

		//Draw to the new coorninates
		container.graphics.lineTo (xpos,ypos);

		//Rotate the container
		container.rotation += 10;

		//The greater the speed, the faster we draw circles
		angle += speed;
	}
}

That was really simple, eh? Try this code with different values and customize it to your needs! For example, how would you reverse the process? Well, here is the answer.

var speed:Number = 0.3;
var radius:Number = 100;
var angle:Number = 0;
var xpos:Number;
var ypos:Number;

var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;

//We are going to add all our graphics onto a container
var container:Sprite = new Sprite();

//Add the container to the center of the stage
container.x = centerX;
container.y = centerY;
addChild (container);

//Set the container's graphics line style to be 4 pixels and white
container.graphics.lineStyle (4, 0xffffff);

//Starting point
container.graphics.moveTo (100, 0);

addEventListener (Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame (event:Event):void {

	/* We'll stop the drawing after the radius is under 0
	We still continue to rotate the container.
	*/
	if (radius < 0) {
		speed = 0;
		container.rotation += 10;
	}
	else {
		//Decrease the radius in each frame
		radius -= 0.5;

		//New x and y coordinates
		xpos = Math.cos(angle) * radius;
		ypos = Math.sin(angle) * radius;

		//Draw to the new coorninates
		container.graphics.lineTo (xpos,ypos);

		//Rotate the container
		container.rotation += 10;

		//The greater the speed, the faster we draw circles
		angle += speed;
	}
}

The code can be easily modified to create new exiciting animations.

Tags: , , , , , ,
Category: ActionScript  |  1 Comment

ActionScript 3 Drawing API

February 14, 2010, 10:19 am

Introduction to using the drawing API

The drawing API is the name for the functionality built into ActionScript that allows you to create vector graphics—lines, curves, shapes, fills, and gradients—and display them on the screen using ActionScript. The flash.display.Graphics class provides this functionality. You can draw with ActionScript on any Shape, Sprite, or MovieClip instance, using the graphics property defined in each of those classes. (Each of those classes’ graphics property is in fact an instance of the Graphics class.)

If you’re just getting started with drawing with code, the Graphics class includes several methods that make it easy to draw common shapes like circles, ellipses, rectangles, and rectangles with rounded corners. You can draw them as empty lines or filled shapes. When you need more advanced functionality, the Graphics class also includes methods for drawing lines and quadratic Bézier curves, which you can use in conjunction with the trigonometry functions in the Math class to create any shape you need.

Flash Player 10 and Adobe AIR 1.5 add an additional API for drawing, which allow you to programmatically draw entire shapes with a single command. Once you’re familiar with the Graphics class and tasks covered in “Basics of using the drawing API”, continue to Advanced use of the drawing API to learn more about these drawing API features.

Common drawing API tasks

The following tasks are things you’ll likely want to accomplish using the drawing API in ActionScript, which are described in this chapter:

  • Defining line styles and fill styles for drawing shapes
  • Drawing straight lines and curves
  • Using methods for drawing shapes such as circles, ellipses, and rectangles
  • Drawing with gradient lines and fills
  • Defining a matrix for creating a gradient
  • Using trigonometry with the drawing API
  • Incorporating the drawing API into animation

The above movie is an example of linear movement. The code behind the animation

var xspeed:Number = 2;
var yspeed:Number = -2;
var xpos:Number = 0;
var ypos:Number = stage.stageHeight;

graphics.lineStyle (2, 0xffffff);
graphics.moveTo (0, stage.stageHeight);
addEventListener (Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame (event:Event):void {
xpos += xspeed;
ypos += yspeed;
graphics.lineTo (xpos, ypos);
}

Explanation: First we set up the needed variables. For this movie, we want the x and y coordinates to increase and decrease (respectively) by 2 pixels in each frame. Then we declare the starting point variables. The line start at the bottom left corner. We set the line style by the “graphics.lineStyle” property. The line’s width is 2 pixels and color is 0xffffff (=white). Then we add the ENTER_FRAME handler. In each frame, we simply add the speeds to the new x and y positions. Then we draw a line to this new position. Not hard, eh?

Drawing a circle

Let’s try something a little harder. How would we animate the circular movement below?

The code behind the animation is,

var speed:Number = 0.05;
var radius:Number = 50;
var angle:Number = 0;
var xpos:Number;
var ypos:Number;

var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;

graphics.lineStyle (2, 0xffffff);
graphics.moveTo (centerX + radius, centerY);
addEventListener (Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame (event:Event):void {
	xpos = centerX + Math.cos(angle) * radius;
	ypos = centerY + Math.sin(angle) * radius;
	angle += speed;
	graphics.lineTo (xpos,ypos);
}

Explanation: First we declare the speed (how fast the angle is increasing/decreasing). Then we assign a radius for the circle. We want the circle to be at the center of the stage (centerX and centerY variables). Then we set the linestyle and set the starting point to be the circle’s right side. The ENTER_FRAME function calculates the new x and y positions using cosine and sine. We increase the angle in each frame and draw a line to the new coordinate.

Drawing a wave

Let’s try to accomplish the animation seen below.

The code behind the animation is,

var speedX:Number = 1;
var speedAngle:Number = 0.1;
var range:Number = 100;
var angle:Number = 0;
var xpos:Number = 0;
var ypos:Number = 0;
var centerY:Number = stage.stageHeight / 2;
 
 
graphics.lineStyle (2, 0xffffff);
graphics.moveTo (0, centerY);
addEventListener (Event.ENTER_FRAME, onEnterFrame);
 
function onEnterFrame (event:Event):void {
	xpos += speedX;
	ypos = centerY + Math.sin(angle) * range;
	angle += speedAngle;
	graphics.lineTo (xpos,ypos);
}

Explanation: The most important variables are the speedX, speedAngle and range. SpeedX defines the horizontal speed. In other words, how fast the line is moving in the x-axis. SpeedAngle defines how fast the angle is increasing/decreasing. Range tells how high the wave is. In this example, the total wave height is 200px (100px below or above centerY = 200px). In the ENTER_FRAME handler, we use the sine function, since we want a nice wave. It could also be cosine if you wanted. Go ahead and play with this example to see how different values change the animation!

Tags: , , ,
Category: ActionScript  |  4 Comments