The Interface

This screenshot shows the design view for the main interface. This features 6 buttons, namely for the links, reviews, artisan entertainment website, and the review video button. I tried to make the buttons look less like buttons, and more like simple images, which have a rollover style to let the visitor know he or she can interact with these objects. Most of the images in this scene are animated, including the image of the lead character against crouching against the wall, the pile of powdered drugs, the blurb of the film as well as the box that contains is.

The blurb text is on a separate layer, which contains three different clips of text. Each paragraph fades in and out, and stays static on the scene for approximately 10 seconds - which should be long enough for the visitor to read if he or she chooses. The fade in and out effect was achieved using the alpha transparency setting, which is set to 0% when the clip is faded all the way out, and 100% when the clip is faded all the way in. Tweening allows the developer to simply create two keyframes, one with 100% alpha opacity, one with 0% alpha opacity - and then the tweening process creates all the other frames moving from 0%, 1%, 2%, 3%, etc as the animation dictates.

I found some very useful information regarding tweening here.

The Intro Clip

This screenshot shows the introductory clip scene. This scene contains the video trailer which I imported into Flash as an image sequence, the sequence for which can be seen on the timeline. The layer entitled "skip button" is always on the top during this scene, as it allows the visitor to skip straight to the main interface without having to watch the introductory animation. This does mean that even if the visitor has no intention of watching the introductory video, the video still needs to be loaded with the preloader. Perhaps this is something I should consider more if I were to create something like this again.

The video plays in the centre of the scene, whilst some credits roll up from the bottom of screen. These are synchronised to a sound effect of a heavy metal door slamming shut, which is an effect used throughout the film. I felt this was very consistent with some of the transitions used in the film, and I hope that visitors who have seen the film can relate.

Some promotional images about the film also appear at the bottom, and also use the same sound effect as the text which slides in. I decided to have this, as well as the credits, playing at the same time as the introductory clip just to make the scene feel more dynamic. I thought it was important that there was more than one thing to grab the visitors attention, on every scene as this will also serve to promote interest in the site.

The sound effect was loaded into the library for this particular project, which means that only one instance of that particular sound needs to be downloaded, even if it is used 100 times in the animation. The same goes for all the images, text, and video which were used in the animation - they were all added to the library in order to optimise the file size, and hopefully optimise the performance of the animation, in terms of the time it will take to download it, and the speed at which it will run.

The Preloader

The pre-loader involves the use of actionscript, which loops an animation, until all frames of the entire animation have been loaded. For this reason, I wanted the actual pre-loader to have a small file size, so that this loaded quickly and then informed the user that the rest of the animation was loading. This helps to reassure the visitor that something is happening, and will keep their interest long enough to stop them navigating away from the page.

The central image for the pre-loader is a still image from the film which I captured using Sony Vegas 7.0. I cut around the image so that the two main characters from the film were in the centre, and due to the way that this image was laid out, it means that the "eye" can be rotated about its origin and the heads of the characters will stay in the centre of the image.

On this page, there is also the title of the film, a "drop shadow" of which scrolls past the scene on occasion whilst the page loads. Underneath this, the actionscript inserts the value of the percent variable which is calculated in the action script. The percent is then displayed in a dynamic text box on the pre-loader scene, which updates every time the frame refreshes.

This shows the animation which aims to draw attention to the spinning eye in the middle of the scene. This is a separate layer containing a movie clip of a circle which grows in shape, and the transparency of which decreases at the same time. This creates a "pulsing" effect, from the centre of the eye outwards which definitely draws attention to it. This is looped a couple of times, then the "ring of fire" image which was carefully re-sized would flash up, before rotating and then fading out. Because this animation was a separate instance of a movie clip, this would continue to loop, regardless of how long the preloader scene was running for. This was important, as it is impossible to estimate how long the preloader will have to show for, before advancing the animation.

onClipEvent (enterFrame)
{
_root.stop();
mctotal = _root.getBytesTotal();
mcloaded = _root.getBytesLoaded();
percent = Math.round((mcloaded/mctotal)*100);
loadtext = percent+"% loaded";
if (percent == 100)
{
_root.play();
}
}

This script simply shows how on the event of entering the frame, four variables are declared, those being mctotal, mcloaded, percent, and loadtext. Mctotal is a variable which contains the total number of bytes which the flash animation takes up (and the total number of bytes which will have to be downloaded) whilst the Mcloaded variable contains the number of bytes which have already been loaded. I set the percent variable up to calculate a percentage, based on the amount of bytes loaded, divided by the total number of bytes, and then this result multiplied by 100. I used the Math.round function to round this percentage off, as by default flash gives values very precisely, sometimes to 10 decimal places which is simply unnecessary for this preloader. The variable loadtext simply serves as a container for the actual data which is to be displayed on the pre-loader scene, namely "XX% Loaded" where XX is the value of the percent variable.

The script then checks to see if the value of percent is greater than 100, and if it is, the main introductory movie scene is played.

The raw materials

Before starting any actual design in Flash, I drew some rough layouts of how I wanted my final design to look on paper. Whilst planning this out, I thought about how I would use the images that I had been able to obtain, and then began editing these in Paint Shop Pro 9.

This picture shows how I selected the image of the eye from the DVD cover image, and using the crop tool eliminated all other parts of the image which I did not need. I then applied some sharpening effects to it, and adjusted the colour balance slightly so as to make the skin tone seem a little less healthy than it looks there. Due to the nature of the film, I wanted the interface to look fairly drab, yet inviting the visitor to explore at the same time.


This image shows how I used the image of the syringes which I found on the internet, and created the "back" button using a selection of the image. I inverted the colours, again to fit in with the slightly drab colour scheme and also to fit in with the black background.

The above image shows me editing the image I later called 'ring of fire'. In the screenshot, I applied a lens distortion effect to create the ring which would later flash around the "eye" on the preloader of my flash animation.

Shown here is the Sony Vegas 7.0 interface, where you can see the three channels containing the video clips, speech, and music which I edited together. Notice the automation fades each clip in, and crossfades consecutive clips with one another. I exported this video as an AVI, which I then imported into Flash as a sequence of images.

Introduction

One of the things I found most difficult about this assignment was deciding on a theme. At the time this assignment was set, myself and some friends were getting set to buy tickets for Glastonbury, so an initial thought to create a flash interface for the Glastonbury festival website crossed my mind, though after some searching I found that I would not be able to source enough material for it, in terms of video footage, and photographs.

Then I started to experiment with Macromedia Flash 8 Professional, which happened to be the version of Flash that I have. Having never used this program before I found the task a bit daunting to begin with, but once I had familiarised myself with the Flash interface, and gained knowledge of how to do some basic tasks I already began enjoying creating animations and scripts in Flash.

After some more research, I decided to create this introduction and flash interface for the film, Requiem For A Dream which is one of my favourite films. After some quick searching, I started collecting images which I thought I could recycle by cutting out parts I could use, and then putting them together in a collage to create the main interface.

Some of the images I found are shown here, some of which weren't used in the end.

Some of these images were used in part, such as the DVD cover which I sliced up using PaintShop Pro 9, as well as the image of the syringes which I originally intended to use as a volume level indicator, where the longer syringes mean louder volume, and smaller syringes mean quiet volume. This was never implemented, and replaced with a Mute / Unmute button.

I also began thinking about the other media which would feature in the Flash animation, such as audio and video. I had a copy of the soundtrack (the score of which was written by Clint Mansell and the Kronos Quartet), and after listening to it found a suitable song. I used Adobe Audition to find a suitable clip of the song which I then trimmed out from the original, and set up as a loop which would repeat cleanly, for an infinite amount of time, so long as the user stays on the page, or until he or she mutes the audio using the button in the bottom right.

The video which I used in the flash animation originated from a trailer which I downloaded from the Artisan Entertainment website, then edited in Sony Vegas 7.0, rearranging and chopping the video to create a different style of trailer to the original. I also removed the original soundtrack, and replaced it with other sounds, and music which I synchronised to the video.