Click on any phrase to play the video from that point.
As a designer or developer, you really have your choice
you really have your choice of tools
if you're creating any sort of animation for Web Standards.
So if you're going to go ahead and publish out content
for multiple browsers, for devices,
you actually have a couple different options.
You have in Flash Professional CS6
what is called "the Toolkit for CreateJS Extension",
allowing you to use Flash Professional
to publish out HTML content.
Pretty darn awesome, being able to do that,
but also what we have is this new program
called "Adobe Edge Preview".
Now it is just a preview, but it's very powerful
because it gives you this interface
and just a way for creating animated
and interactive content for Web Standards--
outputting CSS, HTML, JavaScript.
So now you're thinking okay, I have 2 programs
that kind of do the same thing now.
And that's what I'd like to talk about--kind of the differences
and the similarities of both of these--
and I'm going to start off in Flash Professional.
And, quite frankly, Flash Professional's been with us for years.
It's awesome; it's really powerful and really flexible
when you're creating SWF content--
basically content for the Flash player.
And, as you can see right here, I can go ahead and just run this.
This happens just to be a simple animation.
I could add interactivity to this,
using Actionscript--
or if you're new to Flash Professional,
I could use this Code Snippets panel
to add any sort of interactivity to it--
very powerful, and it's just really cool
that I have such a robust language to take advantage of.
But what I want to do is potentially--you know--
if I have, say, an animation that I want to actually output t o HTML--
well, I can do that, using this Toolkit for CreateJS.
So, again--here's just another animation--
pretty straightforward, I just kind of have some flames
and this little radar thing--and I can get more advanced with it.
But I can go ahead and Target a folder
and click Export.
That's right--just click Export.
It will go ahead and output that.
Running a little slow, initially--
but nonetheless, this was actually just
repurposed content--content that I already had in Flash--
and you can see how it does that animation.
And it is pretty big; I have lots of textures here.
But you're thinking that's not very exciting--
you know--and you would be right; I can do more with it.
I can output that--that dog that was swimming as well.
But you can go ahead and use the Toolkit for CreateJS
to output animation
and then what you can do is you can go ahead and use
the CreateJS--which is a JavaScript framework--
to add additional functionality to your assets.
So I can go ahead and take this--
and let's just see what this looks like, by the way,
as I take a look at that file.
So what was output are these files--
so this .js, this .html,
and some additional files as well,
which are the easel files.
But I'm going to go ahead and just open up these two in Dreamweaver.
All right--here they are--here's the ship.js.
I really don't need to worry about this file, but this is
really--this really identifies that ship asset.
Notice, in my ship.html--
this is basically where it gets instantiated
or created, if you will, so all the textures load in.
As I scroll down, you can see--
here is where we've created that ship.Stage.
So if I go in here, I can see that item called "ship.Stage".
And it's basically creating it an instance
and adding that to the Stage, okay.
And this Ticker actually just counts down.
But going beyond that, we can start to add come JavaScript as well,
using this framework, and we can take a look at that.
So I'm just going to open up this file in Dreamweaver
and if you're an Actionscript developer,
this starts to look pretty familiar.
I have this--basically it's this "tick" that counts down--
30 frames per second--
that will move the "ship" to the "mouse" position.
So now this is where things get to be a little bit more exciting.
Let's just go ahead and run this in a Web browser.
There we have that same animation,
and I can see that ship kind of moving around, following my cursor.
So this is what I want: I want to be able to
repurpose, not only my Flash skills,
but also a lot of my assets,
output it using that CreateJS framework;
and then add additional interactivity,
using JavaScript.
Now keep in mind--what's going on here is
it actually draws on a Canvas element,
using JavaScript.
So that's what's going on, and that's the fundamentals
of that CreateJS export that you saw there
and the power of what you can do.
And the great thing about it is it's really friendly to Flash developers--
the whole framework, that CreateJS framework.
So exciting things you can do there.
Going beyond that--say, for instance,
if you're, say, not a Flash developer
or just need to create some content for multiple devices, using Web Standards,
you might consider using Edge.
So here I am, in Adobe Edge Preview.
This is a little bit different asset.
Some graphics are already set up.
And this is nice--I can go ahead and import what I want to,
just like I can in Flash.
I can draw what I want to--
just like I drew that shape, which happens to be a circle.
I can go ahead and use real fonts--
so this "INVENT" is actually a font from Typekit that I'm using.
So I can use Web Standards, and I can use real fonts as well.
And what I'm creating in here--
anytime I draw something, it's actually a
.
So right over here, I have the HTML--right down here.
In fact, if I select that circle,
and I take a look at my Properties panel--right down here--
I can see that's the Border Radius CSS that I'm actually manipulating.
It's not making JavaScript.
It's making CSS for creating some of these elements,
and then we have .
Okay--so let's get into some more fun aspects
because, as far as animating goes,
you can see I have a little bit of animation in there already.
But I can easily animate anything.
So I can select this object,
turn on its location; it gives me these keyframes.
I can maybe move them a second in--
just like that--and then, starting out,
maybe I can move this off the stage, like that.
So now it will drop down, just like that.
So that looks pretty good.
And what I have on this, as well,
is this Ease In and Out--
and I can--basically--can control the easing.
So I have it Ease Out and kind of have it
bounce there in the end.
There we go--looks great, it works pretty well.
But I can also add interactivity.
Now, when it comes to Flash Professional,
I can write Actionscript
or use the Code Snippets panel,
and what we have available in Edge
is this ability to add Triggers.
So--say, for instance, for this graphic--
what this actually is--
this is interesting--
this is actually a symbol, so I'm going to double-click on it, and all I did
is created a symbol, in Edge.
Now, keep in mind, you don't have to make a
symbol for everything, like you're used to in Flash Pro.
You can go ahead and just make symbols of certain things.
So in this case, I want to
Rollover--to turn on that light bulb--
and Rolloff to turn it off.
So I'm going to add some code in here, what's known as a Trigger.
So I can insert a Trigger--a "stop" Trigger, just like that.
I actually clicked it twice,
but I can add that Trigger, just by using any of these Code Snippets--
just like you can in Flash Professional.
It's just, in this case, you're actually just writing some JavaScript.
So again, I'll have it stop here, as well.
So far, so good.
What I want to do is, on Rollover of this item.
So I'll select this item,
go up here to open the actions up,
and on "mouseover", go ahead and play this.
Now I also want to add to this very same item--
on "mouseout", go ahead and "playinreverse".
Okay--so 2 Code Snippets already implemented
and that's all I need to do.
One last thing I want to point out
before I move on and show you this animation
is the fact that I'm not working in a binary format.
I'm actually working on this HTML page,
so I'm actually working on this WebKit stage,
which is awesome,
and--going forward--all I need to do is just--
in fact, let's test this in a browser.
I can see that drop down--this is that
real font, by the way.
I can Rollover that and you can see that come in and then go out.
So you're able to see how I can go ahead
and add animation and interactivity
fairly easily in Edge.
And, of course, I can do the same thing
in Flash Professional.
Now let's just take a look at the differences
because if I take a peek at that file,
there are these certain includes that are added.
So if I just take a quick peek at these files--
say these two, including this one--
I will open them up in Dreamweaver,
just like I did that Flash file,
and I can see all of those various assets as I scroll down.
Let's go to this one.
There's my rectangle--my rounded rectangle, which is that period.
I can see see that "invent" word--and then that light "bulb".
So it's easy to read, I can go ahead and pass this off
to a Developer 4 for the development.
But keep in mind that this is actually being drawn, using JavaScript.
It's not drawing it on a Canvas element;
it's actually just using JavaScript,
as well as some initial .js files as well.
So you have a couple different options here.
If you're a Flash Professional user
and you have Flash assets, you can go ahead and take those assets.
A lot of that animation--output it as animation,
using Web Standards--which is basically a Canvas element--
and, moving that content around with JavaScript--
specifically, the EaselJS framework--
or you can use Edge to go ahead
and create your animation
and your interactivity--
and all you need to do is Save, quite frankly,
because it automatically makes that HTML, makes the JavaScript.
That's actually pretty darn readable,
from a developer's perspective, okay.
So those are your 2 options.
I kind of went through what they can do.
It's kind of up to you, depending on your
content, the subject matter,
to determine which you're going to use.
But it's great that you have a choice
and, ultimately, these tools, I think,
just really allow you to be creative.
So you can really produce work for browsers on the desktop
as well as multiple devices.
So I encourage you to check out both
and just have fun with them.
