Assignment 1


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Assignment 1

  1. 1. Heather Lomas Uses of Web AnimationBanner AdsBanner ads are important when it comes to web animation as they are the first piece of informationthat a customer sees when they enter a website. By having a banner ad that is outstanding and tellsyou all the necessary information it then means you can navigate to where you want to go quicklyand easily without hassle. In some banner ads many people advertise different products in whichthey are trying to sell but in others cases they could be selling something larger and more expensivethan a t-shirt or a gadget. The website I have used to talk about is the BMW website. This is becauseit shows you a range of different cars across its banner throughout different slides. The animatedbanner is set up in a linear form letting you view all the cars and the information to go with them, Ihave shown this in the screen shot below. As you can see they have to represent each page a littledot within a line of other dots. These dots represent the pages so paying attention to which page ismost applicable to u is important. By watching the banner as it continues through all the differentcars, BMW are using this as a selling technique without having a video or just simple pictures thatmay annoy or distract the customer.InformationInformation is a lot like instruction. This is where a website is giving you information that you mayfind interesting and you may want to know before purchasing the item. In this case I went ontoYouTube where the information displayed was beneath the video. By using YouTube I was able togive an example on information as it gives you the necessary parts that you need to know. Forexample YouTube tells you how many hits a video has had and also tells you when it was uploadedand how many people like and dislike the video. This information is needed for either the creator ofthe video or in other cases members of the public may want to know for studying a particular video.
  2. 2. Heather LomasPromotionPromoting a website or other device is used on the internet every day. When it comes to promotingsomething it is important in everyday life. For example anything that is giving you information abouta product is promoting a specific thing. Big websites such as Apple who are selling the iPhone rangesevery day and other new gadgets they have brought out are a promoting website. They try to sellsomething every day by even entering the website you are instantly prompted with informationabout the new IPhone 5 in which they are selling. Promoting websites are also on other websites.They can include adverts and cookies to your computer so that once you have visited the websiteevery other website you visit will come up with adverts down the side of your screen advertisingApple product. This is how a cookie works and Apple can promote their products further.EntertainmentEntertainment websites are displayed online to entertain you as the used. Entertainment websitescan include interactive websites and also games websites. For this point I went onto the Simpson’swebsite where the entire website is interactive meaning you can interact with it and be involved.The Simpson’s is keeping you entertained with all the different selections on the website and alsooffers you a clips section where you can keep up to date and watch your favourite clips from theSimpson’s series. The entire website is for your entertainment and with its bright and vibrant coloursit is keeping the user interested at all times.Linear and InteractiveLinear animation is when the animation continues without you being able to stop it. This can be anysort of animation. A linear animation doesn’t have any play, pause or skip options it is just a basicanimation that you as the user have no control over. Below I have included a screen shot from theBMW website showing a linear animation that they have used before entering the site. As you cansee there is a sky in which the clouds are moving. This is a linear animation as I am unable to stop orpause the animation but instead in just continues until I click away from the site. I think this linearanimation is good as it gives you a calm feeling towards the site you are about to enter.
  3. 3. Heather LomasAn interactive animation on the other hand is the opposite to a linear animation. An interactiveanimation lets you become more involved as if you are the main controller to the animation. This isused on many websites so that the user gets more involved with the website and it also intrigues theuser/customer to stay longer. I have used the Simpsons website as an example of interactiveanimation in which you can interact with.In the screen shot below I have shown that within the site there is a range of different places to go.When I clicked upon the icon to show me all the different characters it was then up to me whichcharacters I wanted to view from the cabinet with all the characters initials on. As you can see Iselected one and it opened the file right in front of me as if I was doing it. I could then view thecharacters information as I wished and repeat the process if I wished to see another.
  4. 4. Heather LomasInstructionInstruction is when a website is telling you things that you need to do. This could be anything, fromtelling you how to fix something or even how to wash something instruction appears across theinternet every day. I have used an example from Marks and Spencer’s website in which they aregiving information on a product and how to wash it. I chose this as it gives a clear understanding onwhat instruction is about. By being able to read instructions on a website this is great for whenneeding help with something.Animated Interface ElementsAn animated interface element is something that you can control yourself. The way it works is youcan control the element in which it is working. For example a website that has a range of differentmethods of viewing a photo can be an animated interface element. This can include the websiteMarks and Spencer’s have made. On the website they have included images of the products theyhave on sale. With this they show you different angles of the product with different pictures torepresent each angle. I have shown this in the screen shot below. As you can see I have taken ascreen print from the website I have chosen and shown you what I am referring too.
  5. 5. Heather Lomas As you can see in the screen shots that I have taken I have shown two of the three different images that have been displayed. This is a good example as it shows you how and animated interface works. In some other cases you can get websites that immediately move with the image as you hover your mouse over it. Development of AnimationHand Drawn AnimationHand drawn animation is used to create animations when computers and other animationtechnology were not around or as advanced. Hand drawn animation was used in the early Disneyfilms such as Mickey Mouse as he started off hand drawn. Hand drawn animation is where acharacter is drawn on one piece of paper and then on many other pieces of paper or canvas thecharacter is then doing something else, all of these are then put together through a computer andprojected as an animation.
  6. 6. Heather LomasFlick BooksFlick books are another way of creating animation.Anyone can make a flick book animation. These arewhere you can find a simple pad of paper and draw astick man or other sort of character on the backpage. Then by drawing characters on other pagespage by page you can then flick through the bookand the character will animate through your vision.Animated CartoonsAnimated cartoons are a way of viewing an animation with cartoons moving into different situaions.Animated cartoons are mainly used to entertain young audiences, these cartoons are usually viewedon children’s TV channels such as nickelodeon and Cbeebies. Cartoons can also be used in films.There are many films around even now where cartoons are being used as the main characters. Theway they do this is they film the necessary parts with the real life characters and then afterwardssuper impose the cartoons into it to make it look like they are part of the film. This attracts manyaudiences even now.Graphic Information File Format (gif)This is a file format that can feature animation. A GIF file format can be used in adverts more thananimation. GIFS are used rather a lot in advertising a product or a brand name within the animation.A GIF only supports 256 colours within its colour pallet so this makes it easier on the colour scale butnot everyone prefers this as when savings pictures as a GIF files they do not always get supported.XHTMLHTML has another partner known as XHTML. These two are very similar in the way they work butXHTML is much pickier when it comes to the actual coding. HTML codes are simple and work at alltimes when the codes are typed correctly. XHTML on the other hand picks out all the problems anddoesnt work until they are sorted. This is why most people prefer HTML as it works better withslight mistakes. Tags are the pieces you use on HTML. If you happen to miss closing a tag on HTML itis likely that HTML will close this tag for you and let it go. Whereas XHTML is much more stricter so itwon’t let it go and it will ask for corrections. This is why many people just use HTML as it is easierand simple. XHTML is for the more advanced users in HTML who like a challenge. HTML featuresdifferent documents. HTML is used to create web pages as we already know. HTML also is there as alanguage also for servers to understand and display on the internet. HTML is pretty muchinstructions for the servers to know which content they should display. XHTML means you can’tmake mistakes.
  7. 7. Heather Lomas Animation TechniquesOptical Illusion (Persistence of Vision)Persistence of vision is commonly known as a way that the human eye continues to see animage for a fraction of a second after it has been removed from the screen or moved ontoanother image. Persistence of vision is used to create movies and television programs. Forthe human eye to remember an image that previously has appeared means that the film orvideo that they are watching becomes fluent and continuous. This is known as aphenomenon that lets us have the ability to create a still image into a continuous movingpicture.Persistence of vision is also a visual form of memory known as ‘Iconic Memory’. Like thepicture I have added to this slide, this photo is meant to test your persistence of vision. It issaid as a method to do this you should stare into the centre of the image directly on thewhite dots and stare at it for a number of seconds, usually around 10.Once you’ve done that you should close your eyes and still be able to see the image. This isa prime example of Persistence of Vision. When it comes to using persistence of Visionwithin creating animation the frames in which the images are displayed are usuallydisplayed in every two frames of recording. There are also cases such as when you stare at ashining light bulb or the sun. When you view this you then look away and get a permanentblob or smudge across your vision.ClaymationClaymation is animation used in a clay form. Clay is a very easy substance that can bemoulded into anything that is needed. Claymation is an older form of animation that wasused before computers and other video technologies came around. Claymation is mostpopular that I have seen in a series called Wallace and Gromit. Wallace and Gromit werecreated by Aardman animations who took Claymation to a whole new level. With only asmall amount of episodes made overall they used Claymation to create a memorable set ofcharacters and episodes that kept everyone entertained. As well as this Claymation has alsobeen used to create films. Claymation is used in all sorts of media but not as popular thesedays as there are a lot more computer generated animations about meaning Claymation isdecreasing since it takes so long to create and move claymation models.Stop MotionStop Motion Animation is creating animation whilst stopping the frame to move thecharacters. This type of filming is used in such programs as Wallace and Gromit. To make ananimation like this you have to take a sequences of photos or recordings where you set upyour characters and objects into a position and then continuously take photos or record thesequences frame by frame as each object/character moves gradually creating an overall
  8. 8. Heather Lomasstop motion animation. If you have used a camera to record this sequence then when yougo through the images at the end you can see how the pictures have created a sequence.Also you will be able to see this in a smoother way by watching it on your video camera. Thisis an advantage also as you can see how smooth your overall animation is and whether youneed to improve the gradual movements. This technique of stop frame animation was usedfor some of the very first animated cartoons and other such animations that were used foradvertising or even shows. Creating stop motion animation is a long and tricky process.Ittakes a lot of concentration and you have to be focused topick up from where you left off.When it comes to actually putting a programme together it takes months to puttogethersomething that lasts only 30 minutes and when it comes tomaking a film it can takeyears.Computer Generated (Frame Rate, Frames, Key Frames, Onion Skinning, Tweening)Computer generated animation includes all of the above sections in different modes. All ofthese are included when creating an animation on the computer and below I am going to gointo detail about each one.Frame rates are used in Macromedia flash. Frame rates are used in the settings and whenanimating your creation frame rates are basically the speed it takes to view the animation.The average frame rate is around 24 frame rates per second, this leaves enough time oneach frame to make the animation flow at a reasonable rate. The higher the frame rates theanimation becomes slower as each frame is viewed for longer. The less frame rates persecond that you have means that the animation will be much faster and end quicker.A key frame is used within a timeline to add in other piece of multimedia such as an imageof a video. This can also be used to create buttons and other bits of multimedia that need tobe included. When it comes to key frames you can use them to link key frames together sothat if you want one page to go another it will do so.Onion skinning is used to create an animation. Using a simple terms such as creating a ballto bounce around a screen using onion skinning comes into account as you can switch ononion skinning to show you the previous position in which the ball was previously. Onionskinning is used to create animation as it is a handy tool to create the perfect animation.Tweening is used to create motions between key frames. By adding in a motion tween youare allowing the animation to all come together. By having key frames with all the necessarymoves on you can then create a tween between each frame that will link them all togetherto make an animation.
  9. 9. Heather Lomas Digital AnimationVector AnimationVector animations are created and made up of paths and nodes. These paths and nodesmean that no matter how much you choose to edit the animation by stretching it or resizingit, it will always stay in the same quality and focus. Vector animations are only used withincertain programs. This is a vector image file format which is used based on a video file.Raster (bitmap) AnimationRaster animation is animation that is made up of lots and lots of raster images. The way thisworks is that raster images are made out of thousands of pixels that hold all differentcolours and shades to create an image which can then be used in an animation. The onlyproblem with raster animation is that if the animation is viewed in a screen that’s too largefor the file, it will then stretch to fit the screen and pixelate.CompressionThere are two sorts of compression, lossy and lossless, both of these are important andbelow I have gone into detail about each one.Lossy compression is when you get a high quality graphic that then begins losing qualityevery time you save the image. This is because when you open the graphic it begins to losedata as it compresses. Every time you save it into a smaller file size the graphic becomesmore and more compressed. The data that’s lost is the pixels which are needed to keep thequality high. As the pixels reduce the graphic becomes poor and the remaining pixelsbecause more obvious so the quality has been reduced.Lossless Compression is when you compress a file without the data being lost. Unlike Lossycompression Lossless keeps all the necessary data that is needed when it comes to shrinkinga file. When it comes to saving a file Lossless compression then compresses the file where itsaves the data but keeps it and nothing is lost. Therefore the quality stays the same nomatter what the size of the video is.File Formats (.fla, .swf, .gif, .mng, .svg)File formats are important when it comes to exporting a file. Some files have to have aspecific format in order for the file to work when exported the file extensions above areshort for, flash files, shockwave files, graphic interchange formats, multiple image networkgraphics and scalable vector graphics. Swf files are commonly used when exporting apresentation into a separate files and flash is used when an animation is created andexported in a viewable video file. Shockwave files are produced from flash and there is awide majority of animations on the internet that are swf files behind the scenes.
  10. 10. Heather Lomas Animation Software and Web Player Plug-insFlashFlash is a program used for creating animation and products. Macromedia Flash as it is alsoknown as is a program that we all use to create animations. Flash has a timeline built inwhere you can change all the different components within it and then also link them toother buttons and animations.DirectorDirector is another way of creating animations. I have used director to create animationsbut in my opinion I found it very confusing. Director uses a timeline a bit like flash but it isharder to use and get everything into the right format. The problem with director is that youneed to ensure everything you do is recorded on the timeline. To create a new page youneed to mark it on the timeline. Everything you do is based on a timeline. Once you havecompleted this animation you can export it into any file format you want but the mostpopular such as ‘SWF’ is in the options bar.Flash PlayerAdobe Flash player is a piece of software just like the others above but in this case you canview the multimedia through it. Adobe flash player is a multimedia viewing program thatmost commonly runs SWF files that have been created in other Adobe multimedia makers.Adobe flash can be used on mobile phones and is always available as a default setting to runvideos.ShockwaveA shockwave player is needed for any animations that have been created in Director. As Istated above Director is a very fiddly piece of software so knowing that you need ashockwave player to view your overall creation is important. People who have shockwaveplayer are able to view games in 3D and also view interactive videos.Real PlayerReal player is not as popular as the above players. Even though it is within these categories Ihave never really heard of it. From what I know Real Player is software where you can playrecorded media. This can include sound files such as music or speech. It can also play otherbits of recorded multimedia such as videos. Real player is compatible with other fileextensions such as MP3 and Windows Media Player this means you can use the same fileson each program.Quick Time
  11. 11. Heather LomasQuick Time Multimedia player was created by, apple also created the range ofIPods, IPhones and other devices. This is a well-known and trusted company that you knowall their products will be acceptable. Quick time player was created to support all thedifferent types of multimedia that is created in Apple software, for example, video, pictures,sound, and other types of software.