Convert Flash to HTML5 with Swiffy and "Toolkit for CreateJS"

http://danscourses.com - In this tutorial, I show you how to download, install, and use "Toolkit for CreateJS" from Adobe and Swiffy from Google. The tools are installed into Flash throught the Adobe Extensions Manager and once installed they can convert Flash movies to HTML5. This is a great development for Flash enthusiasts.

In the demonstration I compare and contrast how Swiffy and the Toolkit for CreateJS handle converting Flash SWFs that include complex graphics, basic animations, and actionscript Flash interactivity to HTML5.

---

Closed Caption:

if you're a fan of flash like I am then
you have to be really excited about
flash cs6 and the ability to export your
flash movies to html5 instead of Flash
movie Swift's using the flash player in
recent years the flash player has been
denigrated by companies like Apple that
have refused to put flash movies or
flash player support in their iphone and
their ipad and recently the android
mobile devices are no longer supporting
the flash player either so the ability
to take your flash movies which you know
I've always had a lot of fun creating
flash animations and then export them to
html5 is just really welcome news for
somebody who likes developing with flash
so this is pretty exciting so what are
you going to need to do to try this out
well what you want to do is you need to
if you want to use this in adobe flash
cs6 I've got cs6 open here right now
what you want to do is you need the
toolkit and bring it up here the toolkit
for create jas right and this will
create basically javascript and export
all of your Flash assets your graphics
your animations into JavaScript and you
can see you install it through the adobe
extensions manager so you need to go to
start all programs open up your adobe
folder design and web premium here i
have and you can see here the extension
manager is right in there with your
other adobe programs now once you have
it open you won't see it in here you'll
have to install it and so to install it
if you try to search for you won't find
it you have to go out on the web and
download it first and then install it
now I've got another tool here that i'm
gonna be talking about and that is
swifty now swifty is released by Google
and swifty does a similar thing it
converts flash swiftor flash movies to
html5 and it does a really amazing job
so i've downloaded installed it also and
I'll talk about that
swell so two tools here that you have to
have if you're using flash cs6 so let's
go over to the website and see if we can
find it so if you go to Google just do a
search in google for toolkit for create
Jas and you'll find this page at the
adobe website and you can see there's a
button here download for flash
professional tool kit for create Jas and
there's other pages to on the adobe
website that have this toolkit for
create jas so download it and you'll
download it to your desktop and I'll
talk about that for a second here when
you download it to your desktop it's
going to be a zip package you can see
I've got it right here here's the zip
package and what you want to do is you
want to convert the contents of this zip
package into a dot Z XP file which then
can install into the adobe extensions
manager if you look here if I click
install
it's looking the adobe extensions
manager is looking for a . cxp or . mxp
file now here's the trick when you unzip
this toolkit for create jas I'm going to
unzip it right now or extract it just
right click on it and select extract all
or I have extract here as an option and
it's going to extract the contents
contents of this toolkit for create Jas
and you can see that it unzips the
contents and just drops them all over
the place and if you look closely there
is no file in here to install directly
into the adobe extensions manager cs6
for instance there's a file here called
. mxi and . mxi is not recognized by the
adobe extensions manager if you click
install
there's a . mxp that it can install or .
cxp but no . i'm excited so what you
want to do is you want to basically
double click on this file and it will
say hey save extension package as a .
cxp and you'll click Save
and it will take all of these assets
that you unzipped and it will compress
them into this package right here this
is exp file and then you can install
into the adobe extensions manager so
that's what I did and it worked out
pretty good so I'll just delete these
here now so no longer need them
and so once you've done that you'll have
your . cxp file and you can install it
into the adobe extensions manager and i
also downloaded swiftly and did that now
swifty was a little bit easier if we go
to the website just do a search for
swift and you'll find the google web
page for it and you can test it out by
uploading your flash movies right here
and having them convert right in this
webpage into html5 and it's pretty
impressive and let's uh let's give it a
try here so we'll browse and we'll go to
let's say the desktop here actually
don't have any Swift's on me right now
so we'll pass that up but let's download
the Swift extension let's click download
and you can see it takes you to the
extension page and there's the download
button right here and it shows you how
to install it through the adobe
extension manager which we just covered
so now you have it installed another
thing is when you go to install these
extensions in the adobe extension
manager you need to be closed out of
flash before you do it
alright so once you have installed you
can close that up and you can open up
flash and test it out
so let's take a look here I've got a
file this file has no ActionScript code
it just has graphics and animation so
let's make a quick little flash movie
out of it and there you can see there's
the Swift file this is the Flash movie
playing in the flash player and you can
see here it's just got some animation
some glowing some gradients hear some
transparency so some pretty fancy
graphics right animating but just a very
simple animation no code so let's see if
how these tools handle it so for
the toolkit for create Jas what you're
going to do is you're going to go to
window once you have it installed go to
other panels and you can see it says
toolkit for create jas opens up the
toolkit and you can just click publish
and you can see it wants to publish and
show you right away in an Internet
Explorer browser window
whatever you have firefox internet
explorer going to allow the block
content and there it is there's the
animation right and if you right click
on it you'll see that there's no flash
movie here this is html5 fantastic right
ok so that's pretty nice and let's try
it from Swift V so we'll try the same
thing but this time from swifty so we've
got the Flash movie here notice there's
some output here if something doesn't
work correctly it will post warnings and
errors up here for you to deal with so
here's once again the Flash movie this
time I'm going to export it with swiftly
so I'm gonna go to commands and export
as html5 Swift V and hit enter and allow
the block content and there it is
so you can see that swifty did the same
exact thing so that's pretty nice
all right now let's try to do it with
something a little fancier so I've got
this other flash file here this is a
little game that i created of asteroids
using ActionScript to and flash i
created this a long time ago many years
ago so let's see what happens if i hit
ctrl enter here's the Flash movie you
can see this the Flash movie and you
click begin and you can see the ship can
fly around and it it's just like
asteroids right you can shoot and all
right so there is there's the flash game
right so close that out and now let's
try to publish this with the toolkit for
create jas so once again you go to
window other panels and toolkit for
create yes and you can open up this
toolkit and then we'll just hit publish
and will allow the block content and you
can see that the toolkit for create jas
does not handle the actionscript well at
all in fact it doesn't really convert
the actionscript to JavaScript the
toolkit for create jas just works with
animations so timeline animations and
graphics so if this was an animation
with graphics and no code no action
script right and I actionscript you can
see here we've got actionscript here on
the timeline right window actions you
can see that there is action script on
him so it doesn't handle the
actionscript well at all but let's give
it a try with the swiftkey tool so I've
got this flash animation here and put it
back on first keyframe and we'll just go
to commands export as html5 Swift V
and we'll see what happens here and will
allow the block content and it looks
like the Swift V tool is able to convert
the the game from actionscript to
JavaScript and put an html5 html5 game
together pretty easily and so that's
pretty amazing right and you can see
here if I right click on this this is
not a flash movie this is in fact html5
so it's javascript with exported
graphics and everything so let's that is
pretty amazing so let's take a look at
how it looks in the folder so i'm going
to open up the folder and you can see
here I've got some flash files in here
and you can see here is my asteroid game
flash file and here is the Flash movie
that i made with it so there's the Swift
file and then for um for the swifty
output you can see that it created an
html5 document a webpage a JavaScript
document with the JavaScript for the
game right and it looks like that's it
and i think actually it's this asteroid
and five . Swift html5 I think this is
the document that was created by Swift V
yes as opposed to this other one which
was created by the toolkit for create
jas so really great developments for
flash cs6 coming from google and from
Adobe I believe adobe and Google are
working together on this and I'm hoping
that they continue to work together it's
really great news for those of us who
like doing things in flash and making
games and flash and using the the
timeline and the movie clips to create
the
dynamic content so this is really really
nice