What you'll learn

Optimise images for banners
Make web animations using Animate CC
Make use of webfonts within Animate CC
Add clickTag and prepare banner for DoubleClick

Course content

5 sections • 12 lectures • 1h 10m total length

Introduction to HTML5 Banners3:25
In this lecture, I'll explain you what are HTML5 banners. I'll then briefly describe the most common methods & softwares that are used to produce these type of banners. I'll also talk to you about ad-servers and the importance to follow their technical guidelines.

Preparing banner assets2:30
Before starting to build your banner in Animate CC, you need to export all the required images from Photoshop ( or the tool that has been used to design the banner ). Most Ad-servers have restriction in terms of weight of banner. I will therefore give you some general tips on how to correctly export the images so that they are fully optimised.
Importing and adding assets on stage7:20
Once you have all you assets ready, you need to import them into the Animate CC library and start organising your timeline by creating layers.
Adding Keyframes on the timeline3:50
Masking2:25
The concept of Masking is present in many photo editing tools. Animate CC also provide this feature so that you can hide or show any area of a photo or symbol by a desired shape.
Animating the symbols10:14
This lecture fully focus on animations and transitions. At the end of this lecture, you will have a fully animated banner.
Adding a button5:40
Most banners have buttons which incite users to click on them. In this lecture, we will create an animated button with a different design for the hover state.

Looping3:28
Often, adservers have restrictions on the amount of times that a banner should loop. In this lecture, we will see how to control the amount of loops.
ClickTag4:20
Banners need to be clickable and open a certain link. In this lecture, we will see how to make the whole banner clickable on Animate CC.
Preparing for DoubleClick2:06
Each ad server has it’s own set of guidelines on how to implement the ClickTag. We will take DoubleClick’s guidelines and implement it in our banner.

Requirements

Have basic Photoshop skills to export images
Be creative!

Description

Creating HTML5 banners that work seamlessly through all browsers can be a tedious task if developed via coding only. Animate CC now allows web developers and creative engineers to concentrate on the creative side of the banners without having to worry about coding while publishing on the HTML5 canvas element, rendering smooth animations.

In this tutorial, I will teach you how to build an HTML5 banner from scratch. In the first section, I will explain you a few things about ad-servers and HTML5 banners. I'll then give you tips on how to properly export images from your Image software such as Photoshop. We will progressively build our banner by importing the images, organise the layers and work on the animations.

There is also one whole chapter dedicated to Fonts, which is of great importance. I'll teach you 5 different methods for integrating fonts including custom CSS font.

In the last chapter, we will finalise the banner by making it loop the required amount of times, add the clickthrough URL and prepare it for publish on adServer.

Who this course is for:

People working or intend to work as creative engineers
Anyone who wants to build HTML5 banners or animations for the web!

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 3min

Animate CC workspace1 lecture • 14min

Building the banner6 lectures • 32min

Fonts1 lecture • 11min

Finishing the banner3 lectures • 10min

Requirements

Description

Who this course is for: