orangeSPLoTCH » Tutorials

Flash Tutorial: Eyes Following the Mouse

mattc — Tue, 21 Apr 2009 13:59:25 +0000

Have you ever seen those paintings where the eyes are always looking at you no matter where you stand. Well, sorry, this tutorial won’t teach you anything about painting. This simple Flash tutorial goes over how to make a pair of eyes follow the mouse using Actionscript.

Jump straight to the source code if you’d like to skip the details.

The eye

First you need to create three Sprites for each eye. The pupil, the eye, and the mask for the pupil. The mask for the pupil needs to be identical in shape to the part of the eye where the pupil shows. In my case, the eye and the mask for the eye are identical circles. To make things easier on yourself, the registration point for both the pupil and the eye should be located at the center of each.

For this tutorial, I’ll be doing everything in basic Actionscript. However, you are free to use images or MovieClips for your eyes. In fact I’d encourage it, as that will look way better than my goofy circle eyes.

I’m not going to bother pasting my eyeball creation and placement Actionscript here, since it isn’t important to the tutorial. If you really want to see it, just download the source code at the bottom of the article.

So now that you have your eye, pupil and mask, place them on the screen wherever you want. Make sure you mask the pupils with the mask object. Otherwise you’ll have some weird floating pupil effect. Again, I’m doing all of this in the Actionscript, but you are free to manually place everything on the stage. That’s actually the easier way to do it, since you can see exactly where they are going.

It follows me everywhere I go

Ok, enough talk about making and placing eyeballs on the stage. The real reason you are reading this is to see how to get your eyes to follow the mouse. As I said before, the code is really simple.

First calculate the offset between the mouse position and your eye. In this case I have two eyes, so I created the _focalPoint object to compare against. My _focalPoint is located right between the two eyes. This allows both eyes to move together in uniform instead of getting cross-eyed in the middle. The following code goes in your EnterFrame handler function.

// calculate mouse offset
var distx:Number = mouseX - _focalPoint.x;
var disty:Number = mouseY - _focalPoint.y;

Finally we reposition the pupils based on this offset. You will notice that we are scaling down distx and disty. This is so the eyes don’t move so far that they are no longer visible. I am using a factor of 25. You may need to change this depending on how wide or thin your stage is and where you position the eyes. Experiment a little to get it just right.

// set the eyes according to the mouse offset
_pupil1.x = _eye1.x + (distx / 25);
_pupil1.y = _eye1.y + (disty / 25);
_pupil2.x = _eye2.x + (distx / 25);
_pupil2.y = _eye2.y + (disty / 25);

Because we set the registration point of both the eye and the pupil Sprites, we can use the eye .x and .y properties to place the pupil. This makes the code a lot cleaner as you can see.

And there you go. Nice rolling eyes going everywhere your mouse goes. Like I said, it’s a very easy effect to make once you know how to do it. No complex trig. No fancy classes. Just plain simple Actionscript.

Eye Following Downloads

Rolling Eyes Actionscript 3.0 source file.

If you have any questions, please let me know either in the comments below or through the contact form. I’d love to see what you guys come up with this. So go set your mouse following eyeballs free. Enjoy!

Tutorial: Polar Coordinate Plotting in Actionscript

mattc — Fri, 17 Apr 2009 14:52:26 +0000

A long, long time ago someone requested that I post a tutorial based on some polar coordinate experiments I was doing. I think it’s about time to get this post published.
As usual, if you are just interested in the code, you can skip straight to the source.

Polar Coordinate Basics

In Flash, like most other graphics applications, elements are positioned using the Cartesian coordinate system. While you may not be familiar with the name, you are probably familiar with the way it works. Location coordinates are set using x and y positions. “x” represents a horizontal offset from the origin (top left corner of the screen), and “y” represents the vertical offset from the origin.

The polar coordinate system also uses two values, r and θ (theta). “r” is the radial distance from the origin, and “θ” is the angular offset from 0 (a line going straight up from the origin). The following image shows the differences between the two coordinate systems.

That’s all the explaining of the two coordinate systems that I’ll waste your time with here. If you’d like to learn more about them, you can consult Wikipedia.

http://en.wikipedia.org/wiki/Polar_coordinate_system
http://en.wikipedia.org/wiki/Cartesian_coordinate_system

So why do we care? When positioning things in Flash, it is usually easier to use the default Cartesian (x, y) system. However, for positioning objects that rotate around a fixed point, the Polar Coordinate system is much more efficient.

For example, here are two ways to move an object in a circle around the screen. One uses Cartesian coordinates and one uses Polar coordinates.

// Cartesian coordinate circle
obj.x = radius * cos(t);
obj.y = radius * sin(t);
t += increment;

// Polar coordinate circle
obj.theta += increment;

As you can see the code is much simpler in the Polar coordinate example. We didn’t have to deal with cos or sin, and we only had to change one value of the object (θ) since the radius of the circle doesn’t change. Are you convinced?

Unfortunately Flash does not directly support Polar coordinate plotting. It’s an easy problem to get around, though. For my work, I’ve created an Actionscript class derived from the Sprite class which adds Polar coordinate functionality. I call it PolarSprite. How’s that for creative! I’m not going to pretend that I’m the first person to have done this, or that my class is the most elegant/efficient one out there. But it works great for me.

How to go Polar

I’m not going to go into the details of my PolarSprite class. You can look at the source code if you really want to see how it works. However, I will quickly show you the translation from polar coordinates (r, θ) to Cartesian coordinates (x, y).

x = offset_x + r * Math.cos( theta );
y = offset_y + r * Math.sin( theta );

The offsets are used to set the origin of the polar coordinate somewhere away from the top left corner of the screen. Usually, you want the center of the rotation to be in the center of the screen when you have an object orbiting around in a circle.

Experimenting in Polar

Now that you know how to translate from the Polar coordinate frame into the Cartesian, the real fun begins. Here is some example AS3 code using the PolarSprite class to make an object move in a simple circle.

public function PolarCircle(){
  // create and initialize the animation
  inc = 0.1; // how much to rotate each frame
  hero = new PolarSprite();
  hero.SetOrigin(250, 50);
  hero.r = 50; // radius of the circle animation
  hero.addChild(new BigHero()); // BigHero is the flying guy graphic
  hero.addEventListener(Event.ENTER_FRAME, this.Rotate);
  addChild(hero);
}

private function Rotate(event:Event):void {
  // rotate the image in a circle
  hero.theta += inc;
}

And there you go. Flying, polar-coordinate Flash fun. For all my talking, it really isn’t that complicated to do. In a later post I’ll go over ways to get some really cool variations in your animations, but for now, here’s a little teaser.

Polar Source

Here are the source files for your downloading pleasure. Feel free to use them however you’d like. And if you really want to make my day, send me a link so I can check out your work. Enjoy!

Polar Coordinate Actionscript 3.0 source files.

WordPress Media Plugin Tutorial 1: Custom media tabs

mattc — Thu, 29 May 2008 15:31:47 +0000

This is the first tutorial in a series covering the media hooks available in the WordPress 2.5 API. This article shows how to add a custom media tab to WordPress’s built in media library. We’ll be using the WordPress API to do this, so no code hacks are required. All examples are based on the SwfObj plugin I developed. Feel free to download SwfObj as a reference.

WordPress hooks

WordPress has conveniently added hooks to its core code, allowing developers the ability to modify content and add functionality without having to hack WordPress source files. These include filters and actions. For these tutorials we will be using both the ‘add_filter‘ and ‘add_action‘ functions.

If you are unfamiliar with WordPress’s hooks, I’d recommend reading their API documentation first.

Creating a media tab

When viewing media in WordPress’s media library, there are tabs for images, video, and audio. I am going to add a “Flash” tab to the list. You can add whatever media tab you require.

Adding file type categories is actually quite easy to do. To add a tab, you first need to know the MIME type of your category. Flash files (.swf files) use the ‘application/x-shockwave-flash‘ MIME type. If you don’t happen to know the MIME type for your files, upload one using the WordPress media button. Once it is uploaded, WordPress displays its type right under the file name.

The WordPress hook to add a category tab to your library is the ‘post_mime_types‘ filter. WordPress uses an array called $post_mime_types to store all of the MIME types it lists in the Media Library. To add a new media type, you simply need to add it to this array. The following code adds a “Flash” media category that lists all .swf files in the library.

function modify_post_mime_types($post_mime_types) {
    $post_mime_types['application/x-shockwave-flash'] = array('Flash', 'Manage Flash', 'Flash (%s)');
    return $post_mime_types;
}

add_filter('post_mime_types', 'modify_post_mime_types');

The array that is stored in the new $post_mime_types entry holds the following values

The title of the media type (‘Flash’).
The title to display when viewing this category in the Media Library (‘Manage Flash’).
And the title to put on the tab in the Media Library (‘Flash (%s)’). The %s is replaced by the number of items in this category.

Extras

WordPress allows you to add both general and specific MIME types. You can add an ‘application‘ type which will show all objects whose MIME type starts with ‘application/‘. To only show a specific file type, use the full MIME type, such as ‘application/x-shockwave-flash‘. Make sure if you are declaring something specific, that you use the full MIME type, not just the value after the ‘/‘.

Here are a few file types you may be interested in.

PNG: image/png
PDF: application/pdf
ZIP: application/zip

You can also remove media types from the list if you’d like. To do this, use the unset function. Here is an example that removes the ‘audio’ category from the Media Library.

function modify_post_mime_types($post_mime_types) {
    unset ($post_mime_types['audio']);
    return $post_mime_types;
}

And there you have it. Total control over the media types listed in WordPress using the WordPress API. In future posts we’ll discuss how to customize uploading, editing and embedding media into your posts. Please post any comments or questions you have.

If anyone has a better name for the “WordPress 2.5 Media API tutorial series” please let me know. That’s a monster to type out.

WordPress Media API tutorial series

mattc — Wed, 28 May 2008 00:45:14 +0000

Recently I developed the SwfObj WordPress plugin. This required using several newly available WordPress media hooks. Unfortunately, few of these are documented and it took a lot of trial and error to get things working. In the hopes of helping other developers save a few hours, I’m putting together a series of tutorials based on what I learned.

Coming Soon to a Feed near you

The plan is to make these short and simple. Each one will highlight one or two API hooks available in WordPress and how they work. The first in this series will be released later this week. If you are interested, subscribe to the feed and you’ll be ready to go. Or just check in later this week

If you have any questions or requests, please let me know. Feedback will drive the development of future articles. And as always, donations are very much appreciated.

I am also looking for sponsors of this series if anyone is interested. All the articles will be published freely here irregardless of whether I get any funding. It doesn’t hurt to ask, I hope.
If interested, contact me for terms.

Actionscript Tutorial: Starry Night

mattc — Tue, 29 Apr 2008 14:11:27 +0000

This is a very basic Actionscript tutorial that will show you how to make a sky full of twinkling stars. Everything for this tutorial will be done in Actionscript, using Actionscript 3.0. It is targeted at novices, but hopefully pros and newbies alike can get something from it. Make a wish on the first star you see and maybe your dreams will come true.

The first star I see tonight

First we need to make our black sky. This is going to be a black rectangle that covers the entire area of the Stage. We’ll draw this using a Sprite, which is a type of object that can hold graphics, such as black rectangles. Here is how simple it is to make night.

bg = new Sprite();
bg.graphics.beginFill(0);
bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
addChild(bg);

The last line adds the bg Sprite to the Stage. This is what triggers the Flash player to actually render the object. Until you put this line in, bg is invisible.

Next we are going to need to draw a star. The stars are just tiny circles, so there isn’t too much to drawing them. Make the star by creating a new Sprite, drawing a white circle in it with a 2 pixel radius, positioning it, then adding it to the Stage so it will be displayed. I’ve made the positioning random so every time you run it, your star will be in a different place. The following Actionscript is all we need to dynamically draw our star.

var star:Sprite = new Sprite();
star.graphics.beginFill(0xFFFFFF);
star.graphics.drawCircle(0, 0, 2);
star.x = Math.random() * stage.stageWidth;
star.y = Math.random() * stage.stageHeight;
addChild(star);

In all of the following examples, you can click on the image to regenerate it.

Here is the resulting dynamically created star.

The Milky Way

One star is nice and all, but what we really want is a whole sky full of stars. The Universe has bajillions of stars, but for this tutorial we’ll just make 100. The nice thing about doing this in Actionscript is that we can make 200 stars just as easily. All you need to do is change one number in the code.

To make lots of stars, we put the star creation in a for loop and run it as many times as we want stars. It may surprise you just how easy it is to make lots of stars now that we know how to make just one. Here’s the code with just two extra lines.

for (var i:Number = 0; i<100; ++i) {
    var star:Sprite = new Sprite();
    star.graphics.beginFill(0xFFFFFF);
    star.graphics.drawCircle(0, 0, 2);
    star.x = Math.random() * stage.stageWidth;
    star.y = Math.random() * stage.stageHeight;
    addChild(star);
}

And you’ve got a starry sky.

Now they say variety is the spice of life, but all of these stars are exactly the same, just in a different location. What we want to do now is make them all different sizes. I am going to vary mine between a radius of 0.25 and 1.5, but you can feel free to make yours whatever size you want. Changing the size of the stars to be random is again, very easy. We just need to change one line of code.

for (var i:Number = 0; i<100; ++i) {
    var star:Sprite = new Sprite();
    star.graphics.beginFill(0xFFFFFF);
    star.graphics.drawCircle(0, 0, ((Math.random() * 1.25) + 0.25));
    star.x = Math.random() * stage.stageWidth;
    star.y = Math.random() * stage.stageHeight;
    addChild(star);
}

Twinkle, twinkle little star

To make this starry sky even better, you can add a little twinkle effect. I’ve been playing around with this quite a bit to try and get just the right effect. You want them to flicker, but not too much. It is a sweet spot between not being able to notice the twinkle, to it being way too obvious and annoying.

The effect is by adding an ENTER_FRAME event handler to each star Sprite. The ENTER_FRAME event handler is a function that is called every frame of your movie. To make the stars twinkle I randomly change their their alpha and size very subtly. Also, I keep the value within a certain limit so that the stars don’t disappear on me. Play around with the effect on your own to find your sweet spot.

public function Twinkle(event:Event):void {
    // get the current star to tweak
    var _self:Sprite = Sprite(event.currentTarget);

    // change the alpha and size of the star
    _self.alpha += Math.random() * 0.02 - 0.01;
    _self.scaleX = _self.alpha * 0.5 + 0.5;
    _self.scaleY = _self.alpha * 0.5 + 0.5;

    // do some bounds checking
    if (_self.alpha < 0.5) _self.alpha = 0.5;
    if (_self.alpha > 1) _self.alpha = 1;
}

To infinity and beyond

You can use this wherever you want to throw some stars into a scene. If you don’t want the stars, or the night sky to cover the entire stage, simply change the bounds from the stage.stageWidth and stage.stageHeight to whatever you want them to be. Or put other elements on top of this, like mountains, or a cityscape or whatever you feel like. The possibilities are as numberless as the stars (sorry, that was really pathetic).

Feel free to download the full source files used to make this. Included is a bonus full screen enabled version. Now that’s exciting!

Starry Night Actionscript 3.0 source files.

And that’s the end of our tutorial. Hope you enjoyed your stay. Feel free to leave any comments or questions you have. Thanks!

Flash Tutorial: Elastic Object Follower

mattc — Thu, 17 Apr 2008 14:55:04 +0000

In this tutorial I will show you how to make one object follow another object in Flash. Then I’ll show you how to make the effect more elastic. It’s up to you to figure out an application for it. I use it a lot to get things to follow the mouse around.

The following scripts are written in Actionscript 3.0. However, I’ve also included a .fla done in Flash 8 in for anyone who wants to see it in Actionscript 2.0. If you just want the files, feel free to jump down and download them now.

We’re following the leader!

So first we need to get one object to follow the other object around. Having a two year old son and a dog, I have a lot of experience with things following you. In these examples, the object follows the mouse pointer.

Getting an object to follow the mouse is fairly simple in Flash. In fact, you can just use the startDrag() function, but that sticks the object to the mouse. We’d like it to follow at a distance, so we’ll need to make our own function to do that. This function will be an EnterFrame event handler.

Rather than documenting the entire script here, I’ll just focus on where the real action is. The full Actionscript files are available for download at the end of the article.

private function FollowMouse(event:Event):void {
    // follow the mouse, but not too closely
    distx = follower.x - mouseX;
    disty = follower.y - mouseY;
    follower.x -= distx / 10;
    follower.y -= disty / 10;
}

Basically, all we do here is figure out how far away the follower object is from the mouse. Then we move the object a certain amount closer. Here we are moving 10% closer each frame. And here is the resulting mouse following effect.

Mouse Follower

Now add some elasticity

Now that the object is following, let’s add a little personality to the effect. I know when my son is following me around, he rarely makes a straight path directly to me, nor is he always able to stop once he’s caught up.

Rather than directly moving towards the mouse, we’ll use momentum to insert some elasticity to the objects response. This makes it appear that the object is attached to the mouse by a rubber band. And it is surprisingly easy to do.

private function FollowMouse(event:Event):void {
    // follow the mouse in a more elastic way
    // by using momentum
    distx = follower.x - mouseX;
    disty = follower.y - mouseY;
    momentumx -= distx / 3;
    momentumy -= disty / 3;

    // dampen the momentum a little
    momentumx *= 0.75;
    momentumy *= 0.75;

    // go get that mouse!
    follower.x += momentumx;
    follower.y += momentumy;
}

You will notice that we had to dampen the momentum a little. This keeps it from bouncing indefinitely off the screen. The number you use here needs to be between 0.0 and 1.0. Anything else and you’ll have flubber that shoots off the screen, never to return.

The closer this value is to 1.0, the faster your object will move and the more it will swing around. The closer it is to 0.0, the slower it will move and the less it will overshoot its target. Experiment with it a bit to get the effect you want. You can also speed or slow the object by changing the number that you divide the distance by when adjusting the momentum.

Elastic Mouse Follower

Follow another object

So now you can follow the mouse. What about when you want to follow something else? That’s what makes this script so simple, just replace mouseX and mouseY with the x and y of the object you want to follow and you are set.

distx = follower.x - leader.x;
disty = follower.y - leader.y;

Download the fun

Please feel free to leave any comments or questions you may have about this tutorial. That’s what the comments are all about.

Flash Race Car Tutorial: Part 1

mattc — Sat, 01 Dec 2007 08:33:21 +0000

This tutorial will teach you the basics of making a keyboard controlled racecar in Flash. You could apply this to a spaceship, a gorilla or whatever else you want to control with your keyboard.

Making a car

I’ll leave all of the making the car fun up to you. Design it however you want. Mine is going to be a rectangle. Not very aerodynamic, but it will do the trick. Be sure to set the Actionscript Class name of the car to “Racecar” and check the “Export for Actionscript” box in the Properties menu.

Start your engines

Attention Flash MX 2004 users! Flash Player 8 has a bug that causes it to not catch key releases correctly if more than one key is pressed simultaneously. The problem is fixed in later versions of the player, so while you will see it if you test your movie in Flash MX 2004, web users probably won’t encounter the problem.

The first step is to set up the car’s controls. To allow keyboard buttons to control the car, we need to create a KeyListener object. The KeyListener catches key press and release events similar to the way Flash Button object catches the mouse press and release events. When a key is pressed or released the KeyListener will see that event and show us what key the action happened on. We will program the listener to only pay attention to the arrow keys and call the appropriate function on our car when one is pressed or released.

We are setting up the KeyListener to alert us when the control keys are pressed and when they are released. For instance, when the UP arrow key is pressed, the car will accelerate until it is release. By listening for both the Press action and the Release action we will be able to control the car. I won’t bore you too much with all of the details of how the KeyListener works. Instead I’ll throw you the code and let you see it yourself.

When I’m debugging KeyListeners, I usually put trace statements in my code to make sure the right functions are linked to the right keys. Add trace statements when you are first writing up the code to save yourself a lot of headaches.

// Create key listener
var keyListener:Object = new Object();
keyListener.onKeyDown = function () {
  switch ( Key.getCode() ) {
	case Key.UP:
		_root.mainCar.ForwardOn();
		break;
	case Key.DOWN:
		_root.mainCar.ReverseOn();
		break;
	case Key.RIGHT:
		_root.mainCar.RightTurnOn();
		break;
	case Key.LEFT:
		_root.mainCar.LeftTurnOn();
		break;
  }
}
keyListener.onKeyUp = function () {
  switch ( Key.getCode() ) {
	case Key.UP:
		_root.mainCar.ForwardOff();
		break;
	case Key.DOWN:
		_root.mainCar.ReverseOff();
		break;
	case Key.RIGHT:
		_root.mainCar.RightTurnOff();
		break;
	case Key.LEFT:
		_root.mainCar.LeftTurnOff();
		break;
  }
}
Key.addListener(keyListener);

Let’s burn some rubber

Now that we have a car and some controls, let’s get that car moving!

To run everything, we will be writing (or copying) the Racecar Class. Everything the car does will be controlled by this class.

To start out, I’m going to just throw a bunch of code at you. This code sets up the Racecar class as an extension of the MovieClip class. All we are doing here is setting a bunch of variables to be used later and defining the functions we used in the KeyListener earlier.

class Racecar extends MovieClip {

	private static var MASS_CONST:Number = 10;
	private static var MIN_SPIN:Number   = 1;
	private static var MAX_TORQUE:Number = 1;

	private var maxaccel:Number;      // px. per frame. squared
	private var drag:Number;          // ratio
	private var turnRadius:Number;    // px

	private var _turn:Number;         // 1, 0, -1
	private var _accel:Number;        // 1, 0, -1
	private var vel:flash.geom.Point; // px. per frame
	private var heading:Number;       // radians
	private var spin:Number;          // radians per frame

	// Initialize all the car variables
	function Racecar() {
		// car characteristics
		this.maxaccel   = 1;
		this.turnRadius = 100;
		this.drag       = 0.05;

		// state info
		this.vel = new flash.geom.Point(0, 0);
		this.heading = 0;
		this.spin    = 0;
		this._accel  = 0;
		this._turn   = 0;

		this.onEnterFrame = Update;
	}

	// Updates car state
	private function Update() {
		// *** We'll discuss this function later
	}

	/// - - - - - - - - - - - - - - ///
	///    CAR CONTROL FUNCTIONS    ///
	/// - - - - - - - - - - - - - - ///

	// Forward and reverse
	public function ForwardOn() {
		this._accel = 1;
	}
	public function ForwardOff() {
		this._accel = 0;
	}
	public function ReverseOn() {
		this._accel = -1;
	}
	public function ReverseOff() {
		this._accel = 0;
	}

	// Left and right turn
	public function RightTurnOn() {
		this._turn = 1;
	}
	public function RightTurnOff() {
		this._turn = 0;
	}
	public function LeftTurnOn() {
		this._turn = -1;
	}
	public function LeftTurnOff() {
		this._turn = 0;
	}

}

As you can see, the control functions are pretty simple. They just set the _accel and _turn variables. Rather than bore you with the details of this chunk of code, I wanted to jump straight into the most important part, the Update function. If there is anything here that is confusing to you, or that you’d like explained, feel free to post a comment or send me an email. Hopefully it will all make sense once you see the full code. Each part of the Update function will be explained in detail. Hopefully I don’t bore you to death.

The first step is to get the car’s heading in radians. All of the Math functions in Flash use radians, but the _rotation property is in degrees.

// get the heading
this.heading = Math.PI / 180 * this._rotation;

The next thing we’ll do is update the car’s velocity. First, I apply drag to the car. If the car is not accelerating it will slowly come to a stop. The larger the value of drag, the faster the car loses speed. It only takes a little drag to slow the car down, so don’t set that value too high.

Also, if the car is accelerating, we increase the velocity in the direction it is pointing. The sin and cos of the car’s heading calculates how much of the acceleration should be applied to the x and y direction. The _accel is set by the car control functions and determines whether we are accelerating forward or reverse. The maxaccel variable is how fast the car accelerates. Again, a small value goes a long way here. Set this too high and your car will shoot off the screen. The most important thing is to get your + and - signs right. Otherwise the car will have some interesting behavior.

// Add drag
this.vel.x *= (1 - this.drag);
this.vel.y *= (1 - this.drag);

// Add acceleration
this.vel.x += Math.sin( this.heading ) * this._accel * this.maxaccel;
this.vel.y -= Math.cos( this.heading ) * this._accel * this.maxaccel;

The trickiest part of this code is getting the car to turn. A car turns based on how fast it is moving. If it isn’t moving at all, it isn’t going to turn. The faster you go, the faster it turns. We’ll have to calculate how fast the car turns based on how fast it is moving.

Real cars can turn at varying rates depending on how much you crank the steering wheel. To simplify things, this car will only turn at a fixed rate. We “turn” the car by changing its rotation. Based on the speed of the car and the direction it is turning, we’ll rotate it. Here is the code that does it. Notice the turnRadius variable. The smaller this number is, the sharper the turn the car will make.

var velMag:Number = Math.sqrt(this.vel.x * this.vel.x + this.vel.y * this.vel.y);
this.spin  = velMag / this.turnRadius * this._turn;
var newHeading:Number       = this.heading + this.spin;

Just pointing the car in the right direction isn’t enough, though. We also have to change it’s velocity to match. I’ve added an additional feature that allows the car to spin-out if it is turning too fast.

First we calculate how much the velocity will change to get the car moving in the direction it is pointed. I’m calling this value torque. Next we check the magnitude of this torque against a maximum value. If it is greater than the maximum torque allowed, we limit it. This results in the car spinning out. And finally we modify the velocity by the torque.

If you don’t want your car to spin out, simply remove the code in the if statement or set MAX_TORQUE very high.

// calculate torque (turning the car changes the direction it travels)
var torque:flash.geom.Point = new flash.geom.Point(0,0);
torque.x =  Math.sin(newHeading) * velMag - this.vel.x;
torque.y = -Math.cos(newHeading) * velMag - this.vel.y;
var torqueMag = Math.sqrt(Math.pow(torque.x,2) + Math.pow(torque.y,2));

// limit torque, so the car will "spin out" if turning too fast
if (torqueMag > MAX_TORQUE) {
	torque.x = MAX_TORQUE * torque.x / torqueMag;
	torque.y = MAX_TORQUE * torque.y / torqueMag;
}

// apply torque to velocity
this.vel.x += torque.x;
this.vel.y += torque.y;

And finally we update the car’s position and heading. Not much here, we just set the _x, _y, and _rotation values based on the calculations above.

// update position and heading
this._x       += this.vel.x;
this._y       += this.vel.y;
this.heading   = newHeading;
this._rotation = this.heading * 180 / Math.PI;

And there you have it! A keyboard controlled car of your very own. It might not be as cool as that remote control car that the neighbor has, but this one never runs out of batteries.

Keyboard Controlled Racecar

Feel free to download the full project and play around with the Actionscript files. The best way to learn this stuff is to jump in and experiment, so go for it. I hope you found this tutorial helpful. Any feedback you have on this or any of my other tutorials is welcome. Thanks for stopping by!

Racecar Tutorial Project Files.

Flash Hyperspace Star Field Tutorial

mattc — Wed, 20 Jun 2007 17:44:21 +0000

In this Flash tutorial we are going to make a nice “star field” effect. All you Star Trek junkies could call it the “warp speed effect”. Use it for all your flying-through-particles needs. Are you ready to get your nerd on!

Hyperspace Star Field

The effect is done using two functions, AddStar and FlyingStar. I’ll explain everything in detail in this article. If you’d rather jump into the code and play, skip to the end and download the project.

The first step is setting a few control parameters. The following variables control our hyperspace travel effect. I’ve tried to comment thoroughly, so everything should be self explanatory.

// star control variables
var initVel:Number     = 7; // the starting speed of the star in pixels
var accel:Number       = 1.1; // the star's acceleration off the Stage
var alphaChange:Number = 10; // the fade in rate

// myInterval controls how quickly stars are added to the Stage
// the smaller the number, the more stars you'll have
var myInterval:Object  = setInterval(AddStar, 10); 

// maxOffset is the distance from center stage to a corner
// it is used to calculate the size of the star when it is "born"
var maxOffset:Number   = Math.sqrt(Math.pow((Stage.width/2),2) + Math.pow((Stage.height/2),2));

var i:Number           = 0; // star index

// create a container for all of our new stars
this.createEmptyMovieClip("universe_mc", 10);

A star is born

The AddStar function places a star on the Stage and sets it up for flying. For this to work, you need a MovieClip called “star” set to Export For ActionScript in your library.

The star can be whatever you want it to be, a dot, a smiley face, a dancing banana. You’re the boss.

As you can see in the code, we first attach the star to the universe_mc MovieClip that we made earlier. Next we place it randomly on the Stage by setting its _x and _y. I also wanted the stars to fade in, so I set the _alpha to zero here.

Once the star is placed, we need to figure out how big to make it and what direction to send it flying off the Stage. The size is based on how close it is to the center of the stage. The stars that show up in front of you will look bigger than ones that appear farther out to the edges. That’s a personal choice, feel free to resize your stars however you like.

Figuring out the direction the stars should fly is the trickiest part of this script. You’ll need to pull out your old trig book, or copy the code below. Basically we calculate the angle between the vertical axis and the line from the star to Stage center. Using that angle we calculate the star’s velocity in the _x and _y directions. The stars will now travel in a straight line away from the center of the Stage.

Having the stars fly away from the center of the Stage is key to this effect, so make sure you get it right. Everything else just adds to the effect.

The final line in this block sets the star’s onEnterFrame to the FlyingStar function. This function controls the motion of the star. We’ll talk more about it next.

function AddStar() {
	// a star is born
	var curStar:MovieClip = universe_mc.attachMovie("star", "star_"+i, i);
	++i;

	// initialize the baby star
	curStar._x     = Math.random() * Stage.width;
	curStar._y     = Math.random() * Stage.height;
	curStar._alpha = 0;

	// calculate which angle star will fly
	// the angle is based on the position of the star from
	// the center of the stage.
	var xOffset:Number     = curStar._x - (Stage.width/2);
	var yOffset:Number     = curStar._y - (Stage.height/2);
	var totalOffset:Number = Math.sqrt( xOffset*xOffset + yOffset*yOffset );
	var velAngle:Number    = Math.atan2(yOffset, xOffset);
	curStar._xVel = initVel * Math.cos( velAngle );
	curStar._yVel = initVel * Math.sin( velAngle );
	curStar._xscale = (maxOffset - totalOffset)/7;
	curStar._yscale = (maxOffset - totalOffset)/7;

	// fly away little star
	curStar.onEnterFrame = FlyingStar;
}

Wish upon a flying star

We’ve done all the hard work of placing our star and figuring out its velocity. Now all that’s left is to send it flying. The FlyingStar function will shoot our stars on their merry way. Again, I’ll step through this function for you and explain how it works.

The first part of the FlyingStar moves the position of the star based on the x and y velocities we calculated earlier. To make it look like we’re really flying, we increase the speed of the star on each frame. This makes it accelerate off the page. To do the initial fade in, we increase the _alpha each frame until it is at 100.

If you wanted to get really fancy, you could also add a blur value to the star as it approached the edge of the Stage. I’ll leave that to you to figure out on your own. If you get stumped, just shoot me an email.

Finally we check to see if the star has flown off the Stage. If it has, we remove it from the movie. Not doing this will allow the movie to use more and more memory with each star, eventually bogging down the whole computer. When you are dynamically adding infinite numbers of MovieClips to a movie, be sure to be deleting them just as fast.

function FlyingStar () : Void {
	// move the star
	this._x += this._xVel;
	this._y += this._yVel;

	// accelerate the star
	this._xVel *= accel;
	this._yVel *= accel;

	// fade the star in
	if (this._alpha < 100) this._alpha += alphaChange;
	else this._alpha = 100;

	// check if the star has left the stage
	// if it has, remove it so you don't hog memory
	if (  (this._x < -this._width) ||
		  (this._x > (Stage.width + this._width)) ||
		  (this._y < -this._height) ||
		  (this._y > (Stage.height + this._height))  ) {
		this.removeMovieClip();
	}
}

Warp speed ahead

Now you have everything you need to fly through space. Change variables we set up at the beginning to get different effects. Feel free to experiment all you want. If you really screw something up, just delete it all and start again. If only the real universe were so simple.

Download the Hyperspace Project Files.

This project is published under the Creative Commons Attribution 3.0 License. Feel free to use it however you like. I always appreciate links back. If you have any problems with the scripts, please let me know.

Please post links to any Flash movies you’ve made using this tutorial. I’d love to see how it gets used in the wild.

Flash Momentum Tutorial

mattc — Tue, 24 Apr 2007 22:40:39 +0000

This tutorial will show you how to make items in Flash “throwable” using Actionscript. So if you like throwing things around, this is the tutorial for you.

`startDrag` Woes

As you probably know, Flash comes with a great predefined function startDrag. This makes dragging things around the screen very easy. However, once you call the function stopDrag, the object stops dead in its tracks. If you wanted the object to maintain its motion once stopDrag is called, you will need to add some extra code to your objects.

Get the motion

The first step in maintaining an object’s motion is figuring out what that motion is and saving it. To do this we simply need to save the objects location from the last frame, and then subtract that from the current frame’s location. This gives us the object’s velocity.

As an example of what I mean, I’ve written the following handlers for a ball MovieClip. The key point to be aware of is that I am saving the position of the clip so I can use it to calculate the velocity. We only need to execute this code when the object is not being dragged. The velocity won’t be changing once it is released. To keep the object moving once it is released, we simply add the velocity values to its current position.

You can get some pretty annoying behavior if you don’t include releaseOutside in the events that trigger the stopDrag. This is because the mouse moves before the object does, making it possible to let go of the mouse when the object isn’t under it.

onClipEvent(load) {
	// initialize the variables needed to calculate and store momentum
	this.lastFramePosition = new Object();
	this.velocity = new Object();

	this.lastFramePosition.x = this._x;
	this.lastFramePosition.y = this._y;
	this.velocity.x = 0;
	this.velocity.y = 0;
	this.isDragging = false;
}

onClipEvent(enterFrame) {
	if (this.isDragging) {
		// calculate and save the object's velocity
		this.velocity.x = this._x - this.lastFramePosition.x;
		this.velocity.y = this._y - this.lastFramePosition.y;

		// save the current location to the lastFramePosition
		this.lastFramePosition.x = this._x;
		this.lastFramePosition.y = this._y;
	}
	else {
		// the object is not being dragged, so keep it moving
		this._x += this.velocity.x;
		this._y += this.velocity.y;
	}
}

// Make the object draggable
on(press) {
	this.startDrag();
	this.isDragging = true;
}

on(release, releaseOutside) {
	this.stopDrag();
	this.isDragging = false;
}

Throw-able Ball

Damping and Limiting

As you can see, the ball can get moving pretty fast and shows no signs of slowing down ever. Perhaps this is how you want the ball to behave. For most applications, however, you will probably want to limit the object’s speed to within reason. You may also want the object to slow down over time. The rest of this tutorial will address these two features.

To limit the speed of the ball, we use a little trig. Don’t be afraid of the math, I’ve already worked it out here for you. Those of you who like math can probably figure out what’s going on pretty easily. Those of you who hate it can just copy the code.

// limit the velocity to MAX_SPEED
if ( Math.sqrt(Math.pow(this.velocity.x,2) + Math.pow(this.velocity.y,2)) > MAX_SPEED ) {
	velAng = Math.atan2( this.velocity.y, this.velocity.x );
	this.velocity.x = MAX_SPEED * Math.cos( velAng );
	this.velocity.y = MAX_SPEED * Math.sin( velAng );
}

And finally we’ll slow the object down over time. To slow the object down, we simply multiply the velocity by a number less than zero each frame. You could get the same effect by dividing the velocity by a number greater than zero. As you can see in the code, it doesn’t take much to slow the ball down.

DAMPING_FACTOR = 0.98;

// slow down the ball by the DAMPING_FACTOR
this.velocity.x *= DAMPING_FACTOR;
this.velocity.y *= DAMPING_FACTOR;

Throw-able Ball with Limiting and Damping

The End

And there you have it. Your very own throw-able Flash object. To make things easier, I’ve placed all of the code into the MomentumObject class for anyone to use. Simply link this class to any MovieClip you want and it will be automatically throw-able.

As I am pretty new to this whole tutorial thing, I would love to hear any feedback you might have on this. Was this useful for you? What can I do better? Feel free to leave a comment or send me an email.

Flash Bouncing Ball Tutorial

mattc — Sun, 07 Jan 2007 07:12:44 +0000

To make things a little more fun around here, I have put together a bouncing ball tutorial for Flash. Just like the previous tutorial, this one will be done primarily in Actionscript. Ready, go!

Find a ball

The first thing we’ll need is a ball. Start out with a plain circle. Using Flash’s very useful gradient tools, we can make our ball more realistic. First create the gradient. For the best results, don’t place your darkest shade at the end. Instead place it near the end and at the end of the gradient place a slightly lighter shade to represent reflections off of the floor. Play around with it until you get something you like. Use the Paint-bucket tool to paint your circle, placing the center near the top of the ball and to one side for the best effect.

The trick to a realistic gradient is to keep it subtle. It is tempting to go from really dark to really light, but in reality things only have that kind of contrast if they are directly in a spotlight.

To finish it off we need to convert our ball to a movie clip. Select the ball, then select Modify > Convert to Symbol. In the window that comes up give it a name, select Type: Movie Clip and click OK. And now you have a ball.

Add some bounce

Now that we have a nice ball, it’s time to add some motion. I usually write all of the actions on the actual object to start with. Later I move them to their own Actionscript file. So select the ball MovieClip on your screen and open the Actionscript editor panel.

Before things start moving, we need to initialize a few variables. The Load event is perfect for initializing. These variables when we use them later, for now here’s the code.

onClipEvent(load) {
	this._freefall        = true;
	this._momentumY       = 0;
	this._accelerationY   = 2.0;
	this._floorElasticity = 0.75;
	this._floorY          = 190;
	this._bounceThreshold = 3;
}

All of the interesting stuff happens in the EnterFrame handler. To start with, we want the ball to fall down. We also want it to accelerate as it falls. So we increment the _y value by a variable, _momentumY and then we increase _momentumY by the _accelerationY.

  this._y += this._momentumY;
  this._momentumY += this._accelerationY;

A ball falling forever into the vast depths of outer space off our screen isn’t too interesting. Let’s have it hit a floor at the bottom. To do that, we just add an if statement to see if it has hit solid ground. When it meets the ground we want it to reverse direction. Also, to keep it from bouncing forever, the ground needs to absorb a percentage of its momentum in the process. The ball jiggles indefinitely at the end, so I added the _bounceThreshold to the equation to bring it to rest. Here is what the code looks like.

// bounce it off the floor if it has hit it
if (this._y > this._floorY) {
	this._y = this._floorY; // this prevents the ball from getting stuck in the floor
	this._momentumY = -(this._momentumY * this._floorElasticity) + this._bounceThreshold;

	// keep the ball from jiggling infinitely
	if (Math.abs(this._momentumY) <= this._bounceThreshold) {
		this._momentumY = 0;
	}
}

Bouncy Ball

Go Play!

A ball isn’t any fun unless you can pick it up, so let’s make this ball a little more interactive. Adding the following Press and Release handlers let’s you pick up the ball and drop it wherever you want. You also need to wrap the EnterFrame contents in an if statement so the ball doesn’t keep falling while you’re holding it. Here is the final code.

on(press) {
	this._freefall  = false;
	this._momentumY = 0;
	this.startDrag(false);
}

on(release, releaseOutside) {
	this._freefall = true;
	this.stopDrag();
}

onClipEvent(load) {
	this._freefall        = true;
	this._momentumY       = 0;
	this._accelerationY   = 2.0;
	this._floorElasticity = 0.75;
	this._floorY          = 190;
	this._bounceThreshold = 3;
}

onClipEvent(enterFrame) {
	if (this._freefall) {
		this._y         += this._momentumY;
		this._momentumY += this._accelerationY;

		// bounce it off the floor if it has hit it
		if (this._y > this._floorY) {
			this._y = this._floorY;
			this._momentumY = -(this._momentumY * this._floorElasticity) + this._bounceThreshold;

			// keep it from jiggling infinitely
			if (Math.abs(this._momentumY) <= this._bounceThreshold) {
				this._momentumY = 0;
			}
		}
	}
}

And now you have a bouncing ball. Go have some fun, just don’t go throwing it through the neighbor’s window. Try changing some of the initial variable values to see what happens. If you want a flubber ball that gets higher with each bounce, make the _elasticity > 1.