Working Processes: Analyising the Final Product - Annotations

Below I have gone through and analysed the advert I have made in regards to how it fits in with other adverts. I have gone through it's functions, aesthetics and userbility, all of which are very important when producing an advert. The annotations, like the research, also point out what my advert shares with it EE's use of branding.

Click the picture to read the Advert Annotation in higher quality.

Working Processes: Creating the Advert - Testing and Finalising

I converted my file into HTML5 using Google Swiffy, what I found was the most practical converter from researching, and everything worked as well as I had hoped.

I went back to my previous blog posts and noticed that there was a piece of information that I had not included yet. I had not added a price, which would help entice the user into wanting to find out more. It would not be detrimental to the project if I had not included this, but it was certainly a good idea to add it.

On the 4th slide of the advert, I moved the image and Find Out More button down a little bit so I would have room to add a price.

On the EE website, I saw that the cheapest deal advertised for the iPhone 5s from there website was £19.99. So this was what I added to my advert.

I put the price in a yellow circle, which was the same yellow used on the EE website,and then animated it in just after the iPhone picture appears, right before the Find Out More button is displayed. The animate for the price was set to rotate and grow as it appeared, I thought that this looked nice and professional.

My advert was then exported and converted into HTML5, below are the previews of the finished product.

 Download available at:

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.

Research: Finding and Downloading the EE Font

In order to create an advert for EE, it's a good idea to not only conform to their housestyle, but also use the same font which they're known for using. Since their font isn't a system font, nor is it on font sites such as dafont.com, 1001freefonts.net, I will have to get the font from the CSS file.

Firebug is an easy to use Firefox add on which helps you sieve through the HTML and CSS to find and edit whatever you want to.

Before I began I did have some slight inklings that the font used on the EE website would be a regular font with CSS used to modify the fonts appearance. If this had been the case, this would mean that I wouldn't be able to download the font. I would instead have to use the CSS code given, type in the text I want, turn it into a PNG with a transparent background and import it.

Upon inspecting the code, I have found that this is not the case, and it is indeed a downloadable font.

These are the steps I took to retrieve the EE font from their website:

Step 1: Select the font with the inspect tool

Step 2: Copy the H2 class name

Step 3: Go to the CSS tab and paste heading1 into the search. Copy the name of the font.

Step 4: Paste EENobblesRegular in the search bar. Copy the path of the font and paste it after http://ee.co.uk/

 My ending result.

http://ee.co.uk/common/ee-fonts/ee_nobblee_regularwebfont.ttf (lasted accessed 18/11/2013)

Tutorial 3: Prototype and Analysis

I went to the tutorial today to see my lecturer regarding the prototype I had created

He stated that it was good, works well and now it was just the text and graphics to be added.

It was also noted that it would be a good idea to change the prototypes colour from blue to green to suit the EE website theme more.

In his own words

"Be careful with layout and typography - you need to be doing an analysis of how ee brand their own site and their iPhone offer. Make this a priority - the branding is the most difficult part."

As we can tell on the EE website, they use a shade of green which I can use for my advert.

I can find precisely what shade of green and font by viewing the HTML of the EE website page.

Working Processes: Creating the Advert - Prototype

My main aim when creating the Prototype was to make sure that I had all the script working and that the scripts used would convert well on Google Swiffy (The SWF to HTML5 converter).

I also added different types of Tweens to each of the Animations used.

• The first animation I did was a simple 180 degree rotational classic Tween.
• The second animation I did was a motion tween which was set to 15 rotations.
• The third animation I did was a classic tween animation going back and forth with the ease feature set to -100 and +100 on the way back.

All of these features worked well as an SWF and worked well once converted to HTML5.
 

 The HTML5 prototype of which is available to download here.

Planning: What I want in my Advert

From doing research on both adverts, iPhone 5s and the Apple website here are the features I wish to include, along with my own wants outside of research, for my iPhone 5s advert.

• At least three slides on information regarding the iPhone
• Navigation accessible on both top and bottom of the advert
• My logo
• The EE logo
• A button to the EE website
• A sunburst spinning for aesthetics
• The whole advert to link to the EE website 
• Automatically goes onto the next slide after certain time

Having both the whole advert and button point towards the same EE website destination may seem pretty pointless at first glance, however after research noted in previous posts it seems to be the right decision.

The button is there to entice the user and can be quite helpful if the text inside reads "learn more" or something similar.
Having the whole advert click-able is to make it more convenient for the user and the functionality of all interactive / image adverts. Also, in regards to the way I'm creating my advert, the button will not always be displayed, but only on the last slide as the storyboard suggests.

Research: Choosing the Right HTML5 Converter

There are many HTML5 converters available.

Many of them look good, but have pros and cons. They are as follows:

• Sothink SWF Decompiler
• Google Swiffy
• Flash to html5 Online
• Pixel Plant (Server down)

Sothink SWF Decompiler
Pros:                                                           Cons:
Supports AS3                                             Costs Money
Can be used without internet

Google Swiffy
Pros:                                                           Cons:
Supports AS3                                             Only allows less than 1MB
Free                                                            Needs internet connection to work

Flash to html5 Online
Pros:                                                            Cons:
Free                                                             Doesn't support buttons
                                                                    Doesn't support AS3
                                                                    Needs internet connection to work

From the results, it's safe to say that for what I want to do, Google Swiffy would be the best option. It's a free service and the advert I create is unlikely to go over 1mb.

Research: Fetching the iPhone Information

In order to create a successful advert, you need to know enough about the product you're trying to sell. Since I do not own any types of iPhone, it's particularly important to do some research.

The first piece of information I came across was an advert by EE for the iPhone 5s.
https://www.youtube.com/watch?v=6ngr7Y69KOo
This video included a spokes person giving a review on the iPhone 5s and it's features.

The most obvious place to find information regarding the iPhone 5s would be the Apple website.
http://www.apple.com/iphone-5s/
Here we are given many slides as to what features the iPhone 5s has, it also has many circle buttons to select which slide you want to view. Something of which shares the same features that I plan on having on my advert.

Checking the iPhone on a phone retailers website isn't a bad idea either, since it will give many specs.
http://www.phones4u.co.uk/apple/iphone-5s/
Here we've been given the different storage spaces of the iPhone in GB, the resolution, display inch, weight, dimensions, stand-by time etc. All of which is very useful information but not widely accessible on other websites.

Another website which is good to look at is the EE website on the iPhone 5s, here we will be able to see what they're personally offering. Something vitally needed for the advert I am making.
   http://shop.ee.co.uk/iphone-5s-16gb-gold/pay-monthly/details/
The selling points of the iPhone 5s are given. Touch ID, A7 Chip, New 8MP iSight camera, Ultra-fast Wireless, iOS7. It will be a good idea to concentrate on these features when creating the advert.

Tutorial 2: Chosen Competition and Entry Idea

I had a tutorial with my lecturer regarding my entry idea to the Horizon competition.

My idea to make a 160x600 (Wide Skyscraper) EE iPhone advert, which I found from the Recommended section of Google Adsense, for was accepted.

This was great as it meant that I could continue working on my advert and didn't have to recreate the wire frame and storyboard.

At first I wanted to create my advert in Flash and render it as an SWF, however he stated that having an SWF file as an advert would be problematic as mobile phones, especially apple made, don't like Flash nor tend to use it.

We came to a conclusion that having the advert made as a HTML5 would be most practical.

Currently, I have a trial version of SoThinks SWF Decompiler which converts SWF's to HTML.

Since there are many HTML5 converters out there, I will need to do some research as to which is the best one of which I can use for my advert.

Planning: Wireframe and Storyboard

When creating an advert, it's very important that you have a rough plan of what your final product is going to look like. By doing so, it helps make sure that your ending result is the best that it could be and also helps you come up with more ideas.

I decided to do this in Microsoft Publisher, since it was a very fast and simple way to get across the ideas I wanted. It's important to have use Software which is very easy and simple to use when planning so that your ideas can be applied onto the storyboard fast without you forgetting what you were going to add.

Here is the Wireframe and Storyboard that I have made.

These pictures were gathered from the apple website and may be the ones I use for my final advert.

Research: Researching Adverts

Before creating adverts it's important to research adverts first.

To start with, here is a 300x600px advert I came across quite recently whilst looking at an article on the MSN website.

It's an advert for the iPhone 5s by Three.

Notably the advert displays these things:

• Text about the iPhone
• The price of the iPhone
• A picture of the iPhone
• A button to proceed to the Three website
• The Three logo
• Small print on the iPhone

These are things of which I can include in my iPhone advert, but may not necessarily.

I have also decided to look at some160x600px adverts. By doing so, I will be able to browse what types of information ads of these sizes produce and come to a suitable conclusion for the advert that I will create of that size.

 Here, the following things are displayed:

• The company's name
• A picture of the advertised product
• A button to the website
• A slogan of the website

 Something of which cropped up in both adverts is that not only is the button clickable, but also the whole of the advert. This makes it more convenient for the user and would have a higher click through ratio.

Research | Planning: Choosing an Ad Format

When creating an ad it's a good idea to make sure that it's at a size which is widely accepted. Not only this but also an ad which is of a size that would have a good click through ratio.

To start off with, I logged into my Google Adsense account and had a look at which ad sizes were the most recommended. Below is what was displayed

There were many options available, but I thought that for what I want to do, the 160x600 - Wide Skyscraper looked most appealing especially since it was under the Recommended list.

Planning: Choosing a Topic for the Ad

There are many things of which I'd like to create an advert for. All of which have something to do with technology, they are the following:

• Playstation 4
• Sky
• Windows 8
• iPhone 5s
• Virgin Media
•  Call of Duty: Ghosts

Out of these, I believe that the three most interesting ones would be Playstation 4, iPhone and Call of Duty: Ghosts as the iPhone 5s has just come out and the other two are yet to be released.

There is more information about the iPhone 5 released, and I believe it would be an very interesting topic to advertise.

From here there are two options, either advertise the iPhone 5s for Apple or advertise the iPhone 5s by another company such as a services provider.

I've chosen to go with EE as their television adverts are very humorous.

In conclusion, I've decided to make an advert for EE on the iPhone 5s.

Working Processes: Modifiying my Posters

To make the posters more consistent, I merged all three posters together and came up with a final design which suited all posters.

Something noted in the tutorial with Ian was that the posters could be different colours as long as they all had different colours and it wasn't just two red with another one blue.

My posters ended up looking like the following:

All posters have:

• My logo in the same place.
• The same font and colour for the title
• The companies logo at the top left
• A tinted box which the text sits
• An "enter now at URL" placed at the bottom
• The deadline displayed

I believe this is definitely an improvement to what the posters looked like before!

Working Processes: Modifying my Branding Logo

Originally I had made this logo but after the tutorial I had on the 21st of October with my lecturer, we came to the conclusion that it was best to change it slightly as it shared the resemblance to the Anarchist Logo.

Before	After

The new logo keeps the same colour but has a different font inside the circle. The circle has been extended to what now looks like a slash of paint. This now gives more personality to the logo and gives more of an arsty feel.

The new font used for the logo was a personal favourite of mine called Grizzly BT and was a font I had previously found on the azfonts.net website.

Both logos are PNG's and have the A's inside as transparent and not white. This means that if the logo was on a blue background, the A inside would look be displayed as blue. If the logo was ever applied to a red background a drop shadow would be added to the logo.