Wednesday 3 December 2008

OEP Web Dev - Typewriter popup

From the hand drawn design I created earlier, the typewriter one stood out as a decent effort for a popup. It could incorporate animation, interaction and be purposeful - advertising the comic. The Film 4 one did this, and I thought it a successful piece.

To begin, I photoshopped a desk and background adopting the gloomy look, as a placeholder for the typewriter. The filter that I have been applying throughout is Artististic Cutout. I applied this to the typewriter image and after altering the levels found what best represented the sort of cartoon image. 



The brief mentions the importance of image quality. Admittedly if you were to scrutinise the typewriter you may deem it to be of inferior quality. However, this isn't due to poor compression, but instead the filter applied makes it appear aged and the application of it's colour intermittent. It sounds mad, but this is intentional in keeping with the type of comic book images.

I thought a good way to inform the user there is some interaction needed to move the progress along (above the information of the caption box), I added a typewriter click sound for the button's over state. It was tempting to take a lazy approach and just use that one same sound thereafter, when clicking, to imitate the typewriter as it displays it's message. However, I used Audacity to alter the pitch several times meaning you now hear various intonations. It just seems more realistic now.

The main issue that I encountered whilst making the Flash piece was to replicate a realistic motion effect from the paper floating through the air and transforming into the comic. Flash likes to tween in a clock wise method, meaning that on several attempts, the paper would spin around like a Catherine Wheel, not a piece of paper! 

It resulted in Flash crashing on numerous times - I don't think it could process what I was asking it to do. The last time I did something like this was in 3D Max and so perhaps I over estimated the software's capabilities.


I believe I have managed to get around this problem somewhat by adding what is known as a Shape Hint. It helps Flash know what line/corner should/shouldn't be moved at a certian time. In all, it makes for a better shape tween. Now I find the animation to be much more fluid and progresses from one thing to the other in an aesthetically pleasing way. 

It's a slight shame about how I had to encorporate the actual Villains imagery on the final section of the paper tween. I envisioned it twisting round and revealing part by part the new information, but as I mentioned above, the program just wasn't playing ball for me.

The last thing that I think is important for a pop up banner in particular, is to have some sort of link to where it wants to direct you to. -You don't want to advertise and then not provide a hand in getting to the sponsors site! Henceforth, after a little trial and error, "click here" now takes them in the main browser window to page 3.

Of all the banners I think I like this one the best. It looks gloomy, I like the comic book feel with the captions box, and also after varying the sounds for the typewriter clicks it is actually more authentic and should make the user want to continue interacting with it with the appearance of the text on the paper. I actually quite like making Flash banners!

@

No comments: