Get $500+ of the best After Effects files, video templates and music for only $20!

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 600×300 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 600×30 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, 10×153 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 1×90 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 20×20 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!

Add Comment

Discussion 13 Comments

  1. flora says:

    Thanks! :)

  2. André says:

    Very nice, i am in a computer wich doesnt have microphone, but i imagine the result, but when i am home i will test it, thanks a lot!

  3. phil says:

    It does not work on mac safari 4.0.3

  4. MichaelJW says:

    Ha! Clever effect, very cool :)

  5. e-sushi says:

    Cool approach to the idea. I sure would love to see more of this! Tnx for posting!

  6. myname says:

    Great idea for a tutorial! Thnx but I have one problem…..

    I cant figure out how to get the blades of the turbine set up correctly so that the center on which it rotates is the actual center we want it to rotate on.

    So basically i have my turbine rotating all over the place!!!

    Plz help!

  7. akshat says:

    good one :)

  8. mark says:

    Wind farms takes massive amount of land to produce a fraction of traditional energy. It is currently not very practical.

  9. http://mipagina.univision.com/cbpcuvtmlkqv sdsaintsinners | sdsaintsinners
    http://mipagina.univision.com/twiyrrkaubpb saintsinnershac | saintsinnershac
    http://mipagina.univision.com/pcznpwygxdjq saitantsinners | saitantsinners
    http://mipagina.univision.com/lgljyjwbibec gersaintsinners | gersaintsinners
    http://mipagina.univision.com/ircoeubmhplg saintsinnerson | saintsinnerson
    http://mipagina.univision.com/ytkmxuznqkhk basaintsinnersd | basaintsinnersd
    http://mipagina.univision.com/qkzddfisapwn lasaintsinners | lasaintsinners
    http://mipagina.univision.com/ergqhkftsllp faintsiasners | faintsiasners
    http://mipagina.univision.com/fdevyeqyrbtr losaintsinnersa | losaintsinnersa
    http://mipagina.univision.com/twbmwlqvejyx kassaintsinners | kassaintsinners
    http://mipagina.univision.com/hybokgebvswh fdintsinners | fdintsinners
    http://mipagina.univision.com/yodczjgkswui kadsaintsinners | kadsaintsinners
    http://mipagina.univision.com/ifriydloiqkn hassaintsinners | hassaintsinners http://www.design21sdn.com/people/41788 saitantsinners | saitantsinners
    http://www.design21sdn.com/people/41790 saintsinners | saintsinners
    http://www.design21sdn.com/people/41792 basaintsinnersd | basaintsinnersd
    http://www.design21sdn.com/people/41793 safsaintsinners | safsaintsinners
    http://www.design21sdn.com/people/41794 losaintsinnersa | losaintsinnersa
    http://www.design21sdn.com/people/41795 hassaintsinners | hassaintsinners
    http://www.design21sdn.com/people/41796 kassaintsinners | kassaintsinners
    http://www.design21sdn.com/people/41797 sdsaintsinners | sdsaintsinners
    http://www.design21sdn.com/people/41798 saintsinnerson | saintsinnerson
    http://www.design21sdn.com/people/41799 kadsaintsinners | kadsaintsinners
    http://www.design21sdn.com/people/41800 saintsinnershac | saintsinnershac
    http://www.design21sdn.com/people/41801 faintsiasners | faintsiasners
    http://www.design21sdn.com/people/41802 fdintsinners | fdintsinners
    http://www.design21sdn.com/people/41803 gersaintsinners | gersaintsinners

  10. Joshua says:

    Wind not practical!? Serious!? *Wow* Do a little research buddy.

  11. NEX-5 says:

    Ön bizonyára valami kellemes vélemények és nézetek. A blog ad friss pillantást a témát.

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.