We wanted to share with you a great video tutorial about how to use Adobe Flash Catalyst and create Flex Applications starting just with an image.
The tutorial explains in details how you can create a Flex button and a scrollbar using Catalyst.
Here you can see the live result and also download the project source code by right clicking inside the application.
Step 1:
Create Up, Over, Down, Disabled states for the button with Photoshop
1.1 Open Photoshop and choose the desired button size. I will choose 90×28px with transparent background.
1.2 Using the “rounded rectagle tool” create the button to look like in the image
1.3 Duplicate the existing layer, set the “Fill” property to 0 and then apply a gradient effect like in the image below.
1.4 now let’s make the button cloured 
. Apply to the first layer (original) an horizontal gradient overlay like in the image.
1.5 To make the button look even better we add a border and some inner glow to the originl layer like in the images below
1.6 Duplicate the first layer (original) and edit the colors so you can get all 4 states of our button.
1.7 after getting ready all states for the buttons export them 1 by 1 as .png and name them button_up.png button_over.png button_down.png and button_dis.png
Step 2:
Add images to project and create CSS for the button
2.1 Create an Adobe Flex project and name it PhotoshopButton.
2.2 Create a folder inside the /src folder and name it /images
2.3 Copy the 4 png images to /src/images/
2.4 Create a folder inside the /src folder and name it /css, inside this folder Add a new css file and name it main.css
2.5 Inside the main.css file add the following button style:
/* CSS file */
Button
{
up-skin: Embed(source="/images/button_up.png");
over-skin: Embed(source="/images/button_over.png");
down-skin: Embed(source="/images/button_down.png");
disabled-skin: Embed(source="/images/button_dis.png");
selected-down-skin: Embed(source="/images/button_down.png");
selected-up-skin: Embed(source="/images/button_down.png");
color: #ffffff;
roll-over-color: #000000;
disabled-color: #efefef;
}
2.6 Your project should look until now like this
2.7 Open the PhotoshopButton.mxml file and add the reference to your css file
<mx:Style source="css/main.css"/>
//Then add some buttons and let's see how does it look 
<mx:HBox width= "100%" horizontalAlign="center">
<mx:Button label= "Click Me!"/>
<mx:Button label= "Disabled" enabled= "false"/>
</mx:HBox>
And again the result…
That’s all, enjoy!