Archive for the ‘MA Site + Motion’ Category

UNI [SITE + MOTION] – SWF SIZE PROBLEMS!

May 5th, 2009 | Richard Almond

Strangely enough, after posting that lass post the swf seems to be running rather well when embedded into a post. Possibly due to the fact that it’s been scaled-down. When uploading to an FTP server, each swf seems to be displaying at full screen size, or as close to full size as possible. Instead of displaying the swf at its true size, the browser is stretching it which may be putting extra pressure on the computer which is displaying the animation. I will have to look into the publish settings within Flash to try to get the swf to display at the correct side.

UNI [SITE + MOTION] – SWF SIZE PROBLEMS!

May 5th, 2009 | Richard Almond

I’m having a lot of trouble getting this animation to run smoothly. I know you shouldn’t really go above 800×600 for a swf, especially when hosted online, but at this size I felt I could get nowhere near the necessary amount of detail into the animation. I’ve already gone through and optimized all of my images to 72 dpi, as well as matching their size to that of my fla file. I’ve attempted overriding the quality settings of the image files within flash without luck, and even tried vector tracing the images to reduce file size. What I don’t understand this that the swf is less than 300 KB which shouldn’t be a problem at all, but for whatever reason the whole animation is jittering…

I’m pretty sure that the problem is the moving clouds behind the glass. It’s probably possible to generate clouds with ActionScript but I wouldn’t know where to start, so I have two long, thin strips of cloud texture which I rendered in Photoshop, which move through the animation at different speeds via motion tweens. They both have multiply blend modes set.

I also need to have a think about (what will be) the navigational buttons on the left and right window panes. I currently have the left pane active. The idea is that when hovering over this pane, dark clouds begin to converge to signify that it is a button. A small move clip is used to create this effect, it consists of a few cloud-like shapes which are shape tweened in a loop. Then using ActionScript the clouds randomly generate within a defined area. Initially I wanted the clouds to generate on the roll-over state of the window pane (which would be a button), but this proved to be more difficult than expected. To get around the problem I instead use the actual window pane itself as the button, and have it disappear on roll over. As it disappears it reveals the dark clouds beneath. The problem with this is that the clouds are constantly generating throughout the animation, even when they cannot be seen.  This could be adding to the problem of a slow frame rate.

UNI [SITE + MOTION] – THOUGHTS FOR PROGRESSION

April 30th, 2009 | Richard Almond

Since (frustratingly) I haven’t been able to do much with the computer lately, I’ve had time to do a lot of thinking about where I want to go with this Flash project. Somehow it seems that thinking about these things whilst sitting on a park bench or in a cafe generates rather better ideas to when staring aimlessly at a monitor in a dark room late at night. There are essentially 3 components to the project – the animation, the installation proposal, and the documentation:

 

Animation

1. I feel I have the individual animations pretty much cracked – at least the idea for each image. What needs some thought though is the transitions between images. I’m happy for the 5 main images to transition via a simple fade out/in effect, representing the monotonous boredom of the respective spaces. The transitions between these 5 images and those that represent a “glimpse of the spectacular” however, may need a little more interest. Possibly an interactive method of transition? I’m drawn to the idea of a mask as a method of transition – something dragable which demands effort from the user to reveal the spectacular.
2. I’m also currently toying with the idea of framing each animation. This could simply be to place them within a white container, but the aim would be to unify the images and bring a consistency to the animation which should hopefully help tie things together visually. A frame further resonates the concept of the window which is integral to my animation.
3. I’d like to think about how the animation will be presented online. I plan to have it embedded into a custom web page which I will design to reinforce the theme of my project. This page could also possibly contain instructions on how to view the animation, links to drawings of the installation proposal and excerpts from my original description of the project.
4. The final idea, and this is very much time-dependent, is to explore the possibility of incorporating a soundtrack into the animation. This will most likely be a piece of  ambient instrumental music that would play in the background as the user explores the animation, rather than specific sound effects that are triggered from the animation.

 

Installation

1. Although I have a number of ideas for the installation, I feel that this is the area of the project that still needs most consideration. It seems obvious firstly that my main images/animations should be projected in a way that reproduce some of the sense of enclosure and claustrophobia that the actual rooflights generate.
2. My initial idea for the installation is a raised platform into which viewers will climb. This platform will be enclosed above by the projection screens, which will be positioned above head-height and angled inward to resemble the orientation of the actual rooflights. The screens will be projected from behind.
3. Behind these main screens will be further screens featuring the images which represent the “glimpses of the spectacular”. It will not be immediately obvious to the viewer that these screens exist, and so it will be a matter of chance or determination whether or not these glimpses are revealed.
4. The next question is how the transitions between the main images and the “glimpses of the spectacular ” occur. One thought is that the screens are roller-blinds, which the viewer must operate to reveal what is beyond. Another is that the roller-blinds are automatically operated at random, and so the viewer has no input into what is revealed to them. A further, interesting possibility is that the viewer does trigger the automatic roller-blinds, but through hidden sensors, i.e. pressure/proximity sensors. This would mean that the user is triggering the “glimpses of the spectacular”, but they are unaware of just how.
5. There should probably be a clue given of the existence of the secondary images which are behind the main ones. An idea for this is that small sections of the screens are cut away in areas that correspond to gaps in the image. For instance a crack in a window pane of a stairwell will actually be a cut through the corresponding projected image, and this would offer the viewer a small glimpse of what is beyond.
6. It may be interesting to use the projectors themselves as part of the installation. Since most of my secondary “glimpse” images are of bursts of sunlight, there may be an option to use the projectors to further enhance the experience of viewing one of these “glimpses of the spectacular”. The screens would be projected from behind, and so when the the screens featuring the main images are temporarily removed to reveal the secondary images, a projector would be potentially projecting directly into the face of the viewer. Instead of having the projector temporarly shut off, it would be appropriate to leave it running, representing the blinding sun as it pierces through the horizontal slit windows in the studio before setting.
7. Something else I’d like to look into is using sensors to control the animations. I’m aware of an Arduino-to-flash script which which would allow users to control animations through physical movement when viewing the installation. One idea is to have a proximity sensor mounted on the screen which features one of the “glimpse of the spectacular” images. As this bright, vibrant image is revealed, the viewer would naturally be drawn to explore it more closely, but upon doing so the image would gradually become more desaturated, depending on the viewer’s distance from the proximity sensor. In this way the viewer truly only experiences a “glimpse”, and experiences the frustration of isolation in the studio space.

 

Documentation

1. I’d like to think more deeply about the method in which I document this project, and a simple A4 bound booklet seems rather inappropriate. Using the fantastic Things Our Friends Said On The Internet 2008 project by Really Interesting Group as a precedent, I plan to create something unique and pertinent, which could almost exist as a project in its own right.
2. Since the project is about windows, the glass, what is beyond it, isolation and striving to discover something spectacular, it would prove relevant to experiment with an origami-style document. Initially in a folded state, the document must be unraveled by the viewer to unveil the money shots. During this process of unfolding, the document would reveal snippets of the development of the project.

UNI [SITE + MOTION] – FLASH ANIMATION v6 IMAGE 7

April 2nd, 2009 | Richard Almond

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

UNI [SITE + MOTION] – FLASH ANIMATION v6 IMAGE 3

April 1st, 2009 | Richard Almond

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

UNI [SITE + MOTION] – FLASH ANIMATION v6 IMAGE 4 (MASKED)

March 29th, 2009 | Richard Almond

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

UNI [SITE + MOTION] – ANIMATION WORKFLOW

March 29th, 2009 | Richard Almond

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.

UNI [SITE + MOTION] – ANIMATION v6 IMAGE 4

March 28th, 2009 | Richard Almond

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.

UNI [SITE + MOTION] – ANIMATION SCHEMATIC

March 26th, 2009 | Richard Almond

I’ve been planning out what I think will be a more concise and finalized version of my animation. Each image has its own unique animation, but all will be linked with a standardized navigational system. See the Flickr set for more detail and read the image descriptions to see what I’m planning for each image.

UNI [SITE + MOTION] – DEITCH

March 26th, 2009 | Richard Almond

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/