Search the Community
Showing results for tags 'animate cc'.
-
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
- 3 replies
-
- splittext
- adobe animate
-
(and 1 more)
Tagged with:
-
Hey guys, In a previous post, I asked about adding text to a banner that would be picked up by a screen reader, and got a great answer. The ad unit was given a once-over by some folks at the ADA, and they came back to us saying that we should have tabindex controls on any buttons in the banner as well. We have a play/pause, replay and the cta button that would need that attribute. My problem is, I built this particular unit in Animate CC, and don't know how to add tabindex to those elements. I saw that the 2dContext of the canvas element has a drawFocusIfNeeded() method, but how do I add that to my buttons? Also, can anyone confirm that the content of the banner, if it's being iframed in, will receive focus if the user keeps tabbing? Again, for the record, this is the first banner I've ever built that had all these strict ADA requirements, so I'm a little new at this. Thanks!
- 4 replies
-
- 1
-
- accessibility
- ada
-
(and 2 more)
Tagged with:
-
Hi! I use Animate cc in conjunction with greensock to develope banners and animation. In Animate cc 19.1 there looks to be a bug or change in code that affects how nested animations work in symbols. Used to be able to do this: tl.to([this.sym1.sym2],1,{x:"-=500"},"+=0"); Moves sym2 inside sym1 500 pixels. Making a new animation in "19.1" this no longer works. However opening a file in "19.1" made in version "18.whatever" this still works. If possible please confirm behaviour. Or perhaps there is a better way of targeting nested symbols.
-
Hi - Looking to rebuild an old site I'd made in Adobe Flash (CS6) using the GAIA framework (no longer supported) along with some Greensock code. Was watching a tutorial that showed how 'Stagger' could be used with TweenMax so if you had several items of the same class (say 5 navigation buttons), you could animate those onto the screen in interesting ways. I've included the GSAP code into a new Animate CC project, but I can't figure out how to assign several symbols / movie clips / or buttons a class so that TweenMax can animate them. I do have Dreamweaver CC as well as Brackets, and a rudimentary understanding of HTML, actionscript, javascript, and css though I haven't used those much for a few years - so would appreciate some assistance (& workflow tips ) for getting off the ground. Thanks
-
Hello all, Long time reader, first time poster. I've been using GreenSock for Flash quite happily for a number of years now but we've just had an update to Animate CC and now I can't get it work at all! For example the following code: import com.greensock.*; stop(); function setPage(){ boxOver.addEventListener(MouseEvent.MOUSE_OVER, showInfo); boxOver.buttonMode = true; } setPage(); function showInfo(e:MouseEvent){ boxOver.removeEventListener(MouseEvent.MOUSE_OVER, showInfo); boxOver.addEventListener(MouseEvent.MOUSE_OUT, hideInfo); TweenLite.to(showInfo, 0.5, {alpha:0}); //reduce alpha with GreenSock } function hideInfo(e:MouseEvent){ boxOver.addEventListener(MouseEvent.MOUSE_OVER, showInfo); boxOver.removeEventListener(MouseEvent.MOUSE_OUT, hideInfo); TweenLite.to(showInfo, 0.5, {alpha: 1}); //increase alpha with GreenSock } Produces this output: ReferenceError: Error #1069: Property alpha not found on builtin.as$0.MethodClosure and there is no default value. at com.greensock.core::PropTween() at com.greensock::TweenLite/_initProps() at com.greensock::TweenLite/_init() at com.greensock::TweenLite/render() at com.greensock.core::SimpleTimeline/render() at com.greensock.core::Animation$/_updateRoot() I've got the COM folder in with the .FLA as normal and I'm a bit stumped. Any help you could give me would be great. Many thanks!
-
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
- 4 replies
-
- blur
- animate cc
-
(and 1 more)
Tagged with:
-
Hello I'm quite stuck - I made presentation in adobe animate with gsap, each "slide" (containing timelineMax) is on their own keyframe on main timeline. Navigation (next/prev) just skip to next/prev frame of main timeline and then slide timelineMax play. Sadly when navigating back animation on previous slide starts from last played point, not from start. I tried clear(), kill etc, with no results...
-
- gsap
- animate cc
-
(and 1 more)
Tagged with:
-
I'm currently using GSAP TimelineMax, TweenMax etc.. in Adobe Animate cc 2017.5 (canvas) and its work well but, I need to apply GSAP TextPlugin to my Animate cc (canvas) project. I'm try to do this adding dynamic text field but its not working and following error appear in console " TypeError: b.nodeName is undefined ". Thanks.
- 4 replies
-
- gsap
- textplugin
-
(and 5 more)
Tagged with:
-
Okay, so I have myself a hairy little situation here. I have a banner, built in Animate CC. All the animation is mostly contained in a TimelineMax, except for a couple of bits that were just easier to do as nested movieclips. I'm controlling those sub animations with "gotoAndPlay", from functions in the main animation tl. All that works great - except we have a pause/play/replay function in the banner that controls the main timeline, but not the sub clips. What's the cleanest way to get the sub animations to pause/play along with the main tl? Thanks!
- 4 replies
-
- animate cc
- timelinemax
-
(and 1 more)
Tagged with:
-
Hi guys, I 'm using Animate CC 2017 and i would like to animate one by one childs of a clip, which can be letters for example. I've tried using something like this : tl.staggerFrom(this.myClip.children, 0.6, {x:"-=50", alpha:0}, 0.03, "-=0.8"); but it doesn't works. Does someone using animate CC 2017 know if such a thing is possible ? Thanks for your help. Sorry for my english, it's not my native language.
-
Hi, I'm creating a basic banner in Adobe Animate and need to reveal some text using a moving clipping mask. I've tried creating a traditional clipping mask using animate and then animating the mask using TweenMax, but this doesn't seem to work. Any suggestions? Many thanks Tony
-
Very new to integrating gsock into banner ads that will eventually be sent to a 3rd party host, ADGEAR, for serving up to my client's ad venders. I've been trying to setup a banner in Animate CC. I use a mouseover to increase the alpha of a movieclip called "darken", which effectively darkens the stage, and then I use mouseout to change the alpha property of "darken" to lighten the stage once again. Just want a nice way to show user interaction with my banner. Based my banner setup on an Animate CC template found here on this website, GSAP_AdStarter_Demo_2017.fla. It works perfectly when I launch the banner in my browser, but when I use ADGEAR's test site, for some reason, the mouseover animation works, but the mouseout animation fails to play. I think this might have something to do with how I'm targeting the "root" to trigger the movieclip animation "darken". I tested the GSAP_AdStarter_Demo_2017.fla on ADGEAR's test page and it also works perfectly, so I'm pretty sure there's some problem with my coding. Any help would be much appreciated!! Thanks in advance. //Enables ClickTAG for ADGEAR stage.enableMouseOver(10); this.clickButton.on("click", function(evt) { ADGEAR.html5.clickThrough("clickTAG"); }); this.clickButton.cursor = "pointer"; //set scope activation object var root = this, tl; root.on("mouseover", function(){ TweenMax.to(this.darken, 1.25, {alpha:1, ease:Back.easeOut}); }); root.on("mouseout", function(){ //if the ad is asleep, wake the ad to allow animation to complete ad.wake(1500); TweenMax.to(this.darken, 1.25, {alpha:0, ease:Back.easeOut}); }); Files.zip
- 3 replies
-
- animate cc
- banner ads
-
(and 1 more)
Tagged with:
-
Hi, I'm trying to figure out why my stagger isn't working in Animate CC. .staggerTo is possible from within Animate CC is it?! var root = this, tl; tl = new TimelineMax(); tl.staggerTo([root.headline, root.tagline, root.logo, root.cta], 1, {alpha: 1, ease: Back.easeOut}); Tried it with all the elements have the same instance name, but that doesn't work also. Somebody knows if there is an overview what can and can't be used from GSAP within Animate CC? Thanks in advance! Regards, vanWoods
-
Hi! How would one go about targeting a mask for animation that is nested inside a movieclip. .from(this.movieclip.mask, 1, {x:"+=100"},"+=1") does not work for me. Thank You Salakala
- 4 replies
-
- animate cc
- mask
-
(and 2 more)
Tagged with:
-
Hello, Pretty sure this has been addressed before but I'm so new to this, I'm not recognizing it in the archive: I need to cross dissolve one dashboard image into another when user clicks on hotspots. I've done this here (with JS and CSS In this individual web page): http://bigbendhc.org/theUplink/codeDemos/responsiveCrossfadeMultipleImgsAndZoom.html ...but I now need to do this all within the Animate CC and GSAP framework. (I've heard that Animate + GSAP is a better way to build this app.) I've gone through Corey Hudson's tutorials (https://greensock.com/animatecc-quickstart and https://greensock.com/animatecc-templates) but now I need help to pull it all together: Do I use GASP tween code to do the cross-dissolving? Which code do I use? Where does that code go (into the JS layer in the timeline in the Animate file...or does it go into the HTML wrapper? Do I create the hotspots in the HTML wrapper? Do I build the cross-dissolve and the hotspots interactivity in the AnimateCC program? As you can tell by these questions, I'm floundering. If you just want to refer me to another tutorial that will help me take it a step further that's fine. Thanks for any help!
- 3 replies
-
- animate cc
- cross dissolve
-
(and 1 more)
Tagged with:
-
Not sure if this is the right place to ask but thought I'd give it a shot given the amount of experience here. Has anyone tried an entire animation workflow through Adobe animate CC? Any pros and cons? Is the code usable? Are the export sizes small? does the outputed code easily sharable? Up till now, I've been making prototypes in AfterEffects and coding the SVG files in an editor powered with greensock. It's not the most elegant workflow but I know how the sausage is made and the components I need, that and it works across browsers. Most Animate CC examples I've seen seem to be either frame by frame animations or simple banner ads that don't have many moving pieces with not a lot of moving parts (aka Flash). I read Animate CC has greensock integration so it's not a matter of whether it works, but is it worth investing time to learn and use as my primary animation tool? Would love to hear if someone has experience in this. Thanks
-
- 1
-
- animate cc
- software
-
(and 1 more)
Tagged with:
-
Hi All, I am trying to play around with the demo file provided in the 'Quick Start: GSAP and Adobe Animate CC' article; https://greensock.com/animatecc-quickstart All I am trying to do is successfully add an additional symbol into the timeline and apply any animation to it in the js file. Here's what I am doing: 1. Create new layer - 'Layer 1' 2. Create new symbol (a red rectangle) - 'test' 3. Select symbol ('test') and drag onto stage with 'Layer 1' selected. 4. Duplicate existing .from in tl and change symbol name to be 'test' 5. Watch in despair as ad display blank I cannot for the life of me get this to work without receiving the error 'Uncaught Cannot tween a null target.' along with a blank ad. It seems that the symbol isn't being referenced in the js file. Here is the original js he uses; //set scope activation object var root = this, tl; //prevent children of mc from dispatching mouse events root.cta_mc.mouseChildren = false; root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);}); root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);}); root.logo_mc.on("mouseover", function(){ TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut}); }); root.logo_mc.on("mouseout", function(){ TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut}); }); //gsap timeline tl = new TimelineMax(); tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut}); tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5"); tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25"); tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut}); I am just adding a tl.from above the first tl.from (See below); //set scope activation object var root = this, tl; //prevent children of mc from dispatching mouse events root.cta_mc.mouseChildren = false; root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);}); root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);}); root.logo_mc.on("mouseover", function(){ TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut}); }); root.logo_mc.on("mouseout", function(){ TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut}); }); //gsap timeline tl = new TimelineMax(); //Added new symbol ref in line below tl.from(root.test, 1, {y:"500", ease:Back.easeOut}); tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut}); tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5"); tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25"); tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut}); Can anyone point me in the right direction, or point out to me what I am doing wrong? Thanks!! Tom
-
hi, I am trying to tween width and height with TweenMax in Adobe Animate CC: First frame script (in Animate CC): var root = this; // TweenMax.to(root.myBox, 1.25, {scaleX:2.0, scaleY:2.0, ease:Elastic.easeOut}); // --> works // TweenMax.to(root.myBox, 1.25, {width:"500px"}); // --> NOT WORKS TweenMax.to(root.myBox, 1.25, {left:"12px"}); // --> ALSO NOT WORKS ("myBox" is a name of movie clip on stage). Using: Animate CC Version: 15.1.0.210. TweenMax.min.js Version: 1.19.0 (also tried 1.18.2). createjs-2015.11.26.min.js. Thanks.
- 2 replies
-
- gsap
- animate cc
-
(and 1 more)
Tagged with:
-
Hi everyone, most of the time I create banners with simple DOM elements and GSAP, but a clients wants to use an old 2014 banner I did in AS2, so I could do it from scratch in DOM but I tought it would be a nice exercice to try out Animate CC. I already followed this great guide from Cory and learned some things regarding global vars, functions... it's impressive what comes out of Animate. But I'm stuck on a smoke effect function: import flash.display.BitmapData; var currentBitmap:String = "smoke_black.png"; function doTrail(container:MovieClip, targetX:Number, targetY:Number, type:String):Void{ //attach bitmap from the library with the linked name "adobe_flash" var myBmp:BitmapData = BitmapData.loadBitmap(currentBitmap); //create the "main_holder" movieclip that will hold our bitmap var _particle = container.createEmptyMovieClip("main_holder"+container.getNextHighestDepth(), container.getNextHighestDepth()); //create an "internal_holder" movieclip inside "main_holder" that we'll use to center the bitmap data var internal_holder:MovieClip = _particle.createEmptyMovieClip("internal_holder", _particle.getNextHighestDepth()); //set "internal_holder" x and y position based on bitmap size internal_holder._x = -myBmp.width/2; internal_holder._y = -myBmp.height/2; //finally, attach the bitmapData "myBmp" to the movieclip "internal_holder" internal_holder.attachBitmap(myBmp, internal_holder.getNextHighestDepth()); //set the particle's x & y position based on the target x & y. Offset the particle by a few pixels _particle._x = targetX + random(4)-8; _particle._y = targetY + random(4)-8; //randomly rotate the particle 360 degrees _particle._rotation = random(360); //give the particle a random scale, between 50% and 100% var randomScale = random(20); _particle._xscale = randomScale; _particle._yscale = randomScale; //give each particle its own speed _particle.speed = random(3)+1; //make it move _particle.onEnterFrame = function (){ this._xscale += 2+this.speed; this._yscale += 2+this.speed; this._y -= this.speed; this._alpha -= this.speed; //check if particle is invisible, and remove it if(this._alpha <= 0){ delete this.onEnterFrame; removeMovieClip(this); } } } This function is called from another point in the timeline by this: _root.onEnterFrame = function():Void{ doTrail(container, 0, 0, currentBitmap); } So I think the onEnterFrame could be replaced by an interval or something like createjs.Ticker.addEventListener("tick", doTrail); And some elementys like _x can easely be replaced by removing the underscore but it's more the logic of attaching a bitmap that I can't find how to do. It was a very basic code in AS2 so I hope that some of the genius present in this community can help me out with it. Thank you
-
I know this has an exceedingly simple answer, so apologies in advance. I decided to try out Animate CC for a quickie banner campaign. I'm using Cory Hudson's awesome GSAP banner starter files (from the Greensock blog post) with AdHelper. Everything is great, except I have a play/pause toggle and every time I click on it, it fires the banner clickthrough. How do I make that not happen?
- 3 replies
-
- event bubbling
- animate cc
-
(and 1 more)
Tagged with:
-
Hey i was wondering if you could help me guys, in the past years I used to create alot of ADs using flash AS2 / AS3, always relied on GS as the most easy way to build apps. Now that AnimateCC was realized i thought it would be a nice idea to work on AD projects again... i searched the forums, the website and so on... http://greensock.com/animatecc-quickstart <- found the guide and read it, started to build my own test-ADs. It works so nice when i use the premade templates of GS. BUT ONLY when i deploy the AD in animate cc, the html (combined with an ip and so on) works just fine BUUUTTT if i just open the HTML, i only get nothing but a white screen with the black border where the add was supposed to be what did i do wrong? i rebuild my banner a few times, tried to figure it out, but i have no clue why it`s like that :/
- 5 replies
-
- animate cc
- gsap
-
(and 1 more)
Tagged with:
-
Hi everybody, I used to integrate Greensock in Flash Actionscript files, by the past. When mobile devices arrived, I used GSAP JS version with Edge Animate. Actually, Edge is abandonned by Adobe and focus is on the new Animate CC (ex Flash) with HTML5 export. So, I am trying to integrate GSAP in Animate CC, but that works bad. If I can write some codes like this : TweenMax.to(this.lien_mc,3,{rotation:180}); Other commands doesn't seem to work : TweenMax.to(this.lien_mc,3,{rotationY:180}); or : Draggable.create(this.lien_mc ); This is the comment found on Chrome when I inspect the object (when using Draggable) : Uncaught Cannot tween a null target. Also, 3D properties seems not to be found : rotationX, rotationY, rotationZ. Do you have an example files to understand where is the conflict between GSAP and CreateJS ? Do you have a documentation to know how to use all GSAP possibilities inside the new Adobe Animate CC ? Thanks. Zhur animate cc.zip