• Like
Unit 65 ass 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Unit 65 ass 1

  • 3,301 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,301
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Pooyan Amiri Unit 65 Assignment 1Task 1: Investigate the uses of web animationBanner Ads: Banner advertisements are the most commonly used web animations outthere, they are used on all sorts of different webpages and their one and only use is topromote the product of the advertiser. If you are a regular internet user, then you havemost probably seen your fair share of banner ads. They are usually flash based animationsthat are present on websites as a way of advertisement. If you click on these animations,you will be taken to the advertiser’s website.Here are a couple of example banner ads that I have taken a screenshot of:You can look at a variety of different banner ads on this webpage:http://www.heybannerbanner.com/flash.htmlAnimated Interface Elements: Animated interface elements are interactive elements withina flash website where you are actually interacting with the website and making choiceswithin that page, and the webpage changes accordingly to your choices. This is much more 1
  • 2. Pooyan Amirifascinating and grabs the reader’s attention rather than them just reading a plain text.Animated interface elements are used widely to customise a product, object etc. in order toachieve what you prefer.Here are a couple of examples for animated interface elements: 2
  • 3. Pooyan AmiriA website that lets you create and customise a face: (http://www.pimptheface.com/) 3
  • 4. Pooyan AmiriConverse website that lets you customise your very own preferred converse:(http://www.converse.com/#/products/shoes/converseOne/scratch/all) 4
  • 5. Pooyan AmiriLinear and Interactive animation: Linear and Interactive animations are basically the twodifferent types of animations found online. Linear is the more basic one and does not haveany interactive abilities within the flash animation, so therefore it is a linear flash animationthat is on loop. Interactive animations on the other hand include interactive abilities andchanges depending on either if you move your mouse over the animation or if you click onany designated location(s) within the animation.Here are a couple of examples of Linear Animation:Linear Butterfly animation that is on loop:http://www.amarasoftware.com/flash-animations/butterfly-theme-animation.htm 5
  • 6. Pooyan AmiriLinear Falling coins animation that is on loop:http://www.amarasoftware.com/flash-animations/falling-coins-animation.htmAnd here are a couple of examples for Interactive animations:Interactive animation of boxes that move and change colour by the movement of themouse:http://www.traffikcone.com/math/tcd04c.swf 6
  • 7. Pooyan AmiriAfter moving the mouse over the animation:Interactive Website that allows you to draw using its own unique brushes:http://www.revoid.be/codebrush/ 7
  • 8. Pooyan AmiriPromotion: Flash animations are widely used by companies to advertise and promote theirproduct. Their promotional flash animations could range from animations that are similar toTV commercials to interactive mini games that grab the attention of the viewer. Apromotional animation is a great way of introducing a new product because a visualrepresentation of a product or an idea can help explain and showcase how the idea/productworks before actually making the product.Here are some examples for promotional animations:Promotional Lexus website that lets you customise a Lexus car:http://www.lexus.eu/car-models/gs/gs-250/index.tmex#/CarConfigurator 8
  • 9. Pooyan AmiriPromotional Reebok website that has a flash based search for products:http://www.reebok.com/en-US/#!/ 9
  • 10. Pooyan Amiri 10
  • 11. Pooyan AmiriInstructional (Educational): Instructional animations are used to show the viewer eitherhow to do something or teach them something. Flash animations have lately become asignificant part of the learning experience for the viewer because with flash, demonstrationsand simulations are easily shown and they are interactive so it is a highly reliable method oflearning.Here are a couple of examples for instructional animations:Instructional Website that covers some of the areas of using flash interactively:http://vle.camsfc.ac.uk/mod/resource/view.php?id=19464 11
  • 12. Pooyan AmiriInstructional Website that shows the rock forming process on earth:http://www.classzone.com/books/earth_science/terc/content/investigations/es0602/es0602page02.cfm?chapter_no=investigation 12
  • 13. Pooyan AmiriEntertainment: Flash animations are commonly used for entertainment online, the types ofentertainment for flash could range anywhere from flash games that you can play towebsites that are full of cartoons, mini-games and etc.Flash games often cover areas in the likesof education, promotion as well. The core advantage of flash games is that they can be easily placedonline for children and adults to play.Here a couple examples for when flash is used for entertainment:Interactive website that lets you play flash games:http://edf.resn.co.nz/ 13
  • 14. Pooyan AmiriThe Simpsons website is a great example of a website using sketches, music, mini-games,bios and etc. for entertainment purposes:http://www.thesimpsons.com/ 14
  • 15. Pooyan Amiri 15
  • 16. Pooyan AmiriTask 2: Investigate the development of animationsHand drawn (Cel animation): Cel animation is the type of animation that is used to makefilms, TV shows, games and etc. look hand drawn. Hand drawn animations were one of thefirst types of animation. However, throughout the years with the introduction of computertechnology, this type of animation is now created by using computer animation to give ahand drawn look to animations. Programmes such as Flash are used to make this type ofanimation due to this method being easier to produce and much less costly.Example:Hand drawn (Cel animation): Cel animation is the type of animation that is used to makefilms, TV shows, games and etc. look hand drawn. Hand drawn animations were one of thefirst types of animation. However, throughout the years as the introduction of computertechnology began, computer software(s) such as Flash were used to give a hand drawn lookto animations.Animation using DHTML:(Dynamic Hypertext Markup Language)is used to create small animations and dynamicmenus on web pages.The DHTML code is made up of HTML, CSS and Java Script. DHTML isnot very cross-platform compatible, even though not many people would use such old 16
  • 17. Pooyan Amiriplatforms these days. However, DHTML animation well work fairly well on all platforms if itis carrying out simple animation such as transitional effects, drop down menus, wipe effectsand other animations with a small duration. Animation using DHTML is an easy way ofmaking a site interactive for the user without the need of a lot of code and testing.Animation using XHTML(Extensible Hypertext Markup Language) is a spinoff of HTML used for creating Web pages.It is based on the HTML 4.0 syntax, but has been modified to follow the guidelines of XML,the Extensible Markup Language. Therefore, XHTML 1.0 is sometimes referred to as HTML5.0. Because XHTML is "extensible," Web developers can create their own objects and tagsfor each Web page they build. This gives the developers more control over the appearanceand organization of their Web pages. The only requirement is that the custom tags andattributes are defined in a document type definition (DTD), that is referenced by the XHTMLpage. XHTML pages must also conform to a more strict syntax than regular HTML pages.While Web browsers are rather lenient and forgiving of HTML syntax, XHTML pages musthave perfect syntax. This means no missing quotes or incorrect capitalization in the markuplanguage. While the strict syntax requires more meticulous Web page creation, it alsoensures Web pages will appear more uniform across different browser platforms.Java AppletsJava applets are small programs used on web pages to help operate animation. UnlikeDHTML java applets are quite cross platform compatible. This is because Java interpretersare not available on all platforms and don’t always agree about what they consider to beproper code. Java applets primarily are used to provide interactive features to webapplications that cannot be provided by HTML, many forms of animation are possible. Whatthey all have in common is that they create motion on screen by drawing successive framesat a high speed of around 10 – 20 times per second.Task 3: Investigate animation techniques 17
  • 18. Pooyan AmiriPersistence of vision:A theory which states that when our brain is shown a static image, thehuman eye retains that image seen for approximately a fraction of a second, and that imagepersists on our retina until another image is shown. This theory is a frequently acceptedthought, yet a heavily controversial topic. When our brain is shown static images with abrief period of time between them, the static image shown persists on our retina for about0.1 seconds. In the film and video industry persistence of vision is known as the explanationfor our capability of perceiving a sequence of images for an illusion of movement in a video.Stop Motion: is one of several names used to describe animation that is created by movingmodels, puppets or any three dimensional objects frame by frame in front of a camera.Other terms that are sometimes used include Stop Motion, Model or Puppet Animation,Table Top or 3D, although nowadays 3D usually applies to Computer Animation. A stopframe animation is a technique to make a physically manipulated object appear to move byitself. This means that we will need to move the object of choice as mall amount betweenindividual photographs and hopefully when all of the photographs are put to gather, it willcreate the illusion of movement.Task 4: Investigate digital animations 18
  • 19. Pooyan AmiriRaster Images: Raster Images often known as Bitmap images are made up of pixels in a grid and each pixel has its own specific value that determines its colour, raster images use the red, green, blue (RGB) colour system. Raster images are usually created or captured images by a person on their own and are digital in nature. When a raster image is viewed it is usually smooth because it’s in its own size but due toraster images being made up of pixels, when you zoom in they lose quality and the pixels that theimage has been made up of can actually be seen.Vector Images: Vector images distinct from raster images, do not use pixels to form an image. Instead vector images are made up of paths that have their own specific start and end points defined. Points, lines, curves and polygons are used in vector images to create paths. These paths could be used to create anything from a simple logo to very complicated and complex images (e.g. the image on the left).Points, generally a point can mark a position in space. In graphic a point can be described as a dot ora visible mark. Tiny points with different sizes create shades of gray.Lines – the graphics images are the combinations of lines and a line is a combination of an infiniteseries of points. In the geometry a line is described with its length but Graphically, lines can bedescribe in many weights like the thickness and texture. Lines can be created by pen, pencil, mouseor digital code. Lines can be curved, straight, an arc of a circle, continuous or broken. In the otherword a line is a combination of an infinite series of points. In the geometry a line is described with itslength but Graphically, lines can be describe in many weights like the thickness and texture. Lines 19
  • 20. Pooyan Amirican be created by pen, pencil, mouse or digital code.Different file formats:File extensions- Animations are designed, created and finally stored by using many different filetypes and extensions. A few common Animation file types with their extensions are:File File type DescriptionExtension.fla Macromedia Flash The file format used in Macromedia Flash for authoring in. It is one of FLA Project File the most popular and advanced authoring environments for creating Format interactive websites, animations and digital experiences..swf SWF An Adobe Flash file format used for multimedia, vector graphics and Action Script. It originates from FutureWave Software, and then transferred to Macromedia. SWF files contain animations or applets of varying degrees of interactivity and function..gif Graphics GIF is a popular image type used across the internet for its capability Interchange of reducing file sizes vastly and also its capability of having animation Format effects. GIF is an 8 bit palette with 256 colours at max. GIF is the most chosen format for animation effects. 20
  • 21. Pooyan AmiriTask 5: Investigate web animation software and web player plugins:Flash: The Adobe Flash Player is made by Macromedia, it isessential to run any sort of .swf files in a web browser. It isbasically a flash player that plays the files that are createdby flash. The Adobe flash player is free of charge and is across-platform browser plug-in.QuickTime: QuickTime can play a different variety offormats such as; digital video, media clips, animation, text,music and etc. It is available for Mac and Windowsoperating systems. Quick time is produced and distributedby Apple. 21