Pendulum swing effect in Actionscript 3

In this tutorial you will learn how to create a Pendulum swing effect in Actionscript 3. A pendulum effect is where an object continually swings horizontally back and forth. To achieve this effect I have used the Math.sin() function. Firstly, if you have ever seen a graphical representation of a Sine wave, you see that it goes smoothly left to right from the angles 0 to 360. The value at 90 degree is 1 and at 270 degree is -1. The Sin wave moves smoothly from 1 to -1. So, instead of going from the values 1 to -1 over again, we can multiple those values by a greater value, for example, 45, which will give values from 45 to -45. These values can then be set to the rotation property of a movie clip to give a smooth swinging motion from left to right.


Pendulum swing effect in Actionscript 3

Step 1

Open a new AS3 file and create or import an image of a pendulum on the stage. I have created my pendulum using the primitive shapes tools in Flash.


Step 2

Convert your pendulum into a movie clip (F8) ensuring you select the top centre registration point. Give the movie clip the instance name: pendulum_mc. Note, the registration point has to be in the top centre for this effect to work.


Step 3

On the timeline insert a new layer called ‘Actions’ then open up the Actions panel and enter the following code:

//Variables to hold the current angle and the rotational degree
var angle:Number = 0;
var rotate:Number = 45;

//Adds an enter frame event to the stage
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//This function rotates the pendulum from 45 to -45 degree 
function enterFrameHandler(e:Event):void{
 pendulum_mc.rotation = Math.sin(angle) * rotate;
 angle +=0.1;
}

I have also been experimenting with the TweenNano class to achieve the same swinging effect. This code will also swing the pendulum left and right from 45 to -45 degree.

//Import the TweenNano class
import com.greensock.TweenNano;

//This function tweens the rotation property of a movie clip to 45 and -45 degrees
function swing(mc:MovieClip):void{
 
 var rotate:Number = (mc.rotation == 45) ? -45 : 45;
 
 TweenNano.to(mc,1,{rotation:rotate,
     onComplete: swing,
     onCompleteParams: [mc]
     }); 
}

//Call the swing function
swing(pendulum_mc);

Step 4

Test your movie Ctrl + Enter.

Colour paint effect in AS3

This colour paint effect in Actionscript 3 is inspired by an application on the ipad where you can alter an image from black and white into colour by using your fingers to paint over the ipad. In this tutorial I will replicate the same effect, but I will be using the mouse to paint over the image. I have used a free stock image for this tutorial.


Colour paint effect in AS3

Step 1 – Setup FLA

Firstly, you will need an image for this tutorial so be sure you have one available. Open a new AS3 file and set the stage dimensions to 400 x 300 pixels and save the file with the name: ColourPaint. The image will need to be saved in the same directory as your FLA file.


Step 2 – Add code

Then open up a new AS3 class file and save it with the name: ColourPaint and add the following import statements and variables.

package  {
 
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.filters.ColorMatrixFilter;
import fl.motion.AdjustColor;
 
public class ColourPaint extends MovieClip {
  
 private var maskSprite:Sprite;
 private var mouseClicked:Boolean = false;
 private var adjustcolor:AdjustColor;
   
 public function ColourPaint() {
 
        }

  }

}

Inside the constructor add the following code. This creates a new instance of the Loader class and loads an external image with an event complete listener.

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.load(new URLRequest("image.jpg"));

This creates a new instance of the AdjustColor class and sets the saturation property to -100. This will give the image an appearance of black and white. Note you cannot have the saturation property on its own, you need the three other AdjustColor properties for this effect to work.

adjustcolor = new AdjustColor();
adjustcolor.hue = 0;
adjustcolor.brightness = 0;
adjustcolor.contrast = 0;
adjustcolor.saturation = -100; 

Then add the following code for the loaded function.

private function loaded(e:Event):void{
     
//adds bitmap on the stage with the height at 300 pixels and the width
//at 400 pixels. The filters property sets the saturation of the bitmap to -100   
var bp:Bitmap = Bitmap(e.target.content);
bp.smoothing = true;
bp.height = 300;
bp.width = 400;
bp.filters = [new ColorMatrixFilter(adjustcolor.CalculateFinalFlatArray())];
addChild(bp);
  
//This create a copy of the bitmap but without filter property
var bp2:Bitmap = new Bitmap(bp.bitmapData);
bp2.smoothing = true;
bp2.height = 300;
bp2.width = 400;
addChild(bp2);
     
//adds sprite container
maskSprite = new Sprite();
bp2.mask = maskSprite;
addChild(maskSprite);
     
//adds the mouse down, move and up listener to the stage
stage.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);
     
//remove listener from loader
e.target.contentLoaderInfo.removeEventListener(Event.COMPLETE, loaded); 
}

The downHandler function sets the mouseClicked to true and the upHandler function sets the mouseClicked to false. The mouseClicked function draws an ellipse shape on the stage when the mouseClicked is set to true

private function downHandler(event:MouseEvent):void {
 mouseClicked = true;
}

private function moveHandler(event:MouseEvent):void {
 var w:uint = 40;
 var h:uint = 30;

 if (mouseClicked == true) {
  maskSprite.graphics.beginFill(0x000000);
  maskSprite.graphics.drawEllipse(mouseX-w/2, mouseY-h/2, w, h);
  maskSprite.graphics.endFill();
 }
}
 
private function upHandler(event:MouseEvent):void {
 mouseClicked = false;
}

Step 3 – Export movie

Select Ctrl + Enter to export movie. Now use your mouse to paint over the image.

Microphone class in Actionscript 3

The Microphone class in Actionscript 3 is one of the few classes that I rarely use, so I thought I would write a post about it. If you take a quick look at the documentation for the Microphone class, you can see that the class is very small and simple. The main functionality of this class is the activity level of the microphone which is basically the amount of sound that is detected. The activity level ranges from 0 (no sound) to 100 (maximum sound).

This example uses the enter frame event to display the current activity level. I have used a vector image of a car to visualise the activity level, so the louder sound the further the car will move across the stage area.

//Instance of the microphone class
var microphone:Microphone = Microphone.getMicrophone();

//Increase the amplification of the sound
microphone.gain = 50;

//Set the microphone's input to loop back through the speaker, so the 
//activity level can be registered
microphone.setLoopBack(true);

//Add an enter frame event to the stage
addEventListener(Event.ENTER_FRAME, ef);

var distance:int = (stage.stageWidth-car.width) / 100;

function ef(e:Event):void{
car.x = Math.abs(distance * microphone.activityLevel); 
}

Another way to check the activity level is to use the ActivityLevel event from the Microphone class. The ActivityLevel event has a Boolean value called ‘activating’ that only dispatch an event when the sound has reached a certain threshold. To set the threshold you use the setSilenceLevel() method. This method has two parameters the first parameter is the threshold of the activity level, so when the activity level goes over the threshold the Activity event will fire. The second parameter is the timeout value which will ignore any activity events for this specified amount of time.

This example uses the Activity level event to change the frame number of the movie clip when the threshold is above 50.

//Instance of the micophone class
var microphone:Microphone = Microphone.getMicrophone();

//Set the activity level threshold to 50 and the delay to 1 second.
microphone.setSilenceLevel(50, 500);

//Increase the amplication of the sound
microphone.gain = 50;

//Set the microphone's input to loop back through the speaker, so the 
//activity level can be registered
microphone.setLoopBack(true);

//Add activity event to the micrphone
microphone.addEventListener(ActivityEvent.ACTIVITY, activityHandler);

function activityHandler(e:ActivityEvent):void{
 
 if(e.activating){
  circle_mc.gotoAndStop(2);
 }else{
  circle_mc.gotoAndStop(1);
 }
}