YOUR GUIDE TO

Converting or Porting Adobe Flash and Animate Apps to HTML 5 Canvas with CreateJS and ZIM

As Adobe discontinues support for the Flash plugin

Image for post
Image for post
ZIM SHIM to convert Animate and Flash files to ZIM

In December 2020, Adobe will officially stop supporting the Flash plugin.

dobe Animate (formerly Adobe Flash) exports to HTML 5 as CreateJS. CreateJS is a JavaScript library built for the HTML Canvas. ZIM is a JavaScript framework that adds conveniences, components and controls to CreateJS. You can see what it is all about in ◎ Your Guide to Coding Creativity on the Canvas.

Our current guide has two main parts:

  1. Exporting from Animate to the Canvas
  2. Recreating ActionScript content on the Canvas

1. Exporting from Animate to the Canvas

ou can choose a Canvas file when you start an Animate project. You can then code in JavaScript using CreateJS in the Actions window. You will find coding in CreateJS very similar to ActionScript — it is Object Oriented Programing on a Stage with MovieClips, etc. When you export, the output will be HTML and JavaScript (CreateJS) on the Canvas rather than the traditional ActionScript SWF file.

Image for post
Image for post
Open Adobe Animate and choose Canvas File (at right)

ADD ZIM FEATURES TO ANIMATE!

Image for post
Image for post
A few of the many ZIM components, conveniences and controls

IM is a JavaScript framework that adds many components like Buttons, Sliders, Dials, conveniences like one-line drag and drop, multiple hit tests, as well as and controls like Parallax, Pen, Layout, particle Emitters and more. Think of ZIM as CreateJS simplified with more options.

ZIM SHIM for Adobe Animate adds all the features of ZIM to Animate. With SHIM you can:

  • Code ZIM right in Adobe Animate
  • Export Code along with CreateJS code
  • ZIMIFY to control Animate objects like MovieClips
  • Add any ZIM objects like Blobs, Emitters, etc.
  • Use simple drag, animate and transform tools
  • Add countless components and conveniences
  • Include Accessibility for Screen Readers
  • Create with over 100 exciting features!

See ◎ Your Guide to Coding Creativity on the Canvas for an idea of how coding on the Canvas can complement or replace coding in Animate.

Image for post
Image for post
Coding on the Canvas is a lot like Flash

ADDING ZIM SHIM TO ANIMATE

to the ZIM SHIM page and download the ZIP file that has a sample FLA and template. In Animate, press the stage and on the right choose (or find Publishing Settings > HTML/JS from the top menu):

Publish Settings > More Settings > HTML/JS > Import New

Image for post
Image for post

Then import the template from the ZIP file and code with ZIM in Animate. Watch the VIDEO or join ZIM SLACK for help, there is an #animate channel. Here are the results of publishing the FLA file in the ZIP. The Pink Circle is a MovieClip made in Animate. The rest is ZIM. The code with comments is below.

Image for post
Image for post
// The pink Circle was made in Animate on the timeline
// and given an instance name of circle (so is this.circle)
// we use it later down below
// Here is a circle with ZIM:
var circle = new Circle(100, white).center();
.drag({onTop:false}); // so it stays at the bottom
// Here is a Blob animating in bottom left:
new Blob({radius:50})
.pos(50,50,LEFT,BOTTOM)
.sca(0)
.animate({scale:1}, 700, "backOut");

// Here is some text fading in with delay
var title = new Label("ZIM IN ANIMATE!")
.sca(.7)
.alp(0)
.centerReg() // so emitter later can easily center on this
.pos(20,20)
.animate({
wait:1,
props:{alpha:.8},
time:1
});

// Components almost all work the same way
var slider = new Slider(.5,3)
.sca(.7)
.pos(30,20,RIGHT)
.change(function(){
circle.sca(slider.currentValue);
stage.update();
});
slider.currentValue = circle.scaleX;
// MovieClips are CreateJS objects and must be zimified.
// drag({all:true}) drags the whole clip not individual children
var mc = zimify(this.circle).drag({all:true});
// the MovieClip will need its bounds set to use ZIM features
mc.setBounds(-50,-50,100,100);
// Animate objects are added to a timeline which is a MovieClip
// move their parent to the top and zimify()
zimify(mc.parent).top();
// if ever asking for a mouse event object stageX and stageY
// use instead frame.mouseX and frame.mouseY
// which correct positions for retina scale
// Here is a hitTest between the mc and the logo
// Let's spice it up with an Emitter...
// we will start it paused and spurt when it hits
var emitter = new Emitter({startPaused:true})
.centerReg()
.loc(title);
mc.on("pressmove", function(){
if (mc.hitTestBounds(title) && emitter.emitterPaused) {
emitter.spurt(10);
}
});
// Here is a feature rich Button that will toggle circle2
// there are still 40 more options available...
new Button({
label:"HIDE",
toggle:"SHOW",
corner:[50,0,50,0],
backgroundColor:pink,
rollBackgroundColor:blue,
borderColor:white,
gradient:.1
})
.sca(.7)
.pos(30,30,true,true)
.tap(function(e){
mc.visible = !e.target.toggled;
stage.update();
});

// etc. etc. See the ZIM Examples at https://zimjs.com/examples
// This includes ZIM Bits with 64 examples of basic interactivity
// There is also the Learn Section and the Vids and Skool, and Tips
// See them all at https://zimjs.com
// and help ZIM grow at https://www.patreon.com/zimjs
// SLACK at https://zimjs.com/slack has discussion and support
// Welcome to the colorful world of coding!!!

Here is a video about using ZIM SHIM.

THINGS TO WATCH OUT FOR WHEN PORTING TO CANVAS

ere are a few things to watch out for when working with ZIM in Animate. Generally you should be able to publish and things will work.

  1. Adobe has a loop parameter so set loop = zim.loop; to use loop().
  2. Use frame.mouseX and frame.mouseY to capture mouse positions. This accommodates the scaling of the stage on export to HMTL 5.
  3. Be careful with bounds in Animate — many ZIM features need bounds set. After zimify(obj) you can obj.setBounds() and obj.outline() to see bounds.
  4. drag() will drag parts of a MovieClip unless you drag({all:true}).
  5. See the ZIM Tips for many modern ways we code in ZIM.
  6. As of ZIM Cat, ZIM uses seconds for time for animate(), etc.
  7. If you are new to ZIM — make sure you use ZIM Docs and ZIM Learn!
Image for post
Image for post

2. Converting ActionScript to Canvas

here is no direct way to convert ActionScript files to Canvas however the assets like MovieClips can be copied from an ActionScript based FLA file to a Canvas based FLA file. Here is an Adobe Conversion Reference that maps various commands.

You can use the Actions window in Animate to code in CreateJS and ZIM (with SHIM). However, you may find it easier to just code directly in ZIM and bring in the Animate Shapes or MovieClips as assets. This makes sense if you have complex vectors or timeline animations otherwise, it makes more sense to not even use Animate. Here are some videos relating to using vector assets:

EXPERIENCE

Image for post
Image for post

ere is a story from a company that has been converting from Flash to the Canvas. Iestyn Jones, the Founder of eChalk Ltd. explains:

eChalk is an online library of educational simulations and games. Around a thousand of our resources started life as Flash web applications and we needed to convert them to HTML5/canvas resources as efficiently as possible. Our developers were used to the AnimateCC environment and it was imperative that we utilised our vast archive of animations and images for the HTML5 conversions.

No existing frameworks fitted the bill but then we came across ZIM; to say it’s the ideal framework for developers working in AnimateCC is an understatement. Since it’s built on top of createjs it naturally lends itself to working with Animate’s JavaScript output. When you add to this Zim’s ideology of maximum results with minimal coding, it has resulted in a quantum leap in the speed and efficiency with which we are able to produce highly-engaging resources.

Zim allows us to do everything we used to do in Flash and more. To date we’ve converted over 850 resources and the more we utilise Zim the quicker the process becomes. It’s no exaggeration to say that Zim has transformed the way we produce interactive content and provided us with creative possibilities that were hitherto beyond our technical capabilities.

Image for post
Image for post
Image for post
Image for post

EXPERIENCE

ere is another story about moving over from Flash to the Canvas. This one is from James Barrett, President of ICT Games.

I began hunting for a suitable replacement for Flash about 6 years ago, growing increasingly worried as to how I could replace my content in time. Finding ZIM was an absolute godsend! I initially had concerns about learning a new language but I need not have worried as the ZIM Bits (little examples) and excellent documentation very quickly showed me that there was so much potential.

In the distant past I had moved from adding assets to the stage in the Flash IDE using timelines (AS1) to using AS3 to place assets at runtime. This will sound like nothing but was a huge step for me at the time. With ZIM the process is the same, make the assets, then add to the canvas and create the UI. Just great fun!

I make static assets in Illustrator. If I need animation I use the onion-skinning features of Animate CC to line it all up just so. Then I export a sprite sheet, make a JSON file and the rest is ZIM on canvas. I find ZIM enormously flexible and creative, it’s a lot of fun to think of an idea, wonder how you’ll do it and after a bit of head scratching you find you’ve made it.

Incidentally the ZIM folks are available to help the struggling Zim Padawan within minutes of being asked on Slack! Just awesome. YouTube democratized video making/sharing for the masses, I genuinely feel Zim does the same for code!

Image for post
Image for post
Image for post
Image for post

ACCESSIBILITY

he canvas is one big picture but with ZIM we add hidden HTML tags behind the canvas to help with screen readers. You can see more about this in ◎ Your Guide to Accessibility on the Canvas with JavaScript.

Image for post
Image for post
ZIM Accessibility on Adobe Animate Export

Here is a story from Nathan about exporting Adobe Animate to ZIM with Accessibility:

The ZIM framework and it’s ability to bring accessibility features to the HTML5 Canvas could not have come at a better time for myself and Respect Group. ZIM has given our interactive e-learning programs the power to be controlled and completed by people who depend on assistive technology to interact with the web; an ever-growing topic as accessibility becomes more and more crucial to implement in all of our communities. Using ZIM SHIM for Adobe Animate, the ZIM framework integrates and eases itself right into our company’s daily operations for developing e-learning content in Adobe Animate. By simply following a few steps on the well laid-out ZIM website, you’ve got yourself an accessible HTML5 canvas ready to be used. No need to rebuild from scratch! ZIM has proved to be the best solution for HTML5 canvas accessibility and I’m very happy to have found ZIM!

Conclusion

lash was the pinnacle of interactive media creation. I spent fifteen years coding in Flash and it was spectacular. Those who did not code in Flash do not fully understand how marvelous it was. However, I have never been happier than I am now coding in ZIM on the Canvas with JavaScript. This is without using Adobe Animate.

Creators using ZIM agree that the route to go is to use Animate for timeline animations and vector art if needed. Otherwise, ZIM has powerful animation techniques and excellent sprite control see ◎ Your Guide to Animation on the Canvas with JavaScript. ZIM also has Squiggle and Blob for Bezier created shapes so Animate is not needed as often as you might think. See ◎ Your Guide to Images, Sounds and Sprites on the Canvas.

Image for post
Image for post
Some of the Many ZIM examples made without Animate

The ZIM examples page has about 200 examples and only a couple use Adobe Animate. Our advice is to remake the projects in ZIM or another Canvas framework. See ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework. We think you will like it!

All the best, and join us on ZIM Slack if you need a hand!

Dr Abstract

Image for post
Image for post

Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!

Written by

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Get the Medium app