Introduction to 2D Animation

Adding movement adds life.

If you add movement to artwork you can dramatically increase its chances of getting noticed and this is even more significant on the web where competition is fierce for your users' attention.

The deployment of animated banners is where much of web advertising revenue comes from. This module is an introduction to the tools and knowledge you need to make 2d animation and making a web advert is part of that.

Animations for the web are deployed in several ways

  1. Animation including interactivity is deployed using a combination of HTML5 Canvas, CSS3, and JavaScript animation libraries and authored using Adobe Animate, Sencha or Google Web Designer.
  2. Coded animation using just HTML5, and CSS3 is an increasingly popular strategy for providing visual feedback such as buttons that swell on a mouse interaction, parallax scrolling effects or images that fade and zoom into or out-of view.
  3. Broadcast format 2D animation deployed as a video format (MP4, MP5). Adobe Animate, Toon Boom Harmony or Adobe After Effects are the major players for broadcast in the 2D space.
  4. GIF Animation
  5. SVG Animation
  6. WebGL


In this module we explore the best ways to create / produce the first category; web animation based on HTML5 Canvas, Javascript and CSS3 and Adobe Animate is the tool we use to do this.

What about animation for Broadcast?

Adobe Animate exports in all broadcast formats so for broadcast it's still a valid animation tool especially if you're focussing on 2D character animation with audio synch.

After Effects is recommended if you need to work in VFX with reduced emphasis on chararcter animation (although it does have a rudimentary character animation toolset). Toon Boom Animate is a worthy equal to Adobe Animate in the character-animation-for-broadcast space.

How will I be assessed?
You will be assessed using these projects :

  1. Produce an animated rotoscoped product.
  2. Design and produce a Web Advertisement that complies with Fairfax Digital Media specifications.

You can find further detail on these assessment tasks in Lesson 7 and the assessment tasks are on our Learning Management System (LMS).

The Units
This module delivers and assesses the following unit (link to

Recognition of Current Skills
If you think you already have the skills required then get in touch with your teacher to verify this. If it's determined that you do, then this means you just need to submit the apporpriate evidence and you don't need to do the learning or assessment tasks.

Archive all your work
It is important you keep all your work somewhere safe; backup to memory stick, hard-drive or cloud storage. As a student of TasTAFE Creative Industries you are responsible for retaining evidence just in case you need to be assessed at a later date.

The Lessons
Like the rest of the modules in the Cert3 Screen & Media, this module is supported by Learning Tasks.

The Learning Tasks are important because they provide an opportunity for you to get feedback as your skills develop. To many students, the feedback is one of the most important parts of the qualification.

The Software / Hardware

What software do I need?
The tool of choice for this module is Adobe Animate CC, previously known as Flash Pro CC. Animate offers features such as HTML5 Canvas / Javascript export that previous versions didn't. This is increasingly relevant if your output needs to go to smart phones/ web.

Mac or PC?
The mac version is almost identical to the PC version, the significant differences being the keyboard shortcuts.

Why Adobe Animate?

The need for skilled animators in general remains high and is growing. Demand for animated online content is surging too. Total Online Advertising Expenditure globally in 2014 pushed toward $4.5B. PwC Report (note: 40% of this figure is video-deployed content). Animated content is a big part of that spend and Adobe Animate still delivers the best "cinematic-quality" interactive products and supports all animation formats across all platforms.

Adobe Animate (aka Flash) remains the choice of Blue Rocket Studios (Hobart) for producing character animation. Their latest 52-episdoe TV production "Fanshaw & Crudnut" is made using Flash CC.

Watch this report on the project from Georgia Love at Blue Rocket Studios, Salamanca Place, Hobart:

Adobe Animate, Toon Boom harmony, SynFig, Tumult Hype 3.5, Sencha or Google Web Designer?
There are alternatives to Animate. Toon Boom Harmony is a very popular tool thanks to its character animation toolset that in some situations (Inverse Kinematics) is better than Animate. It's less than optimal for web animation however.

However Adobe Animate is still the most popular tool for creating animation for web and broadcast thanks to its extensive utility, large established user base and mature learning resources.

There are other options, Synfig is one (with limited web deployment options), it's Open Source and offers a sub-set of Animate's toolset.

Animate | The best 2D animation tool
Animate is a wise choice for developing sophisticated broadcast-ready animated content because it's versatile, flexible and has a wide-range of tools for most animation scenarios.

You can export to a vast range of formats including HTML5 Canvas (for cross-platform deployment) as well as jpg, Illustrator and DXF.

It's primary output file format is .swf, short for Shockwave Flash. Shockwave was the format that Macromedia developed in the early days of Flash. Want to know more on how Flash evolved?

SWFs are no longer supported on mobile, smart phone or iOS.This is where Animate's ability to export to HTML5 /JS (Javascript) now has genuine value since HTML5/JS animation is widely supported by these devices. Note: you do lose a little animation capability if you export to HTML5 compared to the SWF format. We'll explore this later on in the module.

Animate produces small files with big IMPACT !
Animate artwork is based on vector artwork and because of this, animators and designers can produce artwork that behaves and look just like traditional broadcast adverts but without big file sizes. Knowing how to keep file sizes down for adverts is a vital skill for any designer. The bigger the file, the greater the cost to the client.

What can Animate do?

"What can't it do ?" might be a more accurate description of its utility.

Joseph Labrecque explains why Animate is the tool for a lot of scenarios.

Animate is most famous for animation, however and it's been refined to the point where it can be used to develop entire applications (which run on your desktop, mac, or PC ). It is the "Swiss Army Knife" of multimedia development tools.



It can make WebGL interactive animation, GIF animations, menu front-ends for Playstation games, Mobile Apps, produce adverts for web or broadcast TV & database applications for major players in global finance not to mention the myriad of products emerging from "Rich Internet Application"; developers such as Google Maps, Google Earth, Vimeo, VideoSift, FaceBook and Android for mobile / PDA.

What about After Effects?

Adobe After Effects is a fantastic tool for creating broadcast animation. It's the most popular choice of visual effects professionals.

In this module however, we won't be covering After Effects. If you are interested in learning how to use After Effects it's never been easier; there are thousands of tutorial videos on Youtube. Here's a good place to start. In addition, check out these After Effects tutorial videos from Andy Sykes.

Module Outcomes

In a logical sequence of delivery, you are expected to cover the following outcomes:

Learning Resources

Resources to help support your learning are shown below. These are links to websites that offer tutorial support & other resources for animators from beginner to intermediate to expert.

Next up, Lesson 1: Introduction to the drawing tools