This is the 7th image, and one of the “Glimpses of the Spectacular”. The idea here is that the user has managed to discover this glimpse by finding a small gap in the window. Once discovered, the user strains to take in the spectacular view, peering through the thin crack in the filthy glass.

Look with your mouse…

Here is the full sized version

Ok so this is the third image animation which again has taken me a ridiculously long time! I started by duplicating the original image and turning it into a night-time shot in Photoshop. Then I created a button from the top fluorescent light which triggers a fade transition between day and night.

This was all pretty simple stuff and I introduced a flicker into the up state of the button to signify its function. The cloud animation behind the glass, on the contrary, caused me a great deal of stress.  I had to introduce “depth” into the AcrionScript of a simple movie clip to generate the dispersing cloud effect, and then use the cursor tracking function to apply the movie clip to position of the cursor.

The result is that the user can draw a cloud trail across the glass. The next problem was limiting the cursor trail animation to the area of the window, so that it appeared as if the clouds were forming behind the glass.  I initially used the StartDrag function and limited the active area to top, right, bottom and left boundaries, but this had the disadvantage of restricting the area to a rectangle, whereas the window consisted of a series of rhombus-shaped panes.

After some further research it seemed the way forward was to create a button with a hit area which filled all the glass panes, and to assign the cloud trails movie clip as a RollOver state. This button had to have an instance name, and I then had to duplicate its hit area to be used as a mask for the animation.

Finally I had to create an empty movie clip which was subject to the mask, and give it an instance name. Again the process was rather long-winded and certainly more complicated than I’d expected, but the result is quite effective.

Here is the full size version

I feel I need to work on the actual cloud trail animation, specifically for the night-time image. Please test the animation and send me any feedback you have: rich@rafolio.co.uk

I noticed that in the previous version of this animation, the snow was sliding beyond the boundary of the image when viewed at full size. To correct this I added a mask over the whole animation, with the same dimensions as the stage.

Click here to see the full size masked version

Ive had GridIron Flow running in the background now for a few weeks, picking up on all the little links that make up my workflow. I checked a couple of these workflows from Flash files created for the Site + Motion module. As you can see the results are pretty complex, its amazing how quickly you can build up a workflow consisting of so many files.

This is the 4th image of the main 5 in the animation. The idea was to experiment with the drag state in Flash and I wanted to allow the snow on the roof-lights to be slid up and down with the cursor like blinds. I thought this would be fairly easy, but it seems I was wrong, and it took me all bloody day to discover that unless ActionScript and Algebra are your first and second languages, its almost impossible.

The difficulty seems to be in restricting a draggable object to a path. It’s fairly straightforward to limit the object to a bounding rectangle, and therefore easy to limit to a horizontal or vertical line (by setting the rectangle width or height to zero), but incredibly difficult to limit to a diagonal line. I expected that I could add a motion guide as a drag path in a similar way to a tween, but this method also proved unsuccessful. 

I ended up settling for a slightly different method, where the snow on the roof-lights are animated buttons which are triggered on the down state.

Click here to see it at full size

There is also a reset button somewhere in the animation, to return the snow to its original position.

Deitch is a gallery with a great home page. The illustration features the original gallery building and depictions of the artists who exhibit there. There are few buttons or triggered animation, but some nice timeline animation, and the music works well with the graphics, emulating retro computer games. I also love the simplicity of the colour scheme.

http://www.deitch.com/

This flash site allows users to explore the links between the 500 largest US companies through their directors, who often sit on the board of up to 7 of these organizations. The user can easily generate maps which explain these links, and can be dragged and manipulated to suit. 

“They Rule allows you to create maps of the interlocking directories of the top companies in the US in 2004. The data was collected from their websites and SEC filings in early 2004, so it may not be completely accurate - companies merge and disappear and directors shift boards.”

http://www.theyrule.net

I made some adjustments to the sky animation in the second image. I’ve also altered the button animations on the window panes to create a much more subtle gathering of storm clouds. The idea of ‘Glimpses of the Spectacular’ is very important in my idea, and I would like these glimpses of the more interesting images to be triggered by subtle interaction with the main 5 images. It will not be obvious how to trigger these glimpses, and they may not even be discovered at all by the user, but will require a concentrated, inquisitive interaction which explores the finer details of the main timeline. If discovered, the user will have little control over these glimpses, they will disappear as quickly as they appear.

Image 2 contains a button which offers the user one of these glimpses.

html upload test, work in progress…

(this is a SWF so please interact and let me know what you think)

After last week’s review, it’s clear I’ve got a lot more thinking to do on this Flash animation. Re-reading the brief, I remind myself of the 4 key factors to consider:

1. Navigation (a cognitive approach, association and reoccurring objects) 
2. Type of animation (controlled, interactive, triggered)
3. Life spans (of individual objects as well as the animation as a whole)
4. Hierarchy (primary/secondary objects) 

Initially it seems vital to get the navigational system cracked. Further consideration has led to the idea of using the window panes as an intuitive, constant navigational feature. Since the main section of my animation will feature 5 images of the roof lights, it is sensible to use the right most window pane as a forward button, and the left most as a back button. This has the advantage of allowing the user to navigate how they desire through the main body of the animation.

Each of these main 5 images will have its own unique, subtle animation, but it will hopefully become clear very quickly how to navigate between them. The theme of my photographic project was “Glimpses of the Spectacular”, and so along with the main 5 images which portray the general mundane, monotonous, grey gloom of the studio, I will have 4 further images of the special moments of weather that remind us of nature’s beauty.

Finding these images will not be so simple, they may be appear when an inquisitive user explores a small, interesting area of one of the main image, or they may appear at random. They will certainly appear suddenly and disappear even more so, back into the gloom. The user will never know quite how to see these moments.

Another issue brought up in the review was that of transitions. Initially the transitions were a simple cut from one image to the next, but a fade in and out, or even a gradual overlay transition from one to the next should prove more in keeping with the subtleties of my animation.