One of the things I’ve always loved about Flash Professional and ActionScript is just how easy it is to knock together a quick web game. Flash’s design-develop workflow always made such things a breeze. But what about HTML5? Could I use Adobe Animate CC (formerly Flash Pro) and JavaScript to create a game just as easily? Well it turns out you can, and the workflow isn’t really that much different. I spent a few weekends building a Flappy Bird clone that you can try below.
If you’d like to know more, I’m currently writing a tutorial series for Adobe’s official Animate CC blog. The first two parts will take you through the steps required to create the game’s artwork, while the remaining parts will show you how to code the game and add the audio. Part one has just gone live so please take a look and let me know what you think.
Also, if you can’t wait, then feel free to head on over to GitHub and grab the game’s source code and .fla file.
This is very interesting! After working with Flash for since 1995 and creating interactions for online course assessments, I was wondering where I was going to go after the demise of Flash. Adobe came out with Animate CC but NO documentation on how to repurpose all that Actionscript to Javascript! You’re blog is very welcome.
Hi Andy. Thanks for getting in touch. I’m glad you found the post useful.
YIKES! This thing is running at 1 frame per second in Firefox 48.0.2
(Windows 7, 64 bit quadcore i5 PC)
Lemme pile onto to this kudos thread!
I discovered this tutorial last week and worked through it in a few hours over the weekend. My big disconnect for creating HTML5 content with Flash /Animate CC was no longer being able to use document classes. The tutorials helped show me the way on that – much appreciated!
The one question that I’ve been dying to find an answer on that the tutorials didn’t seem to cover was – is there an HTML5/JS way to add items from the *library* at run-time like we used to in Flash Pro with ‘Export for Actionscript’? Or is it only possible to reference objects if they are on the stage at author-time?
Where I work, we created complex Flash training that relied heavily on external classes, attaching AS classes to objects in the Library and then adding them to the core application at runtime.
Anyway – thanks for getting us this far! I’ll be bookmarking this site.
Hi Chris. Thanks for the kind words.
You can indeed add movie-clips to the stage at runtime using the linkage ID.
Just assign a linkage ID to your clip in the library. For example “Enemy”.
Then the following JavaScript will create an instance:
var enemy1 = new lib.Enemy();
Then just add your instance to the stage:
stage.addChild(enemy1);
You can find more info in this CreateJS tutorial I wrote a few years back: http://www.yeahbutisitflash.com/?p=4454
Hope that was of some help.
Thanks,
– Christopher
Christopher –
Worked like a champ! Now we’re cooking with gas!
Thanks again.
Dear Christopher,
I was following your tutorial on how to create the flappy bird clone and i got to step 5 where I hit a problem. I get cannot read property ‘y’ of undefined when i right the first section of the bird class. Any ideas of what to do?
Thanks in advance!