This HTML5 Canvas document includes a good deal of JavaScript in order to perform timeline control, interaction, dynamic text assignment, and generative animation based upon MovieClip symbol instances dynamically created from the project Library.
Let’s go ahead and have a look at the sample FLA document, which you can download and modify as you wish. Not only do we now have CreateJS completely integrated within Animate… we also have the ability to write JavaScript natively within the application tied to frames – just like ActionScript.
This not only paved the way for users to integrate their own custom platforms through extensions, but also was the beginning of true HTML5 and JavaScript integration within Flash Professional itself.įigure 3: The integrated HTML5 Canvas Publish Settings. With the release of Adobe Creative Cloud and Flash Professional CC, the application was completely rewritten to modernize the codebase and make the program more powerful than ever. Complete CreateJS Integration (2013-Present) We would have to wait until Creative Cloud became a reality to finally have true JavaScript integration within Flash Professional. Rather, you’d write any JavaScript within special comments within your ActionScript which would be interpreted through the Toolkit upon publish. While this was a workable solution – it remained an external extension with no true native integration… and writing the actual JavaScript within the application was a bit of a hack, as JavaScript wasn’t at all supported. Eventually, CreateJS output was enabled in Flash Professional CS6 through a panel that allowed users to export a project to HTML5 Canvas using the CreateJS libraries.įigure 2: The Toolkit for CreateJS panel within Flash Professional CS6.
With the introduction of the CreateJS set of libraries from Grant Skinner and company, users familiar with ActionScript APIs and the traditional Flash display list had something that felt very familiar. Toolkit for CreateJS Extension (2011-2013) What this demonstrated though, is that users wanted more from the Flash Professional application than just Flash-based content and paved the way for the more successful efforts to come. It wasn’t very pretty… and the effort wasn’t long-lived either. When ready, fire up the “Wallaby” utility and convert it to HTML and JavaScript. You would author your project using a normal ActionScript-based document type. In 2011, Adobe released a beta utility application built with AIR for Desktop which converted. Let’s have a look at the various attempts at generating JavaScript and HTML from Flash Professional previous to the tight integration we have today. With Animate CC (formerly Flash Professional) having the history that it does… a history made up largely of Flash and ActionScript… it may be surprising to some that not only can you write JavaScript within an Animate project – but that you’ve been able to do so for quite a number of years.
In this article, we’ll examine an animated, interactive project which covers many of the basics when dealing with JavaScript in Animate projects – including interactivity, playhead control, dynamic instantiation of symbol instances, and more! Writing JavaScript… in “Flash”? It’s important to note that Animate is not a JavaScript and web-centric application – but is rather a platform and language agnostic application for working across a variety of platforms.
You use JavaScript in projects which require it, such as HTML5 Canvas and WebGL… but you can still use ActionScript on projects which are to be published for Flash Player or AIR, including AIR for Android and iOS – and Adobe continues to update these runtimes. For one thing, Animate is not a JavaScript only application. So why the current shift to JavaScript? Well, it isn’t exactly as simple as that. Using HTML5 Canvas In Animate CC: JavaScript Basicsįor nearly 20 years, the programming language used within Animate (Flash Professional) projects has been ActionScript.