davi

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

Not entirely sure what you mean by "space between the letters". If you mean a gap between the text above and below, try adding the text to a div container within each face, and making each container taller. As far as your animation goes, you may want to try recreating the cube using PaperElement3D and have one side of the face blank, and the other side with the text. This way you don't see the text on the other side of the 'cube' as it's spinning. So make the sides of the cube using PaperElement3D, adjust positioning of the faces, and then use Group3D to spin as a whole.

Check out this lil' library > http://mbmedia.cc/stuff/dom3d Docs > http://mbmedia.cc/stuff/post-assets/dom3d/docs/index.html You can probably use the example they have right there on the page. Obviously adjust the width of the cube. Add your text to the appropriate faces. Hide the div content other than the text, make background transparent, etc etc (the faces of the cubes are divs). Then just use GSAP to spin it in 3D using the Dom3D props (rotX, rotY, etc...just read the docs). You can probably use just about everything in the example. Check the docs and read the OrthoFace section. TweenMax.to(cube, 1, {rotX:200 etc etc etc}); When you're done, it'd be great to post a working example here for others as well. I'm sure there will be others asking this too.

This is possible. See my post in another thread.

Animate CC + GSAP + DepthJS = 3D in AnimateCC!!! (Well, 2.5D) Hey Folks, Found this handy lil' library from MBMedia.cc called DepthJS which is a 2.5D Engine for CreateJS. http://mbmedia.cc/depthjs/getting-started.php http://mbmedia.cc/depthjs/docs/index.html Works and plays wonderfully with GSAP and Animate CC. You can now do 2.5D animations in Animate CC Here's a proof of concept animation I made (GSAP, totally stole your logo to use as an example) > http://www.davi-t.com/misc/greensock/animatecc_3d_test/depthjs_test_01.html Super easy to use too, just follow this > - Include GSAP and the DepthJS libraries (I did it via the Global > + Include script method in Animate 2017). - Create Stage3D instance - Add Stage3D to CreateJS stage (Animate CC's default stage is called "stage"). - Make some graphics in Animate CC (vectors, bitmaps, and what not, etc etc). - You need to add a LinkageID for those graphics. However, it's not like the old Flash days in the Properties Inspector, but just as easy. Just go to the Library panel, and under the column for Linkage, double-click the blank area to the right and then type in a linkage ID. - For graphics in the library, use the Container3D class. Create a new instance of that. - Add the graphics that you assigned a linkage ID to, to the Container3D class. - Add the Container3D instance to the Stage3D instance. - Do GSAP like you normally do but follow the DepthJS docs for properties to animate. Here's some code for the example above > var stage3D = new depthjs.Stage3D(); stage.addChild(stage3D); var cont3D = new depthjs.Container3D(); var logo_mc = new lib.logo_mc(); cont3D.x = 100; cont3D.y = 100; cont3D.addChild(logo_mc); stage3D.addChild(cont3D); TweenMax.from(this.txt, 1, {y: 300, ease:Elastic.easeInOut, delay:1.7}); TweenMax.to(cont3D, 1, {rotY: 200, ease:Power4.easeInOut, delay:1});

What alempo said, or you can still use your GSAP timeline to keep it modular but just use an onStart call with an anonymous function, something like this > tlheadline.to(this.yellowBar2_mc, 4.5, {delay:-4.5,x:"+=100", ease:Power2.easeOut, onStart: function() { this.yellowBar2_mc.gotoAndPlay("fr1"); } })

You may also want to make the clickable area a bit smaller than the banner, like a 1 or 2 pixel buffer around the edges so it catches the mouseout.

If you’re building in Studio, then you need to add the API in your code and build a “Creative” in Studio as well. However, it’s not a WYSIWYG at all or in any sense. In Studio, you’re just setting up the format, uploading the files, adding the exit URLs, and previewing — that’s what a “Creative” is. You still would build your ad using whatever code editor you use (i.e. Sublime). The only difference in the way you would be building is loading the Enabler API, adding a polite load if necessary, adding DoubleClick “exits” rather than using clickTag, tracking if you need it, etc etc. Otherwise, you continue on with your normal GSAP workflow. It’s actually not very complicated at all and not much different than what you’re currently doing.

What jack said, have to do it via code. Now there may be a better way to do this (I didn't put a ton of thought into this) but this is how I do it (and i how I use to workaround Chrome's canvas mask bug, which they've recently fixed). If you remember the good old Flash days and how you MANUALLY set up a mask using an Alpha Blending Mode by nesting the clip's content in a movieclip, and then had a movieclip on a layer above with the blend mode set to ALPHA; this is the same way except you don't have a dropdown menu where you can select a blending mode, plus you have to nest it one more time if you want to animate the movieclip as a whole, which I recommend doing just in case. The other issue that I had encountered was that if you wanted content to be animated underneath (i.e. like have the layer underneath the mask be animated on that layer within that timeline), then you had to continually apply the mask every frame. In any case, the mask is now created programatically and you can use code to adjust the mask to do whatever you want. So, have your content as a movieclip, and the masking layer as a movieclip on a layer above, give both instance names (let's say 'content_mc' and 'mask_mc'). Then select both and turn those into another movieclip, nesting those items, distribute to layers and just make sure the mask layer is on a layer above in the main movieclip; give the main movieclip an instance name too, let's call it 'child_mc'. Then lets nest the clip again into another new movieclip, then give it an instance name of 'parent_mc'. I'd personally make a function so you can reuse this, so on the first frame of the main timeline add this code > root.addMask = function(maskClip, maskParent, cacheX, cacheY, cacheWidth, cacheHeight, maskingDuration) { //Add initial mask maskClip.compositeOperation = "destination-in"; maskParent.cache(cacheX,cacheY,cacheWidth,cacheHeight); //Add mask every tick maskParent.updateMaskCache = function(event) { if(!event.paused) { maskParent.uncache(); maskClip.compositeOperation = "destination-in"; maskParent.cache(cacheX,cacheY,cacheWidth,cacheHeight); } } createjs.Ticker.addEventListener("tick", maskParent.updateMaskCache); //Clear tick event after XX seconds maskParent.maskTimeout = setTimeout(function() { createjs.Ticker.removeEventListener("tick", maskParent.updateMaskCache); }, maskingDuration * 1000); } Then inside the main movieclip on a blank layer, add this code > root.addMask(root.parent_mc.child_mc.mask_mc, root.parent_mc.child_mc, 0, 0, 300, 200, 2); The first thing you're passing in is the path to the mask clip, the second being the child clip or the name of the mask clip's parent moveclip (in our case child_mc), then the co-ords from where to start the mask (typically 0,0), the width of the area to be masked (not necessarily the content's width), the height of the area to be masked, and finally the duration for how long you want to apply the mask (if the content is animated). Now, if your content is just static content that just needs a static mask, then you obviously don't need to continually apply the mask, you can just pass in a zero duration. But if the content that is being masked has animated content in it, then you need to continually apply the mask for the whole duration of that animation. In the example above I'm using 2-seconds. Again, there's probably a much better way to apply this All that just to apply a mask programatically, meh. But now you can target the mask to do what you want > .from(root.parent_mc.child_mc.mask_mc, 1, { x:"+=100" }, "+=1"); //Obviously, from an appropriate frame in the timeline Just keep in mind that if you move the mask, then you need to continually apply it over that period of time as well as account for the area that gets affected. Again, there might be a much better solution

@Web Dizajner Easing functions: - I use a tool called Ease Caddy made by Justin Putney over at Ajar Productions. Worth every cent. It allows you to save Custom Eases and apply them with the click of a button, even on multiple tweens simultaneously. What I've done is recreate all of GSAPs eases and my own and have a library of them. I've also recreated some of the eases from a tool I use for After Effects called Flow, which also has user libraries for custom eases. Super handy tool and saves a ton of time. You can even export the eases to share with others. http://ajarproductions.com/pages/products/easecaddy/ You can find it in Adobe Create Cloud and install from there too

I don't use sprite sheets that Animate CC exports, but do create my own with Texture Packer if the need arises (like using a short video clip in a standard banner). I just use images and keep 'Export Images' checked, and when I'm all done, uncheck it and replace all of the images with the optimized versions that I manually optimize using other apps like ImageAlpha and ImageOptim, PS, etc. If I go over the http request limit, I'll start spritesheeting things. I don't even use their exported HTML files, made my own template with other misc things and utils added. Heh, yeah the code editor can use some work, especially selecting like Sublime.

Yeah but you can't use the font dynamically, which was my point. (Unless you built some sort of font mapping system)

Hey pfash, This may not be related to your code but may be related to how you have the JS and HTML setup. (Your code looks fine other than one thing. I do know you should have the keyword "this" or stage in front of state2_instance). Perhaps try using Cory Hudson's GSAP and Animate CC starter kit first, and then implementing your assets and code using those files instead. https://greensock.com/animatecc-quickstart

Yes, there’s definitely best use cases for both. To be clear, we’re talking about creating banners via modifying the DOM with HTML CSS JS or GSAP versus pixel manipulation using Canvas, with Adobe Animate CC being the GUI to work with Canvas API. We’re also talking about banners and not websites or apps. There’s a huge difference between the two, lots of restrictions to deal with in banners, and many other things to take into consideration, especially animation. I know a lot of folks are coming from a website development background and think in those kind of terms but don’t really have much experience with animation or working with banner restrictions and its limitations. I also think it’s more than just personal taste or experience level but a matter of what is the better option for your individual project. Let’s also take efficiency into consideration, because, well, hey, banners are always needed yesterday I know there are coding purists who frown at the thought of using a design tool like Animate CC or think "Hey’s that’s Flash and Flash sucks”, and wouldn’t even consider using it. But before you move it off the table, let’s take a look at some pros and cons of each method > Have interactivity? Responsive? Dynamic? - DOM✔️: Modifying the DOM is probably your best bet. Your browser’s graphics API makes this a lot simpler than what Canvas or Animate CC’s current offerings have. Need it to work on a device with device orientation where the layout changes? DOM is definitely the better option. In Animate CC, having to reposition everything in JavaScript is going to be major pain in the butt, whereas CSS can do the majority of the heavy lifting for you. Working on a larger banner such as a full screen banner? - DOM✔️: Canvas can be kind of slow redrawing large areas. Have a complex animation with a lot of moving parts that’s not interactive? - CANVAS✔️: Canvas is really really fast in comparison to the DOM. Have static text? Hate dealing with fonts and how it looks between browsers? Don’t like dealing with font rights / licenses? - CANVAS✔️and ANIMATE CC✔️: You’re not dealing with delivering font files to users, so you don’t need web fonts like the DOM. Your fonts looks the same across all browsers. And hey, lets be honest. Clicking on a text field to change it’s text, having a color picker, font picker, letter-spacing, and alignment tools, all in a nifty little GUI panel close by is certainly convenient. Yes, I know you can work around having to use fonts in the DOM by using PNG’s or using SVG, but again, let’s be honest — that’s not efficient at all. Have dynamic text? Doing a programmatic banner? - DOM✔️: Animate CC can’t embed fonts just yet (because of font rights I’m guessing?), only uses TypeKit fonts (I could be wrong though). I haven’t even tried it in Animate CC because the DOM makes more sense in those cases. Have a more complex mask than a simple rectangular shape? - ANIMATE CC✔️: The only widely-supported DOM method in current browsers for more complex masking with the DOM that you can use in banners is using SVG. You’re likely doing something in Illustrator to create the SVG, then grabbing the code, cleaning it up, possibly optimizing it, and coding it to work with masking your DOM elements. That process is slow in comparison to Animate CC. In Animate CC, you just draw a mask using the built in tools, or copy and paste from Illustrator, right click, and select Mask to mask a layer. Done. Dealing with Retina display or scaling imagery? - BOTH✔️, but leaning more towards ANIMATE CC✔️: There are two issues here. Considering that with banners you need to package everything up and file size gets counted for all assets as a whole, then I believe Canvas / Animate CC is the better option here mainly because of bitmap rendering between the different browsers. Yes, with HTML you have srcset, CSS media queries, etc. That’s great for websites but in banners that all goes out the window since it all needs to get packaged up and the file size gets counted as one. And because of THAT, brings us the next consideration: which one does a better job at scaling bitmap imagery for use with Retina display (or if you need to scale a bitmap in general). Ever scale a bitmap or slide a bitmap in the DOM and get that choppy look in some browsers? Your image ever look weird after scaling in the DOM? That’s because of subpixel rendering / antialiasing. Canvas and Animate CC does an excellent job at this whereas the DOM and some browsers (not all) can do a real crappy job at this. And let's not forget that it looks the same across the board in Canvas. Also, there are built-in vector drawing tools that Animate CC has that can scale similarly to SVG — great for when targeting Retina display in banners. Animate CC can take care of Retina automatically. Have a really complex animation that’s more than slide this way, scale up or down? I’m talking more complex mograph or even character animation that a seasoned animator would create. - ANIMATE CC✔️: Animate CC wins this one with its timeline and built in tools for animation like onion-skinning, motion guides, etc. There’s a good reason why applications such as After Effects exists and why people aren’t animating TV commercials with C++. Yes, you can do motion guides with hand-coding. But creating a path with a GUI, right clicking, and selecting motion guide is multitudes faster and more efficient, especially if it takes many attempts or when you’re experimenting with animations twenty or 30 times over the course of an hour. Imagine how long 20 - 30 motion guides would take to hand-code? Ever try and do character animation in GSAP? QA? - CANVAS✔️and ANIMATE CC✔️: If your banner concept is a linear animation, QA is virtually non-existent in Animate CC. It’s going to look identical across the board. That’s certainly not the case when dealing with the DOM — browsers render things much differently and you can spend quite a bit of time and resources dealing with QA. Again, that's just for linear animations Other banner-specific features that Animate CC has: - There’s AdHelper with its Sleep and Wake, Retina support, Performance monitoring, etc. All stuff that comes with it. You’re likely not building that into your DOM-based banners. All certainly helpful, especially considering what banner best practices should be and the new LEAN specs coming out soon. So again, it depends on your banner project and what you think is best. You can certainly do most everything with the DOM but you may just want to consider taking a peek at what Animate CC can do. I, personally, use both methods, but enjoy using Animate CC simply because I come from a Flash background (who also coded) — plus looking at Sublime editor all day gets old really fast. I work for myself for ad agencies, and knowing that ad agencies always have a fast and furious timeline, efficiency is definitely of high importance and something else to keep in mind. What are you most efficient at?

I haven't looked at your FLA but it probably has to do with scope, where TweenMax is located in relation to your frame script, where the object is, etc. The keyword "this" is your friend in Animate. this.myClip_mc.visible = false; Also, Animate is Canvas, so there's no targeting div's like #homeImg (unless you really want to target a div outside of Animate) Again, I haven't looked at your FLA though

@Rodrigo: I didn't use a template for it, just built it from scratch. Yeah, it was just the canvas tag being used like any other div. What kind of errors, have a sample or CodePen?

@Matthew Severin: See comments at bottom. Not sure if the Animate CC 2017 makes this easier or not. Looks like you can specify the webfont in the Publish panel too. Looks like you need to specify a path to the font (won't convert desktop fonts to outlines like how Flash did) https://blogs.adobe.com/creativecloud/leverage-typekit-web-and-desktop-fonts-within-animate-cc/ I personally have not used it yet though

Perhaps try base64 encoding the animated GIF to work around it? Just google search how to do that, pretty easy. Then pop it in an html page...

One thing to note is, you can mix the two together as well. I just created a YouTube masthead where the main animation was Animate CC and the rest of it was hand-coded CSS/GSAP which incorporated a scroller which used GSAP and iScroll, a whole side of it not even being part of Canvas, also having non-Animate CC on top of the Animate CC stuff. You just treat the canvas (for Animate CC) like any other element. This method would especially be useful where you want to use actual HTML elements but also have a complex animation and want to use Animate CC for that. GSAP in Animate CC is most excellent too, it should just be built in (wishful thinking!)

I was hand-coding, but started using Animate CC as soon as it came out (renamed). Completely silly to hand-code to me, especially dealing with fonts, masks, and QA. You don't really have to QA much with Animate CC. I can do some pretty complex animations in Animate CC too, which would be nearly impossible to do hand-coding.

There's another option too. Use Animate CC and Trace Bitmap on your GIF frames. This might be smaller in file size than using a GIF and you don't really need to figure out the program too much. I'd also go in and delete the vectors that are duplicates between frames after the vector trace. I'd imagine this should fit into 150k if done properly As far as outsourcing this, like others have said depends on where they are. I could do this in 4 - 5 hours.

Re: Canvas masks not aliasing in Chrome That would be amazing. I have a fix for it but it's a big pain in the butt to incorporate.

IScroll!!! Will do all that you need, super easy to use too. Philly!!! http://iscrolljs.com

Yeah, best way IMO would be using a sprite sheet animation w/ CSS or GSAP. But, you definitely should create it in AE for it to look best. Something like that would and should be quick, so the frame sequence would be short, so the image shouldn't be too large. Basically, it's a video but rather than use a video, you use an image sequence that's controlled with either GSAP or CSS.

Use window.onLoad or readyState event. On ready, load in scripts n' styles, preload yer images, and then start the banner up. Code would be something like this (I may have errors, sorry haven't checked it) window.onload = function (){ loadScript("myJavaScript.js", "js"); loadScript("myCSS.css", "css"); }; function loadScript(filename, filetype){ if (filetype == "js"){ var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", filename); } else if (filetype == "css"){ var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); }; if (typeof fileref != "undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); }; }; ///and then preloading yer images, this code //being in the JS file being referenced above .... var imageArray = [ "images/image1.svg", "images/image2.png", "images/image3.jpg", ]; preloadImages(imageArray, start); function preloadImages(imgArray, callbackFunction) { var totalImages = imgArray.length, loadedImages = 0, img = null, i; for (i = 0; i < totalImages; i++) { img = document.createElement("img"); img.src = imgArray[i]; img.onload = function () { loadedImages++; if (loadedImages === totalImages) callbackFunction(); }; } }; start = function() { //start the banner }