Unit 65 assignment 1


Published on

  • Be the first to comment

  • Be the first to like this

Unit 65 assignment 1

  1. 1. Unit 65 – Assignment 1Task One: Investigate the uses of Web Animation Banner Ads: This is the banner for the JD sports website. The banner animates as a slide show of four different screens, doing this allows them to express various different bits of advertisements but using less space. The banner slides back and forward depending upon which page or arrow the user clicks on, however it has anautomatic setting which the banner scrolls without the user clicking the arrows, but if themouse is hovered over the banner it stays on the current one being shown. It is quite abrightly designed animation which suits its purpose as a fashion/clothing website for childrenup to young adults. It involves the audience by being an interactive banner as it allows theuser to navigate through the four banners using the arrow buttons and the page numbers. Animated Interface Elements: The Topman website contains a navigation row which contains animated interface elements. The menu is organized in different categories ranging from ‘Clothing’ to ‘Shoes’, which when hovered over with the mouse they activate a drop down menu with various links which are relevant to the category. For example, the drop down menu for clothing contains links to more specific clothing items such as T-Shirts, Jackets, etc. The colour scheme for the menu is very basic with just a black background and white writing however this sort of drop down menus doesn’t need to be over complicated as it may confuse the audience and make it harder for them to navigate around the site.Kyle Mckendrick Page 1
  2. 2. Linear and Interactive Animation: An example of linear animation is the intro to the Simpsons website, as soon as you open the web page an animation is activated, showing cut scenes of various characters as if the screen is a television then a blurred screen effect occurs which then fades into the main interactive menu. The intro animation gives you the option to skip it however you cannot pause or mute it. The idea of a linear animation as anintroduction to the site draws the reader in and grabs their attention before viewing the actualsite. It’s a very bright animation which is expected from a cartoon program.An example of interactive animation is also on the Simpsons website, after the linear introthere is a screen with buttons underneath which once clicked on they scroll to various boothswhich contain different information, one of the booths is a file cabinet with various letters ofthe alphabet which the user can navigate around to find the character they want to knowinformation about, clicking on the letters activates a draw to open, then you can look throughthe different character files and when clicked on them a book is opened containing thecharacter profile. The positives of this is that the user can interact with the site differentlycompared to just navigating through ordinary menus, this keeps the user busy and drawsthem into the site to make them want to navigate around more to see what else there is.Promotion:An example of promotion is the BMW website; they promote the cars using elements of flashwith a ‘build your own BMW’ application which allows the user to choose the model of BMWthey want and customize it to all the specifications they’d like (colour, leather interior, alloys,etc.) then it gives them a quote on how much this specific model would cost them. This is asuccessful way to promote BMW and its models to give the user an option to design theirown car from scratch so that if they do go down the route of buying on of the cars everythingis done specifically to what they want. Another positive of this application is that the user canKyle Mckendrick Page 2
  3. 3. create various different variations of their BMW model and receive price quotes without the need of ringing up the company and having to keep explaining their specifications over and over again, it saves a lot of hassle and effort for the customer. However the downside is that the aesthetic side of the application is very basic and quite boring, maybe brighter colours may draw the customer’s attention a little more, however sometimes a verysimple design can be a more successful way to advertise.Instruction: An example of interactive instructive animation is the Flash Synergy Learning application which explains different stages of creating a flash animation, it allows the user to go at their own pace and whenever they are ready to go to the next stage they can click to do so, instead of a video instruction which would carry on playing and the user would have to keep replaying to get back to the stage they were on. Another good positive about this application is that it replicates the Flash software window and uses different areas asbuttons as if the user was actually on Flash which makes it more realistic. The only negativeis that when they point out a tool or menu which you need to click on sometimes the arrowisn’t very visible as it is light blue which doesn’t really stand out compared to the colour ofthe screen, the image above shows the arrow pointing at the text tool, maybe if it was biggeror a brighter colour the arrows would be a lot more visible to the user. Information: An example of information animation is again the Simpsons website; it shares various different elements information with us regarding the characters, episodes, air time of the program, etc. the site basically provides the audience with all the information they need to know regarding the cartoon series. The positives of the Simpsons website is that it is a highlyillustrative site splitting all large blocks of text up with images which is more inviting for theaudience to read it, nobody would feel tempted to read the text if it was a long page full ofKyle Mckendrick Page 3
  4. 4. block text. A negative of the site is that the navigation system could be quite complex for somebody who isn’t experienced using computers, however for someone who is experienced it is a very unique site which looks good aesthetically. I think they present their information successfully, without letting the audience get bored with random bits of linear information hiding around the site, on the characters sectioninbetween switching to file cabinates a linear animation is activated at random showing acharacter from the show. Entertainment: Yet again, an example of entertainment animation is the Simpsons website, as it is a cartoon animation series of entertainment the website will be expected to be packed with entertainment which is done in all the random bits of linear animation around the site which are activated at random when navigating around the site. Also there is a section onthe site which has recent episodes available for the audience to access; this is a successfulway for drawing in the audience as if they miss an episode on television they willautomatically want to visit the website. The only negative to this is that less people willactually tune in on television as they can just watch it on demand when they visit theSimpsons website which would result in less TV viewing figures.Kyle Mckendrick Page 4
  5. 5. Task Two: Investigate the development of animationCel Animation: Cel animation is an animation technique where each frame is drawn by hand. The technique was the dominant form of animation in cinema until the invention of computer animation. This technique was developed massively over a long period of time. It all started in 15,000 – 13,000 BC when people painted Paleolithic Paintings on their cave walls, these were the first ever examples of images trying to capture motion. It wasn’t until 65 BC when Roman poet Lucretiusdiscovered the persistence of vision which is when the retina keeps an image for a shortsplit-second after we actually see an image, it is related to animation by creating an illusionof motion when we see images in fast sequence to one another. We don’t notice the changeof images because the persistence of vision fills in the gap between images to create theflow of motion.After this various different techniques were invented with most of them being developmentsfrom the previous technique. Some of these techniques include the Phenakistoscope (1831),the Zoetrope (180 AD; 1834), the Flip book (1868), etc. It wasn’t until the 1990s when computerized animation took over the cinematic industry which was a much faster and better quality technique in creating animation. Flip Books: A flip book is a book with a series of images that each has minor changes to the previous drawing on each page, which then eventually the pages would be flipped rapidly to make the images appear to animate by simulating motion. Flip books were very popular withchildren; however they can also target adults as novelty products showing humorousanimation. Flip books are often used in magazines as a nice little extra, also there is suchthing as a digital flip book which would basically be an animation of a book showing asequence of images. The first ever flip book was invented in 1868 by John Barnes Linnetwhich at the time he named a kineograph. They are the first technique to employ a sequenceof animation in a linear sequence rather than circular.Animated Cartoons:An animated cartoon is a film which can be shown in the cinema, on the television,computers, etc. They all hold some sort of story and are created using various sequences ofdrawings. There were various attempts to create animated films and cartoons over the yearsin the late 1800s, however it wasn’t until 1914 when Gertie the Dinosaur was created byWinsor McCay, this was one of the very first successful animated cartoons. It wasn’t until1926 until animation actually developed sound as well, My Old Kentucky Home was the firstever animation to use a soundtrack which was created by Max Fleischer. An animatedcartoon is always a good idea for a website as it adds a little bit of entertainment comparedKyle Mckendrick Page 5
  6. 6. to the ordinary text based site, an example of a site which uses animation is The Simpsons website which I explained in task one, it introduces the site with a linear animation showing various characters. It may be a good idea to add some sort of animation as an intro to the website however it is hard to do this without over doing it or adding something completely irrelevant to the purpose of the site. As the website I am making is based on travelling around Australia it may be a good idea to use an animation of a kangaroo hopping across the screen greeting the audience to add a little humor. Some sites use random interactive animation tointroduce their website, an example of this is the Warehouse Project site, it has a very basicdesign of images of doves that fade in with lights behind them, with a roll over button in thecenter of the page which when rolled over a standby button appears inside it for them to clickon to navigate to the home page. It is completely irrelevant to a music gig however it doesadd a nice urban effect to the site.Animation Process:XHTML:The purposes of HTML documents are to create web pages and to write a coding languagewhich servers and the internet can understand it in order to display as a working web page.HTML in short, is basically instructions for the different browsers to show specific content ona page. The only different between HTML and XHTML is that XHTML has a more strictcoding allowance which means that if you make any mistakes with the coding then the pagesimply will not work. With HTML, there is more flexibility, which means that if you do makeany mistakes, for example, if you forget to close a tag correctly then the web page will stillprobably work, whereas XHTML coding needs to be perfectly written. XHTML gives thefeature of making sure that the coding is perfect and that the site is fully functional in order tobe displayed on a web page, also it will allow the site to be much better in terms of searchengine ranking.DHTML:Dynamic HTML is an term for a collection of technologies combined together to createinteractive and animated web sites, this is done by using a combination of different codingsuch as HTML, client-side scripting language and design and presentation coding (CSS).DHTML enables scripting languages to vary in a web page’s definition language, whichaffects the look and functions of page content; this is after the page has been loaded whilstthe user is viewing it. The characteristic of DHTML is the way it functions whilst a page isviewed.Graphics Interchange Format (GIF):The Graphics Interchange Format (GIF) is a bitmap image format that was founded in 1987by CompuServe and ever since it has been the main format for images used on the WorldWide Web, this is because of its wide support and portability. The format supports up to 8Kyle Mckendrick Page 6
  7. 7. bits per pixel which means it enables up 256 different colour shades to be available to asingle image. These colours are chosen from the RGB colour space which is a 24-bit format.GIF images are most suitable for the World Wide Web as they cover most of the simplegraphics such as logos, areas of solid colour (Website layout), etc. These graphics don’tneed a massive range of colour as they aren’t built up of many colour shades; they are alsoa small file size which makes it suitable for the web as they will load fast for the user. GIFformat isn’t suitable for any colour photographs or high detailed images as they will requiremore colour shades in order to build the image without being pixelated.Because of their small file sizes, GIF format was the first type of animated imagery to beused on the World Wide Web, however these animations were very basic and short, most ofthem were a loop animation. Another positive about GIF images is that you can have partsas transparent, for example if I had an circular graphic I could make the outer of the circletransparent so that once it is applied online the audience can only see the circular graphicand not the background from around the image. This is something which makes GIF imagesmore suitable for the web as they are good to use for the design of a site, whilst if I was to beusing JPEG images, there will be lots of different backgrounds of images around graphicswhich aren’t meant to be a square or rectangle anyway. Example below: JPEG Image: GIF Image:Java Applet:A Java applet is a plug in which is used on a web page to help operate animation, they arequite cross platform compatible which makes it unlike DHTML. This is because Javainterpreters are not available on all platforms and don’t always agree about what theyconsider to be proper code. Java applets are mainly used to provide interactive features toweb applications that cannot be done with HTML; they support many forms of animation.One thing that all Java applets have in common is that they create motion on screen bydrawing frames at a high speed of around 10 – 20 frames per second to show a smoothlyrunning animation.Java applets might be a good idea for my website as I will be displayingsome kind of animation.Kyle Mckendrick Page 7
  8. 8. Task 3: Investigate animation techniquesPersistence of vision: ‘Persistence of Vision’ is when the retina keeps an image for a short split-second after we actually see an image, it is related to animation by creating an illusion of motion when we see images in fast sequence to one another. We don’t notice the change of images because the persistence of vision fills in the gap between images to create the flow of motion. An example of ‘Persistence of vision’ is when we stare at a bright light for a couple of seconds, when we look awaywe still see a bright blurred light image which is the retina keeping the image of the light.Claymation and Stop motion: Stop –frame (Stop-motion) animation is an animation technique used to make objects appear as if they’re moving on their own. The object is moved in small measures between separate a photographed frame, which creates the illusion of movement when all of the frames are played as a flowing sequence. Clay (Claymation) is one of the most common materials used for stop-frame animation as it isvery easily shaped and can be moved for next frames without complication, howeversometimes when moving the clay after each photo there maybe finger prints or dents inwhich was caused by handling it.Computer Generated:A frame is the term for one of many photographic images that are played in an animationsequence. ‘Frame rate’ is the term for how fast the frames are being played, frame rate ismostly measured by how many frames played per second (FPS). You can change the speedof the frame rate to suit your animation but obviously a slow frame rate would expose thespace between frames and a really fast frame rate would make it look as if the animation isin ‘fast forward’.A key frame in animation and filmmaking is a drawing that defines the starting and endingpoints of any smooth transition. The drawings are called frames because their position intime is measured in frames on a strip of film or timeline. A sequence of keyframes defineswhich movement the viewer will see, whereas the position of the keyframes on the film,Kyle Mckendrick Page 8
  9. 9. video or animation defines the timing of the movement. Because only two or three keyframesover a second do not create the illusion of movement, the remaining frames are filled withgaps. Onion skinning is a technique used in creating 2D animated cartoons and editing movies to see several frames at the same time. This way the animator can determine what they are going to do in the current frame based on the past few frames. In traditional cartoon animation, the individual frames of a movie were drawn on thin onionskin paper over a light box; the animator would have various pages of onionskinpaper underneath each other viewing the other frames whilst editing the top one. This wouldeventually contribute to making a smooth motion.Tweening is the process of generating frames between two images to give the appearancethat the first image evolves smoothly into the second image. Inbetweens are the drawingsbetween the key frames which creates the illusion of motion. A Classic Tween is used to geta smooth motion out of a shape or character, the way it is used is so that there is two keyframes spaced apart from each other and the first key from shows the shape on one side ofthe page whilst the other shows it in a different location around the page. The classic tweenhelps fill in the gap by creating a smooth movement; this is a really useful tool when creatingbasic animation or different parts of advanced animation.A motion tween is a tween that can be used to create movement with a character, thecreator can create a path where the character will walk or how they’re going to walk andwhen the motion tween is activated the character will move in the path it has been assigned.Investigate Digital Animation:Vector Animation:Vector animation is animation that has been built up of different lines, shapes and polygonswhich effectively work as a mathematical formula. This is what makes vector imagesdifferent from others as they aren’t built up of pixels like raster images, the fact that they arebuilt up of this special formula allows it to be enlarged without the loss of quality or the eventKyle Mckendrick Page 9
  10. 10. of pixilation, it can be stretched and stretched and it will always appear to be the same.Vector animation is a good aspect to use on a website as you can stretch the size of it to fitwhatever on the page, also it could be shown in a certain window size but have an enlargebutton for the audience to choose to enlarge it.Raster Animation: Raster animation is a type of animation that uses raster graphics which are built up of thousands of pixels which all hold different colours and shades to create the image, the amount of shades available is down to the bit depth of the imagery being used. The downside to raster animation is the fact that the more the screen is enlarged the more the animation will pixelate. This is why most animation used is a vector format however for smaller basic animation raster is probablybest to use due to smaller file size. The amount the animation pixelates is depending on thebit depth of the images used, the higher the bit depth the more colour space used, whichmeans the less it will pixelate. The lower the bit depth, the more it will pixelate.Compression:Fortunately files can be compressed to lower the storage size of it, however the higher thequality of the file the larger the file size is, so you could imagine that if I compress a file then Iam going to lose some of the quality. Lossy compression is a data encoding method thatcompresses files by lowering the quality. A smaller file size is easier to handle with storage,sending, or even sharing over the internet. Some slower computers will take longer todisplay a file online if it has a large file size. There is a percentage as to what you compressthe file down to, for example, if I didn’t want to lose too much of the quality but I wanted toshed a little bit of the file size I would only compress it by about 10%. It is up to the user asto how much the file is compressed.Lossy compression is most commonly used to compress multimedia data (Audi, video andimages), especially for displaying techniques such as streaming media and internet display.Lossless compression is data compression technique that allows the original data to bereconstructed from the compressed data. Lossless compression is used in manyapplications; one way in which it is used is in a ZIP file. Low compression (84% less information Than uncompressed PNG, 9.37 KB) High compression (98% less information than uncompressed PNG, 1.14 KB)Kyle Mckendrick Page 10
  11. 11. Scalability:Scalability is where files can be enlarged or contracted to suite a systems light or heavyloads, this is suitable for vector graphics as they can be enlarged because of their build-up ofmathematical formula which enables it to be stretched without pixilation. Whilst it wouldn’t beas suitable for Raster graphics as in the event of them being enlarged, they pixelate andloose quality massively due to them being built up of pixels. An example of scalability isYouTube, on their video menus they give the user the option to enlarge to medium or fullscreen which then makes the video pixel depending on which option is selected.File Formats:There are various different file formats which can be used for both vector and rastergraphics, all of them enable different compression settings which makes them all different infile size. File formats can also determine what software the file should be used in; some ofthis software includes Adobe Photoshop and Adobe Flash. A file can be saved in variousformats, if I was to be using Adobe Flash I would save the file as a ‘.FLA’ which is the mainformat for flash which allows me to open it and edit it once saved which is what I would do inthe process of creating a project. I could also save it as a ‘.SWF’ file which is the shockwaveversion which would be the final version of the product that can’t be edited. The same wouldgo for Photoshop, I could save a file as a ‘.PSD’ (Photoshop Document) which is an editabledocument, or I could save it as a ‘.PDF’ (Portable document format) which is the finalversion.A ‘.GIF’ (Graphics Interchange Format) file format is used to create a small animation thatconsists of a sequence of different images which when combined together looks like amoving image.Kyle Mckendrick Page 11
  12. 12. Kyle Mckendrick Page 12