Create Web Banners, Animation & Interactivity using Animate

This one-day introduction to Adobe Animate course will provide both graphic designers and web developers with the skills needed to begin creating eye-catching animated content for the web.

Learn to build animations and interactivity for the web that will work on iPhones, iPads, tablets and desktop computers alike. With an intuitive interface, that will be familiar to Flash users, Adobe Animate offers design tools for text, images, animation and interaction. Animate seamlessly produces the necessary HTML5, JavaScript and CSS, compatible with all current browsers and playable on all kinds of contemporary devices.

No previous coding experience is required to attend this course, however an understanding of basic HTML & CSS is helpful.

Why train with The Web School

Expert instructors with proven teaching skills

Free tech support for 12 months following your course

Free course refreshers

Professional training environment with Macs and PCs

Book a Course

Course outline - WHAT you’ll learn

Animate Basics

  • What Animate does, and how it works
  • About Vector graphics and bitmaps
  • The Animate workspace
  • Setting Stage dimensions, background colour, frame rate and scaling options
  • Understanding Animate’s output formats: HTML5 canvas, WebGL, swf and others

Drawing in Animate

  • Using the Animate drawing tools – the paint brush, shape tools
  • Shape and Object drawing modes
  • Applying arrowheads and variable line widths
  • Selecting and applying colours
  • Creating complex elements by merging and subtracting
  • Grouping elements
  • Stacking order
  • Scaling and rotating elements

Banner Ads

  • Optimising content and animation for file size
  • Creating versions by resizing the stage and content
  • Adding Click Through code

Importing Bitmapped Images

  • Understanding file formats and how they are optimised by Animate
  • Importing from Photoshop
  • Asset preparation – understanding compression and file size

Importing Vector Graphics

  • Importing content from Illustrator
  • Working with SVG files

Animation Techniques

  • Understanding Keyframes and tweens
  • Motion Tweening
  • Shape Tweening
  • Editing Motion Paths
  • Reversing direction
  • Animating text
  • Animating fades and colour effects
  • Ease curves


  • Understanding the different symbol types
  • Complex animation with symbols
  • Creating reusable elements

Interactivity and Coding

  • Adding simple scripts using code snippets
  • Stopping a movie
  • Creating simple interactive elements with button symbols


  • Exporting movies – animated gif, swf
  • Exporting video
  • Publish settings for HTML5
  • Exporting self running projectors and OAM packages for other applications

  • Contact Us