I’m using the following parallax class, which I downloaded from fuoridalcerchio.net, but it’s no longer available:
ParallaxBox.as:
package {
import flash.display.MovieClip;
import flash.events.*;
import flash.utils.Dictionary;
import flash.filters.BlurFilter;
dynamic public class ParallaxBox extends MovieClip
{
// private properties
private var theObjects:Array;
private var theMode:Number;
private var theState:Number;
private var theStarts:Dictionary;
// user definable properties
private var _blurred:Boolean = false;
private var _xrate:Number = 1;
private var _yrate:Number = 1;
private var _autodetect:Boolean = false;
// public constants for parallax movement
public static const HORIZONTAL:Number = 1;
public static const VERTICAL:Number = 2;
public static const BOTH:Number = 3;
// debug mode (use it to trace errors)
public static const DEBUG:Boolean = false;
public function ParallaxBox() {
theObjects = new Array();
theStarts = new Dictionary();
addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
}
private function init(e:Event):void {
if (DEBUG) {
trace("init ok");
}
theState = 0;
}
public function set mode (v:Number):void {
theMode = v;
if (DEBUG) {
trace("mode selected: " + v);
}
}
public function set xrate (m:Number):void {
_xrate = m;
}
public function set yrate (m:Number):void {
_yrate = m;
}
public function set blurred (m:Boolean):void {
_blurred = m;
}
public function set autowing (m:Boolean):void {
_autodetect = m;
}
public function addParallaxItem(s:String, wingx:Number, wingy:Number, pixelHinting:Boolean = false):void {
var clip:MovieClip = this.getChildByName(s) as MovieClip;
theObjects.push( { movie: clip, wingx: wingx, wingy: wingy, startx: clip.x, starty:clip.y, pixelhinting: pixelHinting } );
if (DEBUG) {
trace("object added to render list: " + clip);
}
}
public function start():void {
addEventListener(Event.ENTER_FRAME, onFrame, false, 0, true);
}
public function pause():void {
removeEventListener(Event.ENTER_FRAME, onFrame);
}
private function onFrame(e:Event):void {
if (isOverStage())
{
var xP:Number = -(100 / (stage.stageWidth * .5) * this.mouseX);
var yP:Number = -(100 / (stage.stageHeight * .5) * this.mouseY);
var hwing:Number;
var vwing:Number;
for (var m:Number = 0; m < theObjects.length; m++) {
var clip:MovieClip = theObjects[m].movie;
hwing = theObjects[m].wingx;
vwing = theObjects[m].wingy;
if (_autodetect == true) {
//hwing = (clip.width * .5) - (stage.stageWidth * .5);
}
if (theMode == 1 || theMode == 3) {
var targetx:Number = theObjects[m].startx + ((hwing / 100) * xP);
var xdiff:Number = clip.x - targetx;
var xamount:Number = (xdiff / _xrate);
var xblur:Number = Math.abs(xamount) * 1.1;
clip.x -= xdiff / _xrate ;
if (theObjects[m].pixelhinting) {
clip.x = Math.floor(clip.x);
}
}
if (theMode == 2 || theMode == 3) {
var targety:Number = theObjects[m].starty + ((vwing / 100) * yP);
var ydiff:Number = clip.y - targety;
var yamount:Number = (ydiff / _yrate);
var yblur:Number = Math.abs(yamount) * 1.1;
clip.y -= ydiff / _yrate ;
if (theObjects[m].pixelhinting) {
clip.y = Math.floor(clip.y);
}
}
if ((Math.floor(xblur) >= 1 || Math.floor(yblur) >= 1) && _blurred == true) {
clip.filters = new Array( new BlurFilter(xblur, yblur, 1) );
}
}
}
}
private function isOverStage():Boolean
{
var mouseX:Number = stage.mouseX;
var mouseY:Number = stage.mouseY;
return stage.hitTestPoint(mouseX, mouseY, false);
}
}
}
I created a mc container named parallaxContainer, which holds the parallax items, and defined it’s class as ParallaxBox. Then, to initialize the class, I used (as per the instructions that were once on the site I mentioned):
//ParallaxBox
parallaxContainer.addParallaxItem("bg", 960, 0, true);
parallaxContainer.xrate = 8;
parallaxContainer.yrate = 8;
parallaxContainer.mode = ParallaxBox.HORIZONTAL;
parallaxContainer.blurred = false;
parallaxContainer.start();
function StartParallax()
{
stage.addEventListener(Event.MOUSE_LEAVE, offStage);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onStage);
}
function offStage(e:Event):void
{
parallaxContainer.pause();
}
function onStage(e:MouseEvent):void
{
if (stage.mouseX > stage.x &&
stage.mouseX > stage.y &&
stage.mouseY < stage.y + stage.stageHeight)
{
parallaxContainer.start();
}
}
StartParallax();
Right now I have just added one item for testing purposes (bg) and it works perfectly as long as I don’t resize the browser window. I’m no programmer, but as far as I can tell, the class adds items to the array “theObjects” using the function addParallaxItem. The first value is the instance name of the object to add, the second is the horizontal range in pixels which the object is allowed to pan (set to 960 since my stage is 960px wide) and the third is the vertical range(which is set to 0). You can see how it works here.
As you can see, if the browser window is larger than 960px, the “bg” movieclip shouldn’t travel 960px to either side to reach the edge. I’m not very good at math, so I don’t know how to calculate the new distance it should travel, which should be less.
My second dilemma is updating this new value on the “theObjects” array each time the browser is resized. So far, I have only got this
//resize functions
var parallaxBounds:Number = 960;//this should be a formula to calculate the distance the mc should be allowed to pan
stage.addEventListener(Event.RESIZE, onResizeStage);
function onResizeStage(evt:Event):void
{
if (stage.stageWidth >= 961)
{
parallaxBounds = Math.round(stage.width / 2) - 480;
}
else
{
parallaxBounds = 960;
}
}
//and I updated the parallax box initialization this way:
parallaxContainer.addParallaxItem("bg", parallaxBounds, 0, true);
Obviously, even though the value of the variable is updated, it’s not passed to the array. Sorry for the long winded explanation. Hope someone can be a hero and help me out
Cheers!
