Introduction to Adobe Animate

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