Flash Filters

Out of context: Reply #10

  • Started
  • Last post
  • 11 Responses
  • hiatus0

    Any idea how to stretch this filter over my art so the whole thing waves:
    Stage.scaleMode = 'noScale';

    /*
    Here, perlin noise is used to create random waves in
    a movie clip that is used as a displacement map for a
    flag movie clip making it appear as though it is waving
    */

    // create a movie clip in displace_mc to
    // draw perlin noise in
    displace_mc.createEmptyMovieClip... 1);
    // ramp is a movie clip already in displace_mc that is
    // used to ease the perlin noise from non effective on the
    // left side of the flag to fully effective on the right
    var ramp:MovieClip = displace_mc.ramp;
    ramp.swapDepths(2); // place ramp above perlin noise

    // ** 50% red is no displacement in the displacement map
    // the ramp goes from 50% red to transparent letting
    // the perlin noise show through as you move further right

    // GENERAL variables
    var speed = 2; // speed at which noise is shifted (causes flap)
    var channel = 1; // red - red used to displace pixels along

    // DISPLACEMENT variables
    var flapX = 30; // power of pixel displacement along x axis
    var flapY = 20; // power of pixel displacement along y axis
    var mode = "clamp"; // clamp the image so none of the original is seen
    // ** inside the flag movie clip there is an invisible border that is
    // used to extend the bounds of the clip beyond that of the flag image
    // this lets the displacement map extend further past the extents of the flag
    var offset = new flash.geom.Point(50, 150); // displacment map offset

    // create BitmapData object encompasing the size of the displace ramp
    // for the displacement and create a displace filter that uses it
    var displaceBitmap:flash.display.Bit... = new flash.display.BitmapData(ramp._w... ramp._height);
    var displaceFilter:flash.filters.Dis... = new flash.filters.DisplacementMapFil... offset, channel, channel, flapX, flapY, mode);

    // PERLINNOISE variables
    var baseX = 45; // size of noise in x axis
    var baseY = 45; // size of noise in y axis
    var octs = 1; // noise functions for noise (smaller = faster)
    var seed = Math.floor(Math.random() * 50); // random seed for noise
    var stitch = true; // stitching makes the noise wrap making it easy to repeat
    var fractal = true; // use fractal noise
    var gray = false; // grayscale is not used because the red channel is

    // create BitmapData object for the noise and apply perlinNoise. It will be repeated
    // along y so it only needs to be 1 pixel high. How long it is determines the
    // variants of noise produced. With the stitching and thanks to beginGradientFill,
    // we will just loop the noise over time.
    var noiseBitmap:flash.display.Bitmap... = new flash.display.BitmapData(1000, 1);
    noiseBitmap.perlinNoise(baseX, baseY, octs, seed, stitch, fractal, channel, gray);

    // the shift matrix allows for the noise to be moved over time
    // using beginBitmapFill since the noise is only created once
    // and just looped for the flag effect
    var shift:flash.geom.Matrix = new flash.geom.Matrix();

    // every frame
    onEnterFrame = function(){

    // move the matrix by speed along x to shift the noise
    shift.translate(speed, 0);

    // drawing in the perlin movie clip,
    // create a rectangle with the perlin noise
    // drawn in it with an offset supplied by the
    // shift matrix
    with (displace_mc.perlin){
    clear();
    beginBitmapFill(noiseBitmap, shift);
    moveTo(0,0);
    lineTo(ramp._width, 0);
    lineTo(ramp._width, ramp._height);
    lineTo(0, ramp._height);
    lineTo(0, 0);
    endFill();
    }

    // draw the displacement movie clip in the
    // displaceBitmap (used in displaceFilter)
    displaceBitmap.draw(displace_mc...
    // apply displaceFilter to the flag
    girl_mc.filters = [displaceFilter];
    }

    // show the displacement image when the mouse is pressed
    onMouseDown = function(){
    displace_mc._visible = false;
    girl_mc._visible = true;
    }
    // go back to showing main image when the mouse is released
    onMouseUp = function(){
    displace_mc._visible = false;
    girl_mc._visible = true;
    }

    // initiate
    onMouseUp();

View thread