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!



Thanks! :)
Go nuclear!
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!
It does not work on mac safari 4.0.3
It worked for me
Ha! Clever effect, very cool :)
Cool approach to the idea. I sure would love to see more of this! Tnx for posting!
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!
good one :)
Wind farms takes massive amount of land to produce a fraction of traditional energy. It is currently not very practical.
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
Wind not practical!? Serious!? *Wow* Do a little research buddy.
Ön bizonyára valami kellemes vélemények és nézetek. A blog ad friss pillantást a témát.