Tip:
Highlight text to annotate it
X
Hello and welcome in this second video about the Toolkit for CreateJS, an
extension that will be available
with Flash CS6 and will be able to export ours scenes from Flash to HTML5
This toolkit is here, this is a panel, very simple one. In a first video, we exported this animation
it's just a MovieClip crossing the screen, with a Tween
and a button which makes the animation restart.
We have seen that we can add some Javascript code
in the frames
thanks to this notation
and that anything which was in these comments, was exported with the animation, and so, this code
was read by the HTML5 page.
Let's see
how is the export is made,
what's it's content, and how is the generated code
Here's our export folder.
You can see that we retrieve the three folders
that were entered here. This one refers to
the createJS libs, that are imported.
Here a images folder, but i don't have any in my scene, so it's empty.
And here a folder for the sounds files where we find the "galop" sound,
which is in the Flash scene library
and in the timeline.
Finaly, we find a HTML page
and a javascript file.
Let's have a look on
what's the HTML page looks like.
Here it is.
Firstly, we can already say that this is an HTML5 page. We can see the DOCTYPE
that refers...
Well this is the DOCTYPE notation for HTML5
We have a title tag...
And here, all the imports for all the libs we saw in the "libs" folder
and a last script import
this is the import for the js file, that is next to the html page
de notre page html
This is this file that will contain our scene and the library.
When I talk about the library, this time, I refers to the Flash CS6 scene's library
These are objects that will be exported and made available in Javascript.
We'll see that later, let's go on with the HTML
The HTML file... It's goal is mainly to made a Stage avaible. Stage that will be used by the javascript file
The entry point is the init() function used as a preloader.
preloading that will be managed by PreloadJS
I have only one file here, it will just import my "galop.mp3" file
We'll link an ID to this file, thanks to a manifest. This ID
will allow us to retrieve our sound later in the JS code.
Here we have a callback
"handleComplete" on the onComplete event
thrown by PreloadJS. So as soon as the preloading is done, We will execute this callback function.
In this function we'll see two main things. First, in a variable, we instanciate
an "XmasGame" object
What's this object ?
We'll find this name
here.
In fact, this animation was a part of a little game I started to code
that I called "XmasGame". So XmasGame is the document Class name
that is entered here. So the Toolkit
take this name and use it to name the scene in our HTML export.
We'll see
where is this object. It's in the javascript file, of course.
Then we have the Stage creation.
Remember that EaselJS, the main library of the CreateJS suite, it's here,
it's main goal is to recreate a Stage,
in the HTML5 canvas.
So it take this canvas, and "transforms" it as a Stage
on which we can interact with an Actionscript- like code, in Javascript.
So we'll be able to add objects to this stage, with the addChild() function.