Click on any phrase to play the video from that point.
[Adobe Developer Connection] Hello. I'm Bear Travis, a software engineer with the Flash Catalyst team. Today, I'm going to take you through the new designer/developer workflow between Flast Catalyst and Flash Builder in CS5.5. So to start off with, I've got a prototype for an application called pixel pusher that a designer has made for me in Flash Catalyst. Let's take a peek at what that looks like. So if you see, in Firefox I've got this list of items. Here's our logo, and we can post a new screenshot or drill into an individual item, and this application is for sharing screenshots and images, and we can post comments on them and kind of close out the comments. As you can see here, I've got a video clip. Now that the designer has built this for us, what we want to do is to put the actual logic behind it. The next step is, of course, to bring it over to builder and start building a project. What we need to do at this point is we need to consider what's the best way to divide the work between the designer and developer. In this case, what we have decided to do is I'm going to build a library project that I'm going to round trip with Catalyst, and I've also built a project where all the actual logic can be put. So if you look in builder here, I've got this Pixd project, which contains all of the actual logic, such as connecting to a server or posting images and stuff like that, and I've got this Pixd-skinning library. My goal is that this library is going to contain everything that I want to round trip with Catalyst-- a bunch of skinable components and the actual skins for the project. Let me talk a bit about what's in this library. As you can see, I've created I've created a bunch of skinnable components-- the category bar for that sidebar, a comment bar for popping up-- like everything that we want a designer to be able to work with in Flash Catalyst. The nice thing about this is that skinnable components are a good way of dividing the behavior and the design of a component, and they work just like other Spark skinnable components in Catalyst-- a button, a data list, a slider, anything like that. When I'm ready to export a project for working on it in Catalyst, I just select Library, chose File, Export Flash Builder Project, and we can export this as an FXPL. Now, an important thing to keep in mind is that not everything that you can build in Builder, you can edit in Flash Catalyst. For example, I've created a project here that has a couple compatibility issues that will make certain aspects not editable in Catalyst. So any new project that's created in Catalyst that's brought into Builder, or any project that's created through the File, New, Flash Catalyst Compatible Project option, will be automatically be checked for Flash Catalyst compatibility, but if we have an existing project--like this one--that we created in Builder, and we want to validate it, we can select it and go Project, Flash Catalyst, Run Compatibility Checker. Any issues with our project that will limit the editability in Catalyst will show up in the Problems Panel down here. If I pull that up, I see that I have one warning and seven infos, and a good rule of thumb is that any Catalyst-compatibly warning will generally make your project not editable in Catalyst. An info, on the other hand, will make a certain part not editable in Catalyst. For example, you might have a component that you're not able to edit and play, so you might have a skin that you also can't edit and play, or perhaps you can't use the Design Time data panel. So if we look at the warning, a good place to start is just with the type over here, which is a Flash Catalyst project incompatibility, we can also see a description of it. So using the type and description is generally a good way to diagnose any problems you might have. In this case, we can see that it's a project-level incompatibility, so we're not going to be able to edit this at all in Catalyst, and we can also see that it's a configuration on this project--the flex theme is incorrect. One good thing about the initial breakdown that we had here in a project in a Flash Catalyst compatible library is that we can try and isolate anything that we need to be round-trip-able with Catalyst inside of the Library, and then we can put all of the other stuff--the logic that might not be Catalyst compatible--into the main project. Now it's time to show you how you can actually use that library in Flash Catalyst. If I jump over to Flash Catalyst, I see that I've got a new project, and I've just imported an AI mockup of it. What I need to is I need to bring in those skinnable components in the library the developer made for me, and I need to begin the process of creating the skinnable components. Let's start by bringing in that library project, and I'll go File, Import, Library Package, and I'll chose the Pixd-skinning library I exported. This will just pull in the skinnable components from that library. Then what I can do is I can go through the skinnable components--selecting the artwork and converting them to skinnable components. For example, I'll just convert this to a category bar, and we'll call it category bar skin. [CategoryBarSkin] Now the designer is responsible for basically finishing up this process of skinning, so they need to convert all of this artwork to skins, modify the skin states and assign the skin parts. Once they're done, they can export this library for the developer in Builder through File, Export, Library Package. Let's just call this Pixd-skinning designer. [Pixd-Skinning-Designer fxpl] Back in Builder, it's now the developer's job to bring those changes into the project. Now, there are a couple ways of doing this. If the developer hasn't modified the library, they can just delete the library and re-import the new one, but often times, if they've made changes to the skinnable components at the same time the designer is modifying the skins, they'll need to import a new library and then manually manage the files. In this case, I'm just going to pull in the new library from File, Import Flash Builder Project, and I'm going to pick up that library. Then what I can go and do is go through the process of bringing these skins from the components package into the Pixd-skinning library, which my project is actually using. Now, I want to just who you one quick other way to round trip your project with Catalyst. If we're round-tripping an entire project, and that entire project is Flash Catalyst compatible, you can just select the project--chose Project, Flash Catalyst, Edit Project in Flash Catalyst. What this'll is it'll launch the project in Flash Catalyst where we can edit it, then just save out the changes and chose Resume Working on Project in Flash Builder. So that's it--a quick overview of the designer/developer workflow in Flash Catalyst. [Flash Catalyst Developer Center - adobe.com/devnet/flashcatalyst] If you have questions, check out the Flash Catalyst Developer Center. Thanks for stopping by, and I'll see you next time. [Adobe Developer Connection]
