Flash Bokeh

Sometimes your best efforts to convince clients to originality end up in the trash... but on the other hand there is nothing wrong with it – just shake the dust off and share. This time it's the colourful realtime [bokeh](http://en.wikipedia.org/wiki/Bokeh "Bokeh on Wikipedia") effect inspired by this [tutorial](http://abduzeedo.com/colorful-bokeh-effect-pixelmator "Bokeh effect in Pixelmator") and programmed for [tictoc](http://tictocfamily.com) as a proof-of-concept demo.
Flash AS3 Bokeh
__Click the image above to preview.__ Due to expensive alpha and blending processing it may slow down your browser/computer a bit. I've tried two approaches there: 1. Adding and removing circles to the display list (with cacheAsBitmap turned on). 2. Drawing circles onto (transparent and non-transparent) bitmap using draw() method. Both methods eat similar processor time. Haven't tried using any GPU wmodes, not sure if that would help at all here, I'll leave it to you - the code is very simple and there's __a lot__ of room for improvements and optimisations. Considering the recent [HTML5 vs Flash war](http://www.google.co.uk/search?q=HTML5+vs+Flash), the challenge is to code a similar effect using JS + HTML5's canvas and compare the speed – is anyone up for it? Grab [the source](/files/bokeh/bokeh_demo.zip "Flash bokeh AS3 source") (AS3, Flash CS4 was used to tween the circle shapes but you could entirely use drawing API if needed) and enjoy!
11:00 AM | | 4 Comments | Tags: , ,

Comments

  1. hiboss could you give me a little tutorial in how to make it work i would be eternally grateful :D

    Daniel on

  2. Hello, I would like to know how you made this by providing me a written tutorial if you can possibly do that because this effect is really awesome and i want to use this effect for my school project.

    John on

  3. That is really beautiful! Thanks for the source :)

    Mike on

  4. nice!

    felix on

Adding comments disabled for now.