| Register | FAQ | Calendar | Search | Today's Posts | Mark Forums Read |
|
#1
| |||
| |||
| I've been trying to piece together a way to have an image with a flag wave fade in as soon as the movie loads. Once the image is faded in almost all the way, I want the waving to slow to a stop so at the end, it's a static image. I've gotten most of this accomplished, however, once the flag wave slows and stops, the entire image shifts up and to the right. I'm sure it has something to do with some displacement variable, but since I'm no coder I can't seem to figure out how to stop this. Anyone have any ideas? .fla is hosted here: http://www.filesavr.com/flagfadetest Code: 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("perlin", 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 = 1; // speed at which noise is shifted (causes flap) var channel = 1; // red - red used to displace pixels along // DISPLACEMENT variables var flapX = 40; // power of pixel displacement along x axis var flapY = 80; // 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(0, 0); // 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.BitmapData = new flash.display.BitmapData(ramp._width, ramp._height); var displaceFilter:flash.filters.DisplacementMapFilter = new flash.filters.DisplacementMapFilter(displaceBitmap , offset, channel, channel, flapX, flapY, mode); // PERLINNOISE variables var baseX = 80; // size of noise in x axis var baseY = 0; // 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.BitmapData = new flash.display.BitmapData(500, 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 flag_mc.filters = [displaceFilter]; } // go back to showing main image when the mouse is released onMouseUp = function(){ displace_mc._visible = false; flag_mc._visible = true; } //fade in & out fadeAmount = 1; function fadeIn() { flag_mc._alpha += fadeAmount; if (flag_mc._alpha>=100) { flag_mc._alpha = 100; flag_mc.onEnterFrame = null; } } function fadeOut() { displace_mc.perlin._alpha -= fadeAmount; if (displace_mc.perlin._alpha<=0) { displace_mc.perlin._alpha = 0; displace_mc.perlin.onEnterFrame = null; } if (flag_mc._alpha<=25) { displace_mc.perlin._alpha = 100; displace_mc .onEnterFrame = null; } } flag_mc._alpha = 0; flag_mc.onEnterFrame = function() { flag_mc.onEnterFrame = fadeIn; } displace_mc.perlin._alpha = 100; displace_mc.perlin.onEnterFrame = function() { displace_mc.perlin.onEnterFrame = fadeOut; } // initiate onMouseUp(); |
![]() |
| Thread Tools | |
| Display Modes | |
In an effort to better serve ads to our visitors, cookies are used on objectmix.com. For more information, check out our Privacy Policy.