Bibliography

Benefit, (2013), The rosy tint that has you in mind [ONLINE IMAGE]. Available at:https://www.benefitcosmetics.co.uk/images/downloadables/wallpaper/slides/benetintbalm.png[Accessed 10 November 14].

• This is the link which leads you to the image I cropped them woman from, it is from the Benefit website so I thought it would work well with the whole project along with fit in with the whole theme.

Benefit, (2014), Benefit Cosmetics New hydrating, Tints [ONLINE IMAGE]. Available at:http://www.girlsofto.com/wp-content/uploads/2014/05/Untitled-1.jpg [Accessed 10 November 14].

• Here is the link in which I cropped the Bene Balms from, I chose this one as it was easy to crop them out without having any difficulty.

 Google, (2014). Bow. [image] Available at: http://www.clipartbest.com/cliparts/4ib/4q5/4ib4q5Rig.jpeg [Accessed 23 Nov. 2014].

• This link takes you to the image of the bow I used when the user clicks on the various balms or the make up wipe. 

Flashandmath.com, (2014). Drawing with the Mouse in Flash CS3 and ActionScript 3 Part 2-- A Custom Mouse Pointer and Eraser. [online] Available at: http://www.flashandmath.com/basic/mousedraw2/ [Accessed 27 Nov. 2014].

• Here is a link, I found which describes what code should be used in as3 in order to allow the user to draw on the page. However I didn't find it worked for me as I want the user to be able to change colour with the click of a button and for some reason this didn't seem to let me do what I wanted. 

Parents, F. (2014). Flash AS3 Drawing a line between two objects with different parents. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/16513455/flash-as3-drawing-a-line-between-two-objects-with-different-parents [Accessed 27 Nov. 2014].

• Here is another link, however this only shows you how to draw a line between two parents on the stage. I want my users to be able to colour in the lips that are available to them. This way they are able to try out the colours of the lip balms without having to go to the shop. 

Help.adobe.com, (2014). Adobe ActionScript 3.0 * Drawing lines and curves. [online] Available at: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7dd9.html [Accessed 27 Nov. 2014].

• This page shows you how to draw both lines and curves in action script 3, this could be useful to me as the user will be drawing both lines and curves in my advertisement. 

Flash Explained, (2014). Making an interactive drawing sketchpad « Flash Explained. [online] Available at: http://flashexplained.com/actionscript/making-an-interactive-drawing-sketchpad/ [Accessed 27 Nov. 2014].

• This is exactly what I need in order to be able to change the colours on a click of a button and also the line thickness, however the line thickness in my advertisement will remain the same throughout. This however isn't action script 3 and therefore I will have to read through and see what I can use but most of the coding is different to how flash is used today. 

The Final Project

These are images of my final product. To start with I have a picture which shows everything that is on the page. When the balms are rolled over they expand to show the user what they look like. Secondly, the text on the buy now button flashes different colours and when you click on the button it takes you to the exact page the balms are on. 

My second image shows the bow on top of the balm to show which of the balms have been selected I felt this worked well as the user may have forgotten which balm they had chosen and therefore would have to go through them again and lastly I have drawn a line to show it works perfectly fine. 

In my last image I have chosen to use the wipe at the bottom of the page. When the wipe is clicked on it will colour in the lips the same colour which will then allow the user to go back over and use the balms again. I have added the bow on the wipe so the user knows they are using the wipe rather than a colour. 

Overall I am pleased with my work.

Overall judgement of the project

I think the project went well, I was torn between doing something about the Disney movie Frozen and something that I felt would be more interactive. It so happened that I had one of the balms with me one day and I thought there isn't anything really fun about Benefit's adverts and therefore I came up with the idea of getting the user to draw with the different colour lip balms.

I thought the whole idea was easy to start with and that I would get everything completed within the 40 hours without a problem, however the whole concept of drawing in as3 was a lot harder than I had originally anticipated. I had to search through various different websites to try and get the help I needed however none of them actually did what i wanted them to do. Therefore I had to spend a lot of time on it and luckily I managed to get the help I needed and got it working how I wanted it to work.
I managed to complete blogs throughout the whole process which I feel give a good reflection of my work throughout the different stages.

If I could change anything I would make it a little more complex, and although I feel it is appealing, I would like to have things strike out a little more. The size of the screen was small, I could have probably done it a little bigger however I thought it was cute the way it is.

Drawing in action

I finally managed to get the drawing working how I wanted it to. There are three different colours all of which I managed to use the eyedropper tool to ensure the colour was the exact same as that of the balm. The user can only draw over the lips, to ensure this I created it in to a movie clip and coded it so that it would only draw on top of that; however as I hadn't masked the image you could still draw around it. I fixed the problem by masking the lips and now everything works as it should.

I also managed to get the flashing text working, I didn't put it in a movie clip to begin with and as I told the actions to stop it also stopped my text from flashing. I remembered I had to put it inside a movie clip and now it works perfectly.

Working Progress

I have decided after getting everything working that I want something that allows the user to erase the drawings on the lips so they can start over again. I wanted to have a wipe that when you move it over the lips it will deleted everything the user has drawn however I found that difficult and therefore had to change my idea and make it a lot simpler.

I decided to have a wipe button that when the user clicks on it they can erase the colour they coloured in, I created this by simply having it draw the same colour as the lips and therefore looks like its actually rubbing it out. When I managed to get this working I tried to get it to work when I moved the wipe around however I couldn't manage to do it and if I were to create the project again then I would put more time in to my research to ensure that I could complete it how I wanted rather than having to change it slightly.

As well as getting the eraser complete, I also added bows so that when the user clicks on either of the balms or on the wipe it shows them what they have clicked. This can be helpful as the user could forget what they have chosen whether it be the balms or the wipe and have to start from the beginning. Below are some images of the bow in action.

Problems faced

As I have never done anything like drawing in flash I am finding it hard to actually get it to work. I have tried various different codes and also class files that I have then imported via actions; however for some reason none of them want to work the way they are supposed to work.

I managed to get the drawing of the lips working however it would only draw in certain parts and most of all it wouldn't let me draw over the lips which is no good as that is all I would like it to do.
I found one that did allow me to draw wherever I wanted but I couldn't find a way that would allow me to change the colour by a click of a button.

What I want to do should be fairly easy however I am having trouble getting it to work. Everything else is working fine, my button takes me to the page it should, my text flashes and my lip balms enlarge when I roll over them. I am nearly there but I need to get this drawing working.

Working Advert

This is an image of the background I created along with the face I will use for the woman, I have added in lips that can be edited, this makes it easier for the users to see where to colour and also it fits in well with the whole cartoon like image. 

This is a progression from the first image, I have added the Benefit title which is on the actual Benefit page and also I have added the three balms that will be used for the drawing of the lips. When the user rolls over the balms they will increase in size making them legible for the audience. 

 I then added a button on the page which will allow the user to click and be taken directly to the Benefit page which includes the balms advertised. The 'Buy Now' flashes in different colours which catches the attention of the user and also when the button is rolled over it changes to a lighter pink and lastly when clicked on it turns a darker shade of pink.

Typography

Here is an image I created, which shows the different types of typography I could use on my buy now button. I think I will go with Glamor as it is easy to read, and isn't too different to the font Benefit use on their website.

Lobster is also similar to the benefit font however I feel Glamor will look better on the button, making it more effective.

Woman

The picture I will use for the girl is one of benefits posters they use, I will simply crop the woman out and add lips which will allow the user to then be able to colour them in with the colour they choose.

Benefit (2013) benetintbalm.png

Different Lip Balms

Here are images of the different lip balms I will be concentrating on.

This is the Cha Cha Balm that benefit have, it is a light orange however looks lovely on the lips. 

Here is the Bene Balm, it is bright red and moistures at the same time as it colours. 

Lastly here is the Posie Balm, which is a rose-tinted colour. 

Benefit Website

Here is the website which my advertisement will link to : https://www.benefitcosmetics.co.uk

I will have to follow in the colour scheme to make sure it is similar to the real thing when creating my banner. I will use a woman that has lips that the user will be able to draw over, making it as realistic as possible.

Here is a screenshot of what the website looks like, I aim to make it as similar as possible.

Background Image

Here is the image I have created to be the background of my advert.
I have stuck to pinks as they are widely used on the Benefit website and also I feel it all fits in well together with the idea.

Competitors

Toy Story:

Here is a screenshot of one of Disney's Online Advertising banners. 

Toy Story created over 40 advertisements for three different age groups, with varying banner types from simple Flash to more complex interactive quizzes. This has various colours, however they all fit in with the Toy Story colours. 

Mercedes:

Here is a link that shows a Mercedes car advertising banner. It is very interactive and also very different to many I have seen, I would like to try one of these banners, however I will need to do a lot of research to be able to complete something to this standard.
http://bannerspiration.com/flash-109.html


BodyShop: 

Here is an image of one of the adverts BodyShop have on internet pages. It is very plain with no interaction. You simply roll over the boxes and then you see a red square appear. 

Benefit:

Here is a Benefit banner, which includes the balms I will make my advertisement on however it is very plain with absolutely no animation nor interaction. I want mine to be something the user can interact with and have fun rather than simply clicking a button.

Advertisement Sizes.

Here is a website I found which shows me the different sizes of advertisements allowed. http://designerstoolbox.com/designresources/banners/. I used this to make sure what I was doing fit in with the measurements that are out there. This helped me to make sure everything fit nicely and also if I were to advertise on the internet, everything could be seen the way I can see it when I test the swf and also just helps me to make sure I know exactly what can be done and what can't. 

I decided to create my advert in the shape of a square (336 x 280) as I felt you can fit more in and the user only has to look in one place. I was originally thinking of doing a banner, but the width of the banner is very narrow and therefore I wouldn't have been able to make it as effective as it will be in the shape of a square. 
The size of the square will be the same size as the orange square in the screenshot below.

Previous Winners

The winner of the ‘Online Advertising’ section in the 42^nd annual awards created a video, which was in black and white but was definitely not as complex as the 44^th annual awards. Here is a link to the 42nd annual winners, which will include all of the pieces chosen. 

http://www.creativityawards.com/42A_Online_Advertising.php

Also in the 42nd Annual awards, one of the contestants created an interactive piece about ketchup. It isn't as interactive as it could be however it has a little bit of animation on which catches the users attention. For my piece i will include flashing text and rollovers that will change, this will help the user connect with the piece.  Below is the url which will direct you: 

http://platform.mediamind.com/Eyeblaster.Preview.Web/Default.aspx?previewParams=NJ6kssyYvD4G0PQlt49kd05Ovq7Q%2FQjYbcek2FqqAxfQJqcEsbJbOeRXNpGpIqwhOuYsBs9IMxUO01hSK0zyJbFKQbDLjLcnll%2FOhP3mcmk%3D&AdID=6420442&lang=en-US 

The student who won the 44^th annual awards created a video about Google occupy street. It is all high tech and   about surveillance. It interesting keeping the user entertained.

Here is the link to the video, I would love to be able to create something similar to this however I will have to learn the ins and outs of after effects before I am able to do so. 

http://vimeo.com/91461350

Moodboard

Here is a mood board i created, it shows everything benefit is about. Benefit sells every beauty product you can think of and therefore I decided to create a mood board to show what my advertisement was going to be about and also the feel of the advertisement. Through the mood board it shows everything is cartoon like or of dolls, and this is exactly what benefit is about. By doing a mood board I am able to see what benefit is about and therefore have a better understanding of how I should create my advertisement.