Click on any phrase to play the video from that point.
(♫ Introduction music ♪) [Adobe Developer Connection] [Narrator] Hi, I'm Mark Anders and [Mark Anders, Fellow, Adobe Systems Inc.] I'm here today to talk to you about a tool that I've been working on which is Adobe Edge, a motion and interaction design tool that we have created for HTML5, CSS3 and Java Script, and what I wanted to do today was to walk you through some of the features of preview one which is really focused on animation and drawing, so creating content and making it move. I'm here in Edge, and I have a document that I've created and the first thing that I'm going to do is just draw a little box. I'm going to change the color; I'll make it black, and you'll notice that there's this little diamond that was added here, and what that is is a key frame, and a key frame pins the value of the object at that particular point in time, and in this case I don't really want that there, so I can just delete it. Now the reason I got it was because I have this auto key frame properties switch set so I'm just going to switch that off, and now I can draw and modify objects; so I'll draw another rectangle, a little thinner and I want it to be more a light grey color, and you'll notice that I'm not getting any of those key frames, and in this case, I'm also going to skew it and just shift it. Okay, so here I have my black and grey rectangle and now I want to start animating. Now, there are a couple different ways that you can animate, a couple of different modes. The first I'm going to show you is the fully manual mode, and so what I do is I move my play head to where I want to have a key frame, and I add it manually with this button. You'll notice that in the properties inspector next to every property or set of properties there are these little diamond buttons, and that's how you can add a key frame. I can then move my play head back to zero, and add another key frame, and then modify how I want that object to appear at that time; so I'll just drag it up here. It generated a transition which is the bar that goes between the two key frames that represents that motion. I can scrub it or I can push space bar to play. So, another method is sort of the semi-manual method where I'll add a key frame, and I'll do it for scale and opacity, and then I'll move back but instead of explicitly adding a key frame, what I do is I use that auto key frame properties and I just make my changes; so I can scale this down really small to like 2% and bump down the opacity, and you'll notice that the transitions are automatically being generated from the key frame that I set to the play head location. So, now when I scrub, I have an animation on both objects, and it looks pretty good. Now, it is a little boring. If we select the transition like I'm going to select this one for this black square, you'll notice that I see the properties of the transition and one of them is the easing equation, and there's lots of different easing equations that you can set. The one I want to use is ease-out bounce which puts a bounce at the end. So, now when I scrub, you'll notice that the square has a nice bounce, and when I play it, it looks pretty realistic. Now scrubbing is really valuable because it allows you to sort of see the details, and you'll notice that the shadow is no longer synced up with the square, so what I can do is I can just multi-select all of these and set those to have a bounce as well. So, now that looks like everything is in sync. The third mode of animation is using this feature that we called mark, and that's this little thing down here. You can separate it by dragging it away from the play head, and what it does is it forms a region where my edits are going to take place. So, for example, what I'm going to do is scrub and see that's where the bounce starts for the object, and what I'm going to do is drop the mark to set up that starting edit point. Then, I'm going to move slowly and find out where's the top of the balance, so it's right about there, and so now what I can do is select that object and just grab rotation, and you'll notice I haven't set any key aimed for rotation at all, and when I modify it, it generates both a key frame at the marked position and the play head position. The mark gets the value that it had previously, and the new value goes at the play head location. So, what that gives me is when we scrub back and forth you'll see it comes here, and you'll also notice I made an incorrect edit, but I just deleted that key frame; so, now you see that it comes up and rotates slightly. Now, it's bouncing back down rotated, and so what I'd like to do is actually reverse that so that he swings back to neutral position; so I'm just going to copy that transition. I'm going to select transition and copy it, and with my play head at the end, I can come here and I can paste it or I can paste inverted, and paste inverted reverses the end points of the transition, so now instead of going from neutral to rotated, it goes from rotated and winds up back at zero. So, now my animation looks like that. So, you see he has sort of a nice little, little bounce there. The last thing I'm going to do is draw another shape, and I'm going to make this a rounded rectangle and just position this right on top, and I'm going to change the color to sort of a blue. Now rather than having to duplicate everything I just did, what I can do is copy the set of transitions for that black rectangle, and then apply them to the blue one, and so then you'll notice that the blue one bounces, and right now its time to bounce afterwards. I can change it; I can move it up. I can just grab the whole set of them and move it. The final thing I'm going to do is just tweak this rotation, and so I'm going to position myself right at that center rotation point of this blue rectangle, and I'm going to change the rotation. I'm going to do it down here on the transition itself to rotate in a positive direction, so at full speed what it looks like is that. Okay, so that gives you an overview of some of the things that you can do with Adobe Edge which is a new tool for animation with HTML5, CSS and Java Script. What I would recommend you do though is go to Adobe labs and see how people who are real animation pros can use can use Edge and these very techniques that I showed you to create really stunningly beautiful animations. So get inspired, [Edge Preview Release: adobe.com/go/edgepreview] download Edge, and we'd love to see what you can do with it. Thanks. (♪ low wispy music ♫)
