Draft pop ups

I had a practice at creating some pop up's, keeping in mind the conventions I found during my research. My first idea was to use the extra footage I created with the fairylights and the camping scene, and use this as the background for my pop up. I want to feature some footage in the Pop up, or a photo from one of the scenes, so it will look visually similar to the adverts, and I need to think about creating synergy between them. I also wanted to feature the DairyFriend logo, one of the two slogans, and a "click here" style button, to direct viewers to the website ( I am going to use my blog as the hyperlink for this ).

 I created these two draft pop ups in flash, using a button, which means I can make the pop up interactive. When the audience scrolls over the pop up, it will move, and when clicked, it will direct them to my blog.

I then experimented with movment, fades, sizing etc. and came with these two outcomes. I am at the moment having problems uploading the files, for the interactive elements to work, they need to be uploaded as SWF files, which Blogger and YouTube do not support. I have therefore for now uploaded print screens of what they look like, but unfortunately you cannot see them in action.

This is how the pop up would appear on a website, when it has not been scrolled over, The slogan, simply milk but no need to chill, would appear letter by letter, and be on a repeated loop. You can see on the timeline that this scene is in the "UP" part of the button, and the "over" part of the button, is the scene that will play when the Pop up is scrolled over. I have then inserted a movie clip into the "over" keyframe on the button, so i could animate into it. The logo is ky, and therefore is large and central.

This is inside the movie clip, and shows what is going on in the timeline at the bottom. There are two "tweens", one fades the DairyFriend logo out, and then the next fades in "click to find out more" The scene also darkens when scrolled over, to suggest the passing of time, from day to night.

This is the pop up in action, showing the slogan gradually appearing. This is without being scrolled over. This would be happening without any interaction form the audience. I found in my research that pop up's with some sort of movement of animation attract the audiences eye better.

This is to show what the pop up looks like when scrolled over, but not yet clicked. The photo darkens and the "click to find out more" fades in. I found in my research this was an important aspect of web pop up's, that the audience were directed to click. I also inverted the cow inside the DairyFriend logo, to put on either side of the phrase. When clicked anywhere on the pop up, my blog will pop up.

This was a second idea  for the pop up, using the same animation, but featuring a different part of fottage from ym advert, the mood created by this footage Isnt as interesting, as it is much lighter, and not as atmospheric, but the animation in the pop up is more interesting, and i like the off center placement of the logo.

This is what the pop up looks like when scrolled over, the van will move across the road and eventually off screen, and then the "click to find out more" will  fade in.

where next?

I preferred the first pop up, because I liked the mood created by the dark atmsopheric light and the tiny bulb inside the tent, but I am going to reshoot this part of my footage in the next coming days, so the fire flickers too, and I think this will make a greate deal of difference to the pop up. I am therefore going to re try it with the new footage, and make some more changes.