Known Participant

Question

Tweening A Blur Filter

Forum|Forum|16 years ago
May 5, 2009
2 replies
10628 views

I am trying to blur in a movieclip so I'm trying to tween a blur but the movieclip is bluring but not tweening. It shows up already blurred.

Here is my code:

import fl.transitions.*
import fl.transitions.Tween
import fl.transitions.easing.*
import flash.filters.BlurFilter

var totalBlur:Number = 8;

var blur:BlurFilter = new BlurFilter(totalBlur, totalBlur, 3);
behindTheBrushBg.filters = new Array(blur);

var blurTween = new Tween(blur, "blurX", Strong.easeOut, blur.blurX, totalBlur, 5, true);

function onMotionChanged(TweenEvent:Event):void{
blur.blurY = blur.blurX;
behindTheBrushBg.filters = new Array(blur);
}

Thank you in advance.

ActionScript

This topic has been closed for replies.

C

CaioToOn!

Inspiring

Hello, dane.

You can tween every object with the Tween class.

The problem with your code is just that you forgot two things:

1st) add the event to the tween object. ( blurTween.addEventListener(TweenEvent.MOTION_CHANGE, onMotionChanged); )

2nd) you are tweening from totalBlur to totalBlur, so, it will not make any difference. Change the value of the finalProperty to 0, for example.

Try this code:

import fl.transitions.*

import fl.transitions.Tween

import fl.transitions.easing.*

import flash.filters.BlurFilter

var totalBlur:Number = 8;

var blur:BlurFilter = new BlurFilter(totalBlur, totalBlur, 3);

behindTheBrushBg.filters = new Array(blur);

var blurTween = new Tween(blur, "blurX", Strong.easeOut, blur.blurX, 0, 5, true);

blurTween.addEventListener(TweenEvent.MOTION_CHANGE, onMotionChanged);

function onMotionChanged(TweenEvent:Event):void{

blur.blurY = blur.blurX;

behindTheBrushBg.filters = new Array(blur);

}

But, I still recommend you to take a look at th tweening engines around, there.

You should look at GSkinner's tweener ( http://www.gskinner.com/libraries/gtween/ ) or GreenSock TweenMax.

CaioToOn!

DanEdmondsAuthor

Known Participant

Caio,

Thanks for your reply. Your code modifications to the code work exactly how I wanted. As I said in a message before, (you may not have seen it because it came in after yours) I am a bit skeptical in using custom tweens because I've never used them and am not sure if mixing tween engines is good or not. Is it better practice to stay consistent using the same engine for your whole project or is mixing them alright? Also, does adding engines affect file size greatly?

Thanks,

Dan

PS: Sorry, I accidently clicked "helpful answer" instead of "correct answer" so if you reply again I can mark yours as correct so that you get the points.

FlashTapper

Inspiring

I'm having a similar problem right now, and it's driving me nuts.

I can see that you adapted the source code from as2 to as3 for your project here: http://www.actionscript.org/resources/articles/553/1/Blur-Transition-Effect-updated-for-Flash-8/Page1.html

I don't know how you got yours working but mine isn't it, but I suppose you are doing yours a different way and there are a few implicit scripts that are not mentioned.

Anyway, I have a "imageStack" movie clip that holds two movie clips stacked on top of each other (the images).

When you roll over a button, one movie clip blurs away and the other one blurs in. Right now I'm just trying to get the blur tween working.

I would use the Gtween classes but I can't find much documentation about how to use/implement them, so I'd rather go down the path of figuring out my own code.

yeah but right now the image is just coming up blurred without any tweening going on when you roll over the button. And I really don't understand where the property "blurX" comes from??? If I trace it - it comes up as NaN (not a number).

Here is my code anyway:

package  {
     
     import flash.display.MovieClip;
     import flash.display.SimpleButton;
     import flash.events.MouseEvent;
     import flash.events.Event;
     import flash.filters.BlurFilter;
     import fl.transitions.*;
     import fl.transitions.TweenEvent;
     import fl.transitions.easing.*;
     
     
     public class Document extends MovieClip {
          
          private var totalblur:Number = 10;
          private var noBlur:Number = 0;
          private var blurTween:Tween; 
          public var blur:BlurFilter = new BlurFilter(totalblur, totalblur, 3);
          
          public function Document() 
          {
               addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
          }
          
          public function init(e:Event):void
          {
               removeEventListener(Event.ADDED_TO_STAGE, init);
               imageStack.x10_fabric.filters = new Array(blur);
               img1Btn.addEventListener(MouseEvent.MOUSE_OVER, rolledOver);
               //img1Btn.addEventListener(MouseEvent.MOUSE_OVER, rolledOut);
          }
          
          public function rolledOver(e:MouseEvent):void
          {
               img1Btn.removeEventListener(MouseEvent.MOUSE_OVER, rolledOver);
               var blurTween = new Tween(imageStack.x10_fabric, "blurX", Strong.easeOut, imageStack.x10_fabric.blurX, totalblur, 4, true);
               blurTween.addEventListener(TweenEvent.MOTION_CHANGE, onMotionChanged);
          }
          
          public function onMotionChanged(TweenEvent:Event):void
          {
               imageStack.x10_fabric.blurY = imageStack.x10_fabric.blurX;
               imageStack.x10_fabric.filters = new Array(blur);
               trace("bite me");
               trace(imageStack.x10_fabric.blurX);
          }
          

          
     }
     
}