Unit 65

Task 1

Websites

For this task I had to look at some websites, and look at the different types of flash animation that is used on the websites, the animation, images, navigation what I could interact with, what on each page 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 the

top because it will be the first thing that the public will see when they go on this website to check it out or to find their favourite TV show or wanting to know more about it. They have it has moving images so people can look at them as they move and the time it take between each image is quite but fast.

The buttons on this web site change colour when the mouse hovers over the button, it goes from white to green or a different colour, it depends on what the web page is or is from, e.g. on the Supernatural page the rollover buttons go from green to white showing that the mouse is hover over it, also it’s not just rollover button text that change but also the some images at the bottom of the

page where it goes from the image to a white flash which is showing that the image has been selected 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 picture which shows three pictures and it says Photos on the top of it, and then when the mouse goes of that 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 skip etc. which makes it interactive, there is a video which loads up as soon as the web page this is also interactive as you can stop it or play it again once it has finished, the web site is promoting all of the TV series that are on this channel, the way that they promote them is by showing loads of images of that show and giving the show it’s on web page which tell you all about the show and the character that are in the show, the entertainment on this web site are video clip and trailers also it allows people 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 the website is promoting. When you like on a link of a TV show e.g. if I clicked on the Supernatural link it will take me to that page and give me all the information on that show, like the main characters of the show, the different season and episode that the show has information of it on a whole as well as the time and date it on as well, giving this information out to the fans means they know when it will be on also people who are not fans of the show can have a look at this website to see if there anything that they may like will be on or to try something new then they can go on this website and have a look around then check out the information and find out when it will be on and or to see what 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 people can watch clips, trailer of the show that they are looking at or even watch full episodes from that show and sometimes there are behind the scene video in which fan can watch if they want to see how the show is done, as of entertainment it just have video but some pages have more on them than 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 the different 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 the content on the pdf.

After I looked at the Cw website I then went on to checking out another website which is called Terra 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 to

people by showing them kinder what it about as soon as they come on to the website, without any videos or anything because the image and the background say a bit about it. There’s not really a banner on this website as there is an navigation animation which people click on enter and this bit will change in to a jungle in which people can scroll across it and find new stuff and information on the TV show, there is an video on the left on this animation which people can click on and watch it this 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 is

on this website, even though the only information on the website is about Terra Nova and the different 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 to scroll across and then click on other pages on the website. But in order to get to that on the main page it say click enter Terra Nova and then once that I clicked it flashes white and then you have a different 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 has more to do on it other than watching videos, this one lets you explore deeper into the show and what 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 hypertext mark-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 the

other character, since the character is standing not moving is can be displayed in this scene with using only one drawing, on a cel while the other would be multiple drawings 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 which was a short film, but every frame which was on that film was all hand drawn and I mean everything, characters, backgrounds, items, objects etc. was all done drawn on a single sheet of paper, so he took photos of them and redrawn them until he had all the frames he wanted to create his short film. But the animation was a bit jittery as the different frames were slightly different one form the other which gave it that jitterey looto it, but later the pre- cel animation was later improved by using

different techniques like the slash and tear system which was invented by Raul Barre, the background and the animated obects would be drawn on speared papers. A frame was made by removing all of the blanks parts of the paper, the objects were drawn before being placed on top of the background and then photo’d, the Cel animation processes was invented by Earl Hurd and John Bray in 1925.

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 by

simulating motion between the pages that are being flipped. Flip book designed more for children so they can enjoy reading or flipping through the pages and even they will be able to create their own flip book. But it’s not just for children flip books can be enjoyed by teenagers and adults as well. It not just hand drawn images that can have this motion on a flip book but photos can also be used which would have to 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 ordinary books or magazine and the person who has the book or magazine will be able to flip through the pages as the drawing are usually on the bottom corner of the book or magazine which allows people to flick through them and give the motion of it moving. Now a day flip book are not only in books or magazines but there is a software which allows people to create flip books on the computer which them will look more like a cartoon. But it’s the same rule where they would have to draw an image 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 John Barnes 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 images rather than a Phenakistoscope which was images in a circular thing which moved and it would make it look like the image was moving.

John Barnes Linnett was a lithograph printer, Lithograph is a method for printing usein stone or a metal plate with smooth surface this was invented in 1796 by Alois Senefelder. But Pierre-Hubert Desvignes was credited with being the inventor of the flip book. Linnett was the first to patent the invention in 1868 under the name Kineograph, but Linnett of penumonia , which later his wife had sold the patent for the Kineograph to an American.

gif,

A gif (Graphic Information File Format) is a type of digital image. The image that change or moves. Animated Gif can be thing such as a web banners ads, in some places a full motion video file and others. An animated Gif takes up about 8-bite palette, an image with this mean only having 256 colours available for that image. This means most Gif images 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 than one 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 together which then switches images to give the impression that the image is moving

Websites use animated gift to attract the customers eye, they would have something moving to do the with what they are sell, and sometimes people will be able to remember the 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 gift which websites would use if they e.g. they might use a Sonic animated gift if a new Sonic game came out or if it’s anniversary of Sonic.

DHTML

DHTML is not one which is used most by people compared to software such as shockwave/flash for animation, as flash is more easier to use to create animation but DHTML has been recognised by people and have been used in the past. DHTML stand for Dynamic Hypertext Markup Language and it can help with creating small animation and also dynamic menu on websites, to use it and to get good results from using DHTML then you must use it a lot as the more you try the better you will be at it and you will be able to create animation for websites and dynamic menu for them as well. DHTML is made up of HTML, CSS and Java Script which used together in DHTML which will allow people to create animation and other stuff for webpages. DHTML allows different scripting to change variables on websites definition language which then turns which will affect the look and the function of the HTML page content after the webpage has been fully loaded and also in the viewing process. DHMTL allow website creators to add effect to the web site or web page that they are creating, most of these are difficult to do. By the creator of a website using DHTML scripting language is changing the DOM and the style. For example the DHTML will allow creator to animate text and images that are on the web page in their document, allow the creator to independently move the different elements from any starting point to any ending point that they want, this is by creating their own path or using one which is already created for them as the move the elements. It will also allow the creator to include rollover buttons or drop down menus and there is many more that it will allow for it to do.

There are four main features to DHTML when it comes to using this to create animation stuff for websites. Changing the tags and properties, this one is the most used out of the them as it allows the creators to change the qualities of an HTML tag which is depending 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 they are most likely to say or they expect. Objects, images and text moving around the web page, this allows people to play games interactive games with other readers or animate portions of their screen. Dynamic fonts and date binding. People who are using DHTML on a Windows 95 or Windows 98 will not get a smooth animation that they had hoped for. It would be slow and bumpy ride for the creator, the creator will not be able to sort it out even if they increase the speed it will still be bumpy and slow, this show that using or running DTHML is not compatible for ever cross-platform

Task 3 Investigate Animation Techniques such as, the optical illusion of motion (persistence of vision); 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 all of the photo with different movement on them they then put them on to the computer and put all of the photos of the stop motion together and then put sound and music on to the film and then it will look like a normal film but it will be clay. Aardman did some claymation which includes Angry Kid and Wallace and Gromit which is their most famous one that they have created. On Claymation or stop motion animation they build the full set on a massive table and create the character that are going to be in the animation and then place then on the set in the places that they need to be in with a camera in front of the set and character and then they take a picture of that, that will be the first frame of the animation and then they will move the character a little and do the same again and repeat this until the animation is done and ready for editing

Also animation can be done online using a computers or a software which is on the computer which helps it to be the best animation. Computer animation can be done in 2D or 3D but if it’s going up on the internet then it’s best that the animation is 2D as it will play a lot better than 3D animation would on the computer. Animation which is created for the internet are mostly created in Flash, this allows people to create animation for websites. In flash it allows people to use different tools in order to help them with creating the animation, such as onion skins, which will allow you to see the last place where you put an object and then move it across or up if it’s meant to ani8amte it helps people 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 they could change to 12 frames per second as that the most common one for the best speed of animation. The higher the frame rates the faster the animation will go and the more horrible it will look, and the same with less frames rates but it will go really slow when it’s playing. Also tweening is another thing which is used in flash, tweening will allow the animation to move, using classic tween which is more for a straight line, motion tween is for creating the animation path yourself frame by frame or doing it key frame at a time.

Task 4

Raster images

A raster image is an image which is made up of tiny little pixel coming together to create an image sometimes at a certain size which mean you zoom into a raster image then you will be able to see the pixels on that image which would mean the resolution on the image is low. As a bitmap the image is sorted on to the computer basically saving it on the computer

This show image of what a raster image would look like if you were to zoom in or expand the image which you would be able to see the pixel on the image, this is because the image resolution on the image is low so by zooming on image would so the pixel, this is because these images are not meant to be zoomed in on or to make them larger they are meant to be small that why the resolution on them are low

Also 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 still clear 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 will allow you to zoom in or expand the image as much as they want and it will always reform itself back 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 see

that the image slowly goes for good to bad, then end up all pixelated.

Lossless

Lossless is a better compression type then lossy. It does not lose any information on the image at all not matter how small or big you make it will always go back into its original form. Lossless can 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.

Compression

Compression can be from lossy and lossless which one of them loss the information when re sized or messed around with and the other one where date on the image will not be lost at all when resizing and messed around with. With compression the file can be resized and changed if this was for a game it would make it run faster on the internet with optimising the game. The best image quality at a given bit-rate is the main compression. Compression is the reduction in the size of the date in order to save the date. Compression can be performed on just the date content 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 the images it can resize the image to anything. Graphics image file are usually designed to compress information as much as it can, with the image it can be ether a lossy or a lossless image which mean one will lose some information on the date when resizing it back to its normal size.

file size

Files sizes on games are much bigger than stuff on computer such and an image. They store the memory of the game on the disc holds the game on it. Depending on the amount of information that the game has on the disc which the console reads and players can play the game that they have bought. Also when players get to a point in the game they can save it to the hard drive it self this is in the console itself. Not that most games are on a blu ray disc which can hold up a lot of memory on it, game designers can do more with their game games such long gameplay, extra stuff, better graphics and better cut scene graphics. But before the blu ray disc and the built in hard drive that now are now in game consoles, game had smaller memory on the discs and also with the old consoles people had to buy memory cards which they would save all of their save on 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 people wouldn’t want to sit at their computer for that is why the compressed them down so they load up a lot quicker on the webpage so it will load up a lot quicker on the websites and then people won’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 take time for the webpage to load up as it would have to get the animated gif ready to animate as soon as the web page loads up

Task 5

Software 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 Web graphics 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 graphics software.

Real player is one way for web sites to play videos or animation on it’s web pages, this allows people to 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 in each one of them as well. Realplaer has a wide variety of plugins, some plug-ins are listed on the Realplayer accessories, it allows audio enhancement, skin creators, playback and radio tuner when using 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 a computer web browser, it can also support mobile devices. Flash runs SWF files that can be created in flash itself by using a tool called authoring. This also has a pul-in device which will allow people to use and put on the web pages.

Shockwave player is a multimedia platform used to add animation to web pages It allows Adobe Director applications to be published on the a web site and viewed in a web browser on any computer which has the Shockwave plug-in installed. Shockwave movies are authored in the Adobe Director While there is support for including Flash movies inside Shockwave files, authors often choose the Shockwave Director combination over Flash because it offers more features and more powerful tools. Features not replicated by Flash include a much faster rendering engine, including hardware-accelerated 3D, and support for various network protocols, including Internet Relay Chat.