Creating the Very Best User Experiences

[♪upbeat music♪] [♪♪] [MAX] [♪♪] [male announcer] Ladies and gentlemen, please welcome Adobe Vice President and General Manager, Interactive Development, Danny Winokur. [♪♪] Good morning. What do you think of that opening sequence? Isn't it unbelievable? [applause and cheering] Are you ready for day 2 of MAX? [applause and cheering] Yeah? I hope you had an amazing first day of MAX yesterday and that you're as excited as I am by the innovations that Kevin introduced in his keynote yesterday morning: The new touch-based applications that we've introduced, which are going to allow you to bring tablets into your creative process; [Danny Winokur - Vice President and General Manager, Interactive Development, Adobe] our new publishing solution, which is going to make it incredibly easy for anybody to take the content that they've created and deliver it to their target audience; and how these things are coming together into the new Adobe Creative Cloud to provide you with an offering that is going to make it even easier for you to drive the next wave of content innovation. [thumping sound] [whirring] This morning we're going to talk about the development experience. I think all of you-- [applause] Yeah, go ahead. [laughs] [applause and cheering] I think all of you know--and it's obvious from your reaction-- that what developers do has become absolutely pivotal and important to the way content is delivered today. It's no longer satisfactory to deliver static content. Content has to be interactive, and the only way that it becomes interactive is through the work of developers and the code that they write to bring that content to life. That is done these days primarily through the Web so that people can experience it in their browsers and through applications that people can get through a variety of app stores, especially on mobile devices. And the technologies that people are using to deliver these experiences are primarily HTML5 and Flash, and we're going to be talking about both of them this morning. It has been our role at Adobe since the beginning of the company to help you create the most expressive original content in the world. And we believe that in order for you to be able to do that, you have to be able to freely choose your choice of technologies for any given project. We've been working over the years since the company began to enable you with the best underlying technologies, starting with PostScript and coming all the way up through the present day with HTML and Flash. And we view it as our job to continue to drive innovation in all of the core underlying technologies that you rely upon to create the best experiences so that you can wow your users. We're incredibly proud that you continue to choose our products to create the world's best content. Not surprisingly, as many of you know, the world's top brands are some of the most demanding customers. They expect to have the richest content available, the richest experiences for their users, and they also expect that those experiences are going to be widely available and easily accessible across a huge array of mobile devices. Let's take a look. [♪♪] [Odopod! Welcome] [Tim Barber - Executive Creative Director, Odopod] The opportunity to develop wants and to deliver to a wide range of platforms and devices really is the holy grail for us. It's the thing that has always made us really excited about working in Flash. And now we're really looking forward to the future where we can do that in HTML as well. [♪♪] [FLUID] [Dave Hogue - Vice President of Experience Design, Fluid] We like to say that we are technology agnostic or platform agnostic. We're going to design consistent experiences for our clients' customers on any device coming from any type of environment. And the Adobe tools allow us to design for each one of these screens in a very consistent manner. I think everyone here at Odopod is really excited to hear all of the activity at Adobe revolving around HTML and standard space development. Having our set of tools seamlessly work between those really rich experiences with Flash and those experiences that need to be with HTML is something we're really looking forward to and excited about. [♪♪] These advanced content strategies require that you create experiences which can be delivered both on app stores and on the Web. And as I mentioned before, both Flash and HTML play pivotal roles in delivering those experiences because they are cross-platform technologies which allow you to get reach from your valuable development investment. It's too expensive for many of us to separately create individual development projects for every endpoint that we now have to reach. We are very excited about what is possible with both of these technologies. And we've seen that over the years, much of the most visually compelling content that you have created has been done in Flash. But over the past number of years we've been in a period where that has begun to change. HTML innovation has begun to surge, and there's been a tremendous amount of new technology and exciting new innovation that has been brought to HTML. We're now at a point where HTML5 is already delivering fantastic, rich, and immersive experiences, and the pace of innovation is continuing. HTML benefits from the contributions of a broad community of participants in the ecosystem, including Adobe, and we believe that these innovations are going to continue, that the contributions are going to continue, and that they will become absolutely ubiquitous. We at Adobe are betting on HTML5 because we believe that it will continue to be an incredibly important platform for delivering some of the world's best content experiences. At the same time, we are continuing to double down and invest in Flash. You've probably seen this week's announcement-- [applause] Yeah, there you go. You've probably seen this week's announcement-- actually, last night's announcement-- that we've now released the latest milestone releases of Flash Player 11 and AIR 3. [cheering and applause] Yeah, go ahead. We're tremendously excited about these releases. These releases are a great example of the investment that we're continuing to make in Flash and the way that we see Flash as an incredibly powerful opportunity for us to drive expressiveness of what is possible on the Web and to advance those experiences by breaking down barriers that still exist in other technologies. As we create these innovations in Flash, we're going to naturally seek to take the innovations that we create there and bring them back into the standards process, bring them into HTML, and help to drive that innovation that is naturally continuing in HTML. In just a moment we will show you the progress that we have made in breaking down the barriers with Flash and advancing the state of the art with HTML. But before we go there, I want to give you a bit more information on what we at Adobe are doing as part of the HTML5 innovation process more broadly. We've been hard at work with key partners in the HTML community-- companies like Google, like Microsoft and Apple-- to make important contributions to the standards process through the W3C. We've also been hard at work with those same partners in making code contributions, actually writing reference implementations that we're contributing to key open source projects, including WebKit and jQuery. Not surprisingly, as you would expect from Adobe, we've also been hard at work creating world-class tools. We've been creating tools like Adobe Edge that allow you to take advantage of the latest features, the latest expressive features, that exist in the state of the art of HTML5 so that you can create visually rich and beautiful experiences easily, just as we have created world-leading HTML development tools for more than a decade. And as you've probably also seen in this week's news, we are doing some very exciting things to enable HTML5 mobile applications. Now it is time for us to show you the progress that we've made in all of these areas with both HTML5 and with Flash in delivering experiences both through mobile apps and across the Web. We're going to show you a lot this morning. There's going to be a lot of demos, a lot of technology. Don't worry about the need to take notes. There's going to be a link that we put up at the very end of the presentation that you can follow through to get access to all of the downloads of all of the technology that you'll see this morning so that you can get your hands on it, begin to play with it, and begin to experiment. So now to get us started, first with mobile apps, please join me in giving a warm welcome to Adobe's Director of Evangelism Ben Forta. [applause and cheering] [♪♪] Good morning. Thank you, Danny. Wow. It's good to see you guys here. [applause and cheering] Mobile applications, or apps as we affectionately call them, have utterly revolutionized the user experience and in doing so have changed how us developers and designers go about building those experiences. [Ben Forta - Director of Platform Evangelism, Adobe] As Danny explained, we've been very hard innovating the entire development process. And we're going to spend some time talking about what we've done for both HTML5 app developments and Flash app developments. Show of hands. How many of you here--actually, I can see some of you. How many of you here have actually built and deployed a native application using HTML5? Wow. Not that many hands. A couple. Okay. A few. All right. Easier question for you: How many of you have any Web experience--HTML, CSS, JavaScript-- any Web development experience at all? Every single hand in-- One hand not there. [laughter] I'll talk to you afterwards. [laughter] All right. So every one of you here has the skills you need to build applications, native apps, using HTML, CSS, JavaScript, and most of you are not doing it yet. And that's okay. This is new, it's exciting, and you can actually do it already. And I want to show you what you can do right now in Dreamweaver, current version, CS5.5, and then we're going to talk about where we go with that. So this is Dreamweaver. You've seen this before. I'm going to bring up an application over here. It's pretty simple code. I mean, you've got some divs, some lists, images, some layouts. At the top of the code we've got a couple of jQuery JavaScript files being included. This is a jQuery application. And if you look at what the app actually builds, this is building an app. So you've got a series of options here. Pick your favorite restaurant, click 1 of them. You see the code changes, and you can go back and forward. So a pretty typical, pretty simple application using what you already do: HTML, CSS, JavaScript, and in this case jQuery libraries and JavaScript as well. There are some other interesting things here like what does the app look like in various screen sizes. So if you have a smartphone, reposition it so you get that look. If you're running a tablet, what does it look like? You can look at multiple screens at once and get a preview of what all of them look like. And you build the app. And when you're done, you go to Site, Mobile Applications, Build, and this is set up to build an Android, but it could build an Android or iOS as well. And then here's the same application as is running inside the Android Emulator. And I can click and go in and out and do the same thing, and it will tie in to mapping on the device--or should. All right. And we can call as well. There it is. And you can go back and you can hit the Call button, then cache the phone and so on. This is actually doable right now. What isn't so clear from that is the way this works. This actually is building a real native app using what we talked about: HTML, CSS, JavaScript, in this case jQuery. The application is packaged up as an application using PhoneGap. PhoneGap is an open source HTML5 app platform for doing just this-- for building applications using exactly what you know. Right now you can go to phonegap.com and try it out. And it lets you build apps that target all major platforms, including iOS, Android, Windows, BlackBerry, and more. This is new and it's exciting, and judging by the hands that went up in the room, pretty much every one of you has all the skills you need to start building these apps. You just haven't started doing it yet. But you will. We have a really exciting announcement. We're really pleased to tell you that we have entered into an agreement to acquire PhoneGap. [applause and cheering] And so my first guest I'd like to welcome to the stage, a long-time colleague and now an Adobe colleague, PhoneGap's Andre Charland. [♪♪] [applause] [♪♪] Andre, welcome. And welcome to Adobe. Yeah. Thanks, man. I'm excited to be here. So I gave a really quick demo of what PhoneGap is capable of. Take a step back. Tell us what PhoneGap is and who uses it, what are the use cases. Right. So PhoneGap is a development framework for building native applications using HTML5, JavaScript, and CSS. [Andre Charland - PhoneGap] So you write with standard web tools, standard web technologies, and then you can compile them for iOS, Android, BlackBerry, Windows Phone 7, Bada, and a bunch of other mobile operating systems. And there's more being added as they come to market. You can use any IDE you want, so you can use Dreamweaver, but of course you could use Eclipse, TextMate, Visual Studio. It's totally up to you. It's just HTML and JavaScript. >>Okay. And the people who are using it are HTML developers. They have Web experience, and this is the way to translate that experience into building mobile apps. >>Yeah, exactly. So most people these days are building websites or mobile websites, and you can reuse a lot of that code to build a native application and then extend it with the PhoneGap APIs, which give you access from JavaScript to stuff like geolocation, contacts, camera, accelerometer, stuff you wouldn't normally get access to in the web browser. >>Okay. And PhoneGap is open source. >>PhoneGap is completely open source, free and open source. There's a great community of people that contributed to it, and Adobe is one of the biggest contributors. IBM also contributes, and it'll stay free and open source forever. And in fact, in the last week we've been in the process of contributing PhoneGap to the Apache Software Foundation so that it'll remain free and open source forever. Adobe will be contributing there, IBM will-- [applause] Yeah. Apache. Yeah. We're really excited about that. We've been thinking about moving it to a foundation for a while after PhoneGap 1.0, and Adobe has a lot of experience with Apache, and they helped us and coached us through that process. And yeah, it's awesome. >>That's great. Okay. I showed 1 demo, and it was kind of a developer quality demo. Can you show us really what PhoneGap is capable of? Yeah. Let's take a look at some demos over here. >>Cool. All right. Here's an app. It's the Travelocity application by Sabre. Let's load it up here. It does kind of the standard stuff you'd expect in a travel application. I can book flights, find hotels. We're in Los Angeles. We can try looking up a hotel here. Search here. Good. Peruse the information. They repurpose a lot of the content for this, the HTML and JavaScript, from their mobile website. And now they repackaged it, deployed it to the Android Marketplace. Now we can do things here: scroll through the app, find a property we like, find more details, and we can book it right from the app. You can also store travel information for when you're traveling and that sort of thing. That was kind of a great tool for travelers. Let's take a look at something a bit more trivial and fun. Here's a game we'll pull up here. Orbium was one of the early apps. It's a simple puzzle game here. You can see I can just spin these things. I've got some audio, gestures, that sort of thing. A lot of people think maybe you can't build games with HTML and JavaScript, but you can. That's kind of the goal of that game. [Forta] This is actually using HTML Canvas. [Charland] Yep. This is using HTML5 Canvas. It also runs in the browser too, so you can interact with this game in a lot of different ways. [Forta] Okay. That was kind of a fun one. Let's look at this app here from a company called xero.com, which is a SAS provider of accounting software. They're doing really well, hundreds of thousands of users and that sort of thing. I can look at my invoices here on the fly, I can report expenses, do all that kind of stuff. This is the companion app to the overall accounting system and is a really popular app and is released on iOS now, and I think they're submitting it to Android shortly. So I figure 1 more app, which is one of my favorites which was released last week, which is-- >>[Forta] Your favorite, huh? [Charland] Untapped. This is a social network for beer drinkers. [applause and cheering] [Charland laughs] I'm Andre Charland on here, and you can let me know what kind of beers you recommend around here. Try out the Fat Tire one. I can look at this brew. I can check into it. It lets people know I'm drinking it. I can confirm it. I can see what my friends are doing. Brian LeRoux, one of the key people in the PhoneGap project, drinks a lot of beer, as you can see here, and he's always great to rely on for beer advice. [laughter] So yeah, that's on iOS and Android. They also have a mobile website version, which they started with, so great PhoneGap. [Forta] Wow. Great examples. It definitely shows the breadth of what PhoneGap is capable of. Talk about the development experience. What does it take to actually get all the bits together to build an application like this? Right. The programming, like I said, is just HTML and JavaScript. You call a standard API. It's 1 code base that can run on all these different devices. The challenge comes in when you're trying to compile to get these apps onto the native devices. So I'd have to go download Xcode, the Android tools for Eclipse. Same thing with BlackBerry and then the Windows Phone 7 tools. So that's like over 10 gigs of different SDKs and build toolchains and compilers I'd have to install. Not only that, you have to install them on different operating systems. So obviously, you need OS X for Mac and the iOS stuff, but for Windows Phone 7 and BlackBerry you need Windows. So you need 2 different operating systems. You could virtualize it, but it gets messy. And then once I have that all set up, which could take days, then I have to go click Compile on each of these different tools just to see my app running, just 1 app on all these different devices. And then I would assume as soon as the OS vendors come up with updates and new versions, you've got to go through that whole process again. >>Yep, yep. Download the new SDKs and check it out. It's just a lot of overhead, especially for a web developer where you're used to writing code, putting it on a server, it runs, you can see it. So what can you do to simplify that experience? What we've been working on for the last little while is actually putting all those PhoneGap toolchains and build toolchains up in the cloud. So we have a service called PhoneGap Build. It's just at build.phonegap.com and you simply upload your HTML and JavaScript and it'll compile it. And all of these are in platforms for you and give you back native binary code signed and ready for testing or for the app store. [Forta] Can you show us an example of that? >>Yeah, sure. [applause and cheering] Let's take a look here. When you log in to PhoneGap Build--I don't have my iOS cert configured here, and BlackBerry servers sometimes have issues. I can go to GitHub over here. I have a sample app. It's a jQuery Mobile kitchen sink app that just uses jQuery. I can grab this URL, which is where the code is just sitting. It's just HTML and JavaScript. See it on my GitHub account. I go over to PhoneGap Build, Create a New App. We'll just call it kitchen sink here because that's what it is. So I can create a new Git repository to push it to, I could upload just the HTML and JavaScript or a zip, or I can paste this right in here. That's just going to pull from GitHub when I create this. I have some preconfigured ones here. And then to get it on my device all I have to do is go to this screen, and I can use my QR code scanner. [Forta] So you can either download the actual application-- [Charland] Yeah. I could download the APK there or the webOS files if you still want those for the BlackBerry or that sort of thing. Or I can just grab it here with my QR code scanner. It'll grab the URL, open in the browser. So this will trigger the download start. I go here and I can see it's going to be downloading, hopefully quickly over Wi-Fi. >>[Forta] There are some guys out there hogging the network. [Charland] I know. They might have already scanned my QR code. But yeah, so this is 1 great feature. There's also debugging features in here so you can actually debug your application remotely from the browser and that sort of thing. So we'll just install this app quickly. It's telling me it's going to use those APIs. Open up my app, and there you go. This is the app I built. That's just the loading screen. And then here's jQuery's UI with accelerometer data, and you can see here it's actually pulling data from my accelerometer and passing it to my HTML and JavaScript application. >>[Forta] That's great. [Charland] Yeah. >>[Forta] Thank you. [applause] That's okay. No. You can go if you want. [chuckles] [Charland] I thought I was done. Okay. [laughter] >>Thank you, Andre. [applause] So what you just saw, PhoneGap Build, is a service, runs in the cloud. Yesterday when Kevin was talking about the Creative Cloud, he told you about services--services that were included and part of your cloud subscription. You get access to those services. He also told you to watch and stay tuned for announcements of additional services that will be included as part of your cloud subscription. And you didn't have to wait too long, because PhoneGap Build is going to be one of those services included in your Creative Cloud subscription. [applause] So that's great. We're really excited to combine our expertise in tooling and HTML in building developer experiences with PhoneGap technology and hope you guys are just as excited to build those applications. All right. So that's HTML5 applications. Now let's switch gears and talk about Flash-based apps. There are-- I heard that. There are a lot of really good applications built in Flash, and I want to show you some of the examples. You guys in the room probably built a lot of them as well. Actually, you've already seen some incredible examples of applications built in Flash. What do you guys think of the touch apps that Kevin showed you yesterday? [applause and cheering] Yeah. You like those? [applause and cheering continue] Besides being useful and usable applications, they had rich UI, performed really well, very engaging interfaces. What you weren't told is that almost all of those applications were actually built in Flash. [applause and cheering] Some targeting iOS, some targeting Android, but eventually all targeting all platforms and great examples of what Flash application development really can do. But let me show you some other examples. One area where Flash has always been really important, dominant, is in gaming. And you're going to hear a lot about gaming later, but I want to talk about 1 example. You've probably all seen this one. This is an app that is an in-browser application that's been out there for several years. It's an award-winning in-browser adventure game called Machinarium. Probably a lot of you have seen it, a lot of you have played it. It's a great application. It's highly interactive, beautiful UI, great graphics, lots of little puzzles you solve, and it's this robot that gets dropped in a junk heap and he's got to reassemble himself and then go through different levels and solve puzzles and get rid of bad guys and get his girlfriend back: classic adventure, point and click story. This had been out there for a while, and they wanted to build a version that would run on the iPad. Let me show you the iPad app. This is in the middle of the game, so here's our robot. He walks around, and he can go up and down. In this next step you actually have to grab a puzzle piece that the bird has. And so this bird follows whatever you do. So if you kind of grab him and go up and down a few times, you can knock the bird off his perch--or try to. Or not. I've got to play some more. Well, you get the idea. He's supposed to fall off his perch, and then you get the puzzle piece and you play the next level. I haven't had enough time for playing, I promise you. What's really cool about this game, though, is that this game is built in Flash. Because the original version in-browser experience is built in Flash, they were able to take that code and with minimal effort deliver it as a native application on iPad. And here's what happened. It's a paid app. The day that the app was shipped, it became the number 1 paid app on the app store and that week was nominated to be Game of the Week. It's a great example of a-- [applause and cheering] a really good example of a Flash application that started off life in a browser, and we made it really easy to take all of that work, all that investment, all that code, all those assets and build a very compelling on-device experience. But there's more, because there are other devices beyond iPad out there, and they wanted an Android version as well. The Android version of this app is not out yet. It should be shipping shortly. So here is the exact same app, right? This is a slightly further step in the game. Over here, this required no code changes at all. They took the exact same code it took to port and build the iPad version and repackaged it and built this version over here to build a very compelling app running inside the Android. Great example-- He's making funny noises. Great example and a perfect example of the kinds of very creative, very engaging, compelling experiences that Flash makes possible. All right. So that's one end of the spectrum: gaming. Way on the other end of the spectrum: business applications. Over the last few years, we've seen incredible examples of businesses solving real problems, mission critical problems, with Flash, particularly when they combine Flash with the Flex framework, which really gives you a very simple way of working with data and grids and more. One example is Johnson Controls. Johnson Controls is a world leader in heating and cooling controllers, batteries. The company is over 100 years old. It was actually founded by the guy who created and patented the very first electric room thermostat. They've been using Flash to solve some very interesting business problems. Take a look at this video. [♪♪] [Mark Glomstead - Director, Solution Processes and Tools, Johnson Controls, Inc.] We asked reUrgency to develop our next generation field survey tool enabling teams to capture assets and facility information in the field. [Jeff Boothe - Founder and UX Architect, reUrgency] We saw a huge opportunity to consolidate all of that into 1 device or 1 application. We started with developing on the desktop first, and now we're migrating into mobile. [♪♪] [Keith Evans - Processes and Tools Manager, Johnson Controls, Inc.] Our field engineers are using Droid or iOS devices. We're trying to take devices that they already have that they use every day and basically build for what they have. [male speaker] Adobe has enabled us to develop better software faster [Ty Seddon - Co-Owner and Software Architect, reUrgency] by allowing us to leverage the Flex framework. We've been able to have 1 consistent code base whether we're deploying to Web, desktop, or mobile. [♪♪] [Glomstead] The reception to the tool has been great. It's easy to use, and we find that people are able to pick it up and begin using it with a minimal amount of training. It feels fantastic that we can write once and be able to leverage all of that stuff over and over and over again. One technology and 1 application development team. [Seddon] We've already created versions of the same application on Android, PlayBook, and iOS. Flash Builder, ActionScript, and Flex. It's fun. I can't wait to get up in the morning and start building something with those products because it's a fun platform to build on. [Adobe] [Forta] All right. I like that. It's fun to develop. Cool. I agree. [applause] So you've seen the gaming example, and you've seen a business example. I want to show you 1 more, and this is in the social space. USA Network has had incredible hits recently, shows like Burn Notice, White Collar, Suits, and Psych. In addition to creating great TV content, they've also worked very closely to get closer to their viewers-- to build experiences that allow communication and engagement with those viewers by creating companion applications. My next guest is USA Network Vice President of Digital Jesse Redniss. [♪Psych theme playing♪] [applause] [♪♪] [Redniss] Here you go, sir. Pineapple. >>Pineapple. All right. >>Delicious flavor. >>Thank you. >>You're welcome. So for those of you who watch Psych, you understand the gag. But for those who don't, why don't you describe to the viewers what Psych is and why it's become so popular. >>Absolutely. USA Network is the Characters Welcome network, and Psych has some of my favorite characters. Psych actually follows the story of Shawn Spencer, the fake psychic detective, and his best friend/sidekick, Gus, [Jesse Redniss - Vice President of Digital, USA Network] as they work with the Santa Barbara Police Department to solve cases. So think of it as Columbo and a little bit of Miami Vice and probably a lot of Scooby-Doo in there. It's also the number 1 scripted television show on Wednesday nights, with a massive fan following, and we're about to kick off the 6th season next week. [Forta] That's great. [cheering] You've got some fans out there. [Redniss] Absolutely. Yeah. [applause] [Forta] So you've also created a companion application, and that's obviously a significant development effort and investment. Why is building companion apps so critical, so important? >>It's important. When you think about it, about 70% of tablet and smartphone owners are actually browsing the Web while they're watching television. So it's kind of our job to find creative ways to convert them from passive viewers kind of sitting on their couch into active participants in the evolution of our brand and of the show Psych. So what we're doing is creating great, rich content experiences to extend their engagement with the show beyond just the television linear broadcast so that they can then share those experiences through the app on the social spheres, pushing the content out and kind of bringing the water cooler to a whole new level: into real time and into the palm of their hands while they're watching the show. [Forta] All right. That's great. So the app has been out for a while, it's popular, and you just released a new version of the application. >>Yeah. Could we take a look at the new app? >>Absolutely. Let's take a look. [Forta] I'll move my pineapple out of the way, somewhere safe. >>Don't lose it. All right. So here we have the Psych Vision application. And what we're doing is we're pushing in a lot of photos in real time. So you can come into the app and check out some photos. There we go. There's some photos popping up. Swipe through them, go into full format screen. You can also check out some videos. I won't play the videos right now. You can also check out some games, and what we've also done is integrated in what we're calling the character chatter or Psych chatter, and what that is doing is that's actually funneling in the real-time conversation happening on Facebook, happening on Twitter, pulling in real-time videos from YouTube and Flickr to really develop that kind of community feel of watching the show. So you can really see what all the other fans of Psych are saying in real time right now, like Jamie Steinberg saying something about 8 minutes ago. So it's really great. But the real magic behind what the app is doing is really about unlocking and engaging with exclusive content. So while the show is playing, what we're doing is we're actually funneling keywords onto the screen and engaging fans to basically use those keywords to unlock exclusive content. So basically, while you're watching the show you're going to be looking for these keywords, entering them into the application, and accessing great content like games and video. [Forta] Okay. So you're going to show us an example. And they should watch the bottom left of the screen for the keyword. Bottom left of the screen. So let's watch the show. [show dialogue] [Redniss] So what was the keyword? [audience response] Gus. There we go. All right. So what we're going to do is enter the keyword in, press unlock, and let's view our exclusive content. What we're about to unlock is actually a sneak peek of the premiere episode happening next week. So this is actually an exclusive to all you people here in the room, as well as people watching streaming. Pay close attention. This...is not me. Shawn, when Lassiter showed me the picture, I said, "Where did you get that picture of Shawn?" Look, I wish it were me, if I'm being honest. The guy looks great in a suit. The head's all wrong, and his hair has a counterclockwise trend to it. Mine's always grown northern hemisphere. I don't see it. >>South African! The Lethal Weapon 2 guys were South African. And this is not me. [TV announcer] Psych. An all new season premieres Wednesday, October 12th, at 10:00 on USA. Characters Welcome. [Redniss] So what we're doing is we're also engaging with fans. So after they unlock content, we're also then polling them and asking them questions to make sure that they're actually paying attention while they're watching the show. So I just want to make sure that everyone was paying attention while they were watching that clip. So what we're going to do is basically play now the Gus Brain Trivia. Which Lethal Weapon movie did Shawn mention? >>[audience response] 2. There we go. All right. There we go. Answer the question correctly, and we've actually tied in some gamification elements so you actually earn points towards Club Psych which you can then use as points to redeem real merchandise in our store and unlock other exclusive content, too. [Forta] All right. That's great. Really nice example of Flash being used to build very creative, very engaging experiences. [Redniss] Yeah. >>And this is built in Flash. >>It is. [Forta] Tell us about the development experience. Why did you build this in Flash? We built it in Flash and on AIR with our development partner, Digitaria. And really what it does is it provides us kind of ease of development process onto 1 platform. We can concentrate on the great content, while building onto that platform can really focus on pushing it out onto 1 platform that can push it out to multiple syndication points at the end of the day. And for us, it's really about ease of cost, ease of development timeline, and then being able to get it out to the masses all in 1 shot. So less time, more productive, less money, reach more devices, and all thanks to Flash. >>All thanks to Flash. Cool. Thanks. What do you think? [applause] All right. Thank you. >>Great. Thank you, Jesse. Good having you here. [applause] So all of the applications you've seen--Machinarium, the Johnson Control app, Psych Vision, actually, the touch tooling apps that Kevin showed you yesterday-- those are all running on AIR 3 which, as Danny told you, just released. If you have devices, many of you probably got an alert notification and got the update pushed to you just this morning. We just released AIR 3.0. There's a lot to talk about in AIR 3, and I can't go through all the features, but there are 2 features specifically that I do want to mention. One is what we call Captive Runtime. Let me explain what that means. If you're an Android user and you've installed any of your applications, you've first downloaded the AIR Runtime and then you've installed your AIR app. You download the runtime once and it updates as needed, and then you install your applications. And that results in a smaller app with a shared runtime. If you're an iPhone or iPad user, you don't install the runtime; there is no runtime. Instead, the runtime is embedded in the application itself, and each app gets a copy of the runtime, creates a bigger application but a much simplified user experience, streamlined. Click, download, it just runs. And so Android users have been asking us for the same and have wanted the ability to really choose-- either pick the smaller app, shared runtime, or pick the simplified experience. It's bigger, but you end up controlling the end user experience end to end. And so this now is in AIR 3. And indeed, all of the applications you've seen are built that way on Android using Captive Runtime, and we're really excited that you finally have that option available to you. It is literally a check box in the build process. You turn it on, done, and you now have a far simpler way of deploying applications, and we hope you take advantage of that where appropriate. So that's feature number 1. The other feature I want to talk about very briefly is Native Extensions. What this means is this: Oh. I heard some applause over there. [applause] Yeah. This has been the single most requested feature, and we're glad we're finally able to give it to you. What Native Extensions means is simply this: Device vendors are innovating at an incredible pace, and you as developers want to take advantage of whatever the device vendor gives you. If there's a gyroscope, vibration APIs--whatever hardware features the device has you want to be able to take advantage of. Native Extensions are a way to write native codes and an ActionScript class wrapper around them so you could use those from within your own application to take advantage of everything the hardware has to offer. And indeed, some of the applications Kevin showed you yesterday do just that for advanced graphing libraries and more. I want to show you 1 very brief example. This is a device that you probably haven't seen yet. This is the Sony P Tablet. This is an interesting device. It's a clamshell design, so it's designed to open and close, and it has 2 screens. You could use it as 1 screen. It's an Android device, right? So content could fill the entire screen, and it will just work, and you wouldn't know it was 2 screens. But you can take advantage of those 2 screens if you want, and you can build an application that uses each screen differently, maybe controls on one and inputters on the other and so on. It's an interesting way to think about building user experiences. And here's 1 app I want to show you. This is actually one of the finalists in the Sony AIR Application Contest going on right now. This combines everything we love about the Internet: Twitter, birds, and catapults. [birds chirping] So this is Tweet Hunt. We can pick "celebirdies." Which "celebirdy" did we get today? We got Donald Trump. Okay. And there are his tweets coming up. And then I can take my catapult, and I can shoot his tweets. Admit it. You've always wanted to do that. Oh, I missed that one. You get the idea. So nice example. This is one of the finalists in the Sony AIR Application Contest. I encourage you to go visit Sony, our sponsor, in the exhibit area and see the other finalists as well and get to vote on your favorite one. But building an app like this--the ability to control what goes on what screen-- is another example of where Native Extensions would be very useful, and we're really excited that this feature is out there for you right now. If you want to see some really nice examples of what Native Extensions can do, go visit the Adobe Developer Connection. We have examples up there already, some created by Adobe, some created by the community, and you can create your own as well with instructions how to do that. Okay. So that's AIR. The way these applications are built is using Flash Builder, and Flash Builder remains the most productive way to build applications in Flash. Flash Builder, the current version, 4.5, has been focusing a lot on mobile development, especially phones, so it has the Editor, Profiler, Packager, debugging, including some very sophisticated debugging support where you can run an app on a device and you have a breakpoint on the code, and when you hit the app on the device up pops a breakpoint. A lot of you are using this already. We're really pleased to announce that we have a pre-release out there of Flash Builder 4.6 and Flex SDK 4.6. And key importance in this new release is explicit support for applications running on tablets, applications designed to take advantage of the larger form factor, so controls optimized for the larger form factor, controls designed to simplify moving from portrait to landscape and more. The pre-release is out there, it is available, and I encourage you to take a look at it and download it. The bottom line: I hope what you're seeing here is that be it HTML5 or Flash, we remain committed to allow you to build the best apps and the best experiences using whatever technology is best suited. Right now we're targeting Android, iOS, PlayBook, and additional platforms, including Windows Metro in the future. And with that, I will turn you back to Danny. Thank you. [applause] [Winokur] Thanks, Ben. What do you think? [applause and cheering] It's now possible for you to easily create rich mobile apps for every app store using your choice of technology. We are going to continue to drive innovation in ways that you can create the best, visually richest, most expressive, and immersive mobile applications. And we are absolutely thrilled that we're now going to be able to do that with our new colleagues from Nitobi. This way you will be able to easily create those applications in either HTML5 or in Flash or in any combination of those and even using native code, as you saw from Ben in the discussion around Native Extensions. Let's now turn our attention to the Web. HTML is obviously at the foundation of the Web and always has been since the very beginning of the Web. And for nearly as long, we at Adobe have been working hard to deliver to you the best tools for web development. We've been over the past several years, as I mentioned before, in this incredibly exciting time of innovation, the results of which we call HTML5. We've been hard at work in the context of these innovations not only creating great expressive tools like Adobe Edge that allow you to take advantage of those newest features for expressive and really visually rich content but also, as I mentioned, making important contributions to both the standards process and to open source projects like WebKit to bring a new level of expressivity to all of the standard browsers. We are accelerating these investments that we're making in HTML5. But also, as I mentioned, we're continuing our investment in Flash and we're delivering this week a quantum leap forward in what you can do on the Web in the browser with the new Flash Player 11, especially for the highest end, most demanding entertainment experiences like gaming. We're really excited to show you firsthand what is possible on this new next generation of the Web. And to help us do that, please join me in welcoming Adobe's Vice President of Product Development for Web and Interactive Design Paul Gubbay. [♪♪] [applause] [♪♪] [Gubbay] Hello, MAX. It is great to be on the MAX stage. I have to say you guys sound like you're in a pretty good mood this morning. Are you ready to see some cool demos? [applause and cheering] All right. I shall not disappoint. [Paul Gubbay - VP of Engineering Web & Interactive, Adobe] Adobe has had a rich history driving the Web forward. And with the recent innovations by the browser vendors as well as some of the amazing technologies and frameworks that the open source community has been building, the Web is experiencing a renaissance again. And it is an exciting time to be a web designer or a web developer. However, it is also a confusing time. I'm out on the road a lot, I meet with a lot of customers, probably people in this audience today, and I hear time and time again, "There are so many technologies, so many frameworks, "it's hard to know how to get started, "especially when I'm being asked to build a responsive, adaptive, "dynamic, interactive website/application that runs equally well on a phone, "a desktop, a tablet, and a television." Have some of you guys been getting those requests? We would like to help. And we actually spend quite a bit of our time thinking about what does it take to build great Web experiences. And there are really 3 things. You need great browsers, you need great frameworks, and of course you need great tools that help you pull these things together so that you could be more productive and, ultimately, more successful. So we're going to spend the next 20 minutes or so, and we're going to show you some of the things we're doing in each of these areas, and we're going to start off with tooling. You may remember last year we had our CTO Kevin Lynch on stage, and he actually showed a prototype of a new tool called Edge. Edge was built from the ground up to allow you to build the richest, most creative Web experiences using nothing but web standards: HTML, CSS, JavaScript. And when the team started working on Edge, they decided that they would take a different approach to building the product. They would get it out early, they would get it into the community's hands, and work with you to help us define what the feature set should be and what the technology is we should be investing in. And apparently you guys liked that. How many folks have heard of Edge or actually downloaded or played with Edge? Just a little applause. [applause] I can see you. Hey, guys. So we released Adobe Edge Preview 1 on August 1st. We had over 50,000 downloads the first day. We took that information, we rolled that back in, we did Adobe Edge Preview 2 on September 7th, and today I'm excited to announce, with over 150,000 downloads and growing, we have available on Labs Preview 3 of Adobe Edge. And to show you a little bit about what that looks like, please help me welcome to the stage Adobe Fellow Mark Anders. [♪♪] [applause] [Gubbay] Hi, Mark. >>[Anders] Hey, Paul. Thanks a lot. Let me show you what we're doing with Edge Preview 3. The first thing I'm going to do is just start it up, and you'll notice it starts really fast. We have been working on that very hard. What I thought I'd do is to take some of the assets that we have for the MAX homepage and redo it with some motion and interactivity using the new interactivity features of Preview 3. [Mark Anders - Adobe Fellow] Let me show you what I have so far. It comes in, it sort of fades in. I can actually push Play and preview it right there in the tool. So what I thought I'd do is add a little motion, first to this circle here. What I'm going to do is just drag this thing out here and add a little rotation to it. I'm going to do 190 degrees. Edge makes it really easy for you to just add animation very quickly. I'm just dragging that little animation region, so I'm getting uniform transitions. Then what I'm going to do, I'm going to go back to 0. So then what I'm going to do is take a look at those transitions and add a little easing function. I'm going to select Ease Out, back, so it has sort of a more natural look. Edge makes it really easy to reuse the work you've done. I can, for example, copy these transitions and just paste them a couple of times. I'm going to delete that last one. What I have now is this thing that sort of rotates. What I want to do is bring in some of the content that we have in Edge. I actually did another project where I animated it. So in addition to copying and pasting within a project, you can also do much more complicated scenarios. So here's what this looks like. We have these guys animating in and then rolling out, and what I can do is just select all of this stuff--and this is across multiple elements-- copy it, and go back to my other project, and I'll select all of these different elements and then paste. And we'll scroll down, and there it's been added. So we copied from multiple elements to multiple elements lots of different properties. The next thing I wanted to do is add some interactivity. This is just an animation that's playing. When the content rolls on and stops moving, what I want to do is right around there I want to stop the animation. So I'm going to do that by adding a trigger. A trigger is a little piece of JavaScript code that gets called on the timeline when I get to that point. I could type the code in, but we also have this little library of snippets here, so I can just click that and it gives me that little JavaScript statement to stop. To restart again what I'm going to do is select this label, this little button, and add an event handler. We support all the mouse events, we support touch events for if you're working on a tablet or a phone, and we also support the jQuery Mobile virtual events which handle both clicks and touch events. I'm going to add just a click, and I'm going to just say Play. So with that, let's preview it in the browser and see how it works. There's my thing. It's rotating with a nice little bit of motion. This comes on, and it should stop, and then I click. And you'll notice it says Label on that label. I had previously done all of these, and you'll notice this says Experience. Let me show you how you do that. What I'm going to do is go back to right before the button animates on, and I'm going to add another trigger. This time I'm going to say, "Change the text of that label." So I'm going to type in the selector, which is Label, and then I'm going to type in the new text. What I want it to say is Learn, which is the next topic area that you're going to go to. I'll show you the final piece of interactivity that I had added previously, which is looping. What I did was I added a complete handler to the timeline so when the animation is done it fires this event, and what we say is go back not to the beginning but to the Attend label. So with that, let's try the finished thing. We have our animation that we did, that rolls on. You notice it says now Learn. I click that, and it says Experience. When we get to the end of Experience, it's going to say Attend and loop back. And there is our loop. So that's a quick peek at some of the features we have of Edge. Thank you very much. [Gubbay] Thank you, Mark. [applause] What do you guys think? [applause] Obviously one of the big new features in Edge Preview 3 is interactivity, which is some of what Mark was showing you. When we build tools, one of the things that's really great for us is what you guys actually create with them. Sometimes you do just mind-boggling stuff that we weren't expecting was even possible with the tool in the stage that it's in, and you use it in use cases that we weren't expecting as well. So one of the companies that has actually been doing some of that work is Rain Interactive, and they've been playing with Edge since some of the early days. Recently last week they released a game, and the game was called Run Kitty Run: The Adventures of Timmy. And they chose in their game to actually use Edge for some of the cut scenes that actually take place in between the levels. So let's pull up Run Kitty Run. I happen to have a debug build here, so you won't be able to do this at home. Let's jump in here really quickly, and let's use level 5. This is actually production content running in an iPad game delivered by a preview release of Adobe Edge, preview release 2. [Gubbay chuckles] There you go. Clearly a game for your toddlers. [laughter] Also, the Rain Interactive guys actually put up a showcase as well to show a little bit about how they built Run Kitty Run. You can go up to their website and check this out. You can click on different links here. They'll show you how they used Photoshop sketches as they were building this, different things that they did when they were doing production, and actually, of course, putting it into Edge itself and animating the different pieces. And you'll also notice as you look at this that yes, this has some animation and it is interactive, and you can use Adobe Edge for web content as well. It's not just for games, in case you were confused. So that's some of the things that we're doing with Adobe Edge. And for those of you that are interested, you can download it on Labs. I'd also highly recommending attending some of the sessions here at MAX so you can get a good start on Adobe Edge and learn how to use it. So that's some of the tooling work that we're doing. In order to build great tools, you actually need something else, and that's great frameworks. In some cases we build the frameworks ourselves. As a matter of fact, the Edge team did that. They built out a JSON data structure format for describing animations in Edge. In other cases we actually contribute to the open source communities and work with some of the really cool frameworks that we see that are being built out there as well. I mentioned before there's lots and lots of frameworks out there, but there's one I'm pretty sure everybody here has heard of, and that's called jQuery. I'm sure almost everybody here uses jQuery. If you're using jQuery at all, you know all the buzz is about jQuery Mobile, some of the new things you're going to be able to do to build applications that will run on phones and tablets and such. And last year when we were on stage, we said that we were going to be actually contributing to jQuery, and we've actually had a team spending the last year working on jQuery Mobile. They've been very, very excited. Some of you may know that jQuery Mobile 1.0 release candidate 1 was just released this last weekend. The team is very, very excited about that. We were actually one of the top contributors on jQuery Mobile, along with the Filament Group. And in addition to that, we've also been working in Dreamweaver. So Dreamweaver CS5.5 had great support for jQuery Mobile. I think Ben actually showed a little bit of a demo there along jQuery Mobile and PhoneGap in Dreamweaver. I think that's a great example of tools and frameworks working well together. But we wanted to do more. One of the things we were thinking about as we were looking at jQuery Mobile is for those of you who have used it, you know it has a really great new, very robust theming model for theming all the components and skinning them. It uses some really good, robust CSS framework that they put together for doing that. We thought to ourselves, "Theming. That's a very visual thing." "Wouldn't it be great if you didn't have to necessarily wade through all of that CSS "but you actually had a visual tool to help you do that?" So I'm really excited today to share with you something that we've spent the last few months building that we're going to be sharing with the community, and that is a new version--brand new, built from the ground up-- of ThemeRoller for jQuery Mobile. [applause] Those of you familiar, when you create themes in jQuery Mobile, you have swatches, and the swatches can be applied to the different components that you have in your project. And so when you come into ThemeRoller, you've got a very nice, easy way just to drag colors directly out and start basically changing what those components look like. So you can drag some colors out here, you can just put a few things in here, get a different look and feel. On the left here what you'll see is actually the CSS properties that you're changing as you drag these colors out. ThemeRoller is kind of smart. You notice I put a red color on the button here, but you'll notice that the hover color is actually different. ThemeRoller made a little bit of a decision for me there to help make it highlight. But of course I can go in there and I can actually open that up, I can change that color to be something else. Let's put it in yellow or something. And now you'll see that that hover color actually changes. So it's quite an easy way to get started as I'm building out my themes. You can probably tell I'm a little color challenged here. I'm not a designer, but it would be really nice to be able to get access to design palettes that designers do create. I think you guys know there's a technology out there that does that. It's called Kuler. So we thought, "Why not actually integrate Kuler directly into ThemeRoller?" So I can actually now pull up a Kuler swatch, I can see the latest Kuler themes and swatches that have been created, I can search for them, I can go into the most popular, and I can actually drag right out from there and actually create my color theme directly using the Kuler colors. [applause] When I've created a theme and I like what I've got, I can choose to share it. I can actually make a copy of this and then I can share it with somebody else that I'm working with, and we can actually work on that theme together. And then of course when I'm finished, I can download the theme. Here is all that CSS that you would have been writing yourself had you not had ThemeRoller to help you get started. And of course you can continue to tweak once you add it to your application. So that is ThemeRoller for jQuery Mobile. We are really excited about it, and it'll be available within a couple of weeks to everybody, and we hope you guys enjoy it as much as we've been enjoying building it. [applause] Being Adobe, we also work with designers, and we actually know that designers like even more control over their content. And so we thought to ourselves, "Wouldn't it be good if we could give designers "a way to theme jQuery Mobile in a tool that they might use?" And I think some of you guys probably use Fireworks for doing some web design work. [applause and cheering] Those guys right over there. We put together an update pack for Fireworks, a CSS3 update pack, and of course it has jQuery Mobile theming in there, and this is what it looks like. You can come on in, and you can go up to your commands, and you can choose to create a new theme. When you do, you get something that looks a bit like a spec sheet. And what's nice about the Fireworks work here is that you actually get control to the icons that are loaded into the sprite sheets that jQuery Mobile is using. So you can get in here, you can make changes to the icons. Of course you can go in and you can create your own swatches-- all the same type of stuff you did in ThemeRoller, but you've got all the tools available to you that you have in Fireworks. And when you're done, you can export your code out, stick it into your application, and use it again. So for designers that is the new update pack for Fireworks. [applause] Those are just some of the ways that we're working with frameworks. The team that has been working on jQuery Mobile 1.0 is already looking at the next version of jQuery Mobile. They're going to be actually prototyping a lot of really cool stuff with tablet UI and interaction, so I'm sure they're going to be excited and you guys are going to be excited to be able to get that soon as well. So along with frameworks, we are really excited about the work that we're doing with browsers. Browsers really are the runtime for the Web. They set the bar in terms of what you're able to do. Last year on stage we had Kevin Lynch, who was up on stage again, and he was showing you some of the things that we were doing around layout in the browser. Layout is an area that we certainly know well, so we thought that was a good place to start. And if you guys remember, he actually had a magazine look, and he had a giraffe in there, and he moved it around in the web browser and all the text flowed around it. So we've been spending quite a bit of time working on that. It actually turned into 2 proposals that we have submitted to the W3C. One is called CSS Regions, and the other is called CSS Exclusions. Let me show you guys a little bit about what that looks like. CSS Regions. The idea here is you've got these different regions that you can set up in the browser, and you can see that they're actually unequal lengths, and it would be great if the text could flow through those. You can see I've created these regions using CSS, and as I move the browser in, you'll see that the text actually flows between all 3 columns, even though they're uneven. We thought that would be great if we could also do that with content order. Sometimes your content in a magazine lays out in a different order than just left to right. So here we've got content order 1, 2, and 3, and as I scan that down you'll see that that actually moves in and it moves the way you'd expect. That was some of the regions work. But then we also thought about exclusions. Imagine you've got a magazine, you've got a callout in the middle of the page, and the text has to flow around that callout. That would be very hard to do in a browser today. So how would you make that work? With CSS Exclusions you can use CSS to define an exclusion on the page or something that would hold in the content. So in this case here I've got content in the shape of a circle or a heart. In the exclusion case I can actually have a star in the middle of the page. As I scale that star, you'll see all that text floats around the star, which is pretty cool. I can change that to a different shape, it could be a picture of an image, something else. What really gets interesting is when you start seeing this actually within something that looks good, like a magazine or something that would look like an article. Here we've got the Hidden Costs pie chart, and this is actually a viewer that we just built to show kind of what this might look like on different screen sizes. You see it adapts to those different screen sizes. Let's do a Galaxy tab desktop view. You'll notice that they've got a pie chart here. It might look a bit like an image, but it's not. This is actually live text using regions. This is searchable, SCO-friendly. Then let's take a look at exclusions. I'm going to go down to this last one here. This is an area where we're using exclusions. You can actually see we're using exclusions to have the text wrap around the mountain. As I pull out the car, you'll see that that text flows right around the car as well. So that's CSS Exclusions at work. [applause] You guys like that? [applause continues] So we're very excited about those. They've been proposed to the W3C. In the case of CSS Regions you can download the latest version of Chromium and you can get it right now today. In addition, Microsoft is saying that in IE10 they've supported CSS Regions as well, so you'll be able to get that. And of course we're working closely with WebKit and the vendors on CSS Exclusions. One of the questions that we get a lot as we're doing this type of work, especially from people who want to use it, is, "When can I use it?" "How fast does this stuff actually get into the browser so that I can work off it?" "What is the speed of the Web?" I thought it would be great to actually bring up an expert that could talk to us about this today. This is somebody who it's their day job thinking about how to build the Web as a platform, how to make it move faster. He spends quite a bit of time with the Chrome team. I'd like you guys to give me a warm welcome for Director of Product Management for the Web Platform at Google, Ian Ellison-Taylor. [♪♪] [applause] Ian, I should have given the correct title. I'm sorry. It's Director of Web Platform Stuff at Google, yeah? Yeah. Good to be here. >>It's good to see you. Ian, we go back a ways, actually. We've been working on a number of projects together. We worked on some of the CSS stuff I just showed, and also some of the Flash to HTML5 conversion technologies like Wallaby and Swiffy. I feel I know you well, okay? And I'd like to put you on the spot because I know you well. I'd like to ask you the question that I think the whole audience is waiting to hear. With all the announcements today and everything else that we've been talking about, will you, Ian Ellison-Taylor, be purchasing an iPhone 5? [Ellison-Taylor laughs] Not fair, not fair. No, thank heavens. I'm a diehard Android fan, so I'm safe from that one. >>It's a no? That is a no. I'm sorry, Apple. You make lots of great products, but the phone is not for me, not for me. [Ian Ellison-Taylor - Director of Web Platform Stuff, Google] [Gubbay] Gotcha. >>Not fair. [laughter] So Ian, seriously, speed of the Web. It's a fair question, right? I know you spend a lot of time-- You have a particular vantage point here working with the Chrome team and others. But maybe you can just tell us a little bit about how fast do these things actually get into the browsers, and what can we expect that cadence to look like as we continue to move forward? >>Yeah, sure. It really is a great question, and it comes up a fair amount. This year I think has been a fantastic year. There's been so many wonderful technologies that have arrived as part of HTML5. There's the WebGL work and Canvas 2D, WebSockets--a ton of stuff. Some of those technologies have honestly been many, many years in the making, so I understand the question. But in large part, those technologies have formed a great foundation, so the sort of next generation of technologies are progressing at a much, much faster pace. The CSS Regions example you showed just a second ago is a classic example of that. It happened very quickly. It was one of those things that appealed to kind of everybody. It was like an obvious need. And not just Google but all the other vendors and the members of the standards community sort of banded together, and so we pushed it through very quickly. So that's why it's great to see that in Chrome. And you can use it today. It's fantastic. I love it. >>[Gubbay] Yeah. That's great. There's 1 piece of things which is just sort of improving what the browsers can do. You guys also spent some time actually working in the tooling around the browser as well. What's your take on that, and what can we expect as you guys continue moving forward? I think tooling in Chrome and WebKit in general is sort of the unsung hero of the platform. We've made tremendous progress over the last year listening to developers and designers and people like you in the audience, trying to get insight into the things that are hard to diagnose: performance issues, scaling, and event handlers. There's an amazing set of new features in the tools, and I think the developer tools that we've been baking in to the browser mesh very nicely with the kinds of tooling that you've been showing today. So I'm very, very excited about how it's all going to come together in the weeks and months ahead. It's fantastic. I bet there's some things we could probably do around that time-- I think there probably is. We should talk. >>Yeah. We should talk. That's a good idea. I think when we talk about speed of the Web we have to talk a little bit about Flash. Flash has played this incredible role of driving innovation on the Web for years and years and years, really just taking things that people didn't think were possible and making it possible. And we started thinking about that, and we started thinking about, "Gosh, we have all this expertise and this rich expressivity "in the types of things that you can do." "Wouldn't it be great if we could take some of that and bring that back to the browsers, "actually innovate quickly in Flash and take that--" Equally excited about bringing that back to the browsers and being able to make it available for folks that are using web standards as well. So we've actually been working on something like that. I actually have a couple of demos, if you're interested in seeing them. >>Absolutely. Are you guys interested in seeing a few demos like that? [applause and cheering] I can actually tell you Ian has not seen these demos. We purposely made sure you didn't see these demos. >>They kicked me out of the room. We kept him out of the loop. One of the technologies we actually talked about on this stage for Flash a couple of years ago was Pixel Bender. Pixel Bender was quite a breakthrough. It was really sort of cinematic visual effects and filters. And we thought to ourselves, "Wouldn't it be great if we could take that "and bring that back to the browsers?" And then using something like CSS, you'd be able to apply that directly to elements in the DOM. And so we're calling that CSS shaders. For the first time for Ian and for many of the folks here, I want to show you CSS shaders. Ian, what I've got up here is I've got-- actually, this is just basically HTML text, an image, and an SVG animation. We applied a shader here so that when I move over this on the hover effect the CSS is going to apply with some of these shader filter effects. And so I'll just move that over. >>Nice. That's pretty sweet. [Gubbay] It looks kind of cool, huh? >>[Ellison-Taylor] That's nice. [applause] [Gubbay] Very, very simple to do. Let me show you a couple more examples. I'm going to go to the flip book here. You can imagine each of these like a separate web page, and I'll just run through these. As I move them by, you'll see there's that cool motion there. But maybe if you didn't see that properly, let me just bring that into slow motion for you so you can actually see those pages as they're opening up. [Ellison-Taylor] That is beautiful. That is gorgeous. [applause] [Gubbay] Just CSS, baby. Just CSS. >>[Ellison-Taylor] Very nice. [Gubbay] Just to show that this is really actually working on what we're seeing there, let me come back one here, and we've actually got an HTML5 video. Let's run that video. Oh! There it goes. CSS shaders working directly on that video. Pretty cool. You see it, then you go back. You see it, then you go back. [Ellison-Taylor] Now I know why you wanted to keep that secret. [Gubbay] Yeah, that's right. >>[Ellison-Taylor] That's awesome. I love it. [Gubbay] I've got a form here. I can click in the form, send someone some garbage. I've got SVG animation. It all works directly with the shader effects right there with CSS. Let me show you the last one. You guys have some experience with maps, right? >>[Ellison-Taylor] A little bit. Maps is something you guys do, right? And Google Maps, great, good stuff. You guys have done good stuff, very functional, very rich. But we were thinking, "Wouldn't it be cool if we could make that look just a little bit prettier, "a little bit of a nicer experience?" So the team actually created a version--this is actually a live Google Map. It looks a bit like the Marauder's Map from Harry Potter. As I hover over that, that actually opens up, and that is a live Google Map right there with a CSS shader effect. There's the regular map view. I come back out, and it actually rolls right back up again to a map. [Ellison-Taylor] Beautiful. Very nice. [Gubbay] I can actually go into Page Source there, and you can see it's very, very simple stuff, just a couple of extra values being passed into the WebKit filter property and of course a whole bunch of code in WebKit that we put in there to allow this type of stuff to happen. We're pretty excited about CSS shaders. I'll actually tell you the team that's working on this stuff, they're very excited, and they actually built this little studio for themselves. And it's not surprising often to walk down the hallway and all day long they're just in this little studio. It kind of looks like this, and they've got this little studio they've built here, and they can apply different effects, they can go in and create a little warp effect for themselves. They spend all day doing this. So anyway, folks, that is CSS shaders. Very, very excited. [applause] [Ellison-Taylor] That's impressive. [applause continues] This is brand new. We just submitted this to the W3C, co-edited it with Opera and Apple. Do you think the Chrome team might be interested in something like this? I think. Yeah, maybe a little. >>Good. This is exactly what we want to see out of the Web. This is fantastic. These kind of things just really change the game. It's fantastic. It's gorgeous. Yeah. That's great. We're really excited to be working on this. That model I was talking about before, this model of sort of really innovating quickly in Flash, being able to pull that back to the browser, that's something we're actually pretty excited about. And rather than just talk about it, I bet you guys--and Ian maybe yourself-- would like to actually see some of that innovation I'm talking about. We think one of the really great areas of the Web to innovate in-- and I'm pretty sure you agree with this--is 2D, 3D graphics and animation. And so to show us a little bit more about that, specifically around the gaming area, I'd like to welcome to the stage Group Product Manager for Adobe Gaming Emmy Huang. [♪♪] [applause] [♪♪] [Huang] Thank you, Paul and Ian. Well, how was that? Isn't it great to see how Adobe is using our expertise and contributing that to moving the Web forward through standards? What I'm here to talk about today is how we're going to continue to move expressiveness on the Web forward through Flash. [Emmy Huang - Group Product Manager, Adobe Gaming Solutions] We're driving the next generation of gaming and other immersive Web experiences with a new rendering pipeline that will deliver significant performance by directly leveraging the GPU across devices. We're delivering these experiences in Flash today, but we'll also work to standardize similar capabilities in HTML for future browser implementations. Although the buzz has been mostly around 3D, we'll get to that in a moment. First I want to talk to you about one of the ways that you can leverage Stage 3D and the GPU for vastly improved 2D graphics performance. We recognize that 3D is not for everything or everyone and that some of you were a little disappointed when you saw the low level Stage 3D APIs, so Adobe sponsored the development of a new open source 2D graphic framework called Starling, which allows you to easily and intuitively leverage the GPU for your 2D graphic content. This is so easy, and it leverages the display list concepts that you already know, that all you have to do is swap out the Flash API calls with the Starling equivalents, and you're basically done. In fact, we're going to make developing for Starling even easier with the next release of Flash Professional, code name Reuben. With Reuben you'll be able to export sprite sheets directly from the tool for use in any game. This is an essential asset for games, so let's take a look at how this will work. Here I'm going to open up for all the Molehill fans a little mole. This is my mole digging symbol. It's a movie clip. I'll just play it for you so you know what the animation looks like. It's a pretty basic short animation. This is vector-based, so it runs on the CPU. But since we're going to be using the GPU in Starling, we actually want to convert this to a sprite sheet so that we can apply it to the movie clip. So here you see the Generate Sprite Sheet option, and here we have the Export dialog. With this Export dialog you'll be able to change things like the image size-- we're going to leave it default-- the output image format, your algorithm--we'll leave it at basic but actually trim some of the white space. And here you can see that we're targeting sparrow. We'll go to Starling here. But you can see you can also export to JSON or XML, and you can actually write your own custom data export format using JSSL. Go ahead and select Starling here and save it. Now we'll go to the desktop and take a look at our resulting sprite sheet. So there you go. Twenty frames in animation exported directly from Flash Professional. [applause] So now let's actually apply this in our Test Movie in the browser and take a look at the performance. Here we have our mole digging at 60 frames per second, running on the GPU. So that's okay. It's just a single movie clip. I'm going to go ahead and add these particles. These are particles that are done with Particle Designer, which integrates very well with the Starling framework. To get a little bit crazier, this is 400 Starling movie clips with random frame rate, random rotation, and random scaling applied. You can look up here. It's still 60 frames per second. [applause] With Reuben you can use Flash Professional to easily create sprite sheets for use with any framework, whether you're targeting Flash, AIR, HTML, or other native mobile frameworks. Next let's see how one company is using Starling as it delivers its birds to nearly everyone on the planet. Please join me in welcoming General Manager of North America for Rovio, Andrew Stalbow. [♪♪] [applause] [♪♪] [Stalbow] Emmy. >>[Huang] Hi. >>[Stalbow] How are you doing? [Huang] Great to see you. Thanks so much for joining us. >>[Stalbow] Thanks for having me. Rovio has worked with many technologies as it's been delivering Angry Birds across platforms, from native mobile development to HTML. How do you see Flash fitting into Rovio's overall strategy? For us, our goal is to deliver Angry Birds to every device, platform, person around the world. We've got great reach, and on our various platforms so far we've reached over 400 million total downloads. We've also got great engagement. Our fans spend approximately 300 million minutes every day playing the game. [Huang] Wow. [audience laughter] That's amazing. That's a lot of free time. [laughs] [Stalbow] We've also built a strong brand that's allowed us and affords us the ability to try new things. So we're moving into short-form video animation and are focused on our movie as well. [Huang] Yeah. I can't wait to see the Angry Birds movie. I'm sure that will be really exciting. We're really excited about working with Flash 11 to reach a whole new audience. What are some of the capabilities of Flash that really excite Rovio as you look to broaden the reach of Angry Birds across the Web? Today we're proud to show you a brand new Angry Birds engine that's built on Flash Player 11. For Rovio and for us, it's all about the user experience. We just want to deliver a brilliant experience for our fans. And I think we're able to do that and deliver a new and unique experience that consumers haven't seen before. I'd say Flash is really important to us because it's going to help us reach social networks, whether domestically or internationally. And really for us, we can use the power of the GPU to really enhance our 2D experience so that we can get the best performance and visual effects for fans of Angry Birds. [Huang] All right. Let's show all the Angry Birds fans out there what's coming next. [Stalbow] This is an early look at what we've got in development. We plan on bringing the full game experience to Flash in the next few months. [Huang] Turn it up to 11. [chuckles] [♪game music playing♪] [Stalbow] We're really excited about taking Angry Birds to Flash 11. Just as an example, we've got 5 times more particles in our explosions and special effects than we have ever had before, and I think you saw an example of that there. [♪♪] [Huang] 2 has 3 stars, so let's play level 2. My son is going to be seeing this later, so I need to put in a good performance. And as I have played this game lots of times, I'm expecting great things. The Starling framework really allows us to create great special effects. I think the new explosions, smoke, lighting effects that you're going to see here, many of those are thanks to that, and it really enables our game to run smoothly at 60 frames per second. Let's see how I-- Typical. Big audience and I muck it up. [Huang] There we go. We had a little cheat button. [laughs] [applause] [Stalbow] Your kind applause is appreciated. We're very excited about bringing this experience to Flash. The new features that we're planning include new levels, new objects, new backgrounds, and we love developing on Flash because it just provides a really consistent experience for our fans, and everything we do is focused on providing them a great experience as we grow our business. [Huang] That's really great. As you know, Adobe is also very much about user experience. Thank you very much for joining us. We can't wait to see this new Angry Birds hit the Web. Thanks so much. It's great to be here. >>Thank you. >>See you. Thanks. [applause] Now that you've seen how to leverage the GPU for 2D content, let's talk about how we will change the Web with 3D. One of the innovations we want to drive through our work in Flash is to help deliver powerful 3D capabilities that mirror the experience you get on a game console. In fact, we believe Flash is the console of the Web today. Let's take a look at some examples that show you how 3D on the Web is real. I'll start by showing you how Stage 3D is advancing the level of graphic quality in game experience on the Web. This is a demo level of Tanki Online, which is currently a game that targets Flash Player 10, and they are now transitioning over to use Stage 3D in the GPU and really up-leveling the production level for this game. It's a multiplayer game that supports millions of players that battle each other on a virtual battlefield. So let's take a little bit of a tour. [tank rumbling] I'll go out here in the sunlight so you can really get a sense of the tank. We'll take a little pause here and just take the camera around. Look at the rich details. There's graffiti. The city has really taken a beating. I'll free up the camera here so that we can kind of-- Oh! Look, there's a plane crash, some really great reflections up here, and of course 1 last thing since these guys added it for me: a flamethrower. [laughter] [applause] Everybody has to have a flamethrower, right? You can see with the GPU, Alternativa can now support over 3 million polygons and modern effects such as lighting, advanced materials, shadows, and particle effects. One more time. [chuckles] Just to show you that 3D isn't just about gaming and blowing things up, I do want to show you another example, which is the Nissan Juke new car configurator. This is brought to us by Digitas France and Nissan Europe, and this is a great example of a branded experience that's leveraging 3D and certain aspects of game experiences to really bring a memorable and engaging experience to the Nissan customer. You can see here that I can change the color-- and this is an effect that I really love, if I actually picked a different color. There we go. That's a nice color. And you can actually take a little bit of a tour. This is basically like an exact 3D model of the car. You can zoom in here, and look at the detail here because you know the taillight is very important when you're driving. Got to make sure it works. Now we'll come back around over here and open it up. This is really great if you're like me. I don't really like to go into the car showroom, so I can kind of take a look in here and see is this the type of car that I might want to actually go in and test drive. I can take a look back here. Yep. It's got enough room for all my friends. So now let's take it for a test drive. The object of this game is to collect all of these energy balls. There's 94 of them, and I'm not that good of a driver on this game, so I highly recommend that you go and try this out for yourself and see the surprise at the end, because this site does actually launch today. All right. Here we go. Wish me luck. [engine revving] You can see the speed and the quality. This is a really nice experience for Nissan to be delivering to its customers. I'm actually going to drive off into the sunset here. I can move this camera around. Look. I'm basically doing a really fancy car commercial all in the browser. [car revving] There you go. [applause and cheering] Thank you. I get all the fun demos. [laughs] That's just a tiny glimpse into what 3D on the Web is going to look like. We're really excited about the opportunities this is going to create for everyone. Before I go, I want to leave you with something that will truly stretch your minds to imagine the possibilities. We've come a really long way since we first demonstrated Quake running in Flash in MAX 2007. I don't know how many of you remember that. It was a pretty pivotal moment for us. But I want to show you just how far we've really come. Please welcome Founder and Technical Director of Epic Games Tim Sweeney and senior programmer Josh Adams. [♪♪] [applause] [♪♪] Welcome, Tim. >>[Sweeney] Thank you very much. [Huang] Thank you for joining us. Gamers in the audience already know who you are, but for everyone else that may not be as familiar, can you tell us about Epic Games? Sure. Epic develops leading-edge games and engine technologies. We're known for Unreal Engine 3, which powers games such as Mass Effect, Infinity Blade, and Gears of War 3, which we just launched for Xbox 360. [Tim Sweeney - Founder and Technical Director, Epic Games] [Huang] And 3 million copies sold in the first week. Congratulations. >>Thank you. [applause and cheering] Epic has always been known for raising the bar and really pushing the boundaries in the gaming industry. How do you see Adobe and Epic together raising the bar on the Web through Flash? We've always loved Web games. We've all played Bejeweled and Farmville, right? The Flash Player now upgrades the Web to a triple A gaming platform capable of running high-end games with world-class graphics. Here we're going to show you the combination of Unreal Engine 3 and Flash together with Josh Adams driving a demo. We're starting with the Unreal Editor, which is a content development tool for triple A games. We're looking at a level from Unreal Tournament 3, a game that we shipped for Xbox 360 and Playstation 3. And now with just a few keystrokes later, we can play this on the Web with significant visual upgrades. [Huang] That's really impressive. What's going on here? [Sweeney] It's pretty amazing. Unreal Engine 3 is a million lines of C++ code, and we're now taking advantage of Adobe's Compiler technology to compile this code to run securely within Flash. Flash provides a modern shader-base graphics library comparable to OpenGL that enables us to access the full hardware-accelerated power of a modern PC. Overall, the performance is high and the code is compatible across browser and with all of the major platforms. [Huang] That's really amazing. But I think that probably a lot of you out in the audience think this might be a video and not a real game, so Josh, why don't you play a little bit. [♪game music playing♪] [audience cheering] [explosion] [♪♪] [explosions] [Huang] What do you guys think? Pretty amazing, huh? [applause and cheering] We are definitely excited to be working with Epic to deliver this new wave of fidelity and quality for the Web. Thank you. Thank you very much. >>Thank you, Josh. [applause] As you can see, Adobe and our partners are truly excited about 3D and the opportunities it represents for the Web. And you can create these 3D experiences starting today using tools and frameworks from the community and our partners. We expect you will fully push the boundaries of this technology, and we can't wait to see how you're going to change the face of the Web. And now I'll hand you back to Danny Winokur. [♪♪] [applause] [♪♪] So what do you think of that? Unreal Tournament playing inside the browser. [applause and cheering] I bet you didn't think that was possible. We ourselves even had doubts. And the folks at Epic did an amazing job working with us and our engineers to create that unbelievable experience, which we're confident is going to introduce a completely new world of 3D innovation on the Web and a new world of gameplay that can really transform the gaming industry and transform the Web. I hope you've been as inspired as I have been this morning by all of the different things that you've seen that have ushered in a new era of innovation in content creation and publishing on the Web and through mobile app stores using your choice of technology. Whether you choose to use HTML5 or to use Flash or to use them in combination, all of that is now possible, and you can deliver amazing and rich experiences that absolutely blow your customers away. A few last things before we wrap up. I promised you at the beginning that we were going to give you a link at the end that you would be able to follow to get access to all of the technology that we showed to you here this morning. That link is here. Feel free to go there now. You can get downloads of all of the different things, whether it's the new versions of the Flash Player and AIR runtimes, the work that we've done in the jQuery 1.0 release candidate, the current version of PhoneGap, the new preview release of Flex 4.6 with Flash Builder, the new Adobe Edge preview release that you saw today. All of those things you can access at this link, and we'd love you to do so. Begin experimenting with them, playing with them, and giving us your feedback. It's an amazing, amazing time of innovation for both applications and the Web. Last thing before we wrap up. Don't forget that here in the Nokia Auditorium tonight we're going to have the MAX Awards followed by Sneaks. We really want to see you here. There's going to be some amazing things that you're seeing tonight, as well as a very special guest. And then after that, of course, we'll have tonight's party. I look forward to seeing you there. Thank you very much, and please enjoy the rest of MAX. [applause] [♪The Black Keys - "Howlin' For You" playing♪] That was pretty awesome. >>Oh, my God. That was pretty awesome. Where do we start? >>Yeah, yeah. Wow. >>Yeah. We noticed a little trepidation throughout this keynote talking about where is Flash going to be, what's Flash going to be? I thought that was a great way to cap it off. And then that-- >>Unreal in the browser. >>Oh, my God. Yeah, yeah. >>Actually, Yvonneski, he tweeted, "Emmy is rocking the stage "with Stage 3D demos." And he wasn't kidding. So thank you for that tweet, Yvonneski. And we've been talking about Stage 3D for a while, over the past 6 to 9 months, and so, yeah, now that it's finally released with Flash Player 11 and AIR 3, the demos are coming out and we've got a lot of really great partners who are building content. So I'm stoked about Stage 3D and what it means for Flash developers. And to end day 2 with that. I hope you guys are happy. We are happy. >>Yep. And a sneak peek at Flash Professional, the next version. Those sprite sheets are amazing. >>Exactly. >>Absolutely. I wrote down a whole bunch of things. Actually, Chubby Ape Games, he tweeted that he was watching online, wising that he was here because he's excited about the future of Flash. Next year, October 20th through 24th, be here. >>Yes. We have the man from the keynote himself. Danny, how's it going? Doing great. >>So what was your favorite part of today? You had sort of a hand in planning all this, all leading up to this morning. What's the favorite part? I thought that the best thing was being able to show the crowd how with both HTML5 and Flash we push new boundaries that are creating a level of expressiveness and richness and interactivity that just simply hasn't existed before, whether it be the CSS shaders demo that I think blew people away with those pages floating off and the map unfolding or whether it be the fact that you can play Unreal Tournament in a browser using the latest capabilities of Flash Player 11. One of my favorite parts is that we've always tried to do a pretty good job of bringing Flash Player innovations to the wider Web, but now it looks like we're working directly with partners in a pretty significant way to push things like Pixel Bender into the open Web. Yeah, that's absolutely right. We've been working very closely with key partners, as I mentioned on stage, folks like Microsoft, Google. You saw Ian Ellison-Taylor out there today working closely with us on the Google front with Chromium. And even Apple. We've been working closely with them. They're a co-editor on one of our proposals that we've made to the W3C. Yeah. That's exciting. >>Absolutely. Lots of people are excited about the PhoneGap acquisition as well. In fact, Janet LT Designs, she tweeted that you can now actually build games on HTML5 as well, which is also pretty amazing. That's right. >>With PhoneGap, obviously. Absolutely. You sure can. Let's see what else we have here. The contribution to the Apache Foundation also got a lot of very good tweets. Can you tell us a little bit more about that maybe? >>Yeah. We're absolutely committed to open source and committed to keeping PhoneGap as an open source project with an open governance model. As Andre talked about on stage, we think Apache is one of the best open source projects where some of the greatest work and greatest open source projects are done, and so we're super supportive and very excited that PhoneGap is making that contribution to Apache. And is some of that the infusion of the Day DNA or the acquisition of Day and some of those guys? Yeah. It's a great point. The Day Software team that we acquired as part of that acquisition some months back are leaders in Apache, and they've definitely been a strong and really positive influence in helping Adobe to get closer to Apache, understand that process, and we love what we found there and are absolutely enthusiastic about continuing to support it with PhoneGap. That's cool. I think there's some exciting stuff. If you're an open source fan, I'm excited to be an Adobe employee because yeah, we're really doing a lot of good stuff with open source. Yeah. It's a super exciting time right now. Things are moving forward on multiple fronts, people can mix technologies, and they can do whatever is right for their project, so we're very excited about it. >>Danny, thank you very much for joining us. Thank you, guys. >>Any tips for people that are watching at home as far as the best reason to come to MAX? Oh. I think there are a wide variety of reasons, whether it's that you want to see the latest technologies and understand where the industry is going with respect to expressive content or whether you want to get educated and actually learn how to use those technologies. We have a range of really wonderful technical sessions that teach you how to actually use the technology and have all the experts from Adobe that actually built the software. Cool. >>Great. Thank you very much. No, no, no, no. That doesn't work. We have to high five. I like that. >>All right. Sweet, Danny. Thanks. >>Thank you, Danny. Speaking of those sessions, those are all going to be available online eventually. So at max.adobe.com/online those will be available, all the sessions eventually down the road over the next--I don't know-- few weeks or couple of weeks. But there are the 3 top sessions every single day are going to be added on demand that day, so you'll be able to catch the top 3 sessions from the Envision track, the Design track, and Developer track on max.adobe.com/online In the next 24 hours you can watch this again if you want to see it again. I know I want to see it again. >>Shaders, PhoneGap-- It was a big day. It was a big day. Completely blows my mind. >>Fireworks even got a little plug, so yeah. For Fireworks fans out there, if you didn't see the Fireworks section, there's a little bit of Fireworks in there. Ryan, what do you think? Should we do this again next year? I think we should do it again next year, yeah. >>But you know what? Why don't you tell us? If you want to do this-- Yes. We would love to have you come here. Yes. >>All right. Excellent. October 20th-24th? >>Yes. Back here in Los Angeles, back here in the Nokia Theatre. See you next year. Thanks for tuning in. Thanks, guys. And thank you, Serge. High five. Yeah! That wasn't even awkward. Great. Thanks, guys.