# Introduction to Adobe Animate

Canonical URL: <https://www.nobledesktop.com/classes/intro-adobe-animate>

## Overview

Learn how to design and animate interactive HTML5 content using Adobe Animate—perfect for creating professional banner ads and web graphics. This hands-on class is tailored for adult learners and covers essential animation tools, timeline workflows, and scripting for HTML5 Canvas. Whether you're updating your skillset or creating digital ads for the first time, you'll gain practical experience building eye-catching, web-ready animations optimized for performance and compatibility.

## What you'll learn

- Get familiar with the Animate workspace, layout tools, and document settings for HTML5 Canvas projects
- Bring in layered artwork from Photoshop and Illustrator, and manage reusable elements using symbols and the Library panel
- Use motion tweens, easing, and timeline controls to animate objects, text, and graphics with precision
- Build clickable buttons, configure ClickTags, and use built-in ActionScript tools to make banners interactive
- Apply masks, gradients, and custom vector shapes to create polished, visually engaging effects
- Export your final project in HTML5, GIF, or MP4 formats and follow best practices for ad publishing and performance optimization

## Curriculum

#### Session 1: Getting Started with Adobe Animate

- Learning Objectives 
  - Navigate Animate’s interface
  - Set up a document for HTML5 Canvas banners
  - Use layout tools for precise design alignment

- Topics 
  - Course introduction and outcomes overview
  - Creating a new HTML5 Canvas document
  - Interface tour: Stage, Timeline, Properties, Tools, Library
  - Visual aids: rulers, grids, guides, snapping
  - Setting Animate preferences for banner work

- Potential Hands-On Exercise: 
  - Create a new 300x250 layout using guides and imported branding assets (logo, background, etc.)

#### Session 2: Importing Assets and Using Symbols

- Learning Objectives 
  - Import and prepare artwork from Photoshop and Illustrator
  - Understand and use symbols effectively

- Topics 
  - Import formats: PSD, AI, and image files
  - Importing layered artwork and maintaining editability
  - Symbols overview: Graphic, Movie Clip, Button
  - Symbol instances and editing
  - Organizing assets with the Library
  - Sharing Library assets across documents

- Potential Hands-On Exercise: 
  - Import a layered Illustrator file and convert key elements to reusable symbols

#### Session 3: Creating Animation

- Learning Objectives 
  - Use timeline-based animation tools
  - Animate objects using motion tweens and easing

- Topics 
  - Timeline fundamentals: frames, keyframes, blank keyframes
  - Motion tweens, classic tweens, and shape tweens
  - Adjusting motion paths and easing
  - Using motion presets
  - Onion skinning and animation preview tools

- Potential Hands-On Exercise: 
  - Create a simple animation where a logo, headline, and button animate into view

#### Session 4: Working with Text and Interactivity

- Learning Objectives 
  - Animate text in banners
  - Use code snippets for interactivity, including ClickTags

- Topics 
  - Static vs. dynamic text fields
  - Embedding fonts and converting text to shapes
  - Animating text with classic and motion tweens
  - Creating and configuring Button symbols
  - Using the Actions panel and built-in Code Snippets
  - Creating a functioning ClickTag (external link tracking)

- Potential Hands-On Exercise: 
  - Animate a message and set up a working CTA button with ClickTag functionality

#### Session 5: Masks, Drawing Tools, and Visual Effects

- Learning Objectives 
  - Use masks and drawing tools for visual polish
  - Organize content using layers and symbols

- Topics 
  - Creating and animating mask layers
  - Using guide layers for animation control
  - Drawing tools: shape tools, paint bucket, stroke/brush
  - Merge drawing vs. object drawing mode
  - Creating and combining vector shapes
  - Working with gradients and swatches
  - Layer organization and best practices

- Potential Hands-On Exercise: 
  - Design and animate a masked image reveal with layered animated text

#### Session 6: Exporting and Publishing Banner Ads

- Learning Objectives 
  - Export HTML5 banners correctly
  - Understand packaging and ad publishing best practices

- Topics 
  - Export vs. Publish in Animate
  - Publishing for HTML5 Canvas: output folder structure
  - Export formats: HTML5, animated GIF, MP4
  - Adding and testing ClickTags in the published output
  - Banner ad best practices: file size limits, animation duration, fallback assets
  - Browser testing and using ad spec checkers

- Potential Hands-On Exercise: 
  - Import a layered Illustrator file and convert key elements to reusable symbols

## Pricing

**Tuition:** $695