Adobe announces Flash Catalyst, Facebook connection

Sound effect

Speaker: The two things that we're -- I'm gonna be showing you is, first of all, how you can take a picture, which many people design an application using an illustration tool or a painting program, and turn the picture into an interactive application. And also, this week we combined API with slash platform and Facebook, so I'll be using that as part of the example. So let's go right into the machine here. And what I have here is a design of an application. And this one is being drawn in Illustrator. Today, many applications are created by drawing a picture of them using something like Illustrator or Photoshop or something else. And you can see here, I've got fonts and different shapes, and what looks like a button here is really just a little text element and an outline that's colored here, blue. And now, the challenge today is that people take these pictures, and they give them to a development team and say please make one like this. However, there's often a loss of fidelity in that process. So what we're doing here is working on how we can really combine design and development more smoothly. So I'm gonna switch over to an application we're developing right now called "Flash Catalyst." It's in development in beta right now, so it's not out yet. But this is how it works. You can, basically, import a design from the picture, like from Illustrator, the one we were just looking at. And it's going to bring those shapes in to Flash Catalyst and turn them into through beginnings of an application. It's actually converting the shapes into flex, and then we'll be able to turn that picture into components and interactivity. And so what that means is that we can enable people who do design to express not only what an application should look like, but how it should feel to interact with. And I can select items like the fill color here, and I can fill color solid if I want to. I can type in an X value, or I can click on a color. You can see I can make it kind of orangish. And now I've actually edited that button. And let's go look at how this is coming along. So, I'm gonna preview this inside a web browser, and we should see the picture come up. So here's the picture. And right now I can't click on anything else. The scroll bar doesn't work. It's all kind of dead right now, except this button, which is now turned into a live button, which I can now click on. So the illustration is starting to come to life. So now, the next part is -- this is actually generating flex code in the background. And you can go, and you can look at the code here in Flash Catalyst if you want, and you can see what it's generating. But the cool thing is now I can hand this code over to the development team, and it includes not only the expression of what things look like, but all that interactivity is already there. So what I get inside Flex Builder, which I'm using here now, as a developer you can see I've got all the different graphical elements. I've got the different states that I've defined, three states here defined in MXML. I've got all the design layers. I can connect events to these things. I can now go to town writing code to show how this will actually connect to Facebook's APIs. And here, you can see, is some example of doing that. You can basically use Facebook Events, which are a model now inside of Flex. And you can subscribe to them. And you can do things like, you know, when you log in, get an event, show an alert on error, things like that. So very easy now for a developer to take that user interface with the interactivity and now connect it to the back end, the business logic or the server side. And now let's see what that looks like when it's actually running. This is the Julia Child part, where now I've got it all hooked up. So this is the friend directory app that I just showed the picture of, and now I can search for a friend of mine. I'm signed into my Facebook account. There's Tim O'Reilly, so it pulls up information from the Facebook feed, shows it in the user interface using the transitions I defined from Illustrator to Catalyst. And I can look at our friends that we have in common. Here's the scroll bar, which is now working as we defined inside that illustrations. And here's clicking to go to another friend, so you can add more interactivity, if you want to. So you can navigate around here and build a working application from a picture to interactivity to connecting to the back end. So this is using Flex. Flex is Open Source. It's free. You can go to Flex.org and see more about it. And Flash Catalyst is in Beta right now and coming out soon.

Sound effect

==== Transcribed by Automatic Sync Techologies ====