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.
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.
I'll introduce you to the Animate CC workspace in this Lecture. It is important that you get familiar to the software's interface before starting any serious work. You will learn about the Tool panel, the Timeline and the Library. At the end of this lecture, you will also have some basic skills needed to produce simple animations.
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.
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.
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.
This lecture fully focus on animations and transitions. At the end of this lecture, you will have a fully animated banner.
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.
There are 5 methods to add fonts in Animate CC. I'll teach you all of them including a trick to include your own custom CCS webfont!
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.
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.
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.
Being a design and coding addict while being a young teenager, the natural career choice would be a web engineer. After much experience gained as a developer, I became at a young age, a technical project manager with responsibilities in team and project management. I am also responsible for training of staff on front-end technologies.
Being an all-time passionate in programming, I always keep myself up to date with the latest evolution in web technologies. Always having plenty of ideas in mind, I keep developing & releasing new applications/websites as a hobby and for testing new frameworks.