Successfully reported this slideshow.

Task 1 2-3-4-5 uses and principles of web animation for interactive media


Published on

  • Be the first to comment

Task 1 2-3-4-5 uses and principles of web animation for interactive media

  1. 1. Unit 65 – Uses and Principles ofWeb Animation for Interactive Media
  2. 2. Banner AdsThe following example of an advertising banner is taken from the Gamestation website where it advertises the latest games andgadgets that are used for games consoles as of today. It also includes a state of animation within the advertising banner where theproducts are displayed within a sequence of numbers in order to individually display the latest products that are being shownwithin the Gamestation website. Overall, I feel that the colour scheme that is used within the advertising banner of theGamestation website matches the overall theme and it is suitable towards its target audience which is gamers. However, rollovercolour effects may need to be taken into consideration as an additional feature within the advertising banner of the site that helpsto sustain the overall theme for the Gamestation website.
  3. 3. Animated Interface ElementsThe Simpsons website for instance, makes use of interactivity right from the word go where it shows the Simpson’s logo itself andit includes a preloader that is designed as a donut which gives users an indication that that the website is being uploaded. It alsoshows an illusion of movement throughout the main parts of the navigation system within the site. For example, I navigated fromthe home button to the about button and during this process it shows an illusion of movement within the motion picture of all ofthe features that are involved within The Simpsons website.
  4. 4. Linear and Interactive AnimationsFor the XGamestation website it does involves features that are passive on the computer screen that cannot be controlled by theusers. For instance, the Hot News! section displayed within the top-centre of the site shows movement of the text moving to theright hand centre of the screen which allows users to access more information on the headlines stated within the Hot Newssection of the XGamestation website. In terms of the interactive elements it integrates an outline of the recent animated gamedemos where there are links provided just underneath the motion picture of the games. As a whole I feel that the colour schemesreflect the layout of the site and it utilises animation very well within mainly all of the XGamestation website and it does resemblethe overall theme of the site.
  5. 5. PromotionOn the website I have found that just recently it has released the new BMW 3 series touring where there is a linkprovided so that users can view more information of this particular promotional product within the BMW website. It also exhibitsit own unique brands and models of the BMW cars as well in which users can view the latest and exciting car models all relatedtowards the BMW site. On the whole, I think that the BMW advertises it products very well and users are able to easily access themore recent promotions throughout the BMW website. Furthermore, I feel that the colour scheme does fit in well within theBMW website and the overlays do follow the pattern of the theme within the BMW site.
  6. 6. InstructionI have found that on the website it provides a wide range of options for any type of academic purposes that are either listed byusing arrow symbols or they are graphically scattered within certain areas of the computer screen. It also operates with the Sapp’sInstructional Website’s site map where users are able to navigate backwards and forwards throughout the website. On thewhole, I feel that the website has integrated its own colour scheme very well throughout all of the interactive content within thesite and it also displays its own slogan as well so that it becomes identical towards anyone accessing the website.
  7. 7. InformationFor the website it gives users details on that latest discounts for all children whether its male or female.For example, 20% off the kid’s and baby clothing from Thursday 13th September to Saturday 15th September. It also shows theAutumn Arrivals from Per Una for women and the New Season Collezione for the men as well where users from both genderscan shop within these sections to find out more about the latest products. As a whole, I feel that the marksandspencer.comwebsite does make use of the appropriate colour schemes that flow well within the overall theme of the site. However, theircould have been colour rollover effects applied towards the discount advertisements as illustrated below so that it keeps in touchwith the whole theme of the marks website.
  8. 8. EntertainmentThe website obtains a wide range of technological devices such as, DVD, Blu-Ray Disc, CD and Nintendo Wii etceterawhich are divided into categories such as, Film, Music and Games etc. It also shows the most popular movies, music and morewhere these will be coming out in the month of September 2012 and additionally you can by 5 Blu-Ray Discs for £30 in whichsupplements the advertisements of movies. In general, I think that the hmv website makes efficient use of the colour scheme thathelps to resemble the overall theme of the site and it effectively uses colour effects throughout the whole of the website as well.The only criticism is that the anchors that are displayed underneath the navigation bar could do with colour rollover effects sothat it fits in with the rest of the colour scheme within the hmv site.
  9. 9. Hand Drawn (cel) AnimationThis section is essential to the way in which Animation is traditionally set out, as it enables particular parts of each frame to bereplicated frame by frame, so therefore this saves time and effort. A basic sample would be two characters on screen, one that istalking and the other one is stationery. Meanwhile, whilst the 2nd character in the scene is standing silently it can be shown on thescreen with the production of one drawing only with the use of multiple drawings and cells which are implemented in order tocreate a speaker character. The main advantage of using hand drawn cell animation is that it is highly detailed within the output ofthe sketches and the audience can simply relate towards the characters. But the main disadvantage of cell animation is that it isvery time-consuming where this is due to the overwhelming number of frames that are needed in order to make the movement.A more sophisticated example of cell-animation is where you put a plate upon a table and then physically draw around it in whichwill be incorporated into the background of the cell-animation. These graphics illustrate how Cell- animation is integrated on screen and through objects.
  10. 10. Flick BooksIs a sequence of images that vary from one page to another, so that when you turn each of the pages consecutively the picturesemerge as an animation. Flipbooks are most often illustrated for children but it could also be appealing towards adults and use arange of Photographs instead of Drawings. Due to the technological developments in web animation it has now become digitalmeaning that people can gain access to every page by just a flick of the finger. The main benefits of having an enhanced flick bookmodel is that you are not tied with other servers and the pages per costs and all of the files related to the flick books are obtainedwithin the server and you do not have to rely on anybody. However, the main drawback of the improved flip book is that it canfreeze up odd times which causes the user to be agitated and frustrated due to the fact they cannot do anything with the digitalflipbook.The first flip book shown in, "September 1868", when it was originated by John Barnes Linnett under the name of "Kineograph"motion picture. This was the first form of producing animation in a linear sequence of images rather than being Circular. These images shows samples of what a flipbook actually looks like, how it is produced and how it is displayed on a technological device.
  11. 11. Animated CartoonsThroughout the decades of producing film for children TV animation has become a big hit which can be well-known as, cheap-fun.Different types of animation within this area include: Puppet animation, Puppetoons, Clay-Mation, Cut-Out animation, Silhouetteanimation, Model animation, Graphic animation and Pixelation. The Captain Pugwash is an example for the type of animationused within children’s TV animation which is `Cut-Out`. Another example of the kind of animation used within children’s TV is`Bagpuss` which resemble the way model animation is laid out. The main advantage of animated cartoons is that you tend to havea more sense of humour, expressions and general social skills. However, the disadvantage of watching too much animatedcartoons is that you may neglect your studies which will result into bad grades and stress.
  12. 12. Animation ProcessIs where you take steps towards put together a piece of animation. Firstly, there needs to be a script or storyline in which linkstowards sketching your ideas and the filming production for the animation where this will be discussed between the animator andthe director, therefore this will help them to gain a visualisation of the approximate timescale of the movie and how manydrawings are involved within the animation. Secondly, you need to obtain a dialogue of what each character will say before theyget animated in the way you wish. Thirdly, you need to draw out the characters of the story and there appearances in which thesketches are normally very messy. Many of the films today do use 70,000 plus of separate drawings. Whereas, the best animatorsonly need a few drawings and leave gaps between for the inbetweener who would come along to finish off drawing the animationgaps. Fourthly, the layout of the film and the storyline is produced by very specialised artist or group on the basis of all of theresearch materials and sketches. All of the features such as, background and the position of the characters is drawn on to a sheetof transparent where they are amplified with subtle movement of the characters. Fifthly, everything involved within the animationis then put through the process which is called `Line Test`, where the animation testing is carried out by using a computer or videoequipment to ensure that the animation is running smooth. Sixthly, When everything is completed, the drawings are then sent tothe people that ink and paint them. The whole process can be very problematic if the images that used within the animation arevery ugly. Finally, after all the drawings have been filmed, the dialogue is then added. From time to time the film is edited throughcomputer software applications such as, Adobe Picture Elements 10 and Adobe Premier Pro 9. Once this has been done the film isthen released to the public.
  13. 13. Graphic Information File Format (gif)Is an animated GIF that was originally used on the web where the animations makes use of a limited range of colours to make upthe maximum number of colours within the animated GIF which is 256. It can also use transparency layers where each layer has itown moveable object in terms of colours and images etc. The main advantage of an animated GIF is that it can be obtained at avery restricted file size which means that the web animation will be more quicker to upload on the internet. However, due to thelimitation within the amount of colours that can be used the motion picture tends to be very quick and speedy.
  14. 14. Dynamic Hyper-Text Mark-up Language (DHTML)The usage of DHTML may not be favourable as making use of the shockwave/flash for web animation but has mainly recognisedfor what it has done in the past. DHTML can help with producing small animations and vibrant menus on the webpages. The codefor DHTML is made up on HTML (Hyper-Text Mark-Up Language), CSS (Cascading Style Sheets) and Java script. As flexible as it iswithin the earlier platforms, users who operate with the Windows 95 or the Windows 98 will not get the smooth animation asthey intended. Even if you try to amplify the speed of the animation it would still be a slow bumpy ride and there is a limit on howfast you will enable your animation to go with DHTML and therefore how smooth it will play. This means that it is not very cross-platform compatible, even though a minority of the people would use such old platforms these days. Nevertheless, DHTMLanimation does work fairly well on every platform if it is carrying out basic animation for instance, transitional effects, drop downmenus, wipe effects and other animations with a small duration. DHTML used within animation is a simple way of making a sitebecome interactive for the user without the need of loads of coding and testing.
  15. 15. Extensible Hyper-Text Mark-up Language (XHTML)Is a derivation of the HTML (Hyper-Text Mark-up Language which is used for producing webpages. It is centred around the HTML4.0 syntax, but has been altered to follow the guidelines of XML (Extensible Mark-up Language). So therefore, the XHTML 1.0 canbe sometimes referred to as the HTML 5.0. Because the XHTML is expansionable, Web Developers can produce their own objectsand tags for every webpage that they build where this gives the Web Developers more control over how the web animation looksand being able to manage their own webpages. The only obligation is that the custom tags and attributes are defined in adocument type definition, that is referenced by the XHTML webpage. XHTML webpages also follow strict arrangement incomparison to the regular HTML webpages. While the web browsers on the internet are very user-friendly of the HTML syntax theXHTML must have the correct quotes and capitalisation in the mark-up language for all of the coding within a webpage because ifyou don not put the right coding in it will not function as you want it to. As the strictly arrangement of the webpage requires amore thorough creation of the webpages, it should also make sure that the webpages do look more uniform across different webbrowser platforms.
  16. 16. Java AppletsAre small programs which are used on the webpages that help to make animations become functional. Unlike the DHTML asexplained above the java applets are intersectable towards other computers in other words they are linked together. This isbecause the languages are not available on all of the platforms and they don’t always agree about what they consider to beproper code. Java applets are mainly used to provide many interactive elements towards web applications which cannot beprovided by HTML where many forms of animation are possible. What all java applets have in common is that they producemotion on screen by drawing consecutive frames at a high speed of around 10 to 20 frames per second. The main advantage ofjava applets is that it is safe and trustworthy online application meaning that any untrusted online apps can only access the serverit came from. However, there is no standard to make the content of applets available towards any screen readers. Sotherefore, applets can harm the accessibility of a web site to users with special needs.
  17. 17. The Optical Illusion of Motion (persistence of vision)Dating back to the year 65 B.C., Persistence of Vision is where a range of graphics can sustain swift contact with your eye in moreexcessive timescales then it would take for just one image in which the images are joined together in order to produce anhallucination of movement within the motion picture. Normally, 2 frames operate at a frame rate of 24 meaning that 12 framesper second is assembled within one drawing. The main advantage of the persistence of vision is that you can be fascinated by theillusion of movement when viewing the motion picture within an image or an object etcetera. However, if the images are notproperly put together the pattern of the illusion of the motion picture will not flow as expected.For instance, the squid-led-bike (See below left) maintains constant looping that forms an illumination of movement within theobject, so therefore it can visually maintains constant interaction from the people viewing it. Another example, taken from theTech-Tut website (See beneath text) that demonstrates how graphics tends to turn blurry when watched for a long period of time.
  18. 18. Clay-MationThis technique represents one of the many forms of "stop motion" animation which is constructed from clay or Plasticine. Allframes or still photographs are recorded on Film or Digital Media and it then replays the motion of images and objects in quicksuccession.The term "clay animation" is where each object is formed in or clay or similar flexible material for example, Plasticine in which it isnormally used on a wire skeleton called "Armature". The object within the animation is put on a set (Background) where the "FilmFrame" is exposed and the object or characteristic is moved marginally by hand. This process is replicated for every new framethat you create so that it integrates the "Plasticine" features into an actual animation. The main benefit of Clay-Mation is that These images show samples of how "Claymation" is constructed as a still images & through animation.
  19. 19. Stop-Motion
  20. 20. Computer Generation (Frame Rate)They mainly comprise of Frame Frequency which gives an indication as to the amount of images that are displayed within themovie per second. Frame Rates can also be measured in FPS (Frames Per Second) which primarily shows the number of framesper second. Certain computer facilities would use FPS for instance, the Adobe Flash Professional CS4 software enables users toconstruct their own animation and choose the frame rate that it is going to be played back as which is normally 24 fps but you canre-modify it up to 120 fps. Specifically, a movie played within a cinema would stand at a frame rate of 25 fps, whereas a standardanimation would in general last up to 12 fps. The main difference in the speed of the frame rate mainly relies upon the rate thathas been chosen for example, if you have allocated a frame rate any lower than 12 then the illusion of movement tends to bemore slower meaning that the filming process becomes more long-winded, so therefore this will become more tedious towardsthe people viewing the movie.
  21. 21. Computer Generation (Frames)Is where the content can be displayed in what is called “keyframes” where this can be done through software applications suchas, Adobe Flash Professional CS4. They are shown within different layers in what is called a Timeline menu where they canextended for as long as possible in order to make the hallucination of movement fit within the motion picture of the animation.You can also organise or add layers in which are displayed near the bottom-left of the timeline menu. The main benefit of havingframes is that you can properly modify the positioning of all of the content within the animation. However, corruptions within theFlash software applications can occur if the content is not integrated correctly.
  22. 22. Computer Generation (Key Frames)
  23. 23. Computer Generation (Onion Skinning)
  24. 24. Computer Generation (Tweening)
  25. 25. Vector Animation
  26. 26. Raster (Bitmap) Animation
  27. 27. Compression (File Size)
  28. 28. Compression (Download Speeds)
  29. 29. Scalability
  30. 30. File Formats (FLA)
  31. 31. File Formats (SWF)
  32. 32. File Formats (GIF)
  33. 33. File Formats (mng)
  34. 34. File Formats (SVG)
  35. 35. Software (Flash)
  36. 36. Software (Swish)
  37. 37. Software (Amara)
  38. 38. Software (Director)
  39. 39. Web Player Plugins (Flash Player)
  40. 40. Web Player Plugins (Shockwave)
  41. 41. Web Player Plugins (Real Player
  42. 42. Web Player Plugins (QuickTime)