Animate CC vs hand coding

[emmanuelulloa 31 Likes (Newbie)]

On 2/20/2017 at 8:41 AM, Oliver16Years said:

The beauty of handCoding is that You can automate it. But that's not "hand coding" anymore. I would call it automated DOM code generating, which is merely different from writing every <tag> and #css by hand. I personally writing only the GSAP tweenScript by hand, all other code and asset is autoGenerated.

Can you elaborate on how do you automate the creation of Dom HTML tags and layout CSS?

[Oliver16Years 207 Likes (Specialist)]

I am working on a banner exporter which can speed up the ad developement by 5 to 8 times. It is written in NodeJS and residing in Photoshop. A few months and I will release it on Adobe exchange. I can't say more at the moment but it is fast and producing 100% bug free DOM/SVG/Canvas ads.

[emmanuelulloa 31 Likes (Newbie)]

That sounds SO cool! I can't wait to check it out. And I ask because I'm building my own layout tool as well. But mine is more of a WYSIWYG thingy. If you want to check it out let me know through inbox.

[fadyhenen 2 Likes (Newbie)]

@davi Hi Davi

 

I followed the steps but it's not working, Can you check the animated file attached?

I want to know what i miss,  Archive.zip

Thank you so much in advance  

[davi 100 Likes (Specialist)]

2 hours ago, fadyhenen said:

@davi Hi Davi

 

I followed the steps but it's not working, Can you check the animated file attached?

I want to know what i miss,  Archive.zip

Thank you so much in advance  

I didn't see any of the implemented steps in that file.

[retropunk 126 Likes (Specialist)]

5 hours ago, fadyhenen said:

@davi Hi Davi

 

I followed the steps but it's not working, Can you check the animated file attached?

I want to know what i miss,  Archive.zip

Thank you so much in advance  

 

@fadyhenen

What are you trying to do? I looked at the FLA and your code starts with a TimelineMax declaration

var tl = new TimelineMax({repeat:3, repeatDelay:1});

but then you don't use it. Everything after that TimelineMax declaration is a TweenMax method.

 

[Stoyan Kr 1 Likes (Newbie)]

I use Animate CC and Google web designer.   I also can code on my own.  HTML5 Banner is like one page web. But time matter i thing.
Check also my design static and animated HTML5, Static and GIF banners https://www.adsspirit.com/

[Andrew G 0 Likes (Newbie)]

Hand coding is now just as smart an option for mass producing banner ads. There are now a number of JS template engines and generators  that support the creation of banner ads, within your JS dev environment.

[EugeneA 10 Likes (Newbie)]

I recently start working on visual tool that produces SVG + GSAP code.

I'm on early beta stage and need feedback from experienced GSAP animators.

 

Will you use tool like this if generated code quality will be good enough?

If yes, what are must-have features for first release? Would you like to participate in beta testing? (First beta is available for download)

 

 

 

[tekkon 0 Likes (Newbie)]

On 2017/1/8 at 11:43 PM, somnamblst said:

"When I first got into banners/Flash I found resizes to be tedious when using timeline animation."

 

I find resizing easy, because I enter the movieclip to change a text object from 300px to 160px. Movieclips are containers you just move. When I got creative from an agency, I had to convert to Rich Media, I was always annoyed if it wasn't using nested movieclips.

 

Between vector lockups simply being pasted and text no matter what the font being converted to shapes, I have almost no server requests and have had zip files under 20K.

 

I don't have tedious imports from PhotoShop because bitmaps are the exception not the norm. And it is rarely more than one. So I might have a small, medium and large over 8 sizes.

 

I was fast on Flash, so going back to Animate from Edge, I got the speed back.  It's the copying and pasting of frames and layers, and complex animations I like.

 

Then there is the publish templates. That is huge. I never touch the HTML file. And when I do it is easy to use CSS to add things like the youtube API player.

 

Plus Animate Commons came out with extensions. Someone with no timeline experience can do parallax, flexible and adaptive layout. 

 

http://animatecommons.com/

Is this still upto date? I could REALLY use these parralax effects,  I tried using these bu they seem to be out of date at present!

[tekkon 0 Likes (Newbie)]

I guess not at all lol

[Nolla283 0 Likes (Newbie)]

Davi,

I'm using DepthJS to animate some objects. I'm trying to use rotX to rotate the objects toward and away from the me. It should look like a sign that is hung from the top and is swinging toward and away from me. Instead, all I can get is it swinging away and then back to the starting point.

 

This works to swing the object away from me and then back to the starting point:

var stage3D = new depthjs.Stage3D();
stage.addChild(stage3D);
var cont3D = new depthjs.Container3D();
var pin1_mc = new lib.pin_1();
cont3D.addChild(pin1_mc);
stage3D.addChild(cont3D);

var tl = new TimelineMax({repeat:-1});
tl.from(cont3D, 1, {rotX: 20})
tl.from(cont3D, 1, {rotX: 0});

 

I would expect for this variation to swing the object back past the starting point and then toward me, but it doesn't work:

var tl = new TimelineMax({repeat:-1});
tl.from(cont3D, 1, {rotX: 20})
tl.from(cont3D, 1, {rotX: -20});

 

In TweenMax I think you'd handle this by using something like rotationX: "20_ccw" vs rotationX:"20_cw" or even += and -=. I haven't been able to find the equivalent in DepthJS but it seems like such a basic thing! Have you had any success reversing the direction of the 3D animation in DepthJS?

[davi 100 Likes (Specialist)]

@Nolla283 I haven't tried that specifically but perhaps try x-axis rotation values (0 - 360) instead.

[kellyimaging 2 Likes (Newbie)]

On 2/23/2017 at 9:24 AM, greensock@droga5.com said:

I tried to follow Cory Hudson's tutorial for setting up templates, but it just got messy, and I abandoned it partway through. I might have to take a crack at that again.

 

I decided to finally crack open Adobe Animate in 2019, I've been dragging my feet - and doing just fine with hand coding banners with the GreenSock timeline, but I wanted to see if Animate had any benefits for my banner development. I was excited to have found Cory's step by step guide for banner builders - but I was quickly banging my head against the wall when they failed to compile with the latest version of Adobe Animate 19. It's comforting to hear that I'm not the only one who gave up on these seemingly helpful starter templates.

 

@davi it's interesting, you say you don't even bother using the Adobe Animate generated HTML, but rather use your own?

I will need to be sure my files work in Google Ad Manager or Sizmek.

So if I were to create my own templates,  things I would need to be sure to manage, would be:

1) Add the meta tag with the ad.size to comply with Google's requirements: <meta name="ad.size" content="width=300,height=250">

2) Handle how I was sizing assets for larger displays

3) Make sure the correct ClickTag code was in place.

4) Any thing else???

 

~Kelly

[davi 100 Likes (Specialist)]

@kellyimaging I haven't started using CC2019 just yet, I initially installed it but Illustrator kept crashing on Mojave, so that means I needed to stick to everything CC2018. I'll have to give it a go on the new version of Animate soon. I read they have a ton of new and exciting features.

Yeah, I like Animate/Canvas for certain scenarios and hand-coding for others.

Nope, I don't use the generated template, use my own custom one, took while to create and QA.

Here are some of the things I include outside of the stuff you've already mentioned >

- The proper CDN URL's for CreateJS and GSAP (Google and Sizmek have their own)
- Misc CSS stuff (like adding a border or not and customizing the color/thickness, user select, focus, etc)
- I embed AdHelper minified
- I use Intersection Observer to detect whether the ad is in view, and then start the ad, pause it, have it go to the end frame, hide it, etc. I have the ad fade into view if it appears as you scroll up.
- A loader for everything
- What happens onBlur (when you change browser tabs or windows)
- What happens when you click the ad (make the ad go to the end frame and stop all animation).
- Add tracking for a timer, defaults to the 15-second time limit
- Add button events (mouse over/out, touch, click, etc), which connect to manually coded events within Animate, if needed.
- A way to adjust the Ticker's timing mode (handy depending on whether you're using timeline animation or using time-based animation GSAP within Animate).
- Using AdHelper's performance checker. If I'm using timeline animation and it's running slow, I force all clips to play back at the proper speed to keep up with timing via timeSync.
- Safari throttles RAF in cross-origin iframes, so I have code which adjusts accordingly. 
- Code for Retina/responsive. As for image assets, I just make them 2X and scale down in Animate.
- Misc functions, like a UA Sniffer and a good ole' trace function.
- And finally, a way to use ALL Blend Modes from within Animate. I know the dropdown only allows the Add blend mode, but you can actually use all of them (just not supported in IE, but you can create fallbacks).
 

[kellyimaging 2 Likes (Newbie)]

@davi Thank you so much for the info! Super helpful!! 

 

[somnamblst 183 Likes (Specialist)]

Wow! I am especially interested in Intersection Observer. Would you be willing to share your Publish template?