webanimationblog

[webanimationblog]

My Web Animation (Final Project)

The Advertisement:

With the final animation video and the four GIFs completed, I can now evaluate my work. When I look at my final production, I can see what aspects of the work I was most happy with while also seeing what could have been improved upon or changed…

Strengths:

I think that the aspects of my animation that I am most pleased with are the assets I created and the information I withheld in my advertisement. I think the colour schemes I used for the assets provided an effective use of connotation as the E-Car was white and the information displayed about it used green and blue, those colours representing cleanliness and the environment. The same can be said for the fossil fuelled car and the information displayed with it, using colours such as dark grey which would symbolise smog and other pollutants. I’m also happy with the photo realism that I was able to achieve with my cars. The information displayed about both cars was short and straight to the point, giving the audience a digestible amount of information without overwhelming them.

Weaknesses:

The aspects of my animation that I am least pleased with would be the pacing of the advertisement as well as a few careless mistakes that went unnoticed during production. If you look closely at the fossil fuelled car scene, you will notice that one of the pollutant clouds does not fade out completely and is still subtly in the background for the remaining duration of the advertisement. I didn’t notice this on the computer I was working on at the time but later discovered it on a different computer when I had finished rendering the animation. I also think the pacing of the information displayed was too fast. There’s the possibility that the audience may contain slower readers who would therefore be incapable of reading the information as each cloud is only on screen for a second.

Improvements:

If I was to work on this animation again, I would be more cautious and thoroughly check through the animation to ensure that there are no mistakes such as the incident with the pollutant cloud. When I checked on this error, the percentage of the opacity was at 1% instead of 0% meaning that the cursor must have slipped slightly whilst I was editing. I would probably think about other options in which I could display the information to allow a longer reading time for the audience such as letting the clouds stay on screen for longer before fading out or letting the clouds stay solid until their related car disappeared off the screen. I could even look into displaying them in a singular cloud in the form of bullet points or a list. 

[webanimationblog]

Production of My Web Animation

After I had finished producing my assets, I imported them as composition folders into Adobe After Effects. It was essential to do this so that the individual layers in each Illustrator file could be animated independently from each other. I already had a composition layer created with the HD resolution of 1920 x 1080 to import them into. 

The first few assets I animated included the E-Car, the clean clouds and the text reading ‘The E-Car’. I tweaked the E-Car’s position as a whole so that it could appear on the screen in the sense that it was driving across the screen. I also changed the rotation of the wheels to present a realistic motion animation. I altered the opacity of the clouds so that they would fade in and out at various moments in time. The position of the car on screen changes subtly whilst the clean clouds fade in and out. It appears as if the car is accelerating and reversing but it is actually the angle of the camera being altered slightly to follow the car’s movements. The same animation techniques were used for the second part of my animation featuring the fossil fuelled car. The assets featured in this segment included the fossil fuelled car, the pollutant clouds and the text reading “A Fossil Fuelled Car”. 

The next scene saw both cars racing each other. I used the fossil fuelled car and the E-Car assets for this. Both cars had a significant change in position bringing them back onto the screen. This gave the effect that the camera moved to the right to eventually catch up with the cars. The rotation on the wheels was also changed to help animate the cars’ movements. As the E-Car drove off the screen, I stopped altering the position and rotation of the fossil fuelled car and its wheels. I dropped the opacity percentage on the fossil fuelled car which made it fade out, giving the impression that the fossil fuelled methods should be left behind. 

The final scene’s assets included the E-Car from a quarter front view angle and the E-Car logo. Both fade in with the opacity rising from 0% to 100%. There is a shine on the E-Car’s windscreen which I changed the opacity of back and forth at a rapid pace. This gives the effect of a light turning on and flickering above the car. The animation came to a total length of 30 seconds. I exported the animation once it was complete and saved it in a video format. Once it had finished rendering, I imported it into Adobe Photoshop.

When using Photoshop, I decided that it would be best to split my animation into four scenes. This was due to the duration being 30 seconds which I believed to be too long for a single GIF. I had to import the video file four times in order to be able to do this, cropping the video at a different time with each import. As soon as it was cropped, I exported it using the “Save for Web (Legacy)” option. This allowed me to save the file in a GIF format. As soon as each scene had finished rendering, they were complete. The four separate scenes meant that I now had a full length advertisement which could be used as a video advertisement on platforms such as YouTube as well as the four smaller GIFs which could be used as banner advertisements on webpages.

[webanimationblog]

My Web Animation Proposal

I have decided that my advertisement is going to be featured online in the form of a banner-type advertisement that will be featured around the edge of webpages. The advertisement will be used to promote the E-Car, a new brand of electric car. The advertisement will be silent and will feature two cars from a side view angle on a white background. The animation begins with a white background. The first car, a white electric car, will drive on to the screen and stop as a few blue clouds appear around it. These white clouds will list the benefits of electric cars including:

Better for the environment

Cheaper to run long term

Fewer repairs and maintenance needed

Little to no noise pollution

Renewable energy source

The white electric car will then drive off the screen. The second car, a black fossil fuelled car, will drive on to the screen and stop as a few dark grey clouds appear around it. The dark grey clouds will list the drawbacks of fossil fuelled cars including:

Detrimental to the environment

Expensive to run long term

More repairs and maintenance needed

Causes noise pollution on varying levels

Non-renewable energy source

Both cars will then catch up with each other and the electric car will speed up, leaving the fossil fuelled car behind. The screen will fade out to white and then in again to feature the white electric car. The E-Car logo will fade in beside the car. A glimmer of light will shine across the bonnet of the electric car as the advertisement ends.

[webanimationblog]

Considerations of My Web Animation Project

Advertising Expenses:

According to Website Design Ltd. (https://www.pswebsitedesign.com/google-advertising-costs-2017), the average present day cost of a technology based advertisement (the category in which electric cars would fall into) on Google is £1.71 per click. The quantity of users reached, the webpages in which the advertisement is broadcast, and the duration of the advertisement will also affect the advertising expenses budget.

Production Schedule:

I intend to finish my advertisement over the course of seven weeks, commencing on February 18th and finishing on April 8th. I believe that this is an adequate amount of time in which the production can be executed and eventually finished.

Facilities:

There is a range of hardware and software equipment that I will use during the production of my advertisement. Since the advertisement will be animated, the production of the product will be solely completed on the computer using a range of software applications. During pre-production, there will be ample use of Adobe Illustrator and Photoshop to create mood boards, concept art and to study typography and designs. Adobe Illustrator will also be used to create the production assets for the final advertisement. During production of the animation, I will use Adobe After Effects. This software is compatible with the assets which were made in Illustrator and will therefore make it efficient to animate with.

Copyright and Regulation:

When the advertisement is finished and ready to be published online, we will look into copyrighting the animation. The Data Protection Act 1998 will ensure that any information we collect about users who may interact with our advertisement will be stored safely and will not be distributed by the E-Car company in an unlawful manner. The British Code of Advertising, Sales Promotion and Direct Marketing (CAP Code) will also ensure that the information stated about the E-Car and the fossil fuelled car throughout the duration of the advertisement will be factual.

[webanimationblog]

Defining My Web Animation Project

The electric car company E-Car has requested that I create a web-based advertisement with a minimum duration of 10 seconds which will be featured online. I think it would be best for the advertisement concept if the appeal and selling point is brief, easy to understand and straight to the point. I believe the best way to do this would be to list the advantages of electric cars and compare them to the disadvantages of fossil fuelled cars.

Brainstorming Ideas:

In order to decide between my ideas and plans, I decided to showcase them in the form of a mind map (below). This mind map lists the advantages of electric cars and the disadvantages of fossil fuelled cars, something that I want to be the main theme in my advertisement. I have also listed a couple of ideas that I may want to roll with alongside elements that I would like to include in my advertisement.

Mood Boards:

I decided to create a single mood board showcasing colours, themes and designs that have interested me for my animation’s look. The colours I chose typically consist of shades of blue, green and white. Blue and green are associated with the earth so I believe that this colour scheme will help to boost the positive impact that electric cars have for our planet. I also looked at a few logos and symbols to help inspire the design of the E-Car logo. Most of these designs were simplistic yet modern. Other electric car companies and models were taken into consideration too. I particularly like the Nissan Leaf as it has the design of an everyday car, making it appealing to the everyday people.

Sketches:

Based on the themes explored in my mind map and mood board, I have created some rough sketches of the assets that will appear in my advertisement including the cars, clouds and the E-Car logo.

Storyboards:

I have decided that my advertisement will be a maximum of 30 seconds. Below, are the storyboards I have created for my rough draft idea.

Scene 1 (00:00-00:04)- The electric car drives onto the scene, subtly moving back and forth.

Scene 2 (00:05-00:09)- Five blue clouds featuring the advantages of electric cars appear before the car drives off screen.

Scene 3 (00:10-00:14)- The fossil fuelled car drives onto the scene, subtly moving back and forth.

Scene 4 (00:15-00:19)- Five grey clouds featuring the disadvantages of fossil fuelled cars appear before the car drives off screen.

Scene 5 (00:20-00:26)- The camera catches up with both cars as they drive side by side. The electric car zooms off screen, leaving the fossil fuelled car behind as it fades out.

Scene 6 (00:27-00:30)- The E-Car fades in alongside the logo as a shine reflects on the windscreen. 

Typography:

It is evident from recent changes in society and the way we perceive the importance of a clean environment is changing. Electric cars will become more common and engraved in our routine in the future. I believe that it is best to pick a futuristic looking font for my advertisement for this reason. I with wide fonts that are spaced out and circular fonts. The one that stood out most to me was Bauhaus 93.

Initial Drafts:

I rolled with my rough drafts and created them digitally using Adobe Illustrator. I wanted to go for a photo realistic style with my cars while keeping the rest of my advertisement fairly simplistic. I believe that this opposite in designs will help separate the presentation of the E-Car from the information of the E-Car. I also like the idea of photo realism as it will depict the E-Car as closely as possible. 

Interactivity:

When published online and showcased on various websites, my advertisement will withhold a link that when clicked upon, the user will be redirected to the E-Car website.

[webanimationblog]

Web Animation Authoring Tools

Adobe Flash:

Released in 1996, Adobe Flash is a computer software primarily used to stream audio and video files and Rich Internet Applications (RIA) on a computer or mobile. Flash Player can also be used as a plug-in for web browsers in order to run Flash content on webpages such as computer games.

After Effects:

Released in 1993, Adobe After Effects is a digital effects, motion graphics and compositing application typically used in the post-production process of filmmaking. It does however have other uses. In animation, After Effects can be used for post-production such as adding sound or music or for adding filters or cutscenes. The application can also create full animations from scratch using vector or raster based graphic components from compatible applications such as Adobe Illustrator.

JavaScript:

Released in 1995, JavaScript is a programming language that is one of the primary elements of web applications and interactivity. It is a multi-paradigm language which supports the use of event-driven, functional and imperative programming styles. These three paradigms allow for swift operation and output on webpages where the JavaScript language is embedded.

CSS:

Released in 1996, Cascading Style Sheets (CSS) is a style sheet language that is solely used for describing the appearance of a document in a markup language such as HTML. It was designed to help identify and separate content from presentation, further improving the layout, colours, typography and overall look of a webpage.

HTML5:

Released in 2014, HTML5 is a software solution stack that controls the behavioural aspects of a webpage using a markup pattern. HTML5 was designed to improve the language on webpages and ensure that it can be understood by both humans and the computer itself. HTML5, combined with CSS or JavaScript has the same capabilities as Adobe Flash with the advancement that it operates more efficiently across a broad range of devices.

[webanimationblog]

The Elements of Digital Animation

Digital animation is the name given to a range of animation techniques that are created digitally via a computer. Typically, some 2D and 3D animation techniques fall into the category of digital animation with all 3D animation techniques and only the modern 2D techniques relying on computers. Such techniques include the uses of 3D modelling and animation, vector and raster graphics, user interface design and more.

Vector Animation:

Vector animation is a form of 2D digital animation in which the graphics and motions are controlled by vectors instead of pixels. The overall look of vector animation appears cleaner as the images are presented via mathematical values such as lines, curves and polygons. Each point in a vector-based graphic has a position on the x- and y- axis which will determine the direction of the path between said points. Each path will possess values too for features such as stroke or fill colour.

Vector File Formats:

SVG- Scalable Vector Graphics, better known as SVG, is a vector graphics file format which supports interactive and animated features.

SWF- Shockwave Flash, better known as SWF, is an Adobe Flash file format for multimedia and vector graphics. SWF files are best purposed for animations with multiple degrees of interactivity.

PDF- Portable Document Format, better known as PDF, is an Adobe file format used to display text and image-based documents free from an additional application or software such as Microsoft Word.

Raster Animation:

Raster animation, or bitmap animation, is a form of 2D digital animation in which the graphics possess a dot matrix structure that creates a grid of various pixels. Unlike vector graphics, raster graphics are presented through the width and height of the image, measured in pixels. The overall look of raster graphics tends to be less appealing compared to that of vector. The pixelization means that the image will drop in quality if zoomed into too far.

Raster File Formats:

JPEG- Joint Photographic Experts Group, better known as JPEG, is a raster graphics file format and one of the most commonly used compressed image file formats. The quality and file size of the image is solely based on the compression level.

PNG- Portable Network Graphics, better known as PNG, is a raster graphics file format. PNG is used to support lossless data compression on content such as palette, grayscale and full colour images.

GIF- Graphics Interchange Format, better known as GIF, is a raster graphics file format that supports the display of animated images. It was one of the earliest file formats for displaying illustrative content online.

Digital Compression:

Digital compression is the method of reducing the content of a file by encoding information from the original representation to create a smaller file size. Digital compression is a useful tool as it reduces the amount of resources or information needed to store or send data.

[webanimationblog]

The Principles of Animation

Animation is a medium of filmmaking that has been around longer than many may have originally thought. However, it is all dependent on what an individual would consider “animation”. The medium comes in many forms and has evolved and advanced over the past century in which it saw a tremendous rise in popularity. From the earliest techniques such as the illusion of movement to the more modern methods such as computer-generated imagery, each form has varying levels of impressiveness and certain aesthetic qualities.

The Twelve Principles:

The Twelve Principles of Animation is a fundamental proposition that applies the movement and response of characters and objects in animation to the laws of physics that apply to our real world and environment. This creates an illusion of realism within animation which aids the creation and maintenance of believable characters and settings. Although the Twelve Principles were intended for traditional 2D animation, they have also been applied across most of, if not all existing animation techniques…

Squash and Stretch- Squash and Stretch is used to create a sense of weight and flexibility to an animated object. The emphasis on this principle will vary based on the styles and effects present within the animation. For example, a realistic style will use this effect subtly while a more cartoony style will use this effect in a more exaggerated manner.

Anticipation- Anticipation is used to inform the audience of what is about to happen via an action. This gives the animation a sense of realism as the object creates a reaction to what is about to unfold. This can be something as small as a character turning around to acknowledge a currently off-screen action or something as big as a character preparing to jump by bending their knees. It is important to focus on the key elements of a scene and draw attention away from the smaller unnecessary details.

Staging- Staging is a principle that is also used in live action as well as animation. It can involve the positioning of an object, the expression or personality of a character, the camera angle or the lighting and shadows present. Staging’s sole purpose is to help the audience understand why they are seeing what they are seeing, with the purposes of the scene being as clear as possible.

Straight Ahead Action and Pose to Pose- This principle documents two different techniques for the drawing process. The Straight-Ahead Action technique involves animating frame by frame from start to finish making it the preferred method for realistic animations while the Pose to Pose technique involves drawing out the key frames first and then filling in the framing between said key frames making it the preferred method for dramatic scenes.

Follow Through and Overlapping Action- Follow Through and Overlapping Action are two separate yet related techniques which aid the rendering of movement so that it appears in a more realistic manner, applying the laws of physics to the animation. Follow Through ensures that loose parts of a moving character, such as baggy clothing, should continue moving after a character has stopped before being pulled back to the centre of the character. Overlapping Action ensures that different parts of the body will move at different speeds and timings from each other. Both these techniques can be exaggerated for a cartoony effect.

Slow In and Slow Out- This principle applies to the gradual speed up and slowdown of an object. In order to achieve this technique, the animator must draw a higher frequency of frames at the beginning and end of the action. The animator will also draw a fewer frequency of frames in the middle of the action. This will create the speed up and slowdown that realistic actions possess when moving from one position to the other.

Arc- The Arc principle is a technique that mirrors natural movement. As the speed of an object increases, the arc that the object possesses will flatten out. The only exception to this principle is the movement of mechanical objects which move in straight lines rather than curved lines.

Secondary Action- Secondary actions help to create a more lifelike scene and can also complement the primary action that their movement is based off. A secondary action can be a great judge of a character’s personality or current emotions. For example, if a character is sitting down as a primary action, twiddling their thumbs could be a secondary action.

Timing- Timing consists of the quantity of frames needed for an action, which will determine the speed of the action. Just like the Secondary Action, it is a vital principle in determining a character’s mood, personality or reaction. The timing of an object can also help determine its weight. Light objects will move quicker than heavy objects for example.

Exaggeration- Exaggeration is one of the pinnacle principles for animation as it helps to separate the animation from reality. The emphasis on exaggeration will be dependent on the animator’s personal style, whether it’s realistic, cartoony or somewhere in between the two. It is important however to keep a grasp on reality in order to avoid confusing the audience.

Solid Drawing- This principle requires a skilled level of artistry as a great understanding of anatomy, weight, balance and lighting and shading is necessary as well as a knowledge and perception of 3D environments. For traditional animators, this usually meant that they would have to take art classes and be capable of drawing realistically or doing life drawings. 

Appeal- Appeal is the principle that gives a character personality. It is important to give a character appealing traits in look and personality in order for it to resonate with the audience. This means that characters motives and traits should be believable and should make sense. There are various ways to make a character appealing, usually helped along with the stereotypes of said character’s personality and world. For example, antagonists tend to have pointy features while protagonists have curved features.

The Persistence of Vision:

The persistence of vision is an optical illusion caused by the sensory memory which allows humans to withhold knowledge and mental stimulation of their environment based on memory and past experiences with said environment. This is how we can remember what objects of our environment look, smell, taste, sound and feel like without the object’s presence. In the case of animation persistence of vision focuses on the eyes and what we see. The persistence of vision is how some of the earliest forms of animation, such as the Zoetrope, created by William Horner in 1834, appeared to come alive without actually being animated.

Frame Rates:

The frame rate, typically measured per second, is the quantity of static images that will be presented within an animation in order for it to come alive. The more frames there are per second, the more fluent the animation will become. The average frame rate for most productions is 12fps (frames per second), however the number can be changed to what the animator sees fit based on their budget, personnel and other factors. Key frames are also an essential part of frame rates. As explained above in the 12 principles of animation, a key frame is typically used in the pose to pose technique where the animator will first draw out the essential frames (i.e. start, middle and ending frames), before filling in the gaps in a process known as tweening.

[webanimationblog]

The History of Web Animation

The invention of the internet in 1983 by computer scientists Robert E. Kahn and Vint Cerf and the connection of its components by Tim Berners-Lee to create the world’s first web browser in 1989 was a revolutionary step forward in the world of technology. However, this new invention looked worlds apart from the web that we are familiar with today. The first ever webpages were bland and boring, typically consisting of black text and blue hyperlinks in a basic layout, placed on a white background.

The creation of web animation first began in 1987 when the American software company CompuServe created the Graphics Interchange Format (GIF), a file format that supports the display of animated images. The first GIF ever made featured a pixelated plane flying through the sky. This compressed file format was perfect for the slow modem connections of the time and thus became popular amongst the vast majority of webpages. Over the next decade, webpages had become accustomed to the frequented use of the GIFs and static images, but a new form of web animation was sitting on the horizon, Adobe Flash Player.

The release of Adobe Flash Player in 1996 forever changed the web through its ability to run a vast number of formats containing data, graphics, sound and video. As it was the most advanced software of its time, it quickly grew in popularity and transformed the plain webpages that dominated the web into engaging, interactive experiences. It even found its use in the first ever Internet cartoon, ‘The Goddamn George Liquor Program’ created byCanadian animator John Kricfalusi, best known for the Nickelodeon classic, ‘The Ren and Stimpy Show’. However, this fame would soon die out with the widespread popularity of the reinvented smartphone. 

In 2002, huge advancements began in the world of portable devices. Both the iPod and the Danger Hiptop were released and their successors that would follow over the upcoming years would begin a slow dying process for Flash. Flash was compatible with such devices but found a disadvantage with them as its CPU usage proved too much for the battery life on these mobile devices. To combat this problem, Apple announced that they would not be supporting Flash in any of their future devices in order to extend their battery life. This decision deprived and eventually turned Apple customers away from a routine usage of Flash, damaging the software’s popularity once again. Many developers would follow in Apple’s footsteps, killing off Flash. Adobe would later release a statement in 2017 that they would be ceasing the distribution of all Flash software by the end of 2020. Today, web animations are most commonly supported through the usage of JavaScript, CSS3 and HTML5.

[webanimationblog]

The Uses of Web Animation

Web animation is a more common medium than we believe it to be. Some web animations are so subtle and engraved into our daily routine that we don’t acknowledge them. From a simple interactive animation while typing on your smartphone to vibrant graphics and animations found on a colourful web page, web animation is found on most of, if not all of modern-day tech. Some of the most common uses of web animation include:

Banner Advertisements: 

Banner advertisements are a form of advertisement which can only be found online. Banner advertisements are provided and displayed by ad servers and are embedded into web pages, typically displayed around the edges of the page. They can be displayed horizontally at the top or bottom or vertically at the left or right. Banner advertisements, along with many other online advertisements, typically display content that has been fine tuned and personalised to the supposed tastes and interests of the user, based on their search inquiries and online history. If the user interacts with the advertisement by clicking on it, the webpage will either redirect to the link embedded in the advertisement or open a new tab or webpage which will load up said embedded link. 

Interface Elements: 

Interface elements are illustrative visuals used by a graphical user interface (GUI) to simplify the coding and information which is stored on computers. Many people find the information on computers too hard to understand so having these visual aids in the form of graphics helps these inexperienced users to better understand the software. There are four primary types of interface elements; window, icon, menu and pointer. Better known as WIMP.

Windows- Windows are used to contain and run programs. They allow the computer to have various programs running at once if the system can operate multiple windows at once. These windows can be maximised, minimised, closed and moved about whilst working.

Icons- Icons are small graphics that are used to represent a file or program. The icon will usually illustrate what the program is about or will just feature a logo. Icons also act as shortcuts to programs and will open the program upon request.

Menus- Menus are a selection system, typically in the form of a list that allows users to execute tasks or commands upon request. They can pop up upon right clicking on the screen or by clicking a toolbar within a program.

Pointers- A pointer is an onscreen symbol which represents the location and movement of the user on the operating system. It usually takes on the form of a white arrow with a tail and it is controlled externally via a cursor, tracker pad or touch screen interaction.

Interactive Animations: 

Interactive animations are animations that allow the user or audience to participate with the virtual world that is displayed before them. This can be achieved in many ways and is all dependent on the purpose of the interactive animation. Interactive animation is most commonly used for entertainment purposes such as videogames. In this purpose, the onscreen world is controlled in a variety of ways from touch screens to handheld games consoles. There are some games that are completely based off of the element of choice and will usually tell a story that will be affected by the user’s choices for the characters within the game. Interactive animations can also be found in our everyday routines such as at self-service checkouts in supermarkets and fast food chains via touchscreen options.

Instructional Videos: 

Instructional videos are videos that have one sole purpose; to educate and inform the viewers. These videos can either be short documentaries or a step-by-step process. They are typically live action though they have been fully or partially animated in the past. Instructional videos are typically found on streaming sites such as YouTube or as embedded videos in webpages and articles.