Adobe Animate CC 2018 – HTML5 Banner Ads Course Syllabus

Overview: This project-driven course guides beginners through the complete workflow of designing and developing HTML5 banner ads using Adobe Animate CC 2018. From setting up your first canvas document to exporting optimized, interactive ads for major platforms, each module builds practical skills with hands-on exercises. The course spans approximately 6 hours of focused learning, designed for aspiring motion designers and digital marketers seeking to master ad creation with industry-standard tools.

Module 1: Course Introduction & Animate Setup

Estimated time: 0.5 hours

• Installing Animate CC
• Workspace layout and customization
• HTML5 canvas document settings
• Configure a 300×250 banner document

Module 2: Drawing & Asset Import

Estimated time: 0.75 hours

• Using vector drawing tools in Animate
• Creating and organizing symbols
• Importing Illustrator and Photoshop assets
• Optimizing graphics for web delivery

Module 3: Timeline & Tweening Basics

Estimated time: 1 hour

• Understanding keyframes and frames
• Applying classic and motion tweens
• Using shape tweens for morphing effects
• Applying easing presets for natural motion

Module 4: Advanced Animation Techniques

Estimated time: 1 hour

• Creating mask layers for dynamic reveals
• Nesting symbols for complex animations
• Animating along motion paths
• Using frame scripts for timeline control

Module 5: Interactivity with JavaScript

Estimated time: 1 hour

• Introduction to CanvasJS API
• Implementing clickTag for tracking
• Adding event listeners
• Configuring exit handlers

Module 6: Responsive & Dynamic Banners

Estimated time: 0.75 hours

• Implementing responsive resizing scripts
• Dynamic content replacement for A/B testing
• Ensuring mobile-friendly scaling

Module 7: Optimization & Performance

Estimated time: 0.75 hours

• Compressing assets for faster loading
• Using sprite sheets efficiently
• Applying lazy-loading techniques
• Reducing file size under 200 KB

Module 8: Exporting & Ad Network Packaging

Estimated time: 0.5 hours

• Configuring publishing settings
• Embedding required libraries
• Creating ZIP packages with HTML/CSS/JS
• Preparing banners for Google Display & DoubleClick

Prerequisites

• Familiarity with basic computer navigation
• Adobe Animate CC subscription (required)
• Basic understanding of web graphics preferred

What You'll Be Able to Do After

• Create production-ready HTML5 banner ads
• Apply timeline animations and motion tweens effectively
• Add interactivity using JavaScript and event handlers
• Optimize banners for fast loading and small file size
• Package ads according to major ad network specifications