Lighted Distortion Effects and Tour de Flex

There’s a slightly updated version of the distortion effects shipping with the amazing Tour de Flex AIR application (flex.org/tour). This update adds another feature that our User Experience team found “adding to reality”. Lighting!
Lighting works on all effects supplied. Here’s how it looks like on CubeRotate:
lightingcube1.gif
But see all the effects in action from this example. Download it here directly.
And if you’re interested in the source code of the cube example, download it here.


The above version is still Flash Player 9 and Flex, 2, 3 compatible. If you can target Flash Player 10, make sure you check out the new 3D functionality, which makes effects such as these easier to do and more efficient.
Also, Tink has released a new Flex effects library (efflex.org) that also adds distortion effects. I’d definitely recommend checking out Tink’s work or even considering participating in this new exciting open source project. Great work Tink!

Here is How You Can Use it:

Generally you define a lighting source. When your lighting source is located on the top left then the effects will turn brighter once your display object turns towards the top or left.
To do that you just have to set two properties

  • -horizontalLightingLocation takes either a LEFT and RIGHT value (use DistortionConstants for setting this or FlexBuilder’s code hints).
  • -verticalLightingLocation takes either TOP or BOTTOM.
  • -lightingStrength is an optional property, which defaults to 7.5 if not set.

Lighting is turned off by default. To activate it you just need to set either the horizontalLightingLocation, verticalLightingLocation or both properties.