Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'adobe animate'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 15 results

  1. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. IMPORTANT: This article was written for Animate CC 2016 and there have been changes in Animate CC 2017 that make much of this obsolete. To see how easy it is to add GSAP to your Animate CC 2017 projects please read: Quick Start: GSAP and Adobe Animate CC 2017. We are happy to introduce this guest post from Cory Hudson. His many years as a leader in the interactive advertising space gives him unique insight into working with GSAP and Adobe Animate CC’s HTML5 <canvas> output. Cory is well-known for his work at the IAB, presentations at Adobe Max and conferences across the country. He’s helped GreenSock understand specific challenges in the HTML5 advertising space and we’re honored to have him posting here. We are very excited to see advancements in Animate’s HTML5 output. Although it is easy to use GSAP in your Animate projects, it is not super clear or intuitive to include it via the Publish Settings dialog box. This series will have you up and running in no time while giving you many practical tips to avoid common pitfalls if you are transitioning from Flash and ActionScript-based projects. Part 1: GSAP-Ready Adobe Animate CC Starter Files Part 2: Creating GSAP Templates for Adobe Animate CC Author: Cory Hudson, VP Creative Technology & Innovation, BannerWave Chair, IAB HTML5 Working Group Reunited: GSAP & Adobe Animate CC During the same time period that Adobe Flash established itself as the content creation tool of choice for the digital advertising industry, the GreenSock Animation Platform had also become synonymous with digital advertising and had earned the well deserved distinction of being the de facto industry standard for programmatic animation of Flash-based content. The two technologies enjoyed a sustained and complementary relationship that became a familiar and effective pairing for Flash animators everywhere. However this incredibly successful arrangement seemed to lose relevancy as the ad industry abandoned Flash and it’s SWF output in favor of HTML5. If you were one of the ad creators who had been using the two technologies together to make your living, then you were probably pretty bummed out to say the least. Fortunately, GreenSock was quick to adapt and shifted away from it’s ActionScript tools. The GreenSock Animation Platform (GSAP) was ported to JavaScript in 2012 and has since been the tool of choice for professional animators in the HTML5 world. Having realized that the industry still needs powerful content-creation tools for HTML5, Adobe rebranded Adobe Flash Professional as Adobe Animate CC with many features catering towards HTML5 <canvas> output and banner ad creation. To many, it appears as though GSAP has finally found the worthy partner it has been waiting for. The two technologies can be used together seamlessly, achieving great results that are highly optimized across all browsers and devices. Getting GSAP into an Adobe Animate CC project Despite how well Animate CC and GSAP can work together, Animate doesn’t provide an easy way through its interface to load external JavaScript files like GSAP’s TweenMax.min.js. In this article I will focus on showing you how to use some starter files that are preconfigured to load TweenMax so that all you have to do is edit and publish. In my next article I'll guide you through the process of creating a custom template so that you can greatly extend the capabilities of your published Animate projects and streamline your workflow. Grab the source files IMPORTANT: This article was written for Animate CC 2016 and there have been changes in Animate CC 2017 that make much of this obsolete. To see how easy it is to add GSAP to your Animate CC 2017 projects please read: Quick Start: GSAP and Adobe Animate CC 2017. To get started download the GSAP-AnimateCC-Starter-Files (will not work in Animate CC 2017. The zip contains: GSAP_Basic.fla: A simple file that uses a custom template that only loads TweenMax.min.js. Contains minimal animation code. Perfect if you aren’t concerned with banner ads or related features. GSAP_AdStarter.fla: Uses a template that loads TweenMax.min.js and AdHelper.js. No code or artwork present. Use this to start new banner ad projects. GSAP_AdStarter_Demo.fla: Uses the same template as GSAP_AdStarter but contains some assets and animation code to be referenced in this tutorial. Start coding With GSAP In Adobe Animate CC right now After downloading and extracting the demo files, open GSAP_AdStarter_Demo.fla. Upon initial review, you’ll probably notice some familiar ad-specific elements sitting on the Stage: Logo MovieClip (“logo_mc”) Headline MovieClip (“headline_mc”) Tagline MovieClip (“tagline_mc”) CTA MovieClip (“cta_mc”) You can click on each element to see its instance name in the Properties panel. You’ll see that there are no keyframed animations present on the main timeline, however if you Control > Test to publish the FLA, you’ll see that the elements that were visible on the Stage are actually introduced via a sequenced animation that ends with the CTA button pulsating continuously. How was this animation executed without the help of the Animate timeline? That’s right, you guessed it, this was done with GSAP! Go back the the timeline and click on the first frame of the js layer and launch the Actions panel (Window > Actions or F9). Upon reviewing the code, you’ll most likely discover that you are already very familiar with what you see, because the exact same GSAP syntax that you have been using outside of Adobe Animate works here as well: //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}); Wow, that was easy wasn’t it? But wait, there was no visible linkage to TweenMax.min.js inside of the Actions panel so how was it able to be successfully leveraged? Do Control > Test to test and publish the FLA for a second time. This time right-click within the document and view the source of the generated HTML wrapper and you will see the following reference to the TweenMax.min.js file inside: So how did this linkage to TweenMax get injected into the HTML wrapper so that we could use it inside of our FLA? Well, a custom template of course! Go back inside of the FLA and go to File > Publish Settings > Advanced where you can see that the FLA is leveraging a custom template for publishing the HTML called Standard_HiDPI_GSAP_AdHelper. You’ll also notice that it has been assigned to a custom profile of the same name. It was this custom template that injected the code to load TweenMax.min.js into the HTML wrapper, so that it could be used within the FLA without having to manually include it. The template also loads AdHelper.js which is a small JavaScript utility that has a number of features specific to HTML5 banner ads. I’ll explain some of these features briefly below. For a more comprehensive dive into AdHelper read the whitepaper I wrote for Adobe: Need HTML5 Ads? Adobe Animate CC to the Rescue! Retina ready Next, look inside of the Properties panel and notice that the Stage of the FLA has dimensions of 600x500 yet after publishing the canvas is actually being rendered at 300x250. This is AdHelper automatically scaling the canvas in order to ensure crisp graphics on high-DPI screens. The reason that we need to author our Adobe Animate ads at double the actual ad dimensions is because you will most likely want to ensure that any images or assets that are cached as bitmaps are high resolution and not scaled up on high-DPI devices, which would cause them to appear blurry. Stop animation after 15 seconds Control > Test one last time and watch the sequenced animation for a full 15 seconds. You’ll see that the pulsating animation of the CTA button actually stops at the 15 second mark. If you mouseover the ad the pulsating animation will resume and then pause once again when you mouseout and leave the bounds of the canvas. This is AdHelper functionality once again, this time automatically pausing and restarting any ongoing animations in order to comply with standardized and widely adopted IAB and publisher specs. More template goodies If you continue to inspect the ad unit within the browser, you’ll see that there is a 1 pixel black border around the banner and upon clicking anywhere within the banner it will launch www.greensock.com in a new browser window. The creation of the border and the click-handling functionality are both being executed by code contained within the custom template, saving you the hassle of having to do this repetitive work on each and every banner project. You will never need to include a border or any click handling methods within the FLA of any ad that uses this custom template. The two GSAP AdStarter files that use the Standard_HiDPI_GSAP_AdHelper template will support: Loading TweenMax.min.js Loading AdHelper.js HiDPI / Retina Automatic starting and stopping of animations after 15 seconds Performance monitoring Alternate content for unsupported browsers Automatic border creation Click-through handling Preloader View the Pre-compiled template The Standard_HiDPI_GSAP_AdHelper template has a considerable amount of custom code added to it to handle the features above. It is a great exercise to peak behind the scenes to see how and where these features were implemented inside the template. Go to File > Publish Settings > Advanced. Click on Export. Choose location to save your file. Open the file you just saved in your text editor of choice. If you aren’t working on ads and just need easy access to GSAP use GSAP_Basic.fla from the downloadable files. To learn how to create your own custom template read the second article in this series. Adobe Animate CC power tips Now that you have the tools to get up and running with GSAP and Animate, I’d like to share some additional tips that will help you tremendously as you begin building actual banners using these two technologies together. In no particular order, here we go: Move Transformation Point Previously with ActionScript our GSAP tweens would transform around the Registration Point, however this is no longer the case when tweening inside of an Adobe Animate HTML5 Canvas document. Now when tweening by code with GSAP the transformation occurs around the Transformation Point, not the Registration Point. You can move the Transformation Point using the Free Transform Tool to any position you want. Scope One of the most immediate differences between Flash/AS3 and Adobe Animate/JavaScript is scope, which must be defined explicitly. JavaScript does not use this as an implicit scope as is the case with AS3. You are now required to explicitly specify scope in timeline scripts. So, on the timeline, rather than calling stop(), you must use this.stop() instead. For example: // "this" in a timeline script refers to the MovieClip or stage that it's defined in. this.stop(); // access a child MovieClip instance: this.myChildMC.gotoAndPlay("end"); Global variables & functions Variables are defined within the scope of their frame code, so if you define a variable in the first frame, you will not be able to access that variable in the final frame. For example: // first frame var myVariable = 1; // final frame console.log(myVariable); // outputs undefined In order to address this, you need to scope your variables using this so that they are accessible across all frames. Please note that variables are not strictly typed in JavaScript as they were previously in AS3. // first frame this.myVariable = 1; // final frame console.log(this.myVariable); // outputs 1 The same approach should be taken for defining any functions on your timeline that will need to be called later in the animation or by a parent MovieClip: this.myFunction = function(){ this.myVar = 0; this.gotoAndPlay(“start”); }; It is also helpful to be aware that you can reference the main timeline of the FLA from nested MovieClips using a global reference named exportRoot or the stage property, which is exposed on all DisplayObject instances and points to the Stage that contains the instance. For example: // from inside of a nested MovieClip, reference another MovieClip on the main timeline: exportRoot.anotherMovieClip.x = 100; // or: this.stage.getChildAt(0).anotherMovieClip.x = 100; You should also know that if define external functions inside of your HTML wrapper you can automatically access them from anywhere inside of your FLA. For example: // function inside of the HTML wrapper: function myExternalFunction(){ console.log("myExternalFunction"); } // can be called from within the FLA as follows: myExternalFunction(); You can also append global variables and functions to the window and document objects to make them accessible from anywhere (from inside the FLA or externally from the HTML wrapper). For example: // on the root timeline: window.root = this; // create a global reference // in another MovieClip's frame action: root.doSomething(); // can use the global variable without a scope //inside of the HTML wrapper root.doSomething(); // can also use the global variable without a scope Frame numbering & labels EaselJS uses zero-based frame numbering rather than the one-based indexing that you were probably familiar with when working with Flash/AS3. This can cause some initial confusion, as it currently requires you to subtract 1 from the indexes displayed in Adobe Animate. For example: this.myMC.gotoAndPlay(0); // 0 is actually the first frame, this may be confusing at first To avoid this confusion, it is suggested that you label your animation frames with frame labels, and reference those in your code rather than numbers. Logging It's likely that you've previously used ActionScript's trace() statement to debug your code. In JavaScript, you can use console.log() instead: console.log("This is the same as a trace statement."); To view console.log() statements when previewing your HTML file, you will need to open up the JavaScript Console in Chrome Dev Tools, or the Console tab in Firebug if you are testing using Firefox. Be aware that in IE9 the console must be open in order to function correctly or it will generate errors. Make sure that you remove any console.log() calls prior to deploying your banner project. Linkage IDs If you plan to reference MovieClips from the Adobe Animate Library through code in order to animate them programmatically with GSAP, then you need to ensure that you assign Linkage IDs in the Library panel. This is exactly the same way that it was done with Flash, so this should look very familiar: // assumes there is a MovieClip in the Library with a Linkage ID of “logo” var myLogo = new lib.logo(); myLogo.x = myLogo.y = 25; myLogo.alpha = 0; stage.addChild(myLogo); TweenMax.to(myLogo, 2, {alpha:1, ease:Strong.easeOut}); This approach can also be very useful if you have a designer who is preparing the assets within Adobe Animate and then handing them off to a developer who might leverage them outside of Adobe Animate. In this scenario Adobe Animate functions as a pure content creation tool with the generated JavaScript file containing a JavaScript representation of the Library that allows the developer to easily reference any asset that has been assigned a Linkage ID. Other GreenSock HTML5 tools From the GSAP side you should be aware that not all of its available plugins and tools that work flawlessly within the HTML5 DOM will work with Animate’s HTML5 export. Tools such as Draggable, SplitText, ScrambleText, etc specifically target CSS values of DOM elements which don’t exist inside the HTML5 <canvas>. Up Next: I will walk through the steps of creating your own custom template, so that you can configure one for yourself that meets your specific needs. This will allow you to create multiple custom templates for specific ad vendors, formats and configurations. Read Creating GSAP Templates for Adobe Animate CC. Please feel free to reach out to me with any questions or feedback and I’ll be more than happy to help as you begin creating HTML5 banners with GSAP and Adobe Animate CC. These two old friends are finally reunited and the future is looking bright! Cory Hudson Email: cory@bannerwave.com Twitter: @coryhudson4 LinkedIn: https://www.linkedin.com/in/cory-hudson-3535675 Web: http://www.bannerwave.com
  2. 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. 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!
  4. 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
  5. Hey there, I need a zip file of Adobe Animate CC (trial.)
  6. 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!
  7. 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.
  8. I found this very nice previous post, but I can´t make it work on adobe animate....any ideas from any actioscript guru?
  9. 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
  10. 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.
  11. 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!
  12. 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.
  13. 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/
  14. 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?
  15. 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
×