Unit 65Task 1WebsitesFor this task I had to look at some websites, and look at the different types of flash animation that isused on the websites, the animation, images, navigation what I could interact with, what on eachpage video’s etc. I first looked at this websites which is promoting the TV series Supernatural, this website allows people to watch videos, look at images pre – order and buy stuff off this website, but the first thing that is seen on this webpage is the banner is at the top of the webpage, the banner doesn’t move it’s the same, but this is one webpage out of many on this website This is the main page on the website at the tope it has a banner, the banner moves from picture to picture automatically also there are button in which people them self can click on if they want it to move faster or if they see a part of the banner that they like then they can go back, the banner is advertising TV show from that channel and so people can keep up to date with what’s new, they have done the banner like this and placed on thetop because it will be the first thing that the public will see when they go on this website to check itout or to find their favourite TV showor wanting to know more about it. They have it has movingimages so people can look at them as they move and the time it take between each image is quitebut fast.The buttons on this web site change colour when the mouse hovers over the button, it goes fromwhite to green or a different colour, it depends on what the web page is or is from, e.g. on theSupernatural page the rollover buttons go from green to white showing that the mouse is hover overit, also it’s not just rollover button text that change but also the some images at the bottom of thepage where it goes from the image to a white flash which is showing that the image has beenselected or it’s a link to another page.
This image is showing the example of a rollover button on this webpage, on the left is a picturewhich shows three pictures and it says Photos on the top of it, and then when the mouse goes ofthat image then it flashes white (on the right) showing that it’s a link.This website has quite a lot of videos on it showing clips of TV series or showing trailers of TV series,these video are interactive because people can stop the video from playing or pauses, paly it skipetc. which makes it interactive, there is a video which loads up as soon as the web page this is alsointeractive as you can stop it or play it again once it has finished, the web site is promoting all of theTV series that are on this channel, the way that they promote them is by showing loads of images ofthat show and giving the show it’s on web page which tell you all about the show and the characterthat are in the show, the entertainment on this web site are video clip and trailers also it allowspeople to watch full episodes of their favourite show from the channel, this website has information,the information on this website is all about the different TV show which are on the channel that thewebsite is promoting. When you like on a link of a TV show e.g. if I clicked on the Supernatural link itwill take me to that page and give me all the information on that show, like the main characters ofthe show, the different season and episode that the show has information of it on a whole as well asthe time and date it on as well, giving this information out to the fans means they know when it willbe on also people who are not fans of the show can have a look at this website to see if thereanything that they may like will be on or to try something new then they can go on this website andhave a look around then check out the information and find out when it will be on and or to seewhat the show is about then they can by going on its page.This website doesn’t have a lot of entertainment on it, but it does have a little on it where peoplecan watch clips, trailer of the show that they are looking at or even watch full episodes from thatshow and sometimes there are behind the scene video in which fan can watch if they want to seehow the show is done, as of entertainment it just have video but some pages have more on themthan other. At the bottom of the Supernatural page, you can see different links to videos, pictures, shop area, to another page and even a book, I have found that this is the only page which has this and if you’re a big fan of this show then reading the book link will be entertaining them as it tells story of Bobby, say about thedifferent monster that they have hunted in the show and off. But it’s really interesting to read and
would be entertaining for some. This links to a pdf file where they can scroll down and read thecontent on the pdf.After I looked at the Cw website I then went on to checking out another website which is calledTerra Nova, this website is fully based on the TV series which was on TV This is the top half of the home page; this will be the first thing that people will see when they go on the website. This webpage has much on it from animation, video, information etc. everything that fan or people will need. This is promoting the series topeople by showing them kinder what it about as soon as they come on to the website, without anyvideos or anything because the image and the background say a bit about it. There’s not really abanner on this website as there is an navigation animation which people click on enter and this bitwill change in to a jungle in which people can scroll across it and find new stuff and information onthe TV show, there is an video on the left on this animation which people can click on and watch itthis video is a liner video as people can’t skip or stop it as it plays. This is just under the top bit on the website, this is giving people more option in what video they would like to watch, the navigation bar is at the top of the page which allows people to navigate around the website to find more on the show. This website is promoting the TV Show Terra Nova, is web site has a lot of entertainment by video and little scroll aside that people can explore on this web site and click on thing and find out about them from the information that ison this website, even though the only information on the website is about Terra Nova and thedifferent characters, dinosaurs etc. that people can look at while they are on this website and wanting to find out more. The information is also fact as it tell people about dinosaurs and give the information all about them, also the dinosaurs move around in which it’s 3D animation moving around and you can click on the other dinosaur which are at the bottom of the page.
This website has a lot of animation form a 3D dinosaur to the top background allowing people toscroll across and then click on other pages on the website. But in order to get to that on the mainpage it say click enter Terra Nova and then once that I clicked it flashes white and then you have adifferent image which is of a jungle and then you can scroll across it It will look like this and it gives you the chance to scroll across it find these blue tag which will give you information once you have clicked on it, and it allows people to go left and then right finding new thing, this is a form of animation and the people who go on this website have the control of the scroll and where they want to go on the webpage.As you can see that his website is every different from the last one as the Terra Nova website hasmore to do on it other than watching videos, this one lets you explore deeper into the show andwhat it is.Task 2:Investigate The development of animation, such as hand drawn (cel) animation; flick books;animated cartoons; animation process, graphic information file format (gif); dynamic hypertextmark-up language (dHTML); extensible hypertext mark-up language (XHTML); Java applets Cel animation is an important innovation to animation that is out today as it allows some parts of each frame to be repeated from and frame to another frame. An example of this would be a scene that has two characters on the screen, one of them is talking and the other character is standing silently, listening to theother character, since the character is standing not moving is can be displayed inthis scene with using only one drawing, on a cel while the other would be multipledrawings on a multiple cels will be used to animate the character that is speaking.In very early cartoons, which were done way before cel animation was invented,such as a cartoon which was done 1914 which was called Gertie the Dinosaur whichwas a short film, but every frame which was on that film was all hand drawn and Imean everything, characters, backgrounds, items, objects etc. was all done drawnon a single sheet of paper, so he took photos of them and redrawn them until hehad all the frames he wanted to create his short film. But the animation was a bitjittery as the different frames were slightly different one form the other which gaveit that jittereylooto it, but later the pre- cel animation was later improved by using
different techniques like the slash and tear system which was invented by RaulBarre, the background and the animated obects would be drawn on spearedpapers. A frame was made by removing all of the blanks parts of the paper, theobjects were drawn before being placed on top of the background and thenphoto’d, the Cel animation processes was invented by Earl Hurd and John Bray in1925.Earl Hurd was a American animator and film director, he best known for his work Silent, Bobby Bumps animated short series which he created and produced. Him and Bury where the ones who developed Cel animation. John Bury was also an American animator, he produced the second animated film which was in colour called The Debut of Thomas cat which was done in 1920. A flip book or the other name for it is flick book, is a book with numbers of pictures that flip from one image to another, this give the illusion of the images moving like they do on cartoons, but to get this affect the person who is flipping the pages will have to do it rapidly so it looks more believable of the image moving and then it comes to life. The images on the flip book will appear to animate bysimulating motion between the pages that are being flipped. Flip book designedmore for children so they can enjoy reading or flipping through the pages and eventhey will be able to create their own flip book. But it’s not just for children flip bookscan be enjoyed by teenagers and adults as well. It not just hand drawn images thatcan have this motion on a flip book but photos can also be used which would haveto be one after another to make the flip book look good as you flick through them.Flip book are not just separate books form other book but can also be in ordinarybooks or magazine and the person who has the book or magazine will be able to flipthrough the pages as the drawing are usually on the bottom corner of the book ormagazine which allows people to flick through them and give the motion of itmoving. Now a day flip book are not only in books or magazines but there is asoftware which allows people to create flip books on the computer which them willlook more like a cartoon. But it’s the same rule where they would have to draw animage on a page and at the end flick through it to see the motion.Flip books first appeared round September 1868, when it was introduced by JohnBarnes Linnett, but it was under the name Kineograph which meant moving picture.Flip books were the first form of animation to employ a linear sequence of imagesrather than a Phenakistoscope which was images in a circular thing which movedand it would make it look like the image was moving.
John Barnes Linnett was a lithograph printer, Lithograph is a method for printingusein stone or a metal plate with smooth surface this was invented in 1796 byAloisSenefelder. But Pierre-Hubert Desvignes was credited with being the inventorof the flip book. Linnett was the first to patent the invention in 1868 under thename Kineograph, but Linnett of penumonia , which later his wife had sold thepatent for the Kineograph to an American.gif,A gif (Graphic Information File Format) is a type of digital image. The image that changeor moves. Animated Gif can be thing such as a web banners ads, in some places a fullmotion video file and others. An animated Gif takes up about 8-bite palette, an imagewith this mean only having 256 colours available for that image. This means most Gifimages take up less memory than any other image is other formats.A Gif works in the same way as a normal cartoon animation, but they use more thanone image in the same file which is called a frame, could say it basically a stop motion,then it’s set on a loop which makes it look like its moving.This is a Gif as you can see that it’s made up of two images that has been put togetherwhich then switches images to give the impression that the image is movingWebsites use animated gift to attract the customers eye, they would have somethingmoving to do the with what they are sell, and sometimes people will be able to rememberthe animated gift depending on how well it’s done.This is an animated gift, as you can see that Sonics had has moved this is an animated giftwhich websites would use if they e.g. they might use a Sonic animated gift if a new Sonicgame came out or if it’s anniversary of Sonic.
DHTMLDHTML is not one which is used most by people compared to software such asshockwave/flash for animation, as flash is more easier to use to create animation butDHTML has been recognised by people and have been used in the past. DHTML standfor Dynamic Hypertext Markup Language and it can help with creating small animationand also dynamic menu on websites, to use it and to get good results from usingDHTML then you must use it a lot as the more you try the better you will be at it andyou will be able to create animation for websites and dynamic menu for them aswell.DHTML is made up of HTML, CSS and Java Script which used together in DHTMLwhich will allow people to create animation and other stuff for webpages. DHTMLallows different scripting to change variables on websites definition language whichthen turns which will affect the look and the function of the HTML page content afterthe webpage has been fully loaded and also in the viewing process. DHMTL allowwebsite creators to add effect to the web site or web page that they are creating, mostof these are difficult to do. By the creator of a website using DHTML scripting languageis changing the DOM and the style. For example the DHTML will allow creator toanimate text and images that are on the web page in their document, allow the creatorto independently move the different elements from any starting point to any endingpoint that they want, this is by creating their own path or using one which is alreadycreated for them as the move the elements. It will also allow the creator to includerollover buttons or drop down menus and there is many more that it will allow for it todo.There are four main features to DHTML when it comes to using this to create animationstuff for websites. Changing the tags and properties, this one is the most used out ofthe them as it allows the creators to change the qualities of an HTML tag which isdepending on the event outside of the browser such as a mouse click, time, date, etc.the other one is real-time positioning, when people think of DHTML this is what theyare most likely to say or they expect. Objects, images and text moving around the webpage, this allows people to play games interactive games with other readers or animateportions oftheir screen. Dynamic fonts and date binding. People who are using DHTMLon a Windows 95 or Windows 98 will not get a smooth animation that they had hopedfor. It would be slow and bumpy ride for the creator, the creator will not be able to sortit out even if they increase the speed it will still be bumpy and slow, this show thatusing or running DTHML is not compatible for ever cross-platformTask 3Investigate Animation Techniques such as, the optical illusion of motion (persistence ofvision); Claymation; stop motion; computer generation (frame rate, frames, key frames,onion skinning, tweening)Clay motion is little models and they take photos of each movement that they put the
models in a different movement and then take a photo of it and then after they have allof the photo with different movement on them they then put them on to the computerand put all of the photos of the stop motion together and then put sound and music onto the film and then it will look like a normal film but it will be clay. Aardman did someclaymation which includes Angry Kid and Wallace and Gromit which is their mostfamous one that they have created. On Claymation or stop motion animation they buildthe full set on a massive table and create the character that are going to be in theanimation and then place then on the set in the places that they need to be in with acamera in front of the set and character and then they take a picture of that, that willbe the first frame of the animation and then they will move the character a little and dothe same again and repeat this until the animation is done and ready for editingAlso animation can be done online using a computers or a software which is on the computer whichhelps it to be the best animation. Computer animation can be done in 2D or 3D but if it’s going up onthe internet then it’s best that the animation is 2D as it will play a lot better than 3D animationwould on the computer. Animation which is created for the internet are mostly created in Flash, thisallows people to create animation for websites. In flash it allows people to use different tools inorder to help them with creating the animation, such as onion skins, which will allow you to see thelast place where you put an object and then move it across or up if it’s meant to ani8amte it helpspeople to create a straight path for that object so when it animates it will move in a straight line.Also it allows people to control the frame rates animation, so if it was a movie animation then theycould change to 12 frames per second as that the most common one for the best speed ofanimation. The higher the frame rates the faster the animation will go and the more horrible it willlook, and the same with less frames rates but it will go really slow when it’s playing. Also tweening isanother thing which is used in flash, tweening will allow the animation to move, using classic tweenwhich is more for a straight line, motion tween is for creating the animation path yourself frame byframe or doing it key frame at a time.Task 4Raster imagesA raster image is an image which is made up of tiny little pixel coming together to create animage sometimes at a certain size which mean you zoom into a raster image then you will beable to see the pixels on that image which would mean the resolution on the image is low. As abitmap the image is sorted on to the computer basically saving it on the computerThis show image of what a raster image would look like if you were to zoom in or expand theimage which you would be able to see the pixel on the image, this is because the imageresolution on the image is low so by zooming on image would so the pixel, this is because theseimages are not meant to be zoomed in on or to make them larger they are meant to be smallthat why the resolution on them are lowAlso you can see the different pixel colours which were used on this image.The different types of format which come under the raster image are bmp, gif, tiff, jpg.
Vector imagesVector images are different from raster image. it allows the image to be zoomed in as much as you want to and it will still be clear, you won’t see the pixel like you do on a raster image. The way that they can do this is that the vector tools has a line which will sort the image out when zoomed in on, these all get sorted on the system. vector art is the fact that each line within the image is representative of a single object. This makes it easier or the system or computer to re-edit the image. Also storing takes up less computer memory and to process. This shows the different between the two, see how the vector one is stillclear and readable, and the bitmap is all pixelated.The files which all have the vector image all end with GIF, .BMP, .JPEG, .JPG, and .PCX these willallow you to zoom in or expand the image as much as they want and it will always reform itselfback into the image that it started out to be.Lossy Is a type of compression where information will be lost. This means after resizing the image and then putting it back it will have less information then the original file did, the image wouldn’t look the same. It a form of compression where the data is split into different chunks to be recognized to be optimizes. this sort of compression doesn’t really take that much space up in the memory This show a simple idea of Lossy compression, as you can see the image starts off normal and as they compress the image you can seethat the image slowly goes for good to bad, then end up all pixelated.LosslessLossless is a better compression type then lossy. It does not lose any information on the imageat all not matter how small or big you make it will always go back into its original form. Losslesscan put data into a smaller file size by using kind of internal shorthand. If an image was 1.5 MB then the lossless compression can lower that down to half of that and not lose any information depending on the type of file that’s being compressed. This shows an example of as the lossless and lossy, this images show that with lossless you don’t lose any information when you compress the image and then
restore. Nut with lossy you lose the information with destroys the image.CompressionCompression can be from lossy and lossless which one of them loss the information when resized or messed around with and the other one where date on the image will not be lost at allwhen resizing and messed around with. With compression the file can be resized and changed ifthis was for a game it would make it run faster on the internet with optimising the game. Thebest image quality at a given bit-rate is the main compression. Compression is the reduction inthe size of the date in order to save the date. Compression can be performed on just the datecontent or the entire information depending on a number of factors.It can reduce a text file to 50% of the actually size it started out as. This can be said for theimages it can resize the image to anything. Graphics image file are usually designed to compressinformation as much as it can, with the image it can be ether a lossy or a lossless image whichmean one will lose some information on the date when resizing it back to its normal size.file sizeFiles sizes on games are much bigger than stuff on computer such and an image. They store thememory of the game on the disc holds the game on it. Depending on the amount of informationthat the game has on the disc which the console reads and players can play the game that theyhave bought. Also when players get to a point in the game they can save it to the hard drive itself this is in the console itself. Not that most games are on a blu ray disc which can hold up a lotof memory on it, game designers can do more with their game games such long gameplay, extrastuff, better graphics and better cut scene graphics. But before the blu ray disc and the built inhard drive that now are now in game consoles, game had smaller memory on the discs and alsowith the old consoles people had to buy memory cards which they would save all of their saveon to so they can use it on other console as well as their own depending it’s the same make.The bigger the file size on some website the longer it can take for them to load up. And peoplewouldn’t want to sit at their computer for that is why the compressed them down so they loadup a lot quicker on the webpage so it will load up a lot quicker on the websites and then peoplewon’t get bored waiting for this to load up and then they can get on with what they were doing.Websites also have a limit of what it can hold and if the animated gif was bug then it would taketime for the webpage to load up as it would have to get the animated gif ready to animate assoon as the web page loads upTask 5Software for creating, editing, compressing, optimizing, animating, and working with Web graphics.Includes software such a Flash, Real time player etc. each one designed for specific aspects of Webgraphics creation, such as creating image maps, producing ad banners, working with colours,creating buttons, designing rollovers, and for automating or simplifying Web graphics production.Although most pixel and vector based image editing software can be used for Web graphics,
specialized Web graphics tools may perform certain tasks better than your primary graphicssoftware.Real player is one way for web sites to play videos or animation on it’s web pages, this allows peopleto watch can play stop etc, then video. Real player Is a multi-media including MP3, MPEG-4, QuickTime and Windows Media this means that it’s compatible with all of them and will work ineach one of them as well. Realplaer has a wide variety of plugins, some plug-ins are listed on theRealplayer accessories, it allows audio enhancement, skin creators, playback and radio tuner whenusing real player which give off more and allows people to do more on it as well.Flash player is a software for viewing multimedia products and streaming videos and audio on acomputer web browser, it can also support mobile devices. Flash runs SWF files that can be createdin flash itself by using a tool called authoring. This also has a pul-in device which will allow people touse and put on the web pages.Shockwave player is a multimedia platform used to add animation to web pages It allows AdobeDirector applications to be published on the a web site and viewed in a web browser on anycomputer which has the Shockwave plug-in installed. Shockwave movies are authored in the AdobeDirector While there is support for including Flash movies inside Shockwave files, authors oftenchoose the Shockwave Director combination over Flash because it offers more features and morepowerful tools. Features not replicated by Flash include a much faster rendering engine, includinghardware-accelerated 3D, and support for various network protocols, including Internet Relay Chat.