Month with Animate CC

A description of my experience of moving from Flash to Animate CC and creating banners in the all-powerful HTML5 format. Many pictures under the cut

A bit of historical insight and terms

Personally, I myself am familiar with Flash for more than 10 years and have a little idea how this technology works from the inside.

About the same age I have been building websites, including in the “modern” HTML5 language, which, as they say, is able to do everything. No, really, sometimes oborotnye designers sent such interfaces, which did not exist in nature, they had to be invented, hiding behind the phrase "you can write everything on HTML5!".

I do not claim the special artistic value of my creations, but the number of banners drawn by me has long exceeded a thousand, and I continue to draw them almost every day.
')
Over the past 5 years, flash has not kicked just lazy, and not really understanding the question. Personally, I have never seen any brakes or leaks, and about the very first statement from Steve Jobs about the fact that "Flash is not sharpened by a finger" - this is completely funny. The most obvious reason for Apple’s opposition to the flash on iPhones is on the surface, but that’s not the point.

We are approaching the denouement of terminology. HTML is a markup language for text and the layout of elements on a page. He does not know how to perform any actions on his own. “HTML5 innovations” instead of Flash are usually understood as playing videos without Flash, animation without Flash, multi-loading files without Flash, and some other things.

Despite the praises heard from everywhere, not a single sane animation editor appeared on the “omnipotent” HTML5, while Adobe did not translate Flash CC into Animate CC, adding, in fact, only export to HTML5.

Interface

The interface of Animate CC itself does not differ at all from Flash, unlike Edge Animate, which was wildly unusual. There is nothing more to say, and I didn’t notice the difference with CS6, which I used for a long time. Banners do not need AS3, and this was the latest version that supports AS2. Swiffy Converter, which made Google, was friends only with AS2.

* AS2,3 - Action Script built into Flash programming language that allows you to make the entire non-animation component of the video - so that the buttons are pressed so that the movie pauses on the necessary frames so that the information can be read, so that interactive scenarios for interacting with the video can run. In fact, this is a fairly powerful language, and I use only 0.000001% of its functionality.

Drawing engine

Naturally, the objects themselves cannot move inside the roller, for this it is necessary that they be moved, shown and hidden by some kind of engine. Animate CC uses CreateJS for HTML5 Canvas projects, which welcomes each new project with a great warning.

:
EaselJS 0, 1. , gotoAndStop gotoAndPlay.

It's nice that even warned. Apparently, this is an unrealistic task - to subtract one by one from the frame to which you want to go.

Timeline and Workspace

Since The interface has not undergone any changes. Everything is absolutely standard for me here. No difference. Since the system is set to Russian, the Russian version of the package has been downloaded. It doesn’t really bother me, because I use hotkeys, although sometimes I hang on what I need to select from the menu.



We now turn to what I constantly use:

Standard Flash Filters

Filters are one of the very frequent components of any banners, they allow you to achieve the desired result very quickly. I will consider 3 filters that I used extremely often before. In flash filters are part of the standard, and in my work they did not have any impact on performance, and they could not in principle. Hereinafter I will use export to GIF to understand the difference.

Shadow

Shadow is one of the easiest options to make parts of a banner larger and focus on the necessary blocks. Naturally, I took an overly strong shadow to illustrate the difference.
I compare:

Flash	CreateJS

Yes, shadow animation is not possible. Moreover, if the video is longer than what I presented for the test, the shadow turns into what is unknown.
It is also worth mentioning here that in the editor and the finished html5 the shadows (and indeed all the effects) look very different.

Editor	Result

When exporting in trace, you can see the following inscription:
, , . (4)
Well, thank you for warning me ...

The performance of the banner with shadows leaves much to be desired, well, they also warned. Erasing the shadows from these substrates, I reduced the load to 40%. Flash drew all of this with 23% of the load, along with shadows, of course

Glow

One of the easiest ways to highlight text on a colorful background is to add a stroke to it, this is simply done using a glow with a large percentage of intensity.

Flash	CreateJS

At this very time in the editor everything is the same, “Visibility is zero, I am going by instruments”:



There is one possible solution to this problem, if necessary - I will share it, substrates for letters are used extremely often and simply cannot live without them.

In addition, the glow is not only a stroke of letters, but the result hints that it will not

Flash	CreateJS	In the editor

Blur

No comments. Blur is available only for static objects, so it is impossible to use this filter for the appearance of text.

Flash	CreateJS

As the above-mentioned glitches can exist with the ubiquitous penetration of the same SVG-filters and filters in CSS - I can not imagine.

Export and Packaging Issues

Everyone is used to the fact that the flash movie is a self-contained file. Exporting to HTML5 spawns a bunch of files, instead of one. The Swiffy project, invented by Google for converting SWF to HTML, packed everything into a single HTML file. Apparently, such a task proved to be an unbearable burden for the creators of Animate CC. A detailed article about putting "everything" inside a single file for Doubleclick can be read here . I made my converter on the fly, cutting the construction of a couple of functions into php, but it’s far from being ideal - even to the draft. My problem solves - and all right.

Rubber banners

By default, Animate seems to support the “rubberiness” of banners, but usually under rubber banners they mean those that stretch horizontally, and not proportionally along both axes. In the export template, this is called responsive scaling, and in the case of banners that stretch only along the X axis, this led to funny glitches until I cut it out of the template



In general, you can abandon the idea of ​​stretching a banner altogether, simply take the maximum size of the banner space, specify the width of the movie equal to the minimum size of the banner space and trim a part using overflow: hidden, then center the CANVAS element (indicating its width equal to the maximum size of the banner space) horizontals inside the link, which occupies 100% of the width, is even slightly simpler here than it was in FLASH and does not require any additional scripts inside the movie, only css.

---

Total

You can live, you can use, the brakes can not be tolerated. For my main client under the subcontract, a restriction was introduced - no more than 5 scenes per banner, otherwise everything starts to slow down wildly on a large news site with a bunch of banner places. Flash is very long and extremely quickly drawn by a video card of any kind, and the Holy Grail in the form of the magical abbreviations HTML5 and CSS3 has so far been made from papier-mâché in terms of animation and interactive elements. In particular, on mobile devices, for which Flash is allegedly buried, the performance of this kind of commercials raises serious doubts. Not a single standard will be torn apart, until the flash is finally buried.