Click on any phrase to play the video from that point.
[Adobe DEVELOPER CONNECTION] Hi--my name's Mark Anders, and I'm a Fellow here at Adobe. At this year's MAX, during the keynote, Kevin Lynch showed off a prototype that we've been working on called Edge. And what Edge is, is a tool for doing HTML5 animations. HTML5 has lots of new capabilities for doing animation and for representing graphics in Rich ways and so what we've been looking at is what are the ways that we can expose that in a tool that's easy to use for people who have used Adobe tools, such as Photoshop or Illustrator or Flash Pro to work with HTML5 and create animated content. So Edge is a prototype--it's not an actual tool--but it represents some of the concepts that we hope to bring into an actual tool, and also some of the underlying technologies for how to do the animation in a way that's doable. So here's Edge, and with HTML5 there are lots of new creative capabilities. You can draw graphics, you can move things around, you can transform it-- but the thing that's hard is really choreographing it and making it so that things move and transform as you want it, at the exact time that you want it; and when you've got lots of different elements moving around, coordinating exactly when all of this happens. That's what we really focused on with Edge. What we've got here is a Content Rotator for the Citrus Cafe, which is a fictional cafe that we've created. So let me show you some of the different panels in Edge that we have here for working on that. You've got your Layers panel over here, and what that allows you to see is really the HTML DOM--it shows you all the different elements that you can work with. When you select them, you've got the property explorer here, and this allows you to really set all the different properties. So, for example, you've got X and Y, and Width and Height, Opacity, background color-- but you also have things like if it uses text, what the font is. It uses the new CSS transformations-- we support the 3D transformations and you can even see the CSS Box Model. The stage is something that we did a lot of work on. What we wanted it to be was WebKit, which is the rendering engine that's used in Google Chrome and Safari. So what's great about using WebKit is that it not only gives us the latest HTML5 technologies, but also it makes it so that what you see is exactly what you're going to get. So here on the Timeline panel, what you see is each of the elements and the modification that you make to it over time. What's great about it is that it allows you to--in a very free-form way-- move things around and then to adjust the timing and the values that it has; and to really fine tune the animations so that things move around with the right timing-- so that you can build an animation that is really well-choreographed. This little area here that shows the salad is something I'd really want to be a little encapsulated piece of content. And so what I can do is, I can go here and click on the folder and say Convert to Symbol. You can see that it took all of the animation that I had done in that master Timeline and placed that inside of the symbol. This is how the content rolls on but I want this to be sort of a Content Rotator, which means that stuff rolls on and stuff rolls off--and then other stuff rolls on. What I'm going to do is add another Timeline to the Symbol. So we've got two Timelines: we've got one to bring the stuff on, we've got one to bring stuff off. But we want to apply this animation to different pieces of content. There are other scenarios, of course, where you'll have the images being fetched dynamically and provided to the Symbol, but this is sort of a simple scenario. What I can do is I can Right Click on that in the Timeline panel and say Convert to Parameter. What I want to do is show the salad and show the coffee. I go to the Actions panel and I add an action. I'm going to click on these little buttons and just add a simple event handler to say when you click on it, ShowCoffee. We've also used the WebKit in our Preview view and that allows you to not design the content, but to run it like you would be in a browser. And finally, all of this is editing HTML code. One of the critical things for Edge was the ability to just pull an HTML code, add animation to it. And we have a source code view of that code and right now it's not very full-featured, but the intent is to allow you to see the code and to edit the code. That's a little peek at the various tools that we have built into Edge right now. Again--it is a prototype, so we're going to be working on lots of other things. We're really excited about HTML5 and all of the creative capabilities it offers. And we're excited to be working on tooling that we hope to deliver to you in the future that allows you to really take advantage of it. Thanks for tuning in. [Adobe DEVELOPER CONNECTION]
