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) (2856 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!