SlideShare a Scribd company logo
1 of 5
Ben Henderson




Investigate the uses of web animation unit 65

Banner ads
Banner adverts are animated gifs that are used to promote and advertise a product. They are used
to attract the viewers’ attention by moving, changing colour, changing images, and making sound so
the viewer of the site will see and be drawn to the banner advert and click on it to learn more about
                                                  the product/service. They are located on most
                                                  websites, usually at the sides or along the top of
                                                  the web page. They are located on most websites
                                                  and especially popular websites such as social
                                                  networking sites, eBay, and amazonetc.

                                                  An example of a banner ad is on the image it is
                                                  located on the left side of the page and has moving
                                                  text and images.

                                                  An advantage of a banner advert is that it is an easy
way to grab a viewers attenetion. Although a disadvantage is that viewers of websites usually
associate banner ads with unfriendly, virusous sites that could a harm their computer.




                  Animated interface elements
                  Animated interface elements are animated websites or videos thatare completely
                  animated and are usually created in a program such as flash. Animated interface
                  elementsoften uselinear animation and interactive animation or
                  both.www.thesimpsons.comis an example of a completely animated website
                  created almost entirely in flash.

                              An advantage of animated interface elements is that they grab the
                              audience’s attention, and are entertaining to watch more than a
                              simple web page. A disadvantage is that they can take a considerable
                              amount of time to load.
Ben Henderson


Linear and interactive animations
Linear animation is where the animation takes you from start to finish without stopping like a
regular film, whereas an interactive animation is in stages and the viewer can choose what can
happen. One of the best examples of this iswww.thesimpsons.com. This is because when the
                                    website has loaded up it goes into a linear animation showing a
                                    short little cartoon to set the theme of the website, which in this
                                    case is a careers day at a school. Then it uses interactive
                                    animation, in the form of buttons that can direct the web user to
                                    various parts of the website that they want. When the user clicks
                                      a button it goes into a different linear animation, transporting
                                      the user to a different page by showing them via the animation
                                      moving into a different room at the school.

                                    An advantage of linear animation is that they can be
                                    entertaining to watch, but a disadvantage is that you can’t
                                    control it. An advantage of interactive animation is that you
can control what happens, but an disadvantage is that they tend to run for a long time, and stop
start.

Promotion
Web animations are also used to help promote, products or websites. They often placed on many
popular websites such as Facebook, twitter, amazon, etc.

Instruction
Instructional animations are used to help people learn, by showing them what to do and explaining
                                                 how to do it in the animation usually using
                                                 interactivity. An example here is how to use
                                                 Macromedia Flash professional 8. The animation
                                                 takes you through the software showing you what
                                                 buttons to press and what they do. It is interactive
                                                 because the animation actually allows you to click
                                                 the buttons and type sentences into the animation.




Information
Informational animations are used to portray information in a user friendly interactive style. This can
vary from formal information like what might be used on internet news shows, or informal
information like what size clothes are on a shopping website.
Ben Henderson


Entertainment
Web animations are usually used by companies or websites solely to attract the viewer’s attention.
But websites often use animations for the purpose of entertainment. Websites such as
www.thesimpsons.comare used to entertain the website viewer, raise awareness of the show, and
to sell merchandise.It is no a serious, formal website




Investigate the development of animation
Flick books
Flick books are hand drawn images on a page in a book. Each page is like a frame in animation
software. Each image is slightly altered and moved on every page to create the illusion of movement
the pages of the book are flicked through.

Animation using DHTML
Using DHTML isn’t as popular as using the likes of flash for animation but has been largely
recognised in the past. DHTML or Dynamic Hypertext Mark-up Language can help with the creation
of animations and dynamic menus on web pages. The DHTML code is made up of HTML, CSS and
Java Script. As versatile as it is in earlier platforms, users running Windows 95 or Windows 98 won't
get the smooth animation you hope they would. Even by trying to increase the speed, there is still a
limit on how fast you can allow your animation to go with DHTML and therefore how smooth it will
play. Therefore, it is not very cross-platform compatible. However, DHTML animation well work
fairly well on all platforms if it is carrying out simple animation such as transitional effects, drop
down menus, wipe effects and other animations with a small duration. Animation using DHTML is an
easy way of making a site interactive for the user without the need of a lot of code and testing.

Animation using XHTML
XHTML or Extensible Hypertext Mark-up Language.XHTML is a spinoff of the hypertext mark-up
language (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 Mark-up Language. Therefore, XHTML 1.0 is
sometimes referred to as HTML 5.0.
Because XHTML is "extensible," Web developers can create their own objects and tags for each Web
page they build. This gives the developers more control over the appearance and organization of
their Web pages. The only requirement is that the custom tags and attributes are defined in a
document type definition (DTD) that is referenced by the XHTML page.
Ben Henderson




Java Applets
Java applets are small programs used on web pages to help operate animation. Unlike DHTML java
applets are quite cross platform compatible. This is because Java interpreters are not available on all
platforms and don’t always agree about what they consider to be proper code. Java applets primarily
are used to provide interactive features to web applications that cannot be provided by HTML, they
create motion on screen by drawing successive frames at a high speed of around 10 – 20 times per
second.



Investigate Animation Techniques
The optical illusion of motion (persistence of vision)
Persistence of vision is where the eye can see an afterimage for a fraction of a second longer than
normal creating the illusion of movement, although if the frame rates (the rate in which frames are
played) is slower than 10-12 rates you would be able to see each image individually, which would
make the animation look jumpy and unprofessional.

Stop motion
Stop motion animation is where you create the illusion of motion, movement of an object by taking
a vast series of photographs. These are then usually transferred to a computer program and given a
frame rate of 10-12 frames per second (fps) although this can vary. At this speed, when the photos
are played one after another together creates the illusion of movement. If the frame rate is any
slower the animation would look unappealing and unprofessional, because it would look like the
animation is “jumping” from frame to frame.

Claymation
Clay animation or Claymation is a form of stop motion animation. Usually the character or the
background or both are made of clay. The clay character is sculpted then placed where it needs to
be. Then you take a photograph of the clay character, move it slightly, and take another picture etc.
until the animator gets the desired effect.



Investigate Digital Animation
Vector animation
Vector animation is a type of digital animation. These vector animations are created on a computer
program such as flash because this is a vector animation program. Vector animation has the
capability to have cleaner, smoother animations. This is because the images or frames are displayed
and can be resized using mathematical values, instead of stored pixel values, like raster (bitmap).
The files are a lot smaller as well because the animation program doesn’t have to save the colour of
every pixel unlike raster images.
Ben Henderson


Raster (bitmap) animation
Raster (Bitmap) animation is another type of digital animation.Rasteranimation formats stores pixel
data and has to save information about the colour of every pixel in the image. This can take up a lot
of memory so the file size is larger and can take a longer time to load. Also if you have to resize an
image or frame, the pixels stretch and the image becomes blurry.



Investigate Web Animation Software and web player
plugins
Flash and Director
Flash and Director both use layers and timelines to create animations. Also both programs are vector
based so animation can load quicker. They both use key frames and tweens to animate between the
key frames. Also they both can export files into a shockwave file, which can be embedded onto most
websites.

More Related Content

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 

Investigate the uses of web animation

  • 1. Ben Henderson Investigate the uses of web animation unit 65 Banner ads Banner adverts are animated gifs that are used to promote and advertise a product. They are used to attract the viewers’ attention by moving, changing colour, changing images, and making sound so the viewer of the site will see and be drawn to the banner advert and click on it to learn more about the product/service. They are located on most websites, usually at the sides or along the top of the web page. They are located on most websites and especially popular websites such as social networking sites, eBay, and amazonetc. An example of a banner ad is on the image it is located on the left side of the page and has moving text and images. An advantage of a banner advert is that it is an easy way to grab a viewers attenetion. Although a disadvantage is that viewers of websites usually associate banner ads with unfriendly, virusous sites that could a harm their computer. Animated interface elements Animated interface elements are animated websites or videos thatare completely animated and are usually created in a program such as flash. Animated interface elementsoften uselinear animation and interactive animation or both.www.thesimpsons.comis an example of a completely animated website created almost entirely in flash. An advantage of animated interface elements is that they grab the audience’s attention, and are entertaining to watch more than a simple web page. A disadvantage is that they can take a considerable amount of time to load.
  • 2. Ben Henderson Linear and interactive animations Linear animation is where the animation takes you from start to finish without stopping like a regular film, whereas an interactive animation is in stages and the viewer can choose what can happen. One of the best examples of this iswww.thesimpsons.com. This is because when the website has loaded up it goes into a linear animation showing a short little cartoon to set the theme of the website, which in this case is a careers day at a school. Then it uses interactive animation, in the form of buttons that can direct the web user to various parts of the website that they want. When the user clicks a button it goes into a different linear animation, transporting the user to a different page by showing them via the animation moving into a different room at the school. An advantage of linear animation is that they can be entertaining to watch, but a disadvantage is that you can’t control it. An advantage of interactive animation is that you can control what happens, but an disadvantage is that they tend to run for a long time, and stop start. Promotion Web animations are also used to help promote, products or websites. They often placed on many popular websites such as Facebook, twitter, amazon, etc. Instruction Instructional animations are used to help people learn, by showing them what to do and explaining how to do it in the animation usually using interactivity. An example here is how to use Macromedia Flash professional 8. The animation takes you through the software showing you what buttons to press and what they do. It is interactive because the animation actually allows you to click the buttons and type sentences into the animation. Information Informational animations are used to portray information in a user friendly interactive style. This can vary from formal information like what might be used on internet news shows, or informal information like what size clothes are on a shopping website.
  • 3. Ben Henderson Entertainment Web animations are usually used by companies or websites solely to attract the viewer’s attention. But websites often use animations for the purpose of entertainment. Websites such as www.thesimpsons.comare used to entertain the website viewer, raise awareness of the show, and to sell merchandise.It is no a serious, formal website Investigate the development of animation Flick books Flick books are hand drawn images on a page in a book. Each page is like a frame in animation software. Each image is slightly altered and moved on every page to create the illusion of movement the pages of the book are flicked through. Animation using DHTML Using DHTML isn’t as popular as using the likes of flash for animation but has been largely recognised in the past. DHTML or Dynamic Hypertext Mark-up Language can help with the creation of animations and dynamic menus on web pages. The DHTML code is made up of HTML, CSS and Java Script. As versatile as it is in earlier platforms, users running Windows 95 or Windows 98 won't get the smooth animation you hope they would. Even by trying to increase the speed, there is still a limit on how fast you can allow your animation to go with DHTML and therefore how smooth it will play. Therefore, it is not very cross-platform compatible. However, DHTML animation well work fairly well on all platforms if it is carrying out simple animation such as transitional effects, drop down menus, wipe effects and other animations with a small duration. Animation using DHTML is an easy way of making a site interactive for the user without the need of a lot of code and testing. Animation using XHTML XHTML or Extensible Hypertext Mark-up Language.XHTML is a spinoff of the hypertext mark-up language (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 Mark-up Language. Therefore, XHTML 1.0 is sometimes referred to as HTML 5.0. Because XHTML is "extensible," Web developers can create their own objects and tags for each Web page they build. This gives the developers more control over the appearance and organization of their Web pages. The only requirement is that the custom tags and attributes are defined in a document type definition (DTD) that is referenced by the XHTML page.
  • 4. Ben Henderson Java Applets Java applets are small programs used on web pages to help operate animation. Unlike DHTML java applets are quite cross platform compatible. This is because Java interpreters are not available on all platforms and don’t always agree about what they consider to be proper code. Java applets primarily are used to provide interactive features to web applications that cannot be provided by HTML, they create motion on screen by drawing successive frames at a high speed of around 10 – 20 times per second. Investigate Animation Techniques The optical illusion of motion (persistence of vision) Persistence of vision is where the eye can see an afterimage for a fraction of a second longer than normal creating the illusion of movement, although if the frame rates (the rate in which frames are played) is slower than 10-12 rates you would be able to see each image individually, which would make the animation look jumpy and unprofessional. Stop motion Stop motion animation is where you create the illusion of motion, movement of an object by taking a vast series of photographs. These are then usually transferred to a computer program and given a frame rate of 10-12 frames per second (fps) although this can vary. At this speed, when the photos are played one after another together creates the illusion of movement. If the frame rate is any slower the animation would look unappealing and unprofessional, because it would look like the animation is “jumping” from frame to frame. Claymation Clay animation or Claymation is a form of stop motion animation. Usually the character or the background or both are made of clay. The clay character is sculpted then placed where it needs to be. Then you take a photograph of the clay character, move it slightly, and take another picture etc. until the animator gets the desired effect. Investigate Digital Animation Vector animation Vector animation is a type of digital animation. These vector animations are created on a computer program such as flash because this is a vector animation program. Vector animation has the capability to have cleaner, smoother animations. This is because the images or frames are displayed and can be resized using mathematical values, instead of stored pixel values, like raster (bitmap). The files are a lot smaller as well because the animation program doesn’t have to save the colour of every pixel unlike raster images.
  • 5. Ben Henderson Raster (bitmap) animation Raster (Bitmap) animation is another type of digital animation.Rasteranimation formats stores pixel data and has to save information about the colour of every pixel in the image. This can take up a lot of memory so the file size is larger and can take a longer time to load. Also if you have to resize an image or frame, the pixels stretch and the image becomes blurry. Investigate Web Animation Software and web player plugins Flash and Director Flash and Director both use layers and timelines to create animations. Also both programs are vector based so animation can load quicker. They both use key frames and tweens to animate between the key frames. Also they both can export files into a shockwave file, which can be embedded onto most websites.