ANIMATION FOR THE WEB

LEARN TO CREATE PROFESSIONAL WEB ANIMATIONS

Animation for the Web is a two day training course which takes you through the basics of using the Adobe Animate package to create animated web content using standards like HTML5, CSS3 and JavaScript.

The course covers topics such as the Animate interface, working with the timeline, importing graphics, creating animations, creating realistic motion, using animation within your webpages and more.

This course focuses on the Adobe Animate application and does not cover the actual HTML5 syntax / code, which is covered in our HTML5 Getting Started and Advanced HTML5 courses.

Looking to Book

Private Course Option

We currently offer this class as a closed course. Please contact us to discuss the options and prices.

The Adobe Animate course covers all the basic skills needed to start creating animated web content using Adobe Animate. The topics we cover are listed below.

Adobe Animate  - Course Topics

Overview of Animate

  • What is Animate for
  • What can you export Animate files to

Working with Animate documents

  • Creating a new HTML5 canvas document
  • Creating a new WebGL document
  • File types that you can work with
  • Working with other Adobe applications
  • Templates
  • Document properties
  • Using the property inspector
  • Saving an Animate file…
  • …to an fla
  • …to an xfl
  • …as a template
  • OAM Publishing
  • Placing your work in Dreamweaver
  • Placing your work in Muse
  • Placing your work InDesign

Animate workflow

  • Using the Animate workspace
  • Libraries
  • Setting up your Library
  • Populating your Library
  • Organising your Library
  • The Stage
  • Placing your content
  • Animating your content
  • Testing your animation
  • Uing Typekit web fonts

The timeline

  • What is the timeline
  • Multiple timelines
  • Layers
  • Layer options
  • Using multiple layers

The tools

  • Creating and editing shapes
  • Drawing
  • The pen tool
  • The pencil, brush, and paint brush tools
  • Using colour
  • Fill and stroke

Symbols

  • Creating and using symbols
  • Types of symbols
  • MovieClips
  • Buttons
  • Graphic
  • Working with symbols
  • Using MovieClips
  • Using buttons
  • Using graphic symbols

Animation and Interactivity

  • Basics of animation
  • Tweening
  • Types of tweening
  • Classic tween animation
  • Motion tweens
  • Shape tweening
  • Using variable stroke width for animation
  • Using the stroke colour for animation
  • Using the Motion Editor
  • Frames and keyframes
  • Frame-by-frame animation
  • Animating with the Bone tool

Using audio and video

  • Importing audio
  • Importing video
  • What type of audio/video files can be used
  • Video cue points

Converting and Exporting your work

  • Publishing an HTML5 Canvas document
  • Exporting to WebGL
  • Publishing your content on multiple platforms
  • Document settings
  • Publish settings
  • Best practice

The Adobe Animate course introduces you how to build animated web content that is based on modern standards and doesn't require third party browser plugins

You will learn

  • How to create HTML5 animations using the Animate interface
  • How to use the timeline, the stage, and how to import assets
  • How to add keyframes to your animation
  • How to control your animation by adding events
  • How to apply easing to your animations
  • How to preview your animations
  • How to export your animations to Dreamweaver or any other development environment
  • How to create your templates and how to use them

Who should attend this course

This course is aimed at web designers who want to be able to create animations on their web pages without the use of 3rd party plugins.

Before attending this course you should have attended Creating HTML5 and CSS3 with DreamWeaver course and completed the online Intro to CSS course or have equivalent experience.

The Adobe Animate course covers all the basic skills needed to start creating animated web content using Adobe Animate. The topics we cover are listed below.

Adobe Animate  - Course Topics

Overview of Animate

  • What is Animate for
  • What can you export Animate files to

Working with Animate documents

  • Creating a new HTML5 canvas document
  • Creating a new WebGL document
  • File types that you can work with
  • Working with other Adobe applications
  • Templates
  • Document properties
  • Using the property inspector
  • Saving an Animate file…
  • …to an fla
  • …to an xfl
  • …as a template
  • OAM Publishing
  • Placing your work in Dreamweaver
  • Placing your work in Muse
  • Placing your work InDesign

Animate workflow

  • Using the Animate workspace
  • Libraries
  • Setting up your Library
  • Populating your Library
  • Organising your Library
  • The Stage
  • Placing your content
  • Animating your content
  • Testing your animation
  • Uing Typekit web fonts

The timeline

  • What is the timeline
  • Multiple timelines
  • Layers
  • Layer options
  • Using multiple layers

The tools

  • Creating and editing shapes
  • Drawing
  • The pen tool
  • The pencil, brush, and paint brush tools
  • Using colour
  • Fill and stroke

Symbols

  • Creating and using symbols
  • Types of symbols
  • MovieClips
  • Buttons
  • Graphic
  • Working with symbols
  • Using MovieClips
  • Using buttons
  • Using graphic symbols

Animation and Interactivity

  • Basics of animation
  • Tweening
  • Types of tweening
  • Classic tween animation
  • Motion tweens
  • Shape tweening
  • Using variable stroke width for animation
  • Using the stroke colour for animation
  • Using the Motion Editor
  • Frames and keyframes
  • Frame-by-frame animation
  • Animating with the Bone tool

Using audio and video

  • Importing audio
  • Importing video
  • What type of audio/video files can be used
  • Video cue points

Converting and Exporting your work

  • Publishing an HTML5 Canvas document
  • Exporting to WebGL
  • Publishing your content on multiple platforms
  • Document settings
  • Publish settings
  • Best practice

The Adobe Animate course introduces you how to build animated web content that is based on modern standards and doesn't require third party browser plugins

You will learn

  • How to create HTML5 animations using the Animate interface
  • How to use the timeline, the stage, and how to import assets
  • How to add keyframes to your animation
  • How to control your animation by adding events
  • How to apply easing to your animations
  • How to preview your animations
  • How to export your animations to Dreamweaver or any other development environment
  • How to create your templates and how to use them

Who should attend this course

This course is aimed at web designers who want to be able to create animations on their web pages without the use of 3rd party plugins.

Before attending this course you should have attended Creating HTML5 and CSS3 with DreamWeaver course and completed the online Intro to CSS course or have equivalent experience.

We use cookies to improve your browsing experience on our website and to understand where our visitors are coming from. By clicking ‘Accept cookies’, you consent to our use of cookies.