So-called micro animations on web pages are a popular trend that is steadily gaining popularity. A few years ago, the animation tool Adobe Animate CC was developed from the former Adobe program Flash Professional, which can be used to create interactive, web-based content. Adobe Animate thus opens new doors for everything needed to design and code to create imaginative worlds through animation.
In the world of animation, Adobe offers three different applications that can be used to bring ideas to life: Character Animator, After Effects, and Animate. With the latter, Adobe relies on modern technologies such as HTML5 and WebGL; at the same time, the obsolete Flash format SWF, Adobe Air and other video formats are also supported.
For many years Adobe had completely rewritten the tool. Given the increasing popularity of animation on the World Wide Web, let’s take a closer look at Adobe Animate.
A quickie to get on board
Adobe Animate can import graphics that have already been created. But it is also possible to create graphics directly in Animate: Just like in Adobe Illustrator, they can be created using the pen or brush tool. Once a graphic has been designed, it can be animated in various ways using so-called "tweens" or single frame animations (frame to frame). Subsequently, the animation can be used for different media or. Devices are exported. The resulting animations can be delivered as video, animated GIF, or SWF, among other formats.
The Pro’s of Adobe Animate
En Detail /// Adobe Animate is a vector-based tool. It thus supports the creation and editing of vector-based graphics. These can be scaled arbitrarily and especially lossless. Already created graphics can be imported via the control panel. Even easier to import via copy-paste from Adobe Illustrator.
Adobe Animate offers three different types of tweens.
As if by magic /// Tweens can be used to quickly create animations. Roughly summarized: You create an image on one layer with only one element if possible. This is the starting point. Another image is inserted at the desired temporal endpoint. The element in that image can be repositioned, transformed, or even deformed as desired. By right-clicking between the two images, the desired tween type can be selected. Adobe Animate already generates an animation in the form of intermediate images between the two images.
- Classic Tweens: These tweens are outdated, more complicated to create, and have little flexibility. Animate offers these tweens only for transitional purposes.
- Motion tweens: This type of tweens automatically calculates animation movements between two images and their object properties. Such object properties refer to the size, color, position, effects or rotations of an element, among others.
- Shape Tweens: Shape tweens automatically inpolate intermediate shapes between elements of two images.
No code knowledge required /// No coding skills needed to create animated SVGs with Adobe Animiate. So if you are more at home in the design world than in the world of</code>, Can create great animation SVGs with Animate. Since these have a smaller file size than animated GIFs, they can be embedded well into a web page without affecting the loading time of the website.
Adobe Animate covers a wide range for many different requirements.
New web alignment /// About Adobe Flash said that due to HTML5, WebGL and WebAssembly it was redundant, pointless and an unnecessary danger for the user. Probably a reason why Adobe came around the corner with Animate, because the "daughter application" supports the creation of extensive and interactive HTML5 content through the new document type "HTML5 Canvas". So projects can be published as HTML5. In addition, CreateJS is integrated with Animate, which enables interactive content for Open Web technology via HTML5.
Just Once /// Different devices or operating systems also have different requirements for a file. This can be very tedious as well as labor and time intensive. With Adobe Animate, a project only needs to be created once and can then be deployed to virtually any device or operating system.
Old familiar /// Adobe Animate includes many tools that we already know from other applications, such as Adobe Illustrator or Adobe After Effects. This makes it much easier to create new graphics or to work with the timeline.
Dynamic movements can be created using the Bone tool.
Let’s bone it! /// Speaking of transforming and deforming, the Bone tool should also be mentioned here, which we already know from After Effects. This tool can be used to create skeletal connections between the individual shapes of a character. This is a quick and easy way to create natural and dynamic movements. A video from Adobe explains how it works: https://helpx.adobe.com/en/animate/how-to/bone-tool-animation.html
Intuitive(er) /// If not intuitive, then more intuitive: Adobe Animate may not have as much to offer as an animation tool as Adobe After Effects, but that has the advantage that the learning curve is not as large as with the "sibling tool". At the same time it remains a professional animation program with many features that need to be learned.
Lossless preview /// Animate offers a preview option without FPS loss. Unlike After Effects, where the workspace and rendered images overlap, Animate has two distinct workspaces. While special effects can only be used to a limited extent in a workspace, better quality can be achieved in the rendered area.
dot, comma, dash /// At Machart Studios, we work with Walcom graphics tablets to create great illustrations. All the better that Adobe Animate supports drawing with tablets from Wacom. Such graphics tablets can, depending on the project, be great time savers and make animating easier.
Images from Adobe Stock can be searched and licensed directly in Animate.
Directly on site /// It goes without saying that you can also import images into Adobe Animate. But for this you do not even have to leave the application. Directly in the tool itself, the window "CC Libraries" can be used to search own libraries, but also the big world of Adobe Stock, download thumbnails and license them.
The con’s of Adobe Animate
Luck of the draw when exporting /// As of mid-2019, Adobe supports the Snap plugin.svg no longer. With this it was possible to export animated SVGs from within the application. This outrages many communities on the web – and us too. So we started looking for an alternative: An extension with the simple name "SVG Animation" should provide a remedy. Unfortunately, we found that with more extensive animation, bugs can occur more often when exporting as animated SVG, so that the project is not exported as such or is displayed incorrectly.
Shape marks can be used to enhance intermediate images in an animation.
Not always the way you want /// Especially when creating form tweens, the animation may not always look the way you want it to look. To improve the animation, so-called form marks can be set. These mark a point in the source shape that matches a specific point in the final shape. Mostly this works quite well. But unfortunately it also happens not too rarely that the animation suddenly runs unsightly at other points and one must set further form marks.
There’s more /// Even though Animate is relatively easy to understand and use, creative freedom suffers due to the limited number of features. Animate is designed especially for 2D character animation. To create large compositions, use extensive special effects, or create 3D compositions, it’s better to go with Adobe After Effects. Another common complaint is that some features require the use of external plug-ins or tools instead of being built directly into the program by Adobe. The latest features on Adobe Animate can be read here: https://helpx.adobe.com/en/animate/using/whats-new.html
What remains to be said in summary
Depending on the requirements and the demands on an animation, Adobe Animate is a good animation program. While dubbed by some as a beginner’s tool, it’s nearly impossible to properly understand the depths of the application without a lot of trial and error and tutorials. But if you are willing and able to invest time and effort, you can use Adobe Animate to create great animations, even if you are a beginner.
Adobe Animate is less comprehensive than Adobe After Effects. Special and extensive special effects are therefore better done with Adobe After Effects. You should also keep in mind the type of animation, because Adobe Animate was developed for 2D animation. For 3D animations, the more complex After Effects should be used.
Small tip on the side: As with all projects, the numerous specifications and export options that Adobe Animate has to offer should be well thought out before creating a new project, and document settings should be specified correctly from the start.
It is important to us that the graphics and animations we create work flawlessly and that we get the best out of them for our customers. Since Adobe Animate cannot guarantee a problem-free export as animated SVG, we create our animated SVGs via CSS and Javascript. The results are impressive!
But if Adobe Animate can smoothly export animated SVGs, the tool could become a good alternative for creating them in the future.
Animations are not your thing, but illustrations are? Then check out our post on illustrations in advertising.