Click on any phrase to play the video from that point.
[CS6]
In Creative Suite 6 Design and Web Premium
as well as in the Creative Cloud,
there's a ton of new innovations going on,
especially around web standards, it's pretty exciting stuff.
I would actually like to show you some of this
starting in Dreamweaver CS6.
Notice how I have this new document dialog box open
under page from sample.
I can take a look in here.
We've updated the jQuery mobile framework
with the latest jQuery mobile framework
allowing me to make mobile specific content.
Not only that, I can turn around and make an app out of it
using PhoneGap as well.
But I'm just going to go ahead and click create
and here's my file, and I will just quickly
save it right in here to this folder, call it index.
So that's the first thing I need to do.
Here's all the files I didn't have to create, it's basically jQuery mobile including,
you know, a couple of images,
and really picking apart those CSS files
and customizing it can get pretty tricky.
Because if we take a look, you might want to customize this look here.
So instead of worrying about customizing all that CSS, what you can do
is you can go ahead and use a different theme.
So if I go Window down to jQuery mobile swatches,
and because I have my curser basically within that jQuery mobile CSS,
I can pick one of these other themes.
So I'll just kind of click through, you can see we
go darker, to the blue, to the lighter, clear up to the yellow if you dare.
So nonetheless, I can easily sort of pick a
new theme or even get more themes as well.
That will actually open up theme builder.
It will jump online allowing you
to customize this even further, download it, and go then go from there.
It's pretty exciting, you know.
From there, if you want to turn this into an app,
this is a great innovation, we have expanded on PhoneGap.
We have PhoneGap build
allowing you to make apps for multiple
mobile platforms that way.
It's really exciting, and I'm just grazing the surface here,
but I want to move onto some other innovations that are happening
around the area of flash.
So if you're used to using flash,
of course you would output SWF content,
But what's available in flash now
is this extension called the Toolkit for Create JS.
It uses this create JS JavaScript framework
and ultimately allows you to take your
content and output it as HTML.
So I can quickly come in here and maybe I want to animate this.
I will just insert a keyframe, maybe create a classic tween with this.
You know, I'm not going to get very complex with this,
but I can just create a couple of tweens really fast
like that, maybe move this stuff around slightly,
have that move in a place just like that.
So I'm not making this overly complex,
but what I can do is I can make some decent animation
that looks pretty exciting and not getting too complex with it
because I want to make sure it gets out appropriately to HTML.
But all I need to do from there, is I'm going to output this file to my desktop.
In fact, when I hit export, it's going to create this animation in HTML.
When I do that, you can see it right there.
Just do a refresh, and you can see that move up and that slide in.
Again, that's a simple example.
You can get more complex with this as well
by adding your own JavaScript in Flash Professional,
and it will output, and you can make this interactive,
move around, whatever you want to do.
But notice that if I view Source, you can see it right, this is my JavaScript
as well as all of the create JS, easel JS functions, and all of that stuff in those files.
So you can customize that further.
But another way to go is to
use what's part of the Creative Cloud,
it's called Adobe Edge, so it is a new
product that we are working on, because if you really want
to build something from the ground up,
you can use Edge.
So Edge allows you to create
animation and interactivity
and output it web standards like HTML, JavaScript,
you know, CSS for the animation.
It's pretty powerful, and again, I'm just going to keep this simple.
But right in here, again the same sort of motion, if I wanted to move this picture,
I could say okay you know what, I'm going to change
its location as soon as I click on that
for this hero image, it gives me those keyframes,
and I can move in about 2 seconds
and kind of shift this picture like that, okay.
And you can see we go from point A to point B.
That keyframe is already added as well as the tween.
Everything looks good, and I could do this with a number of items
just by turning it on if you will,
and as soon as I turn it on,
in my properties panel it makes those keyframes available,
and you can have that sort of slide as well, okay.
So there is quite a bit more you can do with it.
In fact, you can add interactivity,
and you'd do that using this trigger.
So I can insert a trigger at that point in time,
and I can just add this simple stop action.
That looks a lot like ActionScript, but this is actually JavaScript,
and you can write your own right in here or
use any one of these pre-built JavaScript calls.
Again, I am just keeping this simple.
Very powerful being able to use this tool to create very nice
animations and interactivity beyond what you see here,
you can see that move.
So those are just some of the cool innovations that are going on
when it comes to web standards and web projects.
So thanks so much for watching.
[Adobe®]
