Click on any phrase to play the video from that point.
[ADOBE DEVELOPER CONNECTION] [Bear Travis] [Software Engineer] Hello. I'm Bear Travis, a Software Engineer, with the Flash Catalyst team. Today, I'd like to talk with you a bit about the new Skinnable Component feature in Flash Catalyst. So starting off, I've got this project that I've mocked up in Flash Catalyst called Pixel Pusher. It's an application for sharing screen shots and video clips. So if I run the project, you'll see what I have so far. And this project is just, so far, all Flash Catalyst functionality, so no new components or anything, but I think I've gotten pretty far. So what we've got is a list of images and video clips, we've got a categories list over here, we compose a new screenshot, or we can click on an individual item to view it. As you can see, we've got a video clip here, but you might also notice that we don't have any functionality attached to it yet-- it's just artwork. What we need to make that work in Flash Catalyst is we need a new developer component--a Skinnable Video Player. Fortunately, I've got a developer friend, who's already built one for me, and put it in a Library or an FXPL Project. What I need to do to make that work in Catalyst is I need to bring it in. So if I go to File/Import/Library Package, I can pull in that Skinnable Component. Now after that import is done, I have the Skinnable Component in my project, but just like any other Spark Skinnable Component, like a button or a data list, it doesn't show up in my Project Library; only skins for it will. So back in my application, let me navigate to that screenshot view from earlier, and I'm going to jump inside to access the Video Player. Now right here you can see the Video Player Art, and if we look over in the Layer's panel, we'll see that it's all in the Video Player Layer. So what I want to do is I want to select this, and convert it to my Skinnable Component. So I'm going to select Convert Artwork to Component/ Skinnable Component/ and the Select Skinnable Component Dialogue pops up. Now this dialogue is where all of the custom Skinnable Components built by a developer are going to show up, so if you ever want to see what list you have, you need to check here. But I'm going to select Custom Video Player and click Okay, and I'm going to name it Video Player Skin. Now this does the same thing that Catalyst does when creating any other Spark Skin. It takes the artwork that you had selected, wraps it inside a skin, and creates an instance of that Skinnable Component with that skin attached. So what we need to now is we need to go inside, edit the states, and edit the parts. So if I double click to Edit in Place, we can get an overall view of this Custom Skinnable Component. So we'll see that it has a Loading, Paused, and Playing state, and if I select the Artwork, we can see the various parts that it has; a Pause Button, a Play Button, a Seek Bar, the Video Part, and the Volume Bar. What I'm going to do first is I'm going to make sure that the stateful appearance of this component is correct So if I click on the Loading state--we don't want to display any controls yet, because the video hasn't loaded. So if I open up the Layers panel, you'll see that I've organized everything, so I'm going to hide the Pause Controls and the Playing Controls, and then if we go to the Paused state, I only want to display the Play Button, because the video is paused, and if you go to the Playing state, I want to display the Playing Controls; that Pause Button, the Seek Bar, and the Volume Bar. So now that I've made the stateful appearance correct, I need to assign the skin parts. The biggest part is, of course, the Video Player. So since I have that selected, I'll just assign it now. Next, we'll assign a Play Button then we'll go over to the Playing state to assign the Pause Button, the Seek Bar, and the Volume Bar. Now the Seek Bar and the Volume Bar are both horizontal sliders which means we need to go in and edit their parts as well. These horizontal sliders have two parts just like other Spark sliders. They have a Thumb which is what you click on and the Track which is what you slide the Thumb along, so I'm going to expand in the Layers panel again, I'm going to click this button which is the Thumb, and I'm going to click this Group which is the Track. Then I'm going to do the same thing for the Volume Bar. Take the Button, assign it to the Thumb. Take this Group down here and assign it to the Track. And that's all we have to do to make this Skinnable Video Player work. But I figured that this Placeholder Video isn't very interesting, so I'm going to replace that as well. So I'm just going to import a new video clip in its place, and that's it. So why don't we go ahead and run our project, and we can see this new Video Player in action. So, if you remember, I click on an item to go to its details, here you can see the Video Player, and we can click on it to see it run. We also notice that the Seek Bar is moving, we can click the Pause Button to go back to the Pause state, or we can just finish up. I think that's enough of that video clip. So now, what we can do is we can just save our project, or if we want to share it with a developer, we can go ahead and go to File/Export/Library Package for a Library project that a developer can easily bring into Flash Builder. That's it. Custom Skinnable Components in a nutshell. [Flash Catalyst Developer Center] [adobe.com/devnet/flashcatalyst] For more information, check out the Flash Catalyst Developer Center. Thanks for stopping by. [ADOBE DEVELOPER CONNECTION]
