Day 12: Tab Navigator Component
And one more makes twelve! Hurray!
This component is pretty simple, buttons 1-10 that, when clicked, navigate through pages 1-10. They also disable the button for the current page, so the component acts like a combination of a tab bar and content. The bonus here is not having to wire up all those "On Click > Go To State > When In State" interactions for each button.
Click on the image for a preview.
The FXP is available here.
Details after the jump.
Day 11: Flickr Feed
One more skinnable component I created a while ago while I was learning to write skinnable components. It pulls a list of recent images uploaded to Flickr, with the ability to search by tag or user id. The component uses a list skin part, meaning you will need to work with an existing skin in order to preserve the list skin part assignment.
Click on the image to view the swf.
I went with a refrigerator magnet theme. If you're lucky, you may be seeing another skin from Tara.
You can download the FXP here.
Details after the jump.
Day 10: YouTube Component
I've seen a couple requests for embedding YouTube videos in Flash Catalyst projects. This skinnable component pulls in a YouTube video at runtime, using a video id and the YouTube AS3 API.
Click the image to view the running example.
You can download the FXP here,
Or the FXPL here.
More details after the jump.
Day 8: Drag and Drop Lists
I decided to whip a simple custom skinnable component to enable drag and drop between lists. I've posted a quick sample skin of how this might look in a 'these are a few of my favorite things' drag/drop scenario, which allows a user to drag from a source list to a target list.
Check it out by clicking on the image below:
Download the FXP here.
Download the FXPL here.
More info after the jump.
Day 7: FlightBox
I mocked up a quick Flex Lightbox component, which I have lovingly dubbed "FlightBox." Click on the image below to hop to the actual swf.
Take an image list and wrap it inside the FlightBox skin. You must also include a skin part, the "chrome," that surrounds the popped up image. In this case, the chrome looks like a polaroid photo. The tiled background is courtesy of squidfingers.
Day 5: Weather Component
Howdy doody, here's a weather component. It displays the forecast for up to the next 7 days. In this case, the skinnable component is using the zip code "94103" -- that's San Francisco, so there's a good chance for rain.
Click the image to view the running example.
The project is available here. There's an overall weather component that takes a zip code, and provides information for up to seven single day forecast components. It is currently pulled from the NOAA weather forecast service. Happy forecasting!
Details after the jump
Day 1: Fullscreen Button
If any of you tried to make fullscreen applications in Flash Catalyst 1.0, you know that there was some tinkering necessary in Builder. While it's a great way to get your feet wet with Flex, sometimes you'd like something easier. So, I present to you, the Fullscreen Button Component as the first skinnable component of Christmas! Just skin the button, specify the button to make your application go fullscreen, and the skinnable component will handle the rest.
So let's get cooking!
The 12 (Skinnable) Components of Christmas
Howdy folks!
The FlashCats crew has been super busy recently. The Panini preview release is keeping us all on our collective toes. But, with the holidays just around the bend, we thought it'd be nice to share some entirely non-denominational gifts. And, seeing as how Panini is our bread and butter (har har, I crack myself up sometimes), we thought we'd share some custom skinnable components to get everyone in the holiday spirit. Now, we're going to try to get these out on a semi-regular schedule, but with the chaos that always comes right before the holidays, no promises. We may not finish before Christmas, heck, we may not even finish, but we're darn well going to try!
-The FlashCats Crew
Using Custom Skinnable Components in Panini
I'd like to do a quick introduction to custom skinnable components in Panini. Panini, in case you haven't heard, is the code name for the next version of Flash Catalyst, and you can download a trial version on Adobe Labs. Custom skinnable components are a new feature in Panini, one that can make life for both designers and developers significantly easier. For this example, we're going to build the following swf.
While this was possible in Catalyst 1.0, it could be a lot of work to add an additional "Slide" and the corresponding button interactions. With custom skinnable components, it's incredibly simple because a developer can create a component with the "Go forward" and "Go backward" logic built right in.
Is Panini sounding tasty? Take a bite!