circlecube

RSS comments
LinkedIn Twitter delicious fb last.fm

Posts Tagged ‘collage’

parallax_thumbI’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.

  1. Seperate the scene into layers
  2. Place the layers in the correct depth
  3. Make closer layers react fast and farther layers slower

Example

Get Adobe Flash player

parallax_thumb

Actionscript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//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);
}

Source

depth.fla

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
30 Jan 2009

Dynamic 3d space | Floating Sketches Tutorial

Author: Evan Mullins | Filed under: tutorial

A ransom note style collage, quoting the Pearl Jam song Bee Girl, “Everything you imagine needn’t be stuck in your mind.” Made in photoshop as a typography exercise.

imagine everything

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
27 Feb 2007

Imagine Everything

Author: Evan Mullins | Filed under: portfolio

Of course inspired by Andy Warhol’s Marilyn Monroe.
Magazine cutout collage.
Marilyn Magazine Monroe

Original, Andy Warhol 1967.

Marylin Warhol

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
23 Feb 2007

Marilyn Magazine Monroe

Author: Evan Mullins | Filed under: portfolio

Floating Sketches, a simple experiment to study depth and interactivity.

Get Adobe Flash player

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
21 Feb 2007

Floating Sketches

Author: Evan Mullins | Filed under: portfolio