Graphics - Tony Ball

Throughout the project so far I've rarely had the opportunity to close down Adobe Photoshop and Illustrator. As you can see from interface videos posted by James Medd and Congratulatory Videos compiled by Callum, work is always progressing. As there are a few aspects to our Interface I'd like to address I'll separate this post into smaller subsections, beginning with:

The Main Interface Screen

Previous posts ("Some Of Our Progress So Far/Second Pitch") explain in a broader sense to how all the pages are created. Here I shall explain how I refined my technique to fit our brief. Initially Callum would hand me a fully drafted drawing of the page/room. From scanning these images into my computer I trace over them as accurately as possible in Adobe Illustrator to give myself a plain outline of the room. These outlines provide my images with the cartoon-like appearance which helps me reinforce my aim to create clear and simple-to-understand illustration I discussed in my brief.

After tracing the images I import my new black outlines into Photoshop ready for painting. I colour the image by applying block colours to highlighted sections and applying gradient by using the burn and dodge tool. When looking at screens close up to add texture I'll experiment with some filter effects.


The main interface screen, fully rendered.


Me applying effects to create a wood-like appearance

To create the glowing buttons I singled out the objects James planned to use on the main screen making everything else invisible and applied an outer glow within the blending options. I exported this on the full 1280x1024 resolution meaning James can just lay the image above the original image of the room and adjust the alpha channel creating the glow.



You may notice on the main interface image that I've left the window panes transparent. This will most likely appear black or white when embedded on the blog as it may not support transparencies of PNG files. By keeping the panes transparent this allowed me to create a 360x240 pixel video of rain that I created in Adobe Photoshop and Final Cut Express. How I created this was a mixture of "Fibers" and "Motion Blur" filters upon a black layer within Photoshop. By adjusting the position of the 'Rain' layer I could create the illusion of movement. I exported a series of 6 images that I could import into Final Cut Express and animate into a second long loopable video.

I used the same effect at a larger scale when creating the rain for the shop front introduction screen.


360x240 Rain Loop

Screen Shot Of Video Patch For Large Display - Tony Ball

http://i49.photobucket.com/albums/f289/tony_ball/Picture1-1.png

At the above link is a screen shot of the new patchwork for the large display following Monday's (08/11/2010) presentation. I know the resolution set on the jit objects are incorrect but for the purpose of me being able to test it's functionality on my own screen I've set it as 1280x720.

This patchwork is much more simplified in comparison to the one presented on Monday and is flawless when tested on my own television. I Haven't yet integrated it into the main interface patchwork of James' so if it still causes major issues or not is still undiscovered.

The only issue I have with this patch is the use of delay objects to stop the video from looping. I've noticed from past experience that the delay object can be quite temperamental and sometimes doesn't work. There's also an issue of when I start one video halfway through another and the bang from the first video stops the second halfway through.

I'm working on a solution for the latter problem which I'm sure I'll find one but if there is a way of stopping jitter looping without the use of a delay object that would be great.

Finalising the Video & Graphics - Callum Ward

Tony and I have now finished creating the graphics and video for the installation.

Using the same technique previously demonstrated I designed the required animations freehand and gave them to Tony to be digitally coloured. I then started work on creating the congratulatory videos using Adobe's After Effects software.

As a group we decided on making the videos appear as if they were being shown via a projector; the first action I took was to create this effect.

I asked Tony to create a black frame in photoshop and placed this on the top layer of every video. I then used a number of filters such as tint and grain and applied them to an adjustment layer which I used on all animation layers beneath the frame.
To generate the flickering effect that projectors have, the opacity of a plain grey layer oscillates on a timer. This effect had to be lessened on the darker videos as the effect was amplified by the contrast between the dark and light layers and it became overbearing.

To complete the feel and texture of projected film I used Adobe Photoshop to create stylised black scratches on a transparent background and had them appear at just one frame at a time in random patterns and combinations.

Once the projector effect had been created I imported the images for each video and sequenced the automation. I then imported the audio files that James H-W provided me with and arranged them within the video, I asked him to create several separate sounds, a projector turning on, the projector running, the projector turning off and film burning, music for each scenario, and a few foley sounds such as an owl hooting and a snake hissing. Once I had arranged the audio to match the images I rendered the videos to the appropriate resolution.

The initial quality of the videos was extremely high so I asked to Tony to import them into Final Cut and render them to the same quality as all the videos that he had already created using that software.

I will be posting the videos on this blog once they have been uploaded onto YouTube.

Once the videos were completed, James Medd asked me to create a simple MaxMSP patch that would play the videos on the large display screen upon receiving a bang from the main patch. I used the ‘movie’ object as the basis of this patch.

After testing the whole MaxMSP program with all the video Tony and I have created we have discovered that we need to make some decisions on which media we are to include in the final patch. As a group we will be investigating all our potential options over the next few days.

Audio Updates (James H-W)

Been a lot of work over the last couple of weeks or so that I need to catch everyone up on. Firstly having armed myself with a wealth of foley sounds, work has been completed on the environmental audio. The environment is mainly comprise of sounds recording of the hustle and bustle of Scarborough town centre which has been edited so that easily audible passing conversations don't appear. These are then mixed in with recordings of wind and rain which are mixed and EQ'd differently depending on whether the user is outside of the shop (at the beginning) or inside. Inside the store the bubbling elixir experiment is separate to the rest of the background audio and is a mono recording which helps with placement and also helps by looping at a different time to the rest of the audio. Other spot sounds such as thunder and horses have also been created to be triggered separately. Other environments have also been recorded for the origins of each charm. These sounds are mostly made up by foley sounds and some studio magic, but the mother of pearl fishes eastern market environment has had some BBC sounds blended in one comprising of foreign spoken busy streets and a highly edited environment which included an eastern instrument playing in the background where busy road traffic had to be edited out. This was done mainly due to a shortage a busy foreign streets and eastern instruments in the Scarborough area.

Perhaps the largest body of audio work undertaken for the assignment has been the voice over work. The main idea was to go completely over the top with the amount of dialogue recorded often creating multiple takes of the same sentences as seemed better to have too much and scale back than to have too little and keep having to return to the studio. The voice (if I say so myself) seems to work very well but I'm not a trained vocal actor and the recording process was quite painstaking as the longer sentences often needed multiple attempts and a lots of time spent editing out mistakes. After long periods of editing regular sanity checks had to be made as the constant sound of my recorded voice playing over and over in my head was rather maddening and wouldn't stop being mentally replayed during tea breaks. The dialogue itself was a mix of pre-written ideas and some some improvisation, the quality of the audio has been produced to give his recorded voice an aged quality.

Most of last night was spent creating winning musical phrases which are to be played when the user wins a charm which Callum Ward would then use to create congratulations videos. The requirements being that they each had to be about 5 seconds long, reflect the environment in which the charms are found as well as reflecting the fact that the user had won a prize and we all decided that it would be good if the phrases were 'rubbish in a good way'. Having completed the work late last night I hope that I've found a good balance and that there's not too much 'rubbish' and not enough 'good way'.

Time was also spent creating some icing on the cake sound effects mainly feedback ideas we had been given during Mondays lecture which they'd like to see incorporated into our design. These were deemed to be luxury items to be added if we had time once the essentials had been completed. This consisted of little things like a chest opening sound and a dragon growl to go off when someone pressed on the dragon on our map. I actually brought in an out of work session dragon to be recorded, you can imagine the health and safety issues that were involved, hours of paperwork.

Patch Building Update - James Medd

I've been pretty busy this past week getting our interactive installation prepared for a prototype presentation this coming Monday. I thought it right to give a quick update on what I've been doing:


- Now that we have all our quiz questions prepared, I programmed in this section earlier this week. It was a little tedious after a while but paid off! There are a minimum of three questions for each of our five charms giving a good amount of content for the user to interact with. To keep a friendly feel to our age range, we have opted for a trial and error method. While this is not so much of a challenge, it does take out any potential frustration for the user.


Since creating the first version of the quiz, our graphics members have created the accompanying visuals which I have now integrated, thus making the quiz practically complete bar a few potential aesthetic tweaks!


- Now that every screen/section's main visuals are complete, we no longer have any blank screens to end up at (huzzah!) and most sections now have the core of their interactive elements in place bar a few additional graphics and informational content. These may not be entirely complete for the prototype viewing but it should be clear how each section works. With a bit of careful programming I have also been able to include some of the graphics members' subtle embellishments in certain areas too, this will be seen on Monday!


- Now that the majority of our audio elements have been recorded, the installation is no longer silent! Various elements of background and triggered sounds are now in place with all appropriate timing considerations and fades programmed in. There are still plenty to go but there should be enough included in the prototype for everyone to hear how they will work in the context of the installation.

There are probably a handful of things I have forgotten but anything that I have missed will be seen on Monday afternoon. Things are most definitely taking shape! Video/Images to follow prototype presentation.

Our Interface With The Touchscreen - James Medd

Hello all, just a quick post following my first practise using the interface on the touchscreen this morning.

My principal jobs so far with this project have been to work closely with the graphics/video members of the group in the design and creation of our interactive interface and to assemble the interface and content within MaxMSP – putting it all together!

I’ve been working over the past fortnight or so to build the interface at home on my laptop and today I took what I had so far to use with touchscreen. As planned, everything is nicely spaced and laid out, clear and most importantly, feels very easy to operate with the screen and runs very smoothly.

The video below shows me briefly operating the device, showing off the overall look and feel of the interface, with some of the animations and graphics now in place. Obviously there is still a lot of content yet to be integrated on the other pages but you get the idea of how it’s going to work.

Just a quick note to Rob, I have emailed you about this but we will need Max to be upgraded to the latest version (5.1.5) as some of the added functionality with certain objects is necessary to how our installation works. The DMG is on the desktop of the Mac Mini but needs the administrator password to be installed. Thanks!

Some Of Our Progress So Far/Second Pitch

In this video we expand on the previous pitch (see earlier posts for transcript and video of presentation) and also show some of what we have so far. These are the very early stages but should help to give an idea on how our interactive installation will function.