Click on any phrase to play the video from that point.
[metallic humming] [ADOBE DEVELOPER CONNECTION] [Mark Anders - Adobe Fellow] Hi. I'm Mark Anders. I'm going to give you a demo of Edge Preview 1. One of the things that we really tried to do with Edge was to work natively with HTML. So you can see here I have a project directory that I was working on, and what I have is an HTML file, JavaScript file, and CSS files. And that's basically what Edge works with natively. So when you create something new in Edge, that's what you're saving. So you can run it directly in your browser. Let me edit this. This is an ad that I've started working on. I'll do that by double clicking on the Edge file, which is a project file that has some metadata. So doing that fires up Edge. I'll give you a quick tour of the workspace. To the right here I have the Elements panel, and that provides you with a view of the HTML DOM, and you can do things like hide elements, show them, you can lock them. The area in the center of the screen is what we call the stage, and it's really the design surface that you work with to lay out and configure the objects and to see what things look like. This is an embedded version of WebKit, which is the HTML engine that powers Safari and Chrome and is also used in all of the Android and iOS devices as well as a number of other mobile devices. So by utilizing WebKit within Edge, we ensure that you have maximum fidelity with the deployed output. When I select an object like this piece of text, I see the various properties that I can configure for that object. So, for example, text shows me the font information, the position and width and height. I can do transformation, rotation on that object. If I select something like an image, I don't see the font information, but I see the name of the image file. On the bottom we have the timeline, and that's where you do your choreography of the motion and transformation of the objects. And basically what it allows you to see is all of the objects that you're animating and how their properties change over time. So let me start animating this ad. You can see I have 3 pieces of text here. And what I can do is I can just select them and then I can slide out this supplemental playhead that's called the Mark. And what it acts as is sort of a pin of the current value that I have, and the edit that I make is made at the playhead location. So what I can do is slide the Mark out, for example, with all of these selected and drop the opacity to 0. And so what you'll see is we've made an edit now that if I scrub forward fades in to the original opacity. So what I'm going to do is move the Mark back to time 0 and move this out to, let's say, 2 seconds. Now I will grab these pieces of text and move them from left to right, and you'll see additional transitions are generated. I can grab the Mark and move it to the right to create a short edit. And what I'll do is I will scale up the text and fade it out. So there very quickly I've created edits that take this HTML text and fade it in, move it across the screen. One of the things I think I did was I made it so that it's a little too quick, it's a little hard to read. So what I can do is I can just marquee select all of these objects and grab them and scale them out. And so now if I play them--let me deselect them-- you'll see it has a nicer pace so I can see each one of them. All of them are being animated simultaneously, which also makes it hard to read, so what I'm going to do is just grab these roll-up bars for each of the sets of transitions, for each of the elements, and just move them and distribute them along the timeline. So this allows me to easily rearrange the order of the animation in time. Another thing we've done in Edge is to make it feel as natural to create HTML that represents shapes, which you can do using CSS, as it is to draw in a program like Flash Illustrator. So I can take, for example, the Rectangle tool and I can just draw out a rect. I can also take these corner controls and make it a nice rounded rect. And I can even kind of get crazy with the shape. One of the key things about CSS3 is that it adds lots of new styling options for HTML elements with things like gradients and rounded corners, and we're taking a lot of advantage of that in Edge. I can also make my rectangle white, I can dim down the opacity, I can use the Text tool and add some text, and I can change the font size to, like, 34 point, I can change it from Times Roman to Arial. I can also import other types of assets, and one of the ones that we support is SVG. So now I have my sort of little closing message positioned correctly. I want to animate that. And so the way I'm going to do that is I'm going to position my playhead where I want the edit to start, and then I'm going to drag the Mark to the right, which means that I'm animating to the way it looks now. And so with that done, what I can do is, for example, create the animation. I'll bump up the opacity of that rectangle, and I'll slide it off to the right. I'll take this text and I will make it white and slide it off to the left. And the logo, what I'm going to do is shrink it down and dim it out. So let's take a look at what that looks like. We can see here comes everything, and you'll see it's a little bit hodgepodge and not timed right. So I can go in and adjust that after the fact. I can, for example, take the animation of the Adobe logo and move that till after the box and the text come in. So let's see what that looks like. Okay. That looks better, but I still am not crazy about the way the text and the box look. I'm going to zoom in on the timeline because this is sort of a very fine-grained edit that I'm going to make. So as I scrub very, very slowly, you can see that the text is already turning black, and so it's kind of black right there when it's crossing this boundary, and it's actually kind of hard to read. What I want the effect to be is I want it to remain white until right when it's going to cross the boundary with the white rectangle and then start turning black. So I do that by positioning my playhead where I want that thing to occur and then moving the start of that transition for color to that point. And so now the way it looks is that it remains white and readable until it crosses, and then it starts turning to black. So it's kind of a nice effect. Let's take a look at how that looks at full speed. I'll push Play. And if I think that that is a little too quick maybe, I can just grab this and scale everything. You'll notice everything scales nice and proportionately. That looks a little better. Let's take a look at the finished ad. You'll see everything looks good and smooth and has the right timing. So that's an example of something that I created, and I'm a technical person, not a creative person. Let me show you an example of something that was done by Dave Nibley from Rain. It's actually his first project done with Adobe Edge. He's on our pre-release program. So that's it. Let me show you one other workflow that we have, and that is opening HTML. As you can see, we've got quite an extensive HTML DOM. A lot of the nodes don't have IDs, which is absolutely fine. What I can do is I can just grab my Mark, move it out to a second and a half, and drag this image--I'm going to use the scrubby slider here--drag it out. And so we've created a little animation. We've got, I think, 24 or so easing functions that are mathematical formulas that you apply to the transition. So we can do, for example, an easeOutBounce, and so now it has a nice bounce into place. One of the things I can do is I can select that transition, I'll copy it, and then I'll paste it onto this object. So I'll select that object and paste it, and there it is. One of the things about the timeline that's nice here is we can filter it to only show animated elements. So when you've got tons of HTML elements, this is a really useful option. That selected it, so we have a nice bounce there. It's identical to the other one. And the other thing we can do is we can preview it in our browser, and this launches your default browser. And what this allows you to do at this point is to take a look at the code. And what you'll see is when we're doing all of these animations in Edge, it's actually not modifying at all the HTML code, with one exception, and that is in the head area we've added some external files that we create. We have the jQuery Core that we use and jQuery easing functions, our little animation library, and then the file that we create for that particular project. And so this shows you what the code looks like. It's in the JSON, or JavaScript Object Notation, format so it really defines data that describes the animation. And here is the timeline that we created that shows here are the elements that I'm selecting, and here are the changes over time that we're making to those objects. So I hope that gives you an overview of what we're doing with Edge. As you can see, we've designed it to be fast and responsive, to really be a productive environment for doing animation, and to give you a lot of precision in terms of the types of visual effects that you can create. [Edge Preview Release - adobe.com/go/edgepreview] And all of it's being done with open standards. So thanks for watching. [ADOBE DEVELOPER CONNECTION] [metallic humming]
