I’ve had quite a few questions about how to make depth in flash. Earlier (like, 2 years ago) I put up an experiment file to give some interactive depth to some sketchbook sketches, see Floating Sketches. I’ve finally gotten around to translating that into as3. It’s still the same basic idea, Create layers of levels, and have each one respond to the mouse a little differently. The ‘closer’ depths will move faster while the farther away depths will be slower. A simple technique called Parallax.
- Seperate the scene into layers
- Place the layers in the correct depth
- Make closer layers react fast and farther layers slower
Example
Actionscript
//define number of layer.
var numLayers:uint = 15;
//number of items in a layer
var numBallsPerLayer:uint = 100;
var defaultBallSize:uint = 25;
var stageWidth3d:uint = 800;
var stageHeight3d:uint = 800;
var layers:Array = new Array();
//init
makeMatrix();
//3d created by layers and placing objects on each layer - the layer has it's own distance, simulated by movement and alpha
function makeMatrix():void {
//walk through desired number of layers
for (var layerNum:uint=0; layerNum<numLayers; layerNum++){
//make layer object to add balls to
var thisLayer:MovieClip = new MovieClip();
addChild(thisLayer);
layers.push(thisLayer);
//create desired number of balls per layer
for (var ballNum:uint=0; ballNum<numBallsPerLayer; ballNum++){
//trace("layer: "+layerNum +"; ball: "+ballNum);
var c1:Number = randomColor();
var c2:Number = randomColor();
//create ball
var thisBall:MovieClip = new MovieClip();
thisBall.graphics.beginFill(c1, .9);
thisBall.graphics.lineStyle(defaultBallSize/3, c2, .9);
thisBall.graphics.drawCircle(defaultBallSize, defaultBallSize, defaultBallSize);
thisBall.graphics.endFill();
//apply filter to ball
var myGradientGlowFilter = new GradientGlowFilter(0,
0,
[c1, c2, c1],
[0, .9, 1],
[0, 63, 255],
20,
20,
.9,
BitmapFilterQuality.HIGH,
BitmapFilterType.OUTER,
false);
var myBlurFilter = new BlurFilter((numLayers-layerNum)/numLayers*5, (numLayers-layerNum)/numLayers*5, 1);
var filtersArray:Array = new Array(myGradientGlowFilter, myBlurFilter);
thisBall.filters = filtersArray;
thisLayer.addChild(thisBall);
//coordinates
thisBall.x = Math.random() * stageWidth3d * layerNum;
thisBall.y = Math.random() * stageHeight3d * layerNum;
//size
thisBall.scaleY = thisBall.scaleX = layerNum/numLayers * (Math.random() + 1);
//ball animation
thisBall.layer = layerNum;
thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
}
//layer depth/alpha
thisLayer.alpha = layerNum/numLayers;
}
//listeners to animate from mouse movement
addEventListener(Event.ENTER_FRAME, positionLayer);
}
var easingStrength:Number = 10;
function positionLayer(e:Event):void{
for (var layerNum:uint=0; layerNum<numLayers; layerNum++){
//move layers according to mouse poosition
var xv:Number = (stage.stageWidth-layers[layerNum].width)/stage.stageWidth;
layers[layerNum].x -= (layers[layerNum].x - xv * mouseX) / easingStrength;
var yv:Number = (stage.stageHeight-layers[layerNum].height)/stage.stageHeight;
layers[layerNum].y -= (layers[layerNum].y - yv * mouseY) / easingStrength;
}
}
function animateBall(e:Event):void{
e.target.x += (Math.random() - .5) * 2 * e.target.layer/numLayers;
e.target.y += (Math.random() - .5) * 2 * e.target.layer/numLayers;
}
function randomColor():Number{
return Math.floor(Math.random() * 16777215);
}
var numLayers:uint = 15;
//number of items in a layer
var numBallsPerLayer:uint = 100;
var defaultBallSize:uint = 25;
var stageWidth3d:uint = 800;
var stageHeight3d:uint = 800;
var layers:Array = new Array();
//init
makeMatrix();
//3d created by layers and placing objects on each layer - the layer has it's own distance, simulated by movement and alpha
function makeMatrix():void {
//walk through desired number of layers
for (var layerNum:uint=0; layerNum<numLayers; layerNum++){
//make layer object to add balls to
var thisLayer:MovieClip = new MovieClip();
addChild(thisLayer);
layers.push(thisLayer);
//create desired number of balls per layer
for (var ballNum:uint=0; ballNum<numBallsPerLayer; ballNum++){
//trace("layer: "+layerNum +"; ball: "+ballNum);
var c1:Number = randomColor();
var c2:Number = randomColor();
//create ball
var thisBall:MovieClip = new MovieClip();
thisBall.graphics.beginFill(c1, .9);
thisBall.graphics.lineStyle(defaultBallSize/3, c2, .9);
thisBall.graphics.drawCircle(defaultBallSize, defaultBallSize, defaultBallSize);
thisBall.graphics.endFill();
//apply filter to ball
var myGradientGlowFilter = new GradientGlowFilter(0,
0,
[c1, c2, c1],
[0, .9, 1],
[0, 63, 255],
20,
20,
.9,
BitmapFilterQuality.HIGH,
BitmapFilterType.OUTER,
false);
var myBlurFilter = new BlurFilter((numLayers-layerNum)/numLayers*5, (numLayers-layerNum)/numLayers*5, 1);
var filtersArray:Array = new Array(myGradientGlowFilter, myBlurFilter);
thisBall.filters = filtersArray;
thisLayer.addChild(thisBall);
//coordinates
thisBall.x = Math.random() * stageWidth3d * layerNum;
thisBall.y = Math.random() * stageHeight3d * layerNum;
//size
thisBall.scaleY = thisBall.scaleX = layerNum/numLayers * (Math.random() + 1);
//ball animation
thisBall.layer = layerNum;
thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
}
//layer depth/alpha
thisLayer.alpha = layerNum/numLayers;
}
//listeners to animate from mouse movement
addEventListener(Event.ENTER_FRAME, positionLayer);
}
var easingStrength:Number = 10;
function positionLayer(e:Event):void{
for (var layerNum:uint=0; layerNum<numLayers; layerNum++){
//move layers according to mouse poosition
var xv:Number = (stage.stageWidth-layers[layerNum].width)/stage.stageWidth;
layers[layerNum].x -= (layers[layerNum].x - xv * mouseX) / easingStrength;
var yv:Number = (stage.stageHeight-layers[layerNum].height)/stage.stageHeight;
layers[layerNum].y -= (layers[layerNum].y - yv * mouseY) / easingStrength;
}
}
function animateBall(e:Event):void{
e.target.x += (Math.random() - .5) * 2 * e.target.layer/numLayers;
e.target.y += (Math.random() - .5) * 2 * e.target.layer/numLayers;
}
function randomColor():Number{
return Math.floor(Math.random() * 16777215);
}
4 Comments
Wow this is great! thanks for the post.
Hi, very awesome work ! i build my website in as2 but i want to rebuild in as3
i have a similar source for the float background controlled by the mouse in as2
I am very interesting by your code but i am a beginner in as3 i am a graphic designer not a developer and it’s very hard for me :/
it’s possible to have an help to modify your source for obtain the similar effect with white stars ?
i am waiting for your answer
Kind regards, Yann
Great post. I’ve been trying to research this technique for manipulating layers in photographs(check out http://82.ufc.com/ ) and have found a few tutorials that use as2 but this is the first I’ve seen that is using as3. I’m quite new at all this and was hoping you c0uld show a simple as3 script to give this kind of functionality…much the same as your original floating sketches but in as3.
Great effect
Anyway, I also made Parallax Effect in AS3, it’s pure AS3 class. And I think it can be used for many purposes.
You can check it out here http://as3gameprogrammer.wordpress.com/2010/07/20/parallax-scrolling-effect-in-as3/
Hope this helps people that in need of this simple but beautiful effect