UNI [SITE + MOTION] – FLASH ANIMATION IMAGE 3
May 17th, 2009 | Richard Almond
The third scene has possibly been the most time consuming of all, and has the most complex animation. In this scene there is an attempt to firmly establish to the user 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 beyond it, yet they have the ability to interact with the glazed surface a lot more thoroughly. After some research, I settled on the idea of using the mouse position over the glass to generate the main part of the animation. I begun by experimenting with cursor-following effects [see previous post]. In this early example I amended a particle swarming effect to create a sort of shadow/cloud generation which follows the mouse cursor.
I later developed this effect to create more of a trail, like the cursor was drawing clouds behind the glass [see previous post]. I had huge problems limiting the effect to just the surface of the glass however, and after much trail and error ended up using a mask over an empty movie clip as a container into which the effect is visible. In early versions the cloud animation was generated by a movie clip which I had tweened and blurred in an attempt to represent cloud. This effect was reasonably successful but very memory intensive.
The two fluorescent lights in this image are very prominent, to the point that they almost distract the user’s attention from the window. I found that users were drawn to explore these lights and therefore I used them as buttons to trigger further animation. The upper most light triggers a transition from daytime to nighttime within the image, I felt at some point in the piece I should represent the very different atmosphere of the studio when dark. A flickering effect was introduced to the light to further signify its role as a button.
As the scene developed, I found that the smoke cursor effect was becoming more and more problematic in terms of memory use, and so I altered the animation to use a bitmap as the object which generates the smoke. This bitmap was created in Photoshop using the cloud rendering filter and the ActionScript was adapted to contain variables which randomly alter the scale, rotation and opacity of the bitmap. This was a lot more effective visually but threw up further problems. Firstly there was a problem with the point from which the effect was generate [see previous post]. Then the deeply annoying problem of restricting the effect to the area of the glass cropped up again [see previous post] .
After a lot more trial and error I managed to limit the effect to the desired area. The result was rather effective [see previous post]. At this point I felt it necessary to highlight the difference in the mouse cursor effect between the day time scene and the night time scene, and so I removed the smoke effect and instead introduced a far more subtle effect into the night scene. Tiny glints of light now slowly glide from the cursor position and twinkle like stars or fireflies.
The major problem in this image was the navigation system. Image 2 establishes that the left pan takes the user backwards and the right pane takes them forwards, but in this image, using the same system effectively reduces the area that the cursor trails are active by one third. Another system was required and I instead used the smaller lower panes of glass as the navigational buttons. The left hand block taking the user back and the right hand block taking them forward. To signify the presence of these buttons, the cursor trail actually stops in these two areas, and a feint glow appears around their boundary.
The final version of image 3 is below. An extra piece of script has been introduced which hides the mouse cursor when over the window, so as not to distract from the animation. I have also introduced an animation which is triggered by the lower fluorescent light – the shadow at the right hand side of the glass begins to throb once the light is clicked.
Please note that the transition buttons to other images have been disabled for preview purposes.