Well.. everyone loves transitions right? I do anyway. Even if they are utterly useless like the firefly one I posted a few days ago I still enjoy it just for the sake of the ‘ooooo‘ effect it can produce. I’ve always been a bit of a sucker for the pure visual parts of flash, which is probably why I went in the direction of ActionScript instead of C# or something else.
This class will take any content you give to it (A displayobject is required though) and distort it with the help of Perlin Noise, DisplacementMapFilter and a Blurfilter. The end result is something that looks like its ‘rippling out‘. (lack of better words! haha)
It dispatches an event when the content is completely gone, and you can choose what to do before starting the ‘road back’ so to speak. The last event it dispatches triggers a reset of the parameters so you can do it all over again! Click the ducky to try it! Download the class inside…
As always, if you like it, it’d be cool if you left a digg or a comment! I’ll answer any questions you might have in the means of time or whatnot ;)
Download here (20Kb) (4297 downloads)
June 25th, 2008 at 8:01 pm
Excellent effect Erik, I dig it probably even more than the fireflys, which were super cool…
June 26th, 2008 at 2:53 pm
Awesome as ever. Again, like it more than fireflies, this one’s a little more, subtle I guess : ).
Was this used in the Virgin campaign?
June 26th, 2008 at 3:35 pm
Thanks you guys.
Law; Yes and no. The Virgin effect was based on somewhat the same logic, but it was in Actionscript 2 :)
June 26th, 2008 at 4:25 pm
Dude. This effect is sick thanks soo much for posting it.
June 29th, 2008 at 2:06 am
Cool effect!
Great work as always!! ;)
July 2nd, 2008 at 4:31 am
Nice to see you updating this one to an AS3 version, I’ll probably be using it at some point in the future…
July 10th, 2008 at 6:30 am
Meh! ;) (that obvious internet comment)
July 11th, 2008 at 8:03 am
I’m a newbee at AS3 and have a question for you experts. I downloaded this file and and all that it had was one layer, with the bstart object - movie clip - instance of start in it. No action layer. Could somebody reply with the code that’s supposed to go into an action layer. Thanks ahead of time. And again I’m a newbee to AS3 so if you could give me some direction as to what to do as well I’d appreciate it, thanks!
July 11th, 2008 at 8:15 am
Mike, it uses a document class for the code.. check down in the properties for your project where the size and background color shows up.. you can see document class and a link to it. You can click the little pencil to open the file, or double click it directly in the folder (baseClass.as)
July 11th, 2008 at 8:36 am
Pro,
I did that and it says that the “definition for the document in the classpath could not be found” I have the fla file and the baseClass.as in the same directory. In that document class do I need to list like everything in the path, documents/test/FlashWork/perlin_transition(2) Folder/baseClass.as??? All that I had in the document class was baseClass.as. I must be doing something wrong… Also when I test he movie the click to activate text isn’t considered a button. When I rollover it it doesn’t do anything. Don’t I need to- in the Actions Layer that I don’t have- state something about the instance of start being a true button or something?
Newbee
July 17th, 2008 at 4:14 pm
Ok. Post more.
July 19th, 2008 at 1:55 pm
When will you post more? I need a better transition.
July 21st, 2008 at 12:20 pm
Could you possibly give me the actual fla file for this example. There’s no actions layer so that is whats wrong with the click me to activate movie clip not being a button.
July 30th, 2008 at 9:05 am
lovely transition, well done.
My work won’t upgrade me to CS3, so i’m still working with AS 2.0
I converted your PerlinDistort class to AS 2.0 and works great.
If anyone is interested, I’ve put a copy of the AS 2.0 version on my server:
http://www.alexh.org/z/PerlinDistort.zip
August 21st, 2008 at 3:23 pm
[...] Transition effect for AS3 with Perlin noise and DisplacementMap [...]
December 12th, 2008 at 2:44 pm
Increíble… saludos desde Ecuador a los hermanos flasheros…
January 29th, 2009 at 9:28 am
Thanks a lot, that’s a really cool effect !
Here is the flex version of your class, it’s working quite well with flex components :
package
{
/* erikhallander@gmail.com */
/* http://www.erikhallander.com/blog/ */
import com.gfx.PerlinDistort;
import flash.display.DisplayObject;
import flash.events.*;
import mx.core.UIComponent;
public class PerlinNoiseTransition extends UIComponent {
public var pDist:PerlinDistort;
public function PerlinNoiseTransition():void { }
public function initPerlinNoiseFX(target:DisplayObject):void {
pDist = new PerlinDistort(target,20,20);
doTransition();
pDist.addEventListener(”NOISE_ON_COMPLETE”,transitionComplete);
pDist.addEventListener(”NOISE_OFF_COMPLETE”,restartTransition);
};
public function doTransition(e:MouseEvent = null):void {
removeEventListener(MouseEvent.MOUSE_UP,doTransition);
pDist.start_noise();
};
public function transitionComplete(e:Event):void {
pDist.end_noise();
};
public function restartTransition(e:Event):void {
addEventListener(MouseEvent.MOUSE_UP,doTransition);
pDist.noise_reset();
};
};
};
And how to implement into a flex component:
Cheers !
Stef
February 1st, 2009 at 2:20 pm
Hi,
for those like me with not much AS3 knowledge who had no idea how to get started.
The folder structure should stay just as it is. The fla file and the baseClass.as in a folder together. That folder has a subfolder “com” which then contains the gfx folder containing the PerlinDistort.as.
Get that setup properly, then click on the stage in the example fla. Check the properties panel. There is a little pencil and a field showing “baseClass” Put your own fla in the same folder position as the example and click that pencil and add baseClass.
I saw a few people saying where is the actionscript layer. There is not one. You need a displayObject. To see how to set this up go to the library in the example file. Click on the movie clip name “clip” Right Click where it says linkage and open the symbol properties panel.
Here is where it all happens. Your movie should have the same stuff here. The class file refers to clip, whatever your movie clips name is in your library doe not matter, the symbol button lets you pick any mc.
Now just make sure its symbol name at the top here is clip, and its class name too. Export for actionscript and export frame 1 checked, base class shows “flash.display.MovieClip”
Basically match everything in this dialog to the example.
You should be running
hope that helps
February 1st, 2009 at 2:26 pm
Hi,
well my explanation out of the way in the previous post, I have some questions of my own. Like I said my AS3 knowledge is minimal.
How can I use this class to do something like this. (simplest method please)
4 images,
1st image displays, after a while perlinFilter runs, image fades out, new image fades in, perlin filter stops running. image displays for a while, repeat for all 4 images and loop back to image 1.
thanks
mark
April 25th, 2009 at 9:12 pm
this is great!
how do I make it just go one way? say I want to ripple something in… or ripple something out… that’s the whole point, right?
thanks!
April 25th, 2009 at 11:05 pm
This is great! I really appreciate it - really adds to the look and feel of my site! Thanks to Stef. Practically plug and play!
July 4th, 2009 at 7:16 am
Hi Erik,
I like this transition and would like to use it in my AS3 code.
This code uses a Loader() to get the image content into a Bitmap().
All of this is within a class that extends Sprite.
Is it possible to use your code in this?
(Please note that though I’ve been developing software for many years, I’ve only just started in Flash; I am using FlashDevelop and FlexSDK, no Adobe.)
Any help/hints would be greatly appreciated.
August 5th, 2009 at 12:11 am
Hi, fantastic transition, I got it all working but as I am new to Flash I wondered if anyone was keen to tell me how I could change this transition so that:
on “click to activate”
the duck transitions in and stays there until you hit
“close”
then the duck transitions away.
Come on all you gurus, here is a challenge to impress us all!!!
ps: get a wriggle on, I need this asap (no pressure, well really there is) ha!
Muchos thanks!
October 6th, 2009 at 3:44 am
Lovely little class, Thanks Erik! This refactoring would help Becca:
[code]
package com.gfx
{
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.events.*;
import flash.filters.BlurFilter;
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
public class PerlinDistortFade extends MovieClip
{
public static const FADE_OUT_COMPLETE:String = “perlin.fade.out.complete”;
public static const FADE_IN_COMPLETE:String = “perlin.fade.in.complete”;
private const _zeroPoint:Point = new Point(0,0);
private const _rndCount:Number = Math.random() * 25;
private var baseX:Number = 100;
private var baseY:Number = 100;
private var _nx:int;
private var _ny:int;
private var p1:Point = new Point(55, 34);
private var p2:Point = new Point(20, 33);
private var perlinOffset:Array = new Array(p1, p2);
private var bF:BlurFilter = new BlurFilter(2,2,3);
private var blurMod:Number = 0.25;
private var nXScale:int;
private var nYScale:int;
private var bmp:BitmapData
private var _theTarget:DisplayObject;
private var _initialized:Boolean = false;
private var dmf:DisplacementMapFilter;
public function PerlinDistortFade(_target:DisplayObject,xscale:int,yscale:int)
{
_theTarget = _target;
nXScale = _nx = xscale;
nYScale = _ny = yscale;
init();
};
public function init():void
{
bmp = new BitmapData(_theTarget.width+100,_theTarget.height+100,false);
bmp.draw(_theTarget);
dmf = new DisplacementMapFilter(bmp,_zeroPoint, 1, 1, nXScale, nYScale, “color”, 0xFFFFFF, 0);
_initialized = true;
};
public function fadeOut():void
{
if(!_theTarget.hasEventListener(Event.ENTER_FRAME))
_theTarget.addEventListener(Event.ENTER_FRAME,fadeOutHandler);
};
public function initialStateFadeOut():void
{
while (_theTarget.alpha > 0) {
fadeOutHandler();
}
};
public function fadeIn():void
{
if(!_theTarget.hasEventListener(Event.ENTER_FRAME))
_theTarget.addEventListener(Event.ENTER_FRAME,fadeInHandler);
};
public function reset():void
{
nXScale = _nx;
nYScale = _ny;
perlinOffset[0].x=55;
perlinOffset[0].y=34;
perlinOffset[1].x=20;
perlinOffset[1].y=33;
bF.blurX = 2;
bF.blurY = 2;
dmf = new DisplacementMapFilter(bmp,_zeroPoint, 1, 1, nXScale, nYScale, “color”, 0xFFFFFF, 0);
};
private function fadeOutHandler(e:Event = null):void
{
bF.blurX += blurMod;
bF.blurY += blurMod;
perlinOffset[0].y-=8;
perlinOffset[0].x-=5;
perlinOffset[1].x+=8;
perlinOffset[1].y+=5;
bmp.perlinNoise(baseX, baseY, 3, _rndCount, false, true, 1, true, perlinOffset);
_theTarget.filters = [dmf,bF];
_theTarget.alpha -= 0.05;
if (_theTarget.alpha = 1) {
_theTarget.removeEventListener(Event.ENTER_FRAME,fadeInHandler);
dispatchEvent(new Event(FADE_IN_COMPLETE,false));
_theTarget.filters = null;
}
};
};
};
[/CODE]
then call initialStateFadeOut() after you instantiate it ;)
October 28th, 2009 at 4:01 pm
oooooo!! :)
October 29th, 2009 at 11:31 am
thanks paddy !
but it misses the fadeInHandler…
October 29th, 2009 at 12:36 pm
erik, i´ve added the following function to your class in order to set the full noise to start the fade in animation:
public function get_full_noise():void {
bF.blurX = 7;
bF.blurY = 7;
perlinOffset[0].y = -126;
perlinOffset[0].x = -45;
perlinOffset[1].x = -180;
perlinOffset[1].y = -133;
bmp.perlinNoise(baseX, baseY, 3, _rndCount, false, true, 1, true, perlinOffset);
_theTarget.filters = [dmf,bF];
_theTarget.alpha = 0;
};
though that´s probably not the more logic way to do it cause i´m still an amateur of actionscript, it worked well.
i´m trying to set some variables in order to have some variations of this effect, but i´m having a hard time to understand it. i´ve also added this function :
public function setParams(_blurMod:Number, _perlinOffsetA:Number, _perlinOffsetB:Number, _alphaOffset:Number):void {
blurMod = _blurMod;
perlinOffsetA = _perlinOffsetA;
perlinOffsetB = _perlinOffsetB;
alphaOffset = _alphaOffset;
}
but so far i think that i´m not using (all) the right parameters.
well i´ll read a little more about bitmap data, filters and stuff … but i would like to get a feedback about what i´ve done so far.
thanks!
January 20th, 2010 at 7:26 pm
It was heavy on the CPU for my purpose I am afraid.
-but it might be because that the target you are sending - in and that you are making a bitmap-data on top of the targets contents?! So it will be heavy?!
March 4th, 2010 at 3:01 pm
Wonderful! I am more and more in love with good AS3 :) Thanks for sharing!!