Unit 65 Web Animation

http://shootyou-hand-drawn-animation-production.co.uk/

After completing Unit 19, we have swiftly moved onto Web animation. Many sites today are full of advertisements. It's become a classic asset to sites, and one clever advertisement is web animation.
There are many types of animation used on sites, so before we can start to plan out own web animation,  it is vital that we get to grips with all the terminology and aspects within this subject. To help us achieve this, we have been given some elements to research and report on. So without wasting any time, I have immediately got started on this task!
Banner Ads.
Banner ads are most commonly used on sites more than any other element. Similarly to web banners in digital graphics, they are one of the fist things you see, and therefore need to be attractive and primarily vocal to the product the ad is selling.

Above are a few examples of banner ads taken from just one web site. As you can see, there are in various colours and you can clearly tell that the designer wants this element to stand out as much as possible. Using colours such as these you immediately present your web site in modern light and show that you intend to grab you audience's attention as soon as they open your site. However, using this bright colour scheme shows elements of a young and less mature audience. Typically, young children are further attracted by bright colour such as these, so it is quite surprising to see such colour scheme used on a site for a more older audience. In addition to this, the colours used here are inconsistent. Using yellow, green and blue there is no doubt that this doesn't follow any particular colure scheme. This seems to be a little unprofessional as most professional web designers tend top stick to one specific colour scheme. In terms of shape, this designer has gone for a more traditional and basic layout. This is perhaps down to the fact that the banners seem to be text heavy and perhaps need a layout that is able to contain such amount of small print.            

So why are banner ads used so often? Well, the clue is in the name....they have a primary purpose to advertise products or businesses. This can range from a brand new toothbrush-to the latest Blockbuster. Many things can be advertised effectively, hence why so many sites use them. 

The other question many want answers to- is how do they work? The average banner ad is simply made of HTML codes, and is an easy animation to make once the right research has been carried through thoroughly. They may be easy to piece together, but there importance to a site is quite IMMENSE!

Banner ads come in all sorts of shapes and sizes. The six the designer choses comes down to the layout of the site itself and how much they want the advertisement to stand out. Here are all the common sizes you can find on professional sites; 

Some are clearly big, whilst some are clearly smaller. The bigger the banner the more content and information can be shown. It is important that the size is considered for the sizes as the ad needs to be part of the site. It shouldn't be an eye-sore or obstructing any other elements on the site.  

The most commononly used size is 'full-banner' (468 x 60). However, many sites may also go for a smaller alternative as the smaller the banner the less space and storage is going to be taken. Site designer tthends to take into consideration on the memory they use for different digital elements and animation. They usually have limits on their site on how much memory they use. This is because if they use too much memory, the site could run slower and become less user-friendly.

The sites you are likely to see with banner ads, are one which have a purpose to make a profit. It can be very costly yo run a business and sometimes a business needs to make more money other than selling there own products. One way in which a business can achieve higher profits is by advertising. Web ads allow the designer to creatively and artistically advertise other companies and businesses.   

Whilst banner ads are good, some can be used in an ineffective way. Below are some examples of web ads, which I believe are either effective or not.  

Below are some examples of banner ads that I believe have some really good points about them.

                 

Here, we can see these specific examples are animated. Not only does this make your site more unique, but of course adds character to your banner. The top 'NOEL' banner has a basic animation that allows the text to appear as if it is flashing. Whilst this seems to be basic, it may be down to the fact that the theme has been thought about. With a Christmas theme, it would be creative and ideal to have the text light uo like christmas lights. So while this seems plain, it may have been decided to use the type of animation to suit the theme. In terms of the e-mail web banner, there has been more complexity used was the lightens on the building also appear to animate. Whilst this seems to be more creative, it would present a more professional look if there animation was more smooth. The text seems to animate without being synced with the lights. It seems blocky and hasn't got the fluidity expected of a professional animation. 

For popular and world-wide companies such as the BBC, banners such as those above may have been used. However, with the expansion of technology, digital graphics have becom more advanced, so web banners alike are less common on leading web sites.                        

There's one thing that all three of these web banners have in. They all have a basic animation. Like many aspects in digital media, sometimes the basics are the best and most effective. The only thing that changes in these three examples is the text. In the second example there is some slight animation in the background but again, this is simple. They don't over-do the animation by trying to make the banner ad as animated as possible. Not everything has to be animated, and if they were then it will simply look unprofessional and an irritant to the site user. 

        

The next two above are slightly different to the other three. These two not only advertise a product or company but they make it clear that they want the user to view the advertised companies' web site. By animating the 'click here button', this grabs the user's attention and get them wondering if they should click or not. This is in contrast to others as whilst some of them do have a 'click here' option, they are not as clear and therefore could be missed by the site user. This could suggest that they don't necessarily want the user to view the advertised site, as this could lead them away from the site the user was originally viewing. 

  

Even in my very own blog, this ad is just too  much for me to look at. The flashing red and green text is too much of an eye-sore. The colours clash too much and doesn't really follow any particular scheme. Im not too sure if this is part of the design, but the change in colour for the text doesn't have a smooth transition. it looks a bit like it's lagging, which of course isn't a professional look.  Perhaps the crazy animation reflects the products idea of a boost for the brain- a stimating product? This is likely to be the case, I expect web deisgners to only create such striking design with a theme/ genre in mind.This is more of an advertisement seperate from a linked web site and is placed on various sites as an advertising campaign. Sites may need to be causious when including such baners on their site as many alike could take the audience's attention away from the site itself.  

You could argue that the writing makes the banner stand out and grabs the users attention, however I believe this stand out for all the wrong reasons. 

    

Whilst this banner is neat and tidy, and doesn't have any crazy animations, I found it difficult to read the text. It took me a few seconds to understand what product is being advertised. 

As a site user, if I was to see this, I wouldn't take any time to concentrate to understand what the writing said. A banner needs to be clear on what the advert is selling or promoting. It needs to stand out, but unfortunately I doubt that this banner in particular wouldn't attract many viewers as it doesn't scream out to them like a professional one should. This was taken from an online magazine, which may not have the most expericned web developers and deisgners to help create a wb banner that is found on more common sites such as the BBC, Sky and Aardaman animations.   

Some of the examples above reflect interactivity. In particular the last two examples above have buttons that allow the user to click and perhaps visit another site page. Expansion of technology has led to more interactive elements being created for such things as web banners. One prime example is GOOGLE. The internet browser has an icons idea which sees their famous GOOGLE lettering transform into an animation- sometimes interactive that reflects on a milestone, news or event on that particular day.

The example above was created by the GOOGLE team in support of the current footballing events. They tend to use current affairs to inspire their idea, and perhaps this is why they become popular- because they are modern and relate to present day. This specific example requires the user to the use the arrow keys on the key board to move a goalkeeper. once the game is over, there is a replay button to press using the mouse. Of course the designers include the branding throughout each animation by including the lettering of GOOGLE. By using such animations and interactivity, they show a unique and creative side to a web browser, reflect modern technologies and perhaps make the name GOOGLE stand out further from rivals.  

It was in 1998 that Google started to look into the ‘doodle’ concept. They placed a stick figure drawing behind the 2nd "o" in the word, Google, and the revised logo was intended as a comical message to Google users that the founders were "out of office.". This was a basic, and didn’t use animations due to technical constrain. However, this was the start of a brand new idea of bringing animations, interactivity and an Internet browser together!

Over time, the demand for doodles has risen across the world. For them, creating doodles has become a group effort to enliven the Google homepage and bring smiles to the faces of Google users around the world! Now, it is possible to see individual countries get their own animations. For example, Belgium celebrated ‘Belgium national day’ where Google created a specified animation just for that one country only! 

Now, Google create various designs and perhaps one of the most interactive designs was the Rubix Cube. This type of interaction, is clearly Google trying to engage the audience in their page- suggesting they are more than just a web browser!

Animated Interface Elements 

These elements can be found on smartphones, Apple products and androids. The can be also found on web sites too. From drop-down menus to roll-over buttons, they are classed as interface elements. They are user-interactive and only work when a Human communicates with tehcnology (such as button pressing).

The word 'interface' is the interaction between human and computer, which is a clue to what this type of animation does for a user. 

For example, the iPod touch has touch screen buttons. When you go into the settings and change an option, the button's state will change to show the user the change in the setting (for example it will change blue). This interaction gives the user the knowledge that something has changed. It's a simple yet a very practical type of animation.  

This is used on many sites as it is vital that the site is interactive for the user. This type of animation also allows the user to navigate much easier around the site, thus making the site generally more porfessional.

There is a clear difference here with this animation in comparison with banner ads. Animated interfaces are used to enchance a site. They help the site to ensure the user is able to navigate smoothly. Banner ads are not used to enchance the looks or the usabilty of the site it is on. If money wasn't earned by including banner ads on a site, then they porbably wouldn't be used, which contrasts with other web animations. 

 This is an example of animated interfaces. Programmes that can be used to create these interfaces are Adobe CS4 Bone Tools. Below is an image of a Smart Phone Interface.

 

I believe that this type of animation is key to a web site's sucess. Without these a site would simply not function seuffciently and therefore would not be any use to the user. This contrasts with banner ads as I don't beleive that they are as fundimental. Every animation plays an importance in web design, but some are more important and useful for a site than others.  

From perosnal use and user feeback, I realised the difficulty in pressing the coreect button. The small icons can lead to the mis-spelling of words and can cause break down in communications when typing. This is more likely down to the speed in which the user types, so perhaps a more slow paced method will ensure spelling is more accurate. These animations can be found on various hand-held devices ilcuding smart phones and tablets.

Linear and Interactive Animations

Unlike other types of animations, Linear animation is non-interactive. This means that the animation does not require the use to scroll-over, click or press anything to make it work. They animate on a continous smooth loop. It is important that the transition is smooth as the could affect the looks and the idea of a linear animation.

Below is two examples of what a linear animation looks like. As you can see, it goes through the same animation continuously, yet it seems to be one action being played over and over again. In simple terms, it is hard to establish when the beggining and end of the animation is.

 

These animations range in a varirety of sizes. Each different design will take different storage spaces. Lets take the two above for example. The first one takes 932KB. The second animation takes 1.47MB. So this just goes to show that they have a wide range. This, again like most animations a designer must consider if they have a limit on how much data and storage space their site takes. 

I beleive that this is probably the most professional looking type of animation. The smoothness and the superb transition really makes the animation look more realistic. You can make a linear animation for any type of web site too. For example, if it were a recycling site, you could have a card-board box with a similar animation to the above example. Linear animations allow you to create a animation sutible for your site. Mnay shapes and objects can be designed into a linear animation, thus you are able to make you site come to life with character with relevant imagery.

Interactive animations on the other hand, contrast with linear animations in the fact that they are interactive. Unlike linear animations, interactive animations rely on the user of the site to do an action before the animation is performed. Interactive animations are similar to other animations as they are gernerated by computer programmes such as Flash. However, they only perform in real time, and as metioned, they will only usually work once there is interaction between computer and user.

Linear and animated interfaces are somewhat similar as they are both used to aid the usability and navigation for the user of a site. Thus the site will become naturally more user friendly.

Whilst the continuity in linear animations helps with consitancy and saves the users clisking start and stop, as mentioned this does take away all interactive features of an animation. Many sites have a goal to reach- which is to make thir site user-friendly and easy to navigate. User interactivity helps this to be achieved. Therefore, linear animations is one less interactive element and could lead to less chances of the site becoming user-friendly. When creating animations myself, it is important I consider the audience and client. Perhaps a more interactive animtion would be sutiable. 

A good example of a site that uses animations effectively without being interactive is 'TWC WiFi-Denti Fier.   

Promotion

Animation can also be used to be promotional advertisement and is commonly found on MMO (Massive Multiplayer Online) games. It is a clever and modern technique that allows the designer to create an animation that sells something to the user.   

In some ways promotion is used similarly to banner ads. This is because they have a sole purpose to persuade, inform or advertise to the user. It is clear what promotion does. It simply promotes a product or business! But how does this relate to animation and web? Well, modern sites get very creative and technical by making sure their site is unique. They do this by designing an animation video. 

http://www.youtube.com/watch?v=6EOLWY3t4Uw

The link above is an example (found on YouTube) of a animated promotion. Whilst this is not on a site in particular, it gives an idea on how creative you can be. There's only so much an actor can do, but with animation used as promotional material, the possibilities are endless!

Unlike other animations such as banner ads, animated promotional videos are more likely to grab the site user's attention. They will would want to watch a video which would result in the user gripped onto that site a little longer. 

By positioning a promotional video onto your home page of your site, you are saving the user's bother of clicking and reading through your website. You have a chance to grab their attention instantly by communicate using a fruitful mix of pictures, motion, text, voice, sound effects and music in a short amount of time. It’s an efficient use of time and condenses information.

Here is another example of a promotional animation. Again, I feel this shows just how creative you can be in just one video. Here, they simply get straight to the point. They let the user know what they do, the benefits and how they can use their service quickly and practically.

   

    

 

Whilst this video only lasted 20 seconds, after all it is a video and videos do tend to take a lot of storage. The problem you will face with this type of animation is that it will take a considerable amount of space and storage in contrast to the other types of animations. it is an effective animation, but the file sizes will really need to be considered as this could slow down the speed of the site (when loading).

Not only could you work on the imagery and vectors, you can also start to look into the fonts and audio. Unlike many types of animations audio doesn't play as a major factor. However, promtion animations tend to be longer and may need audio to aid the audience's understanding. 

The use of the type of animation is also down to the audiene's demands. For example, a more mature, older and educated audience may prefer a text-heavy site and wouldn't be attracted by animations of this kind. They may wsh to be informed by text rather than bright noisey animations. Of course, there is those who enjoy the aspects of animations and therefore could engadge in sites that include them of this nature.     

Overall, I believe that this type of animation allows you to get very creative...either promoting your site, business or even advertising others. Whilst videos will take more space (in terms of both on the site and the file size) it will really engage the user, and if designed creatively, it can be the key to your site's sucess!  

Instruction

For many years we have been looking at pieces of paper to learn how to do a particular task or challenge. However, today's technology has allowed companies and businesses to create instructional animations. These can range from little stop frame animations to lengthy videos. This of course depends on how big the task in hand is. 

   

Although probably not the clearest video you will see, this animation shows you how to tie a specific knot. It is these types of animations, tasks seem a whole lot easier. Businesses such as IKEA may use this type of animation to help aid certain instructions. Sometimes the user want more than just text to help them, and sometimes it simply isn't enough. This could result down in the user giving up and leaving the site to find a better explanation/set of instructions. Instructional animations enhance the customer services for companies and therefore make the site more user-friendly. In addition to this, instructional animations make a site look more modern and generally attractive to the user. This is a very useful way to visually aid the audience. The example above is simply and remians short. In terms of length, instructional animations need to remain snappy. This is because they have a sole purpose to instruct and long complex animations can only confuse users when trying to pull out key information. 

You tend to find these animations on instructonal and informative web sites. Sites with a primary purpose to entertain may include other types of animations and this may not be relevant. 

Just like promotional animations, these too take user storage. However, this shouldn't be as big of an issue as they will be smaller if they are simple and short animation like the example above. Instructional animations can be also be called 'educational animations'. You can find educational

animations typically on children sites (such as CBEEBIES and many other similar sites). As you can tell by the example on the left, there is 'next step' button. This is an example of interactivity embeded in an animation. It allows the audience to feel part of the animations prgression (story) which will engage such a young audience for a longer period of time!

The example below just goes to show how simple a task can look, yet if it was written, the task will seem considerably more challenging.

      

Personally, I would only recommend to use this type of animation if you have a site based on web games or have a product that needs instructions to explain. This type of animation will really impress the user. For example if they are looking for help on a task, and they stumble across your site with a animation, then the chances are high that they will visit your site for more help in the future! If you were to use this type of animation on your site, it is without doubt that you ensure it is very clear. If you want your animation to function properly, clarity is simply needed. This is similar to other animations. They need to function correctly and professionally but if images are pixilated or the text is not clear, then this will defeat the whole object of the animation. More specifically, electrial and furnishing sites typically use this type of animation to help with their complicated products. With this in mind, this type of animation will be likely viewed and appreciated by adults. Yound audiences tend to apprecitate animations that are more entertaining and simple such as educational.        

Information

Similarly to instructional animations informative animations can also aid the user-friendlyness of a site. In simple terms, an animation can make complex subjects, such as the brain's anatomy, much easier to understand. In particular  3D animations are much more useful. Depending on what kind of site you have, deopends on how useful an informative animation can be. For example, if you're site is science based and ful of fascinating yet very complex facts and statistics, then by using this type of animation you are able to make this seem less complex, and complement these given facts in a modern and unique way.

One problem you may have using videos on a site is not only the storage space used but if your not careful your user may get  bored if the video is too long. Whist it is important to ensure every detail is included in an informative animation, you don't want to bore the user. It is best to keep is concise as much as possible to avoid this issue.

I beleive it is a good modern technique to make even the most complex topics-simple. To create a 3D animation,. it will of course become more challngeing then a 2D design, however, if you are able to acomplish this, not only does the animation look more proefssional, but it also allows the user/viewer get a better understanding of the animation.

Entertainment


Everybody loves entertainment. It's what keeps us glued to the screen. Weather on a web site or on other media platforms such as TV, animations can be a very entertaining piece of media.

 Without animation techniques (i.e stop-frame animation) it's famous characters like these that wouldn't be such an idol today.

As mentioned stop-frame animation is the most common technique used for animations to entertain. Stop-frame animation consisits of many pictures being taken of an object, which is moved slightly per frame (hence why it is called stop-frame). This is to give the effect of the object moving on its own. It is a very simple technique, but sometimes can have problems. For example, lighting is a major issue here. If for example you take a frame with the sun out, but then you take one when it is behind a cloud, the difference will likely be noiticed in each of the shots. This will make your work look untidy, uneven and less professional. To control this, a studio or somewhere where the light is perscistant would be benificiall for this kind of animation.

In paticular stop-motion animation can be most effective. The use of house-hold objects or even sometimes humans, can add a comic efect on the animation, thus the audience will be entertained.

The quality has to be to a 'near-professional' standard. If your animation is created to this standard, your site has more potential to be interactive with your audience. This will entertain all ages, although this style of animation may suite children and a younger audience best.

Claymation (also known as clay anmation) also fits in to this area of animation. The likes of Wollace and Gromit, and 'Chicken run' are all made up of clay (and other similar materials).

Clay animation is one of many forms of stop motion animation. Each animated piece created for a character or background, is easily dismantled, broken, shaped and deformed. This allows the designer to alter the characters facial expressions, body shape and language. In simple terms, clay animation is like working in cell animation, only with a 3D object and not a 2D one drawn on cells.

If not working in the professional industry, then caly animation can become a problem. If your chracters are made from plastecine or clay is can be very dificult to keep them clean and mess-free. When you first make your models, they will be bright, clean and professional looking charaters, but some point during the process of filming tehy can become dirty and have a mixture of clay colours in their bodies! It would be best not to use so many different colurs in one character...two of possibly three at a max. This would mean that you have lees chance on geting them different from their origonal state, as one slight colour change or dirt can be noticed when animating.  

There are various softwares for stop-motion creation. One of which is ADOBE Flash (which has the basics to create a simple stop-frame animation). And, at an estimate, at a rate of 12 stops per second of movie time, a 30-minute clay animation movie requires 21,600 still pictures! A full-length (90-minute) clay animation movie would require 64,800 still pictures! So it's clear that this is very time-consuming to create.

Examples include: 
Wollace & Gromit  | Children's TV/film | Children's web sites | Entertaining sites (such as sports- although less frequent)    

So now we have looked at some uses of web animation, we will now be looking at the history of animation.

Hand drawn

Hand drawn animations may seem like an old-fashion and long process to create an animation. However, it is one of the most common techniques used by the BIG companies in the world of Animation. One constant user is Disney, who use this technique to create the classic movies. This goes to show just how effective a hand drawn animation can really be.

This is commonly know as 'cel animation'. This technique has been around since 1915, so why has been used in recent decades? Well, financially this technique is cheaper to produce, and arguably less complicated to design. This technique is mainly based on how well the sketches and drawings have been made. This contrasts with other techniques as they mainly rely on computer skills.

With this kind of technique, comes a disadvantage. If the drawings are at poor standard then the animation will ultimately be unsuccessful. This technique will also take a considerable amount of time to complete in contrast to other techniques out there.

Even the most famous cartoons and characters have all been created using this technique. From the Simpsons, to Mickey Mouse! Of course it will take very artistic skills and knowledge to get an animation to this kind of standard. However, if you have the creativity (which is a vital skill to have in animation design) this old technique will certainly help.                

Before this technique was established, everything was drawn on one single sheet of paper  resulting in time, money and materials been used too much. Instead of drawing on a single sheet of paper, and then redrawing the entire scene for every frame (12 for every second), the scene was drawn in parts, on a thin 'cel'. For example, the background would be drawn on the first layer, then the body of a character would be drawn on the next layer ect. This made it easy to change an expression without having to redraw everything. 

One of the first feature length films to use this technique was Snow White- and the seven dwarves. This old classic was made up of many cels, which were put together to make a smooth and fascinating film. 

Other examples: 
The Simpsons | Family Guy (a more older audience) | http://www.qbn.com/topics/607155/  | http://shootyou-hand-drawn-animation-production.co.uk/

The links above are great sites that shows hand-drawn animations from various designers!  

Flick Books

Arguably, the simplest animation technique. A flick book animation isn't one you would usually see used in the professional industry.  This technique is something commonly created by the average person, for either fun or for a past-time. Whilst you can be creative with your designs, this technique isn't so good as it takes time and can become very difficult to show a large scene-certainly almost impossible to create more than one scene effectively. 

It is similar to cel animation, as you create each action on separate piece. You draw each movement on a sperate sheet of paper and then you flick through using your hand through the booklet. This is basically how computers operate stop-frame animation. They play through each image to give the illusion of the object moving.

As mentioned it isnt the most professional technique so there aren't many examples of where this has been used in the industry. In my opinion, the best thing about this animation is that no technology is needed. Just a pen and paper can make this work, so here, you don't need to worry about saving, storing or what file format will be more suitable!

Here is an example of a great flipbook. This would of took quite a lot of time, infact some say it took 50 years to create but peopl may have their own views on weather that is true or not! It is very professional and would take the most patient of artists to create such a piece.

 
Whilst flip books are hand drawn and reflects traditional methods of animation, they were the start, and the foundations of the animations we all know today. They created the illusion that all the pictures are one flowing animation, as the mind simply cannot process the images separately. The fact that even today animations are created with a similar process, suggests just how influential early animation designs have been on modern designs. For example, Adobe Flash allows designers to create animations using certain frames per second. Just like flip-books, this mess that the animation will play through a certain amount of images at a fast pace, so much so it becomes one animated object in there eyes of humans! 


Animated Cartoon

There are plenty of cartoons out there, but other than a great way to past the time and to keep us entertained, what exactly are they?

Animated cartoons are pieces of digital theatre designer and produced for cinema, TV or computer. They tend to follow some sort of plot or storyline, which initially keeps the audience gripped and/or entertained. In adition to this, they are commonly made up of professional drawings (simialr to many other techniques of animation).

There are pleny of different techniques used to create cartoons. However, one thing that they all have in common is that they are all 'traditional animations'.

Traditional animations are basically types of animations that are hand-drawn. This was a common technique used before computer animation was introduced.

One of the earliest animations was the 'Phenakistoscope'. This dates all the way back to 1832. It consisted of a spinning disc attached to a handle. Arrayed around the disc's center were a series of drawings showing the different stages of the animation. The user would spin the disc and look through the moving slits at the disc's reflection in a mirror. The scanning of the slits across the reflected images kept them from simply blurring together, so that the user would see a rapid succession of images, giving the effect of the images coming to life! 

This links back to cel animation and the flickbook technique. They too are traditional animations.

 Of course this technique along with the Zoetrope and the Praxintrope, are very old techniques. In modern animation we see 'motion picture films'. This is a modern twist of these techniues, only this time technology is used the enhance the viewing experince and quality.



 
 

                 

GIF's

Animated GIF'S (Graphic Information File format) is another simple and basic type of animation. These can usually be found on web sites, although not many use them today.

The two above examples just go to show how creative you can be. They can be used to entertain the site user, or the make the site more humorous. They could also be used to animate a mascot or logo of a company. This makes the site more attractive, creative and unique.

They are made up of gif files with multiple frames that are played in a sequence to create the motion. They are examples of linear animations, as they are non-interactive and continuosly reapeat the sequence.

Again, they do take space, and gthe bigger/longer the animation the more space it will take. Nevertheless, animated gifs tend to be only short.

To create an animated gif, you could use 'Scratch'. Or for a more professioanl approach, ADOBE Flash is a software I would recommend.




Dynamic Hypertext Markup Language (dHTML)

This is a combination of web development technologies used to create dynamically changing sites.

This is a very useful aspect as it allows the user to dynamically change the web page content and other settings such as colurs and fonts.

While dHTML ehances the user-friendlyness of the site, the technology used can sometimes be frustrating for users when it is used incorrectly. For example, a website menu with flashy dHTML animations can easily confuse user navigation, therefore doing the opposite to what it is supposed to do! It can be very difficult to develop and debug the site due to a lack of Web browser and technological support. In addition to this, dHTML scripts may not work correctly in various Web browsers (which means some users will beinfite from HTML whilst others will stuggle to navigate).

Therefore as a designer, you must ask yourself...are they needed on your site? A designer must make the descion on weather the dHTML will benifite the user or not. 

Below is a very basic and simple example of an animation of this type. 

http://www.schrenk.com/js/exp4.htm

The option given here is what speed the animation is played at. In other words- how many frames per second. On the slowest option, the animation becomes more slow and appear to have the effects of lagging. The faster the animation is, the more smooth it appears in the transitions of each image. 



Java Applets

A Java applet is a type of Java programme that a browser (enabled with Java technology) can download from the internet and run. An applet is typically embedded inside a web page and runs in the context of a browser. This is usually used to run the HTML of a site.

Today, many deisnger tend to avoid using Applets. This is because technology has adv-

anced so far that it is capable of doing the functions an applet would do itself. The only problem on relying on modern browsers is the potential risk of security issues.

Previously browsers were not as useful as they are today; there was a need to turn to a more-capable platform. This is no longer the case, and as such, applets rarely have a place in modern web designing.

So far we have gone through some different types and techniques used in for animation. Whilst it may seem like a lot already, there is still one more out there!

Here is an example of an animation begin run in a Java applet.  As you can see, the graphics of this animation seem to be good and complex quality. The character has a bias motion of walking, so this suggests that even though it seems like a complex animation on first sights, it perhaps may not be. 

Optical Illusion of Motion

Theres a dark side to animation! Yes that's right, this technique trciks your mind and robs your sight! An optical illusion is an image designer in a clever and creative way, using shapes and colours that simply trcik the mind to think the object or images is moving.

Scroll your eyes up and down this pattern. Do you think this pattern is moving? Think again! This example above is a simple imported png (portable network graphic). The shapes used and the complex design behind this image basically fools us all! Although, if you look at it enougth times, your mind does get used to it and you may notice that the mootion has either slowed down or has stopped all together. This is an issue you would have by placing this on a site. Whilst this will entertain the user by how unique the image is, the novelty is likely to wear off, and due to the bright colurs (that are sometimes needed to make the illiusion) they may clash with your site colour scheme and themes. Therefore, this may become an eye-sore to the user. This is something a designer must consider if they was to use this type of animation.

On the other hand, this animation is similar to a linear one, as it has a perscistant and continuous animtion. This will never stop working (until the specific induvidual user gets used to the image) and shouldn't malfuntion (like a video may). In addition to this, it will take no more room than an ordinary image...allowing the designer to include animations without having to worry about file storage.

Computer Generation

 It's not time to get more technical about animation. Here, I will be discussing the computer generations of animation and what they actually are (including; frame rate, frames, key frames, onion skinning and tweening).

Frame rate:  

Frame rate is simply the frequency (rate) at which an electrical device produces unique consecutive images called 'frames'. They cover the frames in video games, TV programmes and of course animations. The frame rate is often measured in FPS (Frames per Second).

We can process around 10 separate images per second, recognising them separately.  

Key Frames: 

Most animations have key frames, it is a similarity that most have.

A key frame in animation is a drawing that outlines the starting and ending points of any smooth transition. The drawings are called "frames" because their position in time is measured in frames on a strip of film. A sequence of keyframes defines which movement the viewer will see, while the position of the keyframes on the animation outlines the timing of the movement.

This brings me onto tweening...

Tweening:

This is short for 'inbetweening'. It is the method of generating transitional frames between two images to give the illusion that the first image progresses smoothly into the second image.

 Onion Skinning:

This technique is used during the editing of an animtion. It is paticularly useful for animated gifs or any small animations. In the procees of editing, it is important that you make only the smallest changes in each image on each frame. This can be difficult to complete, but that's where this tool becomes useful. Onion skinning basically layers e
ach frame over eachother. For example, you edit the image in frame one, and once you move onto frame two you will have a faint outline of frame one. This makes it more easier to make the slight changes in each frame.  This is only effective when working with 2D animations.

Above, is an example of an animtion in the creation process. You can see the different layers outlined beneath the layer currently selected.

I personally only like to use this tool when making short animations. It can be complicated when your overlappping and layering loads of frames.

 Vector Animation

This is a term used to refer to animation. The transition and motion of the animation is controlled by vectors rather than pixels. The advantages result in smoother animations. This is because images are displayed and/or resized using mathematical values instead of stored pixel values, allowing the desinger to get one step closer to the 'near professional standards'.

 There are few programmes out there that allow a designer to do this ask, however one of the most commonly used programmes is Macromedia's 'Flash'.

There is an opposite to vector animations, which is raster (bitmap) animtions. Unlike vectors, raster animations are made up of pixels. This results in the loss of qulaity when zoomed in. If for example you needd to shrink you animtion to a certain size, you may loose qulity in your design if it is a bitmap animation. This contrasts with vector animations as they can be re-sized and scaled without degrading the quality. Below, is an image showing the clear difference between a vector and bitmap image. This will ultimatley have the same effects with animations too.

Compression

Compression is the reduction in size of data in order to save space or transmission time. In digital media you have choices to make, and one of them is what type of compression you would like. There is two different types...lossy and lossless compression.

What is the difference between lossy and lossless compression then? There's a little clue in the names....'lossy' results in a loss quality in the graphics whilst 'lossless' compression doesn't downgrade the quailty. However, one good point about 'lossy' compression is that it means less storage will be taken by the image or animation. In contrast to this, 'lossless' compression would result in bigger files.

It can be a difficult challenge to decide which type of compression to deal with, however, there is one ky factor thst could actually help you decide. Professionals tend to use lossy compression for audio, video and still images (especially when your're streaming media).  Lossless compression is usually used for compressing texty and data files. So, if your making an animtion and wish to compress it to suite your site and to make itrun that little bit faster, it will be best to go with lossless compression, although as mentioned the qulaity can take a bad effect.

So why should you compress when making a web site with animations on? Well, lossless compression will allow you to cut down on the amount of storage space used. The more space/data taken (the bigger the file size), the slower your site will become, and will also effect the download speed.. The user may thne get impatient with your site and exit! Compressing is a technique that allows you to stand a better chance on keeping those all important user on board. 

File Formats

There are many different file formats out there. The formats of animations on a computer are .fla, .swf ,.gif, .mng and .svg. To create these animations many companies will use programmes such as flash, swish, Amara and director. Some of them have different features to each-other, so it is important that a designer looks into the pros and cons behind each programme to ensure they have chosen the right one for their animation.

Dynamic HTML

Dynamic HTML is a type of HTML, which is typically applied to Java Script. This file format is used for the simplest animations such as drop-down animations and interactive buttons. There is a massive flaw with this type of file format as there are various web browsers (such as Google Chrome and Internet Explorer). This means that Dynamic HTML files may not be as effective for some!

1. HTMLs tend to load sufficiently on web browsers and PCs.

2. Unlike other applications and file formats, there is no need for plug-ins to enable them to function effectively.

3. This type of animation format function specifically with web elements such as drop-down menus, rollover buttons and interactive menus. They are the type of animation that tends to be used for more interactive animations.

4. Compared to others, this file format can be costly in the professional industry to produce, as essential software such as Adobe could cost a considerable amount.

5. This requires some background knowledge on coding. Perhaps a lack of understanding on coding- HTML, CSS, you may find yourself struggling to create near-professional products.

6. Coding can be time consuming, especially if you do not research into compatible web browsers. If the coding is right, then HTML will likely work for all, but if testing is not carried out, you may find the animation is unable to load on certain browsers. 

This site has members of the team who specialise in creating animation from pure HTML and JavaScript. As you can se, this has allowed animated sprites and characters such as the birds in this example to come to live and be animated with the use of interaction…the 'drag me' option. Tis has naturally made the site look more dynamic which is why it is used by many web developers. 

Flash

Here, an animation can be created frame-by-frame, to be later exported. This is more useful for animations that intend to include audio. Flash files (FLA) have to be converted into SWF format before they can be used on the internet. This format had the primary purpose to store animations in. In addition to this, it can also be used for other purposes such as website building and process forms.

 1. Flash ultimately allows animation and web sites using them to become more interactive and interesting for your audience

2.Unfortunately, search tools cannot register flash projects, as they cannot be indexed.

3. Apple products tend to struggle to open flash animations, and perhaps is a unique disadvantage in comparison to other types of animation- you are limiting your audience by using this. In addition to this, those with FlashPlayer installed are able to view flash animations. Whilst most do have this installed on their computers, this still runs the risk of narrowing your audience.

This site- short-of-the-week is a site (http://www.shortoftheweek.com/2014/04/17/writers-block/) dedicated to pure flash animations. Here they show a select few each week which they believe are the best on the web! The image below is a screenshot of what they animation itself would look like loading on a Apple Mac! The screen is blank and the loading bar never actually loaded- reflecting the fact that Apple products cannot load Flash animation. 

Animated GIFs

GIF images which are animated normally have various images combined into a single GIF file. A cycle of images go through a process to create the effect of animation. While GIFs have a limited amount of flexibility and less amount of control compared to other formats, it can be supported by various web browsers (which are an advantage over Dynamic HTML). This type of file format also tends to be small in file size too!

Below, you can see a web site that presents animated GIFS that are currently scattered over the internet. From the examples gown, you can tell that the quality of imagery is poor and are likely to only be used for novelty effects. They tend to be used for pure entertainment and not seen as the animation type that attracts an audience to a site. This is perhaps why we tend not to see many sites including animated GIFS due to their basic and unprofessional looks (unless they are dedicated sites to actual examples of animated GIFs). Unlike HTML, which can be interactive and have a good aesthetics. 

GIFs Vs Flash!

TYPE OF ANIMATION	ADVANTAGES	DISADVANATAGES
GIF	File size is smaller	Only has a maximum of 256 colours
	Able to have transparent backgrounds	Imagery quality can be poor
	Can be accessed on various web browsers
FLASH	Audio can be added	File size can be quite large
	More flexibility allows creativity	Can only be viewed with FlashPlayer installed
	Can have a more complex animation	Considerable amount of time to load on web sites

Based on my research into different file formats, my own animation I intend to create will be based upon FLASH. In addition to this, the correct software for this is wildely available at college.

For more information on other file formats for animations- visit http://www.graphicsacademy.com/formatx_animation.php

Authoring



Also known as ‘Authorware’ is a programme that aids you to write hypertext or software applications. Authoring tools usually enable you to create a final application simply by linking together objects, such as a paragraph of text, an illustration, or a song. By defining the objects' relationships to each other, and by sequencing them in an appropriate order, the creator can produce attractive and useful graphics applications (particularly on sites).

The difference between authoring tools and programming tools is not precise. However, authoring tools require less technical knowledge to master and are used solely for applications that present a mixture of textual, graphical, and audio data.

So the final thing we need to know, is what are the types of players out there? Well, there's quite a few, some of them include; Flash Player, Shockwave, Real Player and Quicktime.  These are known as 'plug-ins'.

Plug-ins are software programmes that extend the abilities of the desktop browser. Other plug-ins enable you to play audio samples or view videos within a browser window.

Here are some of those plug-ins commonly used;

Plug-in	Description
Adobe Flash Player	Adobe Flash Player is a free and one of the most popular multimedia plug-in for enhancing websites.
Windows Media Player	Windows Media Player is a multimedia player from Microsoft. It comes preinstalled on Windows computers, and allows you to play embedded audio and video on webpages through a plug-in.
Java	As mentioned earlier in the blog, Java software allows you to run applications called "applets" that are written in the Java programming language. These applets allow you to play online games, chat with people around the world, calculate your mortgage interest, and view images in 3D. Companies also use applets for intranet applications and e-business solutions.
QuickTime	QuickTime is the Apple technology that makes video, sound, music, 3D and virtual reality come alive for Mac and Windows.
RealPlayer	RealPlayer allows you to download videos directly from websites. You can also share your downloaded videos on Facebook and Twitter or transfer them to your favourite device (such as iPod, iPhone, BlackBerry, PSP).