Platform Evangelist Ryan Stewart and Product Designer Narciso Jaramillo provide a demo of Adobe Flash Catalyst, a powerful tool for creating application interfaces and interactive content — without coding.
Julie Campagna: Hi, I'm Julie Campagna, I manage the Edge newsletter. Today, I'm with Ryan and NJ and they are here to tell us about a product named Flash Catalyst. Now, you might remember, about 12 months ago, we did a video about a product code name Thermo. Well, Thermo is now Flash Catalyst. So, Ryan, my first question for you is, why did we name it Flash Catalyst?
Ryan Stewart: Yeah, so at MAX, we reintroduced the Flash Platform, and Flash Catalyst is just the latest member of the Flash family. We've got a series of tools, developer and designer tools, that target the Flash Platform and it's really targeted at interactive designers who want to create application interfaces or interactive content without the need to write any code.
Julie: Great. So, you know 12 months have evolved and what has happened in 12 months?
Ryan: Yeah, a lot has happened over the last 12 months. One, we really laid the groundwork for Thermo, so there are a lot of changes inside the Flex framework that we had to make, because we really wanted to make the Flex framework easy and more accessible to designers. And we also really focused on changing the user interface inside of Thermo so that it would look and feel exactly like a Creative Suite tool. So, we spent a lot of time doing that and now all the parts are in place and so we are basically ready to roll.
Julie: So, NJ you are going to be providing the demo, what are you going to show us?
NJ: Well, I am going to show you the kinds of things that we've been talking about, both the workflow with the Creative Suite tools. I have a design that I've created here in Photoshop, it's just pure art work. I'm going to take that into Flash Catalyst and add interaction to it, to make into a real working design and show how it is working back and forth with Creative Suite and then show how under the hood, this is creating Flex code the entire time. You can take that code and directly hand that off at the end to a developer who uses Flex Builder.
Julie: Great. Well, let's get started.
NJ: What we are going to do is start with this design that I created in Photoshop and you can see here that the different pieces of artwork are organized into different layer groups and we are going to turn those into different interactive widgets in Flash Catalyst later as I have some hidden content here. So, let's go to Flash Catalyst and I'm going to directly import that Photoshop PSD file into Flash Catalyst and I'm going to choose to accept the default options here.
Ryan: And Flash Catalyst is actually going to maintain that exact same layer and folder structure that NJ showed you in Photoshop. And what it is importing now, it's actually generating or creating that well-- formed Flex MXML code because we are just working on a Flex project here.
NJ: That's right. So, I'm going to go ahead and turn on Auto Effects -- we will see how that gets used later. And you can see here that on the art board, we have got all these artwork exactly the same way it was in Photoshop and we can see the layered structure here is the same. So, I'm going to go ahead and drill down here and I'm going to show this map. So, what I want to do first is I want to make it so that the user can click on this little tour finder here and have that slide the map in. So, what I'm going to do is I'm actually going to create a new page here in my design and a page is really just a location that the user can go to as they interact with us.
So, on the first page, I'm not going to show the map, but on the second page I'm going to show the map, so I'm going to turn that on here. And then on the first page what I actually want to do is, I want to make it so that the map starts off to the right and then slides on as we go to the second page, so we can create a nice smooth transition there. So, I'm going to show the map here, I'm going to group it just to make it a lot easier to work with.
And then, what I'm going to do is, I'm going to take the map on the first page and I'm just going to drag it all the way off to the right here, off the art board. So, I have got it over here and then I'm going to hide it. So now, if we take a look at the Timelines panel, we can see that Flash Catalyst has automatically created a default move and a fade effect, so that if I hit the play button here, we get this nice smooth slide on.
Now, I want that to be a little bit slower, so I'm just going to grab this move effect and I'm just going to resize it to be one second long. And then again, I'm going to play it and now it's a little bit smoother. So now, I want to make it so that when the user clicks on this mini map, that we go to that second page, so I'm going to select the artwork for the mini map and I'm going to convert it to a button.
Now, one of the things about Flash Catalyst is that you can create these interactive widgets or components, but they don't look like components that come out of a normal developer toolkit. You can take any freeform artwork and convert it into an interactive component really easily, just like this. So, when I take this fore finder button and I'm going to give it the custom interaction, on click interaction, play transition to say page two.
Now, if I go to page two, I have the map here and what I want to do is, I want to make it so that the user has a control where they can zoom in on the map, and I have the artwork for that control over here in Illustrator. So, if we look at the artwork here, you can see in the layers panel that it's really just a bunch of vectors with some gradients and colors and things.
So, I'm going to select that artwork and I'm going to do a copy, and then back in Flash Catalyst, I'm going to paste it in. And again, as we are importing that vector artwork, it's going to remain at the bow in the Catalyst so that all the gradients and lines and paths are preserved. So now, I'm going to take that and I'm going to drag it over here where I want it and then I'm going to convert it to a vertical scroll bar.
Now, I have to do a little bit more work because I have to tell Catalyst which part of this artwork is the part that is supposed to slide around and which part is the boundaries for the sliding. So, I'm going to go ahead and dive into the scroll bar in this edit and place mode here and I'm going to go ahead and select the different pieces of artwork that I want to be the sliding part, which is called the thumb and I convert that to the thumb. And then I'm going to select the background here, I'm going to identify that as the track.
Now, when I converted the artwork for the gradient to a thumb, it actually made it into a button component. So, you can see here that it has four different states -- for up, over, down, and disable. These are the different states of the button as you interact with it. But, I haven't made any changes to the different states yet, so they all look the same.
So, it looks pretty good, but I decided after looking at this against this map that I really don't want it to be yellow. I want it to be the same kind of blue as the map when you first see it. And then, when you mouse over it, I want it to turn yellow. So, I'm going to go ahead, and I can actually take that artwork and I can tweak it back in Illustrator CS4. So, I'm just going to pop it open here, and say Edit in Illustrator CS4.
And now, what you'll see is you can see the artwork here. And it looks the same as it did before, but actually it has a bunch more structure in it now. It has all the structure of that scroll bar. All the work that I did in Flash Catalyst to set up the scroll bar, make the thumb, make the different states of the thumb, and so on is preserved when I open it back up in Illustrator.
And so, I can dive in here, I can select that gradient, and I can go ahead and make it blue. Go ahead and do that for this one too. And let's go ahead and tweak these two little arrows as well, which were yellow. Make those blue. That looks pretty good. So now, I can save this out. And I'm going to pop over back into Flash Catalyst, and we're going to take those changes back into Catalyst.
Ryan: What makes this round trip possible is something called FXG. FXG is a new graphics format that's actually a subset of MXML, and it allows us to do a lot of iterative design on our Flex Flash Catalyst projects using a round trip between the tools, and like NJ showed you, they maintain that exact same structure from Flash Catalyst.
NJ: That's right. So, when we merge it back into Catalyst here, you can see that now it is blue. And in fact, if I dive back into the scroll bar again, and I dive into the thumb, you can see here that we've got a blue upstate, and the other states are still yellow. So, that looks pretty good. Now, I want to do a little bit more complex interaction. So, I'm going to go back to this first page here. And I want to take this feature tour box, and I want to turn this into an interactive widget of its own.
So, I'm going to go ahead and select this content here, and I'm going to group it so it's a little easier to work with. And then, I'm going to go ahead and take some other content we have in here, which is hidden right now, which has a little map on it. I'm going to group that. And I'm going to take that content and I'm going to go ahead and turn it into a custom component.
So, we've seen built-- in components like buttons and scroll bars, which have their own built-- in behavior. But now, I can also create a completely custom component that has just the behavior that I want. So, I'm going to go ahead and double click into there. And first, I'm just going to show this feature tour information with this text.
And now, what I'm going to do is I'm going to create a new state. So, just like we had pages of the whole application, which were different places in the application that you can go to, a component can have different states that it goes into as the user interacts with it.
So, I'm going to go ahead and duplicate that state. I'm going to make the first state be called front, and I'm going to make the second state be called back. So, I'm in. And then, I'm going to turn off the front content here and turn off the back content. OK. So now, I have two different states.
And again, if we look down here at the timelines panel, you can see that we built a default sort of cross-fade animation for the two. But, what I want to do is I actually want to make it more interesting. I want it to actually flip around in three dimensions. So, I can use the new 3D effects that are in Flash Player 10.
So, I'm going to add a rotate 3D effect here, and I'm going to go ahead and set it up so that the front content spins around halfway. And then, I'm going to add another one here so that the back content spins around. And then, with the timeline here in Flash Catalyst, I can really quickly tweak the timing of all these things so it has the effect that I want.
So, I want the front content to spin around and fade out, and I want the back content to fade in at the same time, and then I want the back content to spin around. And now if I click play here, you can see that it has a nice 3D effect.
The last thing I have to do is I need to select this little arrow here, and I want to make that into a button that we can click on to go to the other state. Again, it's really easy. I just click the artwork. I prefer it to a button. Add an onClick interaction. Going to the back here. And now, I think we should be able to run this.
So now, I'm actually running the project, and what that's doing under the hood is it's building a Swift. It's building a piece of Flash content just like all the other parts of the Flash platform, all the other tools built. And we're going to see it in the browser here.
So now, we have Firefox, and I'm going to click on the arrow. You can see we have that nice 3D effect. And I can click on the tour finder and get the nice slide-- on. And then, I can grab the scrollbar here and slide it around. So, we all built that pretty fast from static artwork that we created in Photoshop.
So, I've been building all this interactivity directly in Flash Catalyst. I haven't been writing any code. But, what it's been doing under the hood is, as we said before, it's been creating a well-- formed Flex project with MXML code in it. And I can take this code, and I can very easily hand it off to a developer by simply saving this as an FXP package, which is just a Flex project that can be opened directly in the next version of Flex Builder.
Julie: So, when can I get my hands on Flash Catalyst?
Ryan: We're looking forward to getting community feedback, so we're going to be doing a public beta in early 2009. That will be available on Adobe Labs.
Julie: Great. In the meantime, where can people learn about Flash Catalyst?
NJ: Well, you can go to the website at www.adobe.com/go/flashcatalyst, and watch that space for information on the upcoming public beta.
Julie: Great. Well, thanks so much for taking the time to chat with us today and to show us all about Flash Catalyst.
NJ: Thank you.
Ryan: Great! Thanks Julie.
Julie: And that's it! I hope you enjoyed this edition of the Edge..