The final animation in the main timeline, image 5 was taken at dusk. The darkness symbolises the animation drawing to an end. The single clean window pane of the rooflight glows alone as the last rays of dull light pass into the space. This pane is initially the button which takes the user back to the previous image. Being at the left side of the image and unique in appearance, it is hopefully obvious that this is the last of the main images of the piece, as there is no hint of another buton on the right hand side to take user to another image.
Small, subtle shadows randomly pass behind the glass as if the last of the birds or first of the bats, and a click of the florescent light triggers the drawing of black-out blinds, again symbolizing the piece coming to a close. The blinds however stop short of the single, glowing pan, and now the user is offered one last glimpse of the spectacular.
Posted in MA Site + Motion | 1 Comment | Bookmark or Share
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.
Posted in MA Site + Motion | 1 Comment | Bookmark or Share
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.
Posted in MA Site + Motion | No Comments | Bookmark or Share
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.
Posted in MA Site + Motion | 2 Comments | Bookmark or Share
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.
Posted in MA Site + Motion | 2 Comments | Bookmark or Share
This problem had been annoying me for a while – how can you get a button to fade from one state to another on roll over, and then back to its original state on roll out. I tried various methods, but all either consisted of having the button temporarily at its over state when the animation is first loaded, or the button jumping to its over state if the mouse is removed from the button before the full fade has finished playing.
It turns out some ActionScripting is required. You basically need to set up a few variables to tell the button to start increasing its alpha value on roll over, and start decreasing it on roll out. This way if the mouse is moved away from the button when it is say 50% through its fade, the button will begin to fade back out from that exact point.
Here’s an example:
Posted in MA Site + Motion | No Comments | Bookmark or Share
I’ve eventually managed to get this cloud cursor trail effect working properly, after hours of trial + error. In the end I managed to limit the effect to a container (the glass), but for some unknown reason, the trail generated was offset from the cursor position. A bit of a botch-job led to me adding/subtracting from the _xmouse and y_mouse values until the effect matched up to the cursor. Thankfully the effect works pretty well I think. It’s a lot more subtle and realistic than previously. I’ve also added a further feature to when the upper flickering light is clicked – explore for yourself…
Posted in MA Site + Motion | 2 Comments | Bookmark or Share
Typically, solving one problem leads to the discovery of the next. After managing the get this new cloud trail effect to work properly, I begun transferring it onto my main scene. As you can see, there is an issue with the container. I want the effect to be limited to the area of the glass, like in the previous version of this scene. Now that I’m working with a ‘particle’ effect that uses a bitmap to generate the smoke effect, rather than simply attaching a movie clip of a vector object I’ve tweened and blurred to look like a cloud, it seems I must mask the animation in a different way. This could take a while…
This is the previous version, where the masking works well but the cloud effect is not quite as successful…
Posted in MA Site + Motion | No Comments | Bookmark or Share
I’ve been going through my files and trying to root out the cause of the jittering in my animations. Once area for consideration was the cloud trails which are generated by the cursor movement. I experimented with a few different bits of ActionScript I found in books and online, some results being more successful than others. This one didn’t come out quite as I’d hoped, but I still think it’s quite nice. It’s almost as if you’re blasting through the clouds in a jet.
Posted in MA Site + Motion | No Comments | Bookmark or Share
Ok so after doing some research into optimizing flash files, it seems that as much of the animation work as possible should be ActionScripted, rather than tweened, to reduce file size. I then discovered that you can ActionScipt a tween relatively easily, using “Easing” and “Tween Classes”. After a lot of fiddling, I’ve managed to recreate the moving clouds animation using an extended tween, where more than one property can be tweened at the same time, in this case both x translation and alpha value. The hardest part was getting the animation to loop. Having two movie clips with two tweens, Flash requires you to set both instances to loop. Pretty obvious now…
I realise this is pretty boring but feel it marks a transition in my Flash ability from “extremely basic” to “half-decent”. Or at least that’s what I hope! The transition at the end of the loop still needs a little work.
Posted in MA Site + Motion | No Comments | Bookmark or Share
