Chris

Actually it's pretty easy now (even easier than shown in the above video) to just include GSAP in Adobe Edge. The library now (CC 2014+) has a "scripts" panel which allows to load external or local scripts. Then you can code all the animation yourself. jQuery is not automatically added or needed anymore. Instead Adobe integrated the most important parts into their own library which is about 100K uncompressed. Of course it will be much smaller compressed. So right there would be the question if your project allows for that file size or if you can load it externally from a CDN. I still haven't decided if I prefer handcoding, Edge or GWD. I'm trying out all three and see what kind of issues I'm running into. I'm currently handcoding with "Brackets" which I like a lot (even though the amount of code necessary seems a little insane). I think at the end we need to know all three apps anyway (incl. a handcoder app) since some projects require a certain app or have limited file sizes. You also might get an ongoing job from someone else and you should be able to handle it no matter how it's created. None of these tools are easy to understand or to learn, since there are 1000 tiny little things that are different from Flash. But I think the process of learning them all is necessary to understand HTML, JS and CSS.

Thanks Ihatetomatoes! This worked perfectly. The pain is over. I see green check-marks everywhere!

Hello, I'm pretty new to JS, but worked for many years with Flash AS. One issue I'm running into are Linter problems in my code editor "Brackets". My animation runs fine and Chrome also has no errors. But I really would like to get rid of all these Linter probelms showing up. I've loaded jquery and TweenMax libraries in my main html file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script src="main.js"></script> In my "main.js" I have: var videoPanelTl = new TimelineLite(); Now this Linter problem that shows up: "'TimelineLite' is not defined. - W117 -". More problems show up when using "$" , or easing "Back" for example. They all show up as "is not defined". Seems like my JS file doesn't even know that TweenMax has been loaded in the html file? I'm also not getting any code hinting for TweenMax - probably for the same reason. I've searched for many hours on the internet since it seems a pretty basic question but couldn't figure it out. Is there a way to fix this? I would really appreciate any help.

Hi joe_midi, yes, hand-coding seems to be the best way to move foreword from here on. But I've also spend some time with Adobe Edge, which allows you to create the banner on the stage (drag&drop, import assets, moving elements around the stage, typing text, adjusting all the layouts) and also has the option to code all the animation with GSAP. Pretty much the same thing as with Flash. But I don't really want to use any timeline animation features of Edge. Even though they're quiet impressive; very close to how things are done in After Effects. Instead I would mostly use the timeline to design and organize the banner (intro frame, video frame & end frame). But then the java script code in Edge seems to be slightly different, since I always need to refer to the Edge stage first to find other objects. I can't just copy and paste some js code on different frames and expect it to work. While this features in Edge are all neat and everything, I'm still discussing if I really need a graphic IDE with a stage instead of just using a code editor and browser. Am I limiting myself, since I have to deal with filters of an interface (instead of seeing the clean code directly) or am I pushing the boundaries since I can work with grouped symbols and don't have to babysit every single piece of code? GWD seems to be more like Adobe Edge Lite. I wonder if there are any people out there who want to code all the animations with GSAP but prefer the stage interface of Edge (or GWD)... Especially since all of us used Flash to create banners. So we are all used to that setup (stage interface + code).

Google DoubleClick is now officially recommending using Greensock for CSS3 animations: https://support.google.com/richmedia/answer/6261897?hl=en#animate

yes, interesting. I went to the same Google html5 seminar here in LA. But it was mostly about introducing the GWD. I also asked about hosting the Greensock library and they didn't have an answer yet - so good to know they will do that! I hope they will also host the Adobe Edge animate library js but maybe with 150k+2MB we don't have to worry about each single K anymore as we did so far with 40K banners. GWD also allows to import Adobe Edge animate projects which is a bonus if you want to create your project in Edge - and then use GWD to add DC code and upload to the DC studio. But I haven't tried it out yet.

Thanks for for talking about your experience with flash/html5/js/. I will definitely check out those other tools as well. I've been using Flash for about 15 years and started coding ALL the animations in Flash with GSAP about 7 years ago. And I love it! It's actually possible to use GSAP in Adobe Edge without a problem as illustrated in this (older) video: I'm just not sure if the final file size is small enough for a banner project which might only allow for a 100k banner. Edge is adding their own js files which seem pretty large - but I'm still trying to figure that out. GWD is similar to Edge but way more limited. I think the app is actually coded in html5 which is impressive but it's still a very young product. It automatically adds all the Double-click specific code which is nice - but on the other hand it doesn't give you the hand-coding/actions interface that Edge has. Instead you click between design and code view. And then you have to deal with all the id/classes that GWD created for you which can be confusing. I definitely want to stay on the path of being able to hand-code all the animation. But I also like having the graphic interface to simply create keyframes, throw some assets on the stage and arrange everything properly (creating the final end position if you want). And then use GSAP to animate it into place.

Hey folks, Times are changing and everyone is running in circles about the switch from Flash to html5. While i'm very excited about ditching Flash for html5/js I'm actually a little shocked how unprepared the industry is for this transition. The are still no specifications in place for file sizes, GWD is still in beta and poorly documented, Adobe Edge Animate seemed to be not fully supported by Double-click until recently and hand-coding everything just seems to be to cumbersome when talking about a new standard. The only solid rock in this wild storm is GSAP and I feel pretty save standing on it - but which software is good to support it? Does it make sense to "hand-code" with GSAP in GWD? Is Edge as great to build banners with GSAP just like we did in Flash? Or is there a good hand-coding software that supports GSAP in a better way?

Hi Jack, I'm using v12.

Hi, For some reason: TweenNano.killTweensOf([cloud1_mc, cloud2_mc, cloud3_mc]); ...is not working, but: TweenNano.killTweensOf(cloud1_mc); TweenNano.killTweensOf(cloud2_mc); TweenNano.killTweensOf(cloud3_mc); ....is working. I read in the docs that Nano also supports arrays. Any ideas? -Chris

Hi, I am having problems with the auto format feature. Before auto format: // bg TweenMax.from(bg_mc, .5, {alpha:0}); // bg2 TweenMax.from(bg_mc2, .5, {alpha:0}); After auto fformat: // bg TweenMax.from(bg_mc, .5, {alpha:0}); // bg2; TweenMax.from(bg_mc2, .5, {alpha:0}); after the second comment is now a semicolon. Is this a Flash issue? CS5 AS3

Thanks Jack!

Hi, I used this quiet often but somehow it stopped working. Maybe because I switched to AS3? I want to play a timeline within an mc with a delay: TweenMax.delayedCall(1.6, gotoAndPlay, [2],toast_mc); I am getting this warning: Warning: 3590: flash.display:MovieClip used where a Boolean value was expected. The expression will be type coerced to Boolean. Thanks, Chris

Hey Jack, Just a quick question. So far I haven't done anything in 3D but would like to get into it. Is TweenMax able to perform any 3D transformations by itself or only together with actual 3D plugins? If not, which plugin/platform would you suggest? I am not planning on anything fancy - just to animate some mcs more realistic and exiting way. I remember you put up a simple3D class preview with a video of your son quiet a while ago. Are you still planning on releasing it? Thanks for all your work! Chris