Creating HTML5 banners & animations using Adobe Animate CC
4.2 (19 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,364 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Creating HTML5 banners & animations using Adobe Animate CC to your Wishlist.

Add to Wishlist

Creating HTML5 banners & animations using Adobe Animate CC

Learn how to create industry standard, high quality HTML5 banners quickly and efficiently using Adobe Animate CC 2017
New
4.2 (19 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,364 students enrolled
Created by Yashin Soraballee
Last updated 8/2017
English
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 4 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 is the target audience?
  • People working or intend to work as creative engineers
  • Anyone who wants to build HTML5 banners or animations for the web!
Compare to Other Animation Courses
Curriculum For This Course
12 Lectures
01:10:26
+
Introduction
1 Lecture 03: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.

Preview 03:25
+
Animate CC workspace
1 Lecture 13:46

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.

Preview 13:46
+
Building the banner
6 Lectures 31:59

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. 

Preparing banner assets
02:30

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.

Importing and adding assets on stage
07:20

Adding Keyframes on the timeline
03:50

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.

Masking
02:25

This lecture fully focus on animations and transitions. At the end of this lecture, you will have a fully animated banner.

Animating the symbols
10:14

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.

Adding a button
05:40
+
Fonts
1 Lecture 11:22

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!

Fonts in Animate CC
11:22
+
Finishing the banner
3 Lectures 09:54

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.

Looping
03:28

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.

ClickTag
04:20

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.

Preparing for DoubleClick
02:06
About the Instructor
Yashin Soraballee
4.2 Average rating
19 Reviews
2,364 Students
1 Course
Technical Lead / Trainer

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.