Banner backup images

[nicolasdesle]

Hi all,

 

This isn't really Greensock-related but I was wondering how you guys create backup images for banners, you know those 40k backup images that are needed when JS is disabled on the browser for example.

 

I mostly use Animate CC (in combo with TweenMax of course) and how I do it now is right clicking on the banner (the canvas object) in Chrome once the banner reached its end and then saving it as a PNG, and then also mostly compressing it afterwards in Photoshop as a JPG to get it under 40k.

 

Are there better practices or tools that can automate this?

This is really time consuming.

 

Thanks!

Nicolas

[emmanuelulloa]

I created this tool to help me out

See the Pen BpOoEw by emmanuelulloa (@emmanuelulloa) on CodePen

[nicolasdesle]

Great, thanks Emmanuelullo!

[Sahil]

@emmanuelulloa I think it can be further automated by manually completing timeline and then copying last frame from Canvas into editing canvas? As if I am correct, all banners are made using single file which can be pasted into the codepen to extract last frame?

[emmanuelulloa]

7 hours ago, Sahil said:

@emmanuelulloa I think it can be further automated by manually completing timeline and then copying last frame from Canvas into editing canvas? As if I am correct, all banners are made using single file which can be pasted into the codepen to extract last frame?

Actually it just handle images (in this case an screenshot of the banner when it has finished), not code.

[nicolasdesle]

Indeed. Would you be able to develop this? Some kind of app that distils the last frame of for example an Animate animation?

[Sahil]

I am not really sure what the source is going to be, you mentioned that you save last frame of canvas so I thought that you can simply copy source file in that codepen, let the timeline play or seek the end. After that you can click the button and it will copy from source canvas into the editor canvas.

 

Following is demo I made based on assumptions. You can paste your entire file in the HTML section I have commented, and click on 'Copy Canvas' button. It will detect canvas element from source you paste there and copy current frame into the editor canvas.

 

EDIT: I don't know workflow/end result of banner animations. But you if you mean you want to use it in Adobe Animate which I assume outputs everything on canvas, then you should be able to wrap this entire thing in a script. Load it into animate, and load this UI at the bottom or somewhere. If animate lets you access it's canvas by external script, then you will be able to make it work.

 

Again I am just assuming many things, this thread seemed interesting and thought it is possible so I tried to suggest it.

 

See the Pen MOjGvz?editors=1010 by Sahil89 (@Sahil89) on CodePen