Task 1


Published on

  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Task 1

  1. 1. Tre WallaceUnit 65 – assignment 1Uses and principles of web animationTask 1 - Investigate the uses of Web animationBanner ads Banner ads areused to promote items and boost sales. A banner ad is a form of advertisement on the World WideWeb, usually used on the website that the product is from. Banner ads normally contain a slightamount of information to let you know the little but main objectives of the product, a banner adnormally consist of pictures of t the product. As you can see in the banner I have chosen fromwww.maximuscle.co.uk there is an image of the results of the product which may increase thechance of promotion working. A banner ad is also used as a link to go to that page. A banner ad isusually designed to fit in with the page as it won’t stand out as it goes with the theme of thewebsite. The size of a banner ads will normally/always make you notice it is there as they are mostlyused at the top of a website and can also animate as the images/advertisement may change.Animated interface elements Ananimated interface is an animation that would change as you go over it such as a rollover button.The image above has a navigation bar made up of rollover buttons. The rollover buttons on thisnavigation bar change to a darker shade of the colour used to show which button you are on and tostand out. An animated interface element much like a banner ad takes you to the page that is eithernamed of related to the image text that is the interface.
  2. 2. Tre WallaceLinear and interactive animations A linear animation is ananimation that is consistent until the animation has either finished. This image shows a linear banneranimation as the banner will change about every 7 seconds to promote different products on thesame banner. The banner is also interactive an each promotion that comes is the link to thatproduct.The animationis also interactive as it has a bar at the top which tells you which page of the bannerthat you are on and lets you click on the boxes to go to the page that you want to go on. This couldalso be linked to an animated interface element.Promotion Apromotion is a form of advertising such as a banner. A banner can only be a promotion only ifshowing/promoting a product that the website sells. A promotion is normally made up of the bestfacts about the product, images of the product and the deal that promotion is promoting. As you cansee in the image above it has the images of the product and a deal. The images are for the products
  3. 3. Tre Wallacethat are on the deal promoted. The promotion being on a banner means that people will see it justas they go onto the site as it will be on the top of the page.Instruction An instruction is a command forexample it is a programme, book or list you have to follow to learn how to do something correctly.This image has an example of an instruction to use flash. The first thing it says is what you have tofollow which is create a new folder and then you to press enter to continue so it’s telling you what todo to help you learn more. after clicking enter tocontinue it then came up with the next set of instructions to follow to carry on learning how to useflash. Pressing enter again will carry onto the next set of instructions of telling you what to do. Andthis will carry on till you learn.Instruction can also come in the form of a book.
  4. 4. Tre WallaceInformationInformation is found on near enough everything such as packaging, websites and books. The site Wikipedia is aninformation site as if you type in something you need to know the definition off it provides you theinformation. For example I have searched what the definition of instruction to provide informationon my work. The site has a list of information choices and I chose instruction set and it came up withparagraphs of what it means and what it is. Other sites thatstore information are clothing shops as they will have information on the clothes website and detailsto the store. As you can see on the picture it has a privacy policy statement which is full ofinformation of returning and ordering. It also provides the email address and number.
  5. 5. Tre WallaceEntertainment Entertainmentcan be found on many websites such as the Simpsons website. The Simpsonswebsitehas games thatyou can play online for entertainment. You can also interact with the loading pages as they havelittle games that you can play. Simpsons also contains episode of the programme to watch so it’smainly an entertainment website. Anothersite that shows entertainment is YouTube as you can watch videos of your choice that may entertainyou. YouTube also contains educational videos and other categories.
  6. 6. Tre WallaceTask 2 - Investigate The development of animationAnimated cartoons;Tv animation – A rapid display of a sequence of images of 2-D or 3-D artwork or models positioned inorder to create an illusion of movement. Most TV animations are cartoons. An animated cartoon is ashort, hand-drawn (or made with computers to look similar tosomething hand-drawn) film for the television.Heres a list of popular TV animation shows:Family guyAmerican dadThe SimpsonsFuturamaTMNTSuper Mario bro’s etc...Nicktoons are animated television series produced by and aired onNickelodeon. Until 1991, the animated series that aired onNickelodeon were largely imported from foreign countries, and someoriginal animated specials were also featured on the channel up to that point as well. Nicktoonscontinue to make up a substantial portion of Nickelodeons line-up, with roughly 6–7 hours airing onweekdays and around nine hours on weekends including a five-hour weekend morning block.Animation process, graphic information file format (gif);(Graphics Interchange Format) GIFs are image files that are compressed to reduce transfer time.A gifis a form of computer images that move as an animation, because it consists of frames, like a moviewith no sound. You normally find gifs on websites that are cartoon related or are trying to promote aproduct through entertainment (mainly applies to children)Dynamic hypertext mark-up language (dHTML);DHTML (Dynamic Hypertext Mark-up Language) is a small programme for making quick animationsand dynamic menu’s on web pages. It isn’t as popular as flash/shockwave for ait’s work but haslargely been recognised for its work in the past. A Dhtml code is made up of html, CSS andJavaScript. Dhtml has a limit of speed that it can go but should still work smoothly. It also works wellon platforms if it is carrying out simple animation such as transitional effects, drop down menus,wipe effects and other animations with a small duration. Dhtml is also an easy way of making a siteinteractive without all the coding and testing that comes with others.Extensible hypertext mark-up language (XHTML);XHTML (Extensible Hypertext Mark-up Language) is the next step in the evolution of the Internet.The XHTML 1.0 is the first document type in the XHTML family. The evolution of HTML hasessentially stopped. Instead, HTML is being replaced by a new language, called XHTML. XHTML is inmany ways similar to HTML, but is designed to work with the new extensible Mark-up Language, orXML, that will soon serve as the core language for designing all sorts of new Web applications, inwhich XHTML will be only one of many "languages." But, XHTML is designed to work with theseother language, so that different documents, in different languages, can be easily mixed together
  7. 7. Tre WallaceXHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and stricterversion of HTML 4.01. If you already know HTML then you need to give little attention to learn thislatest variant of HTML.Java appletsAn applet is a small Internet-based program written in Java, a programming language for the Web,which can be downloaded by any computer. The applet is also able to run in HTML. The applet isusually embedded in an HTML page on a Web site and can be executed from within a browser.Unlike DHTML java applets are quite cross platform compatible, this is because the interpreters arenot available on all platforms as they don’t always believe the code is correct. Java applets aremainly used to provide interactive features to web applications that cannot be provided by HTML>what they all have in common though is that they create motion on screen by drawing successiveframes at a high speed of around 10 – 20 times per second.Task 3 - Investigate Animation TechniquesOptical illusion (persistence of vision) Persistence of vision is where an image is kept in the eye fora short while, creating an illusion of continuous motion in film and video. Our eye has ability topersist the detail of the object for a time equal to 1/16th seconds after the removal of the object.Stop motion
  8. 8. Tre Wallace Stop animation is a cinematicprocess/technique that makers still objects look as there moving. This technique is mostly used inClaymation and puppet based animation. The objects are films by breaking the figure intoincrements and taking one frame per increment of the figure moving.Computer generation Frame rates are the number of frames orimages that are projected or displayed per second. The frame rate says how many frames in a movieare displayed every second a movie is played. The rate of frames is 24, 25 and 30 frames per second.This makes the animation look real as the human eye can only see 10 – 12 frames per second.onion skinning, tweeningClaymation
  9. 9. Tre Wallace Claymation is a form animationused in frame but with images of clay figures moved on each image to make a motion picture. Alsolike stop animation it is a video made through frames and images. When played back at a frame rategreater than 10–12 frames per second, a fairly convincing illusion of continuous motion is achieved.Task 4 - Investigate Digital Animation,Raster imagesRaster images also known as a bitmap is a way to define digital images. The raster image has a bigvariety of formats including the well-known files .gif, .jpg, .bmp. A series of bits of informationtranslated into a pixel on a screen is represented by a raster image. The pixels represented by araster image are the colour that is used to finish an image. The pixels created from a raster imageare assigned a specific value to analyse its colour. The raster image system uses the (RGB) red, greenand blue colour system. An RGB has certain values to make a colour such as 0, 0, 0 would be thevalue of the colour black. The values in this system go all the way up to the value of 256 for eachindividual colour. When a raster image is viewed the image would smooth out for the image to beclear for the viewer to see. When the image is blown up the image will blur and become very unclearto see at a large size. Depending on the resolution of the image, some raster images can be enlargedto a very large size. The smaller the image resolution is thesmaller the file is. For this reason the people who work oncomputer graphics must find the balance between theresolution of an image and the images size.The image to the right will show what a raster image is asyou can see the image clearly and when the image isenlarged it then pixelates. There’s a circle of an enlarged bitof the image and when you look it you can see there is a bigdifference between the enlarged bit and the actual image.Vector imagesVector images are the same as object-orientated graphicsthat appeal to software and hardware that use geometrical formulas to define images. Another wayof defining graphical images is bit map, in which the image is made up of a pattern of dots. This ideais also sometimes called raster images. Vector images are a lot more flexible than bit map images
  10. 10. Tre Wallacebecause they can be resized and stretched. Images stored as vector look better on monitors with ahigh resolution, whereas bit-mapped images always look the same on any monitor with anyresolution. An advantage of vector images also is that they require less memory than bitmappedimages.Animation software and many printers use vector images, thefont used by vector images are called vector fonts.Most output devices are raster devices. This means that allobjects even vector objects must be changed into bit maps beforebeing output. The difference between vector graphics and rastergraphic is that vector graphics are not translated into bit mapsuntil the last possible moment, after all sizes and resolutions havebeen specified.The image to the right side of the page is an example of a vectorimage being stretched out 7x as a vector image. As you can seethe vector image doesn’t change as it’s stretched as it has a highresolution.CompressionLossy compressionLossy compression is like data compression, as if compressed, it will lose some amount of data. Thetechnology of lossy compression attempts to try get eliminate information that is just not needed inthe document. The procedure aims to minimize the amount of data this is held by the computer.Lossy compression is mostly used in multimedia data such as audio, video and still images. Mostvideo compression technologies such as MPEG use a lossy technique.The image to the right is an example of lossy compressionas you can see the first image and how it says originalimage to show that is the uncompressed image. The imagenext to it has been compressed which means it lessinformation so the image will not be as clear. The imagenext to that has been compressed a little more but still hasenough information it to say clear and detailed. The lastimage is compressed enough to ruin the image but iscompressed enough to get rid of some detail, if you lookclosely at the images you will notice the last image doesn’thave the shading and lines in the bread. This is because ithas been compressed to a size that is not clear and doesn’thold enough information to show this.Lossless compressionLossless compression is data compression but where no information is officially lost which givesbetter compression rates. For most types of data, lossless compression techniques can reduce thespace needed by only 50%. For greater compression use lossy compression but note only certaintypes of data can use it. You must use a lossless compression technique when compressing data and
  11. 11. Tre Wallaceprograms. So it is also used as acomponent within lossy compression.Lossless compression is used in manyapplications such as being used in a ZIPfile format.The image to the right is an example oflossless compression.You may notice each image ispractically the same even though oneof them has been compressed from theoriginal.The lossless technique makes theimages stay the same and keep thesame amount of information as theimage is compressed has less bytes.As you may notice though is that eachimage is in a different file as each filehold up to a certain amount of bytes.ScalabilityScalability is the ability to improve your computer to be better/faster. You scale a system by addingextra hardware or by upgrading the existing hardware without changing much of the applications onthe system.There are two key primary ways of scaling web applications: “Vertical Scalability” – Adding resources within the same logical unit to increase capacity; An example of this would be to add CPUs to an existing server or expanding storage by adding hard drive on an existing RAID/SAN storage. “Horizontal Scalability” – Adding multiple logical units of resources and making them work as a single unit. Most clustering solutions, distributed file systems; load-balancers help you with horizontal scalability.Scalability can be further sub-classified based on the “scalability factor”.If the scalability factor stays constant as you scale. This is called “linear scalability“.But chances are that some components may not scale as well as others. A scalability factor below 1.0is called “sub-linear scalability”. Though rare, it’s possible to get better performance (scalability factor) just by adding morecomponents (I/O across multiple disk spindles in a RAID gets better with more spindles). This iscalled “supra-linear scalability“.If the application is not designed for scalability, it’s possible that things can actually get worse as itscales. This is called “negative scalability“.
  12. 12. Tre WallaceFile formatsBMP: a bmp document, also known as a bitmap is a type of image file format that is used forcomputer and digital graphics. It’s an image of lots of tiny bits and pieces that fit together to makeone image.PNG: a PNG document, also known as a portable network graphic is a bitmapped image format thatemploys lossless data compression. A PNG supports palette based images and RGB(A).PNG was also designed for transferring images from the internet.GIF: a gif document, also known as a graphics interchange format is a bitmapped image, introducedCompuServe that was spread and now is used on the World Wide Web due to its wide support andportability.TIFF: a tiff document, originally known as tagged image file format is a file format for storing imagesof mainly graphic images, publishing industry, and both amateur and professional photographers.JPG: a jpg document is for photo images in very small files such as images for a website or an email.The jpg document is mainly used in digital camera memory cardsPSD: a PSD document is Photoshop’s file format. PSD supports all the available image modes such asbitmap, RGB, grey scale, duotone and others. Photoshop can convert PSD files into other formatssuch as bmp, PNG, jpg and tiff.Task 5 - Investigate Web Animation Software and web player pluginsFlashAdobe Flash (formerly Macromedia Flash) is a multimedia platform used to add animation, video,and interactivity to web pagesMost websites today use flash. If you see a moving advertisement or a game that can be playeddirectly in your browser, then its flash.Flash can be a website, a video, a game, or any of the above for broadcast.DirectorAdobe Director (formerly Macromedia Director) is a multimedia application authoring platformcreated by Macromedia—now part of Adobe Systems. It allows users to build applications built on amovie metaphor, with the user as the "director" of the movie. Originally designed for creatinganimation sequences, the addition of a powerful scripting language called Lingo made it a popularchoice for creating CD-ROMs and standalone kiosks and web content using Adobe Shockwave.Adobe Director supports both 2D and 3D multimedia projects.Flash PlayerThe Adobe Flash Player is software for viewing multimedia, Rich Internet Applications (RIA)’s, andstreaming video and audio, on a computer web browser or on supported mobile devices.Flash playeris one of the most important components a computer has to have, if you go onto the internet. Manygames, YouTube, interactive forms and many other types of web applications use flash player to run.
  13. 13. Tre WallaceShockwaveShockwave, developed by Macromedia, is a family of multimedia players. Web users with Windowsand Mac platforms can download the Shockwave players from the Macromedia site and use it todisplay and hear Shockwave files. Shockwave is especially popular for interactive games. However,Macromedia has identified over 2,000 sites that offer Shockwave files, including sites for GeneralMotors, Nissan, Kodak, Microsoft, Intel and Apple. To create Shockwave files, you use MacromediaDirector and several related programs.