Parallax Effect is a native extension to create parallax effect in any application. It allows the developer to add and move as many layers as desired. The developer just adds the layers and the extension takes care of moving and stacking them together. The extension provides some events that can be listened to know the offset X and Y of a layer, for instance.

It’s possible to use the offset information to create custom animation, or to optimize the moving process using any tweening engine. The extension has a set of features, such as add layers (any DisplayObject), Starling integration, the ability to control the direction and movement multiplier of each layer,  uses the device’s rotation sensor to move layers and doesn’t require special permissions.


import com.doitflash.air.extensions.parallax.Parallax;
import com.doitflash.air.extensions.parallax.ParallaxEvent;

var _orgLayer1_X:Number;
var _orgLayer1_Y:Number;
var _orgLayer2_X:Number;
var _orgLayer2_Y:Number;
var _orgLayer3_X:Number;
var _orgLayer3_Y:Number;

// add parallax layers to the app
_layer1 = new Layer1(); // can be any DisplayObject
_layer1.x = -100;
_layer1.y = -100;
_orgLayer1_X = _layer1.x;
_orgLayer1_Y = _layer1.y;
this.addChildAt(_layer1, 0);

_layer2 = new Layer2(); // can be any DisplayObject
_layer2.x = 200;
_layer2.y = 100;
_orgLayer2_X = _layer2.x;
_orgLayer2_Y = _layer2.y;
this.addChildAt(_layer2, 1)

_layer3 = new Layer3(); // can be any DisplayObject
_layer3.x = 200;
_layer3.y = 100;
_orgLayer3_X = _layer3.x;
_orgLayer3_Y = _layer3.y;
this.addChildAt(_layer3, 1)

// set Extension var
var _ex:Parallax; 

// initialize the extension
_ex = new Parallax();

if (!_ex.isSupport) return;

// The first step to start the Parallax effect is to introduce the the layers which you'd like to animate.
// $maxXMovement: The max movement value for every layer on X axle
// $maxYMovement: The max movement value for every layer on Y axle
// $layers:    is an array containing information about each layer object.
// NOTE:     The must have data about each layer are: "name", "fx" and "fy".
// NOTE:     Value of "fx" and "fy" should be between -1 and 1. if this multiplier is 1 or -1, the movement value will be set according to the maxXMovement and maxYMovement. if their value is near to 0, the movement value will be less.
//             if the multiplier value is negative, it's movement will be oposite.
// EXAMPLE: [ { name:'layer1', fx:-0.4, fy:-0.4 }, { name:'layer2', fx:-0.5, fy:0.5 }, { name:'layer3', fx:1, fy:1 } ]
// NOTE: this method must be called prior to the "start" method.
// NOTE:     The offset values that you will receive from the extension are between -maxXMovement and +maxXMovement OR -maxYMovement and +maxYMovement
//             to move your layers around, you should add this value to your original X and Y position of your layer.
// NOTE: on landscape mode, use "offx" for the "Y" of your layer and "offy" for the "X" of your layer.
// NOTE: considering that the Parallax extension will move your layers to left and right, it's important to place your layers initially in a good position.
// param $maxXMovement
// param $maxYMovement
// param $layers
_ex.initLayers(100, 100, [ { name:'layer1', fx:-0.4, fy:-0.4 }, { name:'layer2', fx:-0.5, fy:0.5 }, { name:'layer3', fx:1, fy:1 } ]);

// Use this listener to receive the layers offset information.
_ex.addEventListener(ParallaxEvent.NEW_MOVEMENTS, onLayersMovement)

// As soon as you call this method, the ParallaxEvent.NEW_MOVEMENTS listener will receive the offset data.
// NOTE: Prior to calling this method, you must had called _ex.initLayers

// Call this method and the offset information will not be returned by the extension anymore.

//some rare devices may not support the orientation sensor. call this property to check if it is available.
 var isSupport:Boolean = _ex.isSupport;
 trace("isSupport >> " + isSupport);

function onLayersMovement(e:ParallaxEvent):void {
     // NOTE: on every time the ParallaxEvent.NEW_MOVEMENTS listener is called, information about each layer will be returned.
     // every layer is in an object. Please note that you had previously named your layers. here you can use those names to identify the layers. 
     // EXAMPLE: [ { name:'layer1', offx:-40, offy:-40 }, { name:'layer2', offx:-50, offy:50 }, { name:'layer3', offx:100, offy:100 } ]
     var arr:Array = e.param;
     var i:int = 0;
     var lng:int = arr.length;

     for (i = 0; i < lng; i++) {
        // to animate the layers better, you may use any Tween engine. we use TweenMax, but you can use any other engine of your choice.

        var obj:Object = arr[i];
        if ( == "layer1") {
            _layer1.x = _orgLayer1_X + obj.offx;
            _layer1.y = _orgLayer1_Y + obj.offy; 
            //, 0.25, { x:(_orgLayer1_X + obj.offx), y:(_orgLayer1_Y + obj.offy), ease:Easing.Expo_easeOut } ); 

         if ( == "layer2") {
             _layer2.x = _orgLayer2_X + obj.offx;
             _layer2.y = _orgLayer2_Y + obj.offy; 
             //, 0.25, { x:(_orgLayer2_X + obj.offy), y:(_orgLayer2_Y + obj.offx), ease:Easing.Expo_easeOut } ); 

         if ( == "layer3") {
             _layer3.x = _orgLayer3_X + obj.offx;
             _layer3.y = _orgLayer3_Y + obj.offy; 
             //, 0.25, { x:(_orgLayer3_X + obj.offx), y:(_orgLayer3_Y + obj.offy), ease:Easing.Expo_easeOut } );
Air Native Extension, Android . URL.