Archive for October, 2009:
Drawing Shapes in AS3
ActionScript 3.0 has some great new functions to simplify drawing shapes, you can use drawCircle, drawEllipse, drawRect & drawRoundRect to speed up the process. In this tutorial will show you how to draw a basic shape with function.
function createCircle(x:Number, y:Number, radius:Number, color:Number):void {
//Create a sprite object which is pretty much like a MovieClip but without a timeline.
var circle:Sprite = new Sprite();
//Assign a fill color to our graphic object.
circle.graphics.beginFill(color);
//Draw a circle using the drawCircle() function.
circle.graphics.drawCircle(x, y, radius);
//Done drawing.
circle.graphics.endFill();
//Add our sprite to the display list which means we tell Flash that we want this sprite to be displayed.
addChild(circle);
}
function createEllipse(x:Number, y:Number, width:Number, height:Number, color:Number):void {
var ellipse:Sprite = new Sprite();
ellipse.graphics.beginFill(color);
ellipse.graphics.drawEllipse(x, y, width, height);
ellipse.graphics.endFill();
addChild(ellipse);
}
function createRect(x:Number, y:Number, width:Number, height:Number, color:Number):void {
var rect:Sprite = new Sprite();
rect.graphics.beginFill(color);
rect.graphics.drawRect(x, y, width, height);
rect.graphics.endFill();
addChild(rect);
}
function createRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number, color:Number):void {
var roundRect:Sprite = new Sprite();
roundRect.graphics.beginFill(color);
roundRect.graphics.drawRoundRect(x, y, width, height, ellipseWidth, ellipseHeight);
roundRect.graphics.endFill();
addChild(roundRect);
}
createCircle(50, 50, 25, 0x0099FF)
createEllipse(100, 25, 50, 100, 0x9933CC)
createRect(175, 25, 50, 100, 0xFFCC00)
createRoundRect(250, 25, 50, 100, 20, 20, 0xFF3366)
//Create a sprite object which is pretty much like a MovieClip but without a timeline.
var circle:Sprite = new Sprite();
//Assign a fill color to our graphic object.
circle.graphics.beginFill(color);
//Draw a circle using the drawCircle() function.
circle.graphics.drawCircle(x, y, radius);
//Done drawing.
circle.graphics.endFill();
//Add our sprite to the display list which means we tell Flash that we want this sprite to be displayed.
addChild(circle);
}
function createEllipse(x:Number, y:Number, width:Number, height:Number, color:Number):void {
var ellipse:Sprite = new Sprite();
ellipse.graphics.beginFill(color);
ellipse.graphics.drawEllipse(x, y, width, height);
ellipse.graphics.endFill();
addChild(ellipse);
}
function createRect(x:Number, y:Number, width:Number, height:Number, color:Number):void {
var rect:Sprite = new Sprite();
rect.graphics.beginFill(color);
rect.graphics.drawRect(x, y, width, height);
rect.graphics.endFill();
addChild(rect);
}
function createRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number, color:Number):void {
var roundRect:Sprite = new Sprite();
roundRect.graphics.beginFill(color);
roundRect.graphics.drawRoundRect(x, y, width, height, ellipseWidth, ellipseHeight);
roundRect.graphics.endFill();
addChild(roundRect);
}
createCircle(50, 50, 25, 0x0099FF)
createEllipse(100, 25, 50, 100, 0x9933CC)
createRect(175, 25, 50, 100, 0xFFCC00)
createRoundRect(250, 25, 50, 100, 20, 20, 0xFF3366)
0 Comments
Starting with Papervision 3D
In this tutorial we will look at shading 3D objects by adding materials to 3D objects and adding light sources to a scene. This will create a simple scene containing a sphere and a single light source that will light the sphere from an angle follow by mouse position. Before you start the tutorial below, you have to download papervision .
stop();
//Import the basic Papervision 3D Classes that set up a 3D scene and all the necessary constituent parts.
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
//Import the classes for creating primitive shapes.
import org.papervision3d.objects.primitives.*;
//Import the classes that deal with materials (textures that cover a 3D model).
import org.papervision3d.materials.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.core.proto.MaterialObject3D;
//Import the classes for creating a point light (a light emanating from a single point).
import org.papervision3d.lights.PointLight3D;
//Import the classes for dealing with shading. Papervision 3D offers different types of shading - you need only import the type you are going to use, but in this case we'll import all of them.
import org.papervision3d.materials.shadematerials.CellMaterial;
import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
import org.papervision3d.materials.shadematerials.GouraudMaterial;
import org.papervision3d.materials.shadematerials.PhongMaterial;
//Next, create instances of all the basic elements required for a 3D scene, and set up the stage.
var viewport:Viewport3D=new Viewport3D(stage.stageWidth,stage.stageHeight);
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
var renderer:BasicRenderEngine = new BasicRenderEngine();
stage.scaleMode="showAll";
//Next, create a light source, and place it at position 500,500 on the X and Y axes. The PointLight3D class is a simple light source that shines light in all directions.
var light:PointLight3D=new PointLight3D(true);
light.x=500;
light.y=500;
//Next, create a material for the sphere. In this example we'll use a FlatShadeMaterial, which will show all the facets that make up the sphere shape (as seen in the example at the start of the tutorial). The 3 parameters specify the instance name of the light that will affect the material, and the two colours for the highlight and shadow in Hexadecimal format.
//var sphereMaterial:MaterialObject3D=new FlatShadeMaterial(light, 0xFF0000, 0x330000);
//var sphereMaterial:MaterialObject3D=new CellMaterial(light, 0xFF0000, 0x330000, 5);
//var sphereMaterial:MaterialObject3D=new GouraudMaterial(light, 0xFF0000, 0x330000);
var sphereMaterial:MaterialObject3D=new PhongMaterial(light, 0xFF0000, 0x330000, 50);
var ball = new Sphere(sphereMaterial,200,10,10);
//Finally, add all of the necessary objects to the stage and scene, and render.
addChild(viewport);
scene.addChild(ball);
renderer.renderScene(scene, camera, viewport);
addEventListener(Event.ENTER_FRAME, onRenderViewport);
function onRenderViewport(e:Event):void {
light.x = -(mouseX - 250) * 5;
light.y = ((mouseY - 200) * 5);
renderer.renderScene(scene, camera, viewport);
}
//Import the basic Papervision 3D Classes that set up a 3D scene and all the necessary constituent parts.
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
//Import the classes for creating primitive shapes.
import org.papervision3d.objects.primitives.*;
//Import the classes that deal with materials (textures that cover a 3D model).
import org.papervision3d.materials.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.core.proto.MaterialObject3D;
//Import the classes for creating a point light (a light emanating from a single point).
import org.papervision3d.lights.PointLight3D;
//Import the classes for dealing with shading. Papervision 3D offers different types of shading - you need only import the type you are going to use, but in this case we'll import all of them.
import org.papervision3d.materials.shadematerials.CellMaterial;
import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
import org.papervision3d.materials.shadematerials.GouraudMaterial;
import org.papervision3d.materials.shadematerials.PhongMaterial;
//Next, create instances of all the basic elements required for a 3D scene, and set up the stage.
var viewport:Viewport3D=new Viewport3D(stage.stageWidth,stage.stageHeight);
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
var renderer:BasicRenderEngine = new BasicRenderEngine();
stage.scaleMode="showAll";
//Next, create a light source, and place it at position 500,500 on the X and Y axes. The PointLight3D class is a simple light source that shines light in all directions.
var light:PointLight3D=new PointLight3D(true);
light.x=500;
light.y=500;
//Next, create a material for the sphere. In this example we'll use a FlatShadeMaterial, which will show all the facets that make up the sphere shape (as seen in the example at the start of the tutorial). The 3 parameters specify the instance name of the light that will affect the material, and the two colours for the highlight and shadow in Hexadecimal format.
//var sphereMaterial:MaterialObject3D=new FlatShadeMaterial(light, 0xFF0000, 0x330000);
//var sphereMaterial:MaterialObject3D=new CellMaterial(light, 0xFF0000, 0x330000, 5);
//var sphereMaterial:MaterialObject3D=new GouraudMaterial(light, 0xFF0000, 0x330000);
var sphereMaterial:MaterialObject3D=new PhongMaterial(light, 0xFF0000, 0x330000, 50);
var ball = new Sphere(sphereMaterial,200,10,10);
//Finally, add all of the necessary objects to the stage and scene, and render.
addChild(viewport);
scene.addChild(ball);
renderer.renderScene(scene, camera, viewport);
addEventListener(Event.ENTER_FRAME, onRenderViewport);
function onRenderViewport(e:Event):void {
light.x = -(mouseX - 250) * 5;
light.y = ((mouseY - 200) * 5);
renderer.renderScene(scene, camera, viewport);
}
