May 17th, 2009 | Richard Almond

It was fitting for this image to be the first of the animation for a few reasons. First of all it is the only image in the series which does not entirely focus on the windows, rather it focusses on the surface of the wall, and the effect the window has on it. A slither of the window can be seen on the right hand side of the image. This naturally draws the user into the animation, and the image acts almost like a build-up, a precursor of what is to come. The aim for this image in particular was subtlety. The spaces depicted can often seem so monotonous that one does not take a second glance, they don’t allow themselves time to discover any interest that exists. The same applies here – the user must be patient and observe. The first task was to animate the wall surface. For this I developed the ActionScript tweening method I previously learned and applied it to two texture bitmaps I created in Photoshop. A blend mode was applied to each and the opacity turned right down. The texture maps move with random motion independently of each other, and the effect seems to work rather effectively. From initial feedback the first question asked is “is there something moving on that wall?”, which is exactly the response I hoped for.

CLICK HERE for the first version. As you can see at this point I hadn’t managed to nail down the parameters which defined the random motion of the texture maps. The blend modes needed reconsidering and I hadn’t yet reduced the opacity. The results were far to brash. Further work was also to be done on masking out of areas.

CLICK HERE for the second version. By this point I feel I have cracked the surface animation, although it could be slowed down slightly. There are still issues with the buttons in the animation however. The main, upper window pane which links to the next image needs a rethink of its over state. Currently a streak of light passes over the glass on roll over, but if the mouse is removed from the button before the animation has completed, the streak jumps back to the beginning. Notice also the smaller panes below. These trigger animation of the shadows cast by the window frame across the wall. In this version the shadow animation is just poor, it needs a lot more work so as not to look just strange. The over states of these window buttons also need to be more responsive.

CLICK HERE for the third version. Here I have smoothed the shadow animation which is activated by the lower window panes. Much more effective I feel. The final version version is below. I further simplified the shadow animation to feature simple straight lines which grow from the shadows when the window panes are clicked, rather than the waving snake-like original idea. The over states of the small window panes has also been adjusted to be more responsive to mouse movement, and the over state of the upper window has also been improved, so as not to jump.

Please note that the transition buttons to other images have been disabled for preview purposes.


  1. [...] the first image, the user is drawn towards the bright triangle in the top right corner. Clicking, possibly [...]

  2. [...] Image 1 – the primary method of physical interaction between the user and the animation will be a series of pull cords, the use of which is reminiscent of operating blinds. The first image, like most others, has passive, non-triggered animation, but there are also aspects which will require human interaction. The shadow animations emanating from the lower window panes will be activated by a series of these pull cords. [...]

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blog Directory for Lanarkshire