In this tutorial you will learn how to create a floating background; I saw a post in the forums about this type of floating navigation so I thought to make a tutorial about it. So here we go!

Results:

  1. Create a new document and set the size you want (I used the default size) cause it will not affect our script since we will use Stage.width and Stage.height.
  2. Set the background to black.
  3. Create a new movie clip, name it float1 and check the "Export for Action Script" check box, and draw a circle into it.


  1. Create another movie clip and name it "virtual" we will talk about it later, same process of the circle, but draw a rectangle into it and center it to the TOP LEFT in your movie clip.
  2. How it works:
  • Imagine you have X layers and layer 1 has a width equal w and a height equal h the second layer have width equal 2w and a height equal 2h and so on, now on each layer we have some fix object, how about each layer interact with the mouse movement, for example layer number i, so if the mouse is at (x,y) of the stage the layer number i will have x=((Stage.width-layer.width)/Stage.width)*xmouse y=((Stage.height-layer.height)/Stage.height)*ymouse now how about adding some tweening the formula is v+=( finalValue - currentValue)/easingStrenth.
  1. now lets take a look to our script:
    //define number of layer.
    var layer = 10;
    //number of items in a layer
    var items = 25;
    //create the bg that holds the layers
    this.createEmptyMovieClip("bgHolder", this.getNextHighestDepth());
    //this function will update the layers current position
    function updateMovies() {
     //easingStrenth
     d = 10;
     this.x = _root._xmouse;
     this.y = _root._ymouse;
     //get the linear relation fo x.
     var coef = (Stage.width-this._width)/Stage.width;
     //update x with easing.
     this._x -= (this._x-coef*this.x)/d;
     //get the linear relation fo y.
     coef = (Stage.height-this._height)/Stage.height;
     //update y with easing.
     this._y -= (this._y-coef*this.y)/d;
    }
    //init function for the layers
    function init() {
     for (i=0; i<layer; i++) {
      //create a layer
      temp = this.bgHolder.createEmptyMovieClip("bg"+i, this.bgHolder.getNextHighestDepth());
      depth = temp.getNextHighestDepth();
      //create a virtual bag for the layer to define it height and width.
      virtual_mc = temp.attachMovie("virtual", "vitrual"+depth, depth, {_visible:false, _width:(i+2)*Stage.width, _height:(i+2)*Stage.height});
      //put the items into the layer
      for (j=0; j<items; j++) {
       depth = temp.getNextHighestDepth();
       //attach an item
       temp1 = temp.attachMovie("float1", "float"+depth, depth);
       //position it randomly in the current layer
       temp1._x = Math.random()*(i+2)*Stage.width;
       temp1._y = Math.random()*(i+2)*Stage.height;
       //scale it randomly
       rand = Math.random();
       temp1._xscale *= .5+rand;
       temp1._yscale *= .5+rand;
       //put is opacity randomly
       temp1._alpha = random(80)+20;
      }
      //each layer share the same updating function.
      temp.onEnterFrame = this.updateMovies;
     }
    }
    init();

That's it, it s done I hope it will help.

Happy Flashing.