Monday 1 December 2008

OEP Web dev - Eyes banner

The first banner that the user will discreetly be shown is the creepy masked eyes. 

When I thought up this idea, I intended for the eyes to be shut and then awake of their own accord, to look around, before menancingly look straight at the camera/user. 

With it being video, I wasn't as free to experiment with Photoshop styles, true there is After Effects, but I decided to try and replicate the style the rest of the site has, using the tools on offer to me.

I sampled three different contrasts:







I opted for the middle one, as it really is the middle of the other two. The last one is perhaps too dark and could mean that the user wouldn't be able to fully experience the clip, as in, looking at it, it seems hard to see, it takes effort. Meanwhile, the first one just seems a little too much on the light side being just a straight forward colour to black and white conversion. If that was to be put alongside the the mock ups I made for the comic book panels, it may seem a little too alien. Hence, the middle one seems to me to be a happy medium.

When I actually implemented the design into Flash, I spotted that this banner too could have an opportunity to incoporate a form of interaction. Rather than just being a looping banner which may instantly stop the user paying attention, I thought that if I was to adopt a MOUSE_OVER effect, which starts the video, that would be better. Due to the positioning of the banner, the user won't instantly notice it is one, and then when their mouse goes over, it should create a form of surprise. A creepy surprise, that is in keeping with the whole site, I hope!

--

So, when trying to implement this roll over effect I had a few problems. Firstly, my action scripting wouldn't activate on mouse over. I had no complier errors, but it just wouldn't respond. I eventually got over this by layering an empty button over, which does function correctly.

Secondly, Flash automates videos to return to their starting frame at the end of the video. I wished for it to hold on the eyes open scene at the end. After several different attempts, such as using a static image of the eyes open, inserting code to pause it for a couple of seconds, or even reducing the frames per second at a certain point, I eventually realised I could just stop the video on the last frame but one. Then, if the mouse then waves over again, it returns to the start and plays once more. Altogether this banner now works just as I envisioned. 

As a side, one thing that has turned out well is the size of the file. The video started off at 28MB, so I was a little apprehensive as to whether I'd succeed in reducing it down. However, after deleting the audio, resizing the actual on screen image and encoding using the Flash CS3 video importer, the file is now a rather small 328KB! This figure is miles away from the 5-10MB limit for the site.

I'll be back to post soon about the other banner...

@

No comments: