I am not naive enough to believe I originally created this effect. As with anything, there always seems to be someone somewhere that did it sometime before :). Either way, I made a version of it for my previous site in AS2 and it came with me when I updated the site.
Ever since that first site there’s been a somewhat steady flow of questions regarding it. I vaguely remember writing a AS2 tutorial for it on gotoandlearn and I get a lot of mails regarding it.
So, I figured I’d take advantage of AS3’s massive improvements and create a transition class with the same effect. It’s hard to give it a specific name, but I’ve always called it the “pixelating transition“. You’ll understand when you check it out. Go ahead tough guy. Click the header!
So, in short, this class will take two displayobjects and create a transition between the both. The DisplayObjects don’t necessarily need to be on the Display List, in fact it’s probably wiser to use the Pixelator as an intermediary. You set it up with two clips and add it to the display list. The class itself will do nothing but setup and display the first picture. You can later call a trigger that makes it transition between the first and second image/object. Simple as that.
If you later need to keep transitioning, there’s also a reconfigure command that allows you to re-setup the class while maintaining the visible appearance. In other words, It’s just really simple! :)
public function Pixelator(_source:DisplayObject, _dest:DisplayObject, _ct:int = 125)
//ct is the cutoff, or how big you want the pixels to become. Larger = bigger.
Download here (350Kb) (3537 downloads)
August 22nd, 2008 at 7:24 am
Great work, I think before long people will view you as one of “those” people. Like Quasimodo or Senocular.
I’m ver impressed.
August 22nd, 2008 at 8:21 am
You have a great knack for identifying useful, reusable code. Another winner, for sure. :)
August 24th, 2008 at 10:05 am
[...] Read more | Source [...]
August 24th, 2008 at 3:41 pm
exellent class!
August 25th, 2008 at 4:07 am
Dear,
thanks a lot for your response.
i will download it and try it
i think its wonderful work and you have a strong knowledge in programming.
August 25th, 2008 at 5:00 pm
Peter, don’t even go there. I’m a massive amateur next to those names. Comparing me to Senocular is like comparing actors Ben Affleck and Robert De Niro.
It’s not even in the same ballpark ;) But thanks for the thought, and thanks cory+basil ;]
August 26th, 2008 at 5:31 am
yeah, ben affleck is sooooo much better, i know what you mean ;)
August 26th, 2008 at 4:01 pm
[...] - Pixelator - Transition effect [...]
August 27th, 2008 at 2:42 am
Thanks for sharing this, it’s a really nice effect.
September 2nd, 2008 at 9:05 am
affleck hands down…what’s more obvious than that?
thanks for the class!
September 2nd, 2008 at 10:43 am
My, that’s sexy.
Hm.
The code’s not too shabby either.
Are you married? ;)
September 3rd, 2008 at 7:44 pm
Wows, that’s nice stuffs.
Yes, are you married? My sister is single. It would be good to get free advice from bil. You will no charge. no?
LMOA. LMOA. LMOA.
What did you think of my stuffs? I wait your mail. You are busy.
September 8th, 2008 at 10:51 am
Hi Erik, I would be eternally grateful if you’d be so kind as to answer my question:
How do you use the reconfigure function to apply this transition to an array of images?
I hope you can help me out on this.
Thanks Erik
September 8th, 2008 at 6:13 pm
Love the effect, I was wondering is there anyway to not use 2 display objects and rather just transition a singe clip on to the screen. I’m using loader and putting it inside a moviecip container, I would like to transition that clip onto the screen.
September 8th, 2008 at 6:25 pm
Hey guys, thanks for all the kind words.. All of the ideas you have are totally possible, but require a little bit of re-work on the class itself. Unfortunately I don’t believe in customizing things too much to do peoples work for them however ;) If you have any specific questions if you get stuck with your own code adaptations, please do send me a message and I’ll be sure to help out.
Eznyc, your problem is really not that hard, all you need to do is watch how many transitions have been completed and keep reconfiguring the class from your array depending on where in the iteration you are.
Jzs; yours is even easier since all you need to do is target the ‘in’ version of the pixelation directly :P
September 8th, 2008 at 7:40 pm
as3 is totally SOPHISTICATED.
erik is GOD.
September 12th, 2008 at 12:12 am
it is nice .very good job.
September 27th, 2008 at 4:15 am
Impressive code skills. I bet your company loves you
November 20th, 2008 at 2:56 pm
Awseome effect and great performance, very well coded to. Thanks for posting and sharing.
November 27th, 2008 at 9:14 am
I noticed one thing, if you do pass it a MovieClip which you actually want to display and use, because the Pixelator causes the MovieClip to become invisible you will not see the MovieClip after the transition has completed. It looks like you have to manually set the MovieClip in question to be visible again. Instead of doing that I created bitmaps which held a snapshot of the MovieClip in question and passed those Bitmaps to the Pixelator.
Brilliant class by the way!!!
December 17th, 2008 at 3:48 am
hey there,
thanks alot for the awesome class. love it.
was wondering how you would go about putting an outline on each individual pixel that we pixellate?? (if you know what i mean) so we get a kind of grid effect??
thanks for any help
ben.
February 19th, 2009 at 9:03 pm
[...] Pixelator的官方网页：http://www.erikhallander.com/blog/2008/pixelator-yet-another-transition-effect-for-as3.html Tags: AS3, Flash, Flex You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
March 2nd, 2009 at 9:53 am
Erik,
This is brilliant work. I am getting reacquainted w/ AS (haven’t worked w/ Flash since MX) and am a bit lost. I would like to use this for a website and need to know how to implement this into site. I will totally give you credit on the site…could you assist please? Thanx…
March 2nd, 2009 at 2:43 pm
Ok, maybe I need to clarify…I would like to initiate the pixelation onthe first frame of the site for the background pic. I’m searching thru the code trying to figure how to tweak it, but if you have any suggestions please let me know…thanx.
March 26th, 2009 at 11:25 pm
I Wanna upload some my created effect but how
April 27th, 2009 at 7:00 am
[...] Pixelator - Yet another transition effect for AS3 [...]
May 9th, 2009 at 6:57 pm
He……!
My friend
May 19th, 2009 at 3:51 am
Have you considered using TweenLite for the animation instead of using ENTER_FRAME event? ;)
Thanks!
July 8th, 2009 at 11:28 pm
GO MARINERS!!!
;)
August 23rd, 2009 at 3:51 am
Sumycin…
An interesting post by a bloger made me ……
September 5th, 2009 at 10:19 am
Hi;
This is great class, one of the best transitions ever… Just want to ask - can you help me to separate the effect from the class? Tried all night to do it, but so long –> no progress. I have custom bitmap extending class and want to add the pixelate in/out functionality. For example fyBitmap.create() to “clear” the pic from dissolved pixel state to “clear” state.
10x in advance :), Ico from Bulgaria
September 16th, 2009 at 7:11 am
[...] On his blog, Erik is kind enough to share the class that he built to create this effect. What a great guy! Here’s the link. [...]