Dan Tavelli’s blog Blog

So after playing with my buddies iPhone the other day I realized i had the animation all wrong. So I’ve corrected that and also tried to size it closer to a normal flex button.

My current strategy for implementing the iPhoneToggle is to just use it as a skin of a normal checkbox component using the following code in the flex style declaration:

1
2
3
4
5
6
7

<mx:Style>
 
    CheckBox {
    	skin: ClassReference("iPhoneToggleControl");
    }
 
</mx:Style>

Seems to be a decent approach and it has some advantages, but I’d like to be able to allow for changing colors and on/off labels through the component properties. So if I can figure out how to just extend the checkbox while using the skins exported from flash I would switch to that.

Here is my latest progress.

edit: i’ve added an over state with some texture on the switch button. for some reason i can’t get it to not show up for the selectedUp state.

edit: i just added transparent icon to substitute for the icon to get rid of it, not great looking code.

So I read up on the Adobe Flex Component Kit for Flash CS3 and exported my first custom component to Flex. I was pretty stoked to get the transition part of it working although im not sure why, I guess something about going back to the good ole timeline in flash. So now I’ve got the style and the transitions coming along, but still lots of more work to be done until it’s a bonified component. One thing I definitely want to try and get working is to be able to drag the switch from on to off instead of just clicking.

Somehow I have managed to call this component at least 4 different names in the span of two blog posts, so I’m going to try and refer to it as the iPhone Toggle Control or maybe just iPhoneToggle from here on out.

latest progress:

Just saw this post: iPhone Toggle Switch - a great new control over Ryan Guill’s blog about developing a Flex Toggle Component as seen in the iPhone settings screens. I think it’s a sweet idea and I could definitely see uses for it in different flex projects.

I’ve been reading up on some articles by Peter Ent developing Flex components from scratch tonight and my hope is to eventually implement some of the things Ryan was scheming up like different background colors, custom labels, and transitions and make this component happen.

In the mean time I did a quick skin of the checkbox component with some graphics i cropped from the web, so here it is iPhoneToggleSwitch v 0.1: