Jump to content
Search Community

Drop Shadow filter hack in Animate CC Canvas

somnamblst test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

If you watched the MAX presentation on Flash/Animate CC canvas export you heard the discouraging words regarding the use of filters we relied on during the SWF days. In fact if you try to use a drop shadow anyways, you will see your shadow not tween separately from the object you applied it to. And we are also being warned that filters are expensive* to render.

 

But I really need a drop shadow....

 

Enter hack

 

I duplicated my symbol, and placed a keyframe with the duplicate symbol right after my tween, my duplicate symbol which does not get tweened has a drop shadow.

 

* drop shadow filter on two symbols cost me 17K

  • Like 2
Link to comment
Share on other sites

Filters can be so problematic in canvas, that there is a filter finder JSFL for locating filters in nested symbols so you can delete them.

 

 

http://blogs.adobe.com/animate/2015/03/

 

From the white paper released this past October.

 

 

Flash Pro CC supports most filters and color effects. These effects fall into one of two categories: shadow effects, and filter effects. All effects are expensive to render, particularly on mobile devices, and should be tested thoroughly.

Shadow Effects

Drop shadows and glows (which are essentially shadows with no offset) are rendered in EaselJS using canvas's built in shadow features. They render reasonably fast on desktop, but can cause performance issues on mobile, and can be applied to animated content.

At this time, shadow effects cannot be animated on the timeline, though this is primarily an authoring limitation that may be removed in the future.

Filter Effects

Blurs, color transforms (excluding alpha), and color adjustments are treated as filters in EaselJS. These effects work by manipulating pixel data, can be quite expensive to render, and require bitmap caching to be enabled to work (this is done automatically when you apply these filters in Flash Pro).

This bitmap caching "freezes" the movieclip on its first frame, which stops it from animating. Similarly, the filter cannot be animated on the timeline. This is an intentional limitation, because updating filters is very expensive, and it would be very easy to unintentionally create content with very poor performance.

It is possible to animate content with a filter by re-rendering the filter each tick (or frame) viamyDisplayObject.updateCache(), but in almost all cases it is better to consider alternative approaches. For example, to transition an image from grayscale to color, you could simply duplicate the image, apply a grayscale color adjustment to the top copy, and fade down its alpha over the color copy. Similar approaches can be used for blur and color transforms.

Another option is to create a sprite sheet animation of the filter effect and use that in your ad instead.

Link to comment
Share on other sites

  • 10 months later...

Another solution I found is to just separate the dropshadow/glow effect in the Photoshop file by selecting the text layer that has the drop shadow applied to it, and then go to the Photoshop menu > Layer > Layer Style > Create Layer. This will separate the effect from the actual text layer, allowing you to export as PNG. Once optimized with TinyPng the k-size could be very low. I usually export the Animate CC as a sprite and dump that into TinyPNG to further optimize.

 

You can then just add the drop shadow into the mc below the text layer.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...