0 Replies Latest reply on Aug 31, 2010 7:09 PM by Kevin C. Burke

    Customizing Senocular's Motion Blur for Actionscript 2.0

    Kevin C. Burke Level 1

      I'm building banners in AS2 and I've tried to customize Senocular's very handy directional motion blur.

      http://www.senocular.com/flash/source/?id=0.170

       

      The problem I'm having is I can't make this code reusable- I want to use it in a more linear fashion for banners rather then dynamically with mouse clicks. Has anyone had any luck using this in a timeline? Thanks!

       

      This is my attempt to customize at the moment (old_loc is coming up as undefined, which in turn makes new_loc NaN):

      import flash.geom.*;
      import flash.display.BitmapData;
      import flash.filters.BlurFilter;

      Stage.scaleMode = 'noScale';

      var maxBlur:Number = 40;// maximum blur amount for motion blurring
      var easeAmount:Number = .75;// amount of easing to be used for movement (0-1)
      var maxSize:Number;
      var offset:Number;
      var blur_bmp:BitmapData;
      var rotate_matrix:Matrix = new Matrix();
      var blur_rect:Rectangle = new Rectangle();
      var blur_point:Point;
      var blur_filter:BlurFilter;
      var target_loc:Point;
      var blurred_mc:MovieClip;

      function motionBlur(mc:MovieClip, xPos, yPos):Void
      {
          //mc._visible = false;
          maxSize = maxBlur + Math.sqrt(mc._width * mc._width + mc._height * mc._height);
          trace("maxSize = " + maxSize);
          offset = maxSize / 2;
          trace("offset = " + offset);
          blur_bmp = new BitmapData(maxSize, maxSize, true, 0);
          this.createEmptyMovieClip("blurred_mc",1);
          blurred_mc.createEmptyMovieClip("image",1);
          blurred_mc.image.attachBitmap(blur_bmp,1,false,true);
          blurred_mc.image._x = -offset;
          blurred_mc.image._y = -offset;
          blur_rect = blur_bmp.rectangle;// rectangle area filter affects
          blur_point = new Point(0, 0);// offset point for filter
          blur_filter = new BlurFilter(0, 0);// filter (blur, starting with no power)
          //http://flash-creations.com/notes/actionscript_eventhandlers.php
          this.onEnterFrame = moveIt(mc);
          target_loc = new Point(xPos, yPos);
      }

      function moveIt(mc:MovieClip) {
          // get old (current) location of blurred_mc
          var old_loc = new Point(blurred_mc._x, blurred_mc._y);
          trace("old_loc : " + old_loc);
          // develop a new location for blurred_mc with interpolate
          var new_loc = Point.interpolate(old_loc, target_loc, easeAmount);
          trace("new_loc : " + new_loc);
          // assign the new_loc to the position of blurred_mc
          blurred_mc._x = new_loc.x;
          blurred_mc._y = new_loc.y;
          // get the distance from the old loc to the new
          // this will be used to determine how much blur to apply
          var distance = Point.distance(old_loc, new_loc);
          // get the angle from the old loc to the new
          // this will be used to determine the angle of the blur
          var angle = PointAngle(old_loc, new_loc);
          // reset the rotate_matrix to remove any transformations
          // that were applied last frame
          rotate_matrix.identity();
          // rotate the matrix opposite of the angle found between
          // the new and old locations of blurred_mc
          rotate_matrix.rotate(-angle);
          // move the matrix by the offset to account for the
          // centered position of the original click_mc
          rotate_matrix.translate(offset,offset);
          // clear blur_bmp by filling it with empty pixels
          blur_bmp.fillRect(blur_bmp.rectangle,0);
          // draw the rotated, translated click_mc into blur_bmp
          blur_bmp.draw(mc,rotate_matrix);
          // apply the blur power to the blur filter
          blur_filter.blurX = Math.min(maxBlur, distance * 1.5);
          // apply the blur filter to the blur_bmp
          blur_bmp.applyFilter(blur_bmp,blur_rect,blur_point,blur_filter);
          // rotate blurred_mc to counteract the rotation of
          // rotate_matrix used in draw
          blurred_mc._rotation = angle * 180 / Math.PI;
      }

      button_mc.onMouseDown = function():Void
      {
          motionBlur(click_mc, click_mc._x+=20, click_mc._y+=20);
          trace("CLICK MC X: " + click_mc._x);   
          trace("CLICK MC Y: " + click_mc._y);   
      }
      // PointAngle: returns the angle between two points
      function PointAngle(pt1:Point, pt2:Point):Number
      {
          var dx = pt2.x - pt1.x;
          var dy = pt2.y - pt1.y;
          return Math.atan2(dy, dx);
      }