Adobe Animate To Html5

2/15/2022by admin

2020 brings the end of Flash support across all platforms. For those looking to savor their legacy content and make sure it remains accessible, we’ve rounded up some useful tools to convert Flash to HTML5.

Back in 2017 Adobe officially announced that 2020 will be the last year of their support for the Adobe Flash Player plugin. This marks the demise of Flash-based content. So if you have content still running on Flash, you’ll have to make the transition to HTML5 for it to remain available for users on the web.

Read on to find the latest details on Flash’s end of life along with the tools required for Flash to HTML5 conversion.

Is it really the end of Flash?

In this video I will show you how to create HTML5 animated banner in Adobe Animate CC 2020. WARNING: this video will make you feel hungry:)here is the link. Reach your audience on desktop, mobile, and TV by exporting your animations to multiple platforms, including HTML5 Canvas, WebGL, Flash/Adobe AIR, and custom platforms like SVG. You can include code right inside your projects and even add actions without having to code.

Adobe Flash has been slowly pushed to the edge of the cliff for the last 10 years and now it’s finally time to say goodbye. Modern web technologies with cross-platform support and open-source code are taking over.

The interactive multimedia platform’s decline started when Apple rejected Flash back in 2007, refusing to use it for the iPhone’s operating system. Steve Jobs wisely anticipated the foundational change in the multimedia dimension and decided not to use it for Apple’s devices.

It took another critical hit when Youtube also switched from Flash to HTML5 in 2015 to accommodate mobile devices. Youtube users were growing irritated from constantly having to install updates for the Flash Player plugin. Youtube owners were frustrated with how they had to provide different versions of the video portal for mobile and desktop, so they also decided to switch to HTML5.

Following the lead, Google Chrome and other browsers made the switch to HTML5 that same year, which put the last nail in the coffin. After 2015 browsers started blocking Flash content from playing by default. Users had to manually enable it for every page. The main concern was that Flash ran in the background of the browser, causing serious issues in performance, stability, and security.

Facebook and other social media giants which are now platforms for casual games also went with HTML5 technologies.The era when Flash was known for its engaging, interactive, at times very bizarre games is now long in the past.

When is Flash shutting down?

December 31, 2020 was the last time a banner would ask us to turn on Flash to display some content. The plugin is to be removed completely from all browsers via Windows update. As for Macs, Apple has never been a huge supporter of Adobe Flash, so expect them to do the same.

This information is highly critical for companies that still use Flash-based ads. Same as for other Flash-based content in Chrome (and Chromium-based browsers), Flash-based Google and Bing advertisements required a click to be activated and weren’t available at all for mobile internet users. This class of content is now permanently blocked beyond the deadline, starting January 2021.

For those who relied on Flash content these few years after Adobe announced its retirement date – there’s no more room for hesitating. It’s time to make the transition to HTML5.

Find out how we perform updates and build brand new web platforms

Why is Flash going away after 2020?

Adobe Flash is going away because such open web standards as HTML5, WebGL and WebAssembly have developed and are now taking center stage. They allow the same functionality, before only available through the plugin, to be integrated directly into the browser.

A multitude of issues has plagued Flash for years. The main concern has always been lack of security as Adobe struggled to keep up with zero-day vulnerabilities being revealed every other month. Another downside of the player is that it was very heavy. At times Flash applications would drive CPU usage to 100% which would make users go crazy. Browser tabs with Flash content were always running in the background and viciously preying on systems resources, undermining the performance of currently active apps.

Despite the developed codebase and toolkit that was Flash’s ActionScript language, because of these and other usability issues, content makers and leading digital platforms were straying away from the once popular multimedia project. That is a bit sad, as ActionScript was a promising technology and far outweighed the capabilities of JavaScript-based frameworks and libraries in terms of multimedia. Developers had to write a big portion of code in JavaScript to extend the basic functionality to fit the requirements of a real project. Anyhow, Adobe failed to create a fundamental approach to close out the inefficiencies, so here we are now waving Flash goodbye.

Steve Jobs summarized the downsides of Flash pretty well back in April 2010:

  • Flash is not an open-source platform which sets barriers for developers and thus seriously impedes development and application of security patches to address faults and vulnerabilities.
  • Modern video formats, such as the H.264 no longer need to be coated with an overlay. It can easily be distributed across desktop and mobile devices via HTML5 native video and audio with its convenient Canvas model, thus rendering it the best choice for new content developers.
  • Adobe Flash is inherently unsafe and practically unstable, its security has been the main concern since its inception.
  • The Flash standard has been designed for and remains centered on desktop devices. Whereas, the contemporary tech horizon is ruled by touch-based mobile devices that rely on lower power consumption with hardware-level decoding and open web standards.

Keeping all these shortcomings in mind, a vast majority of current content creators have wisely made the switch to developing multimedia and interactive web services based on the rich HTML5 platform. If your online products still have any kind of Adobe Flash dependencies, we highly recommend a timely Flash to HTML5 conversion.

Wondering how to play Flash games in 2021 and beyond?

Flash game players and particularly the fans will be taking the hardest blow. There are no automated tools for Flash to HTML5 conversion for this type of content out there. An average game project contains multiple .fla files that rely upon several Actionscript libraries as well as external classes compiled at runtime, coupled with source code .as2 or .as3 files depending on when the game was made (the Actionscript version). To put it simply, there is no magic conversion tool available to seamlessly turn all this into HTML and JS files without any loss.

The only solution to this problem is to recode the game using HTML5 web technologies and this redevelopment process is definitely not cheap. Keeping this in mind, we should expect only the major Flash game titles having large communities of players to make this transition. Otherwise, if you still would like to enjoy the good old flash-based games you used to play, refer to the Flashpoint project. These guys have worked hard to save over 49,000 games and more than 3,600 Flash animations through their web game preservation project.

HTML5 as the new web standard for multimedia content

Still wondering what will replace Flash? HTML5 and related technologies have been stepping on its heels for quite a while and now they are ready to take the throne. The latest version of HTML excels at adaptive content rendering – an area which was previously a serious setback. It also works smoothly for building mobile-ready applications, providing rich APIs whereas Flash was always struggling to accommodate mobile devices.

HTML5 is the latest development of the open web standards that allows creating more powerful and diverse websites with sophisticated multimedia and 2D/3D presentation technology built right in to allow immersive content viewing. With the help of native <video> and <audio> components, along with excessive JavasScript API to control interactive graphics, developers can embed first-class audio, video, and effects without the need to rely on third-party plugins such as Adobe Flash player.

The creation of 2D and 3D graphics has become much easier with HTML5 Canvas which is powered by WebGL technology and SVG format for vector graphics. WebGL (Web Graphics Library) is a JavaScript API that lets you take advantage of the device’s hardware graphics acceleration to provide high-performance 3D content rendering. It conforms with the widely accepted OpenGL standards to provide cross-platform compatibility.

SVG allows you to describe two-dimensional vector graphics which can be easily scaled without distortions to fit any screen size. It is also designed to be fully compatible with JavaScript, XML, DOM, CSS and other web tools. Having markup-language structure, SVG images can be easily localized to any language by just programmatically updating the text within. You won’t even need a graphics editor for that matter.

HTML5 also presents intuitive and simple tools for creating subtitles and chapters in audio and video content, as well as Real-Time Communication (WebRTC) technology for controlling videoconferencing.

These simple open-source tools create a boundless environment for developers to build web products that can be used across all modern platforms, including touch-based devices.

Check out this eCommerce web platform designed according to the latest trends

So let’s wave Adobe Flash goodbye and get ready for Flash to HTML5 conversion.

Adobe animate publish to html5

Create your action plan for Flash to HTML5 conversion

Decided you want to keep your amazing Flash content? Don’t know where to begin with the transition to HTML5? There’s a few things you should consider to prepare yourself for Flash conversion.

The amount of work to be done really depends on your project’s size, how much multimedia content it contains, its interactive features, their complexity, and how strongly Adobe Flash is involved. Another issue is the integrity of content itself. Does it stand the test of time? Most projects created just a few years ago will look outdated and probably require some refurbishment. Let alone, they might need a complete makeover or reproduction from scratch. A simple conversion won’t do in this situation.

You need to break down the project and evaluate the content you are dealing with. Some Flash features may not be possible to recreate with native web technologies. Some might not even be worth recreating in the first place.

If it’s just animation, video, or audio content, the conversion process is rather smooth. All we need to do is convert the specific layers and project’s assets from one document type to another. It’s much more challenging if you have an interactive game or other type of application. This means you will have to deal with converting actual ActionScript code.

First thing you would want to do is create an action plan for conversion. We propose the following steps to make your transition to modern web standards as smooth as possible:

  • Locate and document your source files, check if anything is missing.
  • Determine which graphic and animation assets can be reused.
  • Create a cross-reference list and guide to follow during conversion.
  • Determine the amount of ActionScript code and work-hours needed for recoding.
  • Define a set of standard rules and requirements for all developers to follow.
  • Acquire the proper tools and get started with Flash to HTML5 conversion.

Tools to convert Flash to HTML5 in 2021

The internet contains some information about the tools for converting Adobe Flash to HTML5, however, most of it is out-of-date. Some of the tools have been either discontinued or are no longer supported by their developers. For instance, Swiffy was a Flash to HTML5 converter introduced by Google back when Flash was being widely rejected after 2014. Google Swiffy was shut down in 2016 and is no longer available. To address this issue we’ve compiled an updated list of tools that you can conveniently use for Flash to HTML5 conversion.

The Flash to HTML5 conversion tools you need

There are two ways to approach Flash to HTML5 conversion depending on what types of files you have at your disposal. If you have the source .fla and .as3 files, the process will be way easier with Google’s Web designer and Adobe’s Animate CC. If you don’t have the source files but have the actual SWF? Not to worry, there are also some automated tools provided as part of the Haxe and CreateJS JavaScript libraries to convert SWF to HTML5.

See our list below for details about the available tools:

  • Adobe Animate CC is the latest incarnation of the Flash Professional editor (and has been rebranded to differential itself as an animation tool without any Flash dependencies). It’s still essentially the same program though and such can still load original .fla files created with other versions of Flash Professional.

The big addition to Adobe Animate is that it now supports HTML5 targets and this offers a migration path for older Flash applications and games created in Flash Professional. Although Adobe Animate does an excellent job of converting old timeline animations, there is no automatic translation path for legacy AS3 code. As such, any AS3 code in older .fla projects will be commented out and needs to be manually ported to Javascript. Another drawback of Adobe Animate is that converted timeline animations tend to be much larger than the original .swf outputs.

  • Google Web Designer. Google recommends this free web editor for Flash to HTML5 conversion. It is a good choice if you don’t want to pay the price of Adobe’s subscription. However, you will have to pay an intrinsic price in terms of conversion quality as users report that complex Flash projects may have conversion issues.
  • OpenFL is an open-source implementation of the Flash API written in the Haxe programming language. Haxe was originally created in 2006 as an open-source successor to ActionScript 2 and has the ability to compile itself to multiple targets including Javascript, C++, Java, and Python. OpenFL was created in 2013 and designed as a cross-platform implementation of the Flash API. Haxe, combined with OpenFL, allows a developer to target web (html5), PC, Mac, Android, iOS, and even game consoles like the Nintendo Switch.

Many companies have ported their AS3/Flash web-sites to Haxe/OpenFL, for example:

How an application/game is ported from AS3/Flash to Haxe/OpenFL?

The OpenFL API was meant to fully mirror the Flash API. In a complex application or game, it’s a huge advantage as you can have literally 1000’s of API calls that don’t have to be implemented.

Adobe Animate To Html5

AS3 code (similar to Haxe) needs to be ported to Haxe. A tool commonly used is ash3x. Although as3hx automagically converts AS3 to Haxe, it isn’t perfect (and was never meant to be). It gets you about 70% there and a programmer has to finish it off from there.

  • Zoë tool from CreateJS. This tool is part of a JavaScript library package that is altogether supported by Adobe, Microsoft, and Mozilla. Zoë is a stand-alone tool for converting .swf animations to sprite sheets that can be used in HTML5 Canvas. This tool works great as it auto-detects your asset dimensions, maintains the same frame labels, and it supports nested graphics.

The animation editor tools are pretty straightforward and offer a lot of tutorial guides. Working with Haxe and JavaScript libraries, on the other hand, can be pretty tricky. You may need to ask a qualified web developer for assistance in using these tools if you are not that much into the technical stuff.

Conclusion

Modern web standards have surpassed Flash in their capabilities and offer a much more seamless experience, without security concerns and performance issues. Developers can now also benefit from an easier way of crafting interactive 2D and 3D graphics, and provide the same great experience to mobile users. The powerful APIs of modern JavaScript frameworks allow them to harness capabilities of user devices to the full extent.

Despite the long-awaited demise of Adobe Flash in 2021, some content owners might still not have made the much-needed transition from Flash to HTML5. This means their users will lose access to their interactive games, video, and audio content. Deciding to remodel your animated content using modern web technologies is not an easy step, but it’s definitely achievable with the help of a team of qualified experts in web development.

We hope this guide and list of conversion tools proves useful to content makers and sets them on the right path. After all, it is the need of the hour to ensure a swift and successful transition to the new web standards.

Get front-row industry insights with our monthly newsletter

Web Development

Enterprise-Scale Web Development Company

PixelPlex is a well-rounded web development team that’s capable of handling the entire SDLC. Whether you need an app built from the ground up or require a legacy system to be updated, our web developers are ready to jump in at any stage. Let’s team up to create a brand-new and SEO-friendly channel to target clients and add to your bottom line.

Web Development

Enterprise-Scale Web Development Company

PixelPlex is a well-rounded web development team that’s capable of handling the entire SDLC. Whether you need an app built from the ground up or require a legacy system to be updated, our web developers are ready to jump in at any stage. Let’s team up to create a brand-new and SEO-friendly channel to target clients and add to your bottom line.

Get front-row industry insights with our monthly newsletter

For nearly 20 years, the programming language used within Animate (Flash Professional) projects has been ActionScript. So why the current shift to JavaScript? Well, it isn’t exactly as simple as that. For one thing, Animate is not a JavaScript only application. 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. 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.

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”?

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. 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.

Adobe Wallaby (2011-2012)

In 2011, Adobe released a beta utility application built with AIR for Desktop which converted .fla files to HTML. You would author your project using a normal ActionScript-based document type. When ready, fire up the “Wallaby” utility and convert it to HTML and JavaScript.

Figure 1: The Adobe Wallaby application.

It wasn’t very pretty… and the effort wasn’t long-lived either. 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.

Toolkit for CreateJS Extension (2011-2013)

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. 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.

Figure 2: The Toolkit for CreateJS panel within Flash Professional CS6.

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. Rather, you’d write any JavaScript within special comments within your ActionScript which would be interpreted through the Toolkit upon publish. Flash Professional users wanted more. We would have to wait until Creative Cloud became a reality to finally have true JavaScript integration within Flash Professional.

Complete CreateJS Integration (2013-Present)

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. 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.

Figure 3: The integrated HTML5 Canvas Publish Settings.

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.

Sample Project Overview

Let’s go ahead and have a look at the sample FLA document, which you can download and modify as you wish. 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. It’s a great example of some of the things you can do with CreateJS and Animate!

Figure 4: The “Bring the Rain!” project in Animate CC.

Have a look at the project and note that we have an Actions layer to hold any of our JavaScript code and a Labels layer which holds a number of labels given to specific frames. These two layers do not contain any visual content. Next, we have a Nav layer containing a number of interactive button instances. Note that each of these instances has a unique instance name provided, allowing us to wire in interactivity later on.

Figure 5: The layers within our root Timeline.

Below that, a Darken layer which contains an MovieClip symbol instance with its own internal animation. This instance will be used to switch the rain on and off. There is a Scenic layer below that, containing a Graphic symbol instance with some basic animation of hills and a cloud as well. Lastly, a Sunrise layer which is actually the only thing that is animated directly on the root Timeline.

Timeline Manipulation

To control the playback of both the root Timeline, and the internal Timelines of the different MovieClip symbol instances we are using, we will need to write some JavaScript in the Actions panel. Note that there is no need to control the playback of any Graphic symbol instance Timeline – as the Timeline of a Graphic symbol is bound frame-to-frame to that of the main Timeline.

Figure 6: The Actions layer within out Project.

With frame 1 of the Actions layer selected, open the Actions panel from the application menu by choosing Window > Actions. Notice the very first thing we do is stop the main Timeline by stating:

When you see the keyword this, it will refer to the current scope. In the case of the main Timeline, this represents the main scope of the project. If we include the following piece of code in frame 1:

and then run our project in a browser with the console exposed, we will see exactly what this represents:

Figure 7: The Google Chrome Console.

We can perform this debug function upon any object within out Animate project to help troubleshoot a problem or investigate the make-up of our objects.

Now, select the final frame of animation – frame 75. You will see the following line of code:

Instead of a simple stop() action, we are telling the playhead to move to the frame which has a label of “LoopPoint” within out Labels layer and then begin playing from that frame. This creates an effective bit of looping within the main Timeline. We can also pass a specific frame number into our gotoAndPlay() command, such as:

…which would do the exact same thing.

Figure 8: Frame Labels within the Timeline.

Using frame labels is much more flexible, however, as it allows you to shift the frames around without having to update the specific frame number in your code. You can also use commands such as gotoAndStop() and play() to effectively control the playhead.

Properties and State

Before moving on, we also set a number of state variables on frame 1. These can be seen in the following lines of code:

The first line sets the visible property of the MovieClip instance with the instance name of darkening to false. This effectively will hide the entire instance from view until we set it to true later on. The second line sets a new variable called isPlaying to the value of false. This is a boolean variable (having a state of either true or false) we will use to keep track of the current state of our interactive across the entire codebase.

We also determine the width and height of the Stage, and preserve these values within variables to access across our interactive later on. The stage.canvas object can be used to access both width and height when writing JavaScript. This is especially useful if we were to adjust the size of our Stage dynamically based upon the parent webpage or some other factor.

Dynamic Text Assignment

There is block of code in frame 1 which modifies the text values of our button labels and makes the additional modification of setting the mouseEnabled property of each internal text field to false. We want this to be set to false so that the text will not obscure action interaction between the mouse cursor and the underlying skin elements.

We can see 2 lines for the “play” button:

Two for the pause button:

And two for the “stop” button:

Each of these symbol instances is based off of the ProtoBtn MovieClip symbol in our project Library. It is actually a composite of multiple symbol and object types. As mentioned, ProtoBtn itself is a MovieClip symbol whose first layer is a dynamic text field with the instance name of btnLabel. This allows us to use the instance name of the button on the Stage, and the instance name of the text field, to dynamically assign a new text value as seen in the snippets above.

Figure 9: The ProtoBtn symbol Timeline.

To provide the expected button states of up, hover, and down, we have a second layer present which includes an instance of the RealBtn Button symbol – which includes these states by default. In this manner, you can nest multiple symbol and object types together, creating complex interactive elements.

Note that we could just as easily simply use a true Button symbol with its own instance name and containing a text field in place of the RealBtn MovieClip symbol – but have chosen to create a more complicated interactive symbol in order to show how to disable certain elements from interaction with JavaScript.

Interactive Playback Controls

Here is where we wire up our interactive elements, binding specific event listeners to each symbol instance on the Timeline. We do this by using the instance names provided to each of the buttons earlier and using addEventListener to listen for a “click” event on that instance. When this event is detected, we then invoke a certain function which performs any number of tasks within our interactive.

For instance, here is the code which both adds the event listener to our playBtn instance, and invokes playClicked function which is written directly below it. Note that we also bind the current scope (as this) to the function call so that we can write code within the function body which aligns to that same scope.

Within the playClicked function, we tell the main Timeline to begin playing from the current playhead position, set the sun instance and darkening instance to play as well, and set the isPlaying boolean variable to true. We initially declared isPlaying at the top of our code stack, as it is important to keep track of the current state of the interactive across different functions.

For the pauseClicked function, we basically do the exact opposite! Telling the main Timeline to stop at the current playhead position, set the sun instance and darkening instance to stop playing, and setting the isPlaying boolean variable to false.

The stopClicked function is a bit different as it serves to re-initialize and “rewind” the interactive to the beginning. Initially telling the main Timeline to move the playhead to the frame which has a label of “BeginPoint” within our Labels layer and to then stop the playhead entirely. We then invoke a function killTheRain(), which we we see in a bit… I bet you can probably guess what that function does!

We then set the visible property of our darkening instance to false and reset the rainBtn (we’ll address this instance in the next session) text to their default values just like at the beginning of our code stack. Lastly, setting the isPlaying boolean variable back to false as well.

These three functions together compose the interactive timeline control mechanisms within this interactive.

How to… Bring the RAIN!

In the last section, we saw a few references to items like the rainBtn instance and a function called killTheRain(), neither of which have yet been addressed in this article – so let’s do that. If you’ve run the interactive at all, you’ll note that we can toggle the weather from a sunny day, to a rainy day, and back again.

Figure 10: Changing the weather is easy with Animate and JavaScript.

Before writing the functions which produce (and revoke) a rainstorm, notice that we have a fourth button in our project with the instance name of rainBtn. Along with the label text value assignment for our Timeline control buttons, we will provide a label for this button as well.

Just as we did with the Timeline control instances, we add an event listener and accompanying function to our rainBtn instance. Within the rainClicked() function itself, we first use a simple if/else statement to check whether the darkening instance is visible or not. This lets us toggle between the two weather states in our interactive.

Depending upon the current visible property value for the darkening instance, we will reverse that property, set the rainBtn label to an appropriate value for the user, and either invoke the function to create rain via bringTheRain() or to clear rain using killTheRain(). Note that the bringTheRain() function requires a number to be passed in as an argument. As we shall see, this lets us control the intensity of the rain as it determines the number of raindrops on screen.

This effectively acts as a toggle, reversing the current state of the weather and managing the button label text value for our rainBtn instance.

Rainstorm Preparation

Adobe animate free download

Before setting up either the bringTheRain() or killTheRain() functions, we need to create an additional variable at the top of the code. This object will act as a container for all of the raindrops we create.

The rainField is a type of object called a Container in CreateJS. Note that we instantiate a new Container by stating createjs.Container() directly. A Container is useful for grouping a number of additional visual objects within it. We manually set the registration point of this object based upon the width of our Stage, and finally add the rainField object to the darkening instance so that its children will be visible within out project. Using the Container, we can treat all the child objects as a group, and even wipe them all out with a single command. It’s good to be organized!

Adobe Animate Export Html5

Rain Generation and Evaporation

For the bringTheRain() function itself, note that the number value being passed in as an argument is exposed through this function with the identifier of raindrops, since it signifies the amount of raindrops for the function to produce. Based upon this number, we use a for loop to basically count down from that number until we hit 0. The loop then no longer runs.

Within the loop itself, we create a temporary variable (renewed with each iteration of the loop) named rainDrop. This is set to a new instance of the RainDrop MovieClip symbol from our project Library by invoking lib.RainDrop(). Note that you must set a Linkage ID within the Library panel for this to work!

Figure 11: RainDrop MovieClip symbol with Linkage ID of “RainDrop”.

Following instantiation, we set the x and y properties of our rainDrop to a random number with a min/max range. We will have a look at the random() function after going over the remainder of this loop code. After this is all set up, we just need to add the rainDrop to the rainField Container, as it isn’t yet bound to any visible Stage. We accomplish this with the addChild() method.

As mentioned previously, the CreateJS Container object type is very useful for managing child objects within it. Within the killTheRain() function, we only need to invoke the removeAllChildren() command to completely empty our rainField Container.

At the very bottom of our code is the randomization function we used within bringTheRain() to randomize x and y raindrop positions as they are instantiated from the project Library. This is a standard utility function you can use in all sorts of projects to get a random value between a chosen set of numbers.

The only thing left unexplained is the movement of our raindrops!

Rain Movement

We want our raindrops to fall in a regular cycle, and to do this we’ll take advantage of the CreateJS Ticker. To use the Ticker, we set it to fire on “tick”, which is actually the frames-per-second (FPS) of our Animate project. Since our project is set to 10FPS – the Ticker will “tick” 10 times every second. When a “tick” fires, we want the function named animLoop to run.

Within the animLoop() function, we first check to see whether the interactive is paused or playing through the isPlaying boolean variable. If this returns a value of true, we then run through a for loop and move each individual raindrop per loop iteration.

What makes this really simple to perform is our use of the rainField Container object. There is a numChildren property inherent to this object type that will report the exact number of child objects within the Container. Using the value of this property, we know exactly how many raindrops we have to move – and how many times to iterate our loop.

Adobe Animate As3 To Html5

Within the loop itself, we create a temporary variable named rainDrop for each specific raindrop and increase its position along the y axis by 100 pixels. Seeing as how this function runs 10 times per second… the rain appears to fall very quickly!

The final thing we do is check the position of each raindrop against the height of the Stage, adding a 50 pixel buffer to be sure the raindrop is no longer visible. Once a raindrop moves past this point, we reset its position, creating a never-ending rainstorm.

We are moving each rainDrop along the y axis by exactly 100 pixels upon each tick – but we could also use our random() function to add some variance to the storm.

Adobe Animate Export To Html5

Conclusion

Adobe Animate Html5 Examples

Yes, Animate CC is a completely platform agnostic creative application… using JavaScript alongside HTML5 Canvas remains a popular and compelling platform choice for interactive media. The native support for JavaScript within Animate is there now – robust and ready – and a joy to use!

Comments are closed.