UNI [SITE + MOTION] – FLASH ANIMATION IMAGE 4

May 17th, 2009 | Richard Almond

There is no obvious timeline animation in this scene. The photograph was taken on that remarkable day in February 2009 when London was covered in about a foot of snow over night. The studio was deserted the next day, still, calm and quiet, like it had been muffled by the blanket of snow laying on the rooflights. I wanted to represent this in the scene, and so the user must explore the image to trigger the animation.

On hovering over the snow covered glass it becomes apparent that each pane is actually a button. Clicking a pane triggers the animation of the respective slab of snow sliding down the glass, as if the warm sun has begun melting it. Here I put the Tween Extended plug-in that I downloaded to good use. This allows the generation of a piece of ActionScript which creates a tween, meaning it does not have to be created manually. Tween Extended allows multiple properties to be tweened at once, here each slab of snow has its x-value, y-value and alpha value tweened. There is a further feature of tweening called ‘Easing’ which has also been incorporated here. This simulates realistic movement by considering inertia. Naturally objects move slowly initially, accelerating to a peak velocity before gradually slowing to a stop. Using ‘Easing’, the snow movement across the glass has a very realistic effect.

Clicking all four of the snow covered panes triggers their respective animations, and the result is a rooflight clear of snow. At the point the last clicked pane is clear of snow, the second ‘Glimpse of the Spectacular’ animation appears. The method here was to use an If Statement, which triggered the transition to the next scene once all four button animations had finished playing.

The initial idea for this animation was to use the drag feature in Flash, and allow the user to drag the snow down the glass. This however threw up some big problems because of the diagonal orientation of the panes [see previous post], and so I had to settle for a triggered animation instead.

The main navigational buttons are again in the conventional position, the large panes of glass either side of the four which are snow-covered. The over states are subtle and quiet in keeping with the rest of the scene, a simple colour fade to the pale turquoise of their neighboring panes suffices.

The final version is below. Please note that the transition buttons to other images have been disabled for preview purposes.