Showing posts with label Natural Fizz. Show all posts
Showing posts with label Natural Fizz. Show all posts

Changes

Having used storyboards to plan out my ideas when it came to the filming there were some complications and so I had to make some changes to the ideas that I had drawn up in the storyboards. I kept the core ideas but due to weather and technology limitations I change some of the settings, for example the park scene is now in my back garden but I set up a football goal to make it more relevant.

Importing into Flash

Now that my assets have been drawn up I need to import them to flash. I can do this by going File > Import > Import to Library. This allows me to pull the AI files in to the library of my FLA.

Here is the screen that show you what you are importing and because it is an AI it can differentiate between the different strokes in the file:















The file then appears in the library as a graphic (which I can then convert to a movie clip or button as needed) as well as the assets so it keeps the original:



















From here I can just drag out the movie clip from the library and use it on the stage how I wish.

Drawing in Illustrator

To give my animation a bit more visual flare I am going to draw the objects I need in illustrator, apply brush strokes to them and import them into flash as you cannot do that in flash alone. I open up Illustrator and draw out the basic lines for my assets (in this case a desk) using the line tool. Then, using the brushes pallet I apply a nice brush to make it look more artistic.


Here is the desk with the default stroke:











Here is the desk with the new stroke:











I then drew out the room and a window. I also drew a TV, but I did not use strokes for this. I wanted the TV too look realistic enough because the character will be entering the TV and the TV will frame the scene so it will be less distracting the more plain it looks.















Next I need to import this in to flash.

Intro: Bubbles

I have storyboarded my scenes and the first scene will be the introduction. I have decided that bubbles will rise up because this is a fizzy drink and the logo will appear in the top left corner. To make my bubbles I made a circle with a thick white stroke and no fill. I then used the pen tool to make a small but thick white stroke near the edge of the bubble to make it look like a shine.















I converted this to a movie clip, and then duplicated it many times. Once I had a large row of them across the width of the canvas I resized them so there would be greater variation between the size of the bubbles, and I also changed the transparency of them to create an impression of depth. This is what I ended up with:









I placed them on a keyframe at the start, then inserted another keyframe where I wanted it to end, and moved them all to the top. I then distrubted them to a layer each and created a motion tween. By doing this they all moved to the top, but now they were all on their own layer I could manipulate them individually. I moved both keyframes to different positions on the timeline to create a variation in speed, and then moved some of the bubbles around on the final keyframe so some of them would move a bit more instead of just going straight up.

Problem Solving: Mute/Unmute

I wanted to create a button that could mute the sound and then unmute it again. From what I had learnt in class I couldn't do this. The best solution we had been taught was to stop all sounds, but if you are presenting a complex series of events with sounds, stopping and starting them isn't going to keep everything in sync. I also wanted to have it all on 1 button to keep the interface tidy, but couldn't work this out. After looking at various tutorials and resources I managed to piece together different functions in to what I wanted to do, and had a lot of trouble getting it to work along the way.

- - - - - - - - - - - - - - - -

My first problem was getting the sounds muted. After poruing through tons of actionscript, I managed to be able to set custom volumes for sounds following certain actions (such as on press) but it would only work for files specifically loaded with that function attached to it. I eventually found a brilliant technique where you create a global sound file, which when muted mutes all other sounds. The referenced sound itself doesn't exist but it allows you to manipulate all volume.

_root.globalSound = new Sound();

Here is the code I wrote:

//Audio Off Button
muted = false;
audio_off.onRelease = function(){
if(muted == false){
_root.globalSound.setVolume(0);
muted = true;
}
}
//End Audio Off Button

It basically says to that it's not muted at the start, and on button press (if not muted) change the volume of the global sound file to 0 effectively muting all sound and then sets muted to true. Then on the unmute button I wrote this code:

//Audio On Button
audio_on.onRelease = function(){
if(muted == true){
_root.globalSound.setVolume(100);
muted = false;
}
}
//End Audio On Button

This part says that on press of the unmute button, (if muted is true which it should be because it's set true at the end of the press of the mute button) then to turn the volume of the global file to 100 and to make muted false to reset everything back to the way it was before.

Problem solved.

- - - - - - - - - - - - - - - -

My second problem was that I wanted it to all be done on one button. While I didn't achieve this, it's now irrelevant as I did it with 2 buttons but the illusion of just one. My solution was to have 2 layers. On top would be a layer with the mute button, and underneath that would be the unmute button.

In the end I had this code:

//Audio On Button
audio_on.onRelease = function(){
if(muted == true){
_root.globalSound.setVolume(100);
audio_off._visible = true;
muted = false;
}
}
//End Audio On Button


//Audio Off Button
muted = false;
audio_off.onRelease = function(){
if(muted == false){
_root.globalSound.setVolume(0);
audio_off._visible = false;
muted = true;
}
}
//End Audio Off Button

It basically syncs the visibility of each button with the audio's mute status. If mute = false then the mute button shows, but if mute = true the mute button becomes invisible revealing the unmute button and pressing that changed the status back to mute = false so the mute buttons shows again.

Problem solved.

Feature: Tooltip

To make my interface buttons more compact I want to be able to just use symbols that represent their function and not have the written words. This is fairly simple, but this leaves a problem where you cannot be certain that everyone viewing this interactive flash advertisement will know what the symbols mean, even if they are very user friendly. To get around this I am going to create tooltips, which feature in many programs to help the user.

Wikipedia says:
The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small "hover box" appears with supplementary information regarding the item being hovered over.

Source: http://en.wikipedia.org/wiki/Tooltip

This is going to require some actionscripting, so I have looked around the internet for various techniques and tutorials and come up with a solution. Using an external actionscript file to create a 'tooltip class, I can simply assign the class to a .onRollOver = function().

Here is the code applied to the button in a frame:

audio_on.onRollOver = function() {
tt.showTip("Sound On");
}
audio_on.onRollOut = function() {
tt.removeTip();


Not being skilled enough to have written this myself, I did use a tutorial and after some trial and error I began to learn what each of the variables in the external actionscript file did so I was able to change things like the size of the text, size of the box, and removed the small point at the bottom that made it look more like a speech bubble. In the end I have something that is clean and informative, which is perfect for what it is supposed to do.

Example:







This shows a tooltip when he mouse hovers over the mute button.

USB Design

To add some authenticity to the idea of this ad campaign, I have designed the look for my USB memory stick. I will not be making this memory stick (for cost reasons, so I will be using any stick I can get), but if this were a real campaign this would be the type of thing I would use.












I have set rough measurements based on a memory stick I own.

Research: Chuckle Vision

Chuckle Vision is a good example of British slapstick comedy.



At 2:51 there is a classic example of slapstick comedy. 2 people are chasing each other around a tree and this is a cliche in slapstick. They never actually meet and don't see each other. They turn round and try the other way and still don't meet each other.

My animation:
I could have a chase sequence that involve the boy being chased for doing something naughty, but never being caught running around a big pole or something.

Research: To Me To You

To Me To You is an old(ish) childrens gameshow that features a section called 'Chuckle Chuck:



It involves the children using a primitive catapult to launch custard pies at the host of the show. The custard pie is an old cliche in slapstick comedy and is always used.

My animation:

I could do something around custard pies being thrown or falling on to people, making a big mess.

Research: 7up

7up is a brand of lemon-lime flavoured soft drink, very popular in the United States and also sold worldwide. Soft drinks have been typically marketed towards children, and 7up have used several 'devices' in order to make it more marketable towards that audience. Like the ad campaign this project is focused around, 7up have sed characters to try and tempt children to buy their product.









One such mascot was 'Cool Spot'. The 7up logo features a red circle, and for a campaign in the early 90's they made this red circle anthropomorphized in to 'Cool Spot'. A human like figure, comprised of the red circle with stick arms and legs wearing shades. With 'cool' becoming a new trend they added this in an attempt to attract children because they wanted to be 'cool'. This mascots biggest success came in the form of a game called 'Cool Spot' released on many game consoles including the Sega Megadrive. The game was very well received and because it was such a good game it became very popular, acting as a large advert for 7up.














- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


Throughout the 80's, 90's and in some places even later, 'Fido Dido' has been a popular mascot for 7up. Here is what Wikipedia says about him:

"Fido Dido is a cartoon character created by Joanna Ferrone and Sue Rose. Rose first developed the character in 1985 on a napkin in a restaurant. Fido Dido was licensed to PepsiCo in the 1980s, but the character did not receive much attention or popularity until the early 1990s on numerous products, particularly stationery. Later, he was replaced with Cool Spot as the brand mascot. Fido Dido reappeared in the 2000s and is currently[when?] used on cans and advertising for 7 Up in countries worldwide from six different continents."
Source: http://en.wikipedia.org/wiki/Fido_Dido

He is a simply drawn character, who looks like a teenager wearing a t-shirt, shorts and trainers. The age of the character seems like the way in which they are trying to relate to the target audience. His simple art style is attractive and in no way intimidating, making him more accessible.





















My animation:
I could go for a very simple, clean look for my character like the 'cool spot' or a very obvious drawn character look like the Fido Dido. In any case, their ad campaigns are a good case study for this project since I have to do something very similar.

Research: Laurel & Hardy

I am conducting visual research in to examples of slapstick comedy to get ideas for the type of actions and animations my character will be involved with, and one such source is Laurel & Hardy. They are best known from the silent movie era in the early part of the 20th century. Throughout their career there work consisted of largely slapstick gags, often seen now as clichés.

In this clip, they are playing the role of people checking the wine in a cellar:



This scene is constructed by following up every slapstick gag with another gag. Every action by Stan Laurel provokes a slapstick reaction from Oliver Hardy. The first one in the scene is when Laurel is leaning against Hardy with a candle in his hand. Hardy can feel something, and has an over exaggerated look of puzzlement on his face. He then screams in pain when he realises he is being burnt. The next gag comes when laurel moves away from the ladder, not realising he is supporting it so Hardy falls from the ladder and a big jug of wine or water pours over his face.

Next, in an attempt to be helpful Laurel puts the ladder back up, but knocks the cork from one of the barrels and a big stream of liquid pours out on to hardy who sits there, still, as if to show how fed up he is. Hardy then tried to get liquid from the barrel again and it sprays up in his face. Most of the slapstick gags stem from accidents or a result of laurels clumsy, perhaps ignorant nature. He is causing things to fall down etc. without intentionally doing so.


My animation:

I could use this concept for my animation. We want the child to appear naughty, but not in such a way that the parents find it obscene or likely to incite naughty behaviour from the children. This style of slapstick comedy suits that perfectly, as (philosophically), it is questionable is someone is morally accountable for the consequences of their actions if they are not intentional or stem from ignorance. Therefore this may be an appropriate level of 'naughty', while not making the character accountable for the result of his direct actions. This would create an appropriate level of comedy without offending parents.

Research: One Foot in the Grave

I am conducting visual research in to examples of slapstick comedy to get ideas for the type of actions and animations my character will be involved with, and one such source is One Foot in the Grave. Again, not the obvious choice for slapstick comedy but this particular clip gives a great example of it.

In this clip, Victor is sitting in his chair and he attempts to answer the phone:



At the start you are vaguely introduced to the idea that a dog is missing. 40 seconds in to the clip the phone rings and Victor is sitting in his chair. He can hear it ringing, and reaches down behind the chair without looking because he knows the phone is there. Again, without looking he pulls a small dog up to his face and says his phone number in to it "4291". Then, he suddenly realises with a big, exaggerated shocked look and pulling back of the head he stares at the dog and the canned laughter explodes over the top.

My animation:
I could concoct a similar scenario in my animation involving my character trying to grab an item and actually grabbing something unexpected or shocking.

Research: Only Fools and Horses

I am conducting visual research in to examples of slapstick comedy to get ideas for the type of actions and animations my character will be involved with, and one such source is Only Fools and Horses. While not the obvious choice for slapstick comedy (as it is rarely featured in the show), there is one particular scene that is usually referenced when talking about the show.

In this clip Del Boy is talking about playing it cool, when something unexpected happens:



The clip begins with him talking to his friend about talking to some girls, and then about playing it cool. After a 30 second build up of conversation, he then attempts to lean on the bar without realising a couple of seconds before that the barman had lifted it. He then falls over, to an eruption of canned laughter. A couple of seconds pass and then his friend turns round to find that he is not there and looks around confused before he gets back up again.


My animation:

Again, I could use a similar concept for my animation, where my character is attempting to perform a task and makes a mistake or falls over in a slapstick style unexpectedly.

Research: Frank Spencer

I am conducting visual research in to examples of slapstick comedy to get ideas for the type of actions and animations my character will be involved with, and one such source is Frank Spencer. Played by Michael Crawford, he is best know as Frank Spencer in the British sitcom 'Some Mothers So 'Ave 'Em'. The show is infamous for it's use of over the top slapstick comedy.

In this classic clip, Frank Spencer attempts roller skating with some unexpected results:



The clip starts out with Frank attempting to skate in a roller skating rink but obviously not doing very well. The over the top tumbles and awkward attempts at skating are classic examples of slapstick comedy. At 21 seconds he is on the floor from falling over, and another skater collides with him which trips him up and is another slapstick cliché that immediately brings laughter.

This continues until 40 seconds in, where he smashes through a door and is thrust outside on his roller skates at a high speed and seems unable to stop. What follows is a sequence of amusing scenarios of him moving around a town on roller skates unable to stop and they are all funny because of how absurd it is (for example: going down a spiral staircase on roller skates, under a truck etc). These sequences are all sped up slightly to heighten the sense of speed and makes all the actions seem more amusing. The scene ends with him going in to a shop full of baby care items and knocks bookshelves over and crashes, landing in a crib covered in stuff.

My animation:
My animation could feature something similar to this. Perhaps not roller skating as that has nothing to do with the animation, but a similar situation where the character is trying to do something they are not familiar with and keeps making mistakes such as falling over.

Colour change

After getting some feedback from my tutors I have decided to change the colour of my murky drink. I had made it white, as the variety of colour in the ingredients didn't give me a solid colour to go with so by making it white I attempted to make it neutral. They thought it would be better to have a set colour, and I agreed. I decided to make the colour of the drink orange, as a bright orange could be appealing to children and this goes along with the carrot ingredient in the drink.

Research: Charlie Drake

I am conducting visual research in to examples of slapstick comedy to get ideas for the type of actions and animations my character will be involved with, and one such source is Charlie Drake. He was considered very much the top of the slapstick genre during the 1950s.

I found this very amusing clip on YouTube that I will be examining:




In this clip he is at what looks like a dinner party, and is wearing a very thick mosquito net over his face, presumably because he is afraid of mosquitos. The man sitting next to him assures him that there are none out at sea (revealing they must be on a boat).

A couple of seconds later, you can hear a buzzing sounds and Charlie exclaims "Hello, one's got through!" and then jumps out of his seat with a spatula in his hand. He then slowly works his way around the table bashing, seemingly at the mosquito, and in the process smashing the plates and making ruining all of the food. The way he hits down on the table is very exaggerated and compliments this physical style of comedy. The outrageous nature of the act is also the funniest part of the clip. The pieces of food that are sent flying, covering himself and the guests is another important element.


My animation:

This idea could be useful for my animation. While the hitting might be slightly too violent, the mess created by the food could be considered naughty without being too bad, and is good for comic effect. Perhaps rather than smashing up food my character could accidentally spill some food over another character or object in an over the top comedic manner.

Murky Drink: Ideas

On the brief it lists one of the 3 type of drinks as green, containing:

Carrot
Tomato
Celery
Beetroot
Sprouts
Parsnips
Celeriac

I have gathered photographs from the internet, and used this to make a colour pallet and generate some ideas for a label.











Green Drink: Ideas

On the brief it lists one of the 3 type of drinks as green, containing:

Kale
Spinach
Broccoli
Linseed

I have gathered photographs from the internet, and used this to make a colour pallet and generate some ideas for a label.











Red Drink: Ideas

On the brief it lists one of the 3 type of drinks as red, containing:

Cranberry
Cherry
Raspberry
Strawberry

I have gathered photographs from the internet, and used this to make a colour pallet and generate some ideas for a label.













New Project: Natural Fizz

We have started a new project titled 'Natural Fizz'. We have to produce an interactive flash animation as part of a marketing campaign for a new soft drink with all natural ingredients. It will be made in Adobe Flash CS3 and put on to a portable flash drive to autorun in fullscreen on Windows and Mac.