Assignment 1


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Assignment 1

  1. 1. The uses of web animationTask 1Animation can be a very useful and powerful element that can be added to any website to generallyenhance it. In most cases animation will be used to make the website look more professional whencompared to competitors, as it gives the website a bespoke and original look as web animation canbe extremely diverse and will vary greatly. Companies will spend thousands on creating a bespokewebsite using Flash or a similar web animation package as it will give them a distinct businessadvantage over competitors.Web animation can come in many formats, sometimes it is used to create programs to enable theuser to create a product to their needs, and this will then give the user a clear look as to how theproduct they intend to buy looks. For example McLaren uses an extremely good looking interactiveanimation to allow users to create a custom car to their likings.Each element of the car is customizable, and this will change once the user choses a different colouror a different component. The way you can configure the car and the user interface associated withit is extremely fluent and works very well. When you chose a different component it comes out as anexploded view and comes away from the car so you can assess it better. There are also subsidiaryanimations when the screen changes or you go to customize another part of the car.Another way in which animation can be used isbanner ads, these can appear anywhere around awebsite and are typically used to advertise aproduct on a different website to their own. Theyare usually designed to be eye catching andoriginal to entice people in, they sometimes havevideo and sometimes use games. Sometimesbanners can also feature interactive animation.For example, last year Ikea created a banner whichallowed users to assemble their own banner; thiswas a truly unique and original banner which was characteristic of the company. At the end of
  2. 2. creating the frame for the banner you were greeted with an advertisement which stated “you havedone your bit, now it’s our turn” and displayed a deal on furniture.The advert also tied into the companies selling point by claiming “assemble banner yourself and savemoney” meaning if you do the same with furniture you will also save money.Commonly the animations used to advertise things on the web are more quirky and original than theones used to show things on the website, this is because the company who has created the bannerwants people to become interested in their product and intern their company. On the Apple website there are a number of banner advertisements used to show products and services, most of these animations only have very subtle and clean animations it also features some linear animations once the user gets onto the site. This is in the form of a banner which switches between new and featured products. Adverts such as the ones on the Apple website are not used to entertain or provide something for the user to do, instead they are there purely toshowcase their products and eventually lead to a sale. Again these products match the companiesethos and style they typically use when advertising their products. This brand consistency is typicalof Apple and also reflects in their products.Linear animations are animations that happen on a website without the user doing anything orneeded to interfere or play with it. For example a video playing in the banner at the top of a websitewould be considered to be a linear animation, as it does not require any interaction between its selfand the user. For example on the top of the YouTube page there is a Guinness advert which displaysa video besides some text.This advert is there to promote a product due to the Guinness logo and the fact the theme is part ofthe company’s colours and general theme. Another example of this kind of linear animation is theloading screen of The Simpsons website.
  3. 3. The website features a spinning donut when the website is loading. This is done to break up themonotony of a loading screen and get the user excited for the website.It is a donut with the text “Mmmm… More Loading” as this is something one of the main charactersof The Simpsons says, and is a form of branding associated with the program, again this fits into thetheme of the website.On the same website there is a selection screenwhich gives the user a choice of differentsegments of the website such as news, pictures,videos and characters. When the user presses abutton at the bottom of the screen the camerapans out and moves to a different boothfeaturing animations that match the specificsection, like Kidz Newz which shows twochildren characters reading the news.In any case, animation on a website will generally enhance it, and also make it easier for people tonavigate around it. However, the exception to this would be when the animation used is not donewell and can actually result in the website being more difficult to use. Advertisements that also useanimation will have a unique and original dimension over the typical still graphics thus making theadvertisement more effective and therefore selling more.Task 2Animation has been used for thousands of years for variousdifferent purposes, there are a large number of different ways inwhich things can be animated and what techniques used toanimate it can vastly alter the final result, so it is important to findthe right medium after reviewing what the animation will be usedfor before starting. The very earliest animations were extremelyshort and primitive; they only featured mundane and timid thingssuch as two people dancing, or a horse running.
  4. 4. The very first animations were created thousands of years ago by the ancient Egyptians. Theanimations were drawn on a tablet of clay, they had no way of animating the drawings but thedrawings were done in such a way it is clear that they were trying to indicate the fact the animationswere moving. It was not until 180 AD when the first animation device was created, in the form of aChinese zoetrope-type device. These devices used a sequence of images in order to create theillusion of movement. It was not until the creation of cinematography that animation made anysignificant changes.In 1886 the introduction of the flick book changed the minds of everyone interested in animation byintroducing the concept of persistence of vision, this is the reason that all of the pages in a flick book merge together to create an illusion of movement. A flick book is a sequence of images drawn in a bound book. Each of the pages has a slightly differing drawing to the last, that once flicked will appear to come to life and move. The good thing about a flick book is that it is very simple to do, and can give professional looking results. Over the years they have had many different variations and evolved as time has gone on to include things such as photographs as opposed to drawings. Usually these animations are not given their own books andare placed on other books in the page corner. Flick books were a very important step in thedevelopment of animation as it opened up people’s minds to different concepts of animation, and isstill being used to this day, albeit in different formats/styles.After flick book animation a process known as stop motion was introduced - a very simple way ofanimation is to simply take photographs of a real life object and then move it slightly and repeat.This is a technique that has been around since the very first animation and gives the animator a veryeasy method of advancing each frame due to the fact it is there in front of them. Also referred to asstop-motion animation, there have been hundreds of extremely iconic films and shorts that havebeen animated in this way. Perhaps the most famous stop-motion animation is the Wallace andGromit. This method of animation is good because it gives the artist a wide variety of differentresources in order to make characters appear life-like and more realistic. Because models andcharacters are modelled in real life you are able to create incredibly realistic and believe ablemovements and animations making this style particularly fitting to animations that desire more trueto life movement and style.Another style of animation that has been around for hundreds ofyears is animated cartoons, which have come about in severaldifferent styles and formats. The first of which was thephenakistoscope, developed by Antoine Ferdinand Plateau, aBelgian physicist. Plateau was the first person to show the illusionof a moving image. He did this by using counter rotating disks withrepeating hand drawn images in very small increments of motionon the first, and regularly spaced slits in the other disk. He namedthis device the phenakistoscope.
  5. 5. The actual phenakistoscope used a spinning disk vertically attached to a handle. Around the centreof this disk a series of pictures was drawn in correspondence to the frames of the animation. Abovethis was a series of radial slits. The user would spin the disk in front of a mirror and view thereflection which would appear to be moving.It was not until the advent of motion picture film that animation made another big advance. One of the very first and most successful animated cartoons was Gertie the dinosaur (1914), The appearance of a true character distinguished it from earlier animated "trick films", such as those of Blackton and Cohl, and makes it the predecessor to later popular cartoons such as those by Walt Disney and Max Fleischer. At the advent of the computer age animated graphics were none existent. It was not until the .gif was created that animation would be present on the internet, after this point near enough every website had a large number of different animations in lots of different forms – at thispoint they were extremely advanced and were considered the very peak of technology, however bytoday’s standards they appear extremely primitive and tacky. They would be used in all differentscenarios, such as headers, buffers for pages and for links.The images below show a transformation from the original Disney website, to how it looks today. Disney Today Disney Circa 1996As you can see by the first Disney website, there was very little in the way of graphics or animation.The only button on the whole home page that was animation is the picture of the girl dancing at the
  6. 6. top. However in the modern day Disney website there are lots more interactive buttons, linearanimations and things that make the website interactive. Dynamic hypertext mark-up language (dHTML) is a term used to describe a number of different technologies that are used together to create web animations it uses things such as static markup language (HTML), JavaScript and CSS and the document object model. dHTML is good because it can bring a once static website into an animated and interesting website; however, this only works after a web page has been loaded. The dynamic characteristics of a dHTML website are viewable once the page has loaded. The object model that is provided with Dynamic HTML gives web developers the ability to dynamically update content, style and structure whist providing detailed control over theappearance, interactivity and multimedia elements required for a professional and polishedapplication. An example of a good use of dHTML would be for websites requiring higheraesthetic merit, such as an online portfolio or website for a company, you do not typicallyfind lower end websites being made in dHTML as it requires more skill and in most caseswouldn’t be necessary.Before getting to know XHTML it is important to know what XML is, as XHTML is a mark-uplanguage written in XML, this makes it an XML application. There is a big differencebetween HTML and XML, this is the fact XML was designed to transport and store data,whereas HTML was designed to display data – it wasn’t used to try and replace HTML, itwas created with a different goal in mind. When creating tags in XML there is nopredetermined way in which you can write them, like HTML. Instead you are able to“invent” any tag you desire. In HTML you are only able to use tags which are predefined inthe the HTML standard, such as <p>, <h1>, etc…When using XHTML it is important that all code is correctly formatted in order for thewebsite to function properly. Key things to remember are: XHTML DOCTYPE is mandatory The XML namespace attribute in <html> is mandatory <html>, <head>, <title>, and <body> is mandatory XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbiddenAn example of correct code would be:
  7. 7. <p>This is a paragraph</p>< p>This is another paragraph</p>This is because the code is closed, an example of an incorrect piece of code would be:<p>This is a paragraph< p>This is another paragraphThis is because code always needs to be closed when creating a XHTML document.Task 3Persistence of vision is the time in which the retina retains the “afterimage” after theimage was initially shown. This is approximately one twenty-fifth of a second. It is useful toknow in animation because it means animators can get a smooth flawless image as thebrain and eyes are using the persistence of vision to create a “fill” in-between each frameto give the impression of continuous motion. This results in a smoother, better lookingpicture without any flaws which would otherwise be present if not for “The Persistence ofVision”.The original discovery of the persistence of vision is credited to the Roman poet Lucretius;however he only mentions it in connection with images he saw in a dream. In the modernday, Peter Mark Roget’s experiments in 1825 were also named as the basis for the theory.Itwas originally believed that the human perception of motion (brain cantered) is the resultof persistence of vision (eye centred). However, in 1912 this was debunked by MaxWertheimer.It is taught that the persistence of vision is the reason humans perceive motion in suchthings as Zoetrope’s and classically projected films, however, in reality it is not connectedwith motion perception, it is simply the reason we do not see “Black Frames” in-betweenthe space between each “real” frame whilst watching a movie.Stop frame, or stop motion as it more commonly known is the process of creating a senseof movement in a scene. Typically this is done by altering a figure or moulding plaster into adifferent shape. Normally the object is moved very slightly from the last frame. Thereasoning behind this means the animation will look very smooth as the model is only beingadjusted extremely subtlety to make the action appear smoother when each frame isplayed back at a suitable frames per second. Commonly clay figures are used to create stopmotion pictures as they can be manipulated very accurately and precisely which will internmake a smoother and better looking end result. This is often referred to as clay animationor Claymation, and is well known for its use in such pictures as Wallace and Gromit andChicken Run.
  8. 8. The History of Stop Motion:Stop motion has a long and rich history in film. Commonly it was used to show objectsmoving by what appeared to be magic, with the first instance of stop motion being creditedto Albert E. Smith and J. Stuart Blackton in the movie “The Humpty Dumpty Circus” in 1897.In this movie they made a toy circus of acrobats and animals come to life.After this Clay Animation became more apparent when in 1912 “Modelling Extraordinary”was released and was warmly welcomed by viewers. In the 1960s-1970s, independentanimator Eliot Noyes refined the technique of “free-form” clay animation in his film “Clay orthe Origin of Species”. Noyes also used stop motion to animate sand lying on glass in hisanimated film “Sandman”.In the 1970s and 80s Industrial Light and Magic often used stop motion models for filmssuch as the original Star Wars Trilogy, for example the AT-AT walkers in The Empire StrikesBack.An individual who found fame in modern day clay animation is Nick Park who is notable forhis work on Wallace and Gromit and Chicken Run, both of which has found a very broadaudience.Frame rate is the frequency (rate) at which a series of unique images are displayed the rateat which these frames are played will change how the resulting animation will look; this isbecause the human eye will perceive frames over 12 FPS as a constant movement. Inanimation FPS is very important as it is how animations are brought to life, and how theyare given movement.Relation between Frame Rate and the Actual Visible Frame Rate:The human visual system doesn’t see in terms of frames, it works with a continuous flow oflight, meaning that the FPS of an animation isn’tnecessarily a determining factor on howsmooth the animation is, although the visible frame rate can be investigated and theconsequences of these changes in frame rate for the human observer. A famous example ofthis is “The Wagon Wheel” effect, where a rotating object such as a wheel appears to begoing backwards. Although it is commonly believed the rate at which a human can detectno difference is 30 FPSStandards in Frame Rates:Frame rates around the world vary depending on how they are coded. In England thestandard is PAL, this runs at 25 FPS. 25FPS is a common frame rate for cinema and TV as isthought to be a “Sweet Spot”. It’s a frame rate at which the human visual system can seethe picture as a smooth continuous motion without large productions costs, for example a
  9. 9. film produced at 60 FPS would be using unnecessaryframes and would increase theproduction costs without adding anything to the finished product as the human wouldn’tbe able to tell the difference.Task 4Vector Graphics use “geometrical primitives” and mathematical equations to keep thequality extremely consistent, not matter how much zoom or expansion is placed on thatparticular image. Vectoring does this by applying mathematical equations to ever shapeplaced into the particular image, to constantly resize the shape and create a smoothundeviating line whenever it is resized or expanded. Since these formulas can produce animage scalable to any size and detail, the quality of the image is limited only by theresolution of the display, and the file size of vector data generating the image stays thesame.Vectors can be particularly useful as there is never a loss of quality, and a consistent imageis always portrayed, no matter what zoom or stretch is applied to the image.The drawback to using vector graphics is that they are more processor intensive than rasterimages, meaning this inherently limits the functionality for large data sets. Points are amathematical plot in the vector image. These are saved in relation to where the otherpoints are. They are used to bridge the gap between another point and the lines that jointhem. Lines are the items used to go in-between the points, these are called paths and theyare determined by where the points are.Compression techniques are ways in which a file can be shrunk to make it more suitable forthe web, this will decrease download speeds by decreasing the size of the animation, thusmaking download speeds faster. There are many ways in which you can compressanimation, some of which will decrease the quality of the animation as they actuallyremove information in order to make it smaller. Typically this type of compression is calledlossy, as it actually loses data – this is found when compressing raster animation. The goodthing about vector animation is the fact you can rebuild the final product resulting in aperfect and untouched animation when compared to the original (Lossless compression).Generally this type of compression will result in a smaller file size which again gives it anadvantage over lossy compression.There are many different File formats which can be used to create animation. There are afew formats, however, that are more commonly used than others. This is due to the factthey are more widely compatible therefore making them more suitable for use as morepeople can watch them. The formats are:.flaThis is the flash format “Macromedia Flash FLA Project File Format. It is the format that the popular
  10. 10. animation suite, Flash uses. It is one of the most advanced and popular formats for creatinganimations due to its small file size and wide compatibility..mngMulti Image Network graphics are another popular choice when creating web animation. They aresimilar to .gif files in that they do not support sound or video, but has some other more sophisticatedfeatures which makes it more advanced than .gif, this also helps it achieve smaller file sizes than youwould associate with .gif..swfThis is the format that files exported with flash will use it is used to store animations andsupports sound so that they are able for presentation on a wide array of different formats,such as the web. It is much more advanced than just an animation tool, as it can even buildfull websites. There must be a flash plug-In present when users wish to view a flashanimation online..gifPerhaps the oldest form of animation on the web, the .gif was developed by CompuServefor storing bitmaps. A gif can support transparency and very primitive animations withanimations on a loop or a timed sequence. This format is also known as an animated gif.Task 5Authoring PackagesAnimations are creating in authoring packages, but many also need players to be viewed –especially when on a browser. The main authoring package is Flash, however there aremany others that perform roughly the same task.SwishSwish is a program that creates cross-platform presentations, although it has many featuresthat appear in flash making it easier to switch from Flash to Swish, whist also being a lotcheaper than Flash. You can even export in a .swf format, like in Flash. The maindisadvantage to using Swish as opposed to Flash is the fact has a few more features andcannot open or save a .fla file which stops an exchange between the two programs.AmaraAmara has become more standard for website animations. Not as powerful as flash, Amara,like Flash exports as a .swf format and is a lot cheaper than Flash. However, Amara is madeup of separate applications that are used to carry out certain animations such as bannerand photo animation. The advantage of this over Swish is that you can open and save .flafiles.
  11. 11. DirectorOriginally built for online animation, Director has become associated with 3D games. Thescript featured on the program is called ‘lingo’, which will encourage some users to choosethis application over others. It has support for vector graphics and also 3D.PlayersFlash PlayerA product made by Macromedia, it is essential to run any .swf files in a web browser. Thename ‘player’ it is simply a program that plays files that are created in authoringapplications. Originally it was used to display simple 2-dimensional vector animation, buthas become popular for the playing of right internet applications, and also streaming videoand audio.ShockwaveShockwave was created by Macromedia as their first and most successful multimediaplayer, before flash. It was widely used to create online movies and animations; however,now it is mostly used in game development, this is due to the faster rendering engine withhardware-accelerated 3D to match. The only disadvantage to using this player is that it isnot available for Linux, but there are workarounds.Real PlayerReal player is a cross-platform media player; it supports and plays a number of multimediaformats, such as MP3, MPEG-4, QuickTime and Windows Media.QuickTimeDeveloped by Apple, it can play many formats such as digital video, media clips, animation,text and music.