Process
To start my whole video off I decided to start the same way I started in my title sequence this would simply help people relate the two animations together. The reason I used a door is because it is such a ionic symbol in the monsters inc films as this forms the basis of the whole film. To do this is I used the door I designed in the previous animations to and then used the outline to create a black background, I layered these two elements together to give them more depth as this would give the impression that the door would open to behind the scene.
|
Next I wanted the characters on the film to fly out from behind the door, this was quite difficult as most of the images were much bigger than the door its self. To over come this issue I used a range of key frames to animate the alpha channel, this affects the transparency of the layer. I tried to make images flow as best I could but sometimes like in this case the arms would stick out the sides of the door so it would be impossible to get the desired look by just animating the alpha channel. This is where I had to use masks to remove certain sections of the image, this was much more difficult than using simple alpha and position key frames as I had to draw a shape which fit round the seems of the door with the pen tool and this would act as the mask so only the part of the element that is inside the mask would be visible, I then animated it to follow the door so nothing it would look like the characters where inside. To turn the newly made shape layer in to a mask I simply right clicked on the layer and selected "mask" this would make the character layer a child of the mask layer and lock both.
|
|
Finally I let the black part of the door expand all the way up after the front had fully opened and disappeared, after the black part of the door had covered roughly half of the screen I made it shirk back down and then disappear, while this was happening I added in some text which expanded like the door except much quicker and this said the title of the film (the font is different on my final piece as I could not install the actual font on my computer which I took the screen shots) this expanded and then shrunk a bit to give a bouncing affect, this then stood still for a few frames and then bounced up and finally shrank down until it was not visible (I did this for the other text too saying "comming soon"). To do this is simply used the scale key frames enlarge the text and make the bouncing effect.
|
|
Finally I added in the two buttons and one last command, the two buttons were the restart button which I placed in the bottom of the screen and changes colour when you hover over it, i have made it change colour so people know when it has been activated, to make it change colour I simply double clicked on the button and changed the hover key frame to a different colour. I have explained how I have coded it in the sections below. The other button is one which stretches over the entirety of the screen and links to the website of the film again I have explained my processed in the sections below. The final command that i have done is a "gotoandplay(159);" this makes the animation loop back to frame 159 when it hits this command, I have used this instead of a stop command because it will still keep peoples attention after the animation has finished because there will always be movement and this will catch peoples eye.
|
|
Storyboard
Making A ClickTag
Now I had made my animation I made a big button over the whole animation that would link to a webpage, so when it was clicked on it would take the user to a specific website. This was a little more difficult but the processes were the same, I started by making a box to cover the entire canvas, this will act as the button. Next I right clicked on the rectangle and selected "Convert to symbol" and the selected "Button". Next I gave this new symbol a instance name like before and then I made it invisible because I didn't want a big green button covering my whole animation, to do this I selected the rectangle and selected alpha from the colour effects drop down menu on the right panel and turned it to 0%, this will make the rectangle invisible but still active and usable.
Buttonlink.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void
{
var clickTAG_url:String = root.loaderInfo.parameters.clickTAG;
var fallback_url:String = "http://www.google.com";
if(clickTAG_url) {
navigateToURL(new URLRequest(clickTAG_url), '_blank');
} else {
navigateToURL(new URLRequest(fallback_url), '_blank');
}
}
);
The first line of code is identical to the previous restart button except the instance name is different because this code is affecting a different instance. The next section of code is, var clickTAG_url:String = root.loaderInfo.parameters.clickTAG; this basically means that it defines a var (variable, which is a way of storing a URL or very small piece of data) which enables it to find a Click tag URL in the HTML code that goole generates. The next piece of code is a fallback URL, so if the first URL or Clicktag isn't available, it works the same way except there is a URL in the place of location to find the Clicktag. The next piece of code is to tell the code to navigate to the new URL requested by the Clicktag, the final line is the same as the line above except this line is for the fall back. The curly brackets are to start each individual piece of code "{" to open and "}" to close.
Buttonlink.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void
{
var clickTAG_url:String = root.loaderInfo.parameters.clickTAG;
var fallback_url:String = "http://www.google.com";
if(clickTAG_url) {
navigateToURL(new URLRequest(clickTAG_url), '_blank');
} else {
navigateToURL(new URLRequest(fallback_url), '_blank');
}
}
);
The first line of code is identical to the previous restart button except the instance name is different because this code is affecting a different instance. The next section of code is, var clickTAG_url:String = root.loaderInfo.parameters.clickTAG; this basically means that it defines a var (variable, which is a way of storing a URL or very small piece of data) which enables it to find a Click tag URL in the HTML code that goole generates. The next piece of code is a fallback URL, so if the first URL or Clicktag isn't available, it works the same way except there is a URL in the place of location to find the Clicktag. The next piece of code is to tell the code to navigate to the new URL requested by the Clicktag, the final line is the same as the line above except this line is for the fall back. The curly brackets are to start each individual piece of code "{" to open and "}" to close.
Button Breakdown
Here I have made a simple button to restart my animation, I have used simple action-script commands to code the buttons functions. First off I created a green square to which I added a motion tween and moved on 100 or so frames then moved the square to create a simple movement. Next I created my button on a new layer which was appropriately named "Button", to this layer I added a lighter green rectangle and a even lighter green text with the words "Restart Button", now with them both selected I right clicked and converted them in to a symbol choosing the option "Button" and not "Movie Clip" which is pre-selected, this now means that the two objects are groped and will now act as button meaning you can click on them but nothing will happen just yet as there is no coding. Now I have to click on the newly made button and give it a Instance Name in this case "Button1", this is so Flash can recognise the button when we are adding code. Next I moved on the more complex side of this process and started adding the code to make the button work and function properly, first off I opened the Action-script Editor by going Window > Actions, this brought up a separate window which we can add the code in to, the first line of code was "Button1.addEventListener(MouseEvent.CLICK,function(e:MouseEvent):void {
gotoAndPlay(1);
}
);"
The "Button1" was so the code knows what to affect, this is why we have to add a instance name, next was the "AddEventListener" this is to tell the code to listen for an event which was in this case "(MouseEvent.CLICK," this tells the code the function that it should be looking for is "CLICK" or a mouse click. The "function(e:MouseEvent)" basically this will make the code do the function between the {} (curly brackets). Next the ":void" will make the animation void if it fails. Finally this piece of code is the function, this is what will happen when the event is activated, 'gotoAndPlay(1)" this will make the animation go back to the frame within the brackets, in this case frame 1 (the other brackets are to just end the code). Finally I added a stop command this was done simply by adding a new layer and then adding a frame where I wanted the animation to stop and again opening up the Action-script Editor and typing "stop();" this will simply tell the animation to stop when it gets to this frame, it is very important to get this layer in the frame as other wise it will stop your animation too early or late.
gotoAndPlay(1);
}
);"
The "Button1" was so the code knows what to affect, this is why we have to add a instance name, next was the "AddEventListener" this is to tell the code to listen for an event which was in this case "(MouseEvent.CLICK," this tells the code the function that it should be looking for is "CLICK" or a mouse click. The "function(e:MouseEvent)" basically this will make the code do the function between the {} (curly brackets). Next the ":void" will make the animation void if it fails. Finally this piece of code is the function, this is what will happen when the event is activated, 'gotoAndPlay(1)" this will make the animation go back to the frame within the brackets, in this case frame 1 (the other brackets are to just end the code). Finally I added a stop command this was done simply by adding a new layer and then adding a frame where I wanted the animation to stop and again opening up the Action-script Editor and typing "stop();" this will simply tell the animation to stop when it gets to this frame, it is very important to get this layer in the frame as other wise it will stop your animation too early or late.
Brastemp – Water Purifier
Here is a perfect example of a very well thought out and designed advert as it very simply explains exactly what they are trying to tell you, but you have to interact with the advert to actually find out what this is. They are trying to promote there water solutions and show how clean it is, they have done this by presenting us with a background designed to look like a water dispenser (which links back to the theme of their water solutions) and then a free flowing water stream coming down from the nozzle and falling off the screen. This is very well coded as it is in real time and it looks very realistic which is very hard to achieve as it is just a animation not a real movie clip. Next they allow you to interact with the advert by butting your courser in the stream of water, this will split the single stream up and act like you would expect it too in real life. Finally by playing with the stream you reveal some text saying "this water was 100% bacteria free until you put your finger in it" now this explains exactly what the company is about because it tells you that there solutions are 100% effective and then they have thrown some humor in there to make it more of a light hearted approach to a quite serious subject which I feel is quite clever as it makes the user feel more welcome rather than intimidated by the advert. This is a very clever advert because it makes you play and interact with it to find out what the company are trying to tell you and by using a very clean and well designed layout it entices the user in and plays on there curious side by not telling you what it is all about and makes them interact with this quite hard almost game to find out what its all about.
|
Nissan – Reverse
This advert is again, a very serious one like the other one this is about safety but unlike the last it has been made by a company (Nissan) not the government. This advert has been made by the car company Nissan and it is promoting the use of seat belts. They have used their logo as the base of the advert and removed the center bar and replaced kt with the buckle of a seat belt so you can drag the buckle with your mouse and the click it into place as you do this the picture below responds, this picture is of a woman with her face smashed up (she has been in a car crash), as you move the seat belt closer to the socket her face gradually gets better and less destroyed the advert finishes when you click the seat belt in and the woman's face returns to normal and some text fades in and tells you some figures about crashing without your seat belt. This is a simple concept for a advert but works very well as you get to interact with it and you can see the results of your actions, for example not clicking in the seat belt and crashing will badly injure you. I really do like this advert and the way it is so simple yet so effective and powerful, This is not the same genre as my advert will be but I really like the way you can scrub through the move at the end by pulling the seat belt and will try and recreate this in my piece. I don't really have any dislikes about this advert except if I was to redesign this I would probably add some sound effects in to it when the advert is activated for a more powerful experience.
|
Knife Crime – It Doesn’t Have To Happen
This advert is a very powerful one, it is about knife crime and it works so well and is so powerful because of the way its animated, it starts out looking like a video and a woman is narrating of her experience with knife crime, the camera zooms in towards the scrubbing handle as it starts getting longer and the bar starts to turn into a zip, the animation then pauses and you have to drag the zip to continue, once you have dragged the zip the camera follows the zip and you see a pale face of someone who has died and you realize the zip was for a body bag. There are a few things I really like like about this advert but there are also things I don't, but first the good points, the advert is very well done and looks very clean, everything works well and I feel this is so powerful because of the narration and the way YOU have you drag the zip further, as well as it starting out looking like a video scrubber that you would use in a day to day life and then you are presented with a situation that you hope you would never want to be in. There isn't much I don't like about this advert but I feel this advert should have more interaction, for example the zip could move with your cursor rather than you just dragging and nothing happening, this first made me think that the advert had just frozen but then I worked out that i had to drag to make the video play again, and I also think that there should be a reply button at the end too, because if you want to watch it again you have to reload the page. I really like the way this advert moves flows and the way all of the elements flow into each other, I think I want use this technique and try and copy this standard of professionalism in my work.
|
Research Report
During this report I will be explaining what file formats are used in web animations. To start off there is Flash, Flash Video is just a player which is used in conjunction with other video formats like SWF (Shock Wave Format), this is mainly used for videos such as animations as it supports audio and can be easily embedded it in to a website. Flash is the standard for the majority of all main websites such as YouTube & VEVO. Flash is most commonly used for web adverts because designers can make controls for the advert, which makes it more interactive and engages the user more. These controls can be restart buttons or links to pages, anything that can control the video or affect the way you interact with the video.
Like Flash, HTML5 is just a player for a video format like MP4. The main difference is the fact that HTML5 is supported by many more device such as mobile phones, this is a massive deal as they are becoming much more popular in everyday life and nowadays 40% of all web traffic is through mobile phones. HTML5 also supports the majority of accessibility-orientated devices such as screen readers whereas in flash you wouldn’t be able to view the animation because it isn’t compatible. HTML5 is now the standard for online information because its is so much more compatible than flash which was the previous standard.
CSS is unlike the other two formats I have spoke about. CSS (Cascading Style Sheet) is a coding language that will be the root of the whole design for the animation; this will contain the Colour, Size and Position etc. of every element that makes it up. CSS gives the designer a lot more control over each key frame, as you have to code each one. You can also use transitions in the animation; this controls and defines the easing to the key frames on every element of the animation. CSS can be used with Flash or HTML5 to display a video on a website or mobile phone.
Next we have JavaScript, this is used in conjunction with CSS to create a more dynamic animation. Easing is very difficult to create without JavaScript, as this will be the code for the actual ease to which the CSS will control. Unlike CSS JavaScript is not a strait forward language, it can uses symbols and seemingly random letter arrangements and this is why it is very hard to write. JavaScript is essential when making any movements smooth in CSS, for example if there were a text layer, which was supposed to change colour gradually over time, you would uses JavaScript to ease the colours into each other.
Finally we have a GIF which Stands for Graphics Interchange Format, unlike the others this is the only raw file format (bitmap image) meaning that its can be played on any device and can be used with HTML5 or Flash but is normally a stand-alone file. A GIF is made up of a limited amount of colours; the norm is usually an 8-bit colour pallet that only uses 256 different colours, this is to bring down the file size so it can be easily used on a webpage. A GIF is used to display moving images while only using a very small amount of data so then can still be embedded as a image rather than video, they are normally used as a short clip looping over and over again, for example the dotted circle loading icon on YouTube, all this is, is 9 frames looped to make a short animation.
For video HTML5 is the best format to use as it is more compatible than any other format which allows it to be played on almost any device and it allows much more control over the animation whereas flash is much more limited as motioned before more traffic is going through mobile phones and other such devices so it is very important that these formats work universally. HTML5 relies solely on the web browser’s video controls where as in Flash you can design your own and use them, which makes the whole video more aesthetically pleasing ands suited to your site. Flash is not the best format for video because of its limited compatibles.
The best format of animation for Pop Ups would be JavaScript, as it focuses on the functionality of the whole animation rather than the aesthetics of it meaning that it is much easier to make the animation run smoother by using eases and other functions which allow the key frames to flow in to each other. Allows you to control when a pop up is activated for example if you wanted it to pop up when you hover your mouse over a specific area or element on the page you could do that using JavaScript, you can also use other variables such as the time you’ve been on the page and the distance you’ve scrolled down the page, you would use this to make the user realise why the pop up has activated so it will make them understand what you are trying to achieve.
Finally for Web Advertisements I would use flash as it focuses on the aesthetics of the whole advert rather than the functionality and as a advert it needs to look very good to attract peoples attention. Another very key factor is the fact that you can design your own interface for the advert where as with JavaScript you cannot, this allows you to be very specific with what you wanted it to look like and how you want it to behave, this will mean you can be much more immersive and interactive because you can tailor it to your site.
In this essay we have looked at the 5 main formats for online information. These are HTML5, Flash, CSS, JavaScript and GIF these are all standards in there own areas of online animation but some work better than others, I have selected the appropriate formats (I my opinion) which work best with specific areas of online information.
Like Flash, HTML5 is just a player for a video format like MP4. The main difference is the fact that HTML5 is supported by many more device such as mobile phones, this is a massive deal as they are becoming much more popular in everyday life and nowadays 40% of all web traffic is through mobile phones. HTML5 also supports the majority of accessibility-orientated devices such as screen readers whereas in flash you wouldn’t be able to view the animation because it isn’t compatible. HTML5 is now the standard for online information because its is so much more compatible than flash which was the previous standard.
CSS is unlike the other two formats I have spoke about. CSS (Cascading Style Sheet) is a coding language that will be the root of the whole design for the animation; this will contain the Colour, Size and Position etc. of every element that makes it up. CSS gives the designer a lot more control over each key frame, as you have to code each one. You can also use transitions in the animation; this controls and defines the easing to the key frames on every element of the animation. CSS can be used with Flash or HTML5 to display a video on a website or mobile phone.
Next we have JavaScript, this is used in conjunction with CSS to create a more dynamic animation. Easing is very difficult to create without JavaScript, as this will be the code for the actual ease to which the CSS will control. Unlike CSS JavaScript is not a strait forward language, it can uses symbols and seemingly random letter arrangements and this is why it is very hard to write. JavaScript is essential when making any movements smooth in CSS, for example if there were a text layer, which was supposed to change colour gradually over time, you would uses JavaScript to ease the colours into each other.
Finally we have a GIF which Stands for Graphics Interchange Format, unlike the others this is the only raw file format (bitmap image) meaning that its can be played on any device and can be used with HTML5 or Flash but is normally a stand-alone file. A GIF is made up of a limited amount of colours; the norm is usually an 8-bit colour pallet that only uses 256 different colours, this is to bring down the file size so it can be easily used on a webpage. A GIF is used to display moving images while only using a very small amount of data so then can still be embedded as a image rather than video, they are normally used as a short clip looping over and over again, for example the dotted circle loading icon on YouTube, all this is, is 9 frames looped to make a short animation.
For video HTML5 is the best format to use as it is more compatible than any other format which allows it to be played on almost any device and it allows much more control over the animation whereas flash is much more limited as motioned before more traffic is going through mobile phones and other such devices so it is very important that these formats work universally. HTML5 relies solely on the web browser’s video controls where as in Flash you can design your own and use them, which makes the whole video more aesthetically pleasing ands suited to your site. Flash is not the best format for video because of its limited compatibles.
The best format of animation for Pop Ups would be JavaScript, as it focuses on the functionality of the whole animation rather than the aesthetics of it meaning that it is much easier to make the animation run smoother by using eases and other functions which allow the key frames to flow in to each other. Allows you to control when a pop up is activated for example if you wanted it to pop up when you hover your mouse over a specific area or element on the page you could do that using JavaScript, you can also use other variables such as the time you’ve been on the page and the distance you’ve scrolled down the page, you would use this to make the user realise why the pop up has activated so it will make them understand what you are trying to achieve.
Finally for Web Advertisements I would use flash as it focuses on the aesthetics of the whole advert rather than the functionality and as a advert it needs to look very good to attract peoples attention. Another very key factor is the fact that you can design your own interface for the advert where as with JavaScript you cannot, this allows you to be very specific with what you wanted it to look like and how you want it to behave, this will mean you can be much more immersive and interactive because you can tailor it to your site.
In this essay we have looked at the 5 main formats for online information. These are HTML5, Flash, CSS, JavaScript and GIF these are all standards in there own areas of online animation but some work better than others, I have selected the appropriate formats (I my opinion) which work best with specific areas of online information.
Web Advertising Guidelines
Millions people advertise on the web nowadays and there are a lot of very good adverts, but their are a lot of bad ones too. Using Google AdWords is one of the best ways to get adverts out there because of Googles massive empire of websites, although Google are making adverts much better in a sense that they have some very good rules that you have to abide by to get your advert published by Google. These rules are in place because it will make easy viewing (no annoying unstoppable ads) and the advert will be viewed by all age groups so the content has to be appropriate, these rules broken down in to four sections,
Prohibited Content ("Content your not allowed to promote on the Google network")
This section is put in to make sure what you are advertising is Legal, not offensive or inappropriate and what you are advertising is actually yours and not a counterfeit product, this is just the content that Google will not allow you to advertise.
Prohibited Practices ("Things you can't do if you want to advertise with us")
This section of the "rules" are all about the collection of data and what you can and can't do with it, for example you cannot ask people for peoples details (without telling the audience why and what your doing with it) like their phone number, or mothers maiden name. Its also about making sure you tell the audience what your actually doing and not saying one thing and then doing something else, for example telling the audience that if you click on the advert it will take you to a certain website when it actually takes you a different one.
Restricted Content ("Content you can advertise, but with limitations")
Now this section is one of the most common offences because it basically covers everything that is inappropriate to the mass audience, for example you advert cannot contain any Adult rated content such as, promoting sexually explicit content, promoting adult merchandise or contain any pictures of exposed skin or nudity. The next thing that isn't allowed is anything go do with alcohol promotion of any kind, like before this is because the advert will be viewed by all age groups. The next section is kind of common sense really and just explains about any legal issues, for example copyright and trademark issues, and the fact that you cannot use anyone else's work. The next piece states that your not allowed to promote or feature any gambling related games or content, this can include any on-offline games played for money or prizes and any casino based games whether money is involved or not, you are allowed to feature gambling related content as long as it meets the requirements which is basically following the law and always clearly explaining why you should be responsible when gambling. The final mention is about Healthcare, this is restrictions on any medical services or procedures and the promotion of medication of any kind.
Editorial and Technical ("Quality standards for your ads and website")
This final section is about the standards of the advert and making sure they all look and work to a professional standard, this makes webpages that feature adverts look clean because Google will not allow any "gimmicky" use of words or number such as FREE, f-r-e-e, and F₹€€!! and also phrases like "buy stuff here". This rule also governs the accessibility of the advert so will not allow adverts that disable certain features of your browser such as the back button or stops you from leaving the page, this will also not let adverts take you to a page which is not displayed, for example like before if a button on the advert said "click here to go to www.google.com" and it actually took you to www.bing.com, this would not be allowed. This rule is all about making the viewing experience better and not annoying or irritating and also to make the whole page look more professional.
I looked as some other advertising guideline websites and found they were virtually the same as Googles, just worded differently.
Prohibited Content ("Content your not allowed to promote on the Google network")
This section is put in to make sure what you are advertising is Legal, not offensive or inappropriate and what you are advertising is actually yours and not a counterfeit product, this is just the content that Google will not allow you to advertise.
Prohibited Practices ("Things you can't do if you want to advertise with us")
This section of the "rules" are all about the collection of data and what you can and can't do with it, for example you cannot ask people for peoples details (without telling the audience why and what your doing with it) like their phone number, or mothers maiden name. Its also about making sure you tell the audience what your actually doing and not saying one thing and then doing something else, for example telling the audience that if you click on the advert it will take you to a certain website when it actually takes you a different one.
Restricted Content ("Content you can advertise, but with limitations")
Now this section is one of the most common offences because it basically covers everything that is inappropriate to the mass audience, for example you advert cannot contain any Adult rated content such as, promoting sexually explicit content, promoting adult merchandise or contain any pictures of exposed skin or nudity. The next thing that isn't allowed is anything go do with alcohol promotion of any kind, like before this is because the advert will be viewed by all age groups. The next section is kind of common sense really and just explains about any legal issues, for example copyright and trademark issues, and the fact that you cannot use anyone else's work. The next piece states that your not allowed to promote or feature any gambling related games or content, this can include any on-offline games played for money or prizes and any casino based games whether money is involved or not, you are allowed to feature gambling related content as long as it meets the requirements which is basically following the law and always clearly explaining why you should be responsible when gambling. The final mention is about Healthcare, this is restrictions on any medical services or procedures and the promotion of medication of any kind.
Editorial and Technical ("Quality standards for your ads and website")
This final section is about the standards of the advert and making sure they all look and work to a professional standard, this makes webpages that feature adverts look clean because Google will not allow any "gimmicky" use of words or number such as FREE, f-r-e-e, and F₹€€!! and also phrases like "buy stuff here". This rule also governs the accessibility of the advert so will not allow adverts that disable certain features of your browser such as the back button or stops you from leaving the page, this will also not let adverts take you to a page which is not displayed, for example like before if a button on the advert said "click here to go to www.google.com" and it actually took you to www.bing.com, this would not be allowed. This rule is all about making the viewing experience better and not annoying or irritating and also to make the whole page look more professional.
I looked as some other advertising guideline websites and found they were virtually the same as Googles, just worded differently.