Search the Community

Hi everyone, I'm new to this and I just wanted to make a simple animation with HTML and js using GSAP in Adobe animate. Animation itself is very simple, just using three TweenMax in Adobe Animate. When I hit Command + Return, it plays the animation as I built, however, when I upload them (HTML file, js file, and image file in 'image' folder) on a web hosting server and take a look at it on a browser with the web hosting URL along with the correct path to the HTML file, the page is just blank white background and nothing shows up. Then, when I hit refresh button of the browser, the animation starts as expected. I'm thinking that something is wrong with the way I handled GSAP or TweenMax codes in Animate, or some kind of publishing setting issue? What I did is as below: - I'm using Adobe Animate ver. 22.0.5 on MacOS Catalina (ver. 10.15.7) and Chrome (ver. 125.0.6422.113) - The FLA file is with HTML Canvas platform and not ActionScript 3.0 platform - I included the script tag 'https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js' in Global section of Actions Panel in Animate - In the FLA file, there is no length of timeline, it's just one frame (which means no classic tween, just three MovieClips placed on the first frame along with Actions layer) - In the Actions layer, there is no ActionScript. The only codes are: TweenMax.from(this.bkgMC, 1, {alpha:0}); TweenMax.from(this.mainMC, 1, {delay:1, scaleX:0, scaleY:0, ease:Back.easeOut}); TweenMax.from(this.titleMC, 1, {delay:2, alpha:0}); - I didn't change any Publish Settings in Animate. 'Export as' section is selected with 'Texture'. - When I hit Command + Return, the animation opens up in Chrome browser and it works as I created it without problem - The output window says: ** 3 Bitmaps packed successfully into 1 spritesheet(s). Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (4) - I uploaded the HTML file, js file, and image folder with one png file that were all generated from the FLA in Animate onto a web hosting server - When I open the uploaded HTML file in Chrome with the correct path, nothing appears, just blank white background - When I hit refresh button of the browser, the animation starts as expected - The web hosting server that I use is the free one called InfinityFree (https://www.infinityfree.com/) That is all I can think of to note for now. Am I missing to add some kind of code to call GSAP to work in Animate or do I need to change the Publish Settings in Animate? I'm a designer, not a developer. So I may be doing something simple not correctly. I would appreciate if anyone can help with this. Thank you!

I've been scouring the archives and the web but can't seem to find out a proper workflow using Adobe Animate and GSAP if there is even one or is it even worth it. I am working off some files that were done by another developer and they seem to have used Adobe Animate for the HTML portion of is and then GSAP for the actual animation. I have been trying to break down how they managed to use both and can't seem to make it work in my head because everything that I pump out of Adobe Animate has a js file that is way overloaded with symbols and such. As I've mentioned elsewhere I am trying to get back into using GSAP so I am rusty as all get out. I may be asking the wrong question so there's that too! Any help would greatly appreciated. I guess I am missing the link between how to go from Animate to GSAP. Does the GSAP happen within the Animate file? Or is published and then coded.

I'm trying to get the GSAP Morph SVG plugin to work. I use Animate to generate code. I'm including the plugin script file. I really can't wrap my head around how I'm supposed to set this up in Animate. I normally copy/paste existing working examples and then tweak code in my actions window. Where do I place the path files of the shape I'm morphing to?

Greetings guys, I'm fairly new to GreenSock and Coding, like everyone who is just getting started, I quickly arrived at a point where I don't know how to continue: I'm working in Adobe Animate and I wanted my movieclip hexagon (InstName = hexagon) to move randomly on my canvas. As an end goal, I wanted several hexagons to move around randomly, maybe even change in size, and I wanted it to play infinitely (screenshots attached). I found an old tutorial with some code and tried to apply it, but it didn't work. Can anyone tell me why? Is it because I'm using jQuery? Scripts included: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js Code: var randX; var randY; function randomNumbers(){ randX = Math.floor(Math.random()*100); randY = Math.floor(Math.random()*150); moveMe(); } randomNumbers(); function moveMe(){ sym.$("hexagon").animate({left: randX, top: randY},1000, randomNumbers); } How can I achieve my goal? Or can anyone please send me a link where a similar topic is solved and discussed? Any help would be greatly appreciated!

Hi, I have used TweenMax back in the time when Flash Professionell used to export SWF-files. But anyhow, my problem is: I use a Adobe/GSAP banner template, in which the TweenMax is loaded over https. Works great. I have added SplitText.min.js so that it loads correctly as well. But is it possible to use this in Adobe Animate? I have only used Static textfields before – and I dont know how to use the SplitText now?! I changed to Dynamic textfield, but that removes my font of choice. And the selector for the textfields name – does not seem to work. How can I use Adobe Animate and SplitText together? Is it possible? I just bought the Shockingly Green license to be able to do just this thing ;/ Thanks. Martin

I couldn't find anywhere this is mentioned explicitly in the context of Adobe Animate CC. I'm trying to get a blur X on the X-axis while I tween a simple vector object across the stage. This works fine var tl = new TimelineMax() tl.from(this.arrow, .65, {x:-300, ease:Cubic.easeOut}, 2); But if I add a blur with the properties panel or try to use Pixi plugin (yes I have the include plugged in) the banner stops working. var tl = new TimelineMax() tl.from(this.arrow, .65, {x:-300, pixi:{blur:20}, ease:Cubic.easeOut}, 2); 300x250-prototype-17-RIAC-0597-120717.fla

Hey there, I need a zip file of Adobe Animate CC (trial.)

Hi guys! Is it possible to find an example of a responsive banner that I can make in Adobe Animate 2017? All my old source files that worked a year ago do not work now and my skills are not enough to understand what has changed, I just see that the code that generates Animate just diferent. The banner should stretch the entire length of the page, have a minimum width (for example 800 px), and inside there should be 3 independent moveclips - "left", "central" and "right", which change their position depending on the width of the banner. Thanks for any help!

Hello Is it possible to create a shape mask, similar to how it was done in Flash where one shape overlaps/mask another shape? I have tried to use mask in the timeline (Animate timeline/layer) together with TweenMax but it does not seem to work. Very thankful for any advise.

I found this very nice previous post, but I can´t make it work on adobe animate....any ideas from any actioscript guru?

Hello, I have created an Animate project where I have used TimelineMax and a few Animate timelines/tween. (the reason for Animate timeline is that I need to utilise mask). From my TimelineMax I would like to call the Animate timelines/tween to start these, rather than have them all fired at once in the beginning. As you will see in the attache code, the yellowBar2_mc is the movieclip that need to be called to start later in the timeline. var tlheadline = new TimelineMax({}); tlheadline.to(this.inspire1_mc, .8, {delay:.1,alpha:1, ease:Sine.easeOut}) tlheadline.to(this.inspire1_mc, 4.5, {delay:-.9,x:"+=100",ease:Power2.easeOut}) tlheadline.to(this.yellowBar1_mc, 4.5, {delay:-4.5,x:"+=100", ease:Power2.easeOut}) tlheadline.to(this.inspire1_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.yellowBar1_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.engage_mc, .8, {delay:.1,alpha:1, ease:Sine.easeOut}) tlheadline.to(this.engage_mc, 4.5, {delay:-.9,x:"+=100",ease:Power2.easeOut}) tlheadline.to(this.yellowBar2_mc, 4.5, {delay:-4.5,x:"+=100", ease:Power2.easeOut}) tlheadline.to(this.engage_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.yellowBar2_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) Hopefully this is a simple solution. Thanks in advance. Animate.zip

I have imported a png into my Adobe Animate project and converted to symbol. I'd like animate the resize of it, but it doesn't work (I tried width and height). Other things like rotation and move work.

Anyone try building this in Flash? http://greensock.com/cube-dial-tutorial I've started down the path of digging into the logic, and replacing the HTML stuff with MovieClips, but one major piece is missing since there is no equivalent "Draggable" plugin for AS3. Well, I'm deep in the muck... so I'm going to continue and see what I'm able to do, but perhaps someone has already gone down this path and has some advice? Much obliged!

Hello, I'm uploading my published Adobe Animate creative to Google Adwords, I've never done this before. I have in my zip file the image, the javascript, and the HTML so everything should be good to go. However when I upload and preview it, it doesn't animate. It's just the static background image. Am I doing something incorrectly with my code? Should I be doing something different with my publishing settings in Animate? Has anyone else encountered this when trying to put an animated ad onto Adwords? Thanks in advance for your help.

Hi, Check out this new Greensock tutorial that shows how to create smaller, faster HTML5 ads from Adobe Animate with GSAP. http://www.fla-exporter.com/GreenSock-Tutorial-Smaller-Faster-HTML5-Ads-with-FlaExporter-and-Adobe-Animate/ Topics covered-- Using GreenSock with Adobe Animate (Flash) Using ActionScript (AS2 or AS3) or JS for HTML5 ads Automatically optimizing your assets with one click Working with clickTags Retina/High DPI asset setup Handle multiple exits on buttons with onClick Handle rollovers with onMouseOver/Out Call JavaScript on the page from timeline code in the FLA Show an ad preloaded Test and validate the ad http://www.fla-exporter.com/GreenSock-Tutorial-Smaller-Faster-HTML5-Ads-with-FlaExporter-and-Adobe-Animate/

Is there a way to use GSAP TweenMax for basic CSS transforms on a movie clip instance in Adobe Animate when you are publishing to Canvas? For example: this.p1thumb.addEventListener("click", myFunctionp1.bind(this)); function myFunctionp1() { TweenMax.to(this.box, .25, { boxShadow:"0px 0px 10px 10px rgb(0, 204, 0)" }); } It does not seem to work. I'm also interested in how you might change stroke widths, colors, etc. dynamically. Any ideas?

I'm in a class where our final project is to create an interactive comic book using Adobe Animate. I missed the pre-requisite for this course, which went over coding in Javascript to make games in depth. My professor has his own tutorials about how to use Greensock to enhance our projects, but since previous programming knowledge was expected, it went way over my head. I'm just really lost about where to begin with this project. The most I know how to do in Animate are basic tweens. I successfully added some interactivity using a button, but not much more than that. As a complete beginner I'm very discouraged by this project. I've searched google hundreds of times now looking for beginning examples of how to create interactive interfaces using Adobe Animate or the older Flash Professional CC. I'm shocked by how little community there is and how hard it is to find example files. The only files I found were from FlashKit.com, and they were so outdated that they don't run correctly in Animate. Does anyone have advice about where to get started with this project? Do you know any tutorials that are aimed at complete beginners? Any advice would be greatly appreciated. Thanks for reading