Nick Kuh – Freelance iPhone, iPad, iOS Developer and Consultant – Brighton, UK

Hopefully this quick post will be a bit of a time saver for Flex Developers developing Flex 4 SDK projects with Flash Builder or other tools…

Over the last year or 2 I’ve really got comfortable with reskinning Flex 3 applications. For me the quickest, simlest way has usually been to cut up the designer’s photoshop file and implement Scale 9 and syntax in my Flex css files – an example of a recent Flex 3 button skin looked like this:

.answerButton
{
fontSize    : 44px;
fontWeight    : bold;
paddingLeft    : 15px;
paddingRight: 15px;

upSkin        : Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);
overSkin    : Embed(source=”assets/images/new/buttons/answerButtonOver.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);
downSkin    : Embed(source=”assets/images/new/buttons/answerButtonOver.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);
disabledSkin: Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);
selectedDisabledSkin: Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);

}

Luckily for me the Flex 4 SDK is backwards compatible for the most part so you can still skin an mx.controls.Button component with the CSS above.

However… one of the reasons I’ve been migrating my Flex 3 project to Flex 4 is to make use of some of the skinning improvements it offers with it’s new Spark components built on top of the Flex 3 halo components.

The code above does not work on a spark.components.Button. I assumed it would… Here’s how I got the example below to work:

http://www.nickkuh.com/demos/gumbo/scale_nine/

Step 1) Create a new Flex Project in Flash Builder

Step 2) You can still customize the label colours and states but you’ll need to implement the new namespaces in CSS introduced in Flex 4 to avoid warnings and errors – see the gumbo_scale_nine.css file.

Step 3) You’ll also notice within the gumbo_scale_nine.css file that I’m pointing a custom style (‘answerButton’) to an MXML skin file in the location com.nickkuh.skins.AnswerButtonSkin.mxml. This is the file that I’ve used to custom skin the spark button component. I copied the ButtonSkin.mxml file that comes with Flex 4, stipped out a load of fills and strokes I didn’t require and add these important lines:

<s:BitmapImage left=”0″ right=”0″ top=”0″ bottom=”0″ source=”@Embed(source=’assets/answerButtonUp.png’,scaleGridTop=’20′, scaleGridLeft=’19′, scaleGridRight=’145′,  scaleGridBottom=’99′)” resizeMode=”scale” includeIn=”up” />

<s:BitmapImage left=”0″ right=”0″ top=”0″ bottom=”0″ source=”@Embed(source=’assets/answerButtonOver.png’,scaleGridTop=’20′, scaleGridLeft=’19′, scaleGridRight=’145′,  scaleGridBottom=’99′)” resizeMode=”scale” excludeFrom=”up” />

By default the resizeMode parameter will just tile and repeat your graphic which wasn’t the desired functionality.

So that’s it. Although it took more step to reskin than a Flex 3 component I can certainly see the benefits of the separate FXG skin file. Next step is to change that SimpleText labelElement into a RichEditableText component and enable multilines and imline images into my Spark buttons. Wish me luck!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Subscribe to the comments on this post

Get Lippy! is a fun entertainment Application that I built for the iPhone earlier this year (2009).

This silly iPhone App automatically records when users talk into the microphone. Then it trims the sound input and plays back the speech either like a Chipmonk or Barry White: the App enables you to control the pitch adjustment.

You can choose pictures from your iPhone library or take your own on the fly and then select from 4 comic talking mouths that you can resize/reposition to overlay your photos. When the app plays back a recording it animates the lips fast or slow depending on the pitch as it detects audio levels.

New functionality in version 1.1 includes the ability for users to submit their animated recordings to the Get Lippy Gallery and send them to their mates.

www.getlippy.net

Download Get Lippy! from the App Store

Update (4th October 09): Recently I was chosen as one of the 3 minute wonders to speak at Flash on the Beach ’09 conference. My presentation was about the iPhone Development Workflow from a Flash Developer’s perspective. You can see the video and a few more details here.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Subscribe to the comments on this post