Adobe Animate CC: Creating an HTML5 Banner Ad

Create a stunning animated banner ad that works in all modern web browsers using Adobe Animate CC.

Designing and producing animated ads that look great and work as expected in modern browsers can be a headache—unless you're using the new release of Adobe Animate CC. Animate CC allows you to export HTML5 and JavaScript files that are responsive and look great on any platform. This project takes you from a blank HTML Canvas project all the way to a finished banner ad, using Animate CC. Chris Converse shows how to assemble a composition using existing artwork and text, animate the different elements, add web fonts and a call to action, and make the ad clickable and controllable by the user. The course wraps up with a look at the different publishing options available in Animate CC.

Introduction

• Welcome
• About the exercise files

1. Creating and Importing Artwork

• Creating a new HTML Canvas project
• Importing artwork to the library
• Creating a composition
• Adding text and shapes

2. Creating Animations

• Creating and animating a symbol
• Transformations and easing effects
• Creating and animating a mask
• Creating a movie clip of remaining products
• Masking and animating the first two products
• Animating the final product

3. Adding Scripts (Actions) for Playback and Interaction

• Adding timeline actions
• Testing your project in a browser
• Making the ad clickable

4. Adding Web Fonts and Final Animations

• Animating the text box
• Using a Typekit web font
• Animating the text
• Creating the call-to-action symbol
• Animating the call-to-action symbol

5. Publish Settings

• Exploring the publish options
• Options for optimizing images