The Ropes of Animated Content

Last week I wrote about how Animated Banners are basically made, by who, and what kind of jobs are open for it. However, this week, I’ll get into the nitty-gritty details, the bread and butter and tell you exactly HOW it’s done! Animated Web Content… a pretty big deal for advertising! It can make or break your design, and a nicely created and balanced interactive banner is just bound to get you some good viewers and customers! When done well, animated web banners are truly forces to be reckoned with, with their fun interaction, pretty graphics, and plethora of information, so let’s hop on in!

Animated Banners- Utilizing Software

While static banners are usually made in Adobe Photoshop or Illustrator, animated ones are commonly made in Adobe Animate. I’d recommend Adobe Animate, certainly! Animate allows creation of HTML5 ads, along with FLASH and GIF formatted ads. However, I’d also recommend exporting your finished ad as HTML5 as it is utilized by all browsers.

Animate CC has great features and is helpful for people to make animated web banners with not too much coding. There may be code still involved, however, luckily, it shouldn’t be too hard to go through and learn as it’s pretty basic, such as telling your ad when to start and how to function and act.

Here is an extraordinarily helpful tutorial that I’ve utilized myself. It’s a pretty handy tutorial that goes over all aspects of the program and it’s very straightforward, as well as thorough. 10/10 would recommend!

Animate’s Timelines and Keyframes

Ah yes… timelines… how you animate things. Within Animate CC, they have two very important functions- timelines and keyframes. Both are crucial to the creation of any animation, of course, even animations not in Animate CC! Familiarize yourself with these words, because I’m going to repeat them plenty of times.

Timeline, the most crucial part of animate. Animate is well, animation! In order to animate, you have to know what is going to happen when, how it’ll move, how it’ll interact, what may change! Laying out a timeline requires utilizing your layers and images, arranging the content into a bar that will flow with time.

The few major pieces of functional timeline is layers (just like all programs), frames, and a funny little dial called the playhead. Layers are used to hold different information and image information for organization, looks, etc, just like all other Adobe programs.

Frames are similar, of course, although they are a bit more complex. A frame may be big or small, but frames are every still picture you see in an animation. That makes a lot of frames! Luckily, with animate, you most likely won’t have to do frame-by-frame animation, leave that to cartoons and such. Working with frames allows you to control the content and how it moves in an animation.

Here come keyframes! Keyframes are important points within frames, or outside of frames. A keyframe provides the backbone of movement and contains the information required to make the animation move. Within Animate CC, you can also have your keyframes contain actionscript to control specific aspects of the document in question!

Finally, the playhead. A little red dial that allows you to see what’s playing. It runs along the surface of the frames and keyframes, and everytime the little dial hits a different part of the frame, the animation played changes as it moves along. This playhead is essentially showing where you are in the animation and pointing out what it should be doing.

Softwares Utilizing Animation

Other than Animate CC, which is fittingly named, plenty of other tools that are in the Adobe Cloud allow the usage of timelines, frames, and keyframes. One of these is Adobe Photoshop, which can also be used for some short and small animations. It’s incredibly handy to have all of these at your fingertips. Any digital designer can create an animation via these programs, and they’re all extremely good to use and helpful to learn. When I tried out Animate CC it was very similar to Photoshop’s animation tool, of course it was more robust, but it was familiar to see.