Learn how to create an HTML banner ad for specific sizes and how to optimize for certain specifications in Animate CC.
- [Voiceover] Anime is used a lot for web banner ads.…So I thought I'd take this opportunity…to make a web banner ad.…It's really pretty straightforward.…A lot of times, you just gotta reference the specs…and make sure everything fits accordingly.…So notice how I'm on Google's site.…Their advertising policy's Help.…I'll scroll down.…Notice how you can make various type…of non-animated and animated ads.…But I wanna dive into HTML5 ads.…And this is pretty standard for advertisers, these different…sizes, especially the leaderboard, 728 by 90.…
So I need to resize my banner.…I need to make sure that it's 150k or smaller.…Smaller is always better.…And these are the file types that it accepts, alright?…So, I'll dive into Animate and the first thing…I wanna point it is if you go to File New,…and you go into Templates, there are actually…advertising templates built into Animate.…So you can literally take any one of these 728 by 90.…Also there are banners, so these have a couple…things already added to them as well.…
But there's thing built into Animate.…
Author
Paul Trani
Released
7/13/2016- Setting up projects and changing project types
- Using text and fonts, including web fonts
- Creating graphics
- Importing raster images and vector graphics
- Working with the timeline and keyframes
- Using classic, motion, and shape tweens
- Adding ActionScript and JavaScript to buttons
- Creating scripted animation
- Publishing to HTML, SWF, SVG, and WebGL
Skill Level Beginner
Duration
Views
-
Introduction
-
Welcome1m 2s
-
-
1. Creating Graphics and Text
-
File types and the workspace2m 34s
-
Using the Drawing tools4m 4s
-
Working with text5m 6s
-
-
2. Using the Library and Symbols
-
Ungrouping and manipulating3m 32s
-
-
3. Animation Basics
-
Creating a classic tween3m 54s
-
Adding easing1m 58s
-
Animating effects1m 59s
-
4. Advanced Animation
-
Creating an animated mask1m 33s
-
Creating a motion tween2m 29s
-
Adding 3D rotation1m 38s
-
5. Exporting Graphics and Animation
-
Creating an animated GIF2m 57s
-
6. Adding ActionScript and JavaScript
-
Adding ActionScript3m 44s
-
Creating HTML content2m 7s
-
Adding JavaScript3m 12s
-
-
7. Creating Banner Ads
-
Creating an HTML 5 banner ad4m 30s
-
Creating a Flash banner ad4m 31s
-
-
Conclusion
-
Next steps29s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Creating an HTML 5 banner ad