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 effect inspired by this tutorial and programmed for tictoc 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, 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 (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. nice!

    felix on

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

    Mike on

  3. 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

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

    Daniel on

Adding comments disabled for now.