UNI [SITE + MOTION] – FLASH ANIMATION IMAGE 2

May 17th, 2009 | Richard Almond

The idea is that there are 5 main images as part of a timeline which represent a journey through the architectural studio. Hence these 5 images symbolise the grey, monotonous gloom and poor quality of natural light which is typical of the space during the winter months. These images must have an intuitive, linear method of navigation which again relates to wandering through the studio space. Situated at various,┬áinconspicuous locations within these main 5 images are links to the feature images, the ‘Glimpses of the Spectacular’. These images represent the special, short moments of brilliance when the weather grabs our attention.

The second image of the animation is probably that which has caused me the most stress. This image is very different to the first image but very similar to the other 3 images of the main animation. Since each of the 5 main images features windows with multiple panes of glass, it became apparent that using these panes would be a fairly obvious method of navigation. The left most pane takes the user back to the previous image, the right most to the next. The only exception is the first image, which only features a single pane at the right hand side, but since there is no image before the 1st, there is no need for a back button. It is therefore the 2nd image that must explain to the user the navigational system, and therefore the buttons must be particularly obvious in this scene.

In the first image, the user is drawn towards the bright triangle in the top right corner. Clicking, possibly believing they are being taken to what is behind the glass, they find themselves at the second image, further from the glass, and with less idea of what is beyond it. As with the first image, the user must wait for a second or two before the animation becomes apparent. Once the clouds start passing behind the glass, it becomes obvious that this will be a point of interaction. Hovering over the left and right most panels reveals much darker cloud formations – the buttons to move to the next or the previous scene. A feint glow becomes apparent through a gap between two of the lower, smaller panes of glass, and hovering over reveals a more piercing light, and a link to one of the ‘Glimpses of the Spectacular’. Initially this image was simply too big in file size to run smoothly, since the cloud animation consisted of two 20,000-long strips of rendered pixels which moved across each other in a tween. As my Flash knowledge grew however, I was able to ActionScript these tweens, which hugely reduced strain on the computer attempting to display the animation. There was also a lot of deliberation over the appearance of the button leading to the first ‘Glimpse of the Spectacular’ through the gap in the small window pane. Initially the pane flapped as if being blown by the wind, but it soon became apparent this was far too cartoon-like. The final animation is far subtler and more attractive.

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

2 Responses to “UNI [SITE + MOTION] – FLASH ANIMATION IMAGE 2”

  1. [...] that the glass panes are the surface with with the main interaction occurs. Entering the image from the 2nd, the user again finds themselves further from the glass, and further from discovering what is [...]

  2. [...] The image is reached by clicking the small gap between the lower window panes in Image 2. It is immediately apparent that this image is different to those the user has viewed up to this [...]

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