Working Processes: Creating the Advert - Adding a link to the EE site

In order to add a full advert link to the EE website, I had to create a button of which filled the whole advert. I also needed to make sure that this button was on the highest layer possible, so it wouldn't be disrupted by other symbols and therefore always be click-able. The navigation had to be on an even higher level though, because it's important that the user should be able to click through the slides without being immediately directed to the EE website.

I made sure that the button matched the width and height of the advert by using the align tool.

Afterwards I then aligned the button to the left edge and top edge of the stage so that it fit perfectly.
The following code was then applied:

toWebsite_btn.addEventListener(MouseEvent.CLICK,toWebsiteListener); frame4Anim.toWebsiteBtn_btn.addEventListener(MouseEvent.CLICK,toWebsiteListener); function toWebsiteListener(ev:MouseEvent):void{     navigateToURL(new URLRequest("http://shop.ee.co.uk/iphone-5s-group/pay-monthly/details/")); }

This meant that both the Find Out More button and the full stage advert button used the same exact function to get to the EE website.

My layers now looked like this:

• Scripts: The layer for scripts
• Label: The layer which stated which slide you were on
• FrameSelection: The layer that highlighted yellow showing you your current slide
• Frame: The layer with the navigational buttons
• ClickOver: The full stage button which covers the whole ad and links to the EE website
• Content: Content which had its own content for each slide
• Master: Content which was kept the same for each slide
• Shadow: Shadow used for the background
• SunBurst: The rotating Sun Burst which looped continuously
• Background: The plain background colour of the EE theme marked: #009C9C

Working Processes: Creating the Advert - Adding the button

Inside the movieclip on the 4th slide (frame 15), I added a button which would fade in after the text and image had appeared. Unlike the other slides, the text and image weren't going to fade out and replay another slide, they were instead going to freeze on that slide. Unless of course the user uses the navigation to look at another slide.

The button was made yellow, since when researching the EE website theme colours, yellow was used for the buttons. The button had several states, Up, Over, Down and Hit. When researching the buttons on the EE website, they only had an Up and Over state but not a Down. Since this was the case, I applied the exact same method to my button. I used the same colours as the button were on the EE website.

There wasn't any need to add a hit state as the size of the buttons were precisely the right size that they needed to be. At first I considered making the hit state the whole size of the advert but then that would mean that when the user scrolls over elsewhere on the advert, the button would change to it's over state and this wasn't something I wanted.

I also decided to modify the lines and convert them to fills, under the modify tool, as this made them look much neater and at more of a solid state.

Working Processes: Creating the Advert - Adding pictures and text

To add the pictures and text to each slide of the advert, I had to first make sure that they were inside a movieclip first. By having it inside a movieclip in means that the animations can still move even when frozen on a slide. If it was however to be a graphic, something animators typically use, upon stopping on a slide of the advert, the animation wouldn't move and this isn't something I want.

I first added movie clips to each slides (I call them slides because there's multiple frames per slide). Inside these movie clips I added text, about the iPhone 5s, which was found from the EE website. The pictures were then added accordingly.

• The text was set to fade in and out by tweening the alpha feature of the text.
• The pictures generally were tweened moving in from the axis and faded out via the alpha tool.

After the animations had been displayed, on each slide apart from the last, I added coding to move it onto the next slide automatically.

Working Processes: Creating the Advert - Editing Pictures

The next step was getting the suitable pictures and editing out the backgrounds so it can be added to the advert effectively without any use of white around an image.

All images of which had already been found from the research it was just the case of editing them. 3/4 images were from the EE website itself and the other one was from the Apple website.

Typically in order to remove the white background I would use the Colour Range tool under filter, however since the iPhone is a shade of white this proved to be quite tricky even with the "Fuzziness" lowered. Instead I used the Rounded Rectangle Tool which surprisingly fit right over the iPhone and got rid of the space around it. I did this to both phones and went back to the original image to cut out the buttons on the side. This technique saved time and was much faster than using the lasso tool which proves to be quite inaccurate especially when it comes down to the curves.

Each time before removing the background from the images, I used the Refine Edge Tool to make sure that the cut wasn't so drastic. With a little bit of contrast, feather and smooth I ended up with a really good cut out.

Working Processes: Creating the Advert - Master Page

When creating an advert with several slides, it's important to have consistency throughout; this is especially important when applying the same graphics onto each slide.

By not having a master page, the graphics which are supposed to stay the same may differ slightly in terms of size and placement. Which is why for all the content, that isn't changing, has it's own layer entitled Master Page.

This Master page includes a title for the advert and a slogan. Both of which are using the EE font I gathered whilst researching called "Nobblee". It's important that these are on all the slides as it tells you what the advert is about. I also have two logos on the master page. The EE logo and my logo.

The title is white whilst the slogan is yellow, the represented text colours for EE on their website.
The EE logo was placed centred near the bottom of the ad just above the lower navigation.
My logo was fitted at the bottom right of the advert, with an alpha of 30%, to not cause a distraction yet still be marked as branding.

Working Processes: Creating the Advert - Layout

The first thing I done when proceeding to create the advert was change the background colour. It went from #524FA1 to #009C9C. I did this because when doing my research, this was the shade of green which was used to represent EE.

I've also changed the navigation's function, aesthetics and userbility.

Functionally: it changed due to adding one more navigation circle to suit the wire frame I had.
 Aesthetically: I changed it for a few reasons. By adding another circle, it meant that I had to decrease the size of the circles, which worked out for the better since it looked neater and more professional.
Userbility: I also decided to highlight the circle frame the users on with a yellow. Of course for this to help, the user may require some vernacular computer knowledge. It was also yellow to help suit the EE theme.

Just above is how I have the advert as of right now.

Research: Researching the EE Theme Colours

Using the same method as finding out the EE font, I also found what shade of green EE use from the CSS of their website.

There CSS code was as follows:
linear-gradient(to bottom, #009C9C 0px, #36B5B6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0)
box-shadow 0 1px 3px 0 #666666
I can use #009C9C for my background of the advert instead of the current blue I have on the prototype. I can also use #666666 to know how much shadow should be used for the green.

I can also use the yellow (#FFE600) which they've used, throughout their site, for the titles and buttons. This would be useful for a Find Out More button which I will add to my advert at the end of the slides.

I've also noticed that the majority of writing used on the green is white and not yellow, so that would be something to consider when creating the advert.

Here is a picture of all the colours stated above. Of course there are some other colours on the EE website, but they are not so much to do with the EE theme.