Adobe Animate CC - Animation for HTML5: Design & Publish (level 1)


Animate is the new name that Adobe has chosen for Flash’s successor. In a time when the web gdoesn’t need any plugins or extensions, the Flash format and its philosophy had made their time. However, it was impossible for Adobe not to react. Creative Cloud users are thus proposed to embrace a new platform for creating, animating and distributing rich-multimedia content for the modern web. The aim of this course is to familiarize learners with the software interface so that they can use any type of graphic creations (vector image created in Illustrator, enhanced pictures in Photoshop, graphics and texts created directly in Animate) to easily create exportable animations in the form of video or advertising f animation or websites. The course focuses on the basic tools for animations as well as on proven techniques for the rapid creation of complex animations.


This training is intended to:

  • Self-educated but skilled webdesigners/webpublisher
  • Self-educated Photoshop, Illustrator or Dreamweaver user


After completing this course, participants should have:

  • Experience in graphical design softwares such as Photoshop or Illustrator
  • Sense of creativity and a vocation for animation; a good experience of web content formats

At course completion

After completing this course, participants should be able to:

  • Create and import graphic designs and videos
  • Create animations with shapes and objects; save custom reusable motion presets
  • Create animations with colors, color-gradients, transparency and Filters
  • Add type for animations; how to include and use Typekit fonts
  • Create and use Mask-Layers and Guide-Layers in creative ways
  • Create and organize Symbols in the Library, share Library items
  • Understand principles for creative and easy animations: loops, clips, pendulum
  • Create web compliant videos (mp4 - iOS comliant)
  • Create clickable animations in HTML5 format (iOS comliant) for advertising on websites

Course outline

Module 1: Shape drawing, drawing modes

  • Modifying shapes properties
  • Fills and strokes, gradients, transparency and Pattern brushes
  • Add and edit text

Module 2: Transforming shape

  • Editing anchor points and curves with the Selection, the Direct Selection and the Pen tools

Module 3: Understanding the Stage, the timeline and the layers and their properties

  • Use Typekit webfonts. Text and font usage

Module 4: Animation with Shape-Tween; adding Shape-Tween hints

Module 5: Using Shape-Tweens and Mask Layers

  • Copy, paste and reverse frames and layers

Module 6: Import JPG, PNG, Illustrator and Photoshop image files

  • Importation options
  • Exportation properties with the Library

Module 7: Symbols and Instances

  • Editing Symbols in the Library or «in place»
  • Applying color and transparency effects and adding Filters to Symbols

Module 8: Using Motion Tween with the Motion Presets panel

  • Using Classic Tween with Layer Guide

Module 9: Symbols and animations, technics

  • Duplicating and Swapping Symbols
  • Nesting Shape Tween animations and Graphic Symbols in Movie-Clip Symbols
  • Controlling different timelines with Actions

Module 10: Adding sound

  • Sound files importation settings
  • Exporting for the web with HTML5 Canvas publish settings
  • Exporting a full animation as a MP4 video with sound