Blog Action Day: Create a Virtual Wind Farm in ActionScript 3

The term wind farm refers to a group of wind turbines in one location used for production of electric power. Compared to the environmental effects of traditional energy sources, those of wind power are relatively minor. Wind power consumes no fuel and emits no air pollution, unlike fossil fuel power sources.

In this tutorial, you'll learn how to create a virtual wind farm using ActionScript 3.0.

This post is part of Blog Action Day 2009, a worldwide initiative started by Envato founders Collis and Cyan Ta'eed, now being run by Change.org. Blog Action Day exists to change the conversation on the web for one day by uniting thousands of bloggers around one important issue - this year, Climate Change. It's not too late to register your blog and participate.

Step 1: Brief Overview

We're going to grab the returned value of the activityLevel property of the Microphone class, then pass it to the rotation property of a previously created Turbine MovieClip.

This will result in our wind turbines rotating relative to sound levels picked up by the microphone. Users will literally be able to blow on their screens and watch the turbines spin!

Step 2: Create a New Flash File

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600x300 and the frame rate to 24 fps.

Step 3: Background

We'll create a simple vector illustration to contain our wind farm.

Select the Rectangle Tool (R) and create a blue linear gradient (#81CCFE, #D0EAFB) rectangle of the size of the stage.

Use the Gradient Transform Tool (F) to rotate the gradient, leaving your background looking like this:

This will be our sky.

Step 4: Grass

Now let's add some grass on which we can place our wind turbines.

Again, select the Rectangle Tool and create a 600x30 px, green linear gradient (#9AB937, #AFC232, #9AB937) rectangle and align it to the bottom of the stage.

Use the Selection Tool (V) to grab the upper edge of the rectangle (you'll notice the cursor changing to an arrow with a little curve in the bottom) and drag it to make a slight curve to the left; look at the following image for reference.

Step 5: Wind Turbine

Use the Rectangle Tool to draw a #F7F7F7, 10x153 px rectangle and use the Selection Tool to drag the top edges, making it thinner. This will be the base of the turbine.

To create the blades, draw a 1x90 px rectangle then use the Selection Tool to drag the sides and create a semi-oval. You can see this better in the following image.

Duplicate the blade (Cmd+D) and use the Transform Tool to rotate it. Repeat this step to make a total of 3 blades.

Select the Oval Tool, create a 20x20 px circle and place it in the center of the turbines.

Add some shadow by duplicating the wind turbine and changing its color to #D0D0D0. Next go to Modify > Arrange > Send backward and move the selection 1px to the right.

Step 6: Farm

Convert the blades to a MovieClip and set its instance name as "turbine". Use the Arrange menu again to bring the middle circle to the front.

Duplicate the wind turbine as many times you like, just remember to change the instance name according to the number of turbines.

Step 7: Information

We're going to add some information about the wind turbines as well as the Blog Action Day title.

Select the Text Tool (T) and create a new static TextField. Add the title and the information and use the following filter.

OK, that's the graphic part finished. It should look like this:

Step 8: ActionScript

Create a new ActionScript file (Cmd+N) and save it as "Main.as".

This will be the class that will handle the application.

Step 9: Required Classes

These are the classes that we'll need. For a detailed description of each class please refer to the Flash help (F1).

package 
{
	import flash.display.Sprite;
	import flash.media.Microphone;
	import fl.transitions.Tween;
	import fl.transitions.easing.Strong;
	import fl.transitions.TweenEvent;
	import flash.events.Event;
	import flash.events.ActivityEvent;
	import flash.system.Security;

Step 10: Declaring and Extending the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

public class WindFarm extends Sprite
{

Step 11: Variables

We'll use only three variables in this class, two declared in the next block of code and another one for the Tween declared in the rotation function.

private var started:Boolean; //True if the turbines are rotating
private var mic:Microphone = Microphone.getMicrophone(); //An Instance of the Microphone Class

Step 12: Constructor Function

The constructor is a function that runs when an object is created from a class. This code is the first to execute when you make an instance of an object or run using the Document Class.

public function WindFarm():void
{
	Security.showSettings("2"); //Shows a Security Dialog asking the user to enable the Microphone
	mic.setLoopBack(true); //Returns the input sound to the speakers

	if (mic != null) //If the mic was enabled...
	{
		mic.setUseEchoSuppression(true); //Reduces echo
		mic.addEventListener(ActivityEvent.ACTIVITY, activityHandler);//Calls the activityHandler function every time the microphone detects sound
	}
}

Step 13: Activity Handler

This code adds a listener to execute the rotation function which will handle the turbines' movement.

private function activityHandler(event:ActivityEvent):void
{
	stage.addEventListener(Event.ENTER_FRAME, rotateTurbines);
}

Step 14: Turbines' Rotation

This function handles the rotation of the turbines.

private function rotateTurbines(e:Event):void
{
	/* If the activity level received by the microphone is between 11 and 19, and the turbines are already spinning,
	   a "slow down" tween is executed*/

	if (mic.activityLevel < 20 && mic.activityLevel > 10 && started)
	{
		var tween;
				
		tween = new Tween(turbine,"rotation",Strong.easeOut,turbine.rotation,turbine.rotation + 720,3,true);
		tween = new Tween(turbine2,"rotation",Strong.easeOut,turbine.rotation,turbine.rotation + 720,3,true);
		tween = new Tween(turbine3,"rotation",Strong.easeOut,turbine.rotation,turbine.rotation + 720,3,true);
		tween = new Tween(turbine4,"rotation",Strong.easeOut,turbine.rotation,turbine.rotation + 720,3,true);
				
		tween.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);//Calls a function when the turbines stop
	}
	else if (mic.activityLevel > 20)// If the activity level is higher than 20, the sound is enough to move the turbines
	{
		started = true; //Turbines are moving

		turbine.rotation += mic.activityLevel;
		turbine2.rotation += mic.activityLevel;
		turbine3.rotation += mic.activityLevel;
		turbine4.rotation += mic.activityLevel;
	}
}

Step 15: Motion Finished

This code is executed when the slow down tween is completed.

private function onMotionFinish(e:TweenEvent):void
{
	started = false;//Turbines are not moving
}

Step 16: Document Class

Go back to the .Fla file and in the Properties Panel add "Main" in the Class field to make this the Document Class.

Conclusion

Now you know how to get, measure and implement the Microphone activity, plus you've learned a little bit about Wind Farms and how they help conserve the planet.

Be green and thanks for reading!