Dec 31, 2011 Posted on Dec 31, 2011 in Hints and Tips | 10 comments

Quick Tip: Collision Detection Between Circles

Collision detection is a branch of algorithms that checks whether two shapes overlap. If you build physics or action games with ActionScript, you will certainly not escape acquaintance with this topic. This is the first of the series regarding collision detection. In this Quick Tip, we shall look at ActionScript’s built-in collision detection method, hitTestObject(), and write our own to detect overlap between two circles.

---

Final Result Preview

This is the final SWF we will create in this Quick Tip. Click the blue circle and drag it towards the green one. Once they overlap, the green circle will change its color; if you remove the blue circle again, the other will return to being green.

---

Step 1: Bounding Box Checks

Those who are aquainted with ActionScript 2.0 will definitely recognise the method, hitTest(). This command checks for overlap between two shapes, or between a shape and a single point. In ActionScript 3.0 it is split into two separate methods: hitTestObject() and hitTestPoint().

We shall look at hitTestObject() first. This commnad generally suits collision detection for box-like shapes (squares, rectangles). A bounding box is drawn around shapes and when these bounding boxes overlap each other, hitTestObject() returns true.

Check out the example below. Drag the blue box towards the green one. As they overlap, the green box’s shade darkens.

I attach here the corresponding ActionScript that generates the above presentation. Box is a custom written class to easily generate square shapes. I’ve included the classes in the source folder; do refer to them. The important script for collision detection is highlighted below.

package
{
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	/**
	 * Simple hitTest with boxes
	 * @author Shiu
	 */
	[SWF(width = 400, height = 300)]
	public class Simple extends Sprite
	{
		private var box1:Box, box2:Box;

		public function Simple() {
			box1 = new Box(0x0000FF); addChild(box1);
			box1.x = 250; box1.y = 250;
			box1.addEventListener(MouseEvent.MOUSE_DOWN, start);
			box1.addEventListener(MouseEvent.MOUSE_UP, end);

			box2 = new Box(0x00FF00); addChild(box2);
			box2.x = 100; box2.y = 50;
		}
		private function start(e:MouseEvent):void {
			e.target.startDrag();
			e.target.addEventListener(MouseEvent.MOUSE_MOVE, check);
		}
		private function end(e:MouseEvent):void {
			e.target.stopDrag();
			e.target.removeEventListener(MouseEvent.MOUSE_MOVE, check);
		}
		private function check(e:MouseEvent):void {
			if (e.target.hitTestObject(box2)) box2.color = 0x00AA00;
			else				box2.color = 0x00FF00;
		}
	}
}

---

Step 2: Shortcomings of Bounding Boxes

However, collision between circles cannot be effectively checked using this command. Check out the presentation below. Drag the blue circle towards the green one. Before the shapes collide, their bounding boxes already overlap and hitTestObject() is true. We need a more accurate solution.

This problem is prevalent not only for collision detection between circles but non-square shapes generally. Observe the diagram below. For organic shapes that are difficult to resolve by polygons, we shall make use of pixel-precise collision detection.

---

Step 3: Distance Between Centers

The solution to this problem is quite simple: we shall measure the distance between the centers of these circles. If the centers get close enough to each other, we shall flag collision as true. But how close is close enough?

Observe the diagram above. r₁ refers to the radius of circle1 and r₂ refers to the radius of circle2. The distance between circles is calculated on every frame. If (and only if) it is equal to or less than the sum of both radii (r₁+ r₂), then the two circles must be touching or overlapping each other.

---

Step 4: Circle-Circle Collision Detection

Here are the important ActionScript for the implementation of the concept above:

minDist = circle1.radius + circle2.radius;

private function check(e:MouseEvent):void {
	var distance:Number = Math2.Pythagoras(circle1.x, circle1.y, circle2.x, circle2.y);
	if (distance <= minDist) circle2.color = 0x00FFAA;
	else circle2.color = 0x00FF00;
}

---

Step 5: Sample Solution

Here is a sample of the solution. Drag the blue circle towards to the green one. As they overlap, you will see green’s color change. It returns to normal when both circles are not colliding.

I have included the ActionScript implementation below.

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	/**
	* Simple collision between 2 circles
	* @author Shiu
	*/
	[SWF(width = 400, height = 300)]
	public class Simple3 extends Sprite
	{
		private var circle1:Circle, circle2:Circle;
		private var minDist:Number;

		public function Simple3() {
			circle1 = new Circle(0x0055AA, 30); addChild(circle1);
			circle1.x = 250; circle1.y = 250;
			circle1.addEventListener(MouseEvent.MOUSE_DOWN, start);
			circle1.addEventListener(MouseEvent.MOUSE_UP, end);

			circle2 = new Circle(0x00FF00, 30); addChild(circle2);
			circle2.x = 100; circle2.y = 50;

			minDist = circle1.radius + circle2.radius;
		}

		private function start(e:MouseEvent):void {
			e.target.startDrag();
			e.target.addEventListener(MouseEvent.MOUSE_MOVE, check);
		}

		private function end(e:MouseEvent):void {
			e.target.stopDrag();
			e.target.removeEventListener(MouseEvent.MOUSE_MOVE, check);
		}

		private function check(e:MouseEvent):void {
		var distance:Number = Math2.Pythagoras(circle1.x, circle1.y, circle2.x, circle2.y);
			if (distance <= minDist) circle2.color = 0x00FFAA;
			else circle2.color = 0x00FF00;
		}
	}

}

---

Conclusion

As you can see, the general principle of collision detection is to use mathematical formulae to check for overlappings between different shapes. Vector mathematics plays an important role too. Next to come is collision between a circle and a line. Thanks for reading and see you soon.

View full post on Activetuts+

Dec 29, 2011 Posted on Dec 29, 2011 in Hints and Tips | 10 comments

Use Vector Regions to Implement Field of View in a Flash Game

In this tutorial, you will learn how to cast a field of view of a turret guarding a specific location. When an enemy is within the turret's field of view, the turret will shoot at them. Vector math will be used to help in implementing this field of view.

---

Final Result Preview

Let's take a look at the final result we will be working towards. Click on the turret at the bottom of stage to begin the simulation.

---

Step 1: Field of View

I’m sure most readers have used cameras. Every camera has a view angle, defined by the type of lens attached. There are narrow and wide view angles. View angles constrain the field of view into a sector. From a top-down position, they look like the diagram below. If you take a picture, eveything within the grayed area will be captured.

The turret's field of view in our simulation is like that of a camera. If there's an enemy within its field of view, a guard will respond (sound an alarm, take aim, shoot, etc).

---

Step 2: Basic Concept

The diagram above shows the field of view of turret. Usually the angle of view will be equal on both the left and the right. The radius will also be consistent throughout the sector. So to check whether an enemy is within a turret's field of view, these two mathematical conditions can be used:

1. Distance between turret and enemy is less than radius.
2. Angle from turret's line of sight to enemy is less than 30°.

---

Step 3: Define Field of View Using Vector

We shall use vector math to help us. In this case, the vectors in consideration are vLine2 and vLine3. We can:

• Compare magnitudes of vLine2 and vLine3 to validate Condition 1 from Step 2.
• Compare angle sandwiched between vLine2 and vLine3 to validate Condition 2 from Step 2.

Using the formula of dot product between Vectors, we can find the angle sandwiched between two vectors. I have included a Flash presentation above to facilitate your understanding. Click on the buttons at the bottom to scroll through the frames.

Here is the Actionscript in Vector2D (which I’ve used in previous tutorials, like this one) that does the job. Note that line 257 helps to determine whether the angle is on the negative or positive side. However, this is not going to help us much here as direction is not important. More explanations on this topic in the next part of this series.

/**
 * Method to obtain the smaller angle, in radian, sandwiched from current vector to input vector
 * @param	vector2 A vector to bound the angle
 * @return Angle in radian, positive is clockwise, negative is anti-clockwise
 */
public function angleBetween(vector2:Vector2D):Number
{
	//get normalised vectors
	var norm1:Vector2D = this.normalise();
	var norm2:Vector2D = vector2.normalise();

	//dot product of vectors to find angle
	var product:Number = norm1.dotProduct(norm2);
	product = Math.min(1, product);
	var angle:Number = Math.acos(product);

	//sides of angle
	if (this.vectorProduct(vector2) < 0) angle *= -1
	return angle;
}

---

Step 4: Implementation

I have included a presentation below that implements the concept of field of view. Feel free to click and drag the bigger gray circles around. Observe area covered by the field of view indicated by darker dots.

---

Step 5: Important ActionScript

If you'd like to see the ActionScript for the presentation above, feel free to open up AppFan.as from the source download – it’s commented to facilitate understanding. I shall only include here the important snippet that checks the conditions.

I've highlighted the conditional statement that each of the little dots on the stage is evaluated against it to see if its within the highlighted area.

//Calculate the magnitude and angle
var vLine2:Vector2D = new Vector2D(b2.x - b1.x, b2.y - b1.y);
var vLine3:Vector2D = new Vector2D(b3.x - b1.x, b3.y - b1.y);
var ang:Number = Math.abs(vLine2.angleBetween(vLine3))	//Eliminate directional feature of angle
var mag:Number = vLine2.getMagnitude();

for each (var item:Ball in sp) {
	var vParticle1:Vector2D = new Vector2D(item.x - b1.x, item.y - b1.y);

	//Checking if falls within sector
	//Condition: Magnitude less than mag, angle between particle ang vLine2 less than ang
	 if(Math.abs(vLine2.angleBetween(vParticle1)) <ang
	 && mag> vParticle1.getMagnitude()){
		item.col = 0x000000;
	}
	//if outside of segment, original color
	else item.col = 0xCCCCCC;
	item.draw();
}

---

Step 6: Variations

To add variation to the use of field of view, we can implement far and near attenuation. In fact, we just went through far attenuation. For far attenuation, enemies that are further away (further than the far attenuation distance) cannot be seen by the turret. For near attenuation, enemies that are too close (less than near attenuation) cannot be seen by turret. This may sound irrational, but imagine the turret sitting on a high cliff while the enemy sneaks right under the cliff.

Okay, perhaps you are not convinced, so here is another example of different use. A guard carries a short sword, a bow and arrows. When an enemy is too far off, he may just want to keep a close eye on him. When the enemy comes within shooting range, he shoots arrows. When the enemy comes too close, he fights with short sword. You may even implement different types of guards: bowmen and swordsmen. Enemies within shooting range are dealt with by bowmen while those at at close range are dealt with by swordsmen.

By understanding the conditions introduced in Step 2, variations can be introduced into our simulation or game.

---

Step 7: Define Field of View Conditions

I’ve included a Flash presentation below to showcase different cases and their corresponding set of conditions. Click on the buttons to check out the different cases.

---

Step 8: Programming Field of View Conditions

The following is a snippet of code for implementing the conditions as laid out in Step 7. You may want to view the whole source code in Region2.as to check out the whole implementation.

//Checking done every frame
private function move(e:MouseEvent):void
{
	//Calculate Vector from guard to enemy
	var g_e:Vector2D = new Vector2D(enemy.x - guard.x, enemy.y - guard.y);
	var angle:Number = r3.angleBetween(g_e);
	//Conditions
	var withinSector:Boolean = Math2.degreeOf(Math.abs(angle)) < sector;
	var withinR3:Boolean = g_e.getMagnitude() < r3.getMagnitude();
	var withinR2:Boolean = g_e.getMagnitude() < r2.getMagnitude();
	var withinR1:Boolean = g_e.getMagnitude() < r1.getMagnitude();

	//Difference example cases
	if (example == 0) {
		if (withinSector && withinR3) {
			t1.text = "Within FOV"
		}
		else t1.text = "Beyond FOV"
	}
	else if (example == 1) {
		if (withinSector && withinR3 && !withinR1) {
			t1.text = "In between \nfar and near attenuation"
		}
		else t1.text = "Beyond FOV"
	}
	else if (example == 2) {
		if (withinSector) {
			if (withinR1) t1.text ="Sword attack"
			else if (withinR2) t1.text = "Arrow shoot"
			else if (withinR3) t1.text = "Keep observe"
		}
		else t1.text = "Beyond FOV"
	}
}

//Swapping example cases in response to changes in context menu
private function swap(e:ContextMenuEvent):void
{
	//swap example
	if (e.target.caption == &quot;Basic FOV&quot;) example = 0;
	else if (e.target.caption == &quot;Far/Near Attenuation&quot;) example = 1;
	else if (e.target.caption == &quot;Observe/Arrow/Sword&quot;) example = 2;

	//Redraw region indicating detection area
	drawRegion();
}

---

Step 9: Implementation

Here's an implementation of ideas explained in Step 6. Click on the black circle and drag it aroud the stage to check whether it’s sitting within the visible region. Right-click on stage to pop context menu out, then select from "Basic FOV", "Far/Near Attenuation" and "Observe/Arrow/Sword" to check out the different examples.

---

Step 10: The Scenario

Now to put into context whatever we have learnt, we are going to create a simulation. Here's the scenario:

A turret is stationed at one end of the stage. Its role is to eliminate as many troops that invade its space as possible. Of course, turret will have to see those troops (within field of view) in order to shoot lasers – and bye-bye troops. Since it can only shoot a beam of laser at any instance, it’s going to choose the closest enemy in sight.

On the other hand, troops will try to successfully cross to the other side. They will have to cross a river and, as they do, they will slow down. Now these troops are going to respawn on top of stage whenever they die or go out of stage.

---

Step 11: Basic Setup

The implementation of this example will be hard-coded. The basic setup is as below. On initialisation we will draw the graphics of elements (river, troops, turret) and position then nicely. On clicking on the purple turret, animation will start. On every frame we will see them animate according to the behaviours of each element.

public function Scene1() {
	makeTroops();
	makeRiver();
	makeTurret();
	turret.addEventListener(MouseEvent.MOUSE_DOWN, start);
	function start ():void {
		stage.addEventListener(Event.ENTER_FRAME, move);
	}
}
private function move(e:Event):void {
	behaviourTroops();
	behaviourTurret();
}

Below are the variables of this class.

private var river:Sprite;

private var troops:Vector.<Ball>;
private var troopVelo:Vector.<Vector2D>;

private var turret:Sprite;
private var fieldOfView:Sprite;

private var lineOfSight:Vector2D = new Vector2D (0, -300);	//line of sight facing north
private var sectorOfSight:Number = 	20			//Actually half of sector, in degrees

---

Step 12: Draw and Position River

Drawing and positioning river. Pretty simple.

private function makeRiver():void {
	river = new Sprite; addChild(river);

	//Specify the location & draw graphics of river
	with (river) {
		x = 0; y = 150;
		graphics.beginFill(0x22BBDD, 0.2);
		graphics.drawRect(0, 0, 500, 50);
		graphics.endFill();
	}
}

---

Step 13: Draw and Position Troops

Drawing troops will be simple. However, I wanted a "V" formation on troops. So I position the troop at the bottom of "V" first, followed by troops on both sides of its wing. You may want to adjust its center position through center and the spacing between troops through xApart and yApart. Note that troops and its corresponding troopVelo share the same index. All troops are heading south.

private function makeTroops():void {
	troops = new Vector.<Ball>;		//Initiate troops
	troopVelo = new Vector.<Vector2D>;	//initiate velocity

	//local variables
	var center:Vector2D = new Vector2D(stage.stageWidth * 0.5, 150);
	var xApart:int = 20; var yApart:int = 15; 

	//Locating troops & velocities
	var a:Ball = new Ball; stage.addChild(a); troops.push(a);
	a.x = center.x; a.y = center.y;
 	//troops heading south
	var aV:Vector2D = new Vector2D(0, 1); troopVelo.push(aV);	

	for (var i:int = 1; i < 11; i++) {
		var b:Ball = new Ball; stage.addChild(b); troops.push(b);
		b.x = center.x + i * xApart; b.y = center.y - i * yApart;
		var bV:Vector2D = new Vector2D(0, 1); troopVelo.push(bV);

		var c:Ball = new Ball; stage.addChild(c); troops.push(c);
		c.x = center.x - i * xApart; c.y = center.y - i * yApart;
		var cV:Vector2D = new Vector2D(0, 1); troopVelo.push(cV);
	}
}

---

Step 14: Draw and Position Turret

Here, we shall draw, position, and orient the turret and its field of view to face north towards the enemy. Note that the line of sight is facing north.

private function makeTurret():void {
	//instantiate, locate, orient turret
	turret = new Sprite; stage.addChild(turret);
	turret.x = stage.stageWidth * 0.5,
	turret.y = stage.stageHeight;
	turret.rotation = -90;
	turretRot = 2;				//rotation speed

	//Draw turret graphics
	var w:int = 30; var h:int = 10;
	turret.graphics.beginFill(0x9911AA);
	turret.graphics.lineStyle(2); turret.graphics.moveTo( 0, -h / 2);
	turret.graphics.lineTo(w, -h / 2); turret.graphics.lineTo(w, h / 2);
	turret.graphics.lineTo(0, h / 2); turret.graphics.lineTo(0, -h / 2);
	turret.graphics.endFill();

	//Setting data for field of view's graphics
	var point1:Vector2D = new Vector2D(0, 0);
	var point2:Vector2D = new Vector2D(1, 0);
	var point3:Vector2D = new Vector2D(0, 0);
	point1.polar(lineOfSight.getMagnitude(), Math2.radianOf(sectorOfSight));
	point2.setMagnitude(lineOfSight.getMagnitude()/Math.cos(Math2.radianOf(sectorOfSight)));
	point3.polar(lineOfSight.getMagnitude(), Math2.radianOf(-sectorOfSight));

	//instantiate, locate, orient field of view
	fieldOfView = new Sprite; addChild(fieldOfView);
	fieldOfView.x = turret.x; fieldOfView.y = turret.y;
	fieldOfView.rotation = -90;

	//draw turret's field of view
	fieldOfView.graphics.beginFill(0xff9933, 0.1);
	fieldOfView.graphics.lineStyle(1);
	fieldOfView.graphics.moveTo(0, 0);
	fieldOfView.graphics.lineTo(point1.x, point1.y);
	fieldOfView.graphics.curveTo(point2.x, point2.y, point3.x, point3.y);
	fieldOfView.graphics.lineTo(0, 0);
	fieldOfView.graphics.endFill();
}

A little detail here on the drawing the line of sight. I’ve included image below for clarification:

---

Step 15: Troops' Behaviour

Troops will be animated across time. Here's their behaviour. Note that the last two lines of code are commented. If you would like dead troops to be removed from animation, you may uncomment them.

//troops' behaviour
private function behaviourTroops():void
{
	//for each troop
	for (var i:int = 0; i < troops.length; i++) {

		//If troop reach bottom of screen, respawn on top of screen
		if (troops[i].y > stage.stageHeight) {
			troops[i].y = 0; troops[i].x = Math.random() * (stage.stageWidth - 100) + 100;
		}
		//if wading through river, slow down
		//else normal speed
		if (river.hitTestObject(troops[i])) troops[i].y += troopVelo[i].y*0.3;
		else troops[i].y += troopVelo[i].y

		//If troop is dead ( alpha < 0.05 ), respawn on top of screen
		if (troops[i].alpha < 0.05) {
			troops[i].y = 0; troops[i].x = Math.random() * (stage.stageWidth - 100) + 100;
			troops[i].col = 0xCCCCCC; troops[i].draw(); troops[i].alpha = 1;
			//stage.removeChild(troops[i]); troops.splice(i, 1);
			//troopVelo.splice(i, 1);
		}
	}
}

---

Step 16: Turret’s Behaviour

The turret will guard its post by panning its field of view around, but within certain angles. Here, I’ve defined the panning angle to be between -135 and -45 (using Flash angles). If there's an enemy within sight, it will attack it. But if there's more than one enemy, it's going to choose the closest to attack.

//turret's behaviour
private function behaviourTurret():void
{
	//rotate turret within boundaries of -135 & -45
	if (turret.rotation > -45)	turretRot = -2
	else if (turret.rotation < -135) turretRot = 2

	//shoot closest enemy within sight
	graphics.clear();
	if (enemyWithinSight() != null) {

		//closest enemy in sight
		var target:Ball = enemyWithinSight();
		target.col = 0; target.draw(); 	//turns to black &
		target.alpha -= 0.2;		//health deteriorates

		//orient turret towards enemy
		var turret2Target:Vector2D = new Vector2D(target.x - turret.x, target.y - turret.y);
		turret.rotation = Math2.degreeOf(turret2Target.getAngle());

		//draw laser path to enemy
		graphics.lineStyle(2);	graphics.moveTo(turret.x, turret.y);	graphics.lineTo(target.x, target.y);
	}

	//no enemy within sight, continue scanning
	else { turret.rotation += turretRot }

	//turn field of view and line of sight of turret according to turret's rotation
	fieldOfView.rotation = turret.rotation;
	lineOfSight.setAngle(Math2.radianOf(turret.rotation));
}

---

Step 17: Getting Closest Enemy

The turret will locate the closest enemy in its field of view and react by shooting a laser at it. To see how it finds the closest enemy, check out the ActionScript implementation below.

//return the closest enemy within sight
private function enemyWithinSight():Ball {
	var closestEnemy:Ball = null;
	var closestDistance:Number = lineOfSight.getMagnitude();

	for each (var item:Ball in troops) {
		var turret2Item:Vector2D = new Vector2D(item.x - turret.x, item.y - turret.y);

		//check if enemy is within sight
		//1. Within sector of view
		//2. Within range of view
		//3. Closer than current closest enemy
		var c1:Boolean = Math.abs(lineOfSight.angleBetween(turret2Item)) < Math2.radianOf(sectorOfSight) ;
		var c2:Boolean = turret2Item.getMagnitude() < lineOfSight.getMagnitude();
		var c3:Boolean = turret2Item.getMagnitude() < closestDistance;

		//if all conditions fulfilled, update closestEnemy
		if (c1 && c2&& c3){
			closestDistance = turret2Item.getMagnitude();
			closestEnemy = item;
		}
	}
	return closestEnemy;
}

---

Step 18: Launching Simulation

You may now press Ctrl + Enter in FlashDevelop and observe this simulation. Click the turret to start the demo below.

---

Step 19: A Step Further

We can make use of this understanding to:

• Implement a field of view for enemies.
• Implement more turrets.
• Introduce variation to the field of view as explained in Step 9.

…and so on.

Hopefully, this will spark some ideas and perhaps help in your next simulation or game.

Conclusion

Thanks for reading. As usual, do drop a comment to let me know if this has been helpful to you. I'll be writing the next tutorial to check out how enemies can stay out of turret's field of view by "hiding" behind obstacles. Stay tuned.

View full post on Activetuts+

Dec 28, 2011 Posted on Dec 28, 2011 in Hints and Tips | 10 comments

Activetuts+ Quiz #6: JSON and XML

Merry Quizmas! This month, I’m quizzing you on your understanding of two popular formats for data used by web apps: JSON and XML.

---

Let’s Get Quizzy

Having Trouble?

If you get stuck, take a look at our previous posts: Understanding JSON and AS3 101: XML.

---

Just So You Know…

This quiz was built with the jQuizzy Quiz Engine by Siddharth, ace reviewer for Envato. jQuizzy is available for purchase over on Codecanyon

Thanks also to Orman Clark and MediaLoot for their graphical contributions to the Activetuts+ Coffee Break Quizzes.

---

What Would You Like To Be Tested On?

If you’ve got an idea for an Activetuts+-related quiz subject, let us know in the comments!

View full post on Activetuts+

Dec 27, 2011 Posted on Dec 27, 2011 in Hints and Tips | 10 comments

Happy Holidays from Tuts+!

The holidays are upon us, and we’re feeling festive at Tuts+ this weekend! We’d like to take this opportunity to say a huge Christmas thank you to all our readers, and wish you a very Happy Holiday. Read on for a video message from the HQ team, and a few freebies from around the Tuts+ and Envato network!

---

A Message from Envato HQ

Although the Tuts+ team is spread over the globe, Envato HQ is where much of the Tuts+ magic happens! It isn’t looking traditionally Christmassy in Melbourne at the moment, but we have a special holiday message from everyone at head office:

From everyone at Envato we want to wish you a Happy Holidays and look forward to seeing you all refreshed and ready for another big year in 2012! From Envato HQ to the community, we’ve created a little video to share the holiday cheer. Enjoy!

Music is Kids Holiday Theme by AudioJungle Author CraigHall

---

Gift Guides & Freebies!

Wondering what to buy your fellow geek this Christmas? Never fear! You may have left it it a little late, but our holiday gift guides can still come in handy. Here are a few great places to start:

• The Official 2011 Nettuts+ Holiday Gift Guide
• 30+ Gift Ideas for Browser App and Browser Game Developers
• 10 Last-minute Gift Suggestions for the Musician in Your Life
• 36 Great Holiday Gift Ideas For The Cg Artist!
• The Official 2011 Phototuts+ Holiday Gift Guide
• 20+ Great Gift Ideas for Any WordPress Developer

We also have a couple of exclusive freebies and discounts, just in time for the holidays:

• Get $6 Off Our New Rockable Book: “How to Record Great Music”
• Exclusive Freebie: 50 Crisp Web UI Icons

---

The Christmas Freelance Freedom Comic

The “holiday jingle” comic encapsulates everything that we love and hate about freelancing. Don’t forget to sing along to the “Jungle Bells” theme music as you read it…!

You can also enjoy the whole back catalog of Freelance Freedom comics over at FreelanceSwitch.

---

AppStorm Giveaways

We have two fantastic competitions running over at the AppStorm network over the holiday period, and there’s still time to get your entry in to stand a chance of winning:

1. Business Productivity Bundle Giveaway —Each bundle includes a license to Daylite and Billings Pro – it’s the perfect combination for getting your business organised and making money!
2. The AppStorm Holiday ’11 Video Game Giveaway — In the spirit of this season we’ve hand picked a few critically acclaimed, and award-winning, games released over this year to give away to our readers!

---

Merry Christmas, and Happy New Year!

All that’s left is to wish you a very happy holiday on behalf of everyone at Tuts+! We hope you’ve enjoyed everything that we’ve had to share this year, and look forward to publishing thousands more top-quality tutorials, articles, freebies, and resources in 2012.

Here’s to another exciting year at Tuts+, and thank you for joining us on the journey!

View full post on Activetuts+

Dec 23, 2011 Posted on Dec 23, 2011 in Hints and Tips | 10 comments

Illustrate a Quirky Santa Character Using Flash Pro and Swift 3D

Twice a month, we revisit some of readers’ favorite posts from throughout the history of Activetuts+. Please enjoy this festive tutorial from Christmas past!

Ever wanted give your Flash design an extra dimension? Using Electric Rain’s brilliant 3D software, this basic tutorial will give you an introduction in using Flash and Swift 3D together to create some fantastic graphics and animations.

Final Result Preview

Let’s take a look at the final result we will be working towards:

Step 1: New Flash File

Create a new Flash file, it doesn’t matter what version of ActionScript you use; we’re only using Flash at the moment to create the graphics to export to Swift 3d.

Step 2: Creating the Graphics

Using whatever tools you feel comfortable with, create the basic shapes of the Santa and his Skidoo. I used the pen and pencil tool to create the basic shapes, the fewer anchor points and detail you use the better. This will speed up the time it takes for Swift 3d to import the objects you have created in Flash, and also make the 3d models easier to modify and render in Swift 3d.

An important thing to know is that Swift doesn’t like gradient fills or strokes created in Flash. So just use single color fills and make sure you delete any strokes/outlines.

Step 3: Exporting Your Graphics

File > Export > Export Image > Adobe Illustrator… I’ve saved my file as “father_xmas.ai”.

Step 4: The Swift 3d Interface

I could produce a whole tutorial on the in’s and out’s of Swift 3d, but just to give you an idea of what Swift 3d is like and how easy it is to use I’ve included an image of the interface. The interface is made up of these main elements …

• Property Tools.
• Lighting Tools.
• Tracking Tools.
• Gallery Tools.
• Edit Tools.
• Animation tools.
• Hierarchy Tools.
• Editor Selector.

As this is only a simple beginner’s tutorial we’ll be using most of these tool and functions, but nothing too complicated…

Step 5: Importing Your Graphics

1. Open Swift 3d.
2. File-Import.
3. Select your .AI file you exported from Flash.
4. Select "Open".

It will take a minute for Swift to import all the graphics and data.

Step 6: Our Imported Graphics

As you can see, our graphics have come in pretty much as we created them in Flash. Swift is good at creating these extrusions on its own using the "Extrusion Editor", but I find it easier to draw in Flash, so I use Flash to create all my Extrusions.

Step 7: Adjusting Our Layout in Swift 3d

First thing we want to do is adjust the size of our layout. In the "Property Tools" change the following settings:

1. Set the layout in this tutorial to 600×600 pixels.
2. Change the "Nudge Increment" to "0.01" to allow greater accuracy when we come to move the objects around later on.

Step 8: Viewing Imported Graphics

The first thing to do is change our first viewport to a "Default Target Camera" View, this allows us to rotate and view our Santa freely in any direction.

1. Select the camera view in the top left corner of one of the viewports.
2. Change it to "Default Target Camera".
3. If you hold down the "cmd" key on a Mac or the "Ctrl" key on a PC, place your cursor anywhere in the Default Target Camera Viewport and you can move your mouse to rotate the view port to get a good look at what you have created.
4. If you hold down the right-click button on your mouse, cmd/Ctrl key and drag, it allows you to zoom in and out with the Default Target Camera view.

These cmd/Ctrl/right-click techniques do take a bit of getting used to, but stick with it and it will soon become second nature to you.

As you can see they are all pretty much the same depth at the moment, we can easily change that, but the first thing to do is name all our objects so we know our arms from our legs!

Step 9: Viewing Objects

I thought it might be worth pointing out how to move your focus point in the "Default Target Camera". This red circle with a green vertical line through it is your camera focus/target point. If you click in the middle of this shape and drag, it will move the target position of your camera.

Step 10: Un-Grouping Imported Graphics

Swift 3d has grouped all our objects and I have 24 objects in my "Hierarchy Menu". First thing to do is "Ungroup" these objects/extrusions. To do this select "Arrange", then "Ungroup". Click anywhere in a viewport and your objects will appear in a list called Extrusion, Extrusion 1, 2, 3 etc…

Step 11: Re-naming Imported Graphics

1. You can click on any Extrusion in the "Hierarchy" box or you can click on the actual object in the "Viewport".
2. Open the "Property Tools".
3. Select "Object" from the menu.
4. Simply type in the name of that object, then press "Enter".
5. Repeat this for all the extrusions.

I know it’s a bit tedious but it will help you later on!

Step 12: Creating Parent and Child Relationships

To parent the foot to the leg for example is easy. Simply drag the RightFoot onto the RightLeg to create the parent child relationship, do the same for the arms, hands and cuffs and the same for the rest of the objects as I’ve done here.

Step 13: Improving the Quality of our Model

This bit is optional but I like to improve the quality of my models. This can increase the file size of the final image or animation, but as ours is relatively simple it shouldn’t matter too much. To do this got to the "Property Tools"

1. Select "Bevels".
2. Drag the "Smoothness" slider to the far right "Smooth".
3. Drag the "Mesh Quality" slider to the far right "High".

Step 14: Moving and Positioning Objects

You can move your objects into position a number of ways:

1. Using the "Property Tools" you can accurately position your objects by adjusting the X, Y, Z values using numbers or using the sliders.
2. Use your arrow keys to nudge the object.
3. Easiest way…drag to move your object and switch between view ports until you are happy with the placement.

Step 15: The Finished 3d Model

This is what I ended up with as my final model in Swift 3D. Father Xmas sitting on a skidoo! I used a couple of the ski supports as handle bars and colored them red. We’re nearly there now, just a few more steps and we’re done.

Step 16: Re-coloring our Model

The files coloring should look pretty much the same as the graphics you created in Flash. However, I tend to re-color them in Swift as I find that they are a bit too glossy for my liking. To change the color of an object..

1. Go to the “Material” section in the “Property Tools”.
2. Double-click on the little colored ball.
3. This will bring up the “Edit Material” Box. There are loads of tools for you to play around with in here, but all I have done is reduce the "Highlight Strength" and "Highlight Size" by dragging them to the far-left.
4. Click on "Generate Preview" to update the preview thumbnail.
5. To change a color simply double-click on the large color bar and adjust accordingly.

Do this for all or none of your objects, it’s up to you.

Step 17: Adding a Floor

To add a floor to place your model on you need to create a plane, this will allow the shadows to be cast onto a surface/floor.

1. Select the "Create Plane" from the top toolbar. You might need to rotate your view port to see it, but don’t worry if you can’t see it just yet.
2. Go to the "Property Tools" and select "Plane".
3. Change the size of the plane to 1000.00 by 1000.00.
4. Re-color the floor using the same technique in Step 16.

Step 18: Lighting

First we want to remove Swift’s default lighting, or if you want you can keep it as is… I just prefer to add my own lighting setup.

1. First thing to do is make sure you are in the "Top" view port (you can’t edit the lighting if you are in the "Default Target View").
2. Then, in turn click on each of the lights in the "Lighting Tools" and delete them. You’ll know when the light is selected as it turns red instead of yellow.
3. Then hit the "-" (shown here in a red box) or the "Delete Button". Do this for each of the lights.

Step 19: Adjusting the Lighting

Now we’re ready to create our own lighting. Still in the "Top View":

1. Select the "Create Trackball Point Light" as shown below.
2. Then in the "Property Tools", select the "Point Light" you have just created.
3. Double-click in the "color box" and change it to a mid gray – (this will tone down the brightness of the light).
4. Leave the light size at 0.00, turn off everything in the "Options" but leave it "Active".

Step 20: Adding More Lights

OK, we need to create more lights by doing exactly the same as "Step 19". The new light will appear over the top of the light you have just created, so we need to move it to another position.

Make sure the "Lock Spin" button is toggled to "On" This will rotate around a fixed axis.
1. Make sure you have "Rotation Increment" set to 90 degrees.
2. Then simply click drag the second light you’ve created around the trackball.
3. Do this 3 times so that you have 4 equal lights around the trackball (Name your lights if you wish …Front, Left, Right, Back).
4. Create 1 more light. This will be our top light and will cast the shadows in the scene.
5. Make sure the "Lock Vertical" toggle is active and drag it up to the top of the scene.
6. With this light you want the "Shadows" to be active.

Step 21: Rendering Santa

If you’re using the trial version you won’t be able to export any of your renderings, but you can screen grab what you have done and save it out as a bitmap and crop it in Photoshop. If you have the full working version, Swift 3d comes with a built in Smart Layer rendering function, which separates our graphics/animations into layers. This means that things like shadows, moving objects and transparency layers are separated onto their own layer to help reduce file sizes and makes editing in Flash easier.

Swift can render to both Vector and Bitmap formats, can export to all the standard .swf, .AI and the .SWFT (Smart Layer) for vector formats and render to .png, .jpeg etc in the bitmap formats.

OK here we go…

Make sure the "Default Target View" is active in the "Scene Editor" (swift will render the active viewport by default).

1. Click on the "Preview and Export Editor".
2. Once in the Preview and Export Editor, under the "General" Settings set the Compression to "Quality" and the Curve Fitting to "Lines".
3. Under the Fill options "Fill Type" select "Area Gradient Shading".
4. Make sure "Include Shadows" is selected.
5. Adjust the shadow density to something similar as shown.

Step 22: Rendering Santa Continued..

1. Click on the "Generated Selected Frames", it will take a few minutes to render.
2. If you are happy with what you see rendered click "Export Selected Frame".
3. Export the frame to a location of your choice, and name it what ever you want.

Step 23: Importing Santa into Flash

1. Open Flash.
2. Create a new document.
3. Set the stage to 600×600 pixels.
4. Choose "File"-"Import".
5. Locate the Swift 3d .SWFT file we exported from Swift 3d.
6. Click on it to import it to either the "Stage" or "Library".
7. If you imported it to your library simply drag it an position it on stage.

All done!

Conclusion

In this tutorial I’ve shown you the basics of using Flash and Swift 3d together to add an extra dimension to your Flash design work. There’s certainly a lot to cover with Swift 3D and I hope this gives you an idea of what you can achieve using these two pieces of software together. Once you’ve explored the capabilities of Swift 3D I’m sure, like me, you’ll find you use it all the time.

I hope you liked this tutorial, thanks for reading and have avery merry Christmas!

View full post on Activetuts+