If you launch the clients section you’d see a couple of logos with a nice highlighting effect. It was actually developed on the train while I was on terrible hangover. Here are step-by-step instructions on how to achieve something similar.

First of all we need our logotypes or whatever graphics you’d like to apply this effect to.

Next we create a copy of it and apply some nice glow filter:

Now is the interesting part. We need to create a MovieClip which would behave like a moving cloud. To do this, we first create a MovieClip with a circle inside of it. Next step is to shift the shape inside of our MovieClip to change it’s pivot point:

Next we create a simple classic tween setting with a single CW or CCW rotation. Later we’ll use a few of those circles. To make the effect more random you should use different rotation directions and number of frames.

Now apply a Blur Filter to the MovieClip (try to avoid low quality). You should get something like this (click to launch swf file):

(Please open the article to see the flash file or player.)

Final step is to combine a few of those blurred Movie Clips into a sort of cloud. Try putting them together with different scales and angles. As I’ve mentioned above good idea is to maximise randomness by using different number of frames in a MovieClip so your cloud won’t have animation cycles.

This might not be very important, but if you set blendMode of those Movie Clips to ADD your mask would cover the middle of your graphics more and the edges less and this was exactly what I’ve wanted to achieve. Check out the final clouds below. The one on the right is using BlendMode.ADD:

(Please open the article to see the flash file or player.)

Last thing to do, is to set your mask and graphics MovieClips cacheAsBitmap values to true (this is the only way to make masks with alpha channel work) set the mask and make it follow the mouse with a nice slowing-down ease.

You can check the final effect here:

(Please open the article to see the flash file or player.)

The sources and code are avaible here. Enjoy!

]]> http://blog.szataniol.pl/?feed=rss2&p=113 http://blog.szataniol.pl/?p=111 http://blog.szataniol.pl/?p=111#comments Mon, 14 Dec 2009 19:40:37 +0000 szataniol http://blog.szataniol.pl/?p=111 Every six months Adobe is granting one of RIA Devs members with 2000$ software voucher. This year Christmas came a little bit earlier for me as I became a lucky winner. Woo woo!

PS. RIA Devs is open group so please join us if you are capable of attending events once a month in Warsaw. It’s a great opportunity to exchange experience and occasionally get some stuff from Adobe.

Developer was given .fla file with graphics, so at first he needed to prove his knowledge of JSFL to create about 180 movieclips (or he could do this manually - happy clicking :)). Next he had to create multiple instances of ball classes holding reference to it’s movieclip. Balls were randomly sorted and later added to stage with increasing loading progress (0% - 0 balls in stage, 100% - all balls on stage)

Second part of task was to figure out what the hell is going on there. As you can see the balls are moving chaotically at first. The more data is loaded the slower and more smooth becomes the speed vector to stop at last and form a ying-yang symbol.

The trick was to create several points, which were attracting balls. Several months ago I wrote post about mouse avoiding. You can easily achieve attraction effect just by reversing the vector.

Those points where moved by TweenLite, sliding from one position to another within a circle. The more data were loaded, the less was the attraction force.

Final effect:

(Please open the article to see the flash file or player.)

Force spots are those red, little balls. If you find this description not clear enough please post and I will upload the source.

Demo:

(Please open the article to see the flash file or player.)

Source